@tmorrow/cre8-wc 1.2.4 → 1.2.5

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../components/alert/alert.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,gBAAgB,MAAM,sDAAsD,CAAC;AACpF,OAAO,cAAc,MAAM,oDAAoD,CAAC;AAChF,OAAO,aAAa,MAAM,mDAAmD,CAAC;AAC9E,OAAO,cAAc,MAAM,oDAAoD,CAAC;AAChF,OAAO,kBAAkB,MAAM,wDAAwD,CAAC;AACxF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,cAAc,CAAC;AACtB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC;;;;;;;;;;;;;GAaG;AAEH,MAAM,OAAO,SAAU,SAAQ,WAAW;IAA1C;;QAGI,sBAAsB;QAEtB,WAAM,GAMY,MAAM,CAAC;QAEzB,yBAAyB;QAEzB,YAAO,GAA4B,YAAY,CAAC;QAGhD,aAAQ,GAAwB,QAAQ,CAAC;QAIzC,cAAS,GAAW,SAAS,CAAC;QAS9B,eAAU,GAAW,SAAS,CAAC;QAG/B,YAAO,GAAW,SAAS,CAAC;QAwBpB,uBAAkB,GAAG,GAAG,EAAE;YAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;gBAC7B,OAAO,KAAK,CAAC;YACjB,CAAC;YAAC,OAAO,IAAI,CAAC;QAClB,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,MAAc,EAAE,EAAE;YAC9C,QAAQ,MAAM,EAAE,CAAC;gBACb,KAAK,OAAO;oBACR,OAAO,IAAI,CAAA;qBACN,cAAc;4BACP,IAAI,CAAC,SAAS;;;4BAGd,CAAC;gBACjB,KAAK,SAAS;oBACV,OAAO,IAAI,CAAA;qBACN,cAAc;4BACP,IAAI,CAAC,SAAS;;;4BAGd,CAAC;gBACjB,KAAK,SAAS;oBACV,OAAO,IAAI,CAAA;qBACN,gBAAgB;4BACT,IAAI,CAAC,SAAS;;;4BAGd,CAAC;gBACjB,KAAK,cAAc;oBACf,OAAO,IAAI,CAAA;qBACN,kBAAkB;4BACX,IAAI,CAAC,SAAS;;;4BAGd,CAAC;gBACjB,KAAK,MAAM;oBACP,OAAO,IAAI,CAAA;qBACN,aAAa;4BACN,IAAI,CAAC,SAAS;;;4BAGd,CAAC;gBACjB,KAAK,SAAS;oBACV,OAAO,IAAI,CAAA;qBACN,aAAa;4BACN,IAAI,CAAC,SAAS;;;4BAGd,CAAC;gBACjB;oBACI,OAAO,OAAO,CAAC;YACvB,CAAC;QACL,CAAC,CAAC;IAwDN,CAAC;IArHG;;;OAGG;IACH,SAAS;QACL,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC,OAAO;IAClC,CAAC;IAyDD,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,cAAc,EAAE;YACjE,qBAAqB,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;YAC9C,oBAAoB,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;YAC5C,4BAA4B,EAAE,IAAI,CAAC,MAAM,KAAK,cAAc;YAC5D,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAClD,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAClD,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAClD,0BAA0B,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;YACzD,sBAAsB,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACjD,+BAA+B,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;YAC3D,8BAA8B,EAAE,IAAI,CAAC,cAAc;SACtD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC,SAAS;YACjB,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,IAAI,CAAA;;0BAEQ,mBAAmB;;kBAE3B,IAAI,CAAC,MAAM;gBACT,CAAC,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;gBAClD,CAAC,CAAC,EAAE;;;sBAGF,IAAI,CAAC,UAAU;gBACjB,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,UAAU,EAAE;gBAC1B,CAAC,CAAC,EAAE;sBACF,IAAI,CAAC,cAAc;gBACrB,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAC,IAAI,CAAA;;2BAEC,QAAQ;;;;;iCAKF,IAAI;8BACP,IAAI,CAAC,SAAS;iCACX,IAAI,CAAC,kBAAkB,EAAE;8BAC5B;;;;;;2CAMa,IAAI,CAAC,OAAO;;;;;;SAM9C,CAAC;IACN,CAAC;;AArKM,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAIzB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAOH;AAIzB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACoB;AAGhD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACa;AAIzC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACG;AAM9B;IADC,QAAQ,EAAE;4CACQ;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACI;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACC;AAO5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACvB;AAOpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAClB;AAyH7B,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE,CAAC;IACjD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AACnD,CAAC;AAQD,eAAe,SAAS,CAAC","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 svgLightbulbFilled from '@tmorrow/cre8-wc/icons/System/Filled/Lightbulb.svg?raw';\nimport svgClose from '@tmorrow/cre8-wc/icons/System/Regular/Close.svg?raw';\nimport { html, nothing, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '../button/button';\nimport '../link/link';\nimport '../heading/heading';\nimport '../text-passage/text-passage';\nimport '../icon/icon';\n\nimport { Cre8Element } from '../cre8-element';\nimport styles from './alert.styles.js';\n\n/**\n * The general purpose of an alert or notification is to draw the user’s attention\n * and provide the user with timely, relevant information.\n *\n * ## Alert Styles:\n * - There are 6 statuses for 6 types of alerts: 'error', 'info', 'notification', 'neutral', 'warning', 'success'.\n * Each alert will have different icon to be displayed in the alert.\n * - Users can select two types of alert variants: 'standalone', or 'banner'.\n * - User can also choose the alert should be emphasized or not. There are two options: subtle or strong.\n * - User can add button or link in the alert.\n * If users choose to emphasize the alert (**strong**), user needs to used **\"inverted\"** prop in button or link.\n * - User can choose whether the alert can be dismissed or not\n *\n */\n\nexport class Cre8Alert extends Cre8Element {\n    static styles = [styles];\n\n    /** The alert type. */\n    @property({ reflect: true })\n    status?:\n        | 'error'\n        | 'info'\n        | 'notification'\n        | 'neutral'\n        | 'warning'\n        | 'success' = 'info';\n\n    /** The alert variant. */\n    @property({ reflect: true })\n    variant: 'standalone' | 'banner' = 'standalone';\n\n    @property({ reflect: true })\n    emphasis: 'subtle' | 'strong' = 'subtle';\n\n\n    @property({ type: String })\n    iconAlert: string = undefined;\n\n    /**\n     * Icon title used for the icon alt text\n     */\n    @property()\n    iconTitle?: string;\n\n    @property({ type: String })\n    headerText: string = undefined;\n\n    @property({ type: String })\n    ctaBody: string = undefined;\n\n    /**\n     * Dismissed property\n     * 1) State that changes to true and is removed when the banner is dismissed\n     */\n    @property({ type: Boolean, reflect: true })\n    dismissed?: boolean;\n\n    /**\n     * Dismissable property\n     * 1) Adds the ability to close when toggled to true\n     */\n    @property({ type: Boolean, reflect: true })\n    notDismissible?: boolean;\n\n    /**\n     * On banner dismiss\n     * 1) Function that toggles dismissed to true and removes the banner from the UI\n     */\n    onDismiss() {\n        this.dismissed = true; /* 1 */\n    }\n\n    private checkEmphasisAlert = () => {\n        if (this.emphasis === 'subtle') {\n            return false;\n        } return true;\n    };\n\n    private mapStatusToIconAlert = (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-alert__icon\"\n              ></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-alert__icon\"\n              ></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-alert__icon\"\n              ></cre8-icon>`;\n            case 'notification':\n                return html`<cre8-icon\n              svg=\"${svgLightbulbFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></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-alert__icon\"\n              ></cre8-icon>`;\n            case 'neutral':\n                return html`<cre8-icon\n              svg=\"${svgInfoFilled}\"\n              aria-label=\"${this.iconTitle}\"\n              aria-hidden=\"true\"\n              class=\"cre8-c-alert__icon\"\n              ></cre8-icon>`;\n            default:\n                return nothing;\n        }\n    };\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-alert', {\n            'cre8-c-alert--error': this.status === 'error',\n            'cre8-c-alert--info': this.status === 'info',\n            'cre8-c-alert--notification': this.status === 'notification',\n            'cre8-c-alert--neutral': this.status === 'neutral',\n            'cre8-c-alert--success': this.status === 'success',\n            'cre8-c-alert--warning': this.status === 'warning',\n            'cre8-c-alert--standalone': this.variant === 'standalone',\n            'cre8-c-alert--banner': this.variant === 'banner',\n            'cre8-c-alert--emphasis-subtle': this.emphasis === 'subtle',\n            'cre8-c-alert--notdismissible': this.notDismissible,\n        });\n\n        return this.dismissed\n            ? null\n            : html`\n          <dialog open>\n            <div class=\"${componentClassNames}\">\n              <div class=\"cre8-c-alert__container\">\n                ${this.status\n                    ? html` ${this.mapStatusToIconAlert(this.status)}`\n                    : ''}\n                <div class=\"cre8-c-alert__message-container\">\n                  <div class=\"cre8-c-alert__heading-container\">\n                    ${this.headerText\n                    ? html`${this.headerText}`\n                    : ''}\n                    ${this.notDismissible\n                    ? ''\n                    : html`<cre8-button\n                     class=\"cre8-c-alert__close-btn\"\n                     svg=${svgClose}\n                     iconRotateDegree=\"90\"\n                     iconPosition=\"after\"\n                     variant=\"tertiary\"\n                     aria-label=\"close\"\n                     ?hideText=${true}\n                     @click=${this.onDismiss}\n                     ?inverted=${this.checkEmphasisAlert()}\n              ></cre8-button>`}\n                  </div>\n                  <div class=\"cre8-c-alert__body-container\">\n                    <slot></slot>\n                  </div>\n                  <div class=\"cre8-c-alert__footer-container\">\n                        <slot name=\"cta\">${this.ctaBody}</slot>\n                      </div>\n                </div>\n              </div>\n            </div>\n          </dialog>\n        `;\n    }\n}\n\nif (customElements.get('cre8-alert') === undefined) {\n    customElements.define('cre8-alert', Cre8Alert);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-alert': Cre8Alert;\n    }\n}\n\nexport default Cre8Alert;\n"]}

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

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

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

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