@limetech/lime-elements 37.62.3 → 37.63.1

package/dist/lime-elements/style/mixins.scss

@@ -361,3 +361,16 @@
         @error "Please specify the font-family #{$letterform}!";
     }
 }
+
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+@mixin truncate-text-on-line($max-lines) {
+    display: -webkit-box;
+    overflow: hidden;
+    white-space: normal;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $max-lines;
+}

package/dist/scss/mixins.scss

@@ -361,3 +361,16 @@
         @error "Please specify the font-family #{$letterform}!";
     }
 }
+
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+@mixin truncate-text-on-line($max-lines) {
+    display: -webkit-box;
+    overflow: hidden;
+    white-space: normal;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $max-lines;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.62.3",
+  "version": "37.63.1",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -57,10 +57,10 @@
     "@types/jest": "^27.4.0",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "@types/tabulator-tables": "^4.9.4",
-    "@typescript-eslint/eslint-plugin": "^8.8.1",
-    "@typescript-eslint/parser": "^8.8.1",
+    "@typescript-eslint/eslint-plugin": "^8.9.0",
+    "@typescript-eslint/parser": "^8.9.0",
     "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.13",
@@ -73,7 +73,7 @@
     "eslint-plugin-sonarjs": "^2.0.3",
     "eslint-plugin-tsdoc": "^0.3.0",
     "flatpickr": "^4.6.13",
-    "globals": "^15.10.0",
+    "globals": "^15.11.0",
     "html-escaper": "^3.0.3",
     "jest": "^27.5.1",
     "jest-cli": "^27.5.1",

package/dist/lime-elements/p-768dc020.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["collapsibleSectionCss","CollapsibleSection","this","bodyId","createRandomString","onClick","handleInteraction","isOpen","open","emit","waitForUiToRender","setTimeout","dispatchResizeEvent","close","renderActions","actions","h","class","map","renderActionButton","action","icon","label","disabled","handleActionClick","event","stopPropagation","componentDidRender","button","host","shadowRoot","querySelector","makeEnterClickable","disconnectedCallback","removeEnterClickable","render","header","String","id"],"sources":["./src/components/collapsible-section/collapsible-section.scss?tag=limel-collapsible-section&encapsulation=shadow","./src/components/collapsible-section/collapsible-section.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n\n/**\n * @prop --closed-header-background-color: background color for header when closed\n * @prop --open-header-background-color: background color for header when open\n * @prop --header-stroke-color: color of the animated icons that visualize collapsed or normal states of the headers, as well as the divider line on headers\n * @prop --body-background-color: background color for body\n * @prop --body-padding: space around content of the body\n */\n\n:host(limel-collapsible-section) {\n    --border-radius-of-header: 0.75rem;\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.open-close-toggle {\n    all: unset;\n    position: absolute;\n    inset: 0;\n    width: 100%; // for Firefox\n    @include mixins.visualize-keyboard-focus;\n    transition:\n        background-color 0.4s ease,\n        border-radius 0.1s ease;\n    cursor: pointer;\n    z-index: -1;\n\n    background-color: var(\n        --closed-header-background-color,\n        rgb(var(--contrast-200))\n    );\n    border-radius: var(--border-radius-of-header);\n\n    &:hover {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-300))\n        );\n    }\n\n    section.open & {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-100))\n        );\n        border-radius: var(--border-radius-of-header)\n            var(--border-radius-of-header) 0 0;\n        &:hover {\n            background-color: var(\n                --open-header-background-color,\n                rgb(var(--contrast-300))\n            );\n        }\n    }\n}\n\n.title,\n.divider-line,\n.expand-icon {\n    pointer-events: none;\n}\n\nheader {\n    isolation: isolate;\n    position: relative;\n\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n\n    padding-left: 0.5rem;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n}\n\n.title {\n    font-size: 1rem;\n    font-weight: 300;\n    color: var(--mdc-theme-on-surface);\n\n    justify-self: flex-start;\n\n    user-select: none; // mostly to improve experience on Android, where tapping on sections selects the text too\n\n    padding-right: 0.5rem;\n\n    // Below tries to render text in two lines,\n    // and then truncate if there is no more space\n    height: auto;\n    max-height: 3rem;\n    line-height: 1.2rem;\n    white-space: normal;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.divider-line {\n    transition: opacity 0.3s ease 0.3s;\n    flex-grow: 1;\n    height: 0.125rem;\n    border-radius: 1rem;\n    background-color: var(--header-stroke-color, rgb(var(--contrast-900)));\n    margin-right: 0.5rem;\n\n    opacity: 0;\n\n    section.open & {\n        opacity: 0.16;\n    }\n}\n\n.actions {\n    justify-self: flex-end;\n    flex-shrink: 0;\n}\n\n.body {\n    background-color: var(--body-background-color, var(--contrast-100));\n    padding-left: var(--body-padding, 1.25rem);\n    padding-right: var(--body-padding, 1.25rem);\n    border-radius: 0 0 var(--border-radius-of-header)\n        var(--border-radius-of-header);\n}\n\n// This animates height of the body,\n// from `0` to `auto`\n.body {\n    // All below vars are for internal use only!\n    --limel-cs-opacity-transition-speed: 0.1s;\n    --limel-cs-opacity-transition-delay: 0s;\n    --limel-cs-grid-template-rows-transition-speed: 0.3s;\n    transition: grid-template-rows\n        var(--limel-cs-grid-template-rows-transition-speed)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    display: grid;\n    grid-template-rows: 0fr;\n\n    slot {\n        transition: opacity var(--limel-cs-opacity-transition-speed) ease\n            var(--limel-cs-opacity-transition-delay);\n        display: block;\n        overflow: hidden;\n        opacity: 0;\n    }\n}\n\nsection.open {\n    .body {\n        --limel-cs-opacity-transition-speed: 0.4s;\n        --limel-cs-opacity-transition-delay: 0.3s;\n        --limel-cs-grid-template-rows-transition-speed: 0.46s;\n        grid-template-rows: 1fr;\n\n        slot {\n            opacity: 1;\n        }\n    }\n}\n\nheader:hover {\n    + .body {\n        will-change: grid-template-rows;\n\n        slot {\n            will-change: opacity;\n        }\n    }\n}\n\n// End: animating height\n\n@import './partial-styles/expand-icon.scss';\n","import {\n    Component,\n    Event,\n    Element,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private bodyId = createRandomString();\n\n    public componentDidRender() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        makeEnterClickable(button);\n    }\n\n    public disconnectedCallback() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        removeEnterClickable(button);\n    }\n\n    public render() {\n        return (\n            <section class={`${this.isOpen ? 'open' : ''}`}>\n                <header>\n                    <button\n                        class=\"open-close-toggle\"\n                        onClick={this.onClick}\n                        aria-controls={this.bodyId}\n                    />\n                    <div class=\"expand-icon\">\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                    </div>\n                    <h2 class=\"title mdc-typography mdc-typography--headline2\">\n                        {this.header}\n                    </h2>\n                    <div class=\"divider-line\" />\n                    {this.renderActions()}\n                </header>\n                <div\n                    class=\"body\"\n                    aria-hidden={String(!this.isOpen)}\n                    id={this.bodyId}\n                >\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n}\n"],"mappings":"4KAAA,MAAMA,EAAwB,mnM,MC6BjBC,EAAkB,M,gHAwCnBC,KAAAC,OAASC,IAkDTF,KAAAG,QAAU,KACdH,KAAKI,mBAAmB,EAGpBJ,KAAAI,kBAAoB,KACxBJ,KAAKK,QAAUL,KAAKK,OAEpB,GAAIL,KAAKK,OAAQ,CACbL,KAAKM,KAAKC,OACV,MAAMC,EAAoB,IAC1BC,WAAWC,EAAqBF,E,KAC7B,CACHR,KAAKW,MAAMJ,M,GAIXP,KAAAY,cAAgB,KACpB,IAAKZ,KAAKa,QAAS,CACf,M,CAGJ,OACIC,EAAA,OAAKC,MAAM,WACNf,KAAKa,QAAQG,IAAIhB,KAAKiB,oBACrB,EAINjB,KAAAiB,mBAAsBC,GAEtBJ,EAAA,qBACIK,KAAMD,EAAOC,KACbC,MAAOF,EAAOE,MACdC,SAAUH,EAAOG,SACjBlB,QAASH,KAAKsB,kBAAkBJ,KAKpClB,KAAAsB,kBAAqBJ,GAAoBK,IAC7CA,EAAMC,kBACNxB,KAAKkB,OAAOX,KAAKW,EAAO,E,YA9HH,M,6CAqClBO,qBACH,MAAMC,EAAS1B,KAAK2B,KAAKC,WAAWC,cAChC,sBAGJC,EAAmBJ,E,CAGhBK,uBACH,MAAML,EAAS1B,KAAK2B,KAAKC,WAAWC,cAChC,sBAGJG,EAAqBN,E,CAGlBO,SACH,OACInB,EAAA,WAASC,MAAO,GAAGf,KAAKK,OAAS,OAAS,MACtCS,EAAA,cACIA,EAAA,UACIC,MAAM,oBACNZ,QAASH,KAAKG,QAAO,gBACNH,KAAKC,SAExBa,EAAA,OAAKC,MAAM,eACPD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,UAEfD,EAAA,MAAIC,MAAM,kDACLf,KAAKkC,QAEVpB,EAAA,OAAKC,MAAM,iBACVf,KAAKY,iBAEVE,EAAA,OACIC,MAAM,OAAM,cACCoB,QAAQnC,KAAKK,QAC1B+B,GAAIpC,KAAKC,QAETa,EAAA,c"}

