@limetech/lime-elements 37.65.3 → 37.65.5

package/dist/lime-elements/{p-40e0c71f.entry.js → p-d968c565.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as s,h as i,g as e}from"./p-443111b3.js";import{t as r}from"./p-fe15bcbb.js";import{c as a}from"./p-3ccdc4a3.js";class o{constructor(){this.snackbarElements=[]}add(t){const s=this.getPopover(t);s===null||s===void 0?void 0:s.showPopover();this.snackbarElements=[t,...this.snackbarElements];this.emitOffsets()}remove(t){const s=this.getPopover(t);s===null||s===void 0?void 0:s.hidePopover();this.snackbarElements=this.snackbarElements.filter((s=>s!==t));this.emitOffsets()}emitOffsets(){let t=0;this.snackbarElements.forEach((s=>{s.dispatchEvent(new CustomEvent("changeOffset",{detail:t}));t+=this.getPopover(s).getBoundingClientRect().height}))}getPopover(t){return t.shadowRoot.querySelector("[popover]")}}const n="*{box-sizing:border-box}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}.surface{overflow:hidden;padding:0.5rem;display:flex;align-items:center;justify-content:flex-start;gap:0.25rem;min-height:3.25rem;border-radius:0.75rem;background-color:rgb(var(--contrast-1400));box-shadow:var(--shadow-depth-8), var(--shadow-depth-16)}.label{color:rgb(var(--contrast-100));-webkit-font-smoothing:antialiased;font-size:0.8125rem;font-weight:400;padding:0 0.25rem;width:100%;flex-grow:1}.actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;gap:0.5rem}.dismiss,.actions{--lime-elevated-surface-background-color:rgb(\n      var(--contrast-1300)\n  )}.dismiss{--mdc-theme-on-surface:rgb(var(--contrast-100));--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.375rem;left:-0.375rem;transform:scale(0.7);display:flex;align-items:center;justify-content:center}.dismiss svg{position:absolute;transform:rotate(90deg);fill:transparent;stroke-dasharray:100;stroke-linecap:round}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%{stroke-width:4;stroke-dashoffset:0;opacity:1}100%{stroke-width:1;stroke-dashoffset:-100;opacity:0.7}}";const c=new o;const h=300;const l=class{constructor(i){t(this,i);this.action=s(this,"action",7);this.hide=s(this,"hide",7);this.handleOpen=()=>{if(this.isOpen){return}this.isOpen=true;this.closing=false;c.add(this.host);if(this.timeout){this.timeoutId=window.setTimeout(this.handleClose,Math.max(this.timeout-h,0))}};this.handleClose=()=>{if(!this.isOpen){return}this.closing=true;if(this.timeoutId){clearTimeout(this.timeoutId);this.timeoutId=undefined}setTimeout((()=>{this.isOpen=false;c.remove(this.host);this.hide.emit();this.offset=0}),h)};this.handleClickAction=()=>{this.action.emit()};this.open=false;this.message=undefined;this.timeout=5e3;this.actionText=undefined;this.dismissible=true;this.multiline=undefined;this.language="en";this.offset=0;this.isOpen=false;this.closing=true;this.snackbarId=a()}componentDidLoad(){if(this.open){requestAnimationFrame(this.handleOpen)}}onChangeIndex(t){t.stopPropagation();this.offset=t.detail}watchOpen(){if(this.open){this.handleOpen()}else{this.handleClose()}this.isOpen=this.open}async show(){console.warn("The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.");if(!this.open){this.handleOpen()}}render(){return i("aside",{popover:"manual",style:{"--snackbar-timeout":`${this.timeout}ms`,"--snackbar-distance-to-top-edge":`${this.offset}px`},class:{open:this.open,"is-closing":this.closing},id:this.snackbarId,role:this.setAriaRoles(),"aria-relevant":this.open?"additions":undefined},i("div",{class:"surface","aria-atomic":"false"},i("div",{class:"label"},this.message),this.renderActions(this.actionText),this.renderDismissButton(this.dismissible)))}setAriaRoles(){if(!this.open){return undefined}if(!this.timeout){return"alertdialog"}return"status"}renderActions(t){if(!t){return}return i("div",{class:"actions","aria-atomic":"true"},this.renderActionButton(t))}renderActionButton(t){if(!t){return}return i("limel-button",{label:t,onClick:this.handleClickAction})}renderDismissButton(t){if(!t){return}const s=r.get("snackbar.dismiss",this.language);return i("div",{class:"dismiss"},this.renderTimeoutVisualization(),i("limel-icon-button",{class:"dismiss-button",icon:"multiply",label:s,onClick:this.handleClose,"aria-controls":this.snackbarId}))}renderTimeoutVisualization(){if(!this.timeout){return}return i("svg",{width:"36",height:"36",viewBox:"0 0 36 36"},i("circle",{r:"18",cx:"18",cy:"18",fill:"var(--track-color)"}),i("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)"}))}get host(){return e(this)}static get watchers(){return{open:["watchOpen"]}}};l.style=n;export{l as limel_snackbar};
-//# sourceMappingURL=p-40e0c71f.entry.js.map
+import{r as t,c as s,h as i,g as e}from"./p-443111b3.js";import{t as r}from"./p-fe15bcbb.js";import{c as a}from"./p-3ccdc4a3.js";class o{constructor(){this.snackbarElements=[]}add(t){const s=this.getPopover(t);s===null||s===void 0?void 0:s.showPopover();this.snackbarElements=[t,...this.snackbarElements];this.emitOffsets()}remove(t){const s=this.getPopover(t);s===null||s===void 0?void 0:s.hidePopover();this.snackbarElements=this.snackbarElements.filter((s=>s!==t));this.emitOffsets()}emitOffsets(){let t=0;this.snackbarElements.forEach((s=>{s.dispatchEvent(new CustomEvent("changeOffset",{detail:t}));t+=this.getPopover(s).getBoundingClientRect().height}))}getPopover(t){return t.shadowRoot.querySelector("[popover]")}}const n="*{box-sizing:border-box}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}.surface{overflow:hidden;padding:0.5rem;display:flex;align-items:center;justify-content:flex-start;gap:0.25rem;min-height:3.25rem;border-radius:0.75rem;background-color:rgb(var(--contrast-1400));box-shadow:var(--shadow-depth-8), var(--shadow-depth-16)}.label{color:rgb(var(--contrast-100));-webkit-font-smoothing:antialiased;font-size:0.8125rem;font-weight:400;padding:0 0.25rem;width:100%;flex-grow:1}.actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;gap:0.5rem}.dismiss,.actions{--lime-elevated-surface-background-color:rgb(\n      var(--contrast-1300)\n  )}.dismiss{--mdc-theme-on-surface:rgb(var(--contrast-100));--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.375rem;left:-0.375rem;transform:scale(0.7);display:flex;align-items:center;justify-content:center}.dismiss svg{position:absolute;transform:rotate(90deg);fill:transparent;stroke-dasharray:100;stroke-linecap:round}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%{stroke-width:4;stroke-dashoffset:0;opacity:1}100%{stroke-width:1;stroke-dashoffset:-100;opacity:0.7}}";const c=new o;const h=300;const l=class{constructor(i){t(this,i);this.action=s(this,"action",7);this.hide=s(this,"hide",7);this.handleOpen=()=>{if(this.isOpen){return}this.isOpen=true;this.closing=false;c.add(this.host);if(this.timeout&&this.timeout!==-1){this.timeoutId=window.setTimeout(this.handleClose,Math.max(this.timeout-h,h))}};this.handleClose=()=>{if(!this.isOpen){return}this.closing=true;if(this.timeoutId){clearTimeout(this.timeoutId);this.timeoutId=undefined}setTimeout((()=>{this.isOpen=false;c.remove(this.host);this.hide.emit();this.offset=0}),h)};this.handleClickAction=()=>{this.action.emit()};this.open=false;this.message=undefined;this.timeout=5e3;this.actionText=undefined;this.dismissible=true;this.multiline=undefined;this.language="en";this.offset=0;this.isOpen=false;this.closing=true;this.snackbarId=a()}componentDidLoad(){if(this.open){requestAnimationFrame(this.handleOpen)}}onChangeIndex(t){t.stopPropagation();this.offset=t.detail}watchOpen(){if(this.open){this.handleOpen()}else{this.handleClose()}this.isOpen=this.open}async show(){console.warn("The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.");if(!this.open){this.handleOpen()}}render(){return i("aside",{popover:"manual",style:{"--snackbar-timeout":`${Math.max(this.timeout||0,0)}ms`,"--snackbar-distance-to-top-edge":`${this.offset}px`},class:{open:this.open,"is-closing":this.closing},id:this.snackbarId,role:this.setAriaRoles(),"aria-relevant":this.open?"additions":undefined},i("div",{class:"surface","aria-atomic":"false"},i("div",{class:"label"},this.message),this.renderActions(this.actionText),this.renderDismissButton(this.dismissible)))}setAriaRoles(){if(!this.open){return undefined}if(!this.timeout||this.timeout===-1){return"alertdialog"}return"status"}renderActions(t){if(!t){return}return i("div",{class:"actions","aria-atomic":"true"},this.renderActionButton(t))}renderActionButton(t){if(!t){return}return i("limel-button",{label:t,onClick:this.handleClickAction})}renderDismissButton(t){if(!t){return}const s=r.get("snackbar.dismiss",this.language);return i("div",{class:"dismiss"},this.renderTimeoutVisualization(),i("limel-icon-button",{class:"dismiss-button",icon:"multiply",label:s,onClick:this.handleClose,"aria-controls":this.snackbarId}))}renderTimeoutVisualization(){if(!this.timeout||this.timeout===-1){return}return i("svg",{width:"36",height:"36",viewBox:"0 0 36 36"},i("circle",{r:"18",cx:"18",cy:"18",fill:"var(--track-color)"}),i("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)"}))}get host(){return e(this)}static get watchers(){return{open:["watchOpen"]}}};l.style=n;export{l as limel_snackbar};
+//# sourceMappingURL=p-d968c565.entry.js.map

