@tmorrow/cre8-wc 1.2.4 → 1.2.5

package/lib/components/inline-alert/inline-alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-alert.js","sourceRoot":"","sources":["../../../components/inline-alert/inline-alert.ts"],"names":[],"mappings":"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","sourcesContent":["import svgWarningFilled from '@tmorrow/cre8-wc/icons/System/Filled/Warning.svg?raw';\nimport svgCheckCircle from '@tmorrow/cre8-wc/icons/System/Filled/Check.svg?raw';\nimport svgInfoFilled from '@tmorrow/cre8-wc/icons/System/Filled/Info.svg?raw';\nimport svgErrorFilled from '@tmorrow/cre8-wc/icons/System/Filled/Error.svg?raw';\nimport svgHelpFilled from '@tmorrow/cre8-wc/icons/System/Filled/Help.svg?raw';\nimport { html, nothing,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './inline-alert.styles.js';\nimport '../icon/icon';\n\n/**\n * In cases when it is necessary to alert the user but a less strong message that cannot be dismissed is desired,\n * use an in-line contextual alert message as the least \"severe\" message type.\n * These can be displayed anywhere on the page, but should never cover content.\n * Inline alerts do not include a title or close capability and are considered minimally intrusive user messaging.\n *\n * @slot - The component content\n */\nexport class Cre8InlineAlert extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     *  DEPRECATED: Icon name used for the icon before to the field note\n     * @deprecated\n    */\n    @property()\n        iconName?: string;\n\n    /**\n     * Full width Inline Alert\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        fullWidth?: boolean;\n\n    /**\n     * Icon title used for the icon alt text\n     */\n    @property()\n        iconTitle?: string;\n\n    /**\n     * Variant\n     * - **subtle** (default) renders an alert message in a padded container with a with a border and background color\n     * - **transparent** renders an alert message with no padded container, border, or background color\n     */\n    @property()\n        variant: 'transparent' | 'subtle' = 'subtle';\n\n    /**\n     * Status\n     * - **default** renders an inline alert with the brand colors\n     * - **error** renders an inline alert with an error state\n     * - **warning** renders an inline alert with a warning state\n     * - **success** renders an inline alert with a success state\n     * - **attention** renders an inline alert with an attention state\n     * - **neutral** renders an inline alert with a nuetral state\n     */\n    @property({ type: String })\n        status?: 'error' | 'warning' | 'success' | 'attention' | 'neutral' | 'help' | 'info' = 'info';\n\n    /*\n    * Maps modal icons and modal status variants to what the alt text of the related icon should be see:\n    *#\n    * this provides the recommendated alt text of different statuses\n    */\n    private mapStatusToIconInlineAlert(status: string) {\n        switch (status) {\n            case 'error':\n                return html`<cre8-icon \n                svg='${svgErrorFilled}' \n                aria-label=\"${this.iconTitle}\"\n                aria-hidden=\"true\"\n                class=\"cre8-c-inline-alert__icon\"></cre8-icon>`;\n            case 'success':\n                return html`<cre8-icon \n                svg='${svgCheckCircle}' \n                aria-label=\"${this.iconTitle}\"\n                aria-hidden=\"true\"\n                class=\"cre8-c-inline-alert__icon\"></cre8-icon>`;\n            case 'warning':\n                return html`<cre8-icon \n                svg='${svgWarningFilled}'\n                aria-label=\"${this.iconTitle}\"\n                aria-hidden=\"true\"\n                class=\"cre8-c-inline-alert__icon\"></cre8-icon>`;\n            case 'help':\n                return html`<cre8-icon \n                svg='${svgHelpFilled}'\n                aria-label=\"${this.iconTitle}\"\n                aria-hidden=\"true\"\n                class=\"cre8-c-inline-alert__icon\"></cre8-icon>`;\n            case 'info':\n                return html`<cre8-icon \n                svg='${svgInfoFilled}'\n                aria-label=\"${this.iconTitle}\"\n                aria-hidden=\"true\"\n                class=\"cre8-c-inline-alert__icon\"></cre8-icon>`;\n            case 'attention':\n                return html`<cre8-icon \n                svg='${svgInfoFilled}'\n                aria-label=\"${this.iconTitle}\"\n                aria-hidden=\"true\"\n                class=\"cre8-c-inline-alert__icon\"></cre8-icon>`;\n            case 'neutral':\n                return html`<cre8-icon \n                svg='${svgHelpFilled}'\n                aria-label=\"${this.iconTitle}\"\n                aria-hidden=\"true\"\n                class=\"cre8-c-inline-alert__icon\"></cre8-icon>`;\n            default:\n                return nothing;\n        }\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-inline-alert', {\n            'cre8-c-inline-alert--transparent': this.variant === 'transparent',\n            'cre8-c-inline-alert--error': this.status === 'error',\n            'cre8-c-inline-alert--warning': this.status === 'warning',\n            'cre8-c-inline-alert--success': this.status === 'success',\n            'cre8-c-inline-alert--attention': this.status === 'attention',\n            'cre8-c-inline-alert--neutral': this.status === 'neutral',\n            'cre8-c-inline-alert--help': this.status === 'help',\n            'cre8-c-inline-alert--info': this.status === 'info',\n            'cre8-c-inline-alert--full-width': this.fullWidth,\n        });\n\n        return html`\n        <div class=\"${componentClassNames}\">\n            ${this.iconName || this.status\n        ? html` ${this.mapStatusToIconInlineAlert(this.status)}`\n        : ''\n}\n            <div class=\"cre8-c-inline-alert__body\">\n                <slot></slot>\n            </div>\n        </div>\n        `;\n    }\n}\n\nif (customElements.get('cre8-inline-alert') === undefined) {\n    customElements.define('cre8-inline-alert', Cre8InlineAlert);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-inline-alert': Cre8InlineAlert;\n    }\n}\n\nexport default Cre8InlineAlert;\n"]}

package/lib/components/inline-alert/inline-alert.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=inline-alert.styles.d.ts.map

package/lib/components/inline-alert/inline-alert.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-alert.styles.d.ts","sourceRoot":"","sources":["../../../components/inline-alert/inline-alert.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA+uBV,CAAC;AACH,eAAe,MAAM,CAAC"}