@limetech/lime-elements 38.4.0 → 38.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/dist/cjs/limel-chip_2.cjs.entry.js +1 -1
- package/dist/cjs/limel-chip_2.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-markdown.cjs.entry.js +1 -1
- package/dist/cjs/limel-markdown.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js +1 -1
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js.map +1 -1
- package/dist/collection/components/chip-set/chip-set.js +1 -1
- package/dist/collection/components/chip-set/chip-set.js.map +1 -1
- package/dist/collection/components/chip-set/chip.types.js.map +1 -1
- package/dist/collection/components/markdown/markdown.css +4 -80
- package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.css +128 -284
- package/dist/esm/limel-chip_2.entry.js +1 -1
- package/dist/esm/limel-chip_2.entry.js.map +1 -1
- package/dist/esm/limel-markdown.entry.js +1 -1
- package/dist/esm/limel-markdown.entry.js.map +1 -1
- package/dist/esm/limel-prosemirror-adapter.entry.js +1 -1
- package/dist/esm/limel-prosemirror-adapter.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-0863261f.entry.js +2 -0
- package/dist/lime-elements/p-0863261f.entry.js.map +1 -0
- package/dist/lime-elements/{p-c348740c.entry.js → p-ac230166.entry.js} +2 -2
- package/dist/lime-elements/{p-c348740c.entry.js.map → p-ac230166.entry.js.map} +1 -1
- package/dist/lime-elements/{p-f641bcb0.entry.js → p-d7f22e4e.entry.js} +2 -2
- package/dist/lime-elements/{p-f641bcb0.entry.js.map → p-d7f22e4e.entry.js.map} +1 -1
- package/dist/types/components/chip-set/chip.types.d.ts +5 -0
- package/package.json +3 -3
- package/dist/lime-elements/p-3ab8ab51.entry.js +0 -2
- package/dist/lime-elements/p-3ab8ab51.entry.js.map +0 -1
|
@@ -363,7 +363,7 @@ export class ChipSet {
|
|
|
363
363
|
getChipProps(chip, chipType) {
|
|
364
364
|
const removable = this.type === 'input' && chip.removable && !this.readonly;
|
|
365
365
|
const readonly = this.readonly && this.type !== 'input';
|
|
366
|
-
return Object.assign({ role: 'row', identifier: chip.id, text: chip.text, icon: chip.icon, image: chip.image, badge: chip.badge, selected: chip.selected, disabled: this.disabled, readonly: readonly, type: chipType, removable: removable, menuItems: chip.menuItems, onClick: this.catchInputChipClicks(chip), onRemove: this.handleRemoveChip }, (chip.href && {
|
|
366
|
+
return Object.assign({ role: 'row', identifier: chip.id, text: chip.text, icon: chip.icon, image: chip.image, badge: chip.badge, selected: chip.selected, disabled: this.disabled, loading: chip.loading, readonly: readonly, type: chipType, removable: removable, menuItems: chip.menuItems, onClick: this.catchInputChipClicks(chip), onRemove: this.handleRemoveChip }, (chip.href && {
|
|
367
367
|
link: {
|
|
368
368
|
href: getHref(chip.href),
|
|
369
369
|
target: getTarget(chip.href),
|
|
@@ -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 Host,\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 '../../components';\n\nconst INPUT_FIELD_TABINDEX = 1;\n\n/**\n * :::note\n * **Regarding `click` and `interact` events:**\n *\n * The `interact` event is emitted when a chip is interacted with, and is\n * the recommended way to listen for chip interactions.\n *\n * However, if you need to handle clicks differently depending on which chip\n * was clicked, or whether the click was on a chip or elsewhere, you need to\n * listen to the native `click` event instead.\n *\n * Native `click` events are passed through, and if the click came from\n * a chip, the chip object is available in the event object under\n * `<event object>.Lime.chip`.\n *\n * Example usage:\n * ```ts\n * private handleClick(event: Event) {\n * if (event && 'Lime' in event && (event.Lime as any).chip) {\n * if ((event.Lime as { chip: Chip }).chip.href) {\n * // Chip has href, so let the browser open the link.\n * return;\n * }\n * // handle click on chip without href\n * } else {\n * // handle click elsewhere\n * }\n * }\n * ```\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-with-menu-items\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-image\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 * For chip-set of type `input`, defines whether the input field should have autocomplete enabled.\n * Read more about the `autocomplete` attribute\n * [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).\n */\n @Prop({ reflect: true })\n public autocomplete: string = 'off';\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 readonly interact: EventEmitter<Chip>;\n\n /**\n * Dispatched when a chip is selected/deselected\n */\n @Event()\n private readonly 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 readonly 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 readonly stopEdit: EventEmitter<void>;\n\n /**\n * Dispatched when the input is changed for type `input`\n */\n @Event()\n private readonly input: EventEmitter<string>;\n\n @Element()\n private readonly 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 readonly 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 readonly 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 <Host>\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':\n 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 autocomplete={this.autocomplete}\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':\n this.floatLabelAbove(),\n }}\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 </Host>\n );\n }\n\n private readonly 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 readonly floatLabelAbove = () => {\n if (!!this.value.length || this.editMode || this.readonly) {\n return true;\n }\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?.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?.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?.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 readonly hasHelperText = () => {\n return this.helperText !== null && this.helperText !== undefined;\n };\n\n private readonly renderHelperLine = () => {\n const maxItems = this.maxItems === 1 ? undefined : this.maxItems;\n\n if (!maxItems && !this.hasHelperText()) {\n return;\n }\n\n return (\n <limel-helper-line\n length={this.value.length}\n maxLength={maxItems}\n helperText={this.helperText}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private renderInputChip(chip: Chip, index: number, chips: Chip[]) {\n const chipProps = this.getChipProps(chip, 'default');\n const isLastChip = index === chips.length - 1;\n\n return [\n <limel-chip\n key={chip.id}\n class={{\n 'can-be-removed': this.inputChipIndexSelected === index,\n }}\n {...chipProps}\n />,\n !(isLastChip && this.inputHidden()) && 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 image: chip.image,\n badge: chip.badge,\n selected: chip.selected,\n disabled: this.disabled,\n readonly: readonly,\n type: chipType,\n removable: removable,\n menuItems: chip.menuItems,\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 readonly catchInputChipClicks = (chip: Chip) => (event: Event) => {\n /*\n * We need to add the `chip` to the event object so that the consumer\n * can get the chip object when the chip is clicked.\n * This is necessary for the consumer to be able to handle the click\n * event itself, based on which chip was clicked, or whether the click\n * was on a chip or elsewhere. The reason the consumer can't just look\n * at the event target is that that information is hidden by the\n * shadow DOM.\n *\n * See documentation for the `interact` event for more information.\n */\n (event as any).Lime = { chip: chip };\n\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 readonly handleRemoveChip = (\n event: LimelChipCustomEvent<string | number>,\n ) => {\n this.removeChip(event.detail);\n };\n\n private readonly 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 readonly 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 // eslint-disable-next-line sonarjs/deprecation\n (chip.iconFillColor ||\n // eslint-disable-next-line sonarjs/deprecation\n chip.iconBackgroundColor ||\n // eslint-disable-next-line sonarjs/deprecation\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":"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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 Host,\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 '../../components';\n\nconst INPUT_FIELD_TABINDEX = 1;\n\n/**\n * :::note\n * **Regarding `click` and `interact` events:**\n *\n * The `interact` event is emitted when a chip is interacted with, and is\n * the recommended way to listen for chip interactions.\n *\n * However, if you need to handle clicks differently depending on which chip\n * was clicked, or whether the click was on a chip or elsewhere, you need to\n * listen to the native `click` event instead.\n *\n * Native `click` events are passed through, and if the click came from\n * a chip, the chip object is available in the event object under\n * `<event object>.Lime.chip`.\n *\n * Example usage:\n * ```ts\n * private handleClick(event: Event) {\n * if (event && 'Lime' in event && (event.Lime as any).chip) {\n * if ((event.Lime as { chip: Chip }).chip.href) {\n * // Chip has href, so let the browser open the link.\n * return;\n * }\n * // handle click on chip without href\n * } else {\n * // handle click elsewhere\n * }\n * }\n * ```\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-with-menu-items\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-image\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 * For chip-set of type `input`, defines whether the input field should have autocomplete enabled.\n * Read more about the `autocomplete` attribute\n * [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).\n */\n @Prop({ reflect: true })\n public autocomplete: string = 'off';\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 readonly interact: EventEmitter<Chip>;\n\n /**\n * Dispatched when a chip is selected/deselected\n */\n @Event()\n private readonly 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 readonly 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 readonly stopEdit: EventEmitter<void>;\n\n /**\n * Dispatched when the input is changed for type `input`\n */\n @Event()\n private readonly input: EventEmitter<string>;\n\n @Element()\n private readonly 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 readonly 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 readonly 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 <Host>\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':\n 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 autocomplete={this.autocomplete}\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':\n this.floatLabelAbove(),\n }}\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 </Host>\n );\n }\n\n private readonly 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 readonly floatLabelAbove = () => {\n if (!!this.value.length || this.editMode || this.readonly) {\n return true;\n }\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?.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?.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?.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 readonly hasHelperText = () => {\n return this.helperText !== null && this.helperText !== undefined;\n };\n\n private readonly renderHelperLine = () => {\n const maxItems = this.maxItems === 1 ? undefined : this.maxItems;\n\n if (!maxItems && !this.hasHelperText()) {\n return;\n }\n\n return (\n <limel-helper-line\n length={this.value.length}\n maxLength={maxItems}\n helperText={this.helperText}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private renderInputChip(chip: Chip, index: number, chips: Chip[]) {\n const chipProps = this.getChipProps(chip, 'default');\n const isLastChip = index === chips.length - 1;\n\n return [\n <limel-chip\n key={chip.id}\n class={{\n 'can-be-removed': this.inputChipIndexSelected === index,\n }}\n {...chipProps}\n />,\n !(isLastChip && this.inputHidden()) && 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 image: chip.image,\n badge: chip.badge,\n selected: chip.selected,\n disabled: this.disabled,\n loading: chip.loading,\n readonly: readonly,\n type: chipType,\n removable: removable,\n menuItems: chip.menuItems,\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 readonly catchInputChipClicks = (chip: Chip) => (event: Event) => {\n /*\n * We need to add the `chip` to the event object so that the consumer\n * can get the chip object when the chip is clicked.\n * This is necessary for the consumer to be able to handle the click\n * event itself, based on which chip was clicked, or whether the click\n * was on a chip or elsewhere. The reason the consumer can't just look\n * at the event target is that that information is hidden by the\n * shadow DOM.\n *\n * See documentation for the `interact` event for more information.\n */\n (event as any).Lime = { chip: chip };\n\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 readonly handleRemoveChip = (\n event: LimelChipCustomEvent<string | number>,\n ) => {\n this.removeChip(event.detail);\n };\n\n private readonly 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 readonly 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 // eslint-disable-next-line sonarjs/deprecation\n (chip.iconFillColor ||\n // eslint-disable-next-line sonarjs/deprecation\n chip.iconBackgroundColor ||\n // eslint-disable-next-line sonarjs/deprecation\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.types.js","sourceRoot":"","sources":["../../../src/components/chip-set/chip.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Image } from '../../global/shared-types/image.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../list/list-item.types';\n\n/**\n * @public\n */\nexport interface Chip<T = any> {\n /**\n * ID of the chip. Must be unique.\n */\n id: number | string;\n\n /**\n * Text to display inside the chip.\n */\n text: string;\n\n /**\n * Name of the icon to use. Not valid for `filter`.\n */\n icon?: string | Icon;\n\n /**\n * A picture to be displayed instead of the icon on the chip.\n */\n image?: Image;\n\n /**\n * Color of the icon. Overrides `--icon-color`.\n *\n * @deprecated This property is deprecated and will be removed soon!\n *\n * Use the new `Icon` interface instead and write:\n * ```\n * icon {\n * name: string,\n * color: string,\n * },\n * ```\n */\n iconFillColor?: string;\n\n /**\n * `title` attribute of the icon\n *\n * @deprecated This property is deprecated and will be removed soon!\n *\n * Use the new `Icon` interface instead and write:\n * ```\n * icon {\n * name: string,\n * title: string,\n * },\n * ```\n */\n iconTitle?: string;\n\n /**\n * Background color of the icon. Overrides `--icon-background-color`.\n *\n * @deprecated This property is deprecated and will be removed soon!\n *\n * Use the new `Icon` interface instead and write:\n * ```\n * icon {\n * name: string,\n * backgroundColor: string,\n * },\n * ```\n */\n iconBackgroundColor?: string;\n\n /**\n * Whether the chip should be removable. Not valid for `choice`.\n */\n removable?: boolean;\n\n /**\n * Whether the chip is selected. Only valid for `choice` and `filter`.\n */\n selected?: boolean;\n\n /**\n * Value of the chip.\n */\n value?: T;\n\n /**\n * The value of the badge.\n */\n badge?: number;\n\n /**\n * If supplied, the chip will render a link, using the supplied href.\n */\n href?: string;\n\n /**\n * List of the items to display as in a menu, on the chip.\n */\n menuItems?: Array<MenuItem | ListSeparator>;\n}\n\n/**\n * This type is used to determine the visual style and behavior of a Chip component.\n *\n * @beta\n */\nexport type ChipType = 'default' | 'filter';\n"]}
|
|
1
|
+
{"version":3,"file":"chip.types.js","sourceRoot":"","sources":["../../../src/components/chip-set/chip.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Image } from '../../global/shared-types/image.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../list/list-item.types';\n\n/**\n * @public\n */\nexport interface Chip<T = any> {\n /**\n * ID of the chip. Must be unique.\n */\n id: number | string;\n\n /**\n * Text to display inside the chip.\n */\n text: string;\n\n /**\n * Name of the icon to use. Not valid for `filter`.\n */\n icon?: string | Icon;\n\n /**\n * A picture to be displayed instead of the icon on the chip.\n */\n image?: Image;\n\n /**\n * Color of the icon. Overrides `--icon-color`.\n *\n * @deprecated This property is deprecated and will be removed soon!\n *\n * Use the new `Icon` interface instead and write:\n * ```\n * icon {\n * name: string,\n * color: string,\n * },\n * ```\n */\n iconFillColor?: string;\n\n /**\n * `title` attribute of the icon\n *\n * @deprecated This property is deprecated and will be removed soon!\n *\n * Use the new `Icon` interface instead and write:\n * ```\n * icon {\n * name: string,\n * title: string,\n * },\n * ```\n */\n iconTitle?: string;\n\n /**\n * Background color of the icon. Overrides `--icon-background-color`.\n *\n * @deprecated This property is deprecated and will be removed soon!\n *\n * Use the new `Icon` interface instead and write:\n * ```\n * icon {\n * name: string,\n * backgroundColor: string,\n * },\n * ```\n */\n iconBackgroundColor?: string;\n\n /**\n * Whether the chip should be removable. Not valid for `choice`.\n */\n removable?: boolean;\n\n /**\n * Whether the chip is selected. Only valid for `choice` and `filter`.\n */\n selected?: boolean;\n\n /**\n * Value of the chip.\n */\n value?: T;\n\n /**\n * The value of the badge.\n */\n badge?: number;\n\n /**\n * If supplied, the chip will render a link, using the supplied href.\n */\n href?: string;\n\n /**\n * List of the items to display as in a menu, on the chip.\n */\n menuItems?: Array<MenuItem | ListSeparator>;\n\n /**\n * Set to `true` to put the chip in the `loading` state, and render an\n * indeterminate progress indicator inside the chip.\n */\n loading?: boolean;\n}\n\n/**\n * This type is used to determine the visual style and behavior of a Chip component.\n *\n * @beta\n */\nexport type ChipType = 'default' | 'filter';\n"]}
|
|
@@ -1,8 +1,4 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
-
/**
|
|
3
|
-
* @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;
|
|
4
|
-
* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;
|
|
5
|
-
*/
|
|
6
2
|
/**
|
|
7
3
|
* Note! This file is exported to `dist/scss/` in the published
|
|
8
4
|
* node module, for consumer projects to import.
|
|
@@ -192,8 +188,6 @@ p,
|
|
|
192
188
|
li {
|
|
193
189
|
font-size: 0.875rem;
|
|
194
190
|
word-break: break-word;
|
|
195
|
-
hyphens: auto;
|
|
196
|
-
-webkit-hyphens: auto;
|
|
197
191
|
}
|
|
198
192
|
|
|
199
193
|
a {
|
|
@@ -372,80 +366,6 @@ img {
|
|
|
372
366
|
border-radius: 0.25rem;
|
|
373
367
|
}
|
|
374
368
|
|
|
375
|
-
/**
|
|
376
|
-
* Note! This file is exported to `dist/scss/` in the published
|
|
377
|
-
* node module, for consumer projects to import.
|
|
378
|
-
* That means this file cannot import from any file that isn't
|
|
379
|
-
* also exported, keeping the same relative path.
|
|
380
|
-
*
|
|
381
|
-
* Or, just don't import anything, that works too.
|
|
382
|
-
*/
|
|
383
|
-
/**
|
|
384
|
-
* This can be used on a trigger element that opens a dropdown menu or a popover.
|
|
385
|
-
*/
|
|
386
|
-
/**
|
|
387
|
-
* This mixin will mask out the content that is close to
|
|
388
|
-
* the edges of a scrollable area.
|
|
389
|
-
* - If the scrollable content has `overflow-y`, use `vertically`
|
|
390
|
-
* as an argument for `$direction`.
|
|
391
|
-
- If the scrollable content has `overflow-x`, use `horizontally`
|
|
392
|
-
* as an argument for `$direction`.
|
|
393
|
-
*
|
|
394
|
-
* For the visual effect to work smoothly, we need to make sure that
|
|
395
|
-
* the size of the fade-out edge effect is the same as the
|
|
396
|
-
* internal paddings of the scrollable area. Otherwise, content of a
|
|
397
|
-
* scrollable area that does not have a padding will fade out before
|
|
398
|
-
* any scrolling has been done.
|
|
399
|
-
* This is why this mixin already adds paddings, which automatically
|
|
400
|
-
* default to the size of the fade-out effect.
|
|
401
|
-
* This size defaults to `1rem`, but to override the size use
|
|
402
|
-
* `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
|
|
403
|
-
* when `vertically` argument is set, and use
|
|
404
|
-
* `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
|
|
405
|
-
* when `horizontally` argument is set.
|
|
406
|
-
* Of course you can also programmatically increase and decrease the
|
|
407
|
-
* size of these variables for each edge, based on the amount of
|
|
408
|
-
* scrolling that has been done by the user. In this case, make sure
|
|
409
|
-
* to add a custom padding where the mixin is used, to override
|
|
410
|
-
* the paddings that are automatically added by the mixin in the
|
|
411
|
-
* compiled CSS code.
|
|
412
|
-
*/
|
|
413
|
-
/**
|
|
414
|
-
* This mixin will add an animated underline to the bottom of an `a` elements.
|
|
415
|
-
* Note that you may need to add `all: unset;` –depending on your use case–
|
|
416
|
-
* before using this mixin.
|
|
417
|
-
*/
|
|
418
|
-
/**
|
|
419
|
-
* This mixin creates a cross-browser font stack.
|
|
420
|
-
* - `sans-serif` can be used for the UI of the components.
|
|
421
|
-
* - `monospace` can be used for code.
|
|
422
|
-
*
|
|
423
|
-
* ⚠️ If we change the font stacks, we need to update
|
|
424
|
-
* 1. the consumer documentation in `README.md`, and
|
|
425
|
-
* 2. the CSS variables of `--kompendium-example-font-family`
|
|
426
|
-
* in the `<style>` tag of `index.html`.
|
|
427
|
-
*/
|
|
428
|
-
/**
|
|
429
|
-
* This mixin is a hack, using old CSS syntax
|
|
430
|
-
* to enable you to truncate a piece of text,
|
|
431
|
-
* after a certain number of lines.
|
|
432
|
-
*/
|
|
433
|
-
/**
|
|
434
|
-
* The breakpoints below are used to create responsive designs
|
|
435
|
-
* in Lime's products. Therefore, they are here to get distributed
|
|
436
|
-
* to all components in other private repos, which rely on this `mixins`
|
|
437
|
-
* file, to create consistent styles.
|
|
438
|
-
*
|
|
439
|
-
* :::important
|
|
440
|
-
* In very rare cases you should used media queries!
|
|
441
|
-
* Nowadays, there are many better ways of achieving responsive design
|
|
442
|
-
* without media queries. For example, using CSS Grid, Flexbox, and their features.
|
|
443
|
-
* :::
|
|
444
|
-
*/
|
|
445
|
-
/**
|
|
446
|
-
* Media query mixins for responsive design based on screen width.
|
|
447
|
-
* Note that these mixins do not detect the device type!
|
|
448
|
-
*/
|
|
449
369
|
kbd {
|
|
450
370
|
font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
|
451
371
|
font-weight: 600;
|
|
@@ -533,6 +453,10 @@ kbd {
|
|
|
533
453
|
padding: 0.00625rem 0.125rem;
|
|
534
454
|
}
|
|
535
455
|
|
|
456
|
+
/**
|
|
457
|
+
* @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;
|
|
458
|
+
* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;
|
|
459
|
+
*/
|
|
536
460
|
hr {
|
|
537
461
|
border-top: 1px solid rgb(var(--contrast-700));
|
|
538
462
|
}
|