npm - @limetech/lime-elements - Versions diffs - 37.1.0-next.61 → 37.1.0-next.63 - Mend

@limetech/lime-elements 37.1.0-next.61 → 37.1.0-next.63

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.

Files changed (36) hide show

package/dist/collection/components/checkbox/checkbox.js CHANGED Viewed

@@ -27,6 +27,14 @@ export class Checkbox {
   constructor() {
     this.id = createRandomString();
     this.helperTextId = createRandomString();
+    this.isInvalid = () => {
+      if (this.invalid) {
+        return true;
+      }
+      if (this.required && this.modified && !this.checked) {
+        return true;
+      }
+    };
     this.initialize = () => {
       const element = this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');
       if (!element) {
@@ -46,6 +54,7 @@ export class Checkbox {
     };
     this.disabled = false;
     this.readonly = false;
+    this.invalid = undefined;
     this.label = undefined;
     this.helperText = undefined;
     this.checked = false;
@@ -76,7 +85,7 @@ export class Checkbox {
     }
   }
   render() {
-    return (h(CheckboxTemplate, { disabled: this.disabled || this.readonly, label: this.label, helperText: this.helperText, helperTextId: this.helperTextId, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.required && this.modified && !this.checked, onChange: this.onChange, id: this.id }));
+    return (h(CheckboxTemplate, { disabled: this.disabled || this.readonly, label: this.label, helperText: this.helperText, helperTextId: this.helperTextId, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.isInvalid(), onChange: this.onChange, id: this.id }));
   }
   static get is() { return "limel-checkbox"; }
   static get encapsulation() { return "shadow"; }
@@ -128,6 +137,23 @@ export class Checkbox {
         "reflect": true,
         "defaultValue": "false"
       },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to indicate that the current value is invalid."
+        },
+        "attribute": "invalid",
+        "reflect": true
+      },
       "label": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/checkbox/checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;GAmBG;AAMH,MAAM,OAAO,QAAQ;;~~IA4DT~~,OAAE,GAAW,kBAAkB,EAAE,CAAC;IAClC,iBAAY,GAAW,kBAAkB,EAAE,CAAC;IAwD5C,eAAU,GAAG,GAAG,EAAE;MACtB,MAAM,OAAO,GACT,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;MACnE,IAAI,CAAC,OAAO,EAAE;QACV,OAAO;OACV;MAED,IAAI,CAAC,SAAS,GAAG,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC;MAC3C,IAAI,CAAC,WAAW,GAAG,IAAI,WAAW,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;MAC9D,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;IAC5C,CAAC,CAAC;IAEM,uBAAkB,GAAG,GAAG,EAAE;MAC9B,OAAO,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACxE,CAAC,CAAC;IAEM,aAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;MAChC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;MAC3C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACzB,CAAC,CAAC;~~oBAnIgB~~,KAAK;oBAQL,KAAK~~;;;mBAkBN~~,KAAK;yBAMC,KAAK;oBAMD,KAAK;oBAGb,KAAK;;EAiBd,mBAAmB,CAAC,QAAiB;IAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;EACxC,CAAC;EAGS,yBAAyB,CAAC,QAAiB;IACjD,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IACxC,IAAI,CAAC,WAAW,CAAC,aAAa,GAAG,QAAQ,CAAC;EAC9C,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,oBAAoB;;IACvB,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,EAAE,CAAC;IAC5B,MAAA,IAAI,CAAC,SAAS,0CAAE,OAAO,EAAE,CAAC;IAE1B,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAClD,IAAI,eAAe,EAAE;MACjB,eAAe,CAAC,SAAS,CAAC,MAAM,CAC5B,UAAU,CAAC,0BAA0B,EACrC,UAAU,CAAC,sBAAsB,EACjC,UAAU,CAAC,0BAA0B,EACrC,UAAU,CAAC,4BAA4B,EACvC,UAAU,CAAC,sBAAsB,EACjC,UAAU,CAAC,4BAA4B,CAC1C,CAAC;KACL;EACL,CAAC;EAEM,MAAM;IACT,OAAO,CACH,EAAC,gBAAgB,IACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAC3C,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,~~QAAQ~~,~~IAAI~~,~~IAAI~~,~~CAAC,~~QAAQ,~~IAAI,CAAC,IAAI,CAAC,OAAO,EACxD,QAAQ,~~EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,EAAE,GACb,CACL,CAAC;EACN,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBJ~~","sourcesContent":["import { MDCCheckbox, cssClasses } from '@material/checkbox';\nimport { MDCFormField } from '@material/form-field';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\n\n/*\n The Checkbox component is a classic and essential element in UI design that allows\n * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to\n * select one or more items from a list of choices.\n \n ## States of a Checkbox\n * When a user clicks or taps on the box, it toggles between two states:\n * Checked and Unchecked.\n \n However, a Checkbox can visualize a third state called the \"Indeterminate\" state.\n * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\n \n The Indeterminate state is typically used when dealing with checkbox groups\n * that have hierarchical relationships or when the group contains sub-items.\n * This state is used to indicate that that some, but not all, of the items in a group are selected.\n \n <limel-example-switch-vs-checkbox />\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n /\n@Component({\n tag: 'limel-checkbox',\n shadow: true,\n styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n /\n Disables the checkbox when `true`. Works exactly the same as `readonly`.\n * If either property is `true`, the checkbox will be disabled.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n * But shows no visual sign indicating that the checkbox is disabled\n * or can ever become interactable.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n The checkbox label.\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Optional helper text to display below the checkbox\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n The value of the checkbox. Set to `true` to make the checkbox checked.\n /\n @Prop({ reflect: true })\n public checked = false;\n\n /\n Enables indeterminate state. Set to `true` to signal indeterminate check.\n /\n @Prop({ reflect: true })\n public indeterminate = false;\n\n /\n Set to `true` to indicate that the checkbox must be checked.\n /\n @Prop({ reflect: true })\n public required: boolean = false;\n\n @State()\n private modified = false;\n\n /\n Emitted when the input value is changed.\n */\n @Event()\n private change: EventEmitter<boolean>;\n\n @Element()\n private limelCheckbox: HTMLLimelCheckboxElement;\n\n private formField: MDCFormField;\n private mdcCheckbox: MDCCheckbox;\n private id: string = createRandomString();\n private helperTextId: string = createRandomString();\n\n @Watch('checked')\n protected handleCheckedChange(newValue: boolean) {\n this.mdcCheckbox.checked = newValue;\n }\n\n @Watch('indeterminate')\n protected handleIndeterminateChange(newValue: boolean) {\n this.mdcCheckbox.checked = this.checked;\n this.mdcCheckbox.indeterminate = newValue;\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n public disconnectedCallback() {\n this.mdcCheckbox?.destroy();\n this.formField?.destroy();\n\n const checkboxElement = this.getCheckboxElement();\n if (checkboxElement) {\n checkboxElement.classList.remove(\n cssClasses.ANIM_CHECKED_INDETERMINATE,\n cssClasses.ANIM_CHECKED_UNCHECKED,\n cssClasses.ANIM_INDETERMINATE_CHECKED,\n cssClasses.ANIM_INDETERMINATE_UNCHECKED,\n cssClasses.ANIM_UNCHECKED_CHECKED,\n cssClasses.ANIM_UNCHECKED_INDETERMINATE\n );\n }\n }\n\n public render() {\n return (\n <CheckboxTemplate\n disabled={this.disabled \|\| this.readonly}\n label={this.label}\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n checked={this.checked \|\| this.indeterminate}\n indeterminate={this.indeterminate}\n required={this.required}\n readonly={this.readonly}\n invalid={this.~~required && this.modified && !this.checked~~}\n onChange={this.onChange}\n id={this.id}\n />\n );\n }\n\n private initialize = () => {\n const element =\n this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');\n if (!element) {\n return;\n }\n\n this.formField = new MDCFormField(element);\n this.mdcCheckbox = new MDCCheckbox(this.getCheckboxElement());\n this.formField.input = this.mdcCheckbox;\n };\n\n private getCheckboxElement = () => {\n return this.limelCheckbox.shadowRoot.querySelector('.mdc-checkbox');\n };\n\n private onChange = (event: Event) => {\n event.stopPropagation();\n this.change.emit(this.mdcCheckbox.checked);\n this.modified = true;\n };\n}\n"]}
1	+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCCheckbox, cssClasses } from '@material/checkbox';\nimport { MDCFormField } from '@material/form-field';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\n\n/*\n The Checkbox component is a classic and essential element in UI design that allows\n * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to\n * select one or more items from a list of choices.\n \n ## States of a Checkbox\n * When a user clicks or taps on the box, it toggles between two states:\n * Checked and Unchecked.\n \n However, a Checkbox can visualize a third state called the \"Indeterminate\" state.\n * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\n \n The Indeterminate state is typically used when dealing with checkbox groups\n * that have hierarchical relationships or when the group contains sub-items.\n * This state is used to indicate that that some, but not all, of the items in a group are selected.\n \n <limel-example-switch-vs-checkbox />\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n /\n@Component({\n tag: 'limel-checkbox',\n shadow: true,\n styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n /\n Disables the checkbox when `true`. Works exactly the same as `readonly`.\n * If either property is `true`, the checkbox will be disabled.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n * But shows no visual sign indicating that the checkbox is disabled\n * or can ever become interactable.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n Set to `true` to indicate that the current value is invalid.\n /\n @Prop({ reflect: true })\n public invalid: boolean;\n\n /\n The checkbox label.\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Optional helper text to display below the checkbox\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n The value of the checkbox. Set to `true` to make the checkbox checked.\n /\n @Prop({ reflect: true })\n public checked = false;\n\n /\n Enables indeterminate state. Set to `true` to signal indeterminate check.\n /\n @Prop({ reflect: true })\n public indeterminate = false;\n\n /\n Set to `true` to indicate that the checkbox must be checked.\n /\n @Prop({ reflect: true })\n public required: boolean = false;\n\n @State()\n private modified = false;\n\n /\n Emitted when the input value is changed.\n */\n @Event()\n private change: EventEmitter<boolean>;\n\n @Element()\n private limelCheckbox: HTMLLimelCheckboxElement;\n\n private formField: MDCFormField;\n private mdcCheckbox: MDCCheckbox;\n private id: string = createRandomString();\n private helperTextId: string = createRandomString();\n\n @Watch('checked')\n protected handleCheckedChange(newValue: boolean) {\n this.mdcCheckbox.checked = newValue;\n }\n\n @Watch('indeterminate')\n protected handleIndeterminateChange(newValue: boolean) {\n this.mdcCheckbox.checked = this.checked;\n this.mdcCheckbox.indeterminate = newValue;\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n public disconnectedCallback() {\n this.mdcCheckbox?.destroy();\n this.formField?.destroy();\n\n const checkboxElement = this.getCheckboxElement();\n if (checkboxElement) {\n checkboxElement.classList.remove(\n cssClasses.ANIM_CHECKED_INDETERMINATE,\n cssClasses.ANIM_CHECKED_UNCHECKED,\n cssClasses.ANIM_INDETERMINATE_CHECKED,\n cssClasses.ANIM_INDETERMINATE_UNCHECKED,\n cssClasses.ANIM_UNCHECKED_CHECKED,\n cssClasses.ANIM_UNCHECKED_INDETERMINATE\n );\n }\n }\n\n public render() {\n return (\n <CheckboxTemplate\n disabled={this.disabled \|\| this.readonly}\n label={this.label}\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n checked={this.checked \|\| this.indeterminate}\n indeterminate={this.indeterminate}\n required={this.required}\n readonly={this.readonly}\n invalid={this.isInvalid()}\n onChange={this.onChange}\n id={this.id}\n />\n );\n }\n\n private isInvalid = () => {\n if (this.invalid) {\n return true;\n }\n\n if (this.required && this.modified && !this.checked) {\n return true;\n }\n };\n\n private initialize = () => {\n const element =\n this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');\n if (!element) {\n return;\n }\n\n this.formField = new MDCFormField(element);\n this.mdcCheckbox = new MDCCheckbox(this.getCheckboxElement());\n this.formField.input = this.mdcCheckbox;\n };\n\n private getCheckboxElement = () => {\n return this.limelCheckbox.shadowRoot.querySelector('.mdc-checkbox');\n };\n\n private onChange = (event: Event) => {\n event.stopPropagation();\n this.change.emit(this.mdcCheckbox.checked);\n this.modified = true;\n };\n}\n"]}

package/dist/collection/components/file-viewer/file-viewer.js CHANGED Viewed

@@ -35,13 +35,13 @@ export class FileViewer {
     this.renderPdf = () => {
       return [
         h("div", { class: "action-menu-for-pdf-files" }, this.renderActionMenu()),
-        h("iframe", { src: this.fileUrl }),
+        h("iframe", { src: this.fileUrl, loading: "lazy" }),
       ];
     };
     this.renderImage = () => {
       return [
         this.renderButtons(),
-        h("img", { src: this.fileUrl, alt: this.alt }),
+        h("img", { src: this.fileUrl, alt: this.alt, loading: "lazy" }),
       ];
     };
     this.renderVideo = () => {
@@ -59,7 +59,7 @@ export class FileViewer {
     this.renderOffice = () => {
       return [
         h("div", { class: "action-menu-for-office-files" }, this.renderActionMenu()),
-        h("iframe", { src: this.getOfficeViewerUrl() + this.fileUrl + '&embedded=true', frameborder: "0" }),
+        h("iframe", { src: this.getOfficeViewerUrl() + this.fileUrl + '&embedded=true', loading: "lazy" }),
       ];
     };
     this.isOfficeFileAccessibleViaURL = () => {

package/dist/collection/components/file-viewer/file-viewer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-viewer.js","sourceRoot":"","sources":["../../../src/components/file-viewer/file-viewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { Languages, ListItem } from '@limetech/lime-elements';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\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 * @exampleComponent limel-example-file-viewer\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 * @private\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} />,\n ];\n };\n\n private renderImage = () => {\n return [\n this.renderButtons(),\n <img src={this.fileUrl} alt={this.alt} />,\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 ];\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 frameborder=\"0\"\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\">\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: CustomEvent<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"]}
1	+ {"version":3,"file":"file-viewer.js","sourceRoot":"","sources":["../../../src/components/file-viewer/file-viewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { Languages, ListItem } from '@limetech/lime-elements';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\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 * @exampleComponent limel-example-file-viewer\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 * @private\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 ];\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\">\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: CustomEvent<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"]}

package/dist/collection/components/switch/switch.js CHANGED Viewed

@@ -34,6 +34,7 @@ export class Switch {
     this.label = undefined;
     this.disabled = false;
     this.readonly = false;
+    this.invalid = undefined;
     this.value = false;
     this.helperText = undefined;
     this.fieldId = createRandomString();
@@ -140,6 +141,23 @@ export class Switch {
         "reflect": true,
         "defaultValue": "false"
       },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to indicate that the current value is invalid."
+        },
+        "attribute": "invalid",
+        "reflect": true
+      },
       "value": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/switch/switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,+BAA+B,CAAC;AAEvC;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,MAAM;;~~IA4CP~~,iBAAY,GAAW,kBAAkB,EAAE,CAAC;IAmG5C,qBAAgB,GAAG,GAAG,EAAE;MAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;QACvB,OAAO;OACV;MAED,OAAO,CACH,yBACI,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,GAC7B,CACL,CAAC;IACN,CAAC,CAAC;IAEM,kBAAa,GAAG,GAAG,EAAE;MACzB,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,CAAC;IACrE,CAAC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;;~~oBArJgB~~,KAAK;oBAQL,KAAK~~;iBAMR~~,KAAK;;mBAmBF,kBAAkB,EAAE;;EAI/B,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAClC,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC9C,aAAa,CACK,CAAC;IACvB,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;EAC5C,CAAC;EAEM,oBAAoB;;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChC,MAAA,IAAI,CAAC,SAAS,0CAAE,OAAO,EAAE,CAAC;EAC9B,CAAC;EAEM,MAAM;IACT,OAAO,CACH,EAAC,IAAI;MACD,cACI,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE;UACH,YAAY,EAAE,IAAI;UAClB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;UACtC,wBAAwB,EAAE,CAAC,IAAI,CAAC,KAAK;UACrC,sBAAsB,EAAE,IAAI,CAAC,KAAK;SACrC,EACD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,KAAK,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,OAAO,EAAE,IAAI,CAAC,WAAW,mBACV,IAAI,CAAC,YAAY;QAEhC,WAAK,KAAK,EAAC,mBAAmB,GAAG;QACjC,WAAK,KAAK,EAAC,0BAA0B;UACjC,WAAK,KAAK,EAAC,oBAAoB;YAC3B,WAAK,KAAK,EAAC,oBAAoB;cAC3B,WAAK,KAAK,EAAC,uBAAuB,GAAO,CACvC;YACN,WAAK,KAAK,EAAC,oBAAoB,GAAO;YACtC,WAAK,KAAK,EAAC,mBAAmB;cAC1B,WACI,KAAK,EAAC,uCAAuC,EAC7C,OAAO,EAAC,WAAW;gBAEnB,YAAM,CAAC,EAAC,qEAAqE,GAAG,CAC9E;cACN,WACI,KAAK,EAAC,wCAAwC,EAC9C,OAAO,EAAC,WAAW;gBAEnB,YAAM,CAAC,EAAC,mBAAmB,GAAG,CAC5B,CACJ,CACJ,CACJ,CACD;MACT,aACI,KAAK,EAAE,GACH,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAClD,EAAE,EACF,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,KAAK,CACP;MACP,IAAI,CAAC,gBAAgB,EAAE,CACrB,CACV,CAAC;EACN,CAAC;EAGS,YAAY,CAAC,QAAiB;IACpC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO;KACV;IAED,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,QAAQ,CAAC;EACvC,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CAuBJ","sourcesContent":["import { MDCSwitch } from '@material/switch';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/*\n The Switch component is a fundamental element in UI design that serves as a toggle switch\n * to control the state of a specific setting or option in an application or website.\n * The two distinct positions of the Switch are visually indicative of the two states:\n * ON and OFF; making it easy for users to understand the current state of the controlled feature.\n \n The Switch component is widely used in user interfaces to enable users to\n * quickly and intuitively change binary settings.\n \n <limel-example-switch-vs-checkbox />\n * @exampleComponent limel-example-switch\n * @exampleComponent limel-example-switch-helper-text\n /\n@Component({\n tag: 'limel-switch',\n shadow: true,\n styleUrl: 'switch.scss',\n})\nexport class Switch {\n /\n Label to display next to the switch\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Disables the switch when `true`,\n * and visually shows that the switch is editable but disabled.\n * This tells the users that if certain requirements are met,\n * the switch may become interactable.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Disables the switch when `true`. This visualizes the switch slightly differently.\n * But shows no visual sign indicating that the switch is disabled\n * or can ever become interactable.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n The value of the switch\n /\n @Prop({ reflect: true })\n public value = false;\n\n /\n Optional helper text to display below the switch\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Emitted when the value has changed\n */\n @Event()\n private change: EventEmitter<boolean>;\n\n @Element()\n private host: HTMLLimelSwitchElement;\n private helperTextId: string = createRandomString();\n\n @State()\n private fieldId = createRandomString();\n\n private mdcSwitch: MDCSwitch;\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private initialize() {\n const element = this.host.shadowRoot.querySelector(\n '.mdc-switch'\n ) as HTMLButtonElement;\n if (!element) {\n return;\n }\n\n this.mdcSwitch = new MDCSwitch(element);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n this.mdcSwitch?.destroy();\n }\n\n public render() {\n return (\n <Host>\n <button\n id={this.fieldId}\n class={{\n 'mdc-switch': true,\n 'lime-switch--readonly': this.readonly,\n 'mdc-switch--unselected': !this.value,\n 'mdc-switch--selected': this.value,\n }}\n type=\"button\"\n role=\"switch\"\n aria-checked={this.value}\n disabled={this.disabled \|\| this.readonly}\n onClick={this.handleClick}\n aria-controls={this.helperTextId}\n >\n <div class=\"mdc-switch__track\" />\n <div class=\"mdc-switch__handle-track\">\n <div class=\"mdc-switch__handle\">\n <div class=\"mdc-switch__shadow\">\n <div class=\"mdc-elevation-overlay\"></div>\n </div>\n <div class=\"mdc-switch__ripple\"></div>\n <div class=\"mdc-switch__icons\">\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--on\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n </svg>\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--off\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M20 13H4v-2h16v2z\" />\n </svg>\n </div>\n </div>\n </div>\n </button>\n <label\n class={`${\n this.disabled \|\| this.readonly ? 'disabled' : ''\n }`}\n htmlFor={this.fieldId}\n >\n {this.label}\n </label>\n {this.renderHelperLine()}\n </Host>\n );\n }\n\n @Watch('value')\n protected valueWatcher(newValue: boolean) {\n if (!this.mdcSwitch) {\n return;\n }\n\n this.mdcSwitch.selected = newValue;\n }\n\n private renderHelperLine = () => {\n if (!this.hasHelperText()) {\n return;\n }\n\n return (\n <limel-helper-line\n helperTextId={this.helperTextId}\n helperText={this.helperText}\n />\n );\n };\n\n private hasHelperText = () => {\n return this.helperText !== null && this.helperText !== undefined;\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.change.emit(!this.value);\n };\n}\n"]}
1	+ {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCSwitch } from '@material/switch';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/*\n The Switch component is a fundamental element in UI design that serves as a toggle switch\n * to control the state of a specific setting or option in an application or website.\n * The two distinct positions of the Switch are visually indicative of the two states:\n * ON and OFF; making it easy for users to understand the current state of the controlled feature.\n \n The Switch component is widely used in user interfaces to enable users to\n * quickly and intuitively change binary settings.\n \n <limel-example-switch-vs-checkbox />\n * @exampleComponent limel-example-switch\n * @exampleComponent limel-example-switch-helper-text\n /\n@Component({\n tag: 'limel-switch',\n shadow: true,\n styleUrl: 'switch.scss',\n})\nexport class Switch {\n /\n Label to display next to the switch\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Disables the switch when `true`,\n * and visually shows that the switch is editable but disabled.\n * This tells the users that if certain requirements are met,\n * the switch may become interactable.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Disables the switch when `true`. This visualizes the switch slightly differently.\n * But shows no visual sign indicating that the switch is disabled\n * or can ever become interactable.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n Set to `true` to indicate that the current value is invalid.\n /\n @Prop({ reflect: true })\n public invalid: boolean;\n\n /\n The value of the switch\n /\n @Prop({ reflect: true })\n public value = false;\n\n /\n Optional helper text to display below the switch\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Emitted when the value has changed\n */\n @Event()\n private change: EventEmitter<boolean>;\n\n @Element()\n private host: HTMLLimelSwitchElement;\n private helperTextId: string = createRandomString();\n\n @State()\n private fieldId = createRandomString();\n\n private mdcSwitch: MDCSwitch;\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private initialize() {\n const element = this.host.shadowRoot.querySelector(\n '.mdc-switch'\n ) as HTMLButtonElement;\n if (!element) {\n return;\n }\n\n this.mdcSwitch = new MDCSwitch(element);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n this.mdcSwitch?.destroy();\n }\n\n public render() {\n return (\n <Host>\n <button\n id={this.fieldId}\n class={{\n 'mdc-switch': true,\n 'lime-switch--readonly': this.readonly,\n 'mdc-switch--unselected': !this.value,\n 'mdc-switch--selected': this.value,\n }}\n type=\"button\"\n role=\"switch\"\n aria-checked={this.value}\n disabled={this.disabled \|\| this.readonly}\n onClick={this.handleClick}\n aria-controls={this.helperTextId}\n >\n <div class=\"mdc-switch__track\" />\n <div class=\"mdc-switch__handle-track\">\n <div class=\"mdc-switch__handle\">\n <div class=\"mdc-switch__shadow\">\n <div class=\"mdc-elevation-overlay\"></div>\n </div>\n <div class=\"mdc-switch__ripple\"></div>\n <div class=\"mdc-switch__icons\">\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--on\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n </svg>\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--off\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M20 13H4v-2h16v2z\" />\n </svg>\n </div>\n </div>\n </div>\n </button>\n <label\n class={`${\n this.disabled \|\| this.readonly ? 'disabled' : ''\n }`}\n htmlFor={this.fieldId}\n >\n {this.label}\n </label>\n {this.renderHelperLine()}\n </Host>\n );\n }\n\n @Watch('value')\n protected valueWatcher(newValue: boolean) {\n if (!this.mdcSwitch) {\n return;\n }\n\n this.mdcSwitch.selected = newValue;\n }\n\n private renderHelperLine = () => {\n if (!this.hasHelperText()) {\n return;\n }\n\n return (\n <limel-helper-line\n helperTextId={this.helperTextId}\n helperText={this.helperText}\n />\n );\n };\n\n private hasHelperText = () => {\n return this.helperText !== null && this.helperText !== undefined;\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.change.emit(!this.value);\n };\n}\n"]}

package/dist/esm/lime-elements.js CHANGED Viewed

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

package/dist/esm/limel-checkbox.entry.js CHANGED Viewed

@@ -737,6 +737,14 @@ const Checkbox = class {
     this.change = createEvent(this, "change", 7);
     this.id = createRandomString();
     this.helperTextId = createRandomString();
+    this.isInvalid = () => {
+      if (this.invalid) {
+        return true;
+      }
+      if (this.required && this.modified && !this.checked) {
+        return true;
+      }
+    };
     this.initialize = () => {
       const element = this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');
       if (!element) {
@@ -756,6 +764,7 @@ const Checkbox = class {
     };
     this.disabled = false;
     this.readonly = false;
+    this.invalid = undefined;
     this.label = undefined;
     this.helperText = undefined;
     this.checked = false;
@@ -786,7 +795,7 @@ const Checkbox = class {
     }
   }
   render() {
-    return (h(CheckboxTemplate, { disabled: this.disabled || this.readonly, label: this.label, helperText: this.helperText, helperTextId: this.helperTextId, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.required && this.modified && !this.checked, onChange: this.onChange, id: this.id }));
+    return (h(CheckboxTemplate, { disabled: this.disabled || this.readonly, label: this.label, helperText: this.helperText, helperTextId: this.helperTextId, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.isInvalid(), onChange: this.onChange, id: this.id }));
   }
   get limelCheckbox() { return getElement(this); }
   static get watchers() { return {