npm - @limetech/lime-elements - Versions diffs - 37.3.0 → 37.4.1 - Mend

@limetech/lime-elements 37.3.0 → 37.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (108) hide show

package/dist/collection/components/chip/chip.css CHANGED Viewed

@@ -61,6 +61,7 @@
   isolation: isolate;
   display: inline-flex;
   align-items: center;
+  min-width: 0;
 }
 * {
@@ -70,6 +71,7 @@
 .chip {
   all: unset;
   position: relative;
+  min-width: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -195,6 +197,7 @@ limel-badge {
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
   z-index: 1;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/collection/components/chip-set/chip-set.css CHANGED Viewed

@@ -1885,6 +1885,13 @@
   color: rgba(var(--contrast-1400), 0.5);
 }
+.mdc-floating-label--float-above {
+  transform: translateY(-1.6875rem) scale(0.75) !important;
+}
+.mdc-text-field--with-leading-icon .mdc-floating-label--float-above {
+  transform: translateY(-1.5625rem) translateX(-1.25rem) scale(0.75) !important;
+}
 .mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
 .mdc-text-field--outlined.mdc-text-field--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above,
 .mdc-text-field--outlined.mdc-text-field--textarea.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
@@ -1936,7 +1943,7 @@
 }
 .mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon {
   width: 1.5rem;
-  margin-right: 0.5rem;
+  margin-right: 0.25rem;
 }
 .mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon:hover .mdc-text-field__icon--trailing:hover {
   box-shadow: var(--button-shadow-hovered);
@@ -1978,16 +1985,17 @@
 .mdc-chip-set {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem;
-  min-height: 3.5rem;
+  min-height: 2.5rem;
   position: relative;
 }
 .mdc-chip-set.chip-set--with-label .lime-floating-label--float-above {
   padding-left: 0.25rem;
 }
 .mdc-chip-set.mdc-chip-set--input {
-  padding: 0.5rem;
+  padding: 0.4rem 0.5rem;
   width: 100%;
 }
 .mdc-chip-set.has-clear-all-button.mdc-chip-set--input {
@@ -2037,7 +2045,7 @@
 }
 .lime-notched-outline--notched .mdc-notched-outline__notch .lime-floating-label--float-above {
   top: 1.6875rem;
-  transform: translateY(-34.75px) scale(0.75);
+  transform: translateY(-34.75px) scale(0.75) !important;
   font-size: 0.875rem;
 }
@@ -2056,7 +2064,7 @@
   background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs/><path fill='rgb(255,255,255)' d='M7.219 5.781L5.78 7.22 14.563 16 5.78 24.781 7.22 26.22 16 17.437l8.781 8.782 1.438-1.438L17.437 16l8.782-8.781L24.78 5.78 16 14.563z'/></svg>");
   position: absolute;
   right: 0.5rem;
-  top: 1.125rem;
+  top: calc(2.5rem / 4);
   opacity: 0;
 }
 .clear-all-button:hover {
@@ -2084,22 +2092,22 @@
 }
 .has-leading-icon:not(.has-chips) .mdc-text-field__input {
-  padding-left: 2.5rem;
+  padding-left: 1.5rem;
 }
 .has-leading-icon:not(.has-chips) .mdc-floating-label:not(.lime-floating-label--float-above) {
-  left: 2.5rem;
+  left: 1.5rem;
 }
 .has-leading-icon:not(.has-chips) .mdc-floating-label.mdc-floating-label--float-above {
   left: 0.25rem;
 }
 .has-leading-icon limel-chip:first-of-type {
-  margin-left: 40px;
+  margin-left: 1.5rem;
 }
 .has-leading-icon .search-icon {
   transition: transform 0.2s ease;
   position: absolute;
-  top: 1rem;
-  left: 1rem;
+  top: 0.5625rem;
+  left: 0.25rem;
 }
 .has-leading-icon limel-icon {
   background-color: transparent;
@@ -2122,8 +2130,12 @@ limel-chip.can-be-removed {
   display: none;
 }
+:host(limel-chip-set[readonly]) .mdc-text-field.mdc-text-field--disabled {
+  pointer-events: auto;
+}
 :host {
-  --dropzone-margin: 0.25rem;
+  --dropzone-margin: 0.125rem;
   --dropzone-color: rgb(var(--contrast-600));
 }
@@ -2242,4 +2254,8 @@ limel-chip.can-be-removed {
 :host(limel-chip-set:focus-within) limel-helper-line,
 :host(limel-chip-set:hover) limel-helper-line {
   will-change: grid-template-rows;
+}
+.mdc-text-field.mdc-text-field--outlined {
+  min-height: 2.5rem;
 }

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

@@ -317,8 +317,9 @@ export class ChipSet {
     ];
   }
   getChipProps(chip, chipType) {
-    const removable = this.type === 'input' && chip.removable;
-    return Object.assign({ role: 'row', identifier: chip.id, text: chip.text, icon: chip.icon, badge: chip.badge, selected: chip.selected, disabled: this.disabled, readonly: this.readonly, type: chipType, removable: removable, onClick: this.catchInputChipClicks(chip), onRemove: this.handleRemoveChip }, (chip.href && {
+    const removable = this.type === 'input' && chip.removable && !this.readonly;
+    const readonly = this.readonly && this.type !== 'input';
+    return Object.assign({ role: 'row', identifier: chip.id, text: chip.text, icon: chip.icon, badge: chip.badge, selected: chip.selected, disabled: this.disabled, readonly: readonly, type: chipType, removable: removable, onClick: this.catchInputChipClicks(chip), onRemove: this.handleRemoveChip }, (chip.href && {
       link: {
         href: getHref(chip.href),
         target: getTarget(chip.href),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"chip-set.js","sourceRoot":"","sources":["../../../src/components/chip-set/chip-set.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Chip, ChipType } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\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';\nimport { LimelChipCustomEvent } from 'src/components';\n\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.\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 @State()\n private selectedChipIds: Array<string \| number>;\n\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.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 public connectedCallback() {\n this.initialize();\n }\n\n private initialize() {\n if (this.value.length) {\n this.selectedChipIds = this.value\n .filter((chip) => chip.selected)\n .map((chip) => chip.id);\n }\n }\n\n /\n Used to find out whether the chip-set is in edit mode.\n \n @returns `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 \n @param emptyInput - if `true`, any text in the input is discarded\n * @returns 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 \n @returns 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 this.triggerIconColorWarning(this.value);\n\n if (this.type === 'input') {\n this.mdcTextField = new MDCTextField(\n this.host.shadowRoot.querySelector('.mdc-text-field'),\n );\n }\n }\n\n public componentDidUpdate() {\n const input = this.host.shadowRoot.querySelector('input');\n if (input && this.editMode) {\n input.focus();\n }\n }\n\n public disconnectedCallback() {\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 const value = this.getValue();\n\n return (\n <div class={classes} role=\"grid\">\n {chipSetLabel}\n {value.map(this.renderChip)}\n {this.renderHelperLine()}\n </div>\n );\n }\n\n private getValue = () => {\n return this.value.map((chip) => ({\n ...chip,\n ...(this.type && {\n selected: this.selectedChipIds.includes(chip.id),\n }),\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 this.initialize();\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 /\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 /\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 emitInteraction(chip: Chip) {\n this.interact.emit(chip);\n }\n\n private renderChip(chip: Chip) {\n const chipType: ChipType =\n this.type === 'filter' ? 'filter' : 'default';\n\n const chipProps = this.getChipProps(chip, chipType);\n\n return <limel-chip {...chipProps} />;\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 renderInputChip(chip: Chip, index: number) {\n const chipProps = this.getChipProps(chip, 'default');\n\n return [\n <limel-chip\n key={chip.id}\n class={{\n 'can-be-removed': this.inputChipIndexSelected === index,\n }}\n {...chipProps}\n />,\n this.renderDelimiter(),\n ];\n }\n\n private getChipProps(chip: Chip, chipType: ChipType) {\n const removable = this.type === 'input' && chip.removable;\n\n return {\n role: 'row',\n identifier: chip.id,\n text: chip.text,\n icon: chip.icon,\n badge: chip.badge,\n selected: chip.selected,\n disabled: this.disabled,\n readonly: this.readonly,\n type: chipType,\n removable: removable,\n onClick: this.catchInputChipClicks(chip),\n onRemove: this.handleRemoveChip,\n ...(chip.href && {\n link: {\n href: getHref(chip.href),\n target: getTarget(chip.href),\n },\n }),\n };\n }\n\n private catchInputChipClicks = (chip: Chip) => () => {\n if (this.isSelectableChip(chip)) {\n this.updateSelectedChipIds(chip);\n this.change.emit(chip);\n }\n\n this.emitInteraction(chip);\n };\n\n private isSelectableChip(chip: Chip): boolean {\n return this.type !== 'input' && 'selected' in chip;\n }\n\n private updateSelectedChipIds(chip: Chip): void {\n chip.selected = !chip.selected;\n const id = chip.id;\n if (this.type === 'choice') {\n this.updateChoiceTypeSelectedIds(id);\n } else {\n this.updateFilterTypeSelectedIds(id);\n }\n }\n\n private updateChoiceTypeSelectedIds(id: number \| string): void {\n this.selectedChipIds = this.isChipSelected(id) ? [] : [id];\n }\n\n private isChipSelected(id: number \| string): boolean {\n return !!this.selectedChipIds.find((chipId) => chipId === id);\n }\n\n private updateFilterTypeSelectedIds(id: number \| string): void {\n if (this.isChipSelected(id)) {\n this.removeChipIdFromSelectedChipIds(id);\n } else {\n this.addChipIdToSelectedChipIds(id);\n }\n }\n\n private removeChipIdFromSelectedChipIds(id: number \| string): void {\n this.selectedChipIds = this.selectedChipIds.filter(\n (chipId) => chipId !== id,\n );\n }\n\n private addChipIdToSelectedChipIds(id: number \| string): void {\n this.selectedChipIds = [...this.selectedChipIds, id];\n }\n\n private handleRemoveChip = (\n event: LimelChipCustomEvent<string \| number>,\n ) => {\n this.removeChip(event.detail);\n };\n\n private removeChip = (identifier: string \| number) => {\n const newValue = this.value.filter((chip) => {\n return chip.id !== identifier;\n });\n this.change.emit(newValue);\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 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 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 triggerIconColorWarning(value: Chip[]) {\n for (const chip of value) {\n if (\n chip.icon &&\n (chip.iconFillColor \|\|\n chip.iconBackgroundColor \|\|\n chip.iconTitle)\n ) {\n / eslint-disable-next-line no-console */\n console.warn(\n \"The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.\",\n );\n }\n }\n }\n}\n"]}
1	+ {"version":3,"file":"chip-set.js","sourceRoot":"","sources":["../../../src/components/chip-set/chip-set.tsx"],"names":[],"mappings":"AAEA,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;AAGpC,MAAM,oBAAoB,GAAG,CAAC,CAAC;AAE/B;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,OAAO;EAuKhB;IAFQ,kBAAa,GAAG,mBAAmB,CAAC;IA4HpC,aAAQ,GAAG,GAAG,EAAE;MACpB,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iCACzB,IAAI,GACJ,CAAC,IAAI,CAAC,IAAI,IAAI;QACb,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;OACnD,CAAC,EACJ,CAAC,CAAC;IACR,CAAC,CAAC;IAkFM,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;IAqGM,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;IA4CM,yBAAoB,GAAG,CAAC,IAAU,EAAE,EAAE,CAAC,GAAG,EAAE;MAChD,IAAI,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;QAC7B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;QACjC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;OAC1B;MAED,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC,CAAC;IA0CM,qBAAgB,GAAG,CACvB,KAA4C,EAC9C,EAAE;MACA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC,CAAC;IAEM,eAAU,GAAG,CAAC,UAA2B,EAAE,EAAE;MACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;QACxC,OAAO,IAAI,CAAC,EAAE,KAAK,UAAU,CAAC;MAClC,CAAC,CAAC,CAAC;MACH,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC,CAAC;IAgCM,uBAAkB,GAAG,GAAW,EAAE;MACtC,OAAO,SAAS,CAAC,GAAG,CAAC,oBAAoB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9D,CAAC,CAAC;iBA5pBqB,EAAE;;;;oBAmCE,KAAK;oBASL,KAAK;mBAOf,KAAK;qBAOgB,MAAM;;oBAajB,KAAK;;4BAYG,IAAI;0BAMN,IAAI;uBAOR,IAAI;qBAMN,IAAI;oBAOF,IAAI;oBAoCL,KAAK;qBAGL,EAAE;mBAGH,KAAK;kCAGS,IAAI;;IASzC,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,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;EAEM,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;MACnB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK;SAC5B,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC/B,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC/B;EACL,CAAC;EAED;;;;KAIG;EAEI,KAAK,CAAC,WAAW;IACpB,OAAO,IAAI,CAAC,QAAQ,CAAC;EACzB,CAAC;EAED;;;;;KAKG;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;;;;;KAKG;EAEI,KAAK,CAAC,UAAU;IACnB,IAAI,CAAC,cAAc,EAAE,CAAC;EAC1B,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEzC,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;EACL,CAAC;EAEM,kBAAkB;IACrB,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,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,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAE9B,OAAO,CACH,WAAK,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,MAAM;MAC3B,YAAY;MACZ,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;MAC1B,IAAI,CAAC,gBAAgB,EAAE,CACtB,CACT,CAAC;EACN,CAAC;EAYS,iBAAiB,CAAC,QAAgB,EAAE,QAAgB;IAC1D,IAAI,OAAO,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE;MAC7B,OAAO;KACV;IAED,IAAI,CAAC,cAAc,EAAE,CAAC;IACtB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,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,IAAI,CAAC,QAAQ,EAAE;MACf,yCAAyC;MACzC,OAAO,KAAK,CAAC;KAChB;IAED,IAAI,IAAI,CAAC,OAAO,EAAE;MACd,OAAO,IAAI,CAAC;KACf;IAED,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;;KAEG;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;;;KAGG;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,eAAe,CAAC,IAAU;IAC9B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAEO,UAAU,CAAC,IAAU;IACzB,MAAM,QAAQ,GACV,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAElD,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAEpD,OAAO,kCAAgB,SAAS,EAAI,CAAC;EACzC,CAAC;EAqBO,eAAe,CAAC,IAAU,EAAE,KAAa;IAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAErD,OAAO;MACH,gCACI,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,KAAK,EAAE;UACH,gBAAgB,EAAE,IAAI,CAAC,sBAAsB,KAAK,KAAK;SAC1D,IACG,SAAS,EACf;MACF,IAAI,CAAC,eAAe,EAAE;KACzB,CAAC;EACN,CAAC;EAEO,YAAY,CAAC,IAAU,EAAE,QAAkB;IAC/C,MAAM,SAAS,GACX,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC9D,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC;IAExD,uBACI,IAAI,EAAE,KAAK,EACX,UAAU,EAAE,IAAI,CAAC,EAAE,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EACxC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,IAC5B,CAAC,IAAI,CAAC,IAAI,IAAI;MACb,IAAI,EAAE;QACF,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;QACxB,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;OAC/B;KACJ,CAAC,EACJ;EACN,CAAC;EAWO,gBAAgB,CAAC,IAAU;IAC/B,OAAO,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,UAAU,IAAI,IAAI,CAAC;EACvD,CAAC;EAEO,qBAAqB,CAAC,IAAU;IACpC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACnB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MACxB,IAAI,CAAC,2BAA2B,CAAC,EAAE,CAAC,CAAC;KACxC;SAAM;MACH,IAAI,CAAC,2BAA2B,CAAC,EAAE,CAAC,CAAC;KACxC;EACL,CAAC;EAEO,2BAA2B,CAAC,EAAmB;IACnD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;EAC/D,CAAC;EAEO,cAAc,CAAC,EAAmB;IACtC,OAAO,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC;EAClE,CAAC;EAEO,2BAA2B,CAAC,EAAmB;IACnD,IAAI,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE;MACzB,IAAI,CAAC,+BAA+B,CAAC,EAAE,CAAC,CAAC;KAC5C;SAAM;MACH,IAAI,CAAC,0BAA0B,CAAC,EAAE,CAAC,CAAC;KACvC;EACL,CAAC;EAEO,+BAA+B,CAAC,EAAmB;IACvD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAC9C,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,KAAK,EAAE,CAC5B,CAAC;EACN,CAAC;EAEO,0BAA0B,CAAC,EAAmB;IAClD,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;EACzD,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,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;EAMO,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,uBAAuB,CAAC,KAAa;IACzC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;MACtB,IACI,IAAI,CAAC,IAAI;QACT,CAAC,IAAI,CAAC,aAAa;UACf,IAAI,CAAC,mBAAmB;UACxB,IAAI,CAAC,SAAS,CAAC,EACrB;QACE,yCAAyC;QACzC,OAAO,CAAC,IAAI,CACR,mUAAmU,CACtU,CAAC;OACL;KACJ;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Chip, ChipType } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\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';\nimport { LimelChipCustomEvent } from 'src/components';\n\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.\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 @State()\n private selectedChipIds: Array<string \| number>;\n\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.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 public connectedCallback() {\n this.initialize();\n }\n\n private initialize() {\n if (this.value.length) {\n this.selectedChipIds = this.value\n .filter((chip) => chip.selected)\n .map((chip) => chip.id);\n }\n }\n\n /\n Used to find out whether the chip-set is in edit mode.\n \n @returns `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 \n @param emptyInput - if `true`, any text in the input is discarded\n * @returns 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 \n @returns 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 this.triggerIconColorWarning(this.value);\n\n if (this.type === 'input') {\n this.mdcTextField = new MDCTextField(\n this.host.shadowRoot.querySelector('.mdc-text-field'),\n );\n }\n }\n\n public componentDidUpdate() {\n const input = this.host.shadowRoot.querySelector('input');\n if (input && this.editMode) {\n input.focus();\n }\n }\n\n public disconnectedCallback() {\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 const value = this.getValue();\n\n return (\n <div class={classes} role=\"grid\">\n {chipSetLabel}\n {value.map(this.renderChip)}\n {this.renderHelperLine()}\n </div>\n );\n }\n\n private getValue = () => {\n return this.value.map((chip) => ({\n ...chip,\n ...(this.type && {\n selected: this.selectedChipIds.includes(chip.id),\n }),\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 this.initialize();\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 /\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 /\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 emitInteraction(chip: Chip) {\n this.interact.emit(chip);\n }\n\n private renderChip(chip: Chip) {\n const chipType: ChipType =\n this.type === 'filter' ? 'filter' : 'default';\n\n const chipProps = this.getChipProps(chip, chipType);\n\n return <limel-chip {...chipProps} />;\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 renderInputChip(chip: Chip, index: number) {\n const chipProps = this.getChipProps(chip, 'default');\n\n return [\n <limel-chip\n key={chip.id}\n class={{\n 'can-be-removed': this.inputChipIndexSelected === index,\n }}\n {...chipProps}\n />,\n this.renderDelimiter(),\n ];\n }\n\n private getChipProps(chip: Chip, chipType: ChipType) {\n const removable =\n this.type === 'input' && chip.removable && !this.readonly;\n const readonly = this.readonly && this.type !== 'input';\n\n return {\n role: 'row',\n identifier: chip.id,\n text: chip.text,\n icon: chip.icon,\n badge: chip.badge,\n selected: chip.selected,\n disabled: this.disabled,\n readonly: readonly,\n type: chipType,\n removable: removable,\n onClick: this.catchInputChipClicks(chip),\n onRemove: this.handleRemoveChip,\n ...(chip.href && {\n link: {\n href: getHref(chip.href),\n target: getTarget(chip.href),\n },\n }),\n };\n }\n\n private catchInputChipClicks = (chip: Chip) => () => {\n if (this.isSelectableChip(chip)) {\n this.updateSelectedChipIds(chip);\n this.change.emit(chip);\n }\n\n this.emitInteraction(chip);\n };\n\n private isSelectableChip(chip: Chip): boolean {\n return this.type !== 'input' && 'selected' in chip;\n }\n\n private updateSelectedChipIds(chip: Chip): void {\n chip.selected = !chip.selected;\n const id = chip.id;\n if (this.type === 'choice') {\n this.updateChoiceTypeSelectedIds(id);\n } else {\n this.updateFilterTypeSelectedIds(id);\n }\n }\n\n private updateChoiceTypeSelectedIds(id: number \| string): void {\n this.selectedChipIds = this.isChipSelected(id) ? [] : [id];\n }\n\n private isChipSelected(id: number \| string): boolean {\n return !!this.selectedChipIds.find((chipId) => chipId === id);\n }\n\n private updateFilterTypeSelectedIds(id: number \| string): void {\n if (this.isChipSelected(id)) {\n this.removeChipIdFromSelectedChipIds(id);\n } else {\n this.addChipIdToSelectedChipIds(id);\n }\n }\n\n private removeChipIdFromSelectedChipIds(id: number \| string): void {\n this.selectedChipIds = this.selectedChipIds.filter(\n (chipId) => chipId !== id,\n );\n }\n\n private addChipIdToSelectedChipIds(id: number \| string): void {\n this.selectedChipIds = [...this.selectedChipIds, id];\n }\n\n private handleRemoveChip = (\n event: LimelChipCustomEvent<string \| number>,\n ) => {\n this.removeChip(event.detail);\n };\n\n private removeChip = (identifier: string \| number) => {\n const newValue = this.value.filter((chip) => {\n return chip.id !== identifier;\n });\n this.change.emit(newValue);\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 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 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 triggerIconColorWarning(value: Chip[]) {\n for (const chip of value) {\n if (\n chip.icon &&\n (chip.iconFillColor \|\|\n chip.iconBackgroundColor \|\|\n chip.iconTitle)\n ) {\n / eslint-disable-next-line no-console */\n console.warn(\n \"The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.\",\n );\n }\n }\n }\n}\n"]}

package/dist/collection/components/collapsible-section/collapsible-section.css CHANGED Viewed

@@ -176,8 +176,7 @@ header {
   display: flex;
   justify-content: space-between;
   padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  height: 3rem;
+  height: 2.5rem;
 }
 .title {

package/dist/collection/components/color-picker/color-picker-palette.css CHANGED Viewed

@@ -689,6 +689,72 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+/*
+ * This file is imported into every component that uses MDC!
+ *
+ * Anything in this file that generates CSS output on its own,
+ * without being explicitly used, will output that CSS in every
+ * single component, increasing the size of the production build.
+ * Avoid that unless there's very good reason for it!
+ */
+/*
+ * This file is imported into every component that uses MDC!
+ *
+ * Anything in this file that generates CSS output on its own,
+ * without being explicitly used, will output that CSS in every
+ * single component, increasing the size of the production build.
+ * Avoid that unless there's very good reason for it!
+ */
+:host {
+  --mdc-theme-primary: var(
+      --lime-primary-color,
+      rgb(var(--color-teal-default))
+  );
+  --mdc-theme-secondary: var(
+      --lime-secondary-color,
+      rgb(var(--contrast-1100))
+  );
+  --mdc-theme-on-primary: var(
+      --lime-on-primary-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-on-secondary: var(
+      --lime-on-secondary-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-text-disabled-on-background: var(
+      --lime-text-disabled-on-background-color,
+      rgba(var(--contrast-1700), 0.38)
+  );
+  --mdc-theme-text-primary-on-background: var(
+      --lime-text-primary-on-background-color,
+      rgba(var(--contrast-1700), 0.87)
+  );
+  --mdc-theme-text-secondary-on-background: var(
+      --lime-text-secondary-on-background-color,
+      rgba(var(--contrast-1700), 0.54)
+  );
+  --mdc-theme-error: var(
+      --lime-error-background-color,
+      rgb(var(--color-red-dark))
+  );
+  --lime-error-text-color: rgb(var(--color-red-darker));
+  --mdc-theme-surface: var(
+      --lime-surface-background-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-on-surface: var(
+      --lime-on-surface-color,
+      rgb(var(--contrast-1500))
+  );
+}
 .picker-trigger[style="--background:lime-magenta;"]:after,
 .chosen-color-preview[style="--background:lime-magenta;"]:after {
   background-color: var(--lime-magenta);
@@ -727,13 +793,14 @@
 }
 :host {
+  position: relative;
   --popover-surface-width: 50rem;
   --color-picker-default-background: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
 }
 .color-picker {
   display: grid;
-  gap: 0.5rem;
+  gap: 0.25rem;
   grid-template-columns: auto 1fr;
 }
@@ -771,8 +838,8 @@
   box-sizing: border-box;
   position: relative;
   isolation: isolate;
-  width: 3.5rem;
-  height: 3.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
 }
 .chosen-color-preview:before, .chosen-color-preview:after,
 .picker-trigger:before,
@@ -801,7 +868,7 @@
 }
 .chosen-color-input[readonly] {
-  transform: translateY(1rem);
+  transform: translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4));
 }
 :host {

package/dist/collection/components/color-picker/color-picker.css CHANGED Viewed

@@ -52,6 +52,72 @@
 * 2. the CSS variables of `--kompendium-example-font-family`
 * in the `<style>` tag of `index.html`.
 */
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+/*
+ * This file is imported into every component that uses MDC!
+ *
+ * Anything in this file that generates CSS output on its own,
+ * without being explicitly used, will output that CSS in every
+ * single component, increasing the size of the production build.
+ * Avoid that unless there's very good reason for it!
+ */
+/*
+ * This file is imported into every component that uses MDC!
+ *
+ * Anything in this file that generates CSS output on its own,
+ * without being explicitly used, will output that CSS in every
+ * single component, increasing the size of the production build.
+ * Avoid that unless there's very good reason for it!
+ */
+:host {
+  --mdc-theme-primary: var(
+      --lime-primary-color,
+      rgb(var(--color-teal-default))
+  );
+  --mdc-theme-secondary: var(
+      --lime-secondary-color,
+      rgb(var(--contrast-1100))
+  );
+  --mdc-theme-on-primary: var(
+      --lime-on-primary-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-on-secondary: var(
+      --lime-on-secondary-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-text-disabled-on-background: var(
+      --lime-text-disabled-on-background-color,
+      rgba(var(--contrast-1700), 0.38)
+  );
+  --mdc-theme-text-primary-on-background: var(
+      --lime-text-primary-on-background-color,
+      rgba(var(--contrast-1700), 0.87)
+  );
+  --mdc-theme-text-secondary-on-background: var(
+      --lime-text-secondary-on-background-color,
+      rgba(var(--contrast-1700), 0.54)
+  );
+  --mdc-theme-error: var(
+      --lime-error-background-color,
+      rgb(var(--color-red-dark))
+  );
+  --lime-error-text-color: rgb(var(--color-red-darker));
+  --mdc-theme-surface: var(
+      --lime-surface-background-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-on-surface: var(
+      --lime-on-surface-color,
+      rgb(var(--contrast-1500))
+  );
+}
 .picker-trigger[style="--background:lime-magenta;"]:after,
 .chosen-color-preview[style="--background:lime-magenta;"]:after {
   background-color: var(--lime-magenta);
@@ -90,13 +156,14 @@
 }
 :host {
+  position: relative;
   --popover-surface-width: 50rem;
   --color-picker-default-background: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
 }
 .color-picker {
   display: grid;
-  gap: 0.5rem;
+  gap: 0.25rem;
   grid-template-columns: auto 1fr;
 }
@@ -134,8 +201,8 @@
   box-sizing: border-box;
   position: relative;
   isolation: isolate;
-  width: 3.5rem;
-  height: 3.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
 }
 .chosen-color-preview:before, .chosen-color-preview:after,
 .picker-trigger:before,
@@ -164,5 +231,5 @@
 }
 .chosen-color-input[readonly] {
-  transform: translateY(1rem);
+  transform: translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4));
 }

package/dist/collection/components/form/form.css CHANGED Viewed

@@ -448,7 +448,7 @@ limel-code-editor {
 }
 .limel-form-layout--grid {
-  --min-height-of-one-row: 3.5rem;
+  --min-height-of-one-row: 2.5rem;
   display: grid;
   column-gap: var(--form-column-gap, 1rem);
   row-gap: var(--form-row-gap, 1rem);
@@ -522,7 +522,6 @@ limel-code-editor {
   min-height: var(--min-height-of-one-row);
 }
 .limel-form-layout--grid limel-checkbox {
-  margin-top: 0.5rem;
   display: block;
 }
 .limel-form-layout--grid limel-switch {

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

@@ -41,6 +41,7 @@ import { getIconName } from '../icon/get-icon-props';
  * :::
  *
  * @exampleComponent limel-example-header
+ * @exampleComponent limel-example-header-slot-actions
  * @exampleComponent limel-example-header-colors
  * @exampleComponent limel-example-header-responsive
  * @exampleComponent limel-example-header-narrow

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

	@@ -1 +1 @@
1	- {"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG~~;AAMH,MAAM,OAAO,MAAM;;;;;;6BA8BqB,GAAG;;EAEhC,MAAM;IACT,OAAO;MACH,WAAK,KAAK,EAAC,aAAa;QACnB,IAAI,CAAC,UAAU,EAAE;QAClB,WAAK,KAAK,EAAC,UAAU;UACjB,UAAI,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IAClC,IAAI,CAAC,OAAO,CACZ;UACL,UAAI,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU;YACxC,IAAI,CAAC,UAAU;YACf,IAAI,CAAC,oBAAoB,EAAE,CAC3B,CACH,CACJ;MACN,YAAM,IAAI,EAAC,SAAS;QAChB,eAAQ,CACL;KACV,CAAC;EACN,CAAC;EAEO,UAAU;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAO,kBAAY,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;EAChE,CAAC;EAEO,oBAAoB;IACxB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACtB,OAAO;KACV;IAED,OAAO,CACH,YAAM,KAAK,EAAC,6BAA6B;MACpC,IAAI,CAAC,uBAAuB,EAAE;MAC9B,IAAI,CAAC,cAAc,CACjB,CACV,CAAC;EACN,CAAC;EAEO,uBAAuB;IAC3B,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;MACzB,OAAO;KACV;IAED,OAAO,gBAAO,IAAI,CAAC,iBAAiB,CAAQ,CAAC;EACjD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/*\n A header is the top most visual element in a component, page, card, or a view.\n \n ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n \n For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n \n \n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n \n :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n \n \n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n \n @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n /\n@Component({\n tag: 'limel-header',\n shadow: true,\n styleUrl: 'header.scss',\n})\nexport class Header {\n /\n Icon to display\n /\n @Prop()\n public icon?: string \| Icon;\n\n /\n Title to display\n /\n @Prop()\n public heading?: string;\n\n /\n Subheading to display\n /\n @Prop()\n public subheading?: string;\n\n /\n An extra string of text to display along with with the Subheading\n /\n @Prop()\n public supportingText?: string;\n\n /\n The visual divider that separates the `subheading` and the `supportingText`.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public subheadingDivider?: string = '·';\n\n public render() {\n return [\n <div class=\"information\">\n {this.renderIcon()}\n <div class=\"headings\">\n <h1 class=\"heading\" title={this.heading}>\n {this.heading}\n </h1>\n <h2 class=\"subheading\" title={this.subheading}>\n {this.subheading}\n {this.renderSupportingText()}\n </h2>\n </div>\n </div>,\n <slot name=\"actions\">\n <slot />\n </slot>,\n ];\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" badge={true} name={icon} />;\n }\n\n private renderSupportingText() {\n if (!this.supportingText) {\n return;\n }\n\n return (\n <span class=\"subheading__supporting-text\">\n {this.renderSubheadingDivider()}\n {this.supportingText}\n </span>\n );\n }\n\n private renderSubheadingDivider() {\n if (!this.subheadingDivider) {\n return;\n }\n\n return <span>{this.subheadingDivider}</span>;\n }\n}\n"]}
1	+ {"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AAMH,MAAM,OAAO,MAAM;;;;;;6BA8BqB,GAAG;;EAEhC,MAAM;IACT,OAAO;MACH,WAAK,KAAK,EAAC,aAAa;QACnB,IAAI,CAAC,UAAU,EAAE;QAClB,WAAK,KAAK,EAAC,UAAU;UACjB,UAAI,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IAClC,IAAI,CAAC,OAAO,CACZ;UACL,UAAI,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU;YACxC,IAAI,CAAC,UAAU;YACf,IAAI,CAAC,oBAAoB,EAAE,CAC3B,CACH,CACJ;MACN,YAAM,IAAI,EAAC,SAAS;QAChB,eAAQ,CACL;KACV,CAAC;EACN,CAAC;EAEO,UAAU;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAO,kBAAY,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;EAChE,CAAC;EAEO,oBAAoB;IACxB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACtB,OAAO;KACV;IAED,OAAO,CACH,YAAM,KAAK,EAAC,6BAA6B;MACpC,IAAI,CAAC,uBAAuB,EAAE;MAC9B,IAAI,CAAC,cAAc,CACjB,CACV,CAAC;EACN,CAAC;EAEO,uBAAuB;IAC3B,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;MACzB,OAAO;KACV;IAED,OAAO,gBAAO,IAAI,CAAC,iBAAiB,CAAQ,CAAC;EACjD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/*\n A header is the top most visual element in a component, page, card, or a view.\n \n ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n \n For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n \n \n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n \n :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n \n \n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n \n @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-slot-actions\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n /\n@Component({\n tag: 'limel-header',\n shadow: true,\n styleUrl: 'header.scss',\n})\nexport class Header {\n /\n Icon to display\n /\n @Prop()\n public icon?: string \| Icon;\n\n /\n Title to display\n /\n @Prop()\n public heading?: string;\n\n /\n Subheading to display\n /\n @Prop()\n public subheading?: string;\n\n /\n An extra string of text to display along with with the Subheading\n /\n @Prop()\n public supportingText?: string;\n\n /\n The visual divider that separates the `subheading` and the `supportingText`.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public subheadingDivider?: string = '·';\n\n public render() {\n return [\n <div class=\"information\">\n {this.renderIcon()}\n <div class=\"headings\">\n <h1 class=\"heading\" title={this.heading}>\n {this.heading}\n </h1>\n <h2 class=\"subheading\" title={this.subheading}>\n {this.subheading}\n {this.renderSupportingText()}\n </h2>\n </div>\n </div>,\n <slot name=\"actions\">\n <slot />\n </slot>,\n ];\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" badge={true} name={icon} />;\n }\n\n private renderSupportingText() {\n if (!this.supportingText) {\n return;\n }\n\n return (\n <span class=\"subheading__supporting-text\">\n {this.renderSubheadingDivider()}\n {this.supportingText}\n </span>\n );\n }\n\n private renderSubheadingDivider() {\n if (!this.subheadingDivider) {\n return;\n }\n\n return <span>{this.subheadingDivider}</span>;\n }\n}\n"]}

package/dist/collection/components/helper-line/helper-line.css CHANGED Viewed

@@ -6,6 +6,7 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-size: 0.6875rem;
+  line-height: normal;
   color: rgb(var(--contrast-1200));
 }