Nepotistic Pontifex Maximus

    @uxland/uxl-interaction
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.9 • Public • Published

    UXL Interaction npm version

    Build Status Statements Branches Functions Lines
    Build Status Statements Branches Functions Lines

    Installation

    npm i @uxland/uxl-interaction

    Description

    <uxl-interaction> is a component that provides a material design based interaction service for your application.

    Usage

    The component provides 2 methods that correspond to 2 modes of interaction with the user:

    doConfirm(options, localizer) : provides a dialog that interrupts the flow of use of the application to ask for some type of confirmation, either through a message, form or customized information.

    notify(options, localizer) : provides a snackbar to notify the user of some information related to the flow of the application

    The component can be can customized through passing some properties to the methods what we have seen.

    Mode doConfirm()

    Options

    containerId?: string;: id for the parent container

    title?: string;: text that displays on dialog header

    titleArgs?: Object;: arguments for the title

    message?: string;: text that displays on dialog content

    messageArgs?: Object; arguments for the message

    showCloseButton?: boolean;: set to true if you want a close button on header

    type?: ConfirmType;: the type of interaction, that provides color theming. You can choose for danger' | 'warning' | 'info' | 'success'

    fullScreen?: boolean;: set to true if you want display the dialog on fullscreen

    styles?: ConfirmStyles;: an object that provides some variables to customize parts from dialog like background color, button colors, etc

    acceptLabel?: string;: the text that displays on accept button label

    cancelLabel?: string;: the text that displays on cancel button label

    modal?: boolean;: set to true if you want to display the dialog on modal mode. This option, disables outside dialog click and display a black foreground, to focus user on dialog

    headerDismiss?: boolean;: set to true if you want to close dialog clicking on header region

    withoutActions?: boolean;: set to true if you want to hide the actions from dialog. For example, if you want to use dialog to only show information

    htmlTag?: string;: if you want to change the content template unless display a simple message, you can pass an htmltag and htmlUrl to display your custom template

    htmlUrl?: string;: if you want to change the content template unless display a simple message, you can pass an htmltag and htmlUrl to display your custom template

    model?: T;: if you want pass a custom model to display some information for your application, set these property with your custom data.

    Styling

    Stylable Shadow Parts

    The following styleable part's of the element confirm-component are available for styling:

    Shadow tree part Description Style outside of shadow tree
    <paper-dialog part="dialog">... The confirm dialog parent element confirm-component::part(dialog) {...}
    <div id="header" part="header">... The header of the confirm dialog confirm-component::part(header) {...}
    <h2 part="title">... The title of the confirm dialog confirm-component::part(title) {...}
    <div id="content" part="content">... The content of the confirm dialog confirm-component::part(content) {...}
    <div id="actions" part="actions">... The action footer of the confirm dialog confirm-component::part(actions) {...}
    Mixins

    The following custom properties and mixins are available for styling:

    Custom property Description Default
    --uxl-interaction-text-color Text color of the dialog script option styles: {textColor: string}
    --uxl-interaction-background-color The background color of the dialog script option styles: {backgroundColor: string}
    --uxl-interaction-icon-color Fill color of the svg icon that close dialog script option styles: {closeIconColor: string}
    --uxl-interaction-accept-button-color Color of the acept button of the dialog script option styles: {acceptColor: string}
    --uxl-interaction-header-background-color The header background color of the dialog script option styles: {headerBackgroundColor: string}
    --uxl-interaction-title-size The font size of the title no script option
    --uxl-interaction-title-color The color of the title no script option
    --uxl-interaction-actions-background-color The action background color of the dialog script option styles: {actionsBackgroundColor: string}
    --uxl-interaction-dialog-width The width of the dialog script option styles: {width: string}
    --uxl-interaction-dialog-height The height of the dialog script option styles: {height: string}
    --uxl-interaction-content-height The content height of the dialog script option styles: {height: string}
    Variables from script option 'Styles'

    The following custom properties and mixins are available for styling:

    Custom Variable Description Default
    textColor Text color of the dialog --paper-dialog-color --primary-text-color
    backgroundColor The background color of the dialog --paper-dialog-background-color --primary-background-color
    closeIconColor Fill color of the svg icon that close dialog --iron-icon-fill-color currentcolor
    acceptColor Color of the acept button of the dialog by script option type: 'danger', 'warning', 'info' or 'success'
    headerBackgroundColor The header background color of the dialog transparent
    actionsBackgroundColor The action background color of the dialog transparent
    width The width of the dialog 40vw
    height The height or the content of the dialog auto

    Mode notify()

    Options

    message?: string;: text that displays on snackbar content

    messageArgs?: Object;: arguments for the message

    htmlTag?: string;: if you want to change the content template unless display a simple message, you can pass an htmltag and htmlUrl to display your custom template

    htmlUrl?: string;: if you want to change the content template unless display a simple message, you can pass an htmltag and htmlUrl to display your custom template

    delay?: number;: the time that snackbar remains on screen after call

    showCloseButton?: boolean;: set to true if you want a close button on snackbar

    type?: NotifyType;: the type snackbar, that provides color theming. You can choose for danger' | 'warning' | 'info' | 'success'

    position?: NotifyPosition;: the position of snackbar on the screen. You can choose for 'bottom' | 'center' | 'top'

    styles?: NotifyStyles;: an object that provides some variables to customize parts from dialog like background color, button colors, etc

    classifiers?: NofifyClassifiers[];: an array of classes to custom more the snackbar.

    model?: T;: if you want pass a custom model to display some information for your application, set these property with your custom data.

    Styling

    Stylable Shadow Parts

    The following styleable part's of the element notify-component are available for styling:

    Shadow tree part Description Style outside of shadow tree
    <paper-toast part="toast">... The notify parent element notify-component::part(toast) {...}
    Mixins

    The following custom properties and mixins are available for styling:

    Custom property Description Default
    --uxl-interaction-notify-icon-color Fill color of the svg icon that close toast script option styles: {iconColor: string}
    --uxl-interaction-notify-text-color Text color of the toast script option styles: {textColor: string}
    --uxl-interaction-notify-background-color The background color of the toast script option styles: {backgroundColorr: string}
    --uxl-interaction-notify-padding The background color of the toast script option styles: {backgroundColorr: string}
    Variables from script option 'Styles'

    The following custom properties and mixins are available for styling:

    Custom Variable Description Default
    iconColor Fill color of the svg icon that close toast --iron-icon-fill-color currentcolor
    textColor Text color of the toast --paper-toast-color #f1f1f1
    backgroundColor The background color of the toast --paper-toast-background-color #323232

    Localizer

    You can pass a custom localizer function to doConfirm() and notify() methods to localize the messages displayed on interaction components.

    NotifyMixin and ConfirmMixin

    This component, provides a Mixins to implement on your custom templates when you pass a custom component via htmlTag and htmlUrl. This Mixin, provides to your custom templates, the model property and some methods to overwrite accept() or canAccept() methods, if you want to do some validation before user confirm the interaction.

    Install

    npm i @uxland/uxl-interaction

    DownloadsWeekly Downloads

    100

    Version

    3.0.9

    License

    Apache-2.0

    Unpacked Size

    84.7 kB

    Total Files

    44

    Last publish

    Collaborators

    • avizcaino
    • uxland-admin