package/dist/lime-elements/p-889b4ae4.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as e}from"./p-443111b3.js";import{t as s}from"./p-fe15bcbb.js";import{g as r,a as n,b as a,c as h}from"./p-8bc1584b.js";import"./p-2f777fdb.js";const l=":host(limel-file){position:relative}.drag-and-drop-tip{pointer-events:none;position:absolute;box-sizing:border-box;margin:0.25rem;inset:0;display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;border-radius:0.25rem;border:1px dashed rgb(var(--contrast-700));padding:0 0.5rem}.drag-and-drop-tip .invisible-label-mock{flex-shrink:0;opacity:0;padding-right:1rem;padding-left:1.5rem}.drag-and-drop-tip .tip{font-size:smaller;color:var(--mdc-theme-text-secondary-on-background);height:auto;max-height:3rem;line-height:1;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}";const o={id:null,text:null,removable:true};const d=class{constructor(e){i(this,e);this.change=t(this,"change",7);this.interact=t(this,"interact",7);this.dropZoneTip=()=>this.getTranslation("drag-and-drop-tips");this.handleNewFiles=i=>{this.preventAndStop(i);this.change.emit(i.detail[0])};this.handleChipSetChange=i=>{i.stopPropagation();const t=!i.detail.length?i.detail[0]:null;if(!t){this.change.emit(t)}};this.handleChipInteract=i=>{this.preventAndStop(i);this.interact.emit(i.detail.id)};this.value=undefined;this.label=undefined;this.required=false;this.disabled=false;this.readonly=false;this.invalid=false;this.accept="*";this.language="en"}render(){return[e("limel-file-dropzone",{disabled:this.disabled||this.readonly||!!this.value,accept:this.accept,onFilesSelected:this.handleNewFiles},this.renderChipset()),this.renderDragAndDropTip()]}renderDragAndDropTip(){if(this.value||this.disabled||this.readonly){return}return e("div",{class:"drag-and-drop-tip"},e("span",{class:"invisible-label-mock",role:"presentation"},this.label),e("span",{class:"tip"},this.dropZoneTip()))}getChipArray(){if(!this.value){return[]}return[Object.assign(Object.assign({},o),{text:this.value.filename,id:this.value.id,icon:{name:r(this.value),title:n(this.value),color:a(this.value),backgroundColor:h(this.value)},href:this.value.href})]}renderChipset(){const i=e("limel-chip-set",{disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,label:this.label,leadingIcon:"upload_to_cloud",language:this.language,onChange:this.handleChipSetChange,onInteract:this.handleChipInteract,required:this.required,type:"input",value:this.getChipArray()});if(this.value){return i}return e("limel-file-input",{accept:this.accept,disabled:this.disabled||this.readonly},i)}preventAndStop(i){i.stopPropagation();i.preventDefault()}getTranslation(i){return s.get(`file.${i}`,this.language)}};d.style=l;export{d as limel_file};
-//# sourceMappingURL=p-889b4ae4.entry.js.map