package/dist/lime-elements/p-d968c565.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SnackbarContainer","constructor","this","snackbarElements","add","snackbar","popover","getPopover","showPopover","emitOffsets","remove","hidePopover","filter","item","offset","forEach","dispatchEvent","CustomEvent","detail","getBoundingClientRect","height","shadowRoot","querySelector","snackbarCss","container","hideAnimationDuration","Snackbar","hostRef","handleOpen","isOpen","closing","host","timeout","timeoutId","window","setTimeout","handleClose","Math","max","clearTimeout","undefined","hide","emit","handleClickAction","action","snackbarId","createRandomString","componentDidLoad","open","requestAnimationFrame","onChangeIndex","event","stopPropagation","watchOpen","async","console","warn","render","h","style","class","id","role","setAriaRoles","message","renderActions","actionText","renderDismissButton","dismissible","renderActionButton","label","onClick","translate","get","language","renderTimeoutVisualization","icon","width","viewBox","r","cx","cy","fill","d","stroke"],"sources":["./src/components/snackbar/container.ts","./src/components/snackbar/snackbar.scss?tag=limel-snackbar&encapsulation=shadow","./src/components/snackbar/snackbar.tsx"],"sourcesContent":["/**\n * Container to keep track of all snackbar elements that gets added to the page.\n * When an element gets added or removed, the container will emit a\n * `changeOffset` event on all elements in the container, letting them know\n * the new offset to where they should position themselves.\n */\nexport class SnackbarContainer {\n    private snackbarElements: HTMLLimelSnackbarElement[] = [];\n\n    /**\n     * Add a new element to the container\n     *\n     * @param snackbar - element to add\n     */\n    public add(snackbar: HTMLLimelSnackbarElement) {\n        const popover = this.getPopover(snackbar);\n\n        // Stencil does not seem to recognise the existance of showPopover\n        // @ts-ignore\n        popover?.showPopover();\n\n        this.snackbarElements = [snackbar, ...this.snackbarElements];\n        this.emitOffsets();\n    }\n\n    /**\n     * Remove an element from the container\n     *\n     * @param snackbar - element to remove\n     */\n    public remove(snackbar: HTMLLimelSnackbarElement): void {\n        const popover = this.getPopover(snackbar);\n\n        // Stencil does not seem to recognise the existance of hidePopover\n        // @ts-ignore\n        popover?.hidePopover();\n\n        this.snackbarElements = this.snackbarElements.filter(\n            (item) => item !== snackbar,\n        );\n        this.emitOffsets();\n    }\n\n    private emitOffsets() {\n        let offset = 0;\n        this.snackbarElements.forEach((snackbar) => {\n            snackbar.dispatchEvent(\n                new CustomEvent('changeOffset', {\n                    detail: offset,\n                }),\n            );\n            offset += this.getPopover(snackbar).getBoundingClientRect().height;\n        });\n    }\n\n    private getPopover(snackbar: HTMLLimelSnackbarElement) {\n        return snackbar.shadowRoot.querySelector('[popover]');\n    }\n}\n","* {\n    box-sizing: border-box;\n}\n\naside {\n    background: none;\n    border: none;\n    inset: unset;\n    overflow: visible;\n    padding: 0.5rem 0.5rem 0 0.5rem;\n    right: 0;\n\n    width: var(--limel-snackbar-width, 21rem);\n    top: calc(\n        var(--snackbar-distance-to-top-edge) + env(safe-area-inset-top, 0)\n    );\n\n    transition:\n        opacity var(--limel-snackbar-opacity-transition-speed, 0.2s) ease,\n        top var(--limel-snackbar-top-transition-speed, 0.46s)\n            cubic-bezier(1, 0.09, 0, 0.89),\n        transform var(--limel-snackbar-top-transition-speed, 0.46s) ease;\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n\n    &.is-closing {\n        transform: translate3d(2rem, 0, 0);\n        opacity: 0;\n        --limel-snackbar-top-transition-speed: 0.2s;\n        --limel-snackbar-opacity-transition-speed: 0.2s;\n    }\n}\n\n.surface {\n    overflow: hidden;\n\n    padding: 0.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 0.25rem;\n\n    min-height: 3.25rem;\n    border-radius: 0.75rem;\n\n    background-color: rgb(var(--contrast-1400));\n    box-shadow: var(--shadow-depth-8), var(--shadow-depth-16);\n}\n\n.label {\n    color: rgb(var(--contrast-100));\n\n    -webkit-font-smoothing: antialiased;\n    font-size: 0.8125rem;\n    font-weight: 400;\n    padding: 0 0.25rem;\n\n    width: 100%;\n    flex-grow: 1;\n}\n\n.actions {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    box-sizing: border-box;\n    gap: 0.5rem;\n}\n\n.dismiss,\n.actions {\n    --lime-elevated-surface-background-color: rgb(\n        var(--contrast-1300)\n    ); // background color of the buttons\n}\n\n.dismiss {\n    --mdc-theme-on-surface: rgb(var(--contrast-100)); // color of the X icon\n    --icon-background-color: var(--lime-elevated-surface-background-color);\n    --fill-color: var(--mdc-theme-primary);\n    --track-color: rgb(var(--contrast-800), 0.2);\n    transition:\n        opacity 0.1s ease,\n        transform 0.1s ease;\n    position: absolute;\n    top: -0.375rem;\n    left: -0.375rem;\n    transform: scale(0.7);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    svg {\n        position: absolute;\n        transform: rotate(90deg);\n        fill: transparent;\n        stroke-dasharray: 100;\n        stroke-linecap: round;\n\n        aside:popover-open & {\n            animation: timeout var(--snackbar-timeout) linear forwards;\n        }\n    }\n\n    .is-closing {\n        transform: scale(0.5);\n        opacity: 0;\n    }\n}\n\n.dismiss-button {\n    transform: scale(0.8);\n    margin: 0;\n    padding: 0;\n}\n\n@keyframes timeout {\n    0% {\n        stroke-width: 4;\n        stroke-dashoffset: 0;\n        opacity: 1;\n    }\n    100% {\n        stroke-width: 1;\n        stroke-dashoffset: -100;\n        opacity: 0.7;\n    }\n}\n","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    Watch,\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-with-action\n * @exampleComponent limel-example-snackbar-with-changing-messages\n * @exampleComponent limel-example-snackbar-dismissible\n * @exampleComponent limel-example-snackbar-persistent\n * @exampleComponent limel-example-snackbar-persistent-non-dismissible\n */\n@Component({\n    tag: 'limel-snackbar',\n    shadow: true,\n    styleUrl: 'snackbar.scss',\n})\nexport class Snackbar {\n    /**\n     * `true` if the snackbar is open, `false` otherwise.\n     */\n    @Prop({ reflect: true })\n    public open: boolean = false;\n\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     * If set to `-1`, the snackbar will be persistent.\n     * This means:\n     * - either the end user will need to close it manually,\n     * which requires the `dismissible` property to be set to `true`.\n     * - or the snackbar needs to be closed programmatically.\n     */\n    @Prop({ reflect: true })\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 isOpen: 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    public componentDidLoad() {\n        if (this.open) {\n            requestAnimationFrame(this.handleOpen);\n        }\n    }\n\n    @Listen('changeOffset')\n    protected onChangeIndex(event: CustomEvent<number>) {\n        event.stopPropagation();\n        this.offset = event.detail;\n    }\n\n    @Watch('open')\n    protected watchOpen() {\n        if (this.open) {\n            this.handleOpen();\n        } else {\n            this.handleClose();\n        }\n\n        this.isOpen = this.open;\n    }\n\n    /**\n     * Show the snackbar\n     * @deprecated Use the `open` property instead.\n     */\n    @Method()\n    public async show() {\n        // eslint-disable-next-line no-console\n        console.warn(\n            'The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.',\n        );\n        if (!this.open) {\n            this.handleOpen();\n        }\n    }\n\n    public handleOpen = () => {\n        if (this.isOpen) {\n            return;\n        }\n\n        this.isOpen = true;\n        this.closing = false;\n        container.add(this.host);\n\n        if (this.timeout && this.timeout !== -1) {\n            this.timeoutId = window.setTimeout(\n                this.handleClose,\n                Math.max(\n                    this.timeout - hideAnimationDuration,\n                    hideAnimationDuration,\n                ),\n            );\n        }\n    };\n\n    private handleClose = () => {\n        if (!this.isOpen) {\n            return;\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.isOpen = 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': `${Math.max(this.timeout || 0, 0)}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.setAriaRoles()}\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 setAriaRoles() {\n        if (!this.open) {\n            return undefined;\n        }\n\n        if (!this.timeout || this.timeout === -1) {\n            return 'alertdialog';\n        }\n\n        return 'status';\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.handleClose}\n                    aria-controls={this.snackbarId}\n                />\n            </div>\n        );\n    }\n\n    private renderTimeoutVisualization() {\n        if (!this.timeout || this.timeout === -1) {\n            return;\n        }\n\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"],"mappings":"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"}

package/dist/types/components/snackbar/snackbar.d.ts

@@ -39,9 +39,9 @@ export declare class Snackbar {
   message: string;
   /**
    * The amount of time in milliseconds to show the snackbar.
-   * If set to `null`, the snackbar will be persistent.
+   * If set to `-1`, the snackbar will be persistent.
    * This means:
-   * - either the end user will need to close is manually,
+   * - either the end user will need to close it manually,
    * which requires the `dismissible` property to be set to `true`.
    * - or the snackbar needs to be closed programmatically.
    */

package/dist/types/components.d.ts

@@ -2330,7 +2330,7 @@ export namespace Components {
          */
         "show": () => Promise<void>;
         /**
-          * The amount of time in milliseconds to show the snackbar. If set to `null`, the snackbar will be persistent. This means: - either the end user will need to close is manually, which requires the `dismissible` property to be set to `true`. - or the snackbar needs to be closed programmatically.
+          * The amount of time in milliseconds to show the snackbar. If set to `-1`, the snackbar will be persistent. This means: - either the end user will need to close it manually, which requires the `dismissible` property to be set to `true`. - or the snackbar needs to be closed programmatically.
          */
         "timeout"?: number;
     }
@@ -6792,7 +6792,7 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
         /**
-          * The amount of time in milliseconds to show the snackbar. If set to `null`, the snackbar will be persistent. This means: - either the end user will need to close is manually, which requires the `dismissible` property to be set to `true`. - or the snackbar needs to be closed programmatically.
+          * The amount of time in milliseconds to show the snackbar. If set to `-1`, the snackbar will be persistent. This means: - either the end user will need to close it manually, which requires the `dismissible` property to be set to `true`. - or the snackbar needs to be closed programmatically.
          */
         "timeout"?: number;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.65.3",
+  "version": "37.65.5",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-40e0c71f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["SnackbarContainer","constructor","this","snackbarElements","add","snackbar","popover","getPopover","showPopover","emitOffsets","remove","hidePopover","filter","item","offset","forEach","dispatchEvent","CustomEvent","detail","getBoundingClientRect","height","shadowRoot","querySelector","snackbarCss","container","hideAnimationDuration","Snackbar","hostRef","handleOpen","isOpen","closing","host","timeout","timeoutId","window","setTimeout","handleClose","Math","max","clearTimeout","undefined","hide","emit","handleClickAction","action","snackbarId","createRandomString","componentDidLoad","open","requestAnimationFrame","onChangeIndex","event","stopPropagation","watchOpen","async","console","warn","render","h","style","class","id","role","setAriaRoles","message","renderActions","actionText","renderDismissButton","dismissible","renderActionButton","label","onClick","translate","get","language","renderTimeoutVisualization","icon","width","viewBox","r","cx","cy","fill","d","stroke"],"sources":["./src/components/snackbar/container.ts","./src/components/snackbar/snackbar.scss?tag=limel-snackbar&encapsulation=shadow","./src/components/snackbar/snackbar.tsx"],"sourcesContent":["/**\n * Container to keep track of all snackbar elements that gets added to the page.\n * When an element gets added or removed, the container will emit a\n * `changeOffset` event on all elements in the container, letting them know\n * the new offset to where they should position themselves.\n */\nexport class SnackbarContainer {\n    private snackbarElements: HTMLLimelSnackbarElement[] = [];\n\n    /**\n     * Add a new element to the container\n     *\n     * @param snackbar - element to add\n     */\n    public add(snackbar: HTMLLimelSnackbarElement) {\n        const popover = this.getPopover(snackbar);\n\n        // Stencil does not seem to recognise the existance of showPopover\n        // @ts-ignore\n        popover?.showPopover();\n\n        this.snackbarElements = [snackbar, ...this.snackbarElements];\n        this.emitOffsets();\n    }\n\n    /**\n     * Remove an element from the container\n     *\n     * @param snackbar - element to remove\n     */\n    public remove(snackbar: HTMLLimelSnackbarElement): void {\n        const popover = this.getPopover(snackbar);\n\n        // Stencil does not seem to recognise the existance of hidePopover\n        // @ts-ignore\n        popover?.hidePopover();\n\n        this.snackbarElements = this.snackbarElements.filter(\n            (item) => item !== snackbar,\n        );\n        this.emitOffsets();\n    }\n\n    private emitOffsets() {\n        let offset = 0;\n        this.snackbarElements.forEach((snackbar) => {\n            snackbar.dispatchEvent(\n                new CustomEvent('changeOffset', {\n                    detail: offset,\n                }),\n            );\n            offset += this.getPopover(snackbar).getBoundingClientRect().height;\n        });\n    }\n\n    private getPopover(snackbar: HTMLLimelSnackbarElement) {\n        return snackbar.shadowRoot.querySelector('[popover]');\n    }\n}\n","* {\n    box-sizing: border-box;\n}\n\naside {\n    background: none;\n    border: none;\n    inset: unset;\n    overflow: visible;\n    padding: 0.5rem 0.5rem 0 0.5rem;\n    right: 0;\n\n    width: var(--limel-snackbar-width, 21rem);\n    top: calc(\n        var(--snackbar-distance-to-top-edge) + env(safe-area-inset-top, 0)\n    );\n\n    transition:\n        opacity var(--limel-snackbar-opacity-transition-speed, 0.2s) ease,\n        top var(--limel-snackbar-top-transition-speed, 0.46s)\n            cubic-bezier(1, 0.09, 0, 0.89),\n        transform var(--limel-snackbar-top-transition-speed, 0.46s) ease;\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n\n    &.is-closing {\n        transform: translate3d(2rem, 0, 0);\n        opacity: 0;\n        --limel-snackbar-top-transition-speed: 0.2s;\n        --limel-snackbar-opacity-transition-speed: 0.2s;\n    }\n}\n\n.surface {\n    overflow: hidden;\n\n    padding: 0.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 0.25rem;\n\n    min-height: 3.25rem;\n    border-radius: 0.75rem;\n\n    background-color: rgb(var(--contrast-1400));\n    box-shadow: var(--shadow-depth-8), var(--shadow-depth-16);\n}\n\n.label {\n    color: rgb(var(--contrast-100));\n\n    -webkit-font-smoothing: antialiased;\n    font-size: 0.8125rem;\n    font-weight: 400;\n    padding: 0 0.25rem;\n\n    width: 100%;\n    flex-grow: 1;\n}\n\n.actions {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    box-sizing: border-box;\n    gap: 0.5rem;\n}\n\n.dismiss,\n.actions {\n    --lime-elevated-surface-background-color: rgb(\n        var(--contrast-1300)\n    ); // background color of the buttons\n}\n\n.dismiss {\n    --mdc-theme-on-surface: rgb(var(--contrast-100)); // color of the X icon\n    --icon-background-color: var(--lime-elevated-surface-background-color);\n    --fill-color: var(--mdc-theme-primary);\n    --track-color: rgb(var(--contrast-800), 0.2);\n    transition:\n        opacity 0.1s ease,\n        transform 0.1s ease;\n    position: absolute;\n    top: -0.375rem;\n    left: -0.375rem;\n    transform: scale(0.7);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    svg {\n        position: absolute;\n        transform: rotate(90deg);\n        fill: transparent;\n        stroke-dasharray: 100;\n        stroke-linecap: round;\n\n        aside:popover-open & {\n            animation: timeout var(--snackbar-timeout) linear forwards;\n        }\n    }\n\n    .is-closing {\n        transform: scale(0.5);\n        opacity: 0;\n    }\n}\n\n.dismiss-button {\n    transform: scale(0.8);\n    margin: 0;\n    padding: 0;\n}\n\n@keyframes timeout {\n    0% {\n        stroke-width: 4;\n        stroke-dashoffset: 0;\n        opacity: 1;\n    }\n    100% {\n        stroke-width: 1;\n        stroke-dashoffset: -100;\n        opacity: 0.7;\n    }\n}\n","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    Watch,\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-with-action\n * @exampleComponent limel-example-snackbar-with-changing-messages\n * @exampleComponent limel-example-snackbar-dismissible\n * @exampleComponent limel-example-snackbar-persistent\n * @exampleComponent limel-example-snackbar-persistent-non-dismissible\n */\n@Component({\n    tag: 'limel-snackbar',\n    shadow: true,\n    styleUrl: 'snackbar.scss',\n})\nexport class Snackbar {\n    /**\n     * `true` if the snackbar is open, `false` otherwise.\n     */\n    @Prop({ reflect: true })\n    public open: boolean = false;\n\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     * If set to `null`, the snackbar will be persistent.\n     * This means:\n     * - either the end user will need to close is manually,\n     * which requires the `dismissible` property to be set to `true`.\n     * - or the snackbar needs to be closed programmatically.\n     */\n    @Prop({ reflect: true })\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 isOpen: 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    public componentDidLoad() {\n        if (this.open) {\n            requestAnimationFrame(this.handleOpen);\n        }\n    }\n\n    @Listen('changeOffset')\n    protected onChangeIndex(event: CustomEvent<number>) {\n        event.stopPropagation();\n        this.offset = event.detail;\n    }\n\n    @Watch('open')\n    protected watchOpen() {\n        if (this.open) {\n            this.handleOpen();\n        } else {\n            this.handleClose();\n        }\n\n        this.isOpen = this.open;\n    }\n\n    /**\n     * Show the snackbar\n     * @deprecated Use the `open` property instead.\n     */\n    @Method()\n    public async show() {\n        // eslint-disable-next-line no-console\n        console.warn(\n            'The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.',\n        );\n        if (!this.open) {\n            this.handleOpen();\n        }\n    }\n\n    public handleOpen = () => {\n        if (this.isOpen) {\n            return;\n        }\n\n        this.isOpen = true;\n        this.closing = false;\n        container.add(this.host);\n\n        if (this.timeout) {\n            this.timeoutId = window.setTimeout(\n                this.handleClose,\n                Math.max(this.timeout - hideAnimationDuration, 0),\n            );\n        }\n    };\n\n    private handleClose = () => {\n        if (!this.isOpen) {\n            return;\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.isOpen = 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.setAriaRoles()}\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 setAriaRoles() {\n        if (!this.open) {\n            return undefined;\n        }\n\n        if (!this.timeout) {\n            return 'alertdialog';\n        }\n\n        return 'status';\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.handleClose}\n                    aria-controls={this.snackbarId}\n                />\n            </div>\n        );\n    }\n\n    private renderTimeoutVisualization() {\n        if (!this.timeout) {\n            return;\n        }\n\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"],"mappings":"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"}