@limetech/lime-elements 38.18.0 → 38.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-chip_2.cjs.entry.js +2 -1
- package/dist/cjs/limel-chip_2.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-file-viewer.cjs.entry.js +7 -7
- package/dist/cjs/limel-file-viewer.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-file.cjs.entry.js +2 -2
- package/dist/cjs/limel-file.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-table.cjs.entry.js +1 -1
- package/dist/cjs/limel-table.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/chip/chip.css +7 -2
- package/dist/collection/components/chip/chip.js +20 -0
- package/dist/collection/components/chip/chip.js.map +1 -1
- package/dist/collection/components/file/file.js +2 -2
- package/dist/collection/components/file/file.js.map +1 -1
- package/dist/collection/components/file-viewer/file-viewer.js +7 -7
- package/dist/collection/components/file-viewer/file-viewer.js.map +1 -1
- package/dist/collection/components/icon/icon.js +0 -18
- package/dist/collection/components/icon/icon.js.map +1 -1
- package/dist/collection/components/table/table.css +5 -0
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-chip_2.entry.js +2 -1
- package/dist/esm/limel-chip_2.entry.js.map +1 -1
- package/dist/esm/limel-file-viewer.entry.js +7 -7
- package/dist/esm/limel-file-viewer.entry.js.map +1 -1
- package/dist/esm/limel-file.entry.js +2 -2
- package/dist/esm/limel-file.entry.js.map +1 -1
- package/dist/esm/limel-icon.entry.js.map +1 -1
- package/dist/esm/limel-table.entry.js +1 -1
- package/dist/esm/limel-table.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js.map +1 -1
- package/dist/lime-elements/p-19688e05.entry.js.map +1 -1
- package/dist/lime-elements/{p-b0d3099c.entry.js → p-2f7427d5.entry.js} +2 -2
- package/dist/lime-elements/{p-b0d3099c.entry.js.map → p-2f7427d5.entry.js.map} +1 -1
- package/dist/lime-elements/p-3b92f8ef.entry.js +2 -0
- package/dist/lime-elements/{p-d2272b5f.entry.js.map → p-3b92f8ef.entry.js.map} +1 -1
- package/dist/lime-elements/{p-e2cf9bc3.entry.js → p-58c6ce80.entry.js} +2 -2
- package/dist/lime-elements/{p-e2cf9bc3.entry.js.map → p-58c6ce80.entry.js.map} +1 -1
- package/dist/lime-elements/p-5d750697.entry.js +2 -0
- package/dist/lime-elements/p-5d750697.entry.js.map +1 -0
- package/dist/types/components/chip/chip.d.ts +5 -0
- package/dist/types/components/icon/icon.d.ts +0 -18
- package/dist/types/components.d.ts +12 -56
- package/package.json +1 -1
- package/dist/lime-elements/p-d2272b5f.entry.js +0 -2
- package/dist/lime-elements/p-e50680a4.entry.js +0 -2
- package/dist/lime-elements/p-e50680a4.entry.js.map +0 -1
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,c as t,h as e}from"./p-288f0842.js";import{t as s}from"./p-4daf6318.js";import{g as r,a as n,b as a,c as h}from"./p-97ded6f5.js";import"./p-d251f404.js";const l='@charset "UTF-8";: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;display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}';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("file.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(i,this.language)}};d.style=l;export{d as limel_file};
|
|
2
|
+
//# sourceMappingURL=p-3b92f8ef.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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":["@use '../../style/mixins';\n\n/**\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 @include mixins.truncate-text-on-line(2);\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,kpBCYhB,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"}
|
|
1
|
+
{"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":["@use '../../style/mixins';\n\n/**\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 @include mixins.truncate-text-on-line(2);\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('file.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(key, this.language);\n }\n}\n"],"mappings":"uKAAA,MAAMA,EAAU,kpBCYhB,MAAMC,EAA0B,CAC5BC,GAAI,KACJC,KAAM,KACNC,UAAW,M,MA0CFC,EAAI,M,2FA2FLC,KAAAC,YAAc,IACXD,KAAKE,eAAe,2BAGvBF,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,IAAIF,EAAKhD,KAAK0C,S"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as e,h as o,g as i}from"./p-288f0842.js";import{t as r}from"./p-4daf6318.js";function s(t,e){const o=t||e;if(!o){return"unknown"}const i=o.split(".").pop().toLowerCase();const r={pdf:"pdf",jpg:"image",jpeg:"image",heic:"image",bmp:"image",png:"image",gif:"image",svg:"image",svgz:"image",ep:"image",eps:"image",avi:"video",flv:"video",h264:"video",mov:"video",mp4:"video",mwv:"video",mkv:"video",mp3:"audio",wav:"audio",wma:"audio",ogg:"audio",txt:"text",json:"text",html:"text",xml:"text",doc:"office",docx:"office",odt:"office",dot:"office",dotx:"office",docm:"office",dotm:"office",pot:"office",ppt:"office",pptx:"office",odp:"office",potx:"office",potm:"office",pps:"office",ppsx:"office",ppsm:"office",pptm:"office",ppam:"office",pages:"office",xls:"office",xlsx:"office",xlsm:"office",xlsb:"office",ods:"office",csv:"office",numbers:"office"};return r[i]||"unknown"}class n{constructor(t){this.requestFullscreen=()=>{if(this.enter){this.enter()}};this.exitFullscreen=()=>{if(this.exit){this.exit.bind(window.document)()}};this.toggle=()=>{const t=window.document;const e=t.fullscreenElement||t.mozFullScreenElement||t.webkitFullscreenElement||t.msFullscreenElement;if(e){this.exitFullscreen()}else{this.requestFullscreen()}};this.enter=t.requestFullscreen||t.msRequestFullscreen||t.mozRequestFullScreen||t.webkitRequestFullscreen;this.enter=this.enter.bind(t);const e=window.document;this.exit=e.exitFullscreen||e.msExitFullscreen||e.mozCancelFullScreen||e.webkitExitFullscreen}isSupported(){return!!this.requestFullscreen}}const a='@charset "UTF-8";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}:host{isolation:isolate;position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100%}*{box-sizing:border-box}img,video,audio,object,iframe{max-height:100%;max-width:100%;box-sizing:border-box}iframe{border:none;width:100%;height:100%;min-height:20rem}img{min-width:7rem;object-fit:contain}video{width:100%;height:auto}audio{width:100%}object{width:100%;height:100%}object[type="application/pdf"]{min-height:20rem}object[type="text/plain"]{border-radius:0.25rem;padding-right:2rem;overflow-y:auto}:host(:fullscreen){background-color:rgb(var(--color-gray-darker))}:host(:fullscreen) object[type="text/plain"]{max-width:50rem;max-height:calc(100% - 2rem)}:host(:-webkit-full-screen){background-color:rgb(var(--color-gray-darker))}:host(:-webkit-full-screen) object[type="text/plain"]{max-width:50rem;max-height:calc(100% - 2rem)}.buttons{position:absolute;z-index:1;top:0.25rem;right:0.25rem;display:flex;flex-direction:column;gap:0.25rem}@media (pointer: coarse){.buttons{gap:0.5rem}}.no-support{display:flex;flex-direction:column;align-items:center;border:1px dashed rgb(var(--contrast-600));border-radius:0.5rem;padding:1.25rem}.no-support .icon--warning{color:rgb(var(--color-orange-default))}[class^=button--]{all:unset;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);display:flex;align-items:center;justify-content:center;border-radius:50%;width:2rem;height:2rem;background-color:rgba(var(--contrast-100), 0.8);backdrop-filter:blur(0.25rem);-webkit-backdrop-filter:blur(0.25rem)}[class^=button--]:hover,[class^=button--]:focus,[class^=button--]:focus-visible{will-change:color, background-color, box-shadow, transform}[class^=button--]:hover{transform:translate3d(0, -0.04rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}[class^=button--]:active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}[class^=button--]:hover,[class^=button--]:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}[class^=button--]:focus{outline:none}[class^=button--]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}[class^=button--] limel-icon{transition:color 0.2s ease;width:1.25rem;color:rgb(var(--contrast-1200))}[class^=button--]:hover limel-icon{color:rgb(var(--contrast-1400))}.action-menu-for-pdf-files,.action-menu-for-office-files{position:absolute;right:0.75rem}.action-menu-for-pdf-files{bottom:0.75rem}.action-menu-for-office-files{top:0.75rem}';const l=class{constructor(i){t(this,i);this.action=e(this,"action",7);this.renderPdf=()=>[o("div",{class:"action-menu-for-pdf-files"},this.renderActionMenu()),o("iframe",{src:this.fileUrl,loading:"lazy"})];this.renderImage=()=>[this.renderButtons(),o("img",{src:this.fileUrl,alt:this.alt,loading:"lazy"})];this.renderVideo=()=>o("video",{controls:true},o("source",{src:this.fileUrl}));this.renderAudio=()=>o("audio",{controls:true},o("source",{src:this.fileUrl}));this.renderText=()=>[this.renderButtons(),o("object",{data:this.fileUrl,type:"text/plain"},`Text content from: ${this.filename||this.url}`,o("a",{href:this.fileUrl,target:"_blank",rel:"noopener noreferrer"},"Open text file in new tab"))];this.renderOffice=()=>[o("div",{class:"action-menu-for-office-files"},this.renderActionMenu()),o("iframe",{src:this.getOfficeViewerUrl()+this.fileUrl+"&embedded=true",loading:"lazy"})];this.isOfficeFileAccessibleViaURL=()=>this.fileType==="office"&&!(this.fileUrl.startsWith("http://")||this.fileUrl.startsWith("https://"));this.getOfficeViewerUrl=()=>{const t={"microsoft-office":"https://view.officeapps.live.com/op/embed.aspx?src=","google-drive":"https://docs.google.com/gview?url="};return t[this.officeViewer]};this.renderNoFileSupportMessage=()=>o("div",{class:"no-support",role:"alert"},o("limel-icon",{class:"icon--warning",name:"brake_warning",size:"large",role:"presentation"}),o("p",null,this.getTranslation("message.unsupported-filetype")),this.renderDownloadButton());this.renderButtons=()=>o("div",{class:"buttons"},this.renderActionMenu(),this.renderToggleFullscreenButton(),this.renderDownloadButton(),this.renderOpenInNewTabButton());this.renderToggleFullscreenButton=()=>{if(!this.allowFullscreen||!this.fullscreen.isSupported()){return}const t=this.isFullscreen?"multiply":"fit_to_width";const e=this.isFullscreen?this.getTranslation("exit-fullscreen"):this.getTranslation("open-in-fullscreen");return[o("button",{class:"button--toggle-fullscreen",id:"tooltip-toggle-fullscreen",role:"button",onClick:this.handleToggleFullscreen},o("limel-icon",{name:t}),o("limel-tooltip",{label:e,elementId:"tooltip-toggle-fullscreen",openDirection:"left"}))]};this.renderDownloadButton=()=>{if(!this.allowDownload||this.isFullscreen){return}return o("a",{class:"button--download",id:"tooltip-download",role:"button",download:this.filename?this.filename:"",href:this.fileUrl,target:"_blank"},o("limel-icon",{name:"download_2"}),o("limel-tooltip",{label:this.getTranslation("download"),elementId:"tooltip-download",openDirection:"left"}))};this.renderOpenInNewTabButton=()=>{if(!this.allowOpenInNewTab||this.isFullscreen){return}return o("a",{class:"button--new-tab",id:"tooltip-new-tab",role:"button",href:this.fileUrl,target:"_blank",rel:"noopener noreferrer"},o("limel-icon",{name:"external_link"}),o("limel-tooltip",{label:this.getTranslation("open-in-new-tab"),elementId:"tooltip-new-tab",openDirection:"left"}))};this.renderActionMenu=()=>{if(!this.actions||this.isFullscreen){return}return o("limel-menu",{class:"action-menu",items:this.actions,onSelect:this.emitOnAction,"open-direction":"left"},o("button",{class:"button--action",id:"tooltip-more",role:"button",slot:"trigger"},o("limel-icon",{name:"menu_2"}),o("limel-tooltip",{label:this.getTranslation("more-actions"),elementId:"tooltip-more",openDirection:"left"})))};this.createURL=async t=>{if(["pdf"].includes(t)){const t=await fetch(this.url);const e=await t.blob();this.fileUrl=URL.createObjectURL(e)}else{this.fileUrl=this.url}this.loading=false};this.handleToggleFullscreen=()=>{if(this.fullscreen.isSupported()){this.fullscreen.toggle();this.isFullscreen=!this.isFullscreen}};this.emitOnAction=t=>{t.stopPropagation();this.action.emit(t.detail)};this.url=undefined;this.filename=undefined;this.alt=undefined;this.allowFullscreen=false;this.allowOpenInNewTab=false;this.allowDownload=false;this.language="en";this.officeViewer="microsoft-office";this.actions=undefined;this.isFullscreen=false;this.fileType=undefined;this.loading=true;this.fileUrl="";this.fullscreen=new n(this.HostElement)}async componentWillLoad(){this.fileType=s(this.filename,this.url);await this.createURL(this.fileType)}render(){if(!this.isOfficeFileAccessibleViaURL){return this.renderNoFileSupportMessage()}if(this.loading){return o("limel-spinner",{size:"x-small",limeBranded:false})}return this.renderFileViewer()}async watchUrl(t,e){if(t===e){return}this.loading=true;this.fileType=s(this.filename,this.fileUrl);await this.createURL(this.fileType)}renderFileViewer(){const t={pdf:this.renderPdf,image:this.renderImage,video:this.renderVideo,audio:this.renderAudio,text:this.renderText,office:this.renderOffice};const e=t[this.fileType]||this.renderNoFileSupportMessage;return e()}getTranslation(t){return r.get(`file-viewer.${t}`,this.language)}get HostElement(){return i(this)}static get watchers(){return{url:["watchUrl"]}}};l.style=a;export{l as limel_file_viewer};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as t,h as i,g as o}from"./p-288f0842.js";import{t as r}from"./p-4daf6318.js";function s(e,t){const i=e||t;if(!i){return"unknown"}const o=i.split(".").pop().toLowerCase();const r={pdf:"pdf",jpg:"image",jpeg:"image",heic:"image",bmp:"image",png:"image",gif:"image",svg:"image",svgz:"image",ep:"image",eps:"image",avi:"video",flv:"video",h264:"video",mov:"video",mp4:"video",mwv:"video",mkv:"video",mp3:"audio",wav:"audio",wma:"audio",ogg:"audio",txt:"text",json:"text",html:"text",xml:"text",doc:"office",docx:"office",odt:"office",dot:"office",dotx:"office",docm:"office",dotm:"office",pot:"office",ppt:"office",pptx:"office",odp:"office",potx:"office",potm:"office",pps:"office",ppsx:"office",ppsm:"office",pptm:"office",ppam:"office",pages:"office",xls:"office",xlsx:"office",xlsm:"office",xlsb:"office",ods:"office",csv:"office",numbers:"office"};return r[o]||"unknown"}class n{constructor(e){this.requestFullscreen=()=>{if(this.enter){this.enter()}};this.exitFullscreen=()=>{if(this.exit){this.exit.bind(window.document)()}};this.toggle=()=>{const e=window.document;const t=e.fullscreenElement||e.mozFullScreenElement||e.webkitFullscreenElement||e.msFullscreenElement;if(t){this.exitFullscreen()}else{this.requestFullscreen()}};this.enter=e.requestFullscreen||e.msRequestFullscreen||e.mozRequestFullScreen||e.webkitRequestFullscreen;this.enter=this.enter.bind(e);const t=window.document;this.exit=t.exitFullscreen||t.msExitFullscreen||t.mozCancelFullScreen||t.webkitExitFullscreen}isSupported(){return!!this.requestFullscreen}}const a='@charset "UTF-8";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}:host{isolation:isolate;position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100%}*{box-sizing:border-box}img,video,audio,object,iframe{max-height:100%;max-width:100%;box-sizing:border-box}iframe{border:none;width:100%;height:100%;min-height:20rem}img{min-width:7rem;object-fit:contain}video{width:100%;height:auto}audio{width:100%}object{width:100%;height:100%}object[type="application/pdf"]{min-height:20rem}object[type="text/plain"]{border-radius:0.25rem;padding-right:2rem;overflow-y:auto}:host(:fullscreen){background-color:rgb(var(--color-gray-darker))}:host(:fullscreen) object[type="text/plain"]{max-width:50rem;max-height:calc(100% - 2rem)}:host(:-webkit-full-screen){background-color:rgb(var(--color-gray-darker))}:host(:-webkit-full-screen) object[type="text/plain"]{max-width:50rem;max-height:calc(100% - 2rem)}.buttons{position:absolute;z-index:1;top:0.25rem;right:0.25rem;display:flex;flex-direction:column;gap:0.25rem}@media (pointer: coarse){.buttons{gap:0.5rem}}.no-support{display:flex;flex-direction:column;align-items:center;border:1px dashed rgb(var(--contrast-600));border-radius:0.5rem;padding:1.25rem}.no-support .icon--warning{color:rgb(var(--color-orange-default))}[class^=button--]{all:unset;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);display:flex;align-items:center;justify-content:center;border-radius:50%;width:2rem;height:2rem;background-color:rgba(var(--contrast-100), 0.8);backdrop-filter:blur(0.25rem);-webkit-backdrop-filter:blur(0.25rem)}[class^=button--]:hover,[class^=button--]:focus,[class^=button--]:focus-visible{will-change:color, background-color, box-shadow, transform}[class^=button--]:hover{transform:translate3d(0, -0.04rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}[class^=button--]:active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}[class^=button--]:hover,[class^=button--]:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}[class^=button--]:focus{outline:none}[class^=button--]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}[class^=button--] limel-icon{transition:color 0.2s ease;width:1.25rem;color:rgb(var(--contrast-1200))}[class^=button--]:hover limel-icon{color:rgb(var(--contrast-1400))}.action-menu-for-pdf-files,.action-menu-for-office-files{position:absolute;right:0.75rem}.action-menu-for-pdf-files{bottom:0.75rem}.action-menu-for-office-files{top:0.75rem}';const l=class{constructor(o){e(this,o);this.action=t(this,"action",7);this.renderPdf=()=>[i("div",{class:"action-menu-for-pdf-files"},this.renderActionMenu()),i("iframe",{src:this.fileUrl,loading:"lazy"})];this.renderImage=()=>[this.renderButtons(),i("img",{src:this.fileUrl,alt:this.alt,loading:"lazy"})];this.renderVideo=()=>i("video",{controls:true},i("source",{src:this.fileUrl}));this.renderAudio=()=>i("audio",{controls:true},i("source",{src:this.fileUrl}));this.renderText=()=>[this.renderButtons(),i("object",{data:this.fileUrl,type:"text/plain"},`Text content from: ${this.filename||this.url}`,i("a",{href:this.fileUrl,target:"_blank",rel:"noopener noreferrer"},"Open text file in new tab"))];this.renderOffice=()=>[i("div",{class:"action-menu-for-office-files"},this.renderActionMenu()),i("iframe",{src:this.getOfficeViewerUrl()+this.fileUrl+"&embedded=true",loading:"lazy"})];this.isOfficeFileAccessibleViaURL=()=>this.fileType==="office"&&!(this.fileUrl.startsWith("http://")||this.fileUrl.startsWith("https://"));this.getOfficeViewerUrl=()=>{const e={"microsoft-office":"https://view.officeapps.live.com/op/embed.aspx?src=","google-drive":"https://docs.google.com/gview?url="};return e[this.officeViewer]};this.renderNoFileSupportMessage=()=>i("div",{class:"no-support",role:"alert"},i("limel-icon",{class:"icon--warning",name:"brake_warning",size:"large",role:"presentation"}),i("p",null,this.getTranslation("file-viewer.message.unsupported-filetype")),this.renderDownloadButton());this.renderButtons=()=>i("div",{class:"buttons"},this.renderActionMenu(),this.renderToggleFullscreenButton(),this.renderDownloadButton(),this.renderOpenInNewTabButton());this.renderToggleFullscreenButton=()=>{if(!this.allowFullscreen||!this.fullscreen.isSupported()){return}const e=this.isFullscreen?"multiply":"fit_to_width";const t=this.isFullscreen?this.getTranslation("file-viewer.exit-fullscreen"):this.getTranslation("file-viewer.open-in-fullscreen");return[i("button",{class:"button--toggle-fullscreen",id:"tooltip-toggle-fullscreen",role:"button",onClick:this.handleToggleFullscreen},i("limel-icon",{name:e}),i("limel-tooltip",{label:t,elementId:"tooltip-toggle-fullscreen",openDirection:"left"}))]};this.renderDownloadButton=()=>{if(!this.allowDownload||this.isFullscreen){return}return i("a",{class:"button--download",id:"tooltip-download",role:"button",download:this.filename?this.filename:"",href:this.fileUrl,target:"_blank"},i("limel-icon",{name:"download_2"}),i("limel-tooltip",{label:this.getTranslation("file-viewer.download"),elementId:"tooltip-download",openDirection:"left"}))};this.renderOpenInNewTabButton=()=>{if(!this.allowOpenInNewTab||this.isFullscreen){return}return i("a",{class:"button--new-tab",id:"tooltip-new-tab",role:"button",href:this.fileUrl,target:"_blank",rel:"noopener noreferrer"},i("limel-icon",{name:"external_link"}),i("limel-tooltip",{label:this.getTranslation("file-viewer.open-in-new-tab"),elementId:"tooltip-new-tab",openDirection:"left"}))};this.renderActionMenu=()=>{if(!this.actions||this.isFullscreen){return}return i("limel-menu",{class:"action-menu",items:this.actions,onSelect:this.emitOnAction,"open-direction":"left"},i("button",{class:"button--action",id:"tooltip-more",role:"button",slot:"trigger"},i("limel-icon",{name:"menu_2"}),i("limel-tooltip",{label:this.getTranslation("file-viewer.more-actions"),elementId:"tooltip-more",openDirection:"left"})))};this.createURL=async e=>{if(["pdf"].includes(e)){const e=await fetch(this.url);const t=await e.blob();this.fileUrl=URL.createObjectURL(t)}else{this.fileUrl=this.url}this.loading=false};this.handleToggleFullscreen=()=>{if(this.fullscreen.isSupported()){this.fullscreen.toggle();this.isFullscreen=!this.isFullscreen}};this.emitOnAction=e=>{e.stopPropagation();this.action.emit(e.detail)};this.url=undefined;this.filename=undefined;this.alt=undefined;this.allowFullscreen=false;this.allowOpenInNewTab=false;this.allowDownload=false;this.language="en";this.officeViewer="microsoft-office";this.actions=undefined;this.isFullscreen=false;this.fileType=undefined;this.loading=true;this.fileUrl="";this.fullscreen=new n(this.HostElement)}async componentWillLoad(){this.fileType=s(this.filename,this.url);await this.createURL(this.fileType)}render(){if(!this.isOfficeFileAccessibleViaURL){return this.renderNoFileSupportMessage()}if(this.loading){return i("limel-spinner",{size:"x-small",limeBranded:false})}return this.renderFileViewer()}async watchUrl(e,t){if(e===t){return}this.loading=true;this.fileType=s(this.filename,this.fileUrl);await this.createURL(this.fileType)}renderFileViewer(){const e={pdf:this.renderPdf,image:this.renderImage,video:this.renderVideo,audio:this.renderAudio,text:this.renderText,office:this.renderOffice};const t=e[this.fileType]||this.renderNoFileSupportMessage;return t()}getTranslation(e){return r.get(e,this.language)}get HostElement(){return o(this)}static get watchers(){return{url:["watchUrl"]}}};l.style=a;export{l as limel_file_viewer};
|
|
2
|
+
//# sourceMappingURL=p-58c6ce80.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["detectExtension","fileName","url","pathLike","extension","split","pop","toLowerCase","extensionsToTypes","pdf","jpg","jpeg","heic","bmp","png","gif","svg","svgz","ep","eps","avi","flv","h264","mov","mp4","mwv","mkv","mp3","wav","wma","ogg","txt","json","html","xml","doc","docx","odt","dot","dotx","docm","dotm","pot","ppt","pptx","odp","potx","potm","pps","ppsx","ppsm","pptm","ppam","pages","xls","xlsx","xlsm","xlsb","ods","csv","numbers","Fullscreen","constructor","element","this","requestFullscreen","enter","exitFullscreen","exit","bind","window","document","toggle","isFullscreen","fullscreenElement","mozFullScreenElement","webkitFullscreenElement","msFullscreenElement","msRequestFullscreen","mozRequestFullScreen","webkitRequestFullscreen","msExitFullscreen","mozCancelFullScreen","webkitExitFullscreen","isSupported","fileViewerCss","FileViewer","hostRef","renderPdf","h","class","renderActionMenu","src","fileUrl","loading","renderImage","renderButtons","alt","renderVideo","controls","renderAudio","renderText","data","type","filename","href","target","rel","renderOffice","getOfficeViewerUrl","isOfficeFileAccessibleViaURL","fileType","startsWith","officeViewers","officeViewer","renderNoFileSupportMessage","role","name","size","getTranslation","renderDownloadButton","renderToggleFullscreenButton","renderOpenInNewTabButton","allowFullscreen","fullscreen","icon","label","id","onClick","handleToggleFullscreen","elementId","openDirection","allowDownload","download","allowOpenInNewTab","actions","items","onSelect","emitOnAction","slot","createURL","async","includes","response","fetch","blob","URL","createObjectURL","event","stopPropagation","action","emit","detail","HostElement","render","limeBranded","renderFileViewer","newUrl","oldUrl","fileViewerFunctions","image","video","audio","text","office","fileViewerFunction","key","translate","get","language"],"sources":["./src/components/file-viewer/extension-mapping.tsx","./src/components/file-viewer/fullscreen.ts","./src/components/file-viewer/file-viewer.scss?tag=limel-file-viewer&encapsulation=shadow","./src/components/file-viewer/file-viewer.tsx"],"sourcesContent":["export function detectExtension(fileName, url): any {\n const pathLike = fileName || url;\n if (!pathLike) {\n return 'unknown';\n }\n\n const extension = pathLike.split('.').pop().toLowerCase();\n const extensionsToTypes = {\n pdf: 'pdf',\n jpg: 'image',\n jpeg: 'image',\n heic: 'image',\n bmp: 'image',\n png: 'image',\n gif: 'image',\n svg: 'image',\n svgz: 'image',\n ep: 'image',\n eps: 'image',\n avi: 'video',\n flv: 'video',\n h264: 'video',\n mov: 'video',\n mp4: 'video',\n mwv: 'video',\n mkv: 'video',\n mp3: 'audio',\n wav: 'audio',\n wma: 'audio',\n ogg: 'audio',\n txt: 'text',\n json: 'text',\n html: 'text',\n xml: 'text',\n // Word\n doc: 'office',\n docx: 'office',\n odt: 'office',\n dot: 'office',\n dotx: 'office',\n docm: 'office', // not supported\n dotm: 'office', // not yet tested\n // Presentation\n pot: 'office', // not tested\n ppt: 'office',\n pptx: 'office',\n odp: 'office',\n potx: 'office', // not supported\n potm: 'office', // not supported\n pps: 'office',\n ppsx: 'office',\n ppsm: 'office', // not supported\n pptm: 'office', // not supported\n ppam: 'office', // not tested\n pages: 'office', // not supported (Apple)\n // Spreadsheet\n xls: 'office',\n xlsx: 'office',\n xlsm: 'office',\n xlsb: 'office',\n ods: 'office',\n csv: 'office', // not supported\n numbers: 'office', // not supported (Apple)\n };\n\n return extensionsToTypes[extension] || 'unknown';\n}\n","export class Fullscreen {\n private enter: () => void;\n private exit: () => void;\n\n constructor(element: any) {\n this.enter =\n element.requestFullscreen ||\n element.msRequestFullscreen ||\n element.mozRequestFullScreen ||\n element.webkitRequestFullscreen;\n this.enter = this.enter.bind(element);\n const doc: any = window.document;\n this.exit =\n doc.exitFullscreen ||\n doc.msExitFullscreen ||\n doc.mozCancelFullScreen ||\n doc.webkitExitFullscreen;\n }\n\n public requestFullscreen = () => {\n if (this.enter) {\n this.enter();\n }\n };\n\n public exitFullscreen = () => {\n if (this.exit) {\n this.exit.bind(window.document)();\n }\n };\n\n public toggle = () => {\n const doc: any = window.document;\n const isFullscreen =\n doc.fullscreenElement ||\n doc.mozFullScreenElement ||\n doc.webkitFullscreenElement ||\n doc.msFullscreenElement;\n\n if (isFullscreen) {\n this.exitFullscreen();\n } else {\n this.requestFullscreen();\n }\n };\n\n public isSupported(): boolean {\n return !!this.requestFullscreen;\n }\n}\n","@use '../../style/internal/variables';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n$size-of-buttons: 2rem;\n\n:host {\n isolation: isolate;\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n* {\n box-sizing: border-box;\n}\n\nimg,\nvideo,\naudio,\nobject,\niframe {\n max-height: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\niframe {\n border: none;\n width: 100%;\n height: 100%;\n min-height: 20rem; // makes sure to get minimum comfortable space for viewing office files, and Microsoft Office viewers toolbars\n}\n\nimg {\n min-width: 7rem;\n object-fit: contain; // increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.\n}\n\nvideo {\n width: 100%;\n height: auto;\n}\n\naudio {\n width: 100%;\n}\n\nobject {\n width: 100%;\n height: 100%;\n}\n\nobject[type='application/pdf'] {\n min-height: 20rem;\n // makes sure to get browsers' native controls for the PDF\n}\n\nobject[type='text/plain'] {\n border-radius: 0.25rem;\n padding-right: $size-of-buttons;\n\n overflow-y: auto;\n}\n\n@mixin plain-text-in-fullscreen {\n background-color: rgb(var(--color-gray-darker));\n\n object[type='text/plain'] {\n max-width: 50rem;\n max-height: calc(100% - 2rem);\n }\n}\n\n:host(:fullscreen) {\n @include plain-text-in-fullscreen;\n}\n:host(:-webkit-full-screen) {\n // this is repetition of the previous block,\n // but needed for Safari to work.\n // Cannot write SCSS rules for `:host` using commas for some reason.\n // e.g.: `:host(:fullscreen), :host(:-webkit-full-screen)`.\n // So you have to repeat it sadly.\n @include plain-text-in-fullscreen;\n}\n\n@import './partial-styles/ui-controls.scss';\n","import {\n Component,\n Element,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport { ListItem } from '../list/list-item.types';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\nimport { LimelMenuCustomEvent } from '../../components';\n\n/**\n * This is a smart component that automatically detects\n * the most common file types such as image, audio, video, and text,\n * and properly displays them in the browser.\n * The component is also capable to render the most common office files.\n *\n * :::note\n * Image files will always be contained in their containers, which means\n * they automatically increase or decrease in size to fill their containing box\n * whilst preserving their aspect-ratio.\n *\n * Text and PDF files will also always respect the width and height of the\n * container in which the `limel-file-viewer` is loaded.\n * :::\n *\n * For some file types such as text and images, the component will display a\n * download button and a button to open the file in a new browser tab.\n * This will allow users to preview the file in a fullscreen mode with the\n * browser and take advantage of for example native zooming and panning\n * functionalities.\n *\n * @exampleComponent limel-example-file-viewer-basic\n * @exampleComponent limel-example-file-viewer-office\n * @exampleComponent limel-example-file-viewer-filename\n * @exampleComponent limel-example-file-viewer-inbuilt-actions\n * @exampleComponent limel-example-file-viewer-custom-actions\n * @exampleComponent limel-example-file-viewer-with-picker\n *\n * @beta\n */\n\n@Component({\n tag: 'limel-file-viewer',\n shadow: true,\n styleUrl: 'file-viewer.scss',\n})\nexport class FileViewer {\n /**\n * Link to the file\n */\n @Prop({ reflect: true })\n public url: string;\n\n /**\n * The name of the file that must also contains its extension.\n * This overrides the filename that the `url` ends with.\n * Useful when the `url` does not contain the filename.\n * When specified, the `filename` will be used as filename of\n * the downloaded file.\n */\n @Prop({ reflect: true })\n public filename?: string;\n\n /**\n * An optional alternative text, mainly for assistive technologies and screen readers.\n * It is used for only image files, as an `alt` attribute.\n * Should optimally hold a description of the image,\n * which is also displayed on the page if the image can't be loaded for some reason.\n */\n @Prop({ reflect: true })\n public alt?: string;\n\n /**\n * Displays a button that allows the user to view the file\n * in fullscreen mode.\n * Not displayed for office files!\n */\n @Prop({ reflect: true })\n public allowFullscreen?: boolean = false;\n\n /**\n * Displays a button that allows the user to open the file\n * in a new browser tab.\n * Not displayed for office files!\n */\n @Prop({ reflect: true })\n public allowOpenInNewTab?: boolean = false;\n\n /**\n * Displays a button that allows the user to download the file.\n * Note that due to the browser's security policies,\n * the file should be hosted on the same domain\n * for the download button to work properly.\n * Not displayed for office files!\n */\n @Prop({ reflect: true })\n public allowDownload?: boolean = false;\n\n /**\n * Defines the localization for translations.\n */\n @Prop()\n public language: Languages = 'en';\n\n /**\n * Defines the third-party viewer that should be used to render\n * the content of office files, such as word processing documents,\n * presentations, or spreadsheets.\n */\n @Prop({ reflect: true })\n public officeViewer: OfficeViewer = 'microsoft-office';\n\n /**\n * An array of custom actions that can be displayed\n * as an action menu on the file which is being displayed.\n */\n @Prop()\n public actions: ListItem[];\n\n /**\n * Emitted when a custom action is selected from the action menu.\n */\n @Event()\n public action: EventEmitter<ListItem>;\n\n @Element()\n public HostElement: HTMLLimelFileViewerElement;\n\n private fullscreen: Fullscreen;\n\n @State()\n private isFullscreen: boolean = false;\n\n @State()\n private fileType: FileType;\n\n /**\n * True while the file is being loaded.\n */\n @State()\n private loading: boolean = true;\n\n @State()\n private fileUrl: string = '';\n\n constructor() {\n this.fullscreen = new Fullscreen(this.HostElement);\n }\n\n public async componentWillLoad() {\n this.fileType = detectExtension(this.filename, this.url);\n await this.createURL(this.fileType);\n }\n\n public render() {\n if (!this.isOfficeFileAccessibleViaURL) {\n return this.renderNoFileSupportMessage();\n }\n\n if (this.loading) {\n return <limel-spinner size=\"x-small\" limeBranded={false} />;\n }\n\n return this.renderFileViewer();\n }\n\n @Watch('url')\n protected async watchUrl(newUrl: string, oldUrl: string) {\n if (newUrl === oldUrl) {\n return;\n }\n\n this.loading = true;\n this.fileType = detectExtension(this.filename, this.fileUrl);\n await this.createURL(this.fileType);\n }\n\n private renderFileViewer() {\n const fileViewerFunctions = {\n pdf: this.renderPdf,\n image: this.renderImage,\n video: this.renderVideo,\n audio: this.renderAudio,\n text: this.renderText,\n office: this.renderOffice,\n };\n const fileViewerFunction =\n fileViewerFunctions[this.fileType] ||\n this.renderNoFileSupportMessage;\n\n return fileViewerFunction();\n }\n\n private renderPdf = () => {\n return [\n <div class=\"action-menu-for-pdf-files\">\n {this.renderActionMenu()}\n </div>,\n <iframe src={this.fileUrl} loading=\"lazy\" />,\n ];\n };\n\n private renderImage = () => {\n return [\n this.renderButtons(),\n <img src={this.fileUrl} alt={this.alt} loading=\"lazy\" />,\n ];\n };\n\n private renderVideo = () => {\n return (\n <video controls>\n <source src={this.fileUrl} />\n </video>\n );\n };\n\n private renderAudio = () => {\n return (\n <audio controls>\n <source src={this.fileUrl} />\n </audio>\n );\n };\n\n private renderText = () => {\n return [\n this.renderButtons(),\n <object data={this.fileUrl} type=\"text/plain\">\n {`Text content from: ${this.filename || this.url}`}\n <a\n href={this.fileUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Open text file in new tab\n </a>\n </object>,\n ];\n };\n\n private renderOffice = () => {\n return [\n <div class=\"action-menu-for-office-files\">\n {this.renderActionMenu()}\n </div>,\n <iframe\n src={\n this.getOfficeViewerUrl() + this.fileUrl + '&embedded=true'\n }\n loading=\"lazy\"\n />,\n ];\n };\n\n private isOfficeFileAccessibleViaURL = () => {\n return (\n this.fileType === 'office' &&\n !(\n this.fileUrl.startsWith('http://') ||\n this.fileUrl.startsWith('https://')\n )\n );\n };\n\n private getOfficeViewerUrl = () => {\n const officeViewers = {\n 'microsoft-office':\n 'https://view.officeapps.live.com/op/embed.aspx?src=',\n 'google-drive': 'https://docs.google.com/gview?url=',\n };\n\n return officeViewers[this.officeViewer];\n };\n\n private renderNoFileSupportMessage = () => {\n return (\n <div class=\"no-support\" role=\"alert\">\n <limel-icon\n class=\"icon--warning\"\n name=\"brake_warning\"\n size=\"large\"\n role=\"presentation\"\n />\n <p>{this.getTranslation('message.unsupported-filetype')}</p>\n {this.renderDownloadButton()}\n </div>\n );\n };\n\n private renderButtons = () => {\n return (\n <div class=\"buttons\">\n {this.renderActionMenu()}\n {this.renderToggleFullscreenButton()}\n {this.renderDownloadButton()}\n {this.renderOpenInNewTabButton()}\n </div>\n );\n };\n\n private renderToggleFullscreenButton = () => {\n if (!this.allowFullscreen || !this.fullscreen.isSupported()) {\n return;\n }\n\n const icon = this.isFullscreen ? 'multiply' : 'fit_to_width';\n // eslint-disable-next-line multiline-ternary\n const label = this.isFullscreen\n ? // eslint-disable-next-line multiline-ternary\n this.getTranslation('exit-fullscreen')\n : this.getTranslation('open-in-fullscreen');\n\n return [\n <button\n class=\"button--toggle-fullscreen\"\n id=\"tooltip-toggle-fullscreen\"\n role=\"button\"\n onClick={this.handleToggleFullscreen}\n >\n <limel-icon name={icon} />\n <limel-tooltip\n label={label}\n elementId=\"tooltip-toggle-fullscreen\"\n openDirection=\"left\"\n />\n </button>,\n ];\n };\n\n private renderDownloadButton = () => {\n if (!this.allowDownload || this.isFullscreen) {\n return;\n }\n\n return (\n <a\n class=\"button--download\"\n id=\"tooltip-download\"\n role=\"button\"\n download={this.filename ? this.filename : ''}\n href={this.fileUrl}\n target=\"_blank\"\n >\n <limel-icon name=\"download_2\" />\n <limel-tooltip\n label={this.getTranslation('download')}\n elementId=\"tooltip-download\"\n openDirection=\"left\"\n />\n </a>\n );\n };\n\n private renderOpenInNewTabButton = () => {\n if (!this.allowOpenInNewTab || this.isFullscreen) {\n return;\n }\n\n return (\n <a\n class=\"button--new-tab\"\n id=\"tooltip-new-tab\"\n role=\"button\"\n href={this.fileUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <limel-icon name=\"external_link\" />\n <limel-tooltip\n label={this.getTranslation('open-in-new-tab')}\n elementId=\"tooltip-new-tab\"\n openDirection=\"left\"\n />\n </a>\n );\n };\n\n private renderActionMenu = () => {\n if (!this.actions || this.isFullscreen) {\n return;\n }\n\n return (\n <limel-menu\n class=\"action-menu\"\n items={this.actions}\n onSelect={this.emitOnAction}\n open-direction=\"left\"\n >\n <button\n class=\"button--action\"\n id=\"tooltip-more\"\n role=\"button\"\n slot=\"trigger\"\n >\n <limel-icon name=\"menu_2\" />\n <limel-tooltip\n label={this.getTranslation('more-actions')}\n elementId=\"tooltip-more\"\n openDirection=\"left\"\n />\n </button>\n </limel-menu>\n );\n };\n\n private createURL = async (fileType: string) => {\n if (['pdf'].includes(fileType)) {\n const response = await fetch(this.url);\n const blob = await response.blob();\n\n this.fileUrl = URL.createObjectURL(blob);\n } else {\n this.fileUrl = this.url;\n }\n\n this.loading = false;\n };\n\n private handleToggleFullscreen = () => {\n if (this.fullscreen.isSupported()) {\n this.fullscreen.toggle();\n this.isFullscreen = !this.isFullscreen;\n }\n };\n\n private emitOnAction = (event: LimelMenuCustomEvent<ListItem>) => {\n event.stopPropagation();\n this.action.emit(event.detail);\n };\n\n private getTranslation(key: string) {\n return translate.get(`file-viewer.${key}`, this.language);\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["detectExtension","fileName","url","pathLike","extension","split","pop","toLowerCase","extensionsToTypes","pdf","jpg","jpeg","heic","bmp","png","gif","svg","svgz","ep","eps","avi","flv","h264","mov","mp4","mwv","mkv","mp3","wav","wma","ogg","txt","json","html","xml","doc","docx","odt","dot","dotx","docm","dotm","pot","ppt","pptx","odp","potx","potm","pps","ppsx","ppsm","pptm","ppam","pages","xls","xlsx","xlsm","xlsb","ods","csv","numbers","Fullscreen","constructor","element","this","requestFullscreen","enter","exitFullscreen","exit","bind","window","document","toggle","isFullscreen","fullscreenElement","mozFullScreenElement","webkitFullscreenElement","msFullscreenElement","msRequestFullscreen","mozRequestFullScreen","webkitRequestFullscreen","msExitFullscreen","mozCancelFullScreen","webkitExitFullscreen","isSupported","fileViewerCss","FileViewer","hostRef","renderPdf","h","class","renderActionMenu","src","fileUrl","loading","renderImage","renderButtons","alt","renderVideo","controls","renderAudio","renderText","data","type","filename","href","target","rel","renderOffice","getOfficeViewerUrl","isOfficeFileAccessibleViaURL","fileType","startsWith","officeViewers","officeViewer","renderNoFileSupportMessage","role","name","size","getTranslation","renderDownloadButton","renderToggleFullscreenButton","renderOpenInNewTabButton","allowFullscreen","fullscreen","icon","label","id","onClick","handleToggleFullscreen","elementId","openDirection","allowDownload","download","allowOpenInNewTab","actions","items","onSelect","emitOnAction","slot","createURL","async","includes","response","fetch","blob","URL","createObjectURL","event","stopPropagation","action","emit","detail","HostElement","render","limeBranded","renderFileViewer","newUrl","oldUrl","fileViewerFunctions","image","video","audio","text","office","fileViewerFunction","key","translate","get","language"],"sources":["./src/components/file-viewer/extension-mapping.tsx","./src/components/file-viewer/fullscreen.ts","./src/components/file-viewer/file-viewer.scss?tag=limel-file-viewer&encapsulation=shadow","./src/components/file-viewer/file-viewer.tsx"],"sourcesContent":["export function detectExtension(fileName, url): any {\n const pathLike = fileName || url;\n if (!pathLike) {\n return 'unknown';\n }\n\n const extension = pathLike.split('.').pop().toLowerCase();\n const extensionsToTypes = {\n pdf: 'pdf',\n jpg: 'image',\n jpeg: 'image',\n heic: 'image',\n bmp: 'image',\n png: 'image',\n gif: 'image',\n svg: 'image',\n svgz: 'image',\n ep: 'image',\n eps: 'image',\n avi: 'video',\n flv: 'video',\n h264: 'video',\n mov: 'video',\n mp4: 'video',\n mwv: 'video',\n mkv: 'video',\n mp3: 'audio',\n wav: 'audio',\n wma: 'audio',\n ogg: 'audio',\n txt: 'text',\n json: 'text',\n html: 'text',\n xml: 'text',\n // Word\n doc: 'office',\n docx: 'office',\n odt: 'office',\n dot: 'office',\n dotx: 'office',\n docm: 'office', // not supported\n dotm: 'office', // not yet tested\n // Presentation\n pot: 'office', // not tested\n ppt: 'office',\n pptx: 'office',\n odp: 'office',\n potx: 'office', // not supported\n potm: 'office', // not supported\n pps: 'office',\n ppsx: 'office',\n ppsm: 'office', // not supported\n pptm: 'office', // not supported\n ppam: 'office', // not tested\n pages: 'office', // not supported (Apple)\n // Spreadsheet\n xls: 'office',\n xlsx: 'office',\n xlsm: 'office',\n xlsb: 'office',\n ods: 'office',\n csv: 'office', // not supported\n numbers: 'office', // not supported (Apple)\n };\n\n return extensionsToTypes[extension] || 'unknown';\n}\n","export class Fullscreen {\n private enter: () => void;\n private exit: () => void;\n\n constructor(element: any) {\n this.enter =\n element.requestFullscreen ||\n element.msRequestFullscreen ||\n element.mozRequestFullScreen ||\n element.webkitRequestFullscreen;\n this.enter = this.enter.bind(element);\n const doc: any = window.document;\n this.exit =\n doc.exitFullscreen ||\n doc.msExitFullscreen ||\n doc.mozCancelFullScreen ||\n doc.webkitExitFullscreen;\n }\n\n public requestFullscreen = () => {\n if (this.enter) {\n this.enter();\n }\n };\n\n public exitFullscreen = () => {\n if (this.exit) {\n this.exit.bind(window.document)();\n }\n };\n\n public toggle = () => {\n const doc: any = window.document;\n const isFullscreen =\n doc.fullscreenElement ||\n doc.mozFullScreenElement ||\n doc.webkitFullscreenElement ||\n doc.msFullscreenElement;\n\n if (isFullscreen) {\n this.exitFullscreen();\n } else {\n this.requestFullscreen();\n }\n };\n\n public isSupported(): boolean {\n return !!this.requestFullscreen;\n }\n}\n","@use '../../style/internal/variables';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n$size-of-buttons: 2rem;\n\n:host {\n isolation: isolate;\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n* {\n box-sizing: border-box;\n}\n\nimg,\nvideo,\naudio,\nobject,\niframe {\n max-height: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\niframe {\n border: none;\n width: 100%;\n height: 100%;\n min-height: 20rem; // makes sure to get minimum comfortable space for viewing office files, and Microsoft Office viewers toolbars\n}\n\nimg {\n min-width: 7rem;\n object-fit: contain; // increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.\n}\n\nvideo {\n width: 100%;\n height: auto;\n}\n\naudio {\n width: 100%;\n}\n\nobject {\n width: 100%;\n height: 100%;\n}\n\nobject[type='application/pdf'] {\n min-height: 20rem;\n // makes sure to get browsers' native controls for the PDF\n}\n\nobject[type='text/plain'] {\n border-radius: 0.25rem;\n padding-right: $size-of-buttons;\n\n overflow-y: auto;\n}\n\n@mixin plain-text-in-fullscreen {\n background-color: rgb(var(--color-gray-darker));\n\n object[type='text/plain'] {\n max-width: 50rem;\n max-height: calc(100% - 2rem);\n }\n}\n\n:host(:fullscreen) {\n @include plain-text-in-fullscreen;\n}\n:host(:-webkit-full-screen) {\n // this is repetition of the previous block,\n // but needed for Safari to work.\n // Cannot write SCSS rules for `:host` using commas for some reason.\n // e.g.: `:host(:fullscreen), :host(:-webkit-full-screen)`.\n // So you have to repeat it sadly.\n @include plain-text-in-fullscreen;\n}\n\n@import './partial-styles/ui-controls.scss';\n","import {\n Component,\n Element,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport { ListItem } from '../list/list-item.types';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\nimport { LimelMenuCustomEvent } from '../../components';\n\n/**\n * This is a smart component that automatically detects\n * the most common file types such as image, audio, video, and text,\n * and properly displays them in the browser.\n * The component is also capable to render the most common office files.\n *\n * :::note\n * Image files will always be contained in their containers, which means\n * they automatically increase or decrease in size to fill their containing box\n * whilst preserving their aspect-ratio.\n *\n * Text and PDF files will also always respect the width and height of the\n * container in which the `limel-file-viewer` is loaded.\n * :::\n *\n * For some file types such as text and images, the component will display a\n * download button and a button to open the file in a new browser tab.\n * This will allow users to preview the file in a fullscreen mode with the\n * browser and take advantage of for example native zooming and panning\n * functionalities.\n *\n * @exampleComponent limel-example-file-viewer-basic\n * @exampleComponent limel-example-file-viewer-office\n * @exampleComponent limel-example-file-viewer-filename\n * @exampleComponent limel-example-file-viewer-inbuilt-actions\n * @exampleComponent limel-example-file-viewer-custom-actions\n * @exampleComponent limel-example-file-viewer-with-picker\n *\n * @beta\n */\n\n@Component({\n tag: 'limel-file-viewer',\n shadow: true,\n styleUrl: 'file-viewer.scss',\n})\nexport class FileViewer {\n /**\n * Link to the file\n */\n @Prop({ reflect: true })\n public url: string;\n\n /**\n * The name of the file that must also contains its extension.\n * This overrides the filename that the `url` ends with.\n * Useful when the `url` does not contain the filename.\n * When specified, the `filename` will be used as filename of\n * the downloaded file.\n */\n @Prop({ reflect: true })\n public filename?: string;\n\n /**\n * An optional alternative text, mainly for assistive technologies and screen readers.\n * It is used for only image files, as an `alt` attribute.\n * Should optimally hold a description of the image,\n * which is also displayed on the page if the image can't be loaded for some reason.\n */\n @Prop({ reflect: true })\n public alt?: string;\n\n /**\n * Displays a button that allows the user to view the file\n * in fullscreen mode.\n * Not displayed for office files!\n */\n @Prop({ reflect: true })\n public allowFullscreen?: boolean = false;\n\n /**\n * Displays a button that allows the user to open the file\n * in a new browser tab.\n * Not displayed for office files!\n */\n @Prop({ reflect: true })\n public allowOpenInNewTab?: boolean = false;\n\n /**\n * Displays a button that allows the user to download the file.\n * Note that due to the browser's security policies,\n * the file should be hosted on the same domain\n * for the download button to work properly.\n * Not displayed for office files!\n */\n @Prop({ reflect: true })\n public allowDownload?: boolean = false;\n\n /**\n * Defines the localization for translations.\n */\n @Prop()\n public language: Languages = 'en';\n\n /**\n * Defines the third-party viewer that should be used to render\n * the content of office files, such as word processing documents,\n * presentations, or spreadsheets.\n */\n @Prop({ reflect: true })\n public officeViewer: OfficeViewer = 'microsoft-office';\n\n /**\n * An array of custom actions that can be displayed\n * as an action menu on the file which is being displayed.\n */\n @Prop()\n public actions: ListItem[];\n\n /**\n * Emitted when a custom action is selected from the action menu.\n */\n @Event()\n public action: EventEmitter<ListItem>;\n\n @Element()\n public HostElement: HTMLLimelFileViewerElement;\n\n private fullscreen: Fullscreen;\n\n @State()\n private isFullscreen: boolean = false;\n\n @State()\n private fileType: FileType;\n\n /**\n * True while the file is being loaded.\n */\n @State()\n private loading: boolean = true;\n\n @State()\n private fileUrl: string = '';\n\n constructor() {\n this.fullscreen = new Fullscreen(this.HostElement);\n }\n\n public async componentWillLoad() {\n this.fileType = detectExtension(this.filename, this.url);\n await this.createURL(this.fileType);\n }\n\n public render() {\n if (!this.isOfficeFileAccessibleViaURL) {\n return this.renderNoFileSupportMessage();\n }\n\n if (this.loading) {\n return <limel-spinner size=\"x-small\" limeBranded={false} />;\n }\n\n return this.renderFileViewer();\n }\n\n @Watch('url')\n protected async watchUrl(newUrl: string, oldUrl: string) {\n if (newUrl === oldUrl) {\n return;\n }\n\n this.loading = true;\n this.fileType = detectExtension(this.filename, this.fileUrl);\n await this.createURL(this.fileType);\n }\n\n private renderFileViewer() {\n const fileViewerFunctions = {\n pdf: this.renderPdf,\n image: this.renderImage,\n video: this.renderVideo,\n audio: this.renderAudio,\n text: this.renderText,\n office: this.renderOffice,\n };\n const fileViewerFunction =\n fileViewerFunctions[this.fileType] ||\n this.renderNoFileSupportMessage;\n\n return fileViewerFunction();\n }\n\n private renderPdf = () => {\n return [\n <div class=\"action-menu-for-pdf-files\">\n {this.renderActionMenu()}\n </div>,\n <iframe src={this.fileUrl} loading=\"lazy\" />,\n ];\n };\n\n private renderImage = () => {\n return [\n this.renderButtons(),\n <img src={this.fileUrl} alt={this.alt} loading=\"lazy\" />,\n ];\n };\n\n private renderVideo = () => {\n return (\n <video controls>\n <source src={this.fileUrl} />\n </video>\n );\n };\n\n private renderAudio = () => {\n return (\n <audio controls>\n <source src={this.fileUrl} />\n </audio>\n );\n };\n\n private renderText = () => {\n return [\n this.renderButtons(),\n <object data={this.fileUrl} type=\"text/plain\">\n {`Text content from: ${this.filename || this.url}`}\n <a\n href={this.fileUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Open text file in new tab\n </a>\n </object>,\n ];\n };\n\n private renderOffice = () => {\n return [\n <div class=\"action-menu-for-office-files\">\n {this.renderActionMenu()}\n </div>,\n <iframe\n src={\n this.getOfficeViewerUrl() + this.fileUrl + '&embedded=true'\n }\n loading=\"lazy\"\n />,\n ];\n };\n\n private isOfficeFileAccessibleViaURL = () => {\n return (\n this.fileType === 'office' &&\n !(\n this.fileUrl.startsWith('http://') ||\n this.fileUrl.startsWith('https://')\n )\n );\n };\n\n private getOfficeViewerUrl = () => {\n const officeViewers = {\n 'microsoft-office':\n 'https://view.officeapps.live.com/op/embed.aspx?src=',\n 'google-drive': 'https://docs.google.com/gview?url=',\n };\n\n return officeViewers[this.officeViewer];\n };\n\n private renderNoFileSupportMessage = () => {\n return (\n <div class=\"no-support\" role=\"alert\">\n <limel-icon\n class=\"icon--warning\"\n name=\"brake_warning\"\n size=\"large\"\n role=\"presentation\"\n />\n <p>\n {this.getTranslation(\n 'file-viewer.message.unsupported-filetype',\n )}\n </p>\n {this.renderDownloadButton()}\n </div>\n );\n };\n\n private renderButtons = () => {\n return (\n <div class=\"buttons\">\n {this.renderActionMenu()}\n {this.renderToggleFullscreenButton()}\n {this.renderDownloadButton()}\n {this.renderOpenInNewTabButton()}\n </div>\n );\n };\n\n private renderToggleFullscreenButton = () => {\n if (!this.allowFullscreen || !this.fullscreen.isSupported()) {\n return;\n }\n\n const icon = this.isFullscreen ? 'multiply' : 'fit_to_width';\n // eslint-disable-next-line multiline-ternary\n const label = this.isFullscreen\n ? // eslint-disable-next-line multiline-ternary\n this.getTranslation('file-viewer.exit-fullscreen')\n : this.getTranslation('file-viewer.open-in-fullscreen');\n\n return [\n <button\n class=\"button--toggle-fullscreen\"\n id=\"tooltip-toggle-fullscreen\"\n role=\"button\"\n onClick={this.handleToggleFullscreen}\n >\n <limel-icon name={icon} />\n <limel-tooltip\n label={label}\n elementId=\"tooltip-toggle-fullscreen\"\n openDirection=\"left\"\n />\n </button>,\n ];\n };\n\n private renderDownloadButton = () => {\n if (!this.allowDownload || this.isFullscreen) {\n return;\n }\n\n return (\n <a\n class=\"button--download\"\n id=\"tooltip-download\"\n role=\"button\"\n download={this.filename ? this.filename : ''}\n href={this.fileUrl}\n target=\"_blank\"\n >\n <limel-icon name=\"download_2\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.download')}\n elementId=\"tooltip-download\"\n openDirection=\"left\"\n />\n </a>\n );\n };\n\n private renderOpenInNewTabButton = () => {\n if (!this.allowOpenInNewTab || this.isFullscreen) {\n return;\n }\n\n return (\n <a\n class=\"button--new-tab\"\n id=\"tooltip-new-tab\"\n role=\"button\"\n href={this.fileUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <limel-icon name=\"external_link\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.open-in-new-tab')}\n elementId=\"tooltip-new-tab\"\n openDirection=\"left\"\n />\n </a>\n );\n };\n\n private renderActionMenu = () => {\n if (!this.actions || this.isFullscreen) {\n return;\n }\n\n return (\n <limel-menu\n class=\"action-menu\"\n items={this.actions}\n onSelect={this.emitOnAction}\n open-direction=\"left\"\n >\n <button\n class=\"button--action\"\n id=\"tooltip-more\"\n role=\"button\"\n slot=\"trigger\"\n >\n <limel-icon name=\"menu_2\" />\n <limel-tooltip\n label={this.getTranslation('file-viewer.more-actions')}\n elementId=\"tooltip-more\"\n openDirection=\"left\"\n />\n </button>\n </limel-menu>\n );\n };\n\n private createURL = async (fileType: string) => {\n if (['pdf'].includes(fileType)) {\n const response = await fetch(this.url);\n const blob = await response.blob();\n\n this.fileUrl = URL.createObjectURL(blob);\n } else {\n this.fileUrl = this.url;\n }\n\n this.loading = false;\n };\n\n private handleToggleFullscreen = () => {\n if (this.fullscreen.isSupported()) {\n this.fullscreen.toggle();\n this.isFullscreen = !this.isFullscreen;\n }\n };\n\n private emitOnAction = (event: LimelMenuCustomEvent<ListItem>) => {\n event.stopPropagation();\n this.action.emit(event.detail);\n };\n\n private getTranslation(key: string) {\n return translate.get(key, this.language);\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as e,h as i,H as l,g as d}from"./p-288f0842.js";import{g as r,a,b as o}from"./p-cfe06c44.js";import{g as n}from"./p-d251f404.js";import{m as c,r as s}from"./p-f221011c.js";import{t as m}from"./p-4daf6318.js";import{D as f,B as h,c as p,d as x,a as g,E as u}from"./p-aa25f475.js";import{i as b}from"./p-6dd89d40.js";import{c as v}from"./p-96460db3.js";import{M as _}from"./p-85a982f9.js";import{i as w}from"./p-cf019264.js";import"./p-28a23eac.js";import"./p-c93050d6.js";import"./p-858c6b82.js";import"./p-33375610.js";import"./p-eda23c05.js";import"./p-4c3358cb.js";import"./p-0b1af919.js";import"./p-9f722992.js";import"./p-5a478c15.js";import"./p-e7281e6a.js";import"./p-ea0310b8.js";import"./p-87a34aa6.js";const y="@charset \"UTF-8\";:host(limel-chip){--limel-chip-height:var(--limel-chip-size, 1.75rem);--limel-chip-gap:0.5rem;isolation:isolate;display:inline-flex;align-items:center;min-width:0}:host(limel-chip[size=small]){--limel-chip-height:1.5rem;--limel-chip-gap:0.25rem}*{box-sizing:border-box}.chip{all:unset;position:relative;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:min(var(--chip-max-width, 100%), 25rem);height:var(--limel-chip-height);border-radius:var(--limel-chip-height);font-size:clamp(0.8125rem, var(--limel-chip-height) - 0.875rem, 1rem);padding:0 0.125rem}.chip:has(limel-icon) .text,.chip:has(img) .text{padding-left:0}.chip:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.chip:not([disabled]):focus{outline:none}.chip:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.chip:not([disabled]):hover,.chip:not([disabled]):focus,.chip:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}.chip:not([disabled]):hover{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.chip:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);background-color:var(--mdc-theme-surface);box-shadow:var(--button-shadow-inset-pressed)}.chip:not([disabled]):hover,.chip:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.chip:has(limel-badge){padding-right:0.375rem}.chip:has(limel-badge) .text{padding-right:0}.chip:has(+.remove-button:hover){box-shadow:var(--shadow-depth-8-error)}.chip:has(+limel-menu),.chip:has(+.trailing-button){padding-right:calc(var(--limel-chip-height) + 0.125rem)}.chip:has(+limel-menu) .text,.chip:has(+.trailing-button) .text{padding-right:0}:host(limel-chip[disabled]:not([disabled=false])) .chip{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1);box-shadow:none}:host(limel-chip[readonly]:not([readonly=false])) .chip{box-shadow:0 0 0 1px var(--chip-readonly-border-color, rgb(var(--contrast-800), 0.5))}:host(limel-chip[selected]:not([selected=false])) .chip{box-shadow:var(--button-shadow-inset)}:host(limel-chip[selected]:not([selected=false])) .chip:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}:host(limel-chip[selected]:not([selected=false])) .chip:active{box-shadow:var(--button-shadow-inset-pressed)}:host(limel-chip[selected]:not([selected=false])) .text{color:var(--mdc-theme-primary)}:host(limel-chip[type=filter]) .chip{border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem}:host(limel-chip[type=filter]) .chip:after{content:\"\";transition:background-color 0.4s ease 0.2s, box-shadow 0.6s ease 0.2s;box-sizing:border-box;position:absolute;bottom:0.125rem;left:0.125rem;width:0.5rem;height:0.5rem;border-radius:50%;background-color:rgb(var(--contrast-800), 0.8);box-shadow:0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[type=filter][selected]) .chip:after{background-color:rgb(var(--color-green-default));box-shadow:0 0 0.375rem 0 rgb(var(--color-green-light)), 0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[invalid]) .chip{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>\");background-size:0.5rem;background-color:rgb(var(--color-red-default))}:host(limel-chip[invalid]) .text{color:rgb(var(--color-white))}img,limel-icon{flex-shrink:0;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem)}img{object-fit:cover;border-radius:50%}limel-icon{padding:0.0625rem}limel-badge{pointer-events:none}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.2;padding:0 0.5rem}.trailing-button{all:unset;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-left:calc(var(--limel-chip-height) * -1 + 0.125rem);margin-right:0.125rem;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem);border-radius:50%}.trailing-button:hover,.trailing-button:focus,.trailing-button:focus-visible{will-change:color, background-color, box-shadow, transform}.trailing-button:hover{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.trailing-button:active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.trailing-button:hover,.trailing-button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.trailing-button svg{transition:color 0.2s ease, transform 0.2s ease;width:1.25rem}.trailing-button.remove-button:hover{color:rgb(var(--color-red-dark))}.trailing-button.remove-button:hover svg{transform:scale(0.8)}limel-menu button[slot=trigger]:focus{outline:none}limel-menu button[slot=trigger]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-menu[open] button[slot=trigger]{box-shadow:var(--button-shadow-inset)}.text{transition:padding-left 0.4s ease}limel-linear-progress{position:absolute;z-index:1;margin:auto;left:0.25rem;width:1.25rem}:host(limel-chip[loading]) .chip:before{content:\"\";position:absolute;left:0;width:var(--limel-chip-height);height:var(--limel-chip-height);border-radius:50%;scale:0.9;background-color:rgba(var(--contrast-600), 0.8)}:host(limel-chip[loading]) .chip:not(:has(limel-icon)) .text{padding-left:calc(var(--limel-chip-height) + 0.25rem)}div[role=progressbar]{--limel-chip-progressbar-offset:0.1875rem;--limel-chip-progressbar-stripe-color:rgb(var(--contrast-100), 0.3);--limel-chip-progressbar-stripe-size:1.5rem;pointer-events:none;position:absolute;display:flex;align-items:center;justify-content:end;inset:var(--limel-chip-progressbar-offset);max-width:calc(100% - var(--limel-chip-progressbar-offset) * 2);border-radius:inherit;background-color:var(--chip-progress-color, rgb(var(--contrast-700)));width:var(--limel-chip-progress-percentage);opacity:0.8;mix-blend-mode:var(--limel-chip-progress-mix-blend-mode)}div[role=progressbar]:after{content:\"\";transform:translate3d(0, 0, 0);position:absolute;inset:1px;background-image:linear-gradient(-45deg, var(--limel-chip-progressbar-stripe-color) 25%, transparent 25%, transparent 50%, var(--limel-chip-progressbar-stripe-color) 50%, var(--limel-chip-progressbar-stripe-color) 75%, transparent 75%, transparent);z-index:1;background-size:var(--limel-chip-progressbar-stripe-size) var(--limel-chip-progressbar-stripe-size);animation:move 2.5s linear infinite;border-radius:inherit}@media (prefers-reduced-motion){div[role=progressbar]:after{animation:none}}@keyframes move{0%{background-position:0 0}100%{background-position:calc(var(--limel-chip-progressbar-stripe-size) * -1) calc(var(--limel-chip-progressbar-stripe-size) * -1)}}";const k=class{constructor(l){t(this,l);this.remove=e(this,"remove",7);this.menuItemSelected=e(this,"menuItemSelected",7);this.renderAsButton=()=>[i("button",{id:"chip-"+this.identifier,class:"chip",role:"button",disabled:this.disabled||this.readonly,"aria-busy":this.loading?"true":"false","aria-live":"polite",onKeyDown:this.handleDeleteKeyDown},this.renderSpinner(),this.renderPicture(),this.renderLabel(),this.renderBadge(),this.renderProgressBar()),this.renderRemoveButton(),this.renderActionsMenu()];this.renderAsLink=()=>{var t,e;const l=r((t=this.link)===null||t===void 0?void 0:t.target,(e=this.link)===null||e===void 0?void 0:e.rel);return[i("a",{id:"chip-"+this.identifier,class:"chip",href:this.link.href,title:this.link.title,target:this.link.target,rel:l,"aria-disabled":this.disabled||this.readonly,tabindex:this.disabled||this.readonly?-1:0,onKeyDown:this.handleDeleteKeyDown},this.renderSpinner(),this.renderPicture(),this.renderLabel(),this.renderBadge(),this.renderProgressBar()),this.renderRemoveButton(),this.renderActionsMenu()]};this.renderLabel=()=>i("span",{class:"text"},this.text);this.filterClickWhenDisabled=t=>{if(this.disabled||this.readonly){t.preventDefault()}};this.handleRemoveClick=t=>{t.stopPropagation();this.remove.emit(this.identifier)};this.handleDeleteKeyDown=t=>{if(!this.removable){return}const e=[f,h];if(e.includes(t.key)){this.handleRemoveClick(t)}};this.removeChipLabel=()=>m.get("remove",this.language)+" "+this.text;this.actionMenuLabel=()=>m.get("file-viewer.more-actions",this.language);this.handleActionMenuSelect=t=>{const e=t.detail;if(!e){return}if(e.value==="_remove"){this.remove.emit(this.identifier);return}this.menuItemSelected.emit(e)};this.handleActionMenuCancel=t=>{t.stopPropagation()};this.language="en";this.text=undefined;this.icon=undefined;this.image=undefined;this.link=undefined;this.badge=undefined;this.disabled=false;this.readonly=false;this.selected=false;this.invalid=false;this.removable=false;this.type="default";this.loading=false;this.progress=undefined;this.identifier=crypto.randomUUID();this.size="default";this.menuItems=[]}componentWillLoad(){c(this.host)}disconnectedCallback(){s(this.host)}render(){return i(l,{onClick:this.filterClickWhenDisabled},this.link?this.renderAsLink():this.renderAsButton())}renderPicture(){var t,e;const l=n(this.icon);if(!l&&!this.image){return}if(!b(this.image)){return i("img",{src:this.image.src,alt:this.image.alt,loading:"lazy"})}return i("limel-icon",{badge:true,name:l,style:{color:`${(t=this.icon)===null||t===void 0?void 0:t.color}`,"background-color":`${(e=this.icon)===null||e===void 0?void 0:e.backgroundColor}`}})}renderBadge(){if(!this.badge){return}return i("limel-badge",{label:this.badge})}renderRemoveButton(){var t;if(!this.removable||this.readonly||this.disabled||!!((t=this.menuItems)===null||t===void 0?void 0:t.length)){return}const e='<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-width="2" d="m8 8 16 16M24 8 8 24"/></svg>';return i("button",{class:"trailing-button remove-button",tabIndex:-1,"aria-label":this.removeChipLabel,"aria-controls":"chip-"+this.identifier,innerHTML:e,onClick:this.handleRemoveClick})}renderActionsMenu(){var t;if(!((t=this.menuItems)===null||t===void 0?void 0:t.length)){return}const e='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" xml:space="preserve"><circle fill="currentColor" cx="16" cy="16" r="2"/><circle fill="currentColor" cx="16" cy="24" r="2"/><circle fill="currentColor" cx="16" cy="8" r="2"/></svg>';const l=this.getMenuItems();return i("limel-menu",{items:l,onSelect:this.handleActionMenuSelect,openDirection:"bottom-end",onCancel:this.handleActionMenuCancel},i("button",{slot:"trigger",disabled:this.disabled,class:"trailing-button","aria-label":this.actionMenuLabel,innerHTML:e}))}getMenuItems(){let t=[...this.menuItems];if(this.removable){t=[...t,{separator:true},{text:this.removeChipLabel(),icon:{name:"delete_sign",color:"rgb(var(--color-red-default))"},value:"_remove"}]}return t}renderSpinner(){if(!this.loading){return}return i("limel-linear-progress",{indeterminate:true})}renderProgressBar(){if(!this.progress){return}const t=this.progress+"%";return i("div",{role:"progressbar","aria-label":"%","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.progress,style:{"--limel-chip-progress-percentage":t}})}static get delegatesFocus(){return true}get host(){return d(this)}};k.style=y;function z(t){var e;if(this.textValue.length){return}if(!((e=this.value)===null||e===void 0?void 0:e.length)){return}const i=t.key===p;const l=t.key===x;const d=t.key===g;const r=t.key===f;const a=t.key===h;const o=t.key===u;if(i){return C(this,t)}if(l){return Y(this,t)}if(d){return j(this,t)}if(r){return I(this,t)}if(a){return T(this,t)}if(o){return X(this,t)}}function C(t,e){e.preventDefault();if(t.inputChipIndexSelected===null){t.inputChipIndexSelected=t.value.length-1;return}if(t.inputChipIndexSelected<=0){return}t.inputChipIndexSelected-=1}function Y(t,e){e.preventDefault();if(t.inputChipIndexSelected===null){t.inputChipIndexSelected=0;return}if(t.inputChipIndexSelected>=t.value.length-1){return}t.inputChipIndexSelected+=1}function j(t,e){if(t.inputChipIndexSelected!==null){e.preventDefault();t.emitInteraction(t.value[t.inputChipIndexSelected])}}function X(t,e){if(t.inputChipIndexSelected!==null){e.preventDefault();t.inputChipIndexSelected=null}}function I(t,e){if(t.inputChipIndexSelected!==null){e.preventDefault();B(t)}}function T(t,e){if(t.inputChipIndexSelected!==null){e.preventDefault();B(t)}else if(!e.repeat){t.inputChipIndexSelected=t.value.length-1}}function B(t){if(t.inputChipIndexSelected!==null){t.removeChip(t.value[t.inputChipIndexSelected].id);t.inputChipIndexSelected=null}}const F='@charset "UTF-8";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-text-field--filled{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}.mdc-text-field--filled .mdc-text-field__ripple::before,.mdc-text-field--filled .mdc-text-field__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-text-field--filled .mdc-text-field__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-text-field--filled .mdc-text-field__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-text-field--filled.mdc-ripple-upgraded--unbounded .mdc-text-field__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-text-field--filled.mdc-ripple-upgraded--foreground-activation .mdc-text-field__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-text-field--filled.mdc-ripple-upgraded--foreground-deactivation .mdc-text-field__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-text-field--filled .mdc-text-field__ripple::before,.mdc-text-field--filled .mdc-text-field__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-text-field__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-text-field{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:0;border-bottom-left-radius:0;display:inline-flex;align-items:baseline;padding:0 16px;position:relative;box-sizing:border-box;overflow:hidden;will-change:opacity, transform, color}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0, 0, 0, 0.6)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input{color:rgba(0, 0, 0, 0.87)}@media all{.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder{color:rgba(0, 0, 0, 0.54)}}@media all{.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder{color:rgba(0, 0, 0, 0.54)}}.mdc-text-field .mdc-text-field__input{caret-color:#26a69a;caret-color:var(--mdc-theme-primary, #26a69a)}.mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text{color:rgba(0, 0, 0, 0.6)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter,.mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-character-counter{color:rgba(0, 0, 0, 0.6)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading{color:rgba(0, 0, 0, 0.54)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing{color:rgba(0, 0, 0, 0.54)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--prefix{color:rgba(0, 0, 0, 0.6)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--suffix{color:rgba(0, 0, 0, 0.6)}.mdc-text-field .mdc-floating-label{top:50%;transform:translateY(-50%);pointer-events:none}.mdc-text-field__input{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:0.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform, inherit);height:28px;transition:opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);width:100%;min-width:0;border:none;border-radius:0;background:none;appearance:none;padding:0}.mdc-text-field__input::-ms-clear{display:none}.mdc-text-field__input::-webkit-calendar-picker-indicator{display:none}.mdc-text-field__input:focus{outline:none}.mdc-text-field__input:invalid{box-shadow:none}@media all{.mdc-text-field__input::placeholder{transition:opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);opacity:0}}@media all{.mdc-text-field__input:-ms-input-placeholder{transition:opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);opacity:0}}@media all{.mdc-text-field--no-label .mdc-text-field__input::placeholder,.mdc-text-field--focused .mdc-text-field__input::placeholder{transition-delay:40ms;transition-duration:110ms;opacity:1}}@media all{.mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder,.mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder{transition-delay:40ms;transition-duration:110ms;opacity:1}}.mdc-text-field__affix{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:0.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform, inherit);height:28px;transition:opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);opacity:0;white-space:nowrap}.mdc-text-field--label-floating .mdc-text-field__affix,.mdc-text-field--no-label .mdc-text-field__affix{opacity:1}@supports (-webkit-hyphens: none){.mdc-text-field--outlined .mdc-text-field__affix{align-items:center;align-self:center;display:inline-flex;height:100%}}.mdc-text-field__affix--prefix{padding-left:0;padding-right:2px}[dir=rtl] .mdc-text-field__affix--prefix,.mdc-text-field__affix--prefix[dir=rtl]{padding-left:2px;padding-right:0;}.mdc-text-field--end-aligned .mdc-text-field__affix--prefix{padding-left:0;padding-right:12px}[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--prefix,.mdc-text-field--end-aligned .mdc-text-field__affix--prefix[dir=rtl]{padding-left:12px;padding-right:0;}.mdc-text-field__affix--suffix{padding-left:12px;padding-right:0}[dir=rtl] .mdc-text-field__affix--suffix,.mdc-text-field__affix--suffix[dir=rtl]{padding-left:0;padding-right:12px;}.mdc-text-field--end-aligned .mdc-text-field__affix--suffix{padding-left:2px;padding-right:0}[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--suffix,.mdc-text-field--end-aligned .mdc-text-field__affix--suffix[dir=rtl]{padding-left:0;padding-right:2px;}.mdc-text-field--filled{height:56px}.mdc-text-field--filled .mdc-text-field__ripple::before,.mdc-text-field--filled .mdc-text-field__ripple::after{background-color:rgba(0, 0, 0, 0.87);background-color:var(--mdc-ripple-color, rgba(0, 0, 0, 0.87))}.mdc-text-field--filled:hover .mdc-text-field__ripple::before,.mdc-text-field--filled.mdc-ripple-surface--hover .mdc-text-field__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-text-field--filled.mdc-ripple-upgraded--background-focused .mdc-text-field__ripple::before,.mdc-text-field--filled:not(.mdc-ripple-upgraded):focus .mdc-text-field__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-text-field--filled::before{display:inline-block;width:0;height:40px;content:"";vertical-align:0}.mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:whitesmoke}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before{border-bottom-color:rgba(0, 0, 0, 0.42)}.mdc-text-field--filled:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before{border-bottom-color:rgba(0, 0, 0, 0.87)}.mdc-text-field--filled .mdc-line-ripple::after{border-bottom-color:#26a69a;border-bottom-color:var(--mdc-theme-primary, #26a69a)}.mdc-text-field--filled .mdc-floating-label{left:16px;right:initial}[dir=rtl] .mdc-text-field--filled .mdc-floating-label,.mdc-text-field--filled .mdc-floating-label[dir=rtl]{left:initial;right:16px;}.mdc-text-field--filled .mdc-floating-label--float-above{transform:translateY(-106%) scale(0.75)}.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input{height:100%}.mdc-text-field--filled.mdc-text-field--no-label .mdc-floating-label{display:none}.mdc-text-field--filled.mdc-text-field--no-label::before{display:none}@supports (-webkit-hyphens: none){.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__affix{align-items:center;align-self:center;display:inline-flex;height:100%}}.mdc-text-field--outlined{height:56px;overflow:visible}.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-37.25px) scale(1)}.mdc-text-field--outlined .mdc-floating-label--float-above{font-size:0.75rem}.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) scale(0.75)}.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-text-field-outlined 250ms 1}@keyframes mdc-floating-label-shake-float-above-text-field-outlined{0%{transform:translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75)}100%{transform:translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75)}}.mdc-text-field--outlined .mdc-text-field__input{height:100%}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:rgba(0, 0, 0, 0.38)}.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:rgba(0, 0, 0, 0.87)}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#26a69a;border-color:var(--mdc-theme-primary, #26a69a)}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small, 4px)}[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir=rtl]{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small, 4px);border-bottom-left-radius:0;}@supports (top: max(0%)){.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{width:max(12px, var(--mdc-shape-small, 4px))}}@supports (top: max(0%)){.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch{max-width:calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2)}}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small, 4px);border-bottom-left-radius:0}[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing,.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir=rtl]{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small, 4px);}@supports (top: max(0%)){.mdc-text-field--outlined{padding-left:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}@supports (top: max(0%)){.mdc-text-field--outlined{padding-right:max(16px, var(--mdc-shape-small, 4px))}}@supports (top: max(0%)){.mdc-text-field--outlined+.mdc-text-field-helper-line{padding-left:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}@supports (top: max(0%)){.mdc-text-field--outlined+.mdc-text-field-helper-line{padding-right:max(16px, var(--mdc-shape-small, 4px))}}.mdc-text-field--outlined.mdc-text-field--with-leading-icon{padding-left:0}@supports (top: max(0%)){.mdc-text-field--outlined.mdc-text-field--with-leading-icon{padding-right:max(16px, var(--mdc-shape-small, 4px))}}[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon,.mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl]{padding-right:0;}@supports (top: max(0%)){[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon,.mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl]{padding-left:max(16px, var(--mdc-shape-small, 4px))}}.mdc-text-field--outlined.mdc-text-field--with-trailing-icon{padding-right:0}@supports (top: max(0%)){.mdc-text-field--outlined.mdc-text-field--with-trailing-icon{padding-left:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon,.mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl]{padding-left:0;}@supports (top: max(0%)){[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon,.mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl]{padding-right:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon{padding-left:0;padding-right:0}.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:1px}.mdc-text-field--outlined .mdc-text-field__ripple::before,.mdc-text-field--outlined .mdc-text-field__ripple::after{content:none}.mdc-text-field--outlined .mdc-floating-label{left:4px;right:initial}[dir=rtl] .mdc-text-field--outlined .mdc-floating-label,.mdc-text-field--outlined .mdc-floating-label[dir=rtl]{left:initial;right:4px;}.mdc-text-field--outlined .mdc-text-field__input{display:flex;border:none !important;background-color:transparent}.mdc-text-field--outlined .mdc-notched-outline{z-index:1}.mdc-text-field--textarea{flex-direction:column;align-items:center;width:auto;height:auto;padding:0;transition:none}.mdc-text-field--textarea .mdc-floating-label{top:19px}.mdc-text-field--textarea .mdc-floating-label:not(.mdc-floating-label--float-above){transform:none}.mdc-text-field--textarea .mdc-text-field__input{flex-grow:1;height:auto;min-height:1.5rem;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;resize:none;padding:0 16px;line-height:1.5rem}.mdc-text-field--textarea.mdc-text-field--filled::before{display:none}.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--float-above{transform:translateY(-10.25px) scale(0.75)}.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-textarea-filled 250ms 1}@keyframes mdc-floating-label-shake-float-above-textarea-filled{0%{transform:translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 0%)) translateY(-10.25px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 0%)) translateY(-10.25px) scale(0.75)}100%{transform:translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75)}}.mdc-text-field--textarea.mdc-text-field--filled .mdc-text-field__input{margin-top:23px;margin-bottom:9px}.mdc-text-field--textarea.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input{margin-top:16px;margin-bottom:16px}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:0}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-27.25px) scale(1)}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above{font-size:0.75rem}.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-24.75px) scale(0.75)}.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-textarea-outlined 250ms 1}@keyframes mdc-floating-label-shake-float-above-textarea-outlined{0%{transform:translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75)}100%{transform:translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75)}}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-text-field__input{margin-top:16px;margin-bottom:16px}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label{top:18px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field__input{margin-bottom:2px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter{align-self:flex-end;padding:0 16px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::after{display:inline-block;width:0;height:16px;content:"";vertical-align:-16px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::before{display:none}.mdc-text-field__resizer{align-self:stretch;display:inline-flex;flex-direction:column;flex-grow:1;max-height:100%;max-width:100%;min-height:56px;min-width:fit-content;min-width:-moz-available;min-width:-webkit-fill-available;overflow:hidden;resize:both}.mdc-text-field--filled .mdc-text-field__resizer{transform:translateY(-1px)}.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field__input,.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field-character-counter{transform:translateY(1px)}.mdc-text-field--outlined .mdc-text-field__resizer{transform:translateX(-1px) translateY(-1px)}[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer,.mdc-text-field--outlined .mdc-text-field__resizer[dir=rtl]{transform:translateX(1px) translateY(-1px);}.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input,.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter{transform:translateX(1px) translateY(1px)}[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input,[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter,.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input[dir=rtl],.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter[dir=rtl]{transform:translateX(-1px) translateY(1px);}.mdc-text-field--with-leading-icon{padding-left:0;padding-right:16px}[dir=rtl] .mdc-text-field--with-leading-icon,.mdc-text-field--with-leading-icon[dir=rtl]{padding-left:16px;padding-right:0;}.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label{max-width:calc(100% - 48px);left:48px;right:initial}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label,.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label[dir=rtl]{left:initial;right:48px;}.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label--float-above{max-width:calc(100% / 0.75 - 64px / 0.75)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label{left:36px;right:initial}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label,.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label[dir=rtl]{left:initial;right:36px;}.mdc-text-field--with-leading-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 60px)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-37.25px) translateX(-32px) scale(1)}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above,.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above[dir=rtl]{transform:translateY(-37.25px) translateX(32px) scale(1);}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above{font-size:0.75rem}.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) translateX(-32px) scale(0.75)}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl],.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl]{transform:translateY(-34.75px) translateX(32px) scale(0.75);}.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1}@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon{0%{transform:translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75)}100%{transform:translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75)}}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined,.mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl]{}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake,.mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl] .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1}@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl{0%{transform:translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75)}100%{transform:translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75)}}.mdc-text-field--with-trailing-icon{padding-left:16px;padding-right:0}[dir=rtl] .mdc-text-field--with-trailing-icon,.mdc-text-field--with-trailing-icon[dir=rtl]{padding-left:0;padding-right:16px;}.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label{max-width:calc(100% - 64px)}.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above{max-width:calc(100% / 0.75 - 64px / 0.75)}.mdc-text-field--with-trailing-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 60px)}.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon{padding-left:0;padding-right:0}.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label{max-width:calc(100% - 96px)}.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above{max-width:calc(100% / 0.75 - 96px / 0.75)}.mdc-text-field-helper-line{display:flex;justify-content:space-between;box-sizing:border-box}.mdc-text-field+.mdc-text-field-helper-line{padding-right:16px;padding-left:16px}.mdc-form-field>.mdc-text-field+label{align-self:flex-start}.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(38, 166, 154, 0.87)}.mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--focused .mdc-notched-outline__trailing{border-width:2px}.mdc-text-field--focused+.mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg){opacity:1}.mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:2px}.mdc-text-field--focused.mdc-text-field--outlined.mdc-text-field--textarea .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:0}.mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::after{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid .mdc-text-field__input{caret-color:#b00020;caret-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::before{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg{opacity:1}.mdc-text-field--disabled{pointer-events:none}.mdc-text-field--disabled .mdc-text-field__input{color:rgba(0, 0, 0, 0.38)}@media all{.mdc-text-field--disabled .mdc-text-field__input::placeholder{color:rgba(0, 0, 0, 0.38)}}@media all{.mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder{color:rgba(0, 0, 0, 0.38)}}.mdc-text-field--disabled .mdc-floating-label{color:rgba(0, 0, 0, 0.38)}.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-helper-text{color:rgba(0, 0, 0, 0.38)}.mdc-text-field--disabled .mdc-text-field-character-counter,.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-character-counter{color:rgba(0, 0, 0, 0.38)}.mdc-text-field--disabled .mdc-text-field__icon--leading{color:rgba(0, 0, 0, 0.3)}.mdc-text-field--disabled .mdc-text-field__icon--trailing{color:rgba(0, 0, 0, 0.3)}.mdc-text-field--disabled .mdc-text-field__affix--prefix{color:rgba(0, 0, 0, 0.38)}.mdc-text-field--disabled .mdc-text-field__affix--suffix{color:rgba(0, 0, 0, 0.38)}.mdc-text-field--disabled .mdc-line-ripple::before{border-bottom-color:rgba(0, 0, 0, 0.06)}.mdc-text-field--disabled .mdc-notched-outline__leading,.mdc-text-field--disabled .mdc-notched-outline__notch,.mdc-text-field--disabled .mdc-notched-outline__trailing{border-color:rgba(0, 0, 0, 0.06)}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__input::placeholder{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-floating-label{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-helper-text{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field-character-counter,.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-character-counter{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__icon--leading{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__icon--trailing{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__affix--prefix{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__affix--suffix{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-line-ripple::before{border-bottom-color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-notched-outline__leading,.mdc-text-field--disabled .mdc-notched-outline__notch,.mdc-text-field--disabled .mdc-notched-outline__trailing{border-color:GrayText}}@media screen and (forced-colors: active){.mdc-text-field--disabled .mdc-text-field__input{background-color:Window}.mdc-text-field--disabled .mdc-floating-label{z-index:1}}.mdc-text-field--disabled .mdc-floating-label{cursor:default}.mdc-text-field--disabled.mdc-text-field--filled{background-color:#fafafa}.mdc-text-field--disabled.mdc-text-field--filled .mdc-text-field__ripple{display:none}.mdc-text-field--disabled .mdc-text-field__input{pointer-events:auto}.mdc-text-field--end-aligned .mdc-text-field__input{text-align:right}[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__input,.mdc-text-field--end-aligned .mdc-text-field__input[dir=rtl]{text-align:left;}[dir=rtl] .mdc-text-field--ltr-text,.mdc-text-field--ltr-text[dir=rtl]{}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix{direction:ltr}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix{padding-left:0;padding-right:2px}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix{padding-left:12px;padding-right:0}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--leading,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--leading{order:1}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix{order:2}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input{order:3}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix{order:4}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--trailing,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--trailing{order:5}[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned,.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl]{}[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__input,.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__input{text-align:right}[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--prefix,.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--prefix{padding-right:12px}[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--suffix,.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--suffix{padding-left:2px}.mdc-text-field-helper-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, inherit));font-size:0.6875rem;font-size:var(--mdc-typography-caption-font-size, 0.6875rem);line-height:0.875rem;line-height:var(--mdc-typography-caption-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:0.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit);display:block;margin-top:0;line-height:normal;margin:0;opacity:0;will-change:opacity;transition:opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-text-field-helper-text::before{display:inline-block;width:0;height:16px;content:"";vertical-align:0}.mdc-text-field-helper-text--persistent{transition:none;opacity:1;will-change:initial}.mdc-text-field-character-counter{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, inherit));font-size:0.6875rem;font-size:var(--mdc-typography-caption-font-size, 0.6875rem);line-height:0.875rem;line-height:var(--mdc-typography-caption-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:0.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit);display:block;margin-top:0;line-height:normal;margin-left:auto;margin-right:0;padding-left:16px;padding-right:0;white-space:nowrap}.mdc-text-field-character-counter::before{display:inline-block;width:0;height:16px;content:"";vertical-align:0}[dir=rtl] .mdc-text-field-character-counter,.mdc-text-field-character-counter[dir=rtl]{margin-left:0;margin-right:auto;}[dir=rtl] .mdc-text-field-character-counter,.mdc-text-field-character-counter[dir=rtl]{padding-left:0;padding-right:16px;}.mdc-text-field__icon{align-self:center;cursor:pointer}.mdc-text-field__icon:not([tabindex]),.mdc-text-field__icon[tabindex="-1"]{cursor:default;pointer-events:none}.mdc-text-field__icon svg{display:block}.mdc-text-field__icon--leading{margin-left:16px;margin-right:8px}[dir=rtl] .mdc-text-field__icon--leading,.mdc-text-field__icon--leading[dir=rtl]{margin-left:8px;margin-right:16px;}.mdc-text-field__icon--trailing{padding:12px;margin-left:0px;margin-right:0px}[dir=rtl] .mdc-text-field__icon--trailing,.mdc-text-field__icon--trailing[dir=rtl]{margin-left:0px;margin-right:0px;}.mdc-text-field__icon{align-self:center;cursor:pointer}.mdc-text-field__icon:not([tabindex]),.mdc-text-field__icon[tabindex="-1"]{cursor:default;pointer-events:none}.mdc-text-field__icon svg{display:block}.mdc-text-field__icon--leading{margin-left:16px;margin-right:8px}[dir=rtl] .mdc-text-field__icon--leading,.mdc-text-field__icon--leading[dir=rtl]{margin-left:8px;margin-right:16px;}.mdc-text-field__icon--trailing{padding:12px;margin-left:0px;margin-right:0px}[dir=rtl] .mdc-text-field__icon--trailing,.mdc-text-field__icon--trailing[dir=rtl]{margin-left:0px;margin-right:0px;}.mdc-text-field__icon{display:flex;align-items:center;justify-content:center;color:rgb(var(--contrast-900))}.mdc-text-field__icon limel-icon{width:1.5rem;height:1.5rem}:host(limel-chip-set){isolation:isolate}:host(limel-chip-set[type=input]) limel-notched-outline [slot=content]{min-height:2.5rem}:host(limel-chip-set:not([type=input])) .limel-notched-outline{--limel-notched-outline-border-color:transparent;--limel-notched-outline-background-color:transparent}.mdc-chip-set{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;min-height:2.5rem;position:relative}.mdc-chip-set.mdc-chip-set--input{padding:0.4rem 0.5rem;width:100%}.mdc-chip-set.has-clear-all-button.mdc-chip-set--input{padding-right:2rem}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input{color:rgba(var(--contrast-1400), 1)}.mdc-text-field.mdc-text-field--disabled .mdc-text-field__input{color:rgba(var(--contrast-1400), 0.5)}.mdc-text-field{height:auto;cursor:text;flex-wrap:wrap;row-gap:0.5rem}.mdc-text-field .mdc-text-field__input{width:auto;padding:0 0.5rem;flex-grow:1;flex-shrink:0}.mdc-text-field .mdc-text-field__input::placeholder{color:rgb(var(--contrast-900)) !important}.mdc-text-field .mdc-text-field__input.hidden{transition:all 0s;opacity:0;position:absolute;z-index:-100}.mdc-text-field .mdc-text-field__input[type=search]{-webkit-appearance:textfield;background-color:transparent}.mdc-text-field .mdc-text-field__input[type=search]::-webkit-search-cancel-button{display:none}.clear-all-button{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:rgb(var(--contrast-900));cursor:pointer;height:1.25rem;width:1.25rem;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:0.75rem;background-image:url("data:image/svg+xml; utf8, <svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 32 32\'><defs/><path fill=\'rgb(255,255,255)\' d=\'M7.219 5.781L5.78 7.22 14.563 16 5.78 24.781 7.22 26.22 16 17.437l8.781 8.782 1.438-1.438L17.437 16l8.782-8.781L24.78 5.78 16 14.563z\'/></svg>");position:absolute;right:0.5rem;top:calc(2.5rem / 4);opacity:0}.clear-all-button:hover,.clear-all-button:focus,.clear-all-button:focus-visible{will-change:color, background-color, box-shadow, transform}.clear-all-button:hover{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-on-surface);background-color:rgb(var(--contrast-1100));box-shadow:var(--button-shadow-hovered)}.clear-all-button:active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.clear-all-button:hover,.clear-all-button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.clear-all-button:focus{outline:none}.clear-all-button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.clear-all-button:focus,.has-chips:not(.disabled):hover .clear-all-button,.has-chips:not(.disabled).mdc-text-field--focused .clear-all-button{opacity:1;outline:none}.mdc-chip-set:not(.has-chips) .clear-all-button,.has-chips.disabled .clear-all-button{display:none}.has-leading-icon:not(.has-chips) .mdc-text-field__input{padding-left:1.5rem}.has-leading-icon limel-chip:first-of-type{margin-left:1.5rem}.has-leading-icon .search-icon{transition:transform 0.2s ease;position:absolute;top:0.5625rem;left:0.25rem}.has-leading-icon limel-icon{background-color:transparent}.delimiter{opacity:0.5;padding:0 0.125rem;color:var(--mdc-theme-on-surface)}limel-chip{border-radius:2rem}limel-chip.can-be-removed{box-shadow:var(--shadow-depth-8-error)}:host(limel-chip-set[readonly]) .mdc-text-field.disabled{pointer-events:auto}:host(limel-chip-set:focus),:host(limel-chip-set:focus-visible),:host(limel-chip-set:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-chip-set){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-chip-set:focus) limel-helper-line,:host(limel-chip-set:focus-visible) limel-helper-line,:host(limel-chip-set:focus-within) limel-helper-line,:host(limel-chip-set:hover) limel-helper-line{will-change:grid-template-rows}';const G=1;const L=class{constructor(l){t(this,l);this.interact=e(this,"interact",7);this.change=e(this,"change",7);this.startEdit=e(this,"startEdit",7);this.stopEdit=e(this,"stopEdit",7);this.input=e(this,"input",7);this.handleKeyDown=z;this.renderContent=t=>{if(this.type==="input"){return this.renderInputChips()}return t.map(this.renderChip)};this.getValue=()=>this.value.map((t=>Object.assign(Object.assign({},t),this.type&&{selected:this.selectedChipIds.includes(t.id)})));this.floatLabelAbove=()=>{if(!!this.value.length||this.editMode||this.readonly||this.textValue){return true}};this.hasHelperText=()=>this.helperText!==null&&this.helperText!==undefined;this.renderHelperLine=()=>{const t=this.maxItems===1?undefined:this.maxItems;if(!t&&!this.hasHelperText()){return}return i("limel-helper-line",{length:this.value.length,maxLength:t,helperText:this.helperText,invalid:this.isInvalid()})};this.catchInputChipClicks=t=>e=>{e.Lime={chip:t};if(this.isSelectableChip(t)){this.updateSelectedChipIds(t);this.change.emit(t)}this.emitInteraction(t)};this.handleRemoveChip=t=>{this.removeChip(t.detail)};this.removeChip=t=>{const e=this.value.filter((e=>e.id!==t));this.change.emit(e)};this.clearAllChipsLabel=()=>m.get("chip-set.clear-all",this.language);this.value=[];this.type=undefined;this.label=undefined;this.helperText=undefined;this.disabled=false;this.readonly=false;this.invalid=false;this.inputType="text";this.maxItems=undefined;this.required=false;this.searchLabel=undefined;this.emptyInputOnBlur=true;this.clearAllButton=true;this.leadingIcon=null;this.delimiter=null;this.autocomplete="off";this.language="en";this.editMode=false;this.textValue="";this.blurred=false;this.inputChipIndexSelected=null;this.selectedChipIds=undefined;this.labelId=v();this.renderChip=this.renderChip.bind(this);this.renderInputChip=this.renderInputChip.bind(this);this.isFull=this.isFull.bind(this);this.handleTextFieldFocus=this.handleTextFieldFocus.bind(this);this.handleInputBlur=this.handleInputBlur.bind(this);this.handleTextInput=this.handleTextInput.bind(this);this.inputFieldOnChange=this.inputFieldOnChange.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this);this.inputHidden=this.inputHidden.bind(this);this.handleDeleteAllIconClick=this.handleDeleteAllIconClick.bind(this);this.renderDelimiter=this.renderDelimiter.bind(this)}connectedCallback(){this.initialize()}initialize(){if(this.value.length){this.selectedChipIds=this.value.filter((t=>t.selected)).map((t=>t.id))}}async getEditMode(){return this.editMode}async setFocus(t=false){if(this.disabled||this.readonly){return}this.editMode=true;if(t){this.textValue=""}this.host.shadowRoot.querySelector("input").focus();this.startEdit.emit()}async emptyInput(){this.syncEmptyInput()}componentDidLoad(){this.triggerIconColorWarning(this.value);if(this.type==="input"){this.mdcTextField=new _(this.host.shadowRoot.querySelector(".mdc-text-field"))}}componentDidUpdate(){const t=this.host.shadowRoot.querySelector("input");if(t&&this.editMode){t.focus()}}disconnectedCallback(){if(this.mdcTextField){this.mdcTextField.destroy()}}render(){var t;const e={"mdc-chip-set":true,"mdc-text-field--with-trailing-icon":true,disabled:this.disabled||this.readonly};if(this.type){e[`mdc-chip-set--${this.type}`]=true}if(this.type==="input"){Object.assign(e,{"mdc-text-field":true,"mdc-text-field--outlined":true,"mdc-chip-set--input":true,"lime-text-field--readonly":this.readonly,"has-chips":this.value.length!==0,"has-leading-icon":this.leadingIcon!==null,"has-clear-all-button":this.clearAllButton})}const l=this.getValue();return[i("limel-notched-outline",{labelId:this.labelId,label:this.label,required:this.required,invalid:this.invalid||this.isInvalid(),disabled:this.disabled,readonly:this.readonly,hasValue:!!((t=this.value)===null||t===void 0?void 0:t.length),hasLeadingIcon:!!this.leadingIcon,hasFloatingLabel:this.floatLabelAbove()},i("div",Object.assign({slot:"content"},this.getContentProps(),{class:e}),this.renderContent(l))),this.renderHelperLine()]}getContentProps(){if(this.type==="input"){return{onClick:this.handleTextFieldFocus}}return{role:"grid"}}handleChangeChips(t,e){if(w(t,e)){return}this.syncEmptyInput();this.initialize()}renderInputChips(){return[this.value.map(this.renderInputChip),i("input",{tabIndex:G,type:this.inputType,id:this.labelId,disabled:this.readonly||this.disabled,class:{"mdc-text-field__input":true,hidden:this.inputHidden()},value:this.textValue,onBlur:this.handleInputBlur,onFocus:this.handleTextFieldFocus,onKeyDown:this.handleKeyDown,onInput:this.handleTextInput,onChange:this.inputFieldOnChange,placeholder:this.isFull()?"":this.searchLabel,readonly:this.isFull(),autocomplete:this.autocomplete}),this.renderLeadingIcon(),this.renderClearAllChipsButton()]}isFull(){return!!this.maxItems&&this.value.length>=this.maxItems}isInvalid(){var t;if(this.readonly){return false}if(this.invalid){return true}if(!this.required){return false}if(!this.blurred){return false}return!((t=this.value)===null||t===void 0?void 0:t.length)}inputFieldOnChange(t){t.stopPropagation()}handleTextFieldFocus(){if(this.disabled||this.readonly){return}if(this.editMode){return}this.editMode=true;this.startEdit.emit()}handleInputBlur(){if(this.emptyInputOnBlur){this.syncEmptyInput()}this.editMode=false;this.blurred=true;this.inputChipIndexSelected=null;setTimeout((()=>{this.stopEdit.emit()}),0)}syncEmptyInput(){this.textValue=""}inputHidden(){var t;if(this.editMode){return this.isFull()}return!!((t=this.value)===null||t===void 0?void 0:t.length)}handleTextInput(t){var e;t.stopPropagation();this.inputChipIndexSelected=null;this.textValue=t.target.value;this.input.emit((e=t.target.value)===null||e===void 0?void 0:e.trim())}emitInteraction(t){this.interact.emit(t)}renderChip(t){const e=this.type==="filter"?"filter":"default";const l=this.getChipProps(t,e);return i("limel-chip",Object.assign({},l))}renderInputChip(t,e,l){const d=this.getChipProps(t,"default");const r=e===l.length-1;return[i("limel-chip",Object.assign({key:t.id,class:{"can-be-removed":this.inputChipIndexSelected===e}},d)),!(r&&this.inputHidden())&&this.renderDelimiter()]}getChipProps(t,e){const i=this.type==="input"&&t.removable&&!this.readonly;const l=this.readonly&&this.type!=="input";return Object.assign({role:"row",identifier:t.id,text:t.text,icon:t.icon,image:t.image,badge:t.badge,selected:t.selected,disabled:this.disabled,loading:t.loading,readonly:l,type:e,removable:i,menuItems:t.menuItems,onClick:this.catchInputChipClicks(t),onRemove:this.handleRemoveChip},t.href&&{link:{href:a(t.href),target:o(t.href)}})}isSelectableChip(t){return this.type!=="input"&&"selected"in t}updateSelectedChipIds(t){t.selected=!t.selected;const e=t.id;if(this.type==="choice"){this.updateChoiceTypeSelectedIds(e)}else{this.updateFilterTypeSelectedIds(e)}}updateChoiceTypeSelectedIds(t){this.selectedChipIds=this.isChipSelected(t)?[]:[t]}isChipSelected(t){return!!this.selectedChipIds.find((e=>e===t))}updateFilterTypeSelectedIds(t){if(this.isChipSelected(t)){this.removeChipIdFromSelectedChipIds(t)}else{this.addChipIdToSelectedChipIds(t)}}removeChipIdFromSelectedChipIds(t){this.selectedChipIds=this.selectedChipIds.filter((e=>e!==t))}addChipIdToSelectedChipIds(t){this.selectedChipIds=[...this.selectedChipIds,t]}renderLeadingIcon(){if(!this.leadingIcon){return}return i("i",{class:"mdc-text-field__icon search-icon"},i("limel-icon",{name:this.leadingIcon}))}renderClearAllChipsButton(){if(this.disabled||this.readonly||!this.clearAllButton){return}return i("a",{href:"",onClick:this.handleDeleteAllIconClick,class:"mdc-text-field__icon clear-all-button",tabindex:"0",role:"button",title:this.clearAllChipsLabel(),"aria-label":this.clearAllChipsLabel()})}handleDeleteAllIconClick(t){t.preventDefault();this.change.emit([])}renderDelimiter(){if(!this.delimiter){return}return i("div",{class:"delimiter"},this.delimiter)}triggerIconColorWarning(t){for(const e of t){if(e.icon&&(e.iconFillColor||e.iconBackgroundColor||e.iconTitle)){console.warn("The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.")}}}get host(){return d(this)}static get watchers(){return{value:["handleChangeChips"]}}};L.style=F;export{k as limel_chip,L as limel_chip_set};
|
|
2
|
+
//# sourceMappingURL=p-5d750697.entry.js.map
|