package/dist/lime-elements/p-889b4ae4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["fileCss","DEFAULT_FILE_CHIP","id","text","removable","File","this","dropZoneTip","getTranslation","handleNewFiles","event","preventAndStop","change","emit","detail","handleChipSetChange","stopPropagation","file","length","handleChipInteract","interact","render","h","disabled","readonly","value","accept","onFilesSelected","renderChipset","renderDragAndDropTip","class","role","label","getChipArray","filename","icon","name","getFileIcon","title","getFileExtensionTitle","color","getFileColor","backgroundColor","getFileBackgroundColor","href","chipset","invalid","leadingIcon","language","onChange","onInteract","required","type","preventDefault","key","translate","get"],"sources":["./src/components/file/file.scss?tag=limel-file&encapsulation=shadow","./src/components/file/file.tsx"],"sourcesContent":["/**\n * @prop --icon-background-color: Background color of the icon. Defaults to `--contrast-400`.\n * @prop --icon-color: Color of the icon. Defaults to `--contrast-1100`.\n */\n\n:host(limel-file) {\n    position: relative;\n}\n\n.drag-and-drop-tip {\n    pointer-events: none;\n    position: absolute;\n    box-sizing: border-box;\n    margin: 0.25rem;\n    inset: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: nowrap;\n\n    border-radius: 0.25rem;\n    border: 1px dashed rgb(var(--contrast-700));\n\n    padding: 0 0.5rem;\n\n    .invisible-label-mock {\n        flex-shrink: 0;\n        opacity: 0;\n        padding-right: 1rem;\n        padding-left: 1.5rem;\n    }\n\n    .tip {\n        font-size: smaller;\n        color: var(--mdc-theme-text-secondary-on-background);\n\n        // Below tries to render text in two lines,\n        // and then truncate if there is no more space\n        height: auto;\n        max-height: 3rem;\n        line-height: 1;\n        white-space: normal;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n    }\n}\n","import translate from '../../global/translations';\nimport { Chip } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport {\n    getFileBackgroundColor,\n    getFileColor,\n    getFileExtensionTitle,\n    getFileIcon,\n} from '../../util/file-metadata';\nimport { FileInfo } from '../../global/shared-types/file.types';\n\nconst DEFAULT_FILE_CHIP: Chip = {\n    id: null,\n    text: null,\n    removable: true,\n};\n\n/**\n * This component lets end-users select a *single* file from their device\n * storage. Regardless of the user's device or operating system, this component\n * opens up a file picker dialog that allows the user to choose a file.\n *\n * ## Using correct labels\n *\n * This file picker can be used in different contexts. The component's distinct\n * visual design including the upload icon hints end-users that this is not a\n * normal input field like other fields in the form for example.\n *\n * :::important\n * you need to use a descriptive `label` that clarifies the\n * functionality of the file picker, and/or provides users with clear\n * instructions.\n *\n * Depending on the context, you may need to avoid labels such as:\n * - File\n * - Document\n *\n * and instead consider using labels like:\n * - Attach a file\n * - Upload a file\n * - Choose a document\n * - Choose a file\n *\n * and similar phrases...\n * :::\n *\n * @exampleComponent limel-example-file\n * @exampleComponent limel-example-file-custom-icon\n * @exampleComponent limel-example-file-accepted-types\n * @exampleComponent limel-example-file-composite\n */\n@Component({\n    tag: 'limel-file',\n    shadow: true,\n    styleUrl: 'file.scss',\n})\nexport class File {\n    /**\n     * The selected file.\n     */\n    @Prop()\n    public value: FileInfo;\n\n    /**\n     * The input label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * True if the input should be disabled\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * Set to `true` to disable adding and removing files, but allow interaction\n     * with any already existing file.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the chosen file is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)\n     */\n    @Prop({ reflect: true })\n    public accept: string = '*';\n\n    /**\n     * Defines the localisation for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Dispatched when a file is selected/deselected\n     */\n    @Event()\n    private change: EventEmitter<FileInfo>;\n\n    /**\n     * Dispatched when clicking on a chip\n     */\n    @Event()\n    private interact: EventEmitter<number | string>;\n\n    public render() {\n        return [\n            <limel-file-dropzone\n                disabled={this.disabled || this.readonly || !!this.value}\n                accept={this.accept}\n                onFilesSelected={this.handleNewFiles}\n            >\n                {this.renderChipset()}\n            </limel-file-dropzone>,\n            this.renderDragAndDropTip(),\n        ];\n    }\n\n    private renderDragAndDropTip() {\n        if (this.value || this.disabled || this.readonly) {\n            return;\n        }\n\n        return (\n            <div class=\"drag-and-drop-tip\">\n                <span class=\"invisible-label-mock\" role=\"presentation\">\n                    {this.label}\n                </span>\n                <span class=\"tip\">{this.dropZoneTip()}</span>\n            </div>\n        );\n    }\n\n    private dropZoneTip = (): string => {\n        return this.getTranslation('drag-and-drop-tips');\n    };\n\n    private handleNewFiles = (event: CustomEvent<FileInfo[]>) => {\n        this.preventAndStop(event);\n        this.change.emit(event.detail[0]);\n    };\n\n    private getChipArray(): Chip[] {\n        if (!this.value) {\n            return [];\n        }\n\n        return [\n            {\n                ...DEFAULT_FILE_CHIP,\n                text: this.value.filename,\n                id: this.value.id,\n                icon: {\n                    name: getFileIcon(this.value),\n                    title: getFileExtensionTitle(this.value),\n                    color: getFileColor(this.value),\n                    backgroundColor: getFileBackgroundColor(this.value),\n                },\n                href: this.value.href,\n            },\n        ];\n    }\n\n    private renderChipset() {\n        const chipset = (\n            <limel-chip-set\n                disabled={this.disabled}\n                readonly={this.readonly}\n                invalid={this.invalid}\n                label={this.label}\n                leadingIcon=\"upload_to_cloud\"\n                language={this.language}\n                onChange={this.handleChipSetChange}\n                onInteract={this.handleChipInteract}\n                required={this.required}\n                type=\"input\"\n                value={this.getChipArray()}\n            />\n        );\n\n        if (this.value) {\n            return chipset;\n        }\n\n        return (\n            <limel-file-input\n                accept={this.accept}\n                disabled={this.disabled || this.readonly}\n            >\n                {chipset}\n            </limel-file-input>\n        );\n    }\n\n    private handleChipSetChange = (event: CustomEvent) => {\n        event.stopPropagation();\n        const file = !event.detail.length ? event.detail[0] : null;\n        if (!file) {\n            this.change.emit(file);\n        }\n    };\n\n    private handleChipInteract = (event: CustomEvent<Chip>) => {\n        this.preventAndStop(event);\n        this.interact.emit(event.detail.id);\n    };\n\n    private preventAndStop(event: Event) {\n        event.stopPropagation();\n        event.preventDefault();\n    }\n\n    private getTranslation(key: string) {\n        return translate.get(`file.${key}`, this.language);\n    }\n}\n"],"mappings":"uKAAA,MAAMA,EAAU,ioBCYhB,MAAMC,EAA0B,CAC5BC,GAAI,KACJC,KAAM,KACNC,UAAW,M,MA0CFC,EAAI,M,2FA2FLC,KAAAC,YAAc,IACXD,KAAKE,eAAe,sBAGvBF,KAAAG,eAAkBC,IACtBJ,KAAKK,eAAeD,GACpBJ,KAAKM,OAAOC,KAAKH,EAAMI,OAAO,GAAG,EAuD7BR,KAAAS,oBAAuBL,IAC3BA,EAAMM,kBACN,MAAMC,GAAQP,EAAMI,OAAOI,OAASR,EAAMI,OAAO,GAAK,KACtD,IAAKG,EAAM,CACPX,KAAKM,OAAOC,KAAKI,E,GAIjBX,KAAAa,mBAAsBT,IAC1BJ,KAAKK,eAAeD,GACpBJ,KAAKc,SAASP,KAAKH,EAAMI,OAAOZ,GAAG,E,wDAjJZ,M,cAMA,M,cAOA,M,aAOV,M,YAMO,I,cAMK,I,CActBmB,SACH,MAAO,CACHC,EAAA,uBACIC,SAAUjB,KAAKiB,UAAYjB,KAAKkB,YAAclB,KAAKmB,MACnDC,OAAQpB,KAAKoB,OACbC,gBAAiBrB,KAAKG,gBAErBH,KAAKsB,iBAEVtB,KAAKuB,uB,CAILA,uBACJ,GAAIvB,KAAKmB,OAASnB,KAAKiB,UAAYjB,KAAKkB,SAAU,CAC9C,M,CAGJ,OACIF,EAAA,OAAKQ,MAAM,qBACPR,EAAA,QAAMQ,MAAM,uBAAuBC,KAAK,gBACnCzB,KAAK0B,OAEVV,EAAA,QAAMQ,MAAM,OAAOxB,KAAKC,e,CAc5B0B,eACJ,IAAK3B,KAAKmB,MAAO,CACb,MAAO,E,CAGX,MAAO,C,+BAEIxB,GAAiB,CACpBE,KAAMG,KAAKmB,MAAMS,SACjBhC,GAAII,KAAKmB,MAAMvB,GACfiC,KAAM,CACFC,KAAMC,EAAY/B,KAAKmB,OACvBa,MAAOC,EAAsBjC,KAAKmB,OAClCe,MAAOC,EAAanC,KAAKmB,OACzBiB,gBAAiBC,EAAuBrC,KAAKmB,QAEjDmB,KAAMtC,KAAKmB,MAAMmB,O,CAKrBhB,gBACJ,MAAMiB,EACFvB,EAAA,kBACIC,SAAUjB,KAAKiB,SACfC,SAAUlB,KAAKkB,SACfsB,QAASxC,KAAKwC,QACdd,MAAO1B,KAAK0B,MACZe,YAAY,kBACZC,SAAU1C,KAAK0C,SACfC,SAAU3C,KAAKS,oBACfmC,WAAY5C,KAAKa,mBACjBgC,SAAU7C,KAAK6C,SACfC,KAAK,QACL3B,MAAOnB,KAAK2B,iBAIpB,GAAI3B,KAAKmB,MAAO,CACZ,OAAOoB,C,CAGX,OACIvB,EAAA,oBACII,OAAQpB,KAAKoB,OACbH,SAAUjB,KAAKiB,UAAYjB,KAAKkB,UAE/BqB,E,CAkBLlC,eAAeD,GACnBA,EAAMM,kBACNN,EAAM2C,gB,CAGF7C,eAAe8C,GACnB,OAAOC,EAAUC,IAAI,QAAQF,IAAOhD,KAAK0C,S"}

