wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/components/notification/vds-notification.js

@@ -0,0 +1,276 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+export class VdsNotification {
+    constructor() {
+        /** Define variant of the notification */
+        this.variant = "inline";
+        /** Define status type of the notification */
+        this.status = "informative";
+        /** Show / Hide the notification close button */
+        this.showCloseButton = true;
+        /** When set to true, the element will be removed from DOM when pressing the close button. */
+        this.removeOnClose = true;
+        this.currentIcon = undefined;
+        this.currentColor = undefined;
+    }
+    setCustomBackground(customization) {
+        return (customization === null || customization === void 0 ? void 0 : customization.background) ? { '--notification-background': `var(--${customization.background})` } : {};
+    }
+    setCustomBorder(customization) {
+        return (customization === null || customization === void 0 ? void 0 : customization.border) ? { '--notification-border': `var(--${customization.border})` } : {};
+    }
+    setCustomIcon(customization) {
+        return (customization === null || customization === void 0 ? void 0 : customization.icon) ? { '--notification-icon-color': `var(--${customization.icon})` } : {};
+    }
+    setCustomColors() {
+        const customization = this.colors;
+        if (!customization) {
+            return null;
+        }
+        return Object.assign(Object.assign(Object.assign({}, this.setCustomBackground(customization)), this.setCustomBorder(customization)), this.setCustomIcon(customization));
+    }
+    setIcon() {
+        var _a;
+        switch (this.status) {
+            case 'informative':
+                this.currentIcon = 'information';
+                this.currentColor = "color-icon-information";
+                break;
+            case 'danger':
+                this.currentIcon = 'information';
+                this.currentColor = 'color-icon-danger';
+                break;
+            case 'warning':
+                this.currentIcon = 'caution';
+                this.currentColor = 'color-icon-warning';
+                break;
+            case 'healthy':
+                this.currentIcon = 'healthy';
+                this.currentColor = 'color-icon-healthy';
+                break;
+            case 'custom':
+                this.currentIcon = this.icon;
+                this.currentColor = ((_a = this.colors) === null || _a === void 0 ? void 0 : _a.icon) ? this.colors.icon : null;
+                break;
+            default:
+                this.currentIcon = 'unknown';
+                this.currentColor = 'color-icon-information';
+                break;
+        }
+    }
+    handleClose() {
+        this.closed.emit();
+        if (this.removeOnClose) {
+            this.hostEl.remove();
+        }
+    }
+    /* Close the Notification from other element  */
+    async close() {
+        this.handleClose();
+    }
+    showCloseBtn() {
+        return (this.showCloseButton ?
+            (h("div", { class: "vds__notification--close-btn" }, h("vds-icon-button", { size: "medium", variant: "secondary", icon: 'close', setAriaLabel: 'close', onClick: () => this.handleClose() })))
+            : null);
+    }
+    renderActions() {
+        return (h("div", { class: `vds__notification--actions ${this.variant === "toast" ? "vds-notification__actions--toast" : ""}` }, h("slot", { name: "actions" })));
+    }
+    render() {
+        const custom = this.colors ? this.setCustomColors() : null;
+        this.setIcon();
+        return (h(Host, { key: '34a9cc0d1aa39e81409fd7b002d358548e11365b', style: custom }, h("div", { key: '6804c9a9938e8ddc654b192b9a6c69db1f246157', class: combineClasses('vds__notification--container', 'vds__notification--status-' + this.status) }, h("div", { key: '1cdb8e02d564d8fa67fcbc7dabede906cf259cbf', class: "vds__notification--container-body" }, h("div", { key: '789fa386981325f569b6f2a47aa9522d0174b11f', class: "vds__notification--icon" }, h("vds-icon", { key: 'c0183258cded2a0cc2641bbf84785ce17771433d', size: "1.5rem", svgIcon: this.currentIcon, color: this.currentColor })), h("div", { key: '621a8a173b820030162db668b9279977b39e6885', class: "vds__notification--content" }, h("div", { key: '61d004a8104ce79ef0ab5d207f8deba68b3f1182', class: `vds__notification--information ${this.variant === "toast" ? "vds-notification__information--toast" : ""}` }, h("div", { key: 'bf48b7e1c1230a2f0f50de8cf2c0706bfe5a1343', class: "vds__notification--title" }, h("slot", { key: 'e6be9e59f243758191ac60280e388d915d196706', name: "header" })), h("div", { key: '66543b96d6ad825c841738157f0a7a97999f4cb4', class: "vds__notification--message" }, h("slot", { key: '3c8be0959ecef894664edf0e054db783e054a5d8', name: "body" }))), this.variant === "toast" && this.renderActions())), h("div", { key: '279a75abe9ad12f6c6cde6dfb7754e0ee35bc27e', class: "vds-notification__close-area" }, this.variant === "inline" && this.renderActions(), this.showCloseBtn()))));
+    }
+    static get is() { return "vds-notification"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-notification.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-notification.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"toast\" | \"inline\"",
+                    "resolved": "\"inline\" | \"toast\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define variant of the notification"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"inline\""
+            },
+            "status": {
+                "type": "string",
+                "attribute": "status",
+                "mutable": true,
+                "complexType": {
+                    "original": "NotificationStatus",
+                    "resolved": "\"custom\" | \"danger\" | \"healthy\" | \"informative\" | \"warning\"",
+                    "references": {
+                        "NotificationStatus": {
+                            "location": "import",
+                            "path": "./vds-notification-utils",
+                            "id": "src/components/notification/vds-notification-utils.tsx::NotificationStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define status type of the notification"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"informative\""
+            },
+            "colors": {
+                "type": "unknown",
+                "attribute": "colors",
+                "mutable": true,
+                "complexType": {
+                    "original": "NotificationsCustomColors",
+                    "resolved": "{ background: Colors; border: Colors; icon: Colors; }",
+                    "references": {
+                        "NotificationsCustomColors": {
+                            "location": "import",
+                            "path": "./vds-notification-utils",
+                            "id": "src/components/notification/vds-notification-utils.tsx::NotificationsCustomColors"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define custom status color of notification"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define custom Icon for the notification"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "showCloseButton": {
+                "type": "boolean",
+                "attribute": "show-close-button",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show / Hide the notification close button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "removeOnClose": {
+                "type": "boolean",
+                "attribute": "remove-on-close",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When set to true, the element will be removed from DOM when pressing the close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentIcon": {},
+            "currentColor": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closed",
+                "name": "closed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when popover gets closed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+}
+//# sourceMappingURL=vds-notification.js.map

package/dist/collection/components/notification/vds-notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-notification.js","sourceRoot":"","sources":["../../../src/components/notification/vds-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State,Element, Event, EventEmitter, Method } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { Colors } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { NotificationsCustomColors, NotificationStatus } from './vds-notification-utils';\n\n@Component({\n  tag: 'vds-notification',\n  styleUrl: 'vds-notification.scss',\n  shadow: true,\n})\nexport class VdsNotification {\n/** Define variant of the notification */\n@Prop({mutable: true}) variant: \"toast\" | \"inline\" = \"inline\";\n/** Define status type of the notification */\n@Prop({mutable: true}) status: NotificationStatus = \"informative\";\n/** Define custom status color of notification */\n@Prop({mutable: true}) colors?: NotificationsCustomColors;\n/** Define custom Icon for the notification */  \n@Prop({mutable: true}) icon?: string;\n/** Show / Hide the notification close button */\n@Prop({mutable: true}) showCloseButton: boolean = true;\n/** When set to true, the element will be removed from DOM when pressing the close button. */\n@Prop({mutable: true}) removeOnClose: boolean = true;\n\n@State() currentIcon: string = undefined;\n@State() currentColor: Colors = undefined;\n\n@Element() hostEl: HTMLElement;\n\n/** Emits event when popover gets closed */\n@Event() closed: EventEmitter<void>;\n\n\nprivate setCustomBackground(customization): { [key: string]: string } {\n  return customization?.background ? { '--notification-background': `var(--${customization.background})` } : {};\n}\n\nprivate setCustomBorder(customization): { [key: string]: string } {\n  return customization?.border ? { '--notification-border': `var(--${customization.border})` } : {};\n}\nprivate setCustomIcon(customization): { [key: string]: string } {\n  return customization?.icon ? { '--notification-icon-color': `var(--${customization.icon})` } : {};\n}\nprivate setCustomColors(): { [key: string]: string } {\n  const customization = this.colors;\n  if (!customization) {\n        return null;\n    }\n    return {\n        ...this.setCustomBackground(customization),\n        ...this.setCustomBorder(customization),\n        ...this.setCustomIcon(customization)\n    };\n}\n\nprivate setIcon(){\n  switch (this.status) {\n    case 'informative':\n      this.currentIcon = 'information';\n      this.currentColor = \"color-icon-information\";\n      break;\n    case 'danger':\n      this.currentIcon = 'information';\n      this.currentColor= 'color-icon-danger';\n      break;\n    case 'warning':\n      this.currentIcon = 'caution';\n      this.currentColor= 'color-icon-warning';\n      break;\n    case 'healthy':\n      this.currentIcon = 'healthy';\n      this.currentColor= 'color-icon-healthy';\n      break;\n    case 'custom':\n      this.currentIcon = this.icon;\n      this.currentColor= this.colors?.icon? this.colors.icon : null;\n      break;\n    default:\n      this.currentIcon = 'unknown';\n      this.currentColor= 'color-icon-information';\n      break;\n  }\n}\n\nprivate handleClose(){\n this.closed.emit();\n if (this.removeOnClose) {\n   this.hostEl.remove();\n }\n}\n/* Close the Notification from other element  */ \n@Method()\npublic async close(): Promise<void> {\n  this.handleClose();\n}\n\nprivate showCloseBtn(){\n  return (this.showCloseButton ?\n    (<div class=\"vds__notification--close-btn\">\n      <vds-icon-button \n        size=\"medium\" \n        variant=\"secondary\" \n        icon='close'\n        setAriaLabel='close'\n        onClick={() => this.handleClose()}\n      >        \n      </vds-icon-button>\n    </div>)\n    :null);\n}\n  private renderActions(): HTMLStencilElement {\n    return (\n      <div\n        class={`vds__notification--actions ${this.variant === \"toast\" ? \"vds-notification__actions--toast\" : \"\"}`}\n      >\n        <slot name=\"actions\"></slot>\n      </div>\n    );\n  }\n\nrender(): HTMLStencilElement {\n  const custom = this.colors? this.setCustomColors() : null;\n  this.setIcon();\n\n  return (\n  <Host style={custom}>\n    <div class={combineClasses(\n      'vds__notification--container',\n      'vds__notification--status-'+ this.status,\n      )}\n    >\n      <div class={\"vds__notification--container-body\"}>\n        <div class=\"vds__notification--icon\">\n          <vds-icon size=\"1.5rem\" svgIcon={this.currentIcon} color={this.currentColor}></vds-icon>\n        </div>\n        <div class=\"vds__notification--content\">\n          <div class={`vds__notification--information ${this.variant === \"toast\" ? \"vds-notification__information--toast\" : \"\"}`}>\n            <div class=\"vds__notification--title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <div class=\"vds__notification--message\">\n              <slot name=\"body\"></slot>\n            </div>\n          </div>\n          {this.variant === \"toast\" && this.renderActions()}\n        </div>\n      </div>\n      <div class=\"vds-notification__close-area\">\n        {this.variant === \"inline\" && this.renderActions()}\n        {this.showCloseBtn()}\n      </div>\n    </div>\n  </Host>\n  );\n}\n}"]}

package/dist/collection/components/notification/vds-notification.stories.js

@@ -0,0 +1,150 @@
+export default {
+    title: 'VDS/Components/Notification/inline',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+    },
+    argTypes: {
+        variant: {
+            options: ["inline", "toast"],
+            control: { type: "select" }
+        },
+        status: {
+            options: ["informative", "warning", "danger", "healthy", "custom"],
+            control: { type: "select" }
+        },
+    },
+};
+const styles = `
+.container {
+    width:60%;
+    display:block;
+    margin:10px;
+}
+h3 {
+    font-family: "Roboto Flex", sans-serif;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.5rem;
+}
+    .notification-short {
+        max-width: 315.02px
+    }
+    .notification-long {
+        max-width: 916.58px
+    }
+    .notification-toast {
+        max-width: 323.23px
+    }
+`;
+const codeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<div class="container">
+    <label>Basic Notification</label>
+    <br>
+    <vds-notification
+        class="notification-short"
+        variant="${args.variant}"
+        status="${args.status}"
+        show-close-button="${args.showCloseButton}"
+        icon="${args.icon}"
+    >
+        <h3 slot="header">Title</h3>
+        <span slot="body">It is a short content.</span>
+        <vds-link slot="actions" variant="secondary" value="Action" size="extra-small" underline="true"></vds-link>
+    </vds-notification>
+    <br>
+        <label>Basic Notification</label>
+    <br>
+    <vds-notification
+        class="notification-long"
+        variant="${args.variant}"
+        status="${args.status}"
+        show-close-button="${args.showCloseButton}"
+        icon="${args.icon}"
+    >
+        <h3 slot="header">Title</h3>
+        <span slot="body">It is a long established fact that a reader will be distracted
+        by the readable content of a page when looking at its layout.</span>
+        <vds-link slot="actions" variant="secondary" value="Action" size="extra-small" underline="true"></vds-link>
+    </vds-notification>
+    <br>
+</div>`;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    variant: "inline",
+    status: 'informative',
+    showCloseButton: true,
+    icon: 'add'
+};
+const codeCustomTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<div class="container">
+    <label>Custom Notification</label>
+    <br>
+    <vds-notification
+        status="${args.status}"
+        show-close-button="${args.showCloseButton}"
+        icon="${args.icon}"
+    >
+        <h3 slot="header">${args.title}</h3>
+        <span slot="body">${args.message}</span>
+        <vds-link slot="actions" variant="secondary" value="Action" size="extra-small" underline="true"></vds-link>
+    </vds-notification>
+    <br>
+</div>`;
+};
+export const CustomUsage = codeCustomTemplate.bind({});
+CustomUsage.args = {
+    status: 'custom',
+    showCloseButton: true,
+    icon: 'add',
+    title: 'Custom title',
+    message: 'It is a long established fact that a reader will be distracted.'
+};
+const codeToastTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<div class="container">
+    <label>Notification variant toast</label>
+    <br>
+    <vds-notification
+        class="notification-toast"
+        variant="toast"
+        status="${args.status}"
+        show-close-button="${args.showCloseButton}"
+    >
+        <h3 slot="header">${args.title}</h3>
+        <span slot="body">${args.message}</span>
+        <div slot="actions"> 
+            <vds-link variant="secondary" value="Link 1" size="extra-small" underline="true"></vds-link>
+            <vds-link variant="secondary" value="Link 2" size="extra-small" underline="true"></vds-link>
+            <vds-link variant="secondary" value="Link 3" size="extra-small" underline="true"></vds-link>
+            <vds-link variant="secondary" value="Link 4" size="extra-small" underline="true"></vds-link>
+        </div>
+    </vds-notification>
+    <br>
+    <vds-notification
+        class="notification-toast"
+        variant="toast"
+        status="${args.status}"
+        show-close-button="${args.showCloseButton}"
+    >
+        <h3 slot="header">${args.title}</h3>
+        <span slot="body">${args.message}</span>
+    </vds-notification>
+</div>`;
+};
+export const ToastVariantUsage = codeToastTemplate.bind({});
+ToastVariantUsage.args = {
+    status: 'informative',
+    showCloseButton: true,
+    icon: 'add',
+    title: 'Toast Title',
+    message: 'This is a notification with variant toast.'
+};
+//# sourceMappingURL=vds-notification.stories.js.map

package/dist/collection/components/notification/vds-notification.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-notification.stories.js","sourceRoot":"","sources":["../../../src/components/notification/vds-notification.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACX,KAAK,EAAE,oCAAoC;IAC3C,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACH,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,OAAO,EAAE,CAAC,QAAQ,EAAC,OAAO,CAAC;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,MAAM,EAAE;YACJ,OAAO,EAAE,CAAC,aAAa,EAAC,SAAS,EAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC;YAChE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;CAqBd,CAAC;AAEF,MAAM,YAAY,GAAE,CAAC,IAAI,EAAE,EAAE;IACzB,OAAO;SACF,MAAM;;;;;;mBAMI,IAAI,CAAC,OAAO;kBACb,IAAI,CAAC,MAAM;6BACA,IAAI,CAAC,eAAe;gBACjC,IAAI,CAAC,IAAI;;;;;;;;;;;mBAWN,IAAI,CAAC,OAAO;kBACb,IAAI,CAAC,MAAM;6BACA,IAAI,CAAC,eAAe;gBACjC,IAAI,CAAC,IAAI;;;;;;;;OAQlB,CAAC;AACR,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,aAAa;IACrB,eAAe,EAAC,IAAI;IACpB,IAAI,EAAE,KAAK;CACZ,CAAC;AAEF,MAAM,kBAAkB,GAAE,CAAC,IAAI,EAAE,EAAE;IAE/B,OAAO;SACF,MAAM;;;;;kBAKG,IAAI,CAAC,MAAM;6BACA,IAAI,CAAC,eAAe;gBACjC,IAAI,CAAC,IAAI;;4BAEG,IAAI,CAAC,KAAK;4BACV,IAAI,CAAC,OAAO;;;;OAIjC,CAAC;AACR,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvD,WAAW,CAAC,IAAI,GAAG;IAEjB,MAAM,EAAE,QAAQ;IAChB,eAAe,EAAC,IAAI;IACpB,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,cAAc;IACrB,OAAO,EAAE,iEAAiE;CAC3E,CAAC;AAGF,MAAM,iBAAiB,GAAE,CAAC,IAAI,EAAE,EAAE;IAE9B,OAAO;SACF,MAAM;;;;;;;kBAOG,IAAI,CAAC,MAAM;6BACA,IAAI,CAAC,eAAe;;4BAErB,IAAI,CAAC,KAAK;4BACV,IAAI,CAAC,OAAO;;;;;;;;;;;;kBAYtB,IAAI,CAAC,MAAM;6BACA,IAAI,CAAC,eAAe;;4BAErB,IAAI,CAAC,KAAK;4BACV,IAAI,CAAC,OAAO;;OAEjC,CAAC;AACR,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5D,iBAAiB,CAAC,IAAI,GAAG;IACvB,MAAM,EAAE,aAAa;IACrB,eAAe,EAAE,IAAI;IACrB,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,aAAa;IACpB,OAAO,EAAE,4CAA4C;CACtD,CAAC","sourcesContent":["export default {\n    title: 'VDS/Components/Notification/inline',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n      },\n    argTypes: {\n        variant: {\n            options: [\"inline\",\"toast\"],\n            control: { type: \"select\" }\n        },\n        status: {\n            options: [\"informative\",\"warning\",\"danger\", \"healthy\", \"custom\"],\n            control: { type: \"select\" }\n        },\n    },\n};\n\nconst styles = `\n.container {\n    width:60%;\n    display:block;\n    margin:10px;\n}\nh3 {\n    font-family: \"Roboto Flex\", sans-serif;\n    font-size: 1rem;\n    font-weight: 600;\n    line-height: 1.5rem;\n}\n    .notification-short {\n        max-width: 315.02px\n    }\n    .notification-long {\n        max-width: 916.58px\n    }\n    .notification-toast {\n        max-width: 323.23px\n    }\n`;\n \nconst codeTemplate =(args) => {\n    return `\n<style>${styles}</style>\n<div class=\"container\">\n    <label>Basic Notification</label>\n    <br>\n    <vds-notification\n        class=\"notification-short\"\n        variant=\"${args.variant}\"\n        status=\"${args.status}\"\n        show-close-button=\"${args.showCloseButton}\"\n        icon=\"${args.icon}\"\n    >\n        <h3 slot=\"header\">Title</h3>\n        <span slot=\"body\">It is a short content.</span>\n        <vds-link slot=\"actions\" variant=\"secondary\" value=\"Action\" size=\"extra-small\" underline=\"true\"></vds-link>\n    </vds-notification>\n    <br>\n        <label>Basic Notification</label>\n    <br>\n    <vds-notification\n        class=\"notification-long\"\n        variant=\"${args.variant}\"\n        status=\"${args.status}\"\n        show-close-button=\"${args.showCloseButton}\"\n        icon=\"${args.icon}\"\n    >\n        <h3 slot=\"header\">Title</h3>\n        <span slot=\"body\">It is a long established fact that a reader will be distracted\n        by the readable content of a page when looking at its layout.</span>\n        <vds-link slot=\"actions\" variant=\"secondary\" value=\"Action\" size=\"extra-small\" underline=\"true\"></vds-link>\n    </vds-notification>\n    <br>\n</div>`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  variant: \"inline\",\n  status: 'informative',\n  showCloseButton:true,\n  icon: 'add' \n};\n\nconst codeCustomTemplate =(args) => {\n\n    return `\n<style>${styles}</style>\n<div class=\"container\">\n    <label>Custom Notification</label>\n    <br>\n    <vds-notification\n        status=\"${args.status}\"\n        show-close-button=\"${args.showCloseButton}\"\n        icon=\"${args.icon}\"\n    >\n        <h3 slot=\"header\">${args.title}</h3>\n        <span slot=\"body\">${args.message}</span>\n        <vds-link slot=\"actions\" variant=\"secondary\" value=\"Action\" size=\"extra-small\" underline=\"true\"></vds-link>\n    </vds-notification>\n    <br>\n</div>`;\n}\n\nexport const CustomUsage = codeCustomTemplate.bind({});\nCustomUsage.args = {\n    \n  status: 'custom',\n  showCloseButton:true,\n  icon: 'add',\n  title: 'Custom title',\n  message: 'It is a long established fact that a reader will be distracted.' \n};\n\n\nconst codeToastTemplate =(args) => {\n\n    return `\n<style>${styles}</style>\n<div class=\"container\">\n    <label>Notification variant toast</label>\n    <br>\n    <vds-notification\n        class=\"notification-toast\"\n        variant=\"toast\"\n        status=\"${args.status}\"\n        show-close-button=\"${args.showCloseButton}\"\n    >\n        <h3 slot=\"header\">${args.title}</h3>\n        <span slot=\"body\">${args.message}</span>\n        <div slot=\"actions\"> \n            <vds-link variant=\"secondary\" value=\"Link 1\" size=\"extra-small\" underline=\"true\"></vds-link>\n            <vds-link variant=\"secondary\" value=\"Link 2\" size=\"extra-small\" underline=\"true\"></vds-link>\n            <vds-link variant=\"secondary\" value=\"Link 3\" size=\"extra-small\" underline=\"true\"></vds-link>\n            <vds-link variant=\"secondary\" value=\"Link 4\" size=\"extra-small\" underline=\"true\"></vds-link>\n        </div>\n    </vds-notification>\n    <br>\n    <vds-notification\n        class=\"notification-toast\"\n        variant=\"toast\"\n        status=\"${args.status}\"\n        show-close-button=\"${args.showCloseButton}\"\n    >\n        <h3 slot=\"header\">${args.title}</h3>\n        <span slot=\"body\">${args.message}</span>\n    </vds-notification>\n</div>`;\n}\n\nexport const ToastVariantUsage = codeToastTemplate.bind({});\nToastVariantUsage.args = {\n  status: 'informative',\n  showCloseButton: true,\n  icon: 'add',\n  title: 'Toast Title',\n  message: 'This is a notification with variant toast.' \n};"]}

package/dist/collection/components/popover/utils/utils.js

@@ -0,0 +1,2 @@
+export const popoverCaretFilledSmall = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgOCA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBpZD0icG9wb3Zlci1jYXJldC1maWxsZWQtc21hbGwiIGQ9Ik0wIDBMNCA0TDggMEgwWiIgZmlsbD0iI2ZmZmZmZiIvPgo8L3N2Zz4K';
+//# sourceMappingURL=utils.js.map

package/dist/collection/components/popover/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/popover/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAI,oQAAoQ,CAAC","sourcesContent":["export const popoverCaretFilledSmall =  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgOCA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBpZD0icG9wb3Zlci1jYXJldC1maWxsZWQtc21hbGwiIGQ9Ik0wIDBMNCA0TDggMEgwWiIgZmlsbD0iI2ZmZmZmZiIvPgo8L3N2Zz4K';"]}