@limetech/lime-elements 37.55.4 → 37.55.5

package/dist/collection/components/snackbar/snackbar.css

@@ -1,60 +1,41 @@
-/**
- * @prop --snackbar-top: Snackbar has `position: fixed;` and uses `--snackbar-top`, which defaults to `auto` for its `top` property. See the examples in the documentations for further info.
- * @prop --snackbar-right: Snackbar has `position: fixed;` and uses `--snackbar-right`, which defaults to `0` for its `right` property. See the examples in the documentations for further info.
- * @prop --snackbar-bottom: Snackbar has `position: fixed;` and uses `--snackbar-bottom`, which defaults to `0` for its `bottom` property. See the examples in the documentations for further info.
- * @prop --snackbar-left: Snackbar has `position: fixed;` and uses `--snackbar-left`, which defaults to `0` for its `left` property. See the examples in the documentations for further info.
- */
 * {
   box-sizing: border-box;
 }
 
-.mdc-snackbar {
-  top: var(--snackbar-top, auto);
-  right: var(--snackbar-right, 0);
-  bottom: var(--snackbar-bottom, 0);
-  left: var(--snackbar-left, 0);
-  display: none;
-  position: fixed;
-  z-index: 8;
-  padding: 0.75rem;
-  align-items: center;
-  justify-content: center;
-}
-
-.mdc-snackbar--opening,
-.mdc-snackbar--open,
-.mdc-snackbar--closing {
-  display: flex;
-}
-
-.mdc-snackbar--open .mdc-snackbar__label,
-.mdc-snackbar--open .mdc-snackbar__actions {
-  visibility: visible;
-}
-.mdc-snackbar--open .mdc-snackbar__surface {
-  transform: scale(1);
+aside {
+  background: none;
+  border: none;
+  inset: unset;
+  overflow: visible;
+  padding: 0.5rem 0.5rem 0 0.5rem;
+  right: 0;
+  width: var(--limel-snackbar-width, 21rem);
+  top: calc(var(--snackbar-distance-to-top-edge) + env(safe-area-inset-top, 0));
+  transition: opacity var(--limel-snackbar-opacity-transition-speed, 0.2s) ease, top var(--limel-snackbar-top-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89), transform var(--limel-snackbar-top-transition-speed, 0.46s) ease;
+  transform: translate3d(0, 0, 0);
   opacity: 1;
 }
+aside.is-closing {
+  transform: translate3d(2rem, 0, 0);
+  opacity: 0;
+  --limel-snackbar-top-transition-speed: 0.2s;
+  --limel-snackbar-opacity-transition-speed: 0.2s;
+}
 
-.mdc-snackbar__surface {
-  transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1);
+.surface {
+  overflow: hidden;
   padding: 0.5rem;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 0.25rem;
   min-height: 3.25rem;
-  min-width: unset;
-  max-width: 42rem;
-  transform: scale(0.8);
-  opacity: 0;
   border-radius: 0.75rem;
   background-color: rgb(var(--contrast-1400));
   box-shadow: var(--shadow-depth-8), var(--shadow-depth-16);
 }
 
-.mdc-snackbar__label {
-  visibility: hidden;
+.label {
   color: rgb(var(--contrast-100));
   -webkit-font-smoothing: antialiased;
   font-size: 0.8125rem;
@@ -64,8 +45,7 @@
   flex-grow: 1;
 }
 
-.mdc-snackbar__actions {
-  visibility: hidden;
+.actions {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -74,7 +54,7 @@
 }
 
 .dismiss,
-.mdc-snackbar__actions {
+.actions {
   --lime-elevated-surface-background-color: rgb(
       var(--contrast-1300)
   );
@@ -85,19 +65,15 @@
   --icon-background-color: var(--lime-elevated-surface-background-color);
   --fill-color: var(--mdc-theme-primary);
   --track-color: rgb(var(--contrast-800), 0.2);
+  transition: opacity 0.1s ease, transform 0.1s ease;
   position: absolute;
-  top: -0.9rem;
-  left: -0.9rem;
-  transform: scale(0.8);
+  top: -0.375rem;
+  left: -0.375rem;
+  transform: scale(0.7);
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.dismiss limel-icon-button.mdc-snackbar__dismiss {
-  transform: scale(0.8);
-  margin: 0;
-  padding: 0;
-}
 .dismiss svg {
   position: absolute;
   transform: rotate(90deg);
@@ -105,9 +81,19 @@
   stroke-dasharray: 100;
   stroke-linecap: round;
 }
-.mdc-snackbar--open .dismiss svg {
+aside:popover-open .dismiss svg {
   animation: timeout var(--snackbar-timeout) linear forwards;
 }
+.dismiss .is-closing {
+  transform: scale(0.5);
+  opacity: 0;
+}
+
+.dismiss-button {
+  transform: scale(0.8);
+  margin: 0;
+  padding: 0;
+}
 
 @keyframes timeout {
   0% {

package/dist/collection/components/snackbar/snackbar.js

@@ -1,6 +1,9 @@
-import { MDCSnackbar } from '@material/snackbar';
 import { h, } from '@stencil/core';
 import translate from '../../global/translations';
+import { SnackbarContainer } from './container';
+import { createRandomString } from 'src/util/random-string';
+const container = new SnackbarContainer();
+const hideAnimationDuration = 300;
 /**
  * A Snackbar –also known as "Toast"– is used to inform the end user
  * about an action or a process in the system.
@@ -27,80 +30,84 @@ import translate from '../../global/translations';
  * @exampleComponent limel-example-snackbar-dismissible
  * @exampleComponent limel-example-snackbar-with-action
  * @exampleComponent limel-example-snackbar-with-changing-messages
- * @exampleComponent limel-example-snackbar-positioning
  */
 export class Snackbar {
   constructor() {
+    this.close = () => {
+      if (!this.open) {
+        return false;
+      }
+      this.closing = true;
+      if (this.timeoutId) {
+        clearTimeout(this.timeoutId);
+        this.timeoutId = undefined;
+      }
+      setTimeout(() => {
+        this.open = false;
+        container.remove(this.host);
+        this.hide.emit();
+        this.offset = 0;
+      }, hideAnimationDuration);
+    };
+    this.handleClickAction = () => {
+      this.action.emit();
+    };
     this.message = undefined;
     this.timeout = 5000;
     this.actionText = undefined;
     this.dismissible = true;
     this.multiline = undefined;
     this.language = 'en';
-    this.handleMdcClosing = this.handleMdcClosing.bind(this);
-  }
-  connectedCallback() {
-    this.initialize();
+    this.offset = 0;
+    this.open = false;
+    this.closing = true;
+    this.snackbarId = createRandomString();
   }
-  componentDidLoad() {
-    this.initialize();
-  }
-  initialize() {
-    const element = this.host.shadowRoot.querySelector('.mdc-snackbar');
-    if (!element) {
-      return;
-    }
-    this.mdcSnackbar = new MDCSnackbar(element);
-    this.mdcSnackbar.listen('MDCSnackbar:closing', this.handleMdcClosing);
-  }
-  disconnectedCallback() {
-    this.mdcSnackbar.unlisten('MDCSnackbar:closing', this.handleMdcClosing);
-    this.mdcSnackbar.destroy();
+  onChangeIndex(event) {
+    event.stopPropagation();
+    this.offset = event.detail;
   }
   /**
    * Show the snackbar
    */
   async show() {
+    if (this.open) {
+      return;
+    }
+    this.open = true;
+    this.closing = false;
+    container.add(this.host);
     if (this.timeout) {
-      this.mdcSnackbar.timeoutMs = this.timeout;
+      this.timeoutId = window.setTimeout(this.close, Math.max(this.timeout - hideAnimationDuration, 0));
     }
-    this.mdcSnackbar.labelText = this.message;
-    this.mdcSnackbar.open();
   }
   render() {
-    return (h("aside", { class: `
-                    mdc-snackbar
-                    ${this.multiline ? 'mdc-snackbar--stacked' : ''}
-                `, style: {
+    return (h("aside", { popover: "manual", style: {
         '--snackbar-timeout': `${this.timeout}ms`,
-      } }, h("div", { class: "mdc-snackbar__surface", role: "status", "aria-relevant": "additions" }, h("div", { class: "mdc-snackbar__label", "aria-atomic": "false" }), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
-  }
-  handleMdcClosing(event) {
-    if (event.detail.reason === 'action') {
-      this.action.emit();
-    }
-    else {
-      this.hide.emit();
-    }
+        '--snackbar-distance-to-top-edge': `${this.offset}px`,
+      }, class: {
+        open: this.open,
+        'is-closing': this.closing,
+      }, id: this.snackbarId, role: this.open ? 'status' : undefined, "aria-relevant": this.open ? 'additions' : undefined }, h("div", { class: "surface", "aria-atomic": "false" }, h("div", { class: "label" }, this.message), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
   }
   renderActions(actionText) {
     if (!actionText) {
       return;
     }
-    return (h("div", { class: "mdc-snackbar__actions", "aria-atomic": "true" }, this.renderActionButton(actionText)));
+    return (h("div", { class: "actions", "aria-atomic": "true" }, this.renderActionButton(actionText)));
   }
   renderActionButton(actionText) {
     if (!actionText) {
       return;
     }
-    return (h("limel-button", { class: "mdc-button mdc-snackbar__action", label: actionText }));
+    return (h("limel-button", { label: actionText, onClick: this.handleClickAction }));
   }
   renderDismissButton(dismissible) {
     if (!dismissible) {
       return;
     }
     const label = translate.get('snackbar.dismiss', this.language);
-    return (h("div", { class: "dismiss" }, this.renderTimeoutVisualization(), h("limel-icon-button", { class: "mdc-icon-button mdc-snackbar__dismiss", icon: "multiply", label: label })));
+    return (h("div", { class: "dismiss" }, this.renderTimeoutVisualization(), h("limel-icon-button", { class: "dismiss-button", icon: "multiply", label: label, onClick: this.close, "aria-controls": this.snackbarId })));
   }
   renderTimeoutVisualization() {
     return (h("svg", { width: "36", height: "36", viewBox: "0 0 36 36" }, h("circle", { r: "18", cx: "18", cy: "18", fill: "var(--track-color)" }), h("path", { class: "track", d: "M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0", stroke: "var(--fill-color)" })));
@@ -200,7 +207,10 @@ export class Snackbar {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "Setting this property no longer has any effect. The property will be removed in a future major version."
+            }],
           "text": "Whether to show the snackbar with space for multiple lines of text"
         },
         "attribute": "multiline",
@@ -231,6 +241,13 @@ export class Snackbar {
       }
     };
   }
+  static get states() {
+    return {
+      "offset": {},
+      "open": {},
+      "closing": {}
+    };
+  }
   static get events() {
     return [{
         "method": "action",
@@ -285,5 +302,14 @@ export class Snackbar {
     };
   }
   static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "changeOffset",
+        "method": "onChangeIndex",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }
 //# sourceMappingURL=snackbar.js.map

package/dist/collection/components/snackbar/snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Languages } from '../date-picker/date.types';\nimport { MDCSnackbar, MDCSnackbarCloseEvent } from '@material/snackbar';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Method,\n    Prop,\n} from '@stencil/core';\nimport translate from '../../global/translations';\n\n/**\n * A Snackbar –also known as \"Toast\"– is used to inform the end user\n * about an action or a process in the system.\n * The information could vary from announcing that a process has just started,\n * is taking place now, has ended, or has been interrupted or canceled.\n *\n * The information that you provide using a snackbar should be:\n * - temporary\n * - contextual\n * - short\n * - and most importantly, ignorable.\n *\n * It means if the user misses the information, it shouldn't be a big deal.\n *\n * :::note\n * If the information you want to display has a higher importance or priority,\n * and you need to make sure that the user takes an action to dismiss it,\n * consider using the [Banner](/#/component/limel-banner/) component instead.\n * For more complex interactions and for delivering more detailed information,\n * [Dialog](/#/component/limel-dialog/) is a better choice.\n * :::\n *\n * @exampleComponent limel-example-snackbar\n * @exampleComponent limel-example-snackbar-dismissible\n * @exampleComponent limel-example-snackbar-with-action\n * @exampleComponent limel-example-snackbar-with-changing-messages\n * @exampleComponent limel-example-snackbar-positioning\n */\n\n@Component({\n    tag: 'limel-snackbar',\n    shadow: true,\n    styleUrl: 'snackbar.scss',\n})\nexport class Snackbar {\n    /**\n     * The text message to display.\n     */\n    @Prop()\n    public message: string;\n\n    /**\n     * The amount of time in milliseconds to show the snackbar.\n     */\n    @Prop()\n    // eslint-disable-next-line no-magic-numbers\n    public timeout?: number = 5000;\n\n    /**\n     * The text to display for the action button.\n     */\n    @Prop()\n    public actionText: string;\n\n    /**\n     * When `true` displays a dismiss button on the snackbar,\n     * allowing users to close it.\n     */\n    @Prop()\n    public dismissible: boolean = true;\n\n    /**\n     * Whether to show the snackbar with space for multiple lines of text\n     */\n    @Prop()\n    public multiline: boolean;\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    @Element()\n    private host: HTMLLimelSnackbarElement;\n\n    /**\n     * Emitted when the action button is pressed\n     */\n    @Event()\n    private action: EventEmitter<void>;\n\n    /**\n     * Emitted when the snackbar hides itself\n     */\n    @Event()\n    private hide: EventEmitter<void>;\n\n    private mdcSnackbar: MDCSnackbar;\n\n    constructor() {\n        this.handleMdcClosing = this.handleMdcClosing.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-snackbar');\n        if (!element) {\n            return;\n        }\n\n        this.mdcSnackbar = new MDCSnackbar(element);\n\n        this.mdcSnackbar.listen('MDCSnackbar:closing', this.handleMdcClosing);\n    }\n\n    public disconnectedCallback() {\n        this.mdcSnackbar.unlisten('MDCSnackbar:closing', this.handleMdcClosing);\n        this.mdcSnackbar.destroy();\n    }\n\n    /**\n     * Show the snackbar\n     */\n    @Method()\n    public async show() {\n        if (this.timeout) {\n            this.mdcSnackbar.timeoutMs = this.timeout;\n        }\n\n        this.mdcSnackbar.labelText = this.message;\n\n        this.mdcSnackbar.open();\n    }\n\n    public render() {\n        return (\n            <aside\n                class={`\n                    mdc-snackbar\n                    ${this.multiline ? 'mdc-snackbar--stacked' : ''}\n                `}\n                style={{\n                    '--snackbar-timeout': `${this.timeout}ms`,\n                }}\n            >\n                <div\n                    class=\"mdc-snackbar__surface\"\n                    role=\"status\"\n                    aria-relevant=\"additions\"\n                >\n                    <div class=\"mdc-snackbar__label\" aria-atomic=\"false\"></div>\n                    {this.renderActions(this.actionText)}\n                    {this.renderDismissButton(this.dismissible)}\n                </div>\n            </aside>\n        );\n    }\n\n    private handleMdcClosing(event: MDCSnackbarCloseEvent) {\n        if (event.detail.reason === 'action') {\n            this.action.emit();\n        } else {\n            this.hide.emit();\n        }\n    }\n\n    private renderActions(actionText: string) {\n        if (!actionText) {\n            return;\n        }\n\n        return (\n            <div class=\"mdc-snackbar__actions\" aria-atomic=\"true\">\n                {this.renderActionButton(actionText)}\n            </div>\n        );\n    }\n\n    private renderActionButton(actionText: string) {\n        if (!actionText) {\n            return;\n        }\n\n        return (\n            <limel-button\n                class=\"mdc-button mdc-snackbar__action\"\n                label={actionText}\n            />\n        );\n    }\n\n    private renderDismissButton(dismissible: boolean) {\n        if (!dismissible) {\n            return;\n        }\n\n        const label = translate.get('snackbar.dismiss', this.language);\n\n        return (\n            <div class=\"dismiss\">\n                {this.renderTimeoutVisualization()}\n                <limel-icon-button\n                    class=\"mdc-icon-button mdc-snackbar__dismiss\"\n                    icon=\"multiply\"\n                    label={label}\n                />\n            </div>\n        );\n    }\n\n    private renderTimeoutVisualization() {\n        return (\n            <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\">\n                <circle r=\"18\" cx=\"18\" cy=\"18\" fill=\"var(--track-color)\" />\n                <path\n                    class=\"track\"\n                    d=\"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0\"\n                    stroke=\"var(--fill-color)\"\n                />\n            </svg>\n        );\n    }\n}\n"]}
+{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,SAAS,GAAG,IAAI,iBAAiB,EAAE,CAAC;AAC1C,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAMH,MAAM,OAAO,QAAQ;EAmEjB;IA+BQ,UAAK,GAAG,GAAG,EAAE;MACjB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;QACZ,OAAO,KAAK,CAAC;OAChB;MAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MAEpB,IAAI,IAAI,CAAC,SAAS,EAAE;QAChB,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;OAC9B;MAED,UAAU,CAAC,GAAG,EAAE;QACZ,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;MACpB,CAAC,EAAE,qBAAqB,CAAC,CAAC;IAC9B,CAAC,CAAC;IA2BM,sBAAiB,GAAG,GAAG,EAAE;MAC7B,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;;mBArIwB,IAAI;;uBAaA,IAAI;;oBAaL,IAAI;kBAkBR,CAAC;gBAGF,KAAK;mBAGF,IAAI;IAM3B,IAAI,CAAC,UAAU,GAAG,kBAAkB,EAAE,CAAC;GAC1C;EAGS,aAAa,CAAC,KAA0B;IAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;EAC/B,CAAC;EAED;;KAEG;EAEI,KAAK,CAAC,IAAI;IACb,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,OAAO;KACV;IAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACjB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEzB,IAAI,IAAI,CAAC,OAAO,EAAE;MACd,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,UAAU,CAC9B,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,qBAAqB,EAAE,CAAC,CAAC,CACpD,CAAC;KACL;EACL,CAAC;EAsBM,MAAM;IACT,OAAO,CACH,aACI,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE;QACH,oBAAoB,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI;QACzC,iCAAiC,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;OACxD,EACD,KAAK,EAAE;QACH,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,YAAY,EAAE,IAAI,CAAC,OAAO;OAC7B,EACD,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,mBACvB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;MAElD,WAAK,KAAK,EAAC,SAAS,iBAAa,OAAO;QACpC,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,OAAO,CAAO;QACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC;QACnC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CACzC,CACF,CACX,CAAC;EACN,CAAC;EAMO,aAAa,CAAC,UAAkB;IACpC,IAAI,CAAC,UAAU,EAAE;MACb,OAAO;KACV;IAED,OAAO,CACH,WAAK,KAAK,EAAC,SAAS,iBAAa,MAAM,IAClC,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAClC,CACT,CAAC;EACN,CAAC;EAEO,kBAAkB,CAAC,UAAkB;IACzC,IAAI,CAAC,UAAU,EAAE;MACb,OAAO;KACV;IAED,OAAO,CACH,oBAAc,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB,GAAI,CACvE,CAAC;EACN,CAAC;EAEO,mBAAmB,CAAC,WAAoB;IAC5C,IAAI,CAAC,WAAW,EAAE;MACd,OAAO;KACV;IAED,MAAM,KAAK,GAAG,SAAS,CAAC,GAAG,CAAC,kBAAkB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAE/D,OAAO,CACH,WAAK,KAAK,EAAC,SAAS;MACf,IAAI,CAAC,0BAA0B,EAAE;MAClC,yBACI,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,IAAI,CAAC,KAAK,mBACJ,IAAI,CAAC,UAAU,GAChC,CACA,CACT,CAAC;EACN,CAAC;EAEO,0BAA0B;IAC9B,OAAO,CACH,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;MAC3C,cAAQ,CAAC,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,oBAAoB,GAAG;MAC3D,YACI,KAAK,EAAC,OAAO,EACb,CAAC,EAAC,wDAAwD,EAC1D,MAAM,EAAC,mBAAmB,GAC5B,CACA,CACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Languages } from '../date-picker/date.types';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Listen,\n    Method,\n    Prop,\n    State,\n} from '@stencil/core';\nimport translate from '../../global/translations';\nimport { SnackbarContainer } from './container';\nimport { createRandomString } from 'src/util/random-string';\n\nconst container = new SnackbarContainer();\nconst hideAnimationDuration = 300;\n\n/**\n * A Snackbar –also known as \"Toast\"– is used to inform the end user\n * about an action or a process in the system.\n * The information could vary from announcing that a process has just started,\n * is taking place now, has ended, or has been interrupted or canceled.\n *\n * The information that you provide using a snackbar should be:\n * - temporary\n * - contextual\n * - short\n * - and most importantly, ignorable.\n *\n * It means if the user misses the information, it shouldn't be a big deal.\n *\n * :::note\n * If the information you want to display has a higher importance or priority,\n * and you need to make sure that the user takes an action to dismiss it,\n * consider using the [Banner](/#/component/limel-banner/) component instead.\n * For more complex interactions and for delivering more detailed information,\n * [Dialog](/#/component/limel-dialog/) is a better choice.\n * :::\n *\n * @exampleComponent limel-example-snackbar\n * @exampleComponent limel-example-snackbar-dismissible\n * @exampleComponent limel-example-snackbar-with-action\n * @exampleComponent limel-example-snackbar-with-changing-messages\n */\n@Component({\n    tag: 'limel-snackbar',\n    shadow: true,\n    styleUrl: 'snackbar.scss',\n})\nexport class Snackbar {\n    /**\n     * The text message to display.\n     */\n    @Prop()\n    public message: string;\n\n    /**\n     * The amount of time in milliseconds to show the snackbar.\n     */\n    @Prop()\n    // eslint-disable-next-line no-magic-numbers\n    public timeout?: number = 5000;\n\n    /**\n     * The text to display for the action button.\n     */\n    @Prop()\n    public actionText: string;\n\n    /**\n     * When `true` displays a dismiss button on the snackbar,\n     * allowing users to close it.\n     */\n    @Prop()\n    public dismissible: boolean = true;\n\n    /**\n     * Whether to show the snackbar with space for multiple lines of text\n     * @deprecated Setting this property no longer has any effect. The property will be removed in a future major version.\n     */\n    @Prop()\n    public multiline: boolean;\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    @Element()\n    private host: HTMLLimelSnackbarElement;\n\n    /**\n     * Emitted when the action button is pressed\n     */\n    @Event()\n    private action: EventEmitter<void>;\n\n    /**\n     * Emitted when the snackbar hides itself\n     */\n    @Event()\n    private hide: EventEmitter<void>;\n\n    @State()\n    private offset: number = 0;\n\n    @State()\n    private open: boolean = false;\n\n    @State()\n    private closing: boolean = true;\n\n    private snackbarId: string;\n    private timeoutId?: number;\n\n    public constructor() {\n        this.snackbarId = createRandomString();\n    }\n\n    @Listen('changeOffset')\n    protected onChangeIndex(event: CustomEvent<number>) {\n        event.stopPropagation();\n        this.offset = event.detail;\n    }\n\n    /**\n     * Show the snackbar\n     */\n    @Method()\n    public async show() {\n        if (this.open) {\n            return;\n        }\n\n        this.open = true;\n        this.closing = false;\n        container.add(this.host);\n\n        if (this.timeout) {\n            this.timeoutId = window.setTimeout(\n                this.close,\n                Math.max(this.timeout - hideAnimationDuration, 0),\n            );\n        }\n    }\n\n    private close = () => {\n        if (!this.open) {\n            return false;\n        }\n\n        this.closing = true;\n\n        if (this.timeoutId) {\n            clearTimeout(this.timeoutId);\n            this.timeoutId = undefined;\n        }\n\n        setTimeout(() => {\n            this.open = false;\n            container.remove(this.host);\n            this.hide.emit();\n            this.offset = 0;\n        }, hideAnimationDuration);\n    };\n\n    public render() {\n        return (\n            <aside\n                popover=\"manual\"\n                style={{\n                    '--snackbar-timeout': `${this.timeout}ms`,\n                    '--snackbar-distance-to-top-edge': `${this.offset}px`,\n                }}\n                class={{\n                    open: this.open,\n                    'is-closing': this.closing,\n                }}\n                id={this.snackbarId}\n                role={this.open ? 'status' : undefined}\n                aria-relevant={this.open ? 'additions' : undefined}\n            >\n                <div class=\"surface\" aria-atomic=\"false\">\n                    <div class=\"label\">{this.message}</div>\n                    {this.renderActions(this.actionText)}\n                    {this.renderDismissButton(this.dismissible)}\n                </div>\n            </aside>\n        );\n    }\n\n    private handleClickAction = () => {\n        this.action.emit();\n    };\n\n    private renderActions(actionText: string) {\n        if (!actionText) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\" aria-atomic=\"true\">\n                {this.renderActionButton(actionText)}\n            </div>\n        );\n    }\n\n    private renderActionButton(actionText: string) {\n        if (!actionText) {\n            return;\n        }\n\n        return (\n            <limel-button label={actionText} onClick={this.handleClickAction} />\n        );\n    }\n\n    private renderDismissButton(dismissible: boolean) {\n        if (!dismissible) {\n            return;\n        }\n\n        const label = translate.get('snackbar.dismiss', this.language);\n\n        return (\n            <div class=\"dismiss\">\n                {this.renderTimeoutVisualization()}\n                <limel-icon-button\n                    class=\"dismiss-button\"\n                    icon=\"multiply\"\n                    label={label}\n                    onClick={this.close}\n                    aria-controls={this.snackbarId}\n                />\n            </div>\n        );\n    }\n\n    private renderTimeoutVisualization() {\n        return (\n            <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\">\n                <circle r=\"18\" cx=\"18\" cy=\"18\" fill=\"var(--track-color)\" />\n                <path\n                    class=\"track\"\n                    d=\"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0\"\n                    stroke=\"var(--fill-color)\"\n                />\n            </svg>\n        );\n    }\n}\n"]}

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC","sourcesContent":["export * from './components';\nexport * from './interface';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC","sourcesContent":["export * from './components';\nexport * from './interface';\n\ndeclare module '@stencil/core/internal' {\n    namespace JSXBase {\n        interface HTMLAttributes {\n            popover?: 'auto' | 'manual';\n        }\n    }\n}\n"]}

package/dist/esm/lime-elements.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy(JSON.parse("[[\"limel-text-editor\",[[1,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"required\":[516],\"allowResize\":[516,\"allow-resize\"]}]]],[\"limel-file\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-date-picker\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-snackbar\",[[1,\"limel-snackbar\",{\"message\":[1],\"timeout\":[2],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"show\":[64]}]]],[\"limel-tab-panel\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-select\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-collapsible-section\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"actions\":[16]}]]],[\"limel-help\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-dynamic-label_4\",[[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-checkbox\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-table\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16]}]]],[\"limel-info-tile\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16]}]]],[\"limel-switch\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-dialog\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-shortcut\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-banner\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-code-editor\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid\",[[1,\"limel-grid\"]]],[\"limel-action-bar_4\",[[1,\"limel-action-bar\",{\"actions\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32]}],[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"],\"invalidLink\":[32]}],[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-prosemirror-adapter\",[[1,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-popover_2\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-dock-button\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-tab-bar\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-header\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-file-dropzone_2\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-markdown\",[[1,\"limel-markdown\",{\"value\":[1]}]]],[\"limel-icon_2\",[[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"parent\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}],[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-icon-button\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-linear-progress\",[[1,\"limel-linear-progress\",{\"value\":[514],\"indeterminate\":[516]}]]],[\"limel-badge_3\",[[1,\"limel-badge\",{\"label\":[520]}],[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}]]],[\"limel-breadcrumbs_5\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}]]],[\"limel-chip_2\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"menuItems\":[16]}]]],[\"limel-button\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"limel-text-editor\",[[1,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"required\":[516],\"allowResize\":[516,\"allow-resize\"]}]]],[\"limel-file\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-date-picker\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-snackbar\",[[1,\"limel-snackbar\",{\"message\":[1],\"timeout\":[2],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"open\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-tab-panel\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-select\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-collapsible-section\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"actions\":[16]}]]],[\"limel-help\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-dynamic-label_4\",[[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-checkbox\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-table\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16]}]]],[\"limel-info-tile\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16]}]]],[\"limel-switch\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-dialog\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-shortcut\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-banner\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-code-editor\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid\",[[1,\"limel-grid\"]]],[\"limel-action-bar_4\",[[1,\"limel-action-bar\",{\"actions\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32]}],[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"],\"invalidLink\":[32]}],[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-prosemirror-adapter\",[[1,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-popover_2\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-dock-button\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-tab-bar\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-header\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-file-dropzone_2\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-markdown\",[[1,\"limel-markdown\",{\"value\":[1]}]]],[\"limel-icon_2\",[[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"parent\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}],[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-icon-button\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-linear-progress\",[[1,\"limel-linear-progress\",{\"value\":[514],\"indeterminate\":[516]}]]],[\"limel-badge_3\",[[1,\"limel-badge\",{\"label\":[520]}],[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}]]],[\"limel-breadcrumbs_5\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}]]],[\"limel-chip_2\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"menuItems\":[16]}]]],[\"limel-button\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]]]"), options);
 });
 
 //# sourceMappingURL=lime-elements.js.map

package/dist/esm/limel-callout.entry.js

@@ -23,7 +23,7 @@ function getHeading(heading, type = 'note', language = 'en') {
   try {
     return translate.get(key, language);
   }
-  catch (error) {
+  catch (_a) {
     return translate.get(key, 'en');
   }
 }

package/dist/esm/limel-callout.entry.js.map

@@ -1 +1 @@
-{"file":"limel-callout.entry.js","mappings":";;;AAEA,MAAM,YAAY,GAA2B;EACzC,IAAI,EAAE,MAAM;EACZ,SAAS,EAAE,kBAAkB;EAC7B,GAAG,EAAE,MAAM;EACX,OAAO,EAAE,eAAe;EACxB,OAAO,EAAE,OAAO;CACnB,CAAC;SAEc,OAAO,CAAC,IAAY,EAAE,OAAe,MAAM;;EACvD,IAAI,IAAI,EAAE;IACN,OAAO,IAAI,CAAC;GACf;EAED,OAAO,MAAA,YAAY,CAAC,IAAI,CAAC,mCAAI,YAAY,CAAC,IAAI,CAAC;AACnD,CAAC;SAEe,UAAU,CACtB,OAAe,EACf,OAAe,MAAM,EACrB,WAAmB,IAAI;EAEvB,IAAI,OAAO,EAAE;IACT,OAAO,OAAO,CAAC;GAClB;EAED,MAAM,GAAG,GAAG,WAAW,IAAI,EAAE,CAAC;EAE9B,IAAI;IACA,OAAO,SAAS,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;GACvC;EAAC,OAAO,KAAK,EAAE;IACZ,OAAO,SAAS,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;GACnC;AACL;;AClCA,MAAM,UAAU,GAAG,ywCAAywC;;MCsC/wC,OAAO;;;;;gBAoBY,MAAM;oBAOL,IAAI;;EAE1B,MAAM;IACT,OAAO;MACH,WAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,IACjC,kBAAY,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAI,CACjD;MACN,WAAK,KAAK,EAAC,MAAM,IACb,UAAI,KAAK,EAAC,SAAS,IACd,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAClD,EACL,eAAQ,CACN;KACT,CAAC;GACL;;;;;;","names":[],"sources":["./src/components/callout/callout.helpers.ts","./src/components/callout/callout.scss?tag=limel-callout&encapsulation=shadow","./src/components/callout/callout.tsx"],"sourcesContent":["import translate from '../../global/translations';\n\nconst calloutIcons: Record<string, string> = {\n    note: 'info',\n    important: 'exclamation_mark',\n    tip: 'idea',\n    caution: 'high_priority',\n    warning: 'error',\n};\n\nexport function getIcon(icon: string, type: string = 'note'): string {\n    if (icon) {\n        return icon;\n    }\n\n    return calloutIcons[type] ?? calloutIcons.note;\n}\n\nexport function getHeading(\n    heading: string,\n    type: string = 'note',\n    language: string = 'en',\n): string {\n    if (heading) {\n        return heading;\n    }\n\n    const key = `callout.${type}`;\n\n    try {\n        return translate.get(key, language);\n    } catch (error) {\n        return translate.get(key, 'en');\n    }\n}\n","/**\n * @prop --callout-text-color: Text color of the component. Defaults to `--contrast-1100`.\n * @prop --callout-background-color: Background color of the component. Defaults to `--contrast-300`.\n * @prop --callout-color: Color used in the UI to add more contextual meaning about the type of the information. This color is different based on the chosen `type`, but you can override it using this prop.\n*/\n\n:host(limel-callout) {\n    display: flex;\n    border-radius: 0.5rem;\n    overflow: hidden;\n\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-contrast-100))\n    );\n    color: var(--callout-text-color, rgb(var(--contrast-1100)));\n}\n:host([type='note']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-gray-default))\n    );\n}\n:host([type='important']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-sky-default))\n    );\n}\n:host([type='tip']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-green-default))\n    );\n}\n:host([type='caution']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-orange-light))\n    );\n}\n:host([type='warning']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-red-dark))\n    );\n}\n\n.side {\n    padding: 0.25rem;\n    position: relative;\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        opacity: 0.2;\n        background-color: var(--limel-callout-tint-color);\n    }\n\n    limel-icon {\n        width: 1.5rem;\n        color: var(--limel-callout-tint-color);\n        margin-top: 0.0625rem; // ensures vertical alignment with the `heading`\n    }\n}\n\n.main {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding: 0.25rem 0.5rem 0.5rem 0.5rem;\n    background-color: var(--callout-background-color, rgb(var(--contrast-300)));\n}\n\n.heading {\n    margin: 0;\n    font-size: 1rem;\n    font-weight: 600;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { CalloutType } from '../callout/callout.types';\nimport { Languages } from '../date-picker/date.types';\nimport { getHeading, getIcon } from './callout.helpers';\n\n/**\n * Callouts—also known as Admonitions—are useful for including supportive or\n * special content within a large piece of text, or even inside a user\n * interface.\n *\n * When used in a document or text based user interface, the callout attracts\n * the reader's attention to a particular piece of information, without\n * significantly interrupting their flow of reading the document.\n *\n * In a user interface, a callout is more intrusive to the end-user. Still, it\n * could be a good choice when you intend to slightly disturb the user's\n * attention, and challenge them to pay extra attention to the information\n * presented. In such cases, a callout should not be used as a static and\n * constantly present element of the UI. Rather, it should be displayed when\n * something unusual or remarkable demands the user's attention.\n *\n * @exampleComponent limel-example-callout-note\n * @exampleComponent limel-example-callout-important\n * @exampleComponent limel-example-callout-tip\n * @exampleComponent limel-example-callout-caution\n * @exampleComponent limel-example-callout-warning\n * @exampleComponent limel-example-callout-rich-content\n * @exampleComponent limel-example-callout-custom-heading\n * @exampleComponent limel-example-callout-custom-icon\n * @exampleComponent limel-example-callout-styles\n * @exampleComponent limel-example-custom-type\n * @exampleComponent limel-example-callout-composite\n */\n@Component({\n    tag: 'limel-callout',\n    shadow: true,\n    styleUrl: 'callout.scss',\n})\nexport class Callout {\n    /**\n     * Heading of the callout, which can be used to override the\n     * default heading which is displayed based on the chosen `type`.\n     */\n    @Prop({ reflect: true })\n    public heading?: string;\n\n    /**\n     * Icon of the callout, which can be used to override the\n     * default icon which is displayed based on the chosen `type`.\n     */\n    @Prop({ reflect: true })\n    public icon?: string;\n\n    /**\n     * Defines how the component is visualized, for example\n     * which heading, color or icon is used in its user interface.\n     */\n    @Prop({ reflect: true })\n    public type?: CalloutType = 'note';\n\n    /**\n     * Defines the language for translations.\n     * Will translate the default headings for supported languages.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    public render() {\n        return [\n            <div class=\"side\" role=\"presentation\">\n                <limel-icon name={getIcon(this.icon, this.type)} />\n            </div>,\n            <div class=\"main\">\n                <h1 class=\"heading\">\n                    {getHeading(this.heading, this.type, this.language)}\n                </h1>\n                <slot />\n            </div>,\n        ];\n    }\n}\n"],"version":3}
+{"file":"limel-callout.entry.js","mappings":";;;AAEA,MAAM,YAAY,GAA2B;EACzC,IAAI,EAAE,MAAM;EACZ,SAAS,EAAE,kBAAkB;EAC7B,GAAG,EAAE,MAAM;EACX,OAAO,EAAE,eAAe;EACxB,OAAO,EAAE,OAAO;CACnB,CAAC;SAEc,OAAO,CAAC,IAAY,EAAE,OAAe,MAAM;;EACvD,IAAI,IAAI,EAAE;IACN,OAAO,IAAI,CAAC;GACf;EAED,OAAO,MAAA,YAAY,CAAC,IAAI,CAAC,mCAAI,YAAY,CAAC,IAAI,CAAC;AACnD,CAAC;SAEe,UAAU,CACtB,OAAe,EACf,OAAe,MAAM,EACrB,WAAmB,IAAI;EAEvB,IAAI,OAAO,EAAE;IACT,OAAO,OAAO,CAAC;GAClB;EAED,MAAM,GAAG,GAAG,WAAW,IAAI,EAAE,CAAC;EAE9B,IAAI;IACA,OAAO,SAAS,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;GACvC;EAAC,WAAM;IACJ,OAAO,SAAS,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;GACnC;AACL;;AClCA,MAAM,UAAU,GAAG,ywCAAywC;;MCsC/wC,OAAO;;;;;gBAoBY,MAAM;oBAOL,IAAI;;EAE1B,MAAM;IACT,OAAO;MACH,WAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,IACjC,kBAAY,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAI,CACjD;MACN,WAAK,KAAK,EAAC,MAAM,IACb,UAAI,KAAK,EAAC,SAAS,IACd,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAClD,EACL,eAAQ,CACN;KACT,CAAC;GACL;;;;;;","names":[],"sources":["./src/components/callout/callout.helpers.ts","./src/components/callout/callout.scss?tag=limel-callout&encapsulation=shadow","./src/components/callout/callout.tsx"],"sourcesContent":["import translate from '../../global/translations';\n\nconst calloutIcons: Record<string, string> = {\n    note: 'info',\n    important: 'exclamation_mark',\n    tip: 'idea',\n    caution: 'high_priority',\n    warning: 'error',\n};\n\nexport function getIcon(icon: string, type: string = 'note'): string {\n    if (icon) {\n        return icon;\n    }\n\n    return calloutIcons[type] ?? calloutIcons.note;\n}\n\nexport function getHeading(\n    heading: string,\n    type: string = 'note',\n    language: string = 'en',\n): string {\n    if (heading) {\n        return heading;\n    }\n\n    const key = `callout.${type}`;\n\n    try {\n        return translate.get(key, language);\n    } catch {\n        return translate.get(key, 'en');\n    }\n}\n","/**\n * @prop --callout-text-color: Text color of the component. Defaults to `--contrast-1100`.\n * @prop --callout-background-color: Background color of the component. Defaults to `--contrast-300`.\n * @prop --callout-color: Color used in the UI to add more contextual meaning about the type of the information. This color is different based on the chosen `type`, but you can override it using this prop.\n*/\n\n:host(limel-callout) {\n    display: flex;\n    border-radius: 0.5rem;\n    overflow: hidden;\n\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-contrast-100))\n    );\n    color: var(--callout-text-color, rgb(var(--contrast-1100)));\n}\n:host([type='note']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-gray-default))\n    );\n}\n:host([type='important']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-sky-default))\n    );\n}\n:host([type='tip']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-green-default))\n    );\n}\n:host([type='caution']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-orange-light))\n    );\n}\n:host([type='warning']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-red-dark))\n    );\n}\n\n.side {\n    padding: 0.25rem;\n    position: relative;\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        opacity: 0.2;\n        background-color: var(--limel-callout-tint-color);\n    }\n\n    limel-icon {\n        width: 1.5rem;\n        color: var(--limel-callout-tint-color);\n        margin-top: 0.0625rem; // ensures vertical alignment with the `heading`\n    }\n}\n\n.main {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding: 0.25rem 0.5rem 0.5rem 0.5rem;\n    background-color: var(--callout-background-color, rgb(var(--contrast-300)));\n}\n\n.heading {\n    margin: 0;\n    font-size: 1rem;\n    font-weight: 600;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { CalloutType } from '../callout/callout.types';\nimport { Languages } from '../date-picker/date.types';\nimport { getHeading, getIcon } from './callout.helpers';\n\n/**\n * Callouts—also known as Admonitions—are useful for including supportive or\n * special content within a large piece of text, or even inside a user\n * interface.\n *\n * When used in a document or text based user interface, the callout attracts\n * the reader's attention to a particular piece of information, without\n * significantly interrupting their flow of reading the document.\n *\n * In a user interface, a callout is more intrusive to the end-user. Still, it\n * could be a good choice when you intend to slightly disturb the user's\n * attention, and challenge them to pay extra attention to the information\n * presented. In such cases, a callout should not be used as a static and\n * constantly present element of the UI. Rather, it should be displayed when\n * something unusual or remarkable demands the user's attention.\n *\n * @exampleComponent limel-example-callout-note\n * @exampleComponent limel-example-callout-important\n * @exampleComponent limel-example-callout-tip\n * @exampleComponent limel-example-callout-caution\n * @exampleComponent limel-example-callout-warning\n * @exampleComponent limel-example-callout-rich-content\n * @exampleComponent limel-example-callout-custom-heading\n * @exampleComponent limel-example-callout-custom-icon\n * @exampleComponent limel-example-callout-styles\n * @exampleComponent limel-example-custom-type\n * @exampleComponent limel-example-callout-composite\n */\n@Component({\n    tag: 'limel-callout',\n    shadow: true,\n    styleUrl: 'callout.scss',\n})\nexport class Callout {\n    /**\n     * Heading of the callout, which can be used to override the\n     * default heading which is displayed based on the chosen `type`.\n     */\n    @Prop({ reflect: true })\n    public heading?: string;\n\n    /**\n     * Icon of the callout, which can be used to override the\n     * default icon which is displayed based on the chosen `type`.\n     */\n    @Prop({ reflect: true })\n    public icon?: string;\n\n    /**\n     * Defines how the component is visualized, for example\n     * which heading, color or icon is used in its user interface.\n     */\n    @Prop({ reflect: true })\n    public type?: CalloutType = 'note';\n\n    /**\n     * Defines the language for translations.\n     * Will translate the default headings for supported languages.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    public render() {\n        return [\n            <div class=\"side\" role=\"presentation\">\n                <limel-icon name={getIcon(this.icon, this.type)} />\n            </div>,\n            <div class=\"main\">\n                <h1 class=\"heading\">\n                    {getHeading(this.heading, this.type, this.language)}\n                </h1>\n                <slot />\n            </div>,\n        ];\n    }\n}\n"],"version":3}

package/dist/esm/limel-color-picker.entry.js.map

@@ -1 +1 @@
-{"file":"limel-color-picker.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,y6IAAy6I;;MCuBn7I,WAAW;;;;IAuDZ,gBAAW,GAAG,KAAK,CAAC;IAoBpB,kBAAa,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;QACrC,QACI,qBACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,SAAS,EAAC,gBAAgB,GAC5B,EACJ;OACL;KACJ,CAAC;IAEM,wBAAmB,GAAG;MAC1B,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;OACrC;MAED,QACI,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,aAAa,EAAC,cAAc,EAC5B,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,IAAI,CAAC,mBAAmB,EAAE,EAC3B,kCACI,GAAG,EAAE,IAAI,CAAC,4BAA4B,EACtC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACU,EAClB;KACL,CAAC;IAEM,wBAAmB,GAAG;MAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;MAEpE,QACI,cACI,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,EAAE,EAAC,gBAAgB,GACrB,EACJ;KACL,CAAC;IAEM,iCAA4B,GAAG,CACnC,OAA2C;MAE3C,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;KACjC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MAEnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;KAClC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACvB,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B;MAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;;;;;;;kBAtGe,KAAK;;EAEf,kBAAkB;;IACrB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,MAAM,EAAE;MACjC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;MACzB,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,EAAE,CAAC;KAChC;GACJ;EAMM,MAAM;IACT,OAAO;MACH,IAAI,CAAC,aAAa,EAAE;MACpB,WAAK,KAAK,EAAC,cAAc,IACpB,IAAI,CAAC,mBAAmB,EAAE,EAE3B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,oBAAoB,GAC5B,CACA;KACT,CAAC;GACL;;;;;;","names":[],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host {\n    position: relative;\n    --popover-surface-width: 50rem;\n    --color-picker-default-background: url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\");\n}\n\n.color-picker {\n    display: grid;\n    gap: 0.25rem;\n    grid-template-columns: auto 1fr;\n}\n\n.picker-trigger {\n    all: unset;\n    border-radius: 0.5rem;\n    @include mixins.is-elevated-clickable();\n    @include mixins.visualize-keyboard-focus();\n\n    &:after {\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n    }\n}\n\n.chosen-color-preview,\n.picker-trigger {\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        background: var(--color-picker-default-background);\n        background-size: 0.5rem;\n        z-index: 0;\n    }\n\n    &:after {\n        background: var(--background);\n        z-index: 1;\n    }\n}\n\n:host([readonly]) {\n    .picker-trigger {\n        &:hover,\n        &:active {\n            cursor: default;\n            box-shadow: var(--button-shadow-normal);\n            transform: none;\n        }\n    }\n}\n\n.chosen-color-input[readonly] {\n    transform: translateX(\n            calc(\n                #{shared_input-select-picker.$height-of-mdc-text-field} / 4 * -1\n            )\n        )\n        translateY(\n            calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4)\n        );\n}\n","/* eslint-disable multiline-ternary */\nimport { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n */\n@Component({\n    tag: 'limel-color-picker',\n    shadow: true,\n    styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n    /**\n     * Name or code of the chosen color\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * The label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Displayed as tooltips when picker is hovered.\n     */\n    @Prop({ reflect: true })\n    public tooltipLabel: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` if a value is readonly. This makes the component un-interactive.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    @State()\n    private isOpen = false;\n\n    public componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return [\n            this.renderTooltip(),\n            <div class=\"color-picker\">\n                {this.renderPickerPalette()}\n\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    readonly={this.readonly}\n                    class=\"chosen-color-input\"\n                />\n            </div>,\n        ];\n    }\n    private renderTooltip = () => {\n        if (!this.readonly && this.tooltipLabel) {\n            return (\n                <limel-tooltip\n                    label={this.tooltipLabel}\n                    elementId=\"tooltip-button\"\n                />\n            );\n        }\n    };\n\n    private renderPickerPalette = () => {\n        if (this.readonly) {\n            return this.renderPickerTrigger();\n        }\n\n        return (\n            <limel-popover\n                open={this.isOpen}\n                openDirection=\"bottom-start\"\n                onClose={this.onPopoverClose}\n            >\n                {this.renderPickerTrigger()}\n                <limel-color-picker-palette\n                    ref={this.setColorPickerPaletteElement}\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    onChange={this.handleChange}\n                    required={this.required}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                class=\"picker-trigger\"\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n            />\n        );\n    };\n\n    private setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement,\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"version":3}
+{"file":"limel-color-picker.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,y6IAAy6I;;MCsBn7I,WAAW;;;;IAuDZ,gBAAW,GAAG,KAAK,CAAC;IAoBpB,kBAAa,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;QACrC,QACI,qBACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,SAAS,EAAC,gBAAgB,GAC5B,EACJ;OACL;KACJ,CAAC;IAEM,wBAAmB,GAAG;MAC1B,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;OACrC;MAED,QACI,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,aAAa,EAAC,cAAc,EAC5B,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,IAAI,CAAC,mBAAmB,EAAE,EAC3B,kCACI,GAAG,EAAE,IAAI,CAAC,4BAA4B,EACtC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACU,EAClB;KACL,CAAC;IAEM,wBAAmB,GAAG;MAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;MAEpE,QACI,cACI,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,EAAE,EAAC,gBAAgB,GACrB,EACJ;KACL,CAAC;IAEM,iCAA4B,GAAG,CACnC,OAA2C;MAE3C,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;KACjC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MAEnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;KAClC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACvB,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B;MAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;;;;;;;kBAtGe,KAAK;;EAEf,kBAAkB;;IACrB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,MAAM,EAAE;MACjC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;MACzB,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,EAAE,CAAC;KAChC;GACJ;EAMM,MAAM;IACT,OAAO;MACH,IAAI,CAAC,aAAa,EAAE;MACpB,WAAK,KAAK,EAAC,cAAc,IACpB,IAAI,CAAC,mBAAmB,EAAE,EAE3B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,oBAAoB,GAC5B,CACA;KACT,CAAC;GACL;;;;;;","names":[],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host {\n    position: relative;\n    --popover-surface-width: 50rem;\n    --color-picker-default-background: url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\");\n}\n\n.color-picker {\n    display: grid;\n    gap: 0.25rem;\n    grid-template-columns: auto 1fr;\n}\n\n.picker-trigger {\n    all: unset;\n    border-radius: 0.5rem;\n    @include mixins.is-elevated-clickable();\n    @include mixins.visualize-keyboard-focus();\n\n    &:after {\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n    }\n}\n\n.chosen-color-preview,\n.picker-trigger {\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        background: var(--color-picker-default-background);\n        background-size: 0.5rem;\n        z-index: 0;\n    }\n\n    &:after {\n        background: var(--background);\n        z-index: 1;\n    }\n}\n\n:host([readonly]) {\n    .picker-trigger {\n        &:hover,\n        &:active {\n            cursor: default;\n            box-shadow: var(--button-shadow-normal);\n            transform: none;\n        }\n    }\n}\n\n.chosen-color-input[readonly] {\n    transform: translateX(\n            calc(\n                #{shared_input-select-picker.$height-of-mdc-text-field} / 4 * -1\n            )\n        )\n        translateY(\n            calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4)\n        );\n}\n","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n */\n@Component({\n    tag: 'limel-color-picker',\n    shadow: true,\n    styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n    /**\n     * Name or code of the chosen color\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * The label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Displayed as tooltips when picker is hovered.\n     */\n    @Prop({ reflect: true })\n    public tooltipLabel: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` if a value is readonly. This makes the component un-interactive.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    @State()\n    private isOpen = false;\n\n    public componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return [\n            this.renderTooltip(),\n            <div class=\"color-picker\">\n                {this.renderPickerPalette()}\n\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    readonly={this.readonly}\n                    class=\"chosen-color-input\"\n                />\n            </div>,\n        ];\n    }\n    private renderTooltip = () => {\n        if (!this.readonly && this.tooltipLabel) {\n            return (\n                <limel-tooltip\n                    label={this.tooltipLabel}\n                    elementId=\"tooltip-button\"\n                />\n            );\n        }\n    };\n\n    private renderPickerPalette = () => {\n        if (this.readonly) {\n            return this.renderPickerTrigger();\n        }\n\n        return (\n            <limel-popover\n                open={this.isOpen}\n                openDirection=\"bottom-start\"\n                onClose={this.onPopoverClose}\n            >\n                {this.renderPickerTrigger()}\n                <limel-color-picker-palette\n                    ref={this.setColorPickerPaletteElement}\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    onChange={this.handleChange}\n                    required={this.required}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                class=\"picker-trigger\"\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n            />\n        );\n    };\n\n    private setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement,\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"version":3}

package/dist/esm/limel-dynamic-label_4.entry.js

@@ -145,7 +145,7 @@ class ListRenderer {
     this.renderListItem = (item, index) => {
       if ('separator' in item) {
         return (h("li", { class: "mdc-deprecated-list-divider", role: "separator" },
-          this.rendertext(item),
+          this.renderTextForSeparator(item),
           h("div", { class: "limel-list-divider-line" })));
       }
       if (['radio', 'checkbox'].includes(this.config.type)) {
@@ -168,7 +168,7 @@ class ListRenderer {
         this.twoLines && this.avatarList ? this.renderDivider() : null,
         this.renderActionMenu(item.actions)));
     };
-    this.rendertext = (item) => {
+    this.renderTextForSeparator = (item) => {
       if ('text' in item) {
         return h("h2", { class: "limel-list-divider-title" }, item.text);
       }