@limetech/lime-elements 37.1.0-next.53 → 37.1.0-next.55

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["limel-color-picker.cjs",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-action-bar.cjs",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["limel-dock.cjs",[[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-file-viewer.cjs",[[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]}]]],["limel-picker.cjs",[[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],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-split-button.cjs",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker.cjs",[[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.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-helper-line.cjs",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["limel-select.cjs",[[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-breadcrumbs.cjs",[[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-info-tile.cjs",[[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.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-table.cjs",[[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-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut.cjs",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout.cjs",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["limel-slider.cjs",[[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.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"helperText":[513,"helper-text"],"fieldId":[32]}]]],["limel-code-editor.cjs",[[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.cjs",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container.cjs",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form.cjs",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-markdown.cjs",[[1,"limel-markdown",{"value":[1]}]]],["limel-portal.cjs",[[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.cjs",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-dock-button.cjs",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-action-bar-item_2.cjs",[[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.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[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.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-button.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-list.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-menu-surface.cjs",[[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[520]}]]],["limel-menu_2.cjs",[[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"]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-tooltip_2.cjs",[[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]}]]]], options);
+  return index.bootstrapLazy([["limel-color-picker.cjs",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-action-bar.cjs",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["limel-dock.cjs",[[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-file-viewer.cjs",[[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]}]]],["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-split-button.cjs",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker.cjs",[[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.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-helper-line.cjs",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["limel-select.cjs",[[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-breadcrumbs.cjs",[[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-info-tile.cjs",[[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.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-table.cjs",[[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-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut.cjs",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout.cjs",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["limel-slider.cjs",[[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.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"helperText":[513,"helper-text"],"fieldId":[32]}]]],["limel-code-editor.cjs",[[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.cjs",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container.cjs",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form.cjs",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-markdown.cjs",[[1,"limel-markdown",{"value":[1]}]]],["limel-portal.cjs",[[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.cjs",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-dock-button.cjs",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-action-bar-item_2.cjs",[[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.cjs",[[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.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-button.cjs",[[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.cjs",[[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.cjs",[[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.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-list.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-menu-surface.cjs",[[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[520]}]]],["limel-menu_2.cjs",[[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"]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-tooltip_2.cjs",[[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]}]]]], options);
   });
 };
 

package/dist/collection/components/chip-set/chip-set.js

@@ -55,6 +55,7 @@ export class ChipSet {
     this.helperText = undefined;
     this.disabled = false;
     this.readonly = false;
+    this.invalid = false;
     this.inputType = 'text';
     this.maxItems = undefined;
     this.required = false;
@@ -224,6 +225,13 @@ export class ChipSet {
     return !!this.maxItems && this.value.length >= this.maxItems;
   }
   isInvalid() {
+    if (this.readonly) {
+      // A readonly field can never be invalid.
+      return false;
+    }
+    if (this.invalid) {
+      return true;
+    }
     if (!this.required) {
       return false;
     }
@@ -513,6 +521,24 @@ export class ChipSet {
         "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 of the input field is\ninvalid."
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "inputType": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/chip-set/chip-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip-set.js","sourceRoot":"","sources":["../../../src/components/chip-set/chip-set.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,UAAU,GACb,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AACjD,MAAM,oBAAoB,GAAG,CAAC,CAAC;AAE/B;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,OAAO;EA8JhB;IAFQ,kBAAa,GAAG,mBAAmB,CAAC;IAgOpC,gCAA2B,GAAG,GAAG,EAAE;MACvC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAC1C,OAAO,CACH,YAAM,KAAK,EAAC,2DAA2D,aAEhE,CACV,CAAC;OACL;IACL,CAAC,CAAC;IAuBM,oBAAe,GAAG,GAAG,EAAE;MAC3B,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;QACvD,OAAO,IAAI,CAAC;OACf;IACL,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAW,EAAE;MAC/B,OAAO,SAAS,CAAC,GAAG,CAAC,yBAAyB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnE,CAAC,CAAC;IAqJM,kBAAa,GAAG,GAAG,EAAE;MACzB,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,CAAC;IACrE,CAAC,CAAC;IAEM,qBAAgB,GAAG,GAAG,EAAE;MAC5B,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;QACzC,OAAO;OACV;MAED,OAAO,CACH,yBACI,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,GAC3B,CACL,CAAC;IACN,CAAC,CAAC;IAwIM,uBAAkB,GAAG,GAAW,EAAE;MACtC,OAAO,SAAS,CAAC,GAAG,CAAC,oBAAoB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9D,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAW,EAAE;MACnC,OAAO,SAAS,CAAC,GAAG,CAAC,sBAAsB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChE,CAAC,CAAC;iBAltBqB,EAAE;;;;oBAmCE,KAAK;oBASL,KAAK;qBAOM,MAAM;;oBAajB,KAAK;;4BAYG,IAAI;0BAMN,IAAI;uBAOR,IAAI;qBAMN,IAAI;oBAOF,IAAI;oBAoCL,KAAK;qBAGL,EAAE;mBAGH,KAAK;kCAGS,IAAI;IAOzC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrC,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,IAAI,CAAC,wBAAwB;MACzB,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC1D;EAED;;;KAGG;EAEI,KAAK,CAAC,WAAW;IACpB,OAAO,IAAI,CAAC,QAAQ,CAAC;EACzB,CAAC;EAED;;;;KAIG;EAEI,KAAK,CAAC,QAAQ,CAAC,aAAsB,KAAK;IAC7C,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;MAChC,OAAO;KACV;IAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACrB,IAAI,UAAU,EAAE;MACZ,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;KACvB;IAED,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC;IACpD,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;EAC1B,CAAC;EAED;;;;KAIG;EAEI,KAAK,CAAC,UAAU;IACnB,IAAI,CAAC,cAAc,EAAE,CAAC;EAC1B,CAAC;EAEM,gBAAgB;IACnB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;MACvB,IAAI,CAAC,YAAY,GAAG,IAAI,YAAY,CAChC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CACxD,CAAC;KACL;IAED,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC5B,CAAC;EAEM,mBAAmB;IACtB,IAAI,CAAC,iBAAiB,EAAE,CAAC;EAC7B,CAAC;EAEM,kBAAkB;IACrB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxB,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC1D,IAAI,KAAK,IAAI,IAAI,CAAC,QAAQ,EAAE;MACxB,KAAK,CAAC,KAAK,EAAE,CAAC;KACjB;EACL,CAAC;EAEM,oBAAoB;IACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAEzB,IAAI,IAAI,CAAC,YAAY,EAAE;MACnB,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;KAC/B;EACL,CAAC;EAEM,MAAM;IACT,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;MACvB,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAClC;IAED,MAAM,OAAO,GAAG;MACZ,cAAc,EAAE,IAAI;MACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;MACxC,oCAAoC,EAAE,IAAI;KAC7C,CAAC;IACF,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,OAAO,CAAC,iBAAiB,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;KAChD;IAED,MAAM,YAAY,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC/C,IAAI,YAAY,EAAE;MACd,OAAO,CAAC,sBAAsB,CAAC,GAAG,IAAI,CAAC;KAC1C;IAED,OAAO,CACH,WAAK,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,MAAM;MAC3B,YAAY;MACZ,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;MAC/B,IAAI,CAAC,gBAAgB,EAAE,CACtB,CACT,CAAC;EACN,CAAC;EAGS,iBAAiB,CAAC,QAAgB,EAAE,QAAgB;IAC1D,IAAI,OAAO,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE;MAC7B,OAAO;KACV;IAED,IAAI,CAAC,cAAc,EAAE,CAAC;EAC1B,CAAC;EAEO,gBAAgB;IACpB,IAAI,CAAC,UAAU,GAAG,IAAI,UAAU,CAC5B,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CACtD,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;MACrC,IAAI,CAAC,UAAU,CAAC,MAAM,CAClB,qBAAqB,EACrB,IAAI,CAAC,sBAAsB,CAC9B,CAAC;KACL;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAClD,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,mBAAmB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KACrE;EACL,CAAC;EAEO,iBAAiB;IACrB,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,IAAI,CAAC,UAAU,CAAC,QAAQ,CACpB,qBAAqB,EACrB,IAAI,CAAC,sBAAsB,CAC9B,CAAC;MACF,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,mBAAmB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;MAEpE,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;KAC7B;EACL,CAAC;EAEO,kBAAkB;IACtB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,CACH,aAAO,KAAK,EAAC,oEAAoE,IAC5E,IAAI,CAAC,KAAK,CACP,CACX,CAAC;EACN,CAAC;EAEO,gBAAgB;IACpB,OAAO;MACH,WACI,KAAK,EAAE;UACH,yCAAyC,EAAE,IAAI;UAC/C,kCAAkC,EAAE,IAAI;UACxC,eAAe,EAAE,IAAI,CAAC,SAAS,EAAE;UACjC,0BAA0B,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;UAC1D,2BAA2B,EAAE,IAAI,CAAC,QAAQ;UAC1C,0CAA0C,EACtC,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;UAC3B,kBAAkB,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI;UAC7C,sBAAsB,EAAE,IAAI,CAAC,cAAc;SAC9C,EACD,OAAO,EAAE,IAAI,CAAC,oBAAoB;QAEjC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;QACrC,aACI,QAAQ,EAAE,oBAAoB,EAC9B,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,EAAE,EAAC,eAAe,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,KAAK,EAAE;YACH,uBAAuB,EAAE,IAAI;YAC7B,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE;WAC7B,EACD,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,eAAe;UAC7B,uEAAuE;UACvE,yEAAyE;UACzE,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EACjC,WAAW,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAClD,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,GACzB;QACF,WACI,KAAK,EAAE;YACH,qBAAqB,EAAE,IAAI;YAC3B,+BAA+B,EAAE,IAAI;YACrC,0BAA0B,EAAE,IAAI,CAAC,QAAQ;YACzC,+BAA+B,EAAE,IAAI,CAAC,eAAe,EAAE;WAC1D,kBACa,IAAI,CAAC,WAAW,EAAE;UAEhC,WAAK,KAAK,EAAC,8BAA8B,GAAG;UAC3C,IAAI,CAAC,WAAW,EAAE;UACnB,WAAK,KAAK,EAAC,+BAA+B,GAAG,CAC3C;QACL,IAAI,CAAC,iBAAiB,EAAE;QACxB,IAAI,CAAC,2BAA2B,EAAE;QAClC,IAAI,CAAC,yBAAyB,EAAE,CAC/B;MACN,IAAI,CAAC,gBAAgB,EAAE;KAC1B,CAAC;EACN,CAAC;EAYO,WAAW;IACf,MAAM,cAAc,GAAG;MACnB,oBAAoB,EAAE,IAAI;MAC1B,0BAA0B,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;MAC1D,8BAA8B,EAAE,IAAI,CAAC,QAAQ;MAC7C,kCAAkC,EAAE,IAAI,CAAC,eAAe,EAAE;KAC7D,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,CACH,WAAK,KAAK,EAAC,4BAA4B;MACnC,aAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAC,eAAe,IAChD,IAAI,CAAC,KAAK,CACP,CACN,CACT,CAAC;EACN,CAAC;EAYO,MAAM;IACV,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC;EACjE,CAAC;EAEO,SAAS;IACb,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAChB,OAAO,KAAK,CAAC;KAChB;IAED,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACf,OAAO,KAAK,CAAC;KAChB;IAED,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;EAC7C,CAAC;EAEO,kBAAkB,CAAC,KAAK;IAC5B,KAAK,CAAC,eAAe,EAAE,CAAC;EAC5B,CAAC;EAED;;;KAGG;EACK,oBAAoB;IACxB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;MAChC,OAAO;KACV;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO;KACV;IAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;EAC1B,CAAC;EAED;;;;KAIG;EACK,eAAe;IACnB,IAAI,IAAI,CAAC,gBAAgB,EAAE;MACvB,IAAI,CAAC,cAAc,EAAE,CAAC;KACzB;IAED,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;IAEnC,qEAAqE;IACrE,UAAU,CAAC,GAAG,EAAE;MACZ,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,CAAC,CAAC;EACV,CAAC;EAEO,cAAc;IAClB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;EACxB,CAAC;EAEO,WAAW;IACf,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC;KACxB;IAED,sEAAsE;IACtE,sEAAsE;IACtE,wEAAwE;IACxE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;EAC/C,CAAC;EAEO,eAAe,CAAC,KAAK;IACzB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;IACnC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IACpC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;EACrE,CAAC;EAEO,sBAAsB,CAAC,KAA8B;IACzD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;MAClC,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;IAChD,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;EAC/B,CAAC;EAEO,eAAe,CAAC,IAAU;IAC9B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAEO,eAAe,CAAC,KAA4B;IAChD,IAAI,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;MAChC,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;IAChD,CAAC,CAAC,CAAC;IACH,IAAI,mCAAQ,IAAI,KAAE,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ,GAAE,CAAC;IACpD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC3B,CAAC;EAEO,UAAU,CAAC,EAAmB;IAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;MACxC,OAAO,GAAG,IAAI,CAAC,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,CAAC;IACpC,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EAC/B,CAAC;EAEO,UAAU,CAAC,IAAU;IACzB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MACxB,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;KACtC;IAED,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;EACxC,CAAC;EAEO,iBAAiB,CAAC,IAAU;IAChC,OAAO,CACH,WACI,KAAK,EAAE,YAAY,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE,EAC7D,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,EAAE;MAEf,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI;MAC5C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAC5C,CACT,CAAC;EACN,CAAC;EAEO,eAAe,CAAC,IAAe;IACnC,MAAM,UAAU,GAAQ,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,UAAU,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MACrC,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC5C;IAED,OAAO,CACH,YAAM,IAAI,EAAC,UAAU;MACjB,uBACI,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EACpC,KAAK,EAAC,gBAAgB,IAClB,UAAU,GAEb,IAAI,CAAC,IAAI,CACV,CACD,CACV,CAAC;EACN,CAAC;EAqBO,gBAAgB,CAAC,IAAU;IAC/B,OAAO,CACH,WACI,KAAK,EAAE,YAAY,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE,EAC7D,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,EAAE;MAEhB,YAAM,KAAK,EAAC,qBAAqB;QAC7B,WAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAC,aAAa;UACtD,YACI,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,CAAC,EAAC,kCAAkC,GACtC,CACA,CACH;MACP,YAAM,IAAI,EAAC,UAAU;QACjB,YACI,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,kBACvB,OAAO,EACpB,KAAK,EAAC,gBAAgB,IAErB,IAAI,CAAC,IAAI,CACP,CACJ;MACN,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CACrB,CACT,CAAC;EACN,CAAC;EAEO,eAAe,CAAC,IAAU,EAAE,KAAa;IAC7C,OAAO;MACH,WACI,KAAK,EAAE;UACH,UAAU,EAAE,IAAI;UAChB,oBAAoB,EAAE,IAAI,CAAC,sBAAsB,KAAK,KAAK;UAC3D,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,EACD,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,EAAE,EAChB,OAAO,EAAE,IAAI,CAAC,oBAAoB;QAEjC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI;QAC5C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;QAC1B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,CAChC;MACN,IAAI,CAAC,eAAe,EAAE;KACzB,CAAC;EACN,CAAC;EAEO,oBAAoB,CAAC,KAAK;IAC9B,KAAK,CAAC,eAAe,EAAE,CAAC;EAC5B,CAAC;EAEO,cAAc,CAAC,IAAU;IAC7B,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,IAAI,IAAI,CAAC,aAAa,EAAE;MACpB,KAAK,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC;KAC9C;IAED,IAAI,IAAI,CAAC,mBAAmB,EAAE;MAC1B,KAAK,CAAC,yBAAyB,CAAC,GAAG,IAAI,CAAC,mBAAmB,CAAC;KAC/D;IAED,OAAO,CACH,kBACI,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,IAAI,CAAC,SAAS,GACvB,CACL,CAAC;EACN,CAAC;EAEO,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACnB,OAAO;KACV;IAED,OAAO,CACH,SAAG,KAAK,EAAC,kCAAkC;MACvC,kBAAY,IAAI,EAAE,IAAI,CAAC,WAAW,GAAI,CACtC,CACP,CAAC;EACN,CAAC;EAEO,sBAAsB,CAAC,IAAU;IACrC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;MACnD,OAAO;KACV;IAED,MAAM,OAAO,GAAG;;;OAGjB,CAAC;IAEA,MAAM,UAAU,GAAG,CAAC,KAAiB,EAAE,EAAE;MACrC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACH,cACI,KAAK,EAAC,6EAA6E,gBACvE,IAAI,CAAC,eAAe,EAChC,QAAQ,EAAC,IAAI,EACb,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,UAAU,GACrB,CACL,CAAC;EACN,CAAC;EAEO,yBAAyB;IAC7B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACxD,OAAO;KACV;IAED,OAAO,CACH,SACI,IAAI,EAAC,EAAE,EACP,OAAO,EAAE,IAAI,CAAC,wBAAwB,EACtC,KAAK,EAAC,uCAAuC,EAC7C,QAAQ,EAAC,GAAG,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,gBACpB,IAAI,CAAC,kBAAkB,EAAE,GACvC,CACL,CAAC;EACN,CAAC;EAUO,wBAAwB,CAAC,KAAY;IACzC,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EACzB,CAAC;EAEO,eAAe;IACnB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO;KACV;IAED,OAAO,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,SAAS,CAAO,CAAC;EACzD,CAAC;EAEO,WAAW,CAAC,IAAU;IAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,mBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;EAC9C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Chip, Languages } from '../../interface';\nimport {\n    MDCChipInteractionEvent,\n    MDCChipSelectionEvent,\n    MDCChipSet,\n} from '@material/chips/deprecated';\nimport { MDCTextField } from '@material/textfield';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Method,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { handleKeyboardEvent } from './chip-set-input-helpers';\nimport translate from '../../global/translations';\nimport { getHref, getTarget } from '../../util/link-helper';\nimport { isEqual } from 'lodash-es';\n\nconst SELECTED_CHIP_CLASS = 'mdc-chip--selected';\nconst INPUT_FIELD_TABINDEX = 1;\n\n/**\n * @exampleComponent limel-example-chip-set\n * @exampleComponent limel-example-chip-set-choice\n * @exampleComponent limel-example-chip-set-filter\n * @exampleComponent limel-example-chip-set-filter-badge\n * @exampleComponent limel-example-chip-set-input\n * @exampleComponent limel-example-chip-set-input-type-text\n * @exampleComponent limel-example-chip-set-input-type-search\n * @exampleComponent limel-example-chip-icon-color\n * @exampleComponent limel-example-chip-set-composite\n */\n@Component({\n    tag: 'limel-chip-set',\n    shadow: true,\n    styleUrl: 'chip-set.scss',\n})\nexport class ChipSet {\n    /**\n     * List of chips for the set\n     */\n    @Prop()\n    public value: Chip[] = [];\n\n    /**\n     * Type of chip set\n     *\n     * - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n     * - `filter` renders a set of selectable chips where all are selectable. The `icon` property is ignored\n     * - `input` renders a set of chips that can be used in conjunction with an input field\n     *\n     * If no type is set, a basic set of chips without additional functionality will be rendered\n     */\n    @Prop({ reflect: true })\n    public type?: 'choice' | 'filter' | 'input';\n\n    /**\n     * Label for the chip-set\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the chipset.\n     * When type is `input`, the helper text is displayed below the\n     * input field when it has focus.\n     * When type is not `input`, the helper text is always displayed\n     * if the device is touch screen; otherwise it is shown when chip-set\n     * is hovered or focused using keyboard navigation.\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * True if the chip set should be disabled\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * For chip-sets of type `input`, set to `true` to disable adding and\n     * removing chips, but allow interaction with existing chips in the set.\n     * For any other types, setting either `readonly` or `disabled` disables\n     * the chip-set.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * For chip-sets of type `input`. Value to use for the `type` attribute on the\n     * input field inside the chip-set.\n     */\n    @Prop({ reflect: true })\n    public inputType: 'search' | 'text' = 'text';\n\n    /**\n     * For chip-sets of type `input`. Limits the maximum number of chips.\n     * When the value is `0` or not set, no limit is applied.\n     */\n    @Prop({ reflect: true })\n    public maxItems: number;\n\n    /**\n     * True if the control requires a value\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * Search label to display when type is `input` and component is in search mode\n     */\n    @Prop({ reflect: true })\n    public searchLabel: string;\n\n    /**\n     * Whether the input field should be emptied when the chip-set loses focus.\n     */\n    @Prop({ reflect: true })\n    public emptyInputOnBlur: boolean = true;\n\n    /**\n     * Whether the \"Clear all\" buttons should be shown\n     */\n    @Prop()\n    public clearAllButton: boolean = true;\n\n    /**\n     * For chip-sets of type `input`. When the value is null, no leading icon is used.\n     * Leading icon to show to the far left in the text field\n     */\n    @Prop({ reflect: true })\n    public leadingIcon: string = null;\n\n    /**\n     * For chip-set of type `input`. Sets delimiters between chips.\n     */\n    @Prop({ reflect: true })\n    public delimiter: string = null;\n\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components. For example, the clear all chips label.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Dispatched when a chip is interacted with\n     */\n    @Event()\n    private interact: EventEmitter<Chip>;\n\n    /**\n     * Dispatched when a chip is selected/deselected\n     */\n    @Event()\n    private change: EventEmitter<Chip | Chip[]>;\n\n    /**\n     * Emitted when an input chip set has received focus and editing in the text field has started\n     */\n    @Event()\n    private startEdit: EventEmitter<void>;\n\n    /**\n     * Emitted when an input chip set has lost focus and editing in the text field has ended\n     */\n    @Event()\n    private stopEdit: EventEmitter<void>;\n\n    /**\n     * Dispatched when the input is changed for type `input`\n     */\n    @Event()\n    private input: EventEmitter<string>;\n\n    @Element()\n    private host: HTMLLimelChipSetElement;\n\n    @State()\n    private editMode: boolean = false;\n\n    @State()\n    private textValue: string = '';\n\n    @State()\n    private blurred: boolean = false;\n\n    @State()\n    private inputChipIndexSelected: number = null;\n\n    private mdcChipSet: MDCChipSet;\n    private mdcTextField: MDCTextField;\n    private handleKeyDown = handleKeyboardEvent;\n\n    constructor() {\n        this.renderChip = this.renderChip.bind(this);\n        this.renderInputChip = this.renderInputChip.bind(this);\n        this.isFull = this.isFull.bind(this);\n        this.handleInteractionEvent = this.handleInteractionEvent.bind(this);\n        this.handleSelection = this.handleSelection.bind(this);\n        this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);\n        this.handleInputBlur = this.handleInputBlur.bind(this);\n        this.handleTextInput = this.handleTextInput.bind(this);\n        this.inputFieldOnChange = this.inputFieldOnChange.bind(this);\n        this.handleKeyDown = this.handleKeyDown.bind(this);\n        this.inputHidden = this.inputHidden.bind(this);\n        this.handleDeleteAllIconClick =\n            this.handleDeleteAllIconClick.bind(this);\n        this.renderDelimiter = this.renderDelimiter.bind(this);\n    }\n\n    /**\n     * Used to find out whether the chip-set is in edit mode.\n     * @returns {Promise<boolean>} `true` if the chip-set is in edit mode, `false` otherwise.\n     */\n    @Method()\n    public async getEditMode(): Promise<boolean> {\n        return this.editMode;\n    }\n\n    /**\n     * Used to set focus to the chip-set input field.\n     * @param {boolean} emptyInput if `true`, any text in the input is discarded\n     * @returns {Promise<void>} does not return anything, but methods have to be async\n     */\n    @Method()\n    public async setFocus(emptyInput: boolean = false) {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        this.editMode = true;\n        if (emptyInput) {\n            this.textValue = '';\n        }\n\n        this.host.shadowRoot.querySelector('input').focus();\n        this.startEdit.emit();\n    }\n\n    /**\n     * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the\n     * consumer control when the input is emptied.\n     * @returns {Promise<void>} does not return anything, but methods have to be async\n     */\n    @Method()\n    public async emptyInput() {\n        this.syncEmptyInput();\n    }\n\n    public componentDidLoad() {\n        if (this.type === 'input') {\n            this.mdcTextField = new MDCTextField(\n                this.host.shadowRoot.querySelector('.mdc-text-field')\n            );\n        }\n\n        this.createMDCChipSet();\n    }\n\n    public componentWillUpdate() {\n        this.destroyMDCChipSet();\n    }\n\n    public componentDidUpdate() {\n        this.createMDCChipSet();\n        const input = this.host.shadowRoot.querySelector('input');\n        if (input && this.editMode) {\n            input.focus();\n        }\n    }\n\n    public disconnectedCallback() {\n        this.destroyMDCChipSet();\n\n        if (this.mdcTextField) {\n            this.mdcTextField.destroy();\n        }\n    }\n\n    public render() {\n        if (this.type === 'input') {\n            return this.renderInputChips();\n        }\n\n        const classes = {\n            'mdc-chip-set': true,\n            disabled: this.disabled || this.readonly,\n            'mdc-text-field--with-trailing-icon': true,\n        };\n        if (this.type) {\n            classes[`mdc-chip-set--${this.type}`] = true;\n        }\n\n        const chipSetLabel = this.renderChipSetLabel();\n        if (chipSetLabel) {\n            classes['chip-set--with-label'] = true;\n        }\n\n        return (\n            <div class={classes} role=\"grid\">\n                {chipSetLabel}\n                {this.value.map(this.renderChip)}\n                {this.renderHelperLine()}\n            </div>\n        );\n    }\n\n    @Watch('value')\n    protected handleChangeChips(newValue: Chip[], oldValue: Chip[]) {\n        if (isEqual(newValue, oldValue)) {\n            return;\n        }\n\n        this.syncEmptyInput();\n    }\n\n    private createMDCChipSet() {\n        this.mdcChipSet = new MDCChipSet(\n            this.host.shadowRoot.querySelector('.mdc-chip-set')\n        );\n\n        if (!this.type || this.type === 'input') {\n            this.mdcChipSet.listen(\n                'MDCChip:interaction',\n                this.handleInteractionEvent\n            );\n        }\n\n        if (this.type === 'choice' || this.type === 'filter') {\n            this.mdcChipSet.listen('MDCChip:selection', this.handleSelection);\n        }\n    }\n\n    private destroyMDCChipSet() {\n        if (this.mdcChipSet) {\n            this.mdcChipSet.unlisten(\n                'MDCChip:interaction',\n                this.handleInteractionEvent\n            );\n            this.mdcChipSet.unlisten('MDCChip:selection', this.handleSelection);\n\n            this.mdcChipSet.destroy();\n        }\n    }\n\n    private renderChipSetLabel() {\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <label class=\"chip-set__label mdc-floating-label mdc-floating-label--float-above\">\n                {this.label}\n            </label>\n        );\n    }\n\n    private renderInputChips() {\n        return [\n            <div\n                class={{\n                    'mdc-text-field mdc-text-field--outlined': true,\n                    'mdc-chip-set mdc-chip-set--input': true,\n                    'force-invalid': this.isInvalid(),\n                    'mdc-text-field--disabled': this.readonly || this.disabled,\n                    'lime-text-field--readonly': this.readonly,\n                    'has-chips mdc-text-field--label-floating':\n                        this.value.length !== 0,\n                    'has-leading-icon': this.leadingIcon !== null,\n                    'has-clear-all-button': this.clearAllButton,\n                }}\n                onClick={this.handleTextFieldFocus}\n            >\n                {this.value.map(this.renderInputChip)}\n                <input\n                    tabIndex={INPUT_FIELD_TABINDEX}\n                    type={this.inputType}\n                    id=\"input-element\"\n                    disabled={this.readonly || this.disabled}\n                    class={{\n                        'mdc-text-field__input': true,\n                        hidden: this.inputHidden(),\n                    }}\n                    value={this.textValue}\n                    onBlur={this.handleInputBlur}\n                    onFocus={this.handleTextFieldFocus}\n                    onKeyDown={this.handleKeyDown}\n                    onInput={this.handleTextInput}\n                    // Some browsers emit a change event on input elements, we need to stop\n                    // that event from propagating since we are emitting our own change event\n                    onChange={this.inputFieldOnChange}\n                    placeholder={this.isFull() ? '' : this.searchLabel}\n                    readonly={this.isFull()}\n                />\n                <div\n                    class={{\n                        'mdc-notched-outline': true,\n                        'mdc-notched-outline--upgraded': true,\n                        'mdc-text-field--required': this.required,\n                        'lime-notched-outline--notched': this.floatLabelAbove(),\n                    }}\n                    dropzone-tip={this.dropZoneTip()}\n                >\n                    <div class=\"mdc-notched-outline__leading\" />\n                    {this.renderLabel()}\n                    <div class=\"mdc-notched-outline__trailing\" />\n                </div>\n                {this.renderLeadingIcon()}\n                {this.renderEmptyValueForReadonly()}\n                {this.renderClearAllChipsButton()}\n            </div>,\n            this.renderHelperLine(),\n        ];\n    }\n\n    private renderEmptyValueForReadonly = () => {\n        if (this.readonly && this.value.length === 0) {\n            return (\n                <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n                    –\n                </span>\n            );\n        }\n    };\n\n    private renderLabel() {\n        const labelClassList = {\n            'mdc-floating-label': true,\n            'mdc-text-field--disabled': this.readonly || this.disabled,\n            'mdc-floating-label--required': this.required,\n            'lime-floating-label--float-above': this.floatLabelAbove(),\n        };\n\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <div class=\"mdc-notched-outline__notch\">\n                <label class={labelClassList} htmlFor=\"input-element\">\n                    {this.label}\n                </label>\n            </div>\n        );\n    }\n\n    private floatLabelAbove = () => {\n        if (!!this.value.length || this.editMode || this.readonly) {\n            return true;\n        }\n    };\n\n    private dropZoneTip = (): string => {\n        return translate.get('file.drag-and-drop-tips', this.language);\n    };\n\n    private isFull(): boolean {\n        return !!this.maxItems && this.value.length >= this.maxItems;\n    }\n\n    private isInvalid() {\n        if (!this.required) {\n            return false;\n        }\n\n        if (!this.blurred) {\n            return false;\n        }\n\n        return !this.value || !this.value.length;\n    }\n\n    private inputFieldOnChange(event) {\n        event.stopPropagation();\n    }\n\n    /**\n     * Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible\n     * @returns {void}\n     */\n    private handleTextFieldFocus() {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        if (this.editMode) {\n            return;\n        }\n\n        this.editMode = true;\n        this.startEdit.emit();\n    }\n\n    /**\n     * Exit edit mode when the input element loses focus. This makes sure the input element does not take up any\n     * additional space when the user it not typing anything\n     * @returns {void}\n     */\n    private handleInputBlur() {\n        if (this.emptyInputOnBlur) {\n            this.syncEmptyInput();\n        }\n\n        this.editMode = false;\n        this.blurred = true;\n        this.inputChipIndexSelected = null;\n\n        // This timeout is needed in order to let a new element receive focus\n        setTimeout(() => {\n            this.stopEdit.emit();\n        }, 0);\n    }\n\n    private syncEmptyInput() {\n        this.textValue = '';\n    }\n\n    private inputHidden() {\n        if (this.editMode) {\n            return this.isFull();\n        }\n\n        // If there are chips in the picker, hide the input to avoid the input\n        // being placed on a new line and adding ugly space beneath the chips.\n        // If there are no chips, show the input, or the picker will look weird.\n        return !!(this.value && this.value.length);\n    }\n\n    private handleTextInput(event) {\n        event.stopPropagation();\n        this.inputChipIndexSelected = null;\n        this.textValue = event.target.value;\n        this.input.emit(event.target.value && event.target.value.trim());\n    }\n\n    private handleInteractionEvent(event: MDCChipInteractionEvent) {\n        const chip = this.value.find((item) => {\n            return `${item.id}` === event.detail.chipId;\n        });\n        this.emitInteraction(chip);\n    }\n\n    private emitInteraction(chip: Chip) {\n        this.interact.emit(chip);\n    }\n\n    private handleSelection(event: MDCChipSelectionEvent) {\n        let chip = this.value.find((item) => {\n            return `${item.id}` === event.detail.chipId;\n        });\n        chip = { ...chip, selected: event.detail.selected };\n        this.change.emit(chip);\n    }\n\n    private removeChip(id: string | number) {\n        const newValue = this.value.filter((chip) => {\n            return `${chip.id}` !== `${id}`;\n        });\n        this.change.emit(newValue);\n    }\n\n    private renderChip(chip: Chip) {\n        if (this.type === 'filter') {\n            return this.renderFilterChip(chip);\n        }\n\n        return this.renderDefaultChip(chip);\n    }\n\n    private renderDefaultChip(chip: Chip) {\n        return (\n            <div\n                class={`mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`}\n                role=\"row\"\n                id={`${chip.id}`}\n            >\n                {chip.icon ? this.renderChipIcon(chip) : null}\n                {chip.text ? this.renderChipLabel(chip) : null}\n            </div>\n        );\n    }\n\n    private renderChipLabel(chip: Chip<any>) {\n        const attributes: any = {};\n        if (chip.href) {\n            attributes.href = getHref(chip.href);\n            attributes.target = getTarget(chip.href);\n        }\n\n        return (\n            <span role=\"gridcell\">\n                <a\n                    role=\"button\"\n                    tabindex={this.disabled ? '-1' : '0'}\n                    class=\"mdc-chip__text\"\n                    {...attributes}\n                >\n                    {chip.text}\n                </a>\n            </span>\n        );\n    }\n\n    private hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private renderHelperLine = () => {\n        if (!this.maxItems && !this.hasHelperText()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                length={this.value.length}\n                maxLength={this.maxItems}\n                helperText={this.helperText}\n                invalid={this.isInvalid()}\n            />\n        );\n    };\n\n    private renderFilterChip(chip: Chip) {\n        return (\n            <div\n                class={`mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`}\n                role=\"row\"\n                id={`${chip.id}`}\n            >\n                <span class=\"mdc-chip__checkmark\">\n                    <svg class=\"mdc-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\">\n                        <path\n                            class=\"mdc-chip__checkmark-path\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n                        />\n                    </svg>\n                </span>\n                <span role=\"gridcell\">\n                    <span\n                        role=\"checkbox\"\n                        tabindex={this.disabled ? '-1' : '0'}\n                        aria-checked=\"false\"\n                        class=\"mdc-chip__text\"\n                    >\n                        {chip.text}\n                    </span>\n                </span>\n                {this.renderBadge(chip)}\n            </div>\n        );\n    }\n\n    private renderInputChip(chip: Chip, index: number) {\n        return [\n            <div\n                class={{\n                    'mdc-chip': true,\n                    'mdc-chip--selected': this.inputChipIndexSelected === index,\n                    disabled: this.disabled,\n                }}\n                role=\"row\"\n                id={`${chip.id}`}\n                onClick={this.catchInputChipClicks}\n            >\n                {chip.icon ? this.renderChipIcon(chip) : null}\n                {this.renderChipLabel(chip)}\n                {this.renderChipRemoveButton(chip)}\n            </div>,\n            this.renderDelimiter(),\n        ];\n    }\n\n    private catchInputChipClicks(event) {\n        event.stopPropagation();\n    }\n\n    private renderChipIcon(chip: Chip) {\n        const style = {};\n        if (chip.iconFillColor) {\n            style['--icon-color'] = chip.iconFillColor;\n        }\n\n        if (chip.iconBackgroundColor) {\n            style['--icon-background-color'] = chip.iconBackgroundColor;\n        }\n\n        return (\n            <limel-icon\n                class=\"mdc-chip__icon mdc-chip__icon--leading\"\n                name={chip.icon}\n                style={style}\n                size=\"small\"\n                badge={true}\n                title={chip.iconTitle}\n            />\n        );\n    }\n\n    private renderLeadingIcon() {\n        if (!this.leadingIcon) {\n            return;\n        }\n\n        return (\n            <i class=\"mdc-text-field__icon search-icon\">\n                <limel-icon name={this.leadingIcon} />\n            </i>\n        );\n    }\n\n    private renderChipRemoveButton(chip: Chip) {\n        if (!chip.removable || this.readonly || this.disabled) {\n            return;\n        }\n\n        const svgData = `<svg style=\"height:100%;width:100%;\" width=\"32\" height=\"32\" x=\"0px\" y=\"0px\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <line fill=\"none\" id=\"svg_1\" stroke=\"currentColor\" stroke-width=\"2\" x1=\"8\" x2=\"24\" y1=\"8\" y2=\"24\"/>\n    <line fill=\"none\" id=\"svg_2\" stroke=\"currentColor\" stroke-width=\"2\" x1=\"24\" x2=\"8\" y1=\"8\" y2=\"24\"/>\n</svg>`;\n\n        const removeFunc = (event: MouseEvent) => {\n            event.stopPropagation();\n            this.removeChip(chip.id);\n        };\n\n        return (\n            <button\n                class=\"mdc-chip__icon mdc-chip__icon--trailing mdc-deprecated-chip-trailing-action\"\n                aria-label={this.removeChipLabel}\n                tabindex=\"-1\"\n                innerHTML={svgData}\n                onClick={removeFunc}\n            />\n        );\n    }\n\n    private renderClearAllChipsButton() {\n        if (this.disabled || this.readonly || !this.clearAllButton) {\n            return;\n        }\n\n        return (\n            <a\n                href=\"\"\n                onClick={this.handleDeleteAllIconClick}\n                class=\"mdc-text-field__icon clear-all-button\"\n                tabindex=\"0\"\n                role=\"button\"\n                title={this.clearAllChipsLabel()}\n                aria-label={this.clearAllChipsLabel()}\n            />\n        );\n    }\n\n    private clearAllChipsLabel = (): string => {\n        return translate.get('chip-set.clear-all', this.language);\n    };\n\n    private removeChipLabel = (): string => {\n        return translate.get('chip-set.remove-chip', this.language);\n    };\n\n    private handleDeleteAllIconClick(event: Event) {\n        event.preventDefault();\n        this.change.emit([]);\n    }\n\n    private renderDelimiter() {\n        if (!this.delimiter) {\n            return;\n        }\n\n        return <div class=\"delimiter\">{this.delimiter}</div>;\n    }\n\n    private renderBadge(chip: Chip) {\n        if (!chip.badge) {\n            return;\n        }\n\n        return <limel-badge label={chip.badge} />;\n    }\n}\n"]}
+{"version":3,"file":"chip-set.js","sourceRoot":"","sources":["../../../src/components/chip-set/chip-set.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Chip, Languages } from '../../interface';\nimport {\n    MDCChipInteractionEvent,\n    MDCChipSelectionEvent,\n    MDCChipSet,\n} from '@material/chips/deprecated';\nimport { MDCTextField } from '@material/textfield';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Method,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { handleKeyboardEvent } from './chip-set-input-helpers';\nimport translate from '../../global/translations';\nimport { getHref, getTarget } from '../../util/link-helper';\nimport { isEqual } from 'lodash-es';\n\nconst SELECTED_CHIP_CLASS = 'mdc-chip--selected';\nconst INPUT_FIELD_TABINDEX = 1;\n\n/**\n * @exampleComponent limel-example-chip-set\n * @exampleComponent limel-example-chip-set-choice\n * @exampleComponent limel-example-chip-set-filter\n * @exampleComponent limel-example-chip-set-filter-badge\n * @exampleComponent limel-example-chip-set-input\n * @exampleComponent limel-example-chip-set-input-type-text\n * @exampleComponent limel-example-chip-set-input-type-search\n * @exampleComponent limel-example-chip-icon-color\n * @exampleComponent limel-example-chip-set-composite\n */\n@Component({\n    tag: 'limel-chip-set',\n    shadow: true,\n    styleUrl: 'chip-set.scss',\n})\nexport class ChipSet {\n    /**\n     * List of chips for the set\n     */\n    @Prop()\n    public value: Chip[] = [];\n\n    /**\n     * Type of chip set\n     *\n     * - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n     * - `filter` renders a set of selectable chips where all are selectable. The `icon` property is ignored\n     * - `input` renders a set of chips that can be used in conjunction with an input field\n     *\n     * If no type is set, a basic set of chips without additional functionality will be rendered\n     */\n    @Prop({ reflect: true })\n    public type?: 'choice' | 'filter' | 'input';\n\n    /**\n     * Label for the chip-set\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the chipset.\n     * When type is `input`, the helper text is displayed below the\n     * input field when it has focus.\n     * When type is not `input`, the helper text is always displayed\n     * if the device is touch screen; otherwise it is shown when chip-set\n     * is hovered or focused using keyboard navigation.\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * True if the chip set should be disabled\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * For chip-sets of type `input`, set to `true` to disable adding and\n     * removing chips, but allow interaction with existing chips in the set.\n     * For any other types, setting either `readonly` or `disabled` disables\n     * the chip-set.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * For chip-sets of type `input`. Value to use for the `type` attribute on the\n     * input field inside the chip-set.\n     */\n    @Prop({ reflect: true })\n    public inputType: 'search' | 'text' = 'text';\n\n    /**\n     * For chip-sets of type `input`. Limits the maximum number of chips.\n     * When the value is `0` or not set, no limit is applied.\n     */\n    @Prop({ reflect: true })\n    public maxItems: number;\n\n    /**\n     * True if the control requires a value\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * Search label to display when type is `input` and component is in search mode\n     */\n    @Prop({ reflect: true })\n    public searchLabel: string;\n\n    /**\n     * Whether the input field should be emptied when the chip-set loses focus.\n     */\n    @Prop({ reflect: true })\n    public emptyInputOnBlur: boolean = true;\n\n    /**\n     * Whether the \"Clear all\" buttons should be shown\n     */\n    @Prop()\n    public clearAllButton: boolean = true;\n\n    /**\n     * For chip-sets of type `input`. When the value is null, no leading icon is used.\n     * Leading icon to show to the far left in the text field\n     */\n    @Prop({ reflect: true })\n    public leadingIcon: string = null;\n\n    /**\n     * For chip-set of type `input`. Sets delimiters between chips.\n     */\n    @Prop({ reflect: true })\n    public delimiter: string = null;\n\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components. For example, the clear all chips label.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Dispatched when a chip is interacted with\n     */\n    @Event()\n    private interact: EventEmitter<Chip>;\n\n    /**\n     * Dispatched when a chip is selected/deselected\n     */\n    @Event()\n    private change: EventEmitter<Chip | Chip[]>;\n\n    /**\n     * Emitted when an input chip set has received focus and editing in the text field has started\n     */\n    @Event()\n    private startEdit: EventEmitter<void>;\n\n    /**\n     * Emitted when an input chip set has lost focus and editing in the text field has ended\n     */\n    @Event()\n    private stopEdit: EventEmitter<void>;\n\n    /**\n     * Dispatched when the input is changed for type `input`\n     */\n    @Event()\n    private input: EventEmitter<string>;\n\n    @Element()\n    private host: HTMLLimelChipSetElement;\n\n    @State()\n    private editMode: boolean = false;\n\n    @State()\n    private textValue: string = '';\n\n    @State()\n    private blurred: boolean = false;\n\n    @State()\n    private inputChipIndexSelected: number = null;\n\n    private mdcChipSet: MDCChipSet;\n    private mdcTextField: MDCTextField;\n    private handleKeyDown = handleKeyboardEvent;\n\n    constructor() {\n        this.renderChip = this.renderChip.bind(this);\n        this.renderInputChip = this.renderInputChip.bind(this);\n        this.isFull = this.isFull.bind(this);\n        this.handleInteractionEvent = this.handleInteractionEvent.bind(this);\n        this.handleSelection = this.handleSelection.bind(this);\n        this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);\n        this.handleInputBlur = this.handleInputBlur.bind(this);\n        this.handleTextInput = this.handleTextInput.bind(this);\n        this.inputFieldOnChange = this.inputFieldOnChange.bind(this);\n        this.handleKeyDown = this.handleKeyDown.bind(this);\n        this.inputHidden = this.inputHidden.bind(this);\n        this.handleDeleteAllIconClick =\n            this.handleDeleteAllIconClick.bind(this);\n        this.renderDelimiter = this.renderDelimiter.bind(this);\n    }\n\n    /**\n     * Used to find out whether the chip-set is in edit mode.\n     * @returns {Promise<boolean>} `true` if the chip-set is in edit mode, `false` otherwise.\n     */\n    @Method()\n    public async getEditMode(): Promise<boolean> {\n        return this.editMode;\n    }\n\n    /**\n     * Used to set focus to the chip-set input field.\n     * @param {boolean} emptyInput if `true`, any text in the input is discarded\n     * @returns {Promise<void>} does not return anything, but methods have to be async\n     */\n    @Method()\n    public async setFocus(emptyInput: boolean = false) {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        this.editMode = true;\n        if (emptyInput) {\n            this.textValue = '';\n        }\n\n        this.host.shadowRoot.querySelector('input').focus();\n        this.startEdit.emit();\n    }\n\n    /**\n     * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the\n     * consumer control when the input is emptied.\n     * @returns {Promise<void>} does not return anything, but methods have to be async\n     */\n    @Method()\n    public async emptyInput() {\n        this.syncEmptyInput();\n    }\n\n    public componentDidLoad() {\n        if (this.type === 'input') {\n            this.mdcTextField = new MDCTextField(\n                this.host.shadowRoot.querySelector('.mdc-text-field')\n            );\n        }\n\n        this.createMDCChipSet();\n    }\n\n    public componentWillUpdate() {\n        this.destroyMDCChipSet();\n    }\n\n    public componentDidUpdate() {\n        this.createMDCChipSet();\n        const input = this.host.shadowRoot.querySelector('input');\n        if (input && this.editMode) {\n            input.focus();\n        }\n    }\n\n    public disconnectedCallback() {\n        this.destroyMDCChipSet();\n\n        if (this.mdcTextField) {\n            this.mdcTextField.destroy();\n        }\n    }\n\n    public render() {\n        if (this.type === 'input') {\n            return this.renderInputChips();\n        }\n\n        const classes = {\n            'mdc-chip-set': true,\n            disabled: this.disabled || this.readonly,\n            'mdc-text-field--with-trailing-icon': true,\n        };\n        if (this.type) {\n            classes[`mdc-chip-set--${this.type}`] = true;\n        }\n\n        const chipSetLabel = this.renderChipSetLabel();\n        if (chipSetLabel) {\n            classes['chip-set--with-label'] = true;\n        }\n\n        return (\n            <div class={classes} role=\"grid\">\n                {chipSetLabel}\n                {this.value.map(this.renderChip)}\n                {this.renderHelperLine()}\n            </div>\n        );\n    }\n\n    @Watch('value')\n    protected handleChangeChips(newValue: Chip[], oldValue: Chip[]) {\n        if (isEqual(newValue, oldValue)) {\n            return;\n        }\n\n        this.syncEmptyInput();\n    }\n\n    private createMDCChipSet() {\n        this.mdcChipSet = new MDCChipSet(\n            this.host.shadowRoot.querySelector('.mdc-chip-set')\n        );\n\n        if (!this.type || this.type === 'input') {\n            this.mdcChipSet.listen(\n                'MDCChip:interaction',\n                this.handleInteractionEvent\n            );\n        }\n\n        if (this.type === 'choice' || this.type === 'filter') {\n            this.mdcChipSet.listen('MDCChip:selection', this.handleSelection);\n        }\n    }\n\n    private destroyMDCChipSet() {\n        if (this.mdcChipSet) {\n            this.mdcChipSet.unlisten(\n                'MDCChip:interaction',\n                this.handleInteractionEvent\n            );\n            this.mdcChipSet.unlisten('MDCChip:selection', this.handleSelection);\n\n            this.mdcChipSet.destroy();\n        }\n    }\n\n    private renderChipSetLabel() {\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <label class=\"chip-set__label mdc-floating-label mdc-floating-label--float-above\">\n                {this.label}\n            </label>\n        );\n    }\n\n    private renderInputChips() {\n        return [\n            <div\n                class={{\n                    'mdc-text-field mdc-text-field--outlined': true,\n                    'mdc-chip-set mdc-chip-set--input': true,\n                    'force-invalid': this.isInvalid(),\n                    'mdc-text-field--disabled': this.readonly || this.disabled,\n                    'lime-text-field--readonly': this.readonly,\n                    'has-chips mdc-text-field--label-floating':\n                        this.value.length !== 0,\n                    'has-leading-icon': this.leadingIcon !== null,\n                    'has-clear-all-button': this.clearAllButton,\n                }}\n                onClick={this.handleTextFieldFocus}\n            >\n                {this.value.map(this.renderInputChip)}\n                <input\n                    tabIndex={INPUT_FIELD_TABINDEX}\n                    type={this.inputType}\n                    id=\"input-element\"\n                    disabled={this.readonly || this.disabled}\n                    class={{\n                        'mdc-text-field__input': true,\n                        hidden: this.inputHidden(),\n                    }}\n                    value={this.textValue}\n                    onBlur={this.handleInputBlur}\n                    onFocus={this.handleTextFieldFocus}\n                    onKeyDown={this.handleKeyDown}\n                    onInput={this.handleTextInput}\n                    // Some browsers emit a change event on input elements, we need to stop\n                    // that event from propagating since we are emitting our own change event\n                    onChange={this.inputFieldOnChange}\n                    placeholder={this.isFull() ? '' : this.searchLabel}\n                    readonly={this.isFull()}\n                />\n                <div\n                    class={{\n                        'mdc-notched-outline': true,\n                        'mdc-notched-outline--upgraded': true,\n                        'mdc-text-field--required': this.required,\n                        'lime-notched-outline--notched': this.floatLabelAbove(),\n                    }}\n                    dropzone-tip={this.dropZoneTip()}\n                >\n                    <div class=\"mdc-notched-outline__leading\" />\n                    {this.renderLabel()}\n                    <div class=\"mdc-notched-outline__trailing\" />\n                </div>\n                {this.renderLeadingIcon()}\n                {this.renderEmptyValueForReadonly()}\n                {this.renderClearAllChipsButton()}\n            </div>,\n            this.renderHelperLine(),\n        ];\n    }\n\n    private renderEmptyValueForReadonly = () => {\n        if (this.readonly && this.value.length === 0) {\n            return (\n                <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n                    –\n                </span>\n            );\n        }\n    };\n\n    private renderLabel() {\n        const labelClassList = {\n            'mdc-floating-label': true,\n            'mdc-text-field--disabled': this.readonly || this.disabled,\n            'mdc-floating-label--required': this.required,\n            'lime-floating-label--float-above': this.floatLabelAbove(),\n        };\n\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <div class=\"mdc-notched-outline__notch\">\n                <label class={labelClassList} htmlFor=\"input-element\">\n                    {this.label}\n                </label>\n            </div>\n        );\n    }\n\n    private floatLabelAbove = () => {\n        if (!!this.value.length || this.editMode || this.readonly) {\n            return true;\n        }\n    };\n\n    private dropZoneTip = (): string => {\n        return translate.get('file.drag-and-drop-tips', this.language);\n    };\n\n    private isFull(): boolean {\n        return !!this.maxItems && this.value.length >= this.maxItems;\n    }\n\n    private isInvalid() {\n        if (this.readonly) {\n            // A readonly field can never be invalid.\n            return false;\n        }\n\n        if (this.invalid) {\n            return true;\n        }\n\n        if (!this.required) {\n            return false;\n        }\n\n        if (!this.blurred) {\n            return false;\n        }\n\n        return !this.value || !this.value.length;\n    }\n\n    private inputFieldOnChange(event) {\n        event.stopPropagation();\n    }\n\n    /**\n     * Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible\n     * @returns {void}\n     */\n    private handleTextFieldFocus() {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        if (this.editMode) {\n            return;\n        }\n\n        this.editMode = true;\n        this.startEdit.emit();\n    }\n\n    /**\n     * Exit edit mode when the input element loses focus. This makes sure the input element does not take up any\n     * additional space when the user it not typing anything\n     * @returns {void}\n     */\n    private handleInputBlur() {\n        if (this.emptyInputOnBlur) {\n            this.syncEmptyInput();\n        }\n\n        this.editMode = false;\n        this.blurred = true;\n        this.inputChipIndexSelected = null;\n\n        // This timeout is needed in order to let a new element receive focus\n        setTimeout(() => {\n            this.stopEdit.emit();\n        }, 0);\n    }\n\n    private syncEmptyInput() {\n        this.textValue = '';\n    }\n\n    private inputHidden() {\n        if (this.editMode) {\n            return this.isFull();\n        }\n\n        // If there are chips in the picker, hide the input to avoid the input\n        // being placed on a new line and adding ugly space beneath the chips.\n        // If there are no chips, show the input, or the picker will look weird.\n        return !!(this.value && this.value.length);\n    }\n\n    private handleTextInput(event) {\n        event.stopPropagation();\n        this.inputChipIndexSelected = null;\n        this.textValue = event.target.value;\n        this.input.emit(event.target.value && event.target.value.trim());\n    }\n\n    private handleInteractionEvent(event: MDCChipInteractionEvent) {\n        const chip = this.value.find((item) => {\n            return `${item.id}` === event.detail.chipId;\n        });\n        this.emitInteraction(chip);\n    }\n\n    private emitInteraction(chip: Chip) {\n        this.interact.emit(chip);\n    }\n\n    private handleSelection(event: MDCChipSelectionEvent) {\n        let chip = this.value.find((item) => {\n            return `${item.id}` === event.detail.chipId;\n        });\n        chip = { ...chip, selected: event.detail.selected };\n        this.change.emit(chip);\n    }\n\n    private removeChip(id: string | number) {\n        const newValue = this.value.filter((chip) => {\n            return `${chip.id}` !== `${id}`;\n        });\n        this.change.emit(newValue);\n    }\n\n    private renderChip(chip: Chip) {\n        if (this.type === 'filter') {\n            return this.renderFilterChip(chip);\n        }\n\n        return this.renderDefaultChip(chip);\n    }\n\n    private renderDefaultChip(chip: Chip) {\n        return (\n            <div\n                class={`mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`}\n                role=\"row\"\n                id={`${chip.id}`}\n            >\n                {chip.icon ? this.renderChipIcon(chip) : null}\n                {chip.text ? this.renderChipLabel(chip) : null}\n            </div>\n        );\n    }\n\n    private renderChipLabel(chip: Chip<any>) {\n        const attributes: any = {};\n        if (chip.href) {\n            attributes.href = getHref(chip.href);\n            attributes.target = getTarget(chip.href);\n        }\n\n        return (\n            <span role=\"gridcell\">\n                <a\n                    role=\"button\"\n                    tabindex={this.disabled ? '-1' : '0'}\n                    class=\"mdc-chip__text\"\n                    {...attributes}\n                >\n                    {chip.text}\n                </a>\n            </span>\n        );\n    }\n\n    private hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private renderHelperLine = () => {\n        if (!this.maxItems && !this.hasHelperText()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                length={this.value.length}\n                maxLength={this.maxItems}\n                helperText={this.helperText}\n                invalid={this.isInvalid()}\n            />\n        );\n    };\n\n    private renderFilterChip(chip: Chip) {\n        return (\n            <div\n                class={`mdc-chip ${chip.selected ? SELECTED_CHIP_CLASS : ''}`}\n                role=\"row\"\n                id={`${chip.id}`}\n            >\n                <span class=\"mdc-chip__checkmark\">\n                    <svg class=\"mdc-chip__checkmark-svg\" viewBox=\"-2 -3 30 30\">\n                        <path\n                            class=\"mdc-chip__checkmark-path\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n                        />\n                    </svg>\n                </span>\n                <span role=\"gridcell\">\n                    <span\n                        role=\"checkbox\"\n                        tabindex={this.disabled ? '-1' : '0'}\n                        aria-checked=\"false\"\n                        class=\"mdc-chip__text\"\n                    >\n                        {chip.text}\n                    </span>\n                </span>\n                {this.renderBadge(chip)}\n            </div>\n        );\n    }\n\n    private renderInputChip(chip: Chip, index: number) {\n        return [\n            <div\n                class={{\n                    'mdc-chip': true,\n                    'mdc-chip--selected': this.inputChipIndexSelected === index,\n                    disabled: this.disabled,\n                }}\n                role=\"row\"\n                id={`${chip.id}`}\n                onClick={this.catchInputChipClicks}\n            >\n                {chip.icon ? this.renderChipIcon(chip) : null}\n                {this.renderChipLabel(chip)}\n                {this.renderChipRemoveButton(chip)}\n            </div>,\n            this.renderDelimiter(),\n        ];\n    }\n\n    private catchInputChipClicks(event) {\n        event.stopPropagation();\n    }\n\n    private renderChipIcon(chip: Chip) {\n        const style = {};\n        if (chip.iconFillColor) {\n            style['--icon-color'] = chip.iconFillColor;\n        }\n\n        if (chip.iconBackgroundColor) {\n            style['--icon-background-color'] = chip.iconBackgroundColor;\n        }\n\n        return (\n            <limel-icon\n                class=\"mdc-chip__icon mdc-chip__icon--leading\"\n                name={chip.icon}\n                style={style}\n                size=\"small\"\n                badge={true}\n                title={chip.iconTitle}\n            />\n        );\n    }\n\n    private renderLeadingIcon() {\n        if (!this.leadingIcon) {\n            return;\n        }\n\n        return (\n            <i class=\"mdc-text-field__icon search-icon\">\n                <limel-icon name={this.leadingIcon} />\n            </i>\n        );\n    }\n\n    private renderChipRemoveButton(chip: Chip) {\n        if (!chip.removable || this.readonly || this.disabled) {\n            return;\n        }\n\n        const svgData = `<svg style=\"height:100%;width:100%;\" width=\"32\" height=\"32\" x=\"0px\" y=\"0px\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\">\n    <line fill=\"none\" id=\"svg_1\" stroke=\"currentColor\" stroke-width=\"2\" x1=\"8\" x2=\"24\" y1=\"8\" y2=\"24\"/>\n    <line fill=\"none\" id=\"svg_2\" stroke=\"currentColor\" stroke-width=\"2\" x1=\"24\" x2=\"8\" y1=\"8\" y2=\"24\"/>\n</svg>`;\n\n        const removeFunc = (event: MouseEvent) => {\n            event.stopPropagation();\n            this.removeChip(chip.id);\n        };\n\n        return (\n            <button\n                class=\"mdc-chip__icon mdc-chip__icon--trailing mdc-deprecated-chip-trailing-action\"\n                aria-label={this.removeChipLabel}\n                tabindex=\"-1\"\n                innerHTML={svgData}\n                onClick={removeFunc}\n            />\n        );\n    }\n\n    private renderClearAllChipsButton() {\n        if (this.disabled || this.readonly || !this.clearAllButton) {\n            return;\n        }\n\n        return (\n            <a\n                href=\"\"\n                onClick={this.handleDeleteAllIconClick}\n                class=\"mdc-text-field__icon clear-all-button\"\n                tabindex=\"0\"\n                role=\"button\"\n                title={this.clearAllChipsLabel()}\n                aria-label={this.clearAllChipsLabel()}\n            />\n        );\n    }\n\n    private clearAllChipsLabel = (): string => {\n        return translate.get('chip-set.clear-all', this.language);\n    };\n\n    private removeChipLabel = (): string => {\n        return translate.get('chip-set.remove-chip', this.language);\n    };\n\n    private handleDeleteAllIconClick(event: Event) {\n        event.preventDefault();\n        this.change.emit([]);\n    }\n\n    private renderDelimiter() {\n        if (!this.delimiter) {\n            return;\n        }\n\n        return <div class=\"delimiter\">{this.delimiter}</div>;\n    }\n\n    private renderBadge(chip: Chip) {\n        if (!chip.badge) {\n            return;\n        }\n\n        return <limel-badge label={chip.badge} />;\n    }\n}\n"]}

package/dist/collection/components/file/file.js

@@ -63,6 +63,7 @@ export class File {
     this.required = false;
     this.disabled = false;
     this.readonly = false;
+    this.invalid = false;
     this.accept = '*';
     this.language = 'en';
     this.isDraggingOverDropZone = false;
@@ -100,7 +101,7 @@ export class File {
           'is-file-picker': true,
           'shows-dropzone': true,
           'highlight-dropzone': this.isDraggingOverDropZone,
-        }, disabled: this.disabled, readonly: this.readonly, label: this.label, leadingIcon: "upload_to_cloud", language: this.language, onChange: this.handleChipSetChange, onClick: this.handleFileSelection, onInteract: this.handleChipInteract, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, required: this.required, type: "input", value: this.chipArray, title: this.getTranslation('drag-and-drop-tips'), onDragEnter: this.handleDragEnter, onDragOver: this.preventAndStop, onDragLeave: this.handleDragLeave, onDrop: this.handleFileDrop }),
+        }, disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, leadingIcon: "upload_to_cloud", language: this.language, onChange: this.handleChipSetChange, onClick: this.handleFileSelection, onInteract: this.handleChipInteract, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, required: this.required, type: "input", value: this.chipArray, title: this.getTranslation('drag-and-drop-tips'), onDragEnter: this.handleDragEnter, onDragOver: this.preventAndStop, onDragLeave: this.handleDragLeave, onDrop: this.handleFileDrop }),
     ];
   }
   get chipArray() {
@@ -279,6 +280,24 @@ export class File {
         "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 of the chosen file is\ninvalid."
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "accept": {
         "type": "string",
         "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"file.js","sourceRoot":"","sources":["../../../src/components/file/file.tsx"],"names":[],"mappings":"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","sourcesContent":["import translate from '../../global/translations';\nimport { Chip, FileInfo, Languages } from '../../interface';\nimport { MDCTextField } from '@material/textfield';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n    getFileBackgroundColor,\n    getFileColor,\n    getFileExtensionTitle,\n    getFileIcon,\n} from './file-metadata';\n\nconst CHIP_SET_TAG_NAME = 'limel-chip-set';\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 * @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     * 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    @Element()\n    private element: HTMLLimelFileElement;\n\n    @State()\n    private isDraggingOverDropZone = false;\n\n    private fileInput: HTMLInputElement;\n    private fileInputId = createRandomString();\n    private chipSet;\n    private mdcTextField;\n\n    constructor() {\n        this.handleFileSelection = this.handleFileSelection.bind(this);\n        this.handleFileChange = this.handleFileChange.bind(this);\n        this.handleChipSetChange = this.handleChipSetChange.bind(this);\n        this.handleFileDrop = this.handleFileDrop.bind(this);\n        this.handleKeyDown = this.handleKeyDown.bind(this);\n        this.handleKeyUp = this.handleKeyUp.bind(this);\n        this.handleChipInteract = this.handleChipInteract.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.fileInput = this.element.shadowRoot.getElementById(\n            this.fileInputId\n        ) as HTMLInputElement;\n        this.chipSet = this.element.shadowRoot.querySelector(CHIP_SET_TAG_NAME);\n        this.initialize();\n    }\n\n    private initialize() {\n        if (!this.chipSet) {\n            return;\n        }\n\n        this.mdcTextField = new MDCTextField(\n            this.chipSet.shadowRoot.querySelector('.mdc-text-field')\n        );\n    }\n\n    public disconnectedCallback() {\n        if (this.mdcTextField) {\n            this.mdcTextField.destroy();\n        }\n    }\n\n    public render() {\n        return [\n            <input\n                hidden={true}\n                id={this.fileInputId}\n                onChange={this.handleFileChange}\n                type=\"file\"\n                accept={this.accept}\n                disabled={this.disabled || this.readonly}\n            />,\n            <limel-chip-set\n                class={{\n                    'is-file-picker': true,\n                    'shows-dropzone': true,\n                    'highlight-dropzone': this.isDraggingOverDropZone,\n                }}\n                disabled={this.disabled}\n                readonly={this.readonly}\n                label={this.label}\n                leadingIcon=\"upload_to_cloud\"\n                language={this.language}\n                onChange={this.handleChipSetChange}\n                onClick={this.handleFileSelection}\n                onInteract={this.handleChipInteract}\n                onKeyDown={this.handleKeyDown}\n                onKeyUp={this.handleKeyUp}\n                required={this.required}\n                type=\"input\"\n                value={this.chipArray}\n                title={this.getTranslation('drag-and-drop-tips')}\n                onDragEnter={this.handleDragEnter}\n                onDragOver={this.preventAndStop}\n                onDragLeave={this.handleDragLeave}\n                onDrop={this.handleFileDrop}\n            />,\n        ];\n    }\n\n    private handleDragEnter = (event: DragEvent) => {\n        this.isDraggingOverDropZone = true;\n        this.preventAndStop(event);\n    };\n\n    private handleDragLeave = () => {\n        this.isDraggingOverDropZone = false;\n    };\n\n    private handleFileDrop = (event: DragEvent) => {\n        this.preventAndStop(event);\n        this.isDraggingOverDropZone = false;\n        const dataTransfer = event.dataTransfer;\n        this.handleFile(dataTransfer.files[0]);\n    };\n\n    private get chipArray() {\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: getFileIcon(this.value),\n                iconFillColor: getFileColor(this.value),\n                iconBackgroundColor: getFileBackgroundColor(this.value),\n                href: this.value.href,\n                iconTitle: getFileExtensionTitle(this.value),\n            },\n        ];\n    }\n\n    private handleKeyDown(event: KeyboardEvent) {\n        if (\n            event.code === 'Tab' ||\n            event.code === 'Backspace' ||\n            event.code === 'Enter'\n        ) {\n            return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    private handleKeyUp(event: KeyboardEvent) {\n        if (event.code === 'Enter' && !this.value) {\n            this.fileInput.click();\n        }\n    }\n\n    private handleFileSelection(event: Event) {\n        event.stopPropagation();\n        event.preventDefault();\n        if (!this.value) {\n            this.fileInput.click();\n        }\n    }\n\n    private handleFileChange(event: Event) {\n        if (this.fileInput.files.length > 0) {\n            event.stopPropagation();\n            this.handleFile(this.fileInput.files[0]);\n        }\n    }\n\n    private handleFile(file) {\n        const limeFile: FileInfo = {\n            id: createRandomString(),\n            filename: file.name,\n            contentType: file.type,\n            size: file.size,\n            fileContent: file,\n        };\n        this.change.emit(limeFile);\n        this.chipSet.blur();\n        this.mdcTextField.valid = true;\n    }\n\n    private handleChipSetChange(event: CustomEvent) {\n        event.stopPropagation();\n        const file = !event.detail.length ? event.detail[0] : null;\n        this.chipSet.blur();\n        if (!file) {\n            this.fileInput.value = '';\n            this.change.emit(file);\n            if (this.required) {\n                this.mdcTextField.valid = false;\n            }\n        }\n    }\n\n    private handleChipInteract(event: CustomEvent<Chip>) {\n        event.stopPropagation();\n        event.preventDefault();\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"]}
+{"version":3,"file":"file.js","sourceRoot":"","sources":["../../../src/components/file/file.tsx"],"names":[],"mappings":"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","sourcesContent":["import translate from '../../global/translations';\nimport { Chip, FileInfo, Languages } from '../../interface';\nimport { MDCTextField } from '@material/textfield';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n    getFileBackgroundColor,\n    getFileColor,\n    getFileExtensionTitle,\n    getFileIcon,\n} from './file-metadata';\n\nconst CHIP_SET_TAG_NAME = 'limel-chip-set';\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 * @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    @Element()\n    private element: HTMLLimelFileElement;\n\n    @State()\n    private isDraggingOverDropZone = false;\n\n    private fileInput: HTMLInputElement;\n    private fileInputId = createRandomString();\n    private chipSet;\n    private mdcTextField;\n\n    constructor() {\n        this.handleFileSelection = this.handleFileSelection.bind(this);\n        this.handleFileChange = this.handleFileChange.bind(this);\n        this.handleChipSetChange = this.handleChipSetChange.bind(this);\n        this.handleFileDrop = this.handleFileDrop.bind(this);\n        this.handleKeyDown = this.handleKeyDown.bind(this);\n        this.handleKeyUp = this.handleKeyUp.bind(this);\n        this.handleChipInteract = this.handleChipInteract.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.fileInput = this.element.shadowRoot.getElementById(\n            this.fileInputId\n        ) as HTMLInputElement;\n        this.chipSet = this.element.shadowRoot.querySelector(CHIP_SET_TAG_NAME);\n        this.initialize();\n    }\n\n    private initialize() {\n        if (!this.chipSet) {\n            return;\n        }\n\n        this.mdcTextField = new MDCTextField(\n            this.chipSet.shadowRoot.querySelector('.mdc-text-field')\n        );\n    }\n\n    public disconnectedCallback() {\n        if (this.mdcTextField) {\n            this.mdcTextField.destroy();\n        }\n    }\n\n    public render() {\n        return [\n            <input\n                hidden={true}\n                id={this.fileInputId}\n                onChange={this.handleFileChange}\n                type=\"file\"\n                accept={this.accept}\n                disabled={this.disabled || this.readonly}\n            />,\n            <limel-chip-set\n                class={{\n                    'is-file-picker': true,\n                    'shows-dropzone': true,\n                    'highlight-dropzone': this.isDraggingOverDropZone,\n                }}\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                onClick={this.handleFileSelection}\n                onInteract={this.handleChipInteract}\n                onKeyDown={this.handleKeyDown}\n                onKeyUp={this.handleKeyUp}\n                required={this.required}\n                type=\"input\"\n                value={this.chipArray}\n                title={this.getTranslation('drag-and-drop-tips')}\n                onDragEnter={this.handleDragEnter}\n                onDragOver={this.preventAndStop}\n                onDragLeave={this.handleDragLeave}\n                onDrop={this.handleFileDrop}\n            />,\n        ];\n    }\n\n    private handleDragEnter = (event: DragEvent) => {\n        this.isDraggingOverDropZone = true;\n        this.preventAndStop(event);\n    };\n\n    private handleDragLeave = () => {\n        this.isDraggingOverDropZone = false;\n    };\n\n    private handleFileDrop = (event: DragEvent) => {\n        this.preventAndStop(event);\n        this.isDraggingOverDropZone = false;\n        const dataTransfer = event.dataTransfer;\n        this.handleFile(dataTransfer.files[0]);\n    };\n\n    private get chipArray() {\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: getFileIcon(this.value),\n                iconFillColor: getFileColor(this.value),\n                iconBackgroundColor: getFileBackgroundColor(this.value),\n                href: this.value.href,\n                iconTitle: getFileExtensionTitle(this.value),\n            },\n        ];\n    }\n\n    private handleKeyDown(event: KeyboardEvent) {\n        if (\n            event.code === 'Tab' ||\n            event.code === 'Backspace' ||\n            event.code === 'Enter'\n        ) {\n            return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    private handleKeyUp(event: KeyboardEvent) {\n        if (event.code === 'Enter' && !this.value) {\n            this.fileInput.click();\n        }\n    }\n\n    private handleFileSelection(event: Event) {\n        event.stopPropagation();\n        event.preventDefault();\n        if (!this.value) {\n            this.fileInput.click();\n        }\n    }\n\n    private handleFileChange(event: Event) {\n        if (this.fileInput.files.length > 0) {\n            event.stopPropagation();\n            this.handleFile(this.fileInput.files[0]);\n        }\n    }\n\n    private handleFile(file) {\n        const limeFile: FileInfo = {\n            id: createRandomString(),\n            filename: file.name,\n            contentType: file.type,\n            size: file.size,\n            fileContent: file,\n        };\n        this.change.emit(limeFile);\n        this.chipSet.blur();\n        this.mdcTextField.valid = true;\n    }\n\n    private handleChipSetChange(event: CustomEvent) {\n        event.stopPropagation();\n        const file = !event.detail.length ? event.detail[0] : null;\n        this.chipSet.blur();\n        if (!file) {\n            this.fileInput.value = '';\n            this.change.emit(file);\n            if (this.required) {\n                this.mdcTextField.valid = false;\n            }\n        }\n    }\n\n    private handleChipInteract(event: CustomEvent<Chip>) {\n        event.stopPropagation();\n        event.preventDefault();\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"]}

package/dist/collection/components/form/form.js

@@ -10,8 +10,7 @@ import { ObjectField as CustomObjectField } from './fields/object-field';
 import { widgets } from './widgets';
 import { createRandomString } from '../../util/random-string';
 import Ajv from 'ajv';
-import addFormats from 'ajv-formats';
-import { isInteger, isNumber } from './validators';
+import { isInteger } from './validators';
 import { mapValues } from 'lodash-es';
 /**
  * @exampleComponent limel-example-form
@@ -127,24 +126,16 @@ export class Form {
   }
   createValidator() {
     const validator = new Ajv({
+      unknownFormats: 'ignore',
       allErrors: true,
       multipleOfPrecision: 2,
-      allowUnionTypes: true,
-      strict: 'log',
-      validateSchema: 'log',
-      keywords: ['lime', 'many', 'inline'],
-      formats: {
-        integer: isInteger,
-        decimal: isNumber,
-      },
-    });
-    addFormats(validator);
+    }).addFormat('integer', isInteger);
     this.validator = validator.compile(this.schema);
   }
   getValidationErrors() {
     const errors = this.validator.errors || [];
     return errors.map((error) => {
-      let property = error.instancePath;
+      let property = error.dataPath;
       if (error.keyword === 'required') {
         property = error.params.missingProperty;
       }

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

@@ -1 +1 @@
-{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../src/components/form/form.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    Watch,\n} from '@stencil/core';\nimport React from 'react';\nimport { createRoot, Root } from 'react-dom/client';\nimport JSONSchemaForm, { AjvError } from '@rjsf/core';\nimport retargetEvents from 'react-shadow-dom-retarget-events';\nimport { FormError, ValidationError, ValidationStatus } from '../../interface';\nimport {\n    ArrayFieldTemplate,\n    FieldTemplate,\n    ObjectFieldTemplate,\n} from './templates';\nimport { SchemaField as CustomSchemaField } from './fields/schema-field';\nimport { ArrayField as CustomArrayField } from './fields/array-field';\nimport { ObjectField as CustomObjectField } from './fields/object-field';\nimport { widgets } from './widgets';\nimport { createRandomString } from '../../util/random-string';\nimport Ajv, { ErrorObject, ValidateFunction } from 'ajv';\nimport addFormats from 'ajv-formats';\nimport { isInteger, isNumber } from './validators';\nimport { mapValues } from 'lodash-es';\n\n/**\n * @exampleComponent limel-example-form\n * @exampleComponent limel-example-nested-form\n * @exampleComponent limel-example-list-form\n * @exampleComponent limel-example-dynamic-form\n * @exampleComponent limel-example-custom-component-form\n * @exampleComponent limel-example-props-factory-form\n * @exampleComponent limel-example-form-layout\n * @exampleComponent limel-example-form-span-fields\n * @exampleComponent limel-example-custom-error-message\n * @exampleComponent limel-example-server-errors\n * @exampleComponent limel-example-form-row-layout\n */\n@Component({\n    tag: 'limel-form',\n    shadow: true,\n    styleUrl: 'form.scss',\n})\nexport class Form {\n    /**\n     * The schema used to render the form\n     */\n    @Prop()\n    public schema: {\n        id?: string;\n        [key: string]: any;\n    } = {};\n\n    /**\n     * Value of the form\n     */\n    @Prop()\n    public value: object;\n\n    /**\n     * Set to `true` to disable the whole form.\n     */\n    @Prop()\n    public disabled = false;\n\n    /**\n     * Factory for creating properties for custom form components\n     *\n     * When using custom components in the form some properties might have to be\n     * set dynamically. If this factory is set, it will be called with the\n     * current schema for the field for each custom component in the form. The\n     * factory must return an object where each key is the name of the property\n     * that should be set, along with its value.\n     */\n    @Prop()\n    public propsFactory?: (schema: Record<string, any>) => Record<string, any>;\n\n    /**\n     * Custom function to customize the default error messages\n     */\n    @Prop()\n    public transformErrors?: (errors: FormError[]) => FormError[];\n\n    /**\n     * Extra errors to display in the form. Typical use case is asynchronous\n     * errors generated server side.\n     */\n    @Prop()\n    public errors: ValidationError;\n\n    /**\n     * Emitted when a change is made within the form\n     */\n    @Event()\n    public change: EventEmitter<object>;\n\n    /**\n     * Emitted when the validity of the form changes, or when\n     * a change is made to an invalid form\n     */\n    @Event()\n    public validate: EventEmitter<ValidationStatus>;\n\n    @Element()\n    private host: HTMLLimelFormElement;\n\n    private isValid = true;\n    private modifiedSchema: object;\n    private validator: ValidateFunction;\n    private root: Root;\n\n    public constructor() {\n        this.handleChange = this.handleChange.bind(this);\n        this.getCustomErrorMessages = this.getCustomErrorMessages.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        this.setSchemaId();\n        this.createValidator();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        if (!this.host.shadowRoot.querySelector('.root')) {\n            return;\n        }\n\n        this.reactRender();\n        retargetEvents(this.host.shadowRoot);\n        this.validateForm(this.value);\n    }\n\n    public componentDidUpdate() {\n        this.reactRender();\n        this.validateForm(this.value);\n    }\n\n    public disconnectedCallback() {\n        if (this.root) {\n            this.root.unmount();\n            this.root = undefined;\n        }\n    }\n\n    public render() {\n        return <div class=\"root\" />;\n    }\n\n    private reactRender() {\n        if (!this.root) {\n            const rootElement = this.host.shadowRoot.querySelector('.root');\n            this.root = createRoot(rootElement);\n        }\n\n        this.root.render(\n            React.createElement(\n                JSONSchemaForm,\n                {\n                    schema: this.modifiedSchema,\n                    formData: this.value,\n                    onChange: this.handleChange,\n                    widgets: widgets,\n                    liveValidate: true,\n                    showErrorList: false,\n                    extraErrors: this.getExtraErrors(this.errors),\n                    FieldTemplate: FieldTemplate,\n                    ArrayFieldTemplate: ArrayFieldTemplate as any,\n                    ObjectFieldTemplate: ObjectFieldTemplate,\n                    disabled: this.disabled,\n                    transformErrors: this.getCustomErrorMessages,\n                    formContext: {\n                        schema: this.modifiedSchema,\n                        rootValue: this.value,\n                        propsFactory: this.propsFactory,\n                    },\n                    fields: {\n                        SchemaField: CustomSchemaField as any,\n                        ArrayField: CustomArrayField as any,\n                        ObjectField: CustomObjectField as any,\n                    },\n                },\n                []\n            )\n        );\n    }\n\n    private handleChange(event: any) {\n        this.change.emit(event.formData);\n    }\n\n    private validateForm(value: object) {\n        const isValid = this.validator(value) === true;\n        const errors: FormError[] = this.getValidationErrors();\n        const status: ValidationStatus = {\n            valid: isValid,\n            errors: errors,\n        };\n\n        if (this.isValid !== status.valid || !status.valid) {\n            this.validate.emit(status);\n        }\n\n        this.isValid = status.valid;\n    }\n\n    @Watch('schema')\n    public setSchema() {\n        this.setSchemaId();\n        this.createValidator();\n    }\n\n    private setSchemaId() {\n        // Due to a bug in react-jsonschema-form, validation will stop working if the schema is updated.\n        // A workaround at the moment is to always give it a unique ID\n        // https://github.com/rjsf-team/react-jsonschema-form/issues/1563\n        const id = `${this.schema.$id}-${createRandomString()}`;\n        this.modifiedSchema = {\n            ...this.schema,\n            id: id,\n            $id: id,\n        };\n    }\n\n    private createValidator() {\n        const validator = new Ajv({\n            allErrors: true,\n            multipleOfPrecision: 2,\n            allowUnionTypes: true,\n            strict: 'log',\n            validateSchema: 'log',\n            keywords: ['lime', 'many', 'inline'],\n            formats: {\n                integer: isInteger,\n                decimal: isNumber,\n            },\n        });\n        addFormats(validator);\n        this.validator = validator.compile(this.schema);\n    }\n\n    private getValidationErrors(): FormError[] {\n        const errors = this.validator.errors || [];\n\n        return errors.map((error: ErrorObject): FormError => {\n            let property = error.instancePath;\n            if (error.keyword === 'required') {\n                property = error.params.missingProperty;\n            }\n\n            return {\n                name: error.keyword,\n                property: property,\n                message: error.message,\n                schemaPath: error.schemaPath,\n            };\n        });\n    }\n\n    private getExtraErrors(errors: ValidationError): ExtraError | undefined {\n        if (!errors) {\n            return;\n        }\n\n        return mapValues(errors, (error) => {\n            if (Array.isArray(error)) {\n                return { __errors: error };\n            }\n\n            return this.getExtraErrors(error);\n        });\n    }\n\n    private getCustomErrorMessages(originalErrors: AjvError[]): AjvError[] {\n        if (!this.transformErrors) {\n            return originalErrors;\n        }\n\n        const errors: FormError[] = originalErrors.map((error: AjvError) => {\n            return {\n                name: error.name,\n                params: error.params,\n                property: error.property,\n                message: error.message,\n                // For some reason 'schemaPath' is missing from the AjvError type definition:\n                // https://github.com/rjsf-team/react-jsonschema-form/issues/2140\n                // eslint-disable-next-line @typescript-eslint/dot-notation\n                schemaPath: error['schemaPath'],\n            };\n        });\n\n        // Use `.call({}, …)` here to bind `this` to an empty object to prevent\n        // the consumer submitted `transformErrors` from getting access to our\n        // component's internals. /Ads\n        return this.transformErrors\n            .call({}, errors)\n            .map((transformedError: FormError) => {\n                const originalError = originalErrors.find((error: AjvError) => {\n                    return transformedError.property === error.property;\n                });\n\n                return {\n                    ...originalError,\n                    message: transformedError.message,\n                };\n            });\n    }\n}\n\ninterface ExtraError {\n    [key: string]:\n        | ExtraError\n        | {\n              __errors: string[];\n          };\n}\n"]}
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../src/components/form/form.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    Watch,\n} from '@stencil/core';\nimport React from 'react';\nimport { createRoot, Root } from 'react-dom/client';\nimport JSONSchemaForm, { AjvError } from '@rjsf/core';\nimport retargetEvents from 'react-shadow-dom-retarget-events';\nimport { FormError, ValidationError, ValidationStatus } from '../../interface';\nimport {\n    ArrayFieldTemplate,\n    FieldTemplate,\n    ObjectFieldTemplate,\n} from './templates';\nimport { SchemaField as CustomSchemaField } from './fields/schema-field';\nimport { ArrayField as CustomArrayField } from './fields/array-field';\nimport { ObjectField as CustomObjectField } from './fields/object-field';\nimport { widgets } from './widgets';\nimport { createRandomString } from '../../util/random-string';\nimport Ajv, { RequiredParams } from 'ajv';\nimport { isInteger } from './validators';\nimport { mapValues } from 'lodash-es';\n\n/**\n * @exampleComponent limel-example-form\n * @exampleComponent limel-example-nested-form\n * @exampleComponent limel-example-list-form\n * @exampleComponent limel-example-dynamic-form\n * @exampleComponent limel-example-custom-component-form\n * @exampleComponent limel-example-props-factory-form\n * @exampleComponent limel-example-form-layout\n * @exampleComponent limel-example-form-span-fields\n * @exampleComponent limel-example-custom-error-message\n * @exampleComponent limel-example-server-errors\n * @exampleComponent limel-example-form-row-layout\n */\n@Component({\n    tag: 'limel-form',\n    shadow: true,\n    styleUrl: 'form.scss',\n})\nexport class Form {\n    /**\n     * The schema used to render the form\n     */\n    @Prop()\n    public schema: {\n        id?: string;\n        [key: string]: any;\n    } = {};\n\n    /**\n     * Value of the form\n     */\n    @Prop()\n    public value: object;\n\n    /**\n     * Set to `true` to disable the whole form.\n     */\n    @Prop()\n    public disabled = false;\n\n    /**\n     * Factory for creating properties for custom form components\n     *\n     * When using custom components in the form some properties might have to be\n     * set dynamically. If this factory is set, it will be called with the\n     * current schema for the field for each custom component in the form. The\n     * factory must return an object where each key is the name of the property\n     * that should be set, along with its value.\n     */\n    @Prop()\n    public propsFactory?: (schema: Record<string, any>) => Record<string, any>;\n\n    /**\n     * Custom function to customize the default error messages\n     */\n    @Prop()\n    public transformErrors?: (errors: FormError[]) => FormError[];\n\n    /**\n     * Extra errors to display in the form. Typical use case is asynchronous\n     * errors generated server side.\n     */\n    @Prop()\n    public errors: ValidationError;\n\n    /**\n     * Emitted when a change is made within the form\n     */\n    @Event()\n    public change: EventEmitter<object>;\n\n    /**\n     * Emitted when the validity of the form changes, or when\n     * a change is made to an invalid form\n     */\n    @Event()\n    public validate: EventEmitter<ValidationStatus>;\n\n    @Element()\n    private host: HTMLLimelFormElement;\n\n    private isValid = true;\n    private modifiedSchema: object;\n    private validator: Ajv.ValidateFunction;\n    private root: Root;\n\n    public constructor() {\n        this.handleChange = this.handleChange.bind(this);\n        this.getCustomErrorMessages = this.getCustomErrorMessages.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        this.setSchemaId();\n        this.createValidator();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        if (!this.host.shadowRoot.querySelector('.root')) {\n            return;\n        }\n\n        this.reactRender();\n        retargetEvents(this.host.shadowRoot);\n        this.validateForm(this.value);\n    }\n\n    public componentDidUpdate() {\n        this.reactRender();\n        this.validateForm(this.value);\n    }\n\n    public disconnectedCallback() {\n        if (this.root) {\n            this.root.unmount();\n            this.root = undefined;\n        }\n    }\n\n    public render() {\n        return <div class=\"root\" />;\n    }\n\n    private reactRender() {\n        if (!this.root) {\n            const rootElement = this.host.shadowRoot.querySelector('.root');\n            this.root = createRoot(rootElement);\n        }\n\n        this.root.render(\n            React.createElement(\n                JSONSchemaForm,\n                {\n                    schema: this.modifiedSchema,\n                    formData: this.value,\n                    onChange: this.handleChange,\n                    widgets: widgets,\n                    liveValidate: true,\n                    showErrorList: false,\n                    extraErrors: this.getExtraErrors(this.errors),\n                    FieldTemplate: FieldTemplate,\n                    ArrayFieldTemplate: ArrayFieldTemplate as any,\n                    ObjectFieldTemplate: ObjectFieldTemplate,\n                    disabled: this.disabled,\n                    transformErrors: this.getCustomErrorMessages,\n                    formContext: {\n                        schema: this.modifiedSchema,\n                        rootValue: this.value,\n                        propsFactory: this.propsFactory,\n                    },\n                    fields: {\n                        SchemaField: CustomSchemaField as any,\n                        ArrayField: CustomArrayField as any,\n                        ObjectField: CustomObjectField as any,\n                    },\n                },\n                []\n            )\n        );\n    }\n\n    private handleChange(event: any) {\n        this.change.emit(event.formData);\n    }\n\n    private validateForm(value: object) {\n        const isValid = this.validator(value) === true;\n        const errors: FormError[] = this.getValidationErrors();\n        const status: ValidationStatus = {\n            valid: isValid,\n            errors: errors,\n        };\n\n        if (this.isValid !== status.valid || !status.valid) {\n            this.validate.emit(status);\n        }\n\n        this.isValid = status.valid;\n    }\n\n    @Watch('schema')\n    public setSchema() {\n        this.setSchemaId();\n        this.createValidator();\n    }\n\n    private setSchemaId() {\n        // Due to a bug in react-jsonschema-form, validation will stop working if the schema is updated.\n        // A workaround at the moment is to always give it a unique ID\n        // https://github.com/rjsf-team/react-jsonschema-form/issues/1563\n        const id = `${this.schema.$id}-${createRandomString()}`;\n        this.modifiedSchema = {\n            ...this.schema,\n            id: id,\n            $id: id,\n        };\n    }\n\n    private createValidator() {\n        const validator = new Ajv({\n            unknownFormats: 'ignore',\n            allErrors: true,\n            multipleOfPrecision: 2,\n        }).addFormat('integer', isInteger);\n        this.validator = validator.compile(this.schema);\n    }\n\n    private getValidationErrors(): FormError[] {\n        const errors = this.validator.errors || [];\n\n        return errors.map((error: Ajv.ErrorObject): FormError => {\n            let property = error.dataPath;\n            if (error.keyword === 'required') {\n                property = (error.params as RequiredParams).missingProperty;\n            }\n\n            return {\n                name: error.keyword,\n                property: property,\n                message: error.message,\n                schemaPath: error.schemaPath,\n            };\n        });\n    }\n\n    private getExtraErrors(errors: ValidationError): ExtraError | undefined {\n        if (!errors) {\n            return;\n        }\n\n        return mapValues(errors, (error) => {\n            if (Array.isArray(error)) {\n                return { __errors: error };\n            }\n\n            return this.getExtraErrors(error);\n        });\n    }\n\n    private getCustomErrorMessages(originalErrors: AjvError[]): AjvError[] {\n        if (!this.transformErrors) {\n            return originalErrors;\n        }\n\n        const errors: FormError[] = originalErrors.map((error: AjvError) => {\n            return {\n                name: error.name,\n                params: error.params,\n                property: error.property,\n                message: error.message,\n                // For some reason 'schemaPath' is missing from the AjvError type definition:\n                // https://github.com/rjsf-team/react-jsonschema-form/issues/2140\n                // eslint-disable-next-line @typescript-eslint/dot-notation\n                schemaPath: error['schemaPath'],\n            };\n        });\n\n        // Use `.call({}, …)` here to bind `this` to an empty object to prevent\n        // the consumer submitted `transformErrors` from getting access to our\n        // component's internals. /Ads\n        return this.transformErrors\n            .call({}, errors)\n            .map((transformedError: FormError) => {\n                const originalError = originalErrors.find((error: AjvError) => {\n                    return transformedError.property === error.property;\n                });\n\n                return {\n                    ...originalError,\n                    message: transformedError.message,\n                };\n            });\n    }\n}\n\ninterface ExtraError {\n    [key: string]:\n        | ExtraError\n        | {\n              __errors: string[];\n          };\n}\n"]}

package/dist/collection/components/form/validators/format.js

@@ -1,7 +1,4 @@
 export function isInteger(data) {
   return Number.isInteger(Number(data));
 }
-export function isNumber(data) {
-  return Number.isFinite(Number(data));
-}
 //# sourceMappingURL=format.js.map

package/dist/collection/components/form/validators/format.js.map

@@ -1 +1 @@
-{"version":3,"file":"format.js","sourceRoot":"","sources":["../../../../src/components/form/validators/format.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,SAAS,CAAC,IAAY;EAClC,OAAO,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,IAAY;EACjC,OAAO,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AACzC,CAAC","sourcesContent":["export function isInteger(data: string): boolean {\n    return Number.isInteger(Number(data));\n}\n\nexport function isNumber(data: string): boolean {\n    return Number.isFinite(Number(data));\n}\n"]}
+{"version":3,"file":"format.js","sourceRoot":"","sources":["../../../../src/components/form/validators/format.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,SAAS,CAAC,IAAY;EAClC,OAAO,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,CAAC","sourcesContent":["export function isInteger(data: string): boolean {\n    return Number.isInteger(Number(data));\n}\n"]}

package/dist/collection/components/input-field/input-field.css

@@ -1978,12 +1978,6 @@
   color: rgba(var(--contrast-1400), 0.5);
 }
 
-.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,
-.mdc-text-field:not(.mdc-text-field--disabled) + .mdc-text-field-helper-line .mdc-text-field-helper-text {
-  color: rgba(var(--contrast-1200), 1);
-}
-
 .lime-empty-value-for-readonly {
   z-index: 1;
   position: absolute;

package/dist/collection/components/input-field/input-field.js

@@ -113,10 +113,16 @@ export class InputField {
       this.isFocused = false;
       this.isModified = true;
     };
+    this.hasHelperText = () => {
+      return this.helperText !== null && this.helperText !== undefined;
+    };
+    this.hasHelperLine = () => {
+      return this.maxlength || this.hasHelperText();
+    };
     this.renderHelperLine = () => {
       const text = this.value || '';
       const length = text.length;
-      if (!this.maxlength && !this.hasHelperText()) {
+      if (!this.hasHelperLine()) {
         return;
       }
       return (h("limel-helper-line", { helperTextId: this.helperTextId, helperText: this.helperText, length: length, maxLength: this.maxlength, invalid: this.isInvalid() }));
@@ -126,9 +132,6 @@ export class InputField {
         return (h("span", { class: "lime-empty-value-for-readonly lime-looks-like-input-value" }, "\u2013"));
       }
     };
-    this.hasHelperText = () => {
-      return this.helperText !== null && this.helperText !== undefined;
-    };
     this.renderSuffix = () => {
       if (!this.hasSuffix() || this.type === 'textarea') {
         return;