package/dist/lime-elements/p-b852d3f5.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as n}from"./p-443111b3.js";const i="@charset \"UTF-8\";\n/**\n * Note! This file is exported to `dist/scss/` in the published\n * node module, for consumer projects to import.\n * That means this file cannot import from any file that isn't\n * also exported, keeping the same relative path.\n *\n * Or, just don't import anything, that works too.\n */\n/**\n* This can be used on a trigger element that opens a dropdown menu or a popover.\n*/\n/**\n * This mixin will mask out the content that is close to\n * the edges of a scrollable area.\n * - If the scrollable content has `overflow-y`, use `vertically`\n * as an argument for `$direction`.\n - If the scrollable content has `overflow-x`, use `horizontally`\n * as an argument for `$direction`.\n *\n * For the visual effect to work smoothly, we need to make sure that\n * the size of the fade-out edge effect is the same as the\n * internal paddings of the scrollable area. Otherwise, content of a\n * scrollable area that does not have a padding will fade out before\n * any scrolling has been done.\n * This is why this mixin already adds paddings, which automatically\n * default to the size of the fade-out effect.\n * This size defaults to `1rem`, but to override the size use\n * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`\n * when `vertically` argument is set, and use\n * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`\n * when `horizontally` argument is set.\n * Of course you can also programmatically increase and decrease the\n * size of these variables for each edge, based on the amount of\n * scrolling that has been done by the user. In this case, make sure\n * to add a custom padding where the mixin is used, to override\n * the paddings that are automatically added by the mixin in the\n * compiled CSS code.\n */\n/**\n* This mixin will add an animated underline to the bottom of an `a` elements.\n* Note that you may need to add `all: unset;` –depending on your use case–\n* before using this mixin.\n*/\n/**\n* This mixin creates a cross-browser font stack.\n* - `sans-serif` can be used for the UI of the components.\n* - `monospace` can be used for code.\n*\n* ⚠️ If we change the font stacks, we need to update\n* 1. the consumer documentation in `README.md`, and\n* 2. the CSS variables of `--kompendium-example-font-family`\n* in the `<style>` tag of `index.html`.\n*/\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n  --badge-text-color: var(\n      --info-tile-badge-text-color,\n      rgb(var(--color-white))\n  );\n  --badge-background-color: var(\n      --info-tile-badge-background-color,\n      rgb(var(--color-red-default))\n  );\n  --circular-progress-text-color: var(\n      --info-tile-progress-text-color,\n      var(--info-tile-text-color)\n  );\n  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n  --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n  --circular-progress-background-color: var(\n      --info-tile-progress-background-color,\n      var(--info-tile-background-color)\n  );\n  --label-min-size: 0.75rem;\n  --label-preferred-size: 6cqw;\n  --label-max-size: 1rem;\n  --value-min-size: 1rem;\n  --value-preferred-size: 20cqw;\n  --value-max-size: 4rem;\n  --suffix-prefix-min-size: 0.75rem;\n  --suffix-prefix-preferred-size: 8cqw;\n  --suffix-prefix-max-size: 1.5rem;\n  --icon-min-size: 2rem;\n  --icon-preferred-size: 60cqh;\n  --icon-max-size: calc(100cqw - 0.5rem);\n  isolation: isolate;\n  container-type: size;\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n:host(limel-info-tile) * {\n  box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\na {\n  all: unset;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  height: 100%;\n  width: 100%;\n  flex-grow: 1;\n  padding: 0.25rem 1rem 0.5rem 1rem;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\na.is-clickable {\n  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;\n  cursor: pointer;\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-normal);\n}\na.is-clickable:hover {\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-hovered);\n}\na.is-clickable:active {\n  box-shadow: var(--button-shadow-pressed);\n  transform: translate3d(0, 0.08rem, 0);\n}\na.is-clickable:focus {\n  outline: none;\n}\na.is-clickable:focus-visible {\n  outline: none;\n  box-shadow: var(--shadow-depth-8-focused);\n}\n\n.icon {\n  z-index: 1;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.75rem;\n  padding: 0.25rem;\n  aspect-ratio: 1/1;\n  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n  border-radius: 0;\n  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n  .icon {\n    width: max(10%, 3rem);\n  }\n}\n.has-circular-progress .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\n.progress {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  --circular-progress-size: min(\n      var(--icon-preferred-size),\n      var(--icon-max-size)\n  );\n}\n@supports not (container-type: size) {\n  .progress {\n    --circular-progress-size: initial;\n  }\n}\n\n.label {\n  z-index: 1;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: 0.875rem;\n  }\n}\n\nlimel-badge {\n  position: absolute;\n  top: -0.25rem;\n  right: -0.25rem;\n}\n\nlimel-linear-progress {\n  --lime-primary-color: var(--info-tile-text-color);\n  position: absolute;\n  inset: auto 0 0 0;\n}\n\n.value-group {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n  display: flex;\n}\n\n.prefix,\n.suffix {\n  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n  opacity: 0.7;\n}\n@supports not (container-type: size) {\n  .prefix,\n  .suffix {\n    font-size: 0.75rem;\n  }\n}\n\n.prefix {\n  align-self: flex-start;\n  line-height: normal;\n  transform: translateY(40%);\n}\n\n.value {\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n  transform-origin: left;\n  transform: translate3d(0, 0, 0) scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  line-height: normal;\n  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n  .value {\n    font-size: 1.5rem;\n  }\n}\n:host(limel-info-tile[loading]) .value {\n  opacity: 0.3;\n  transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n  transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n  .progress {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  .has-circular-progress .icon {\n    right: 0.25rem;\n    bottom: 0.25rem;\n  }\n}\n@container (width < 40.5rem) {\n  .value {\n    --value-preferred-size: 13cqw;\n  }\n  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n    --value-preferred-size: 20cqw;\n  }\n  .value.ch-5 {\n    --value-preferred-size: 18cqw;\n  }\n  .value.ch-6 {\n    --value-preferred-size: 17cqw;\n  }\n  .value.ch-7 {\n    --value-preferred-size: 16cqw;\n  }\n  .value.ch-8 {\n    --value-preferred-size: 15cqw;\n  }\n  .value.ch-9 {\n    --value-preferred-size: 14cqw;\n  }\n}\n@container (height > 8rem) {\n  a {\n    padding-top: 0.75rem;\n    padding-bottom: 1rem;\n  }\n}\n@container (height < 8rem) and (width > 8rem) {\n  .value {\n    --value-preferred-size: 32cqh !important;\n  }\n  .suffix,\n  .prefix {\n    --suffix-prefix-preferred-size: 16cqh !important;\n  }\n}\n@container (height > 18.75rem) {\n  .progress,\n  .icon {\n    position: relative;\n    top: unset;\n    right: unset;\n  }\n  a {\n    align-items: center;\n    justify-content: center;\n  }\n  .label {\n    text-align: center;\n  }\n  .has-circular-progress .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}";const o=class{constructor(i){e(this,i);this.renderPrefix=()=>{if(this.prefix){return n("span",{class:"prefix"},this.prefix)}};this.renderValue=()=>{var e;const i=((e=this.value)!==null&&e!==void 0?e:"").toString().length;if(!this.value&&this.loading){return n("span",{class:"value"},"···")}if(this.value){return n("span",{class:{value:true,[`ch-${i}`]:true}},this.value)}};this.renderSuffix=()=>{if(this.suffix){return n("span",{class:"suffix"},this.suffix)}};this.renderIcon=()=>{if(this.icon){return n("limel-icon",{class:"icon",name:this.icon})}};this.renderProgress=()=>{var e,i;if(((e=this.progress)===null||e===void 0?void 0:e.value)||((i=this.progress)===null||i===void 0?void 0:i.value)===0){return n("limel-circular-progress",{class:"progress",prefix:this.progress.prefix,value:this.progress.value,suffix:this.progress.suffix,maxValue:this.progress.maxValue,displayPercentageColors:this.progress.displayPercentageColors})}};this.renderLabel=()=>{if(this.label){return n("span",{class:"label"},this.label)}};this.renderNotification=()=>{if(this.badge){return n("limel-badge",{label:this.badge})}};this.renderSpinner=()=>{if(this.loading){return n("limel-linear-progress",{indeterminate:true})}};this.value=undefined;this.icon=undefined;this.label=null;this.prefix=undefined;this.suffix=undefined;this.disabled=false;this.badge=undefined;this.loading=false;this.link=undefined;this.progress=undefined}render(){var e,i,o,r,t,s,a,l,c,d;const h=this.checkProps(this===null||this===void 0?void 0:this.prefix)+this.value+" "+this.checkProps(this===null||this===void 0?void 0:this.suffix)+this.checkProps(this===null||this===void 0?void 0:this.label)+". "+this.checkProps((e=this===null||this===void 0?void 0:this.progress)===null||e===void 0?void 0:e.prefix)+this.checkProps((i=this===null||this===void 0?void 0:this.progress)===null||i===void 0?void 0:i.value)+this.checkProps((o=this===null||this===void 0?void 0:this.progress)===null||o===void 0?void 0:o.suffix)+this.checkProps((r=this===null||this===void 0?void 0:this.link)===null||r===void 0?void 0:r.title);const f=!this.disabled?(t=this.link)===null||t===void 0?void 0:t.href:"#";return[n("a",{title:(s=this.link)===null||s===void 0?void 0:s.title,href:f,target:(a=this.link)===null||a===void 0?void 0:a.target,tabindex:"0","aria-label":h,"aria-disabled":this.disabled,"aria-busy":this.loading?"true":"false","aria-live":"polite",class:{"is-clickable":!!((l=this.link)===null||l===void 0?void 0:l.href)&&!this.disabled,"has-circular-progress":!!((c=this.progress)===null||c===void 0?void 0:c.value)||((d=this.progress)===null||d===void 0?void 0:d.value)===0}},this.renderIcon(),this.renderProgress(),n("div",{class:"value-group"},this.renderPrefix(),n("div",{class:"value-and-suffix"},this.renderValue(),this.renderSuffix()),this.renderSpinner()),this.renderLabel()),this.renderNotification()]}checkProps(e){return!e?"":e+" "}};o.style=i;export{o as limel_info_tile};
-//# sourceMappingURL=p-b852d3f5.entry.js.map