@limetech/lime-elements 37.2.4 → 37.2.5
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 +10 -0
- package/dist/cjs/limel-chip-set.cjs.entry.js +1 -1
- package/dist/cjs/limel-chip-set.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-chip.cjs.entry.js +5 -4
- package/dist/cjs/limel-chip.cjs.entry.js.map +1 -1
- package/dist/collection/components/chip/chip.css +6 -7
- package/dist/collection/components/chip/chip.js +6 -5
- package/dist/collection/components/chip/chip.js.map +1 -1
- package/dist/collection/components/chip-set/chip-set.css +0 -5
- package/dist/esm/limel-chip-set.entry.js +1 -1
- package/dist/esm/limel-chip-set.entry.js.map +1 -1
- package/dist/esm/limel-chip.entry.js +5 -4
- package/dist/esm/limel-chip.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-48aa89a6.entry.js +2 -0
- package/dist/lime-elements/p-48aa89a6.entry.js.map +1 -0
- package/dist/lime-elements/{p-3074ae42.entry.js → p-8a9d91cf.entry.js} +2 -2
- package/dist/lime-elements/{p-3074ae42.entry.js.map → p-8a9d91cf.entry.js.map} +1 -1
- package/dist/types/components/chip/chip.d.ts +3 -2
- package/dist/types/components.d.ts +2 -2
- package/package.json +2 -2
- package/dist/lime-elements/p-6c1d204a.entry.js +0 -2
- package/dist/lime-elements/p-6c1d204a.entry.js.map +0 -1
|
@@ -8,21 +8,22 @@ const makeEnterClickable = require('./make-enter-clickable-f7f8d33c.js');
|
|
|
8
8
|
const translations = require('./translations-a384b596.js');
|
|
9
9
|
const keycodes = require('./keycodes-3949f425.js');
|
|
10
10
|
|
|
11
|
-
const chipCss = "@charset \"UTF-8\";:host(limel-chip){--limel-chip-height:1.75rem;--limel-chip-gap:0.5rem;isolation:isolate;display:inline-flex;align-items:center}*{box-sizing:border-box}.chip{all:unset;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:var(--chip-max-width, 10rem);height:var(--limel-chip-height);border-radius:var(--limel-chip-height);font-size:0.875rem;padding:0 0.125rem}.chip:has(limel-icon) .text{padding-left:0.25rem}.chip:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.chip:not([disabled]):focus{outline:none}.chip:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.chip:not([disabled]):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.chip:not([disabled]):active{background-color:var(--mdc-theme-surface);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}.chip:has(limel-badge){padding-right:0.375rem}.chip:has(limel-badge) .text{padding-right:0}.chip:has(+.remove-button:hover){box-shadow:var(--shadow-depth-8-error)}:host(limel-chip[disabled]) .chip{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1);box-shadow:none}:host(limel-chip[readonly]) .chip{box-shadow:0 0 0 1px rgba(var(--contrast-800), 0.5)}:host(limel-chip[selected]) .chip{box-shadow:var(--button-shadow-inset)}:host(limel-chip[selected]) .chip:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}:host(limel-chip[selected]) .chip:active{box-shadow:var(--button-shadow-inset-pressed)}:host(limel-chip[selected]) .text{color:var(--mdc-theme-primary)}:host(limel-chip[
|
|
11
|
+
const chipCss = "@charset \"UTF-8\";:host(limel-chip){--limel-chip-height:1.75rem;--limel-chip-gap:0.5rem;isolation:isolate;display:inline-flex;align-items:center}*{box-sizing:border-box}.chip{all:unset;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:var(--chip-max-width, 10rem);height:var(--limel-chip-height);border-radius:var(--limel-chip-height);font-size:0.875rem;padding:0 0.125rem}.chip:has(limel-icon) .text{padding-left:0.25rem}.chip:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.chip:not([disabled]):focus{outline:none}.chip:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.chip:not([disabled]):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.chip:not([disabled]):active{background-color:var(--mdc-theme-surface);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}.chip:has(limel-badge){padding-right:0.375rem}.chip:has(limel-badge) .text{padding-right:0}.chip:has(+.remove-button:hover){box-shadow:var(--shadow-depth-8-error)}.chip:has(+.trailing-button){padding-right:calc(var(--limel-chip-height) + 0.125rem)}.chip:has(+.trailing-button) .text{padding-right:0}:host(limel-chip[disabled]) .chip{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1);box-shadow:none}:host(limel-chip[readonly]) .chip{box-shadow:0 0 0 1px rgba(var(--contrast-800), 0.5)}:host(limel-chip[selected]) .chip{box-shadow:var(--button-shadow-inset)}:host(limel-chip[selected]) .chip:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}:host(limel-chip[selected]) .chip:active{box-shadow:var(--button-shadow-inset-pressed)}:host(limel-chip[selected]) .text{color:var(--mdc-theme-primary)}:host(limel-chip[type=filter]) .chip{border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem}:host(limel-chip[type=filter]) .chip:after{content:\"\";transition:background-color 0.4s ease 0.2s, box-shadow 0.6s ease 0.2s;box-sizing:border-box;position:absolute;bottom:0.125rem;left:0.125rem;width:0.5rem;height:0.5rem;border-radius:50%;background-color:rgb(var(--contrast-800), 0.8);box-shadow:0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[type=filter][selected]) .chip:after{background-color:rgb(var(--color-green-default));box-shadow:0 0 0.375rem 0 rgb(var(--color-green-light)), 0 0 0 1px rgb(var(--color-white)) inset}limel-icon{flex-shrink:0;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem);padding:0.0625rem}limel-badge{pointer-events:none}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.2;padding:0 0.5rem}.trailing-button{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent;z-index:1;display:flex;align-items:center;justify-content:center;margin-left:calc(var(--limel-chip-height) * -1 + 0.125rem);margin-right:0.125rem;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem);border-radius:50%}.trailing-button:hover{color:rgb(var(--color-red-dark));background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.trailing-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.trailing-button svg{transition:color 0.2s ease, transform 0.2s ease;width:1.25rem}.trailing-button:hover svg{transform:scale(0.8)}";
|
|
12
12
|
|
|
13
13
|
const Chip = class {
|
|
14
14
|
constructor(hostRef) {
|
|
15
15
|
index.registerInstance(this, hostRef);
|
|
16
16
|
this.remove = index.createEvent(this, "remove", 7);
|
|
17
|
+
this.chipId = 'chip-' + crypto.randomUUID();
|
|
17
18
|
this.renderAsButton = () => {
|
|
18
19
|
return [
|
|
19
|
-
index.h("button", { class: "chip", role: "button", disabled: this.disabled || this.readonly, onKeyDown: this.handleDeleteKeyDown }, this.renderIcon(), this.renderLabel(), this.renderBadge()),
|
|
20
|
+
index.h("button", { id: this.chipId, class: "chip", role: "button", disabled: this.disabled || this.readonly, onKeyDown: this.handleDeleteKeyDown }, this.renderIcon(), this.renderLabel(), this.renderBadge()),
|
|
20
21
|
this.renderRemoveButton(),
|
|
21
22
|
];
|
|
22
23
|
};
|
|
23
24
|
this.renderAsLink = () => {
|
|
24
25
|
return [
|
|
25
|
-
index.h("a", { class: "chip", href: this.link.href, title: this.link.title, target: this.link.target, "aria-disabled": this.disabled || this.readonly, tabindex: this.disabled || this.readonly ? -1 : 0, onKeyDown: this.handleDeleteKeyDown }, this.renderIcon(), this.renderLabel(), this.renderBadge()),
|
|
26
|
+
index.h("a", { id: this.chipId, class: "chip", href: this.link.href, title: this.link.title, target: this.link.target, "aria-disabled": this.disabled || this.readonly, tabindex: this.disabled || this.readonly ? -1 : 0, onKeyDown: this.handleDeleteKeyDown }, this.renderIcon(), this.renderLabel(), this.renderBadge()),
|
|
26
27
|
this.renderRemoveButton(),
|
|
27
28
|
];
|
|
28
29
|
};
|
|
@@ -93,7 +94,7 @@ const Chip = class {
|
|
|
93
94
|
return;
|
|
94
95
|
}
|
|
95
96
|
const svgData = '<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-width="2" d="m8 8 16 16M24 8 8 24"/></svg>';
|
|
96
|
-
return (index.h("button", { class: "trailing-button remove-button", tabIndex: -1, "aria-label": this.removeChipLabel, innerHTML: svgData, onClick: this.handleRemoveClick }));
|
|
97
|
+
return (index.h("button", { class: "trailing-button remove-button", tabIndex: -1, "aria-label": this.removeChipLabel, "aria-controls": this.chipId, innerHTML: svgData, onClick: this.handleRemoveClick }));
|
|
97
98
|
}
|
|
98
99
|
get host() { return index.getElement(this); }
|
|
99
100
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-chip.entry.cjs.js","mappings":"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","names":["h","DELETE","BACKSPACE","keycodes","DELETE_KEY_CODE","BACKSPACE_KEY_CODE","translate","makeEnterClickable","removeEnterClickable","Host","getIconName"],"sources":["./src/components/chip/chip.scss?tag=limel-chip&encapsulation=shadow","./src/components/chip/chip.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n* @prop --chip-max-width: Maximum width of the chip. Defaults to `10rem`. Keep in mind that the chips should not appear too big.\n*/\n\n:host(limel-chip) {\n --limel-chip-height: 1.75rem;\n --limel-chip-gap: 0.5rem;\n isolation: isolate;\n display: inline-flex;\n align-items: center;\n}\n\n* {\n box-sizing: border-box;\n}\n\n.chip {\n all: unset;\n position: relative;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n max-width: var(--chip-max-width, 10rem);\n height: var(--limel-chip-height);\n\n border-radius: var(--limel-chip-height);\n font-size: 0.875rem;\n padding: 0 0.125rem;\n\n &:has(limel-icon) {\n .text {\n padding-left: 0.25rem;\n }\n }\n\n &:not([disabled]) {\n @include mixins.visualize-keyboard-focus;\n @include mixins.is-elevated-inset-clickable;\n }\n\n &:has(limel-badge) {\n padding-right: 0.375rem;\n\n .text {\n padding-right: 0;\n }\n }\n\n &:has(+ .remove-button:hover) {\n box-shadow: var(--shadow-depth-8-error);\n }\n}\n\n:host(limel-chip[disabled]) {\n .chip {\n // Similar to `limel-button[disabled]`\n color: rgba(var(--contrast-1600), 0.37);\n background-color: rgba(var(--contrast-1600), 0.1);\n box-shadow: none;\n }\n}\n\n:host(limel-chip[readonly]) {\n .chip {\n box-shadow: 0 0 0 1px rgba(var(--contrast-800), 0.5);\n }\n}\n\n:host(limel-chip[selected]) {\n .chip {\n box-shadow: var(--button-shadow-inset);\n\n &:focus-visible {\n box-shadow: var(--button-shadow-inset),\n var(--shadow-depth-8-focused);\n }\n\n &:active {\n box-shadow: var(--button-shadow-inset-pressed);\n }\n }\n .text {\n color: var(--mdc-theme-primary);\n }\n}\n\n:host(limel-chip[removable]) {\n .chip:not([disabled]) {\n padding-right: calc(var(--limel-chip-height) + 0.125rem);\n\n .text {\n padding-right: 0;\n }\n }\n}\n\n:host(limel-chip[type='filter']) {\n .chip {\n border-top-left-radius: 0.5rem;\n border-bottom-left-radius: 0.5rem;\n\n &:after {\n content: '';\n transition:\n background-color 0.4s ease 0.2s,\n box-shadow 0.6s ease 0.2s;\n box-sizing: border-box;\n position: absolute;\n bottom: 0.125rem;\n left: 0.125rem;\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 50%;\n background-color: rgb(var(--contrast-800), 0.8);\n box-shadow: 0 0 0 1px rgb(var(--color-white)) inset;\n }\n }\n}\n\n:host(limel-chip[type='filter'][selected]) {\n .chip {\n &:after {\n background-color: rgb(var(--color-green-default));\n box-shadow:\n 0 0 0.375rem 0 rgb(var(--color-green-light)),\n 0 0 0 1px rgb(var(--color-white)) inset;\n }\n }\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--limel-chip-height) - 0.25rem);\n height: calc(var(--limel-chip-height) - 0.25rem);\n padding: 0.0625rem;\n}\n\nlimel-badge {\n pointer-events: none;\n}\n\n.text {\n @include mixins.truncate-text;\n line-height: 1.2;\n padding: 0 0.5rem;\n}\n\n.trailing-button {\n all: unset;\n @include mixins.is-flat-clickable(\n $color--hovered: rgb(var(--color-red-dark))\n );\n\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n\n margin-left: calc(var(--limel-chip-height) * -1 + 0.125rem);\n margin-right: 0.125rem;\n width: calc(var(--limel-chip-height) - 0.25rem);\n height: calc(var(--limel-chip-height) - 0.25rem);\n\n border-radius: 50%;\n\n svg {\n transition:\n color 0.2s ease,\n transform 0.2s ease;\n width: 1.25rem;\n }\n\n &:hover {\n svg {\n transform: scale(0.8);\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport { Icon, Languages, Link } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport {\n BACKSPACE,\n BACKSPACE_KEY_CODE,\n DELETE,\n DELETE_KEY_CODE,\n} from '../../util/keycodes';\nimport { Chip as OldChipInterface } from '../chip-set/chip.types';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @private\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n tag: 'limel-chip',\n shadow: true,\n styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Label displayed on the chip\n */\n @Prop({ reflect: true })\n public text: string;\n\n /**\n * Icon of the chip.\n */\n @Prop()\n public icon: string | Icon;\n\n /**\n * If supplied, the chip will become a clickable link.\n */\n @Prop()\n public link?: Omit<Link, 'text'>;\n\n /**\n * The value of the badge, displayed on the chip.\n */\n @Prop({ reflect: true })\n public badge?: string | number;\n\n /**\n * Set to `true` to disable the chip.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to render the chip as a static UI element.\n * Useful when the parent component has a `readonly` state.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to visualize the chip in a \"selected\" state.\n * This is typically used when the chip is used in a chip-set\n * along with other chips.\n */\n @Prop({ reflect: true })\n public selected = false;\n\n /**\n * Set to `true` to render a remove button on the chip.\n */\n @Prop({ reflect: true })\n public removable = false;\n\n /**\n * Set to `filter` to render the chip with a distinct style\n * suitable for visualizing filters.\n */\n @Prop({ reflect: true })\n public type: 'filter';\n\n /**\n * Fired when clicking on the remove button of a `removable` chip.\n */\n @Event()\n public remove: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelChipElement;\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n return (\n <Host onClick={this.filterClickWhenDisabled}>\n {this.link ? this.renderAsLink() : this.renderAsButton()}\n </Host>\n );\n }\n\n private renderAsButton = () => {\n return [\n <button\n class=\"chip\"\n role=\"button\"\n disabled={this.disabled || this.readonly}\n onKeyDown={this.handleDeleteKeyDown}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderBadge()}\n </button>,\n this.renderRemoveButton(),\n ];\n };\n\n private renderAsLink = () => {\n return [\n <a\n class=\"chip\"\n href={this.link.href}\n title={this.link.title}\n target={this.link.target}\n aria-disabled={this.disabled || this.readonly}\n tabindex={this.disabled || this.readonly ? -1 : 0}\n onKeyDown={this.handleDeleteKeyDown}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderBadge()}\n </a>,\n this.renderRemoveButton(),\n ];\n };\n\n private renderLabel = () => {\n return <span class=\"text\">{this.text}</span>;\n };\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return (\n <limel-icon\n badge={true}\n name={icon}\n style={{\n color: `${(this.icon as Icon)?.color}`,\n 'background-color': `${\n (this.icon as Icon)?.backgroundColor\n }`,\n }}\n />\n );\n }\n\n private renderBadge() {\n if (!this.badge) {\n return;\n }\n\n return <limel-badge label={this.badge} />;\n }\n\n private renderRemoveButton() {\n if (!this.removable || this.readonly || this.disabled) {\n return;\n }\n\n const svgData =\n '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n return (\n <button\n class=\"trailing-button remove-button\"\n tabIndex={-1}\n aria-label={this.removeChipLabel}\n innerHTML={svgData}\n onClick={this.handleRemoveClick}\n />\n );\n }\n\n private filterClickWhenDisabled = (e) => {\n if (this.disabled || this.readonly) {\n e.preventDefault();\n }\n };\n\n private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n event.stopPropagation();\n this.remove.emit();\n };\n\n private handleDeleteKeyDown = (event: KeyboardEvent) => {\n if (!this.removable) {\n return;\n }\n\n const keys = [DELETE, BACKSPACE];\n const keycodes = [DELETE_KEY_CODE, BACKSPACE_KEY_CODE];\n\n if (keys.includes(event.key) || keycodes.includes(event.keyCode)) {\n this.handleRemoveClick(event);\n }\n };\n\n private removeChipLabel = (): string => {\n return translate.get('chip-set.remove-chip', this.language);\n };\n}\n"],"version":3}
|
|
1
|
+
{"file":"limel-chip.entry.cjs.js","mappings":"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","names":["h","DELETE","BACKSPACE","keycodes","DELETE_KEY_CODE","BACKSPACE_KEY_CODE","translate","makeEnterClickable","removeEnterClickable","Host","getIconName"],"sources":["./src/components/chip/chip.scss?tag=limel-chip&encapsulation=shadow","./src/components/chip/chip.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n* @prop --chip-max-width: Maximum width of the chip. Defaults to `10rem`. Keep in mind that the chips should not appear too big.\n*/\n\n:host(limel-chip) {\n --limel-chip-height: 1.75rem;\n --limel-chip-gap: 0.5rem;\n isolation: isolate;\n display: inline-flex;\n align-items: center;\n}\n\n* {\n box-sizing: border-box;\n}\n\n.chip {\n all: unset;\n position: relative;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n max-width: var(--chip-max-width, 10rem);\n height: var(--limel-chip-height);\n\n border-radius: var(--limel-chip-height);\n font-size: 0.875rem;\n padding: 0 0.125rem;\n\n &:has(limel-icon) {\n .text {\n padding-left: 0.25rem;\n }\n }\n\n &:not([disabled]) {\n @include mixins.visualize-keyboard-focus;\n @include mixins.is-elevated-inset-clickable;\n }\n\n &:has(limel-badge) {\n padding-right: 0.375rem;\n\n .text {\n padding-right: 0;\n }\n }\n\n &:has(+ .remove-button:hover) {\n box-shadow: var(--shadow-depth-8-error);\n }\n\n &:has(+ .trailing-button) {\n padding-right: calc(var(--limel-chip-height) + 0.125rem);\n\n .text {\n padding-right: 0;\n }\n }\n}\n\n:host(limel-chip[disabled]) {\n .chip {\n // Similar to `limel-button[disabled]`\n color: rgba(var(--contrast-1600), 0.37);\n background-color: rgba(var(--contrast-1600), 0.1);\n box-shadow: none;\n }\n}\n\n:host(limel-chip[readonly]) {\n .chip {\n box-shadow: 0 0 0 1px rgba(var(--contrast-800), 0.5);\n }\n}\n\n:host(limel-chip[selected]) {\n .chip {\n box-shadow: var(--button-shadow-inset);\n\n &:focus-visible {\n box-shadow: var(--button-shadow-inset),\n var(--shadow-depth-8-focused);\n }\n\n &:active {\n box-shadow: var(--button-shadow-inset-pressed);\n }\n }\n .text {\n color: var(--mdc-theme-primary);\n }\n}\n\n:host(limel-chip[type='filter']) {\n .chip {\n border-top-left-radius: 0.5rem;\n border-bottom-left-radius: 0.5rem;\n\n &:after {\n content: '';\n transition:\n background-color 0.4s ease 0.2s,\n box-shadow 0.6s ease 0.2s;\n box-sizing: border-box;\n position: absolute;\n bottom: 0.125rem;\n left: 0.125rem;\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 50%;\n background-color: rgb(var(--contrast-800), 0.8);\n box-shadow: 0 0 0 1px rgb(var(--color-white)) inset;\n }\n }\n}\n\n:host(limel-chip[type='filter'][selected]) {\n .chip {\n &:after {\n background-color: rgb(var(--color-green-default));\n box-shadow:\n 0 0 0.375rem 0 rgb(var(--color-green-light)),\n 0 0 0 1px rgb(var(--color-white)) inset;\n }\n }\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--limel-chip-height) - 0.25rem);\n height: calc(var(--limel-chip-height) - 0.25rem);\n padding: 0.0625rem;\n}\n\nlimel-badge {\n pointer-events: none;\n}\n\n.text {\n @include mixins.truncate-text;\n line-height: 1.2;\n padding: 0 0.5rem;\n}\n\n.trailing-button {\n all: unset;\n @include mixins.is-flat-clickable(\n $color--hovered: rgb(var(--color-red-dark))\n );\n\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n\n margin-left: calc(var(--limel-chip-height) * -1 + 0.125rem);\n margin-right: 0.125rem;\n width: calc(var(--limel-chip-height) - 0.25rem);\n height: calc(var(--limel-chip-height) - 0.25rem);\n\n border-radius: 50%;\n\n svg {\n transition:\n color 0.2s ease,\n transform 0.2s ease;\n width: 1.25rem;\n }\n\n &:hover {\n svg {\n transform: scale(0.8);\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport { Icon, Languages, Link } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport {\n BACKSPACE,\n BACKSPACE_KEY_CODE,\n DELETE,\n DELETE_KEY_CODE,\n} from '../../util/keycodes';\nimport { Chip as OldChipInterface } from '../chip-set/chip.types';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @private\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n tag: 'limel-chip',\n shadow: true,\n styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Label displayed on the chip\n */\n @Prop({ reflect: true })\n public text: string;\n\n /**\n * Icon of the chip.\n */\n @Prop()\n public icon?: string | Icon;\n\n /**\n * If supplied, the chip will become a clickable link.\n */\n @Prop()\n public link?: Omit<Link, 'text'>;\n\n /**\n * The value of the badge, displayed on the chip.\n */\n @Prop({ reflect: true })\n public badge?: string | number;\n\n /**\n * Set to `true` to disable the chip.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to render the chip as a static UI element.\n * Useful when the parent component has a `readonly` state.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to visualize the chip in a \"selected\" state.\n * This is typically used when the chip is used in a chip-set\n * along with other chips.\n */\n @Prop({ reflect: true })\n public selected = false;\n\n /**\n * Set to `true` to render a remove button on the chip.\n */\n @Prop({ reflect: true })\n public removable = false;\n\n /**\n * Set to `filter` to render the chip with a distinct style\n * suitable for visualizing filters.\n */\n @Prop({ reflect: true })\n public type?: 'filter';\n\n /**\n * Fired when clicking on the remove button of a `removable` chip.\n */\n @Event()\n public remove: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelChipElement;\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n private chipId = 'chip-' + crypto.randomUUID();\n\n public render() {\n return (\n <Host onClick={this.filterClickWhenDisabled}>\n {this.link ? this.renderAsLink() : this.renderAsButton()}\n </Host>\n );\n }\n\n private renderAsButton = () => {\n return [\n <button\n id={this.chipId}\n class=\"chip\"\n role=\"button\"\n disabled={this.disabled || this.readonly}\n onKeyDown={this.handleDeleteKeyDown}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderBadge()}\n </button>,\n this.renderRemoveButton(),\n ];\n };\n\n private renderAsLink = () => {\n return [\n <a\n id={this.chipId}\n class=\"chip\"\n href={this.link.href}\n title={this.link.title}\n target={this.link.target}\n aria-disabled={this.disabled || this.readonly}\n tabindex={this.disabled || this.readonly ? -1 : 0}\n onKeyDown={this.handleDeleteKeyDown}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderBadge()}\n </a>,\n this.renderRemoveButton(),\n ];\n };\n\n private renderLabel = () => {\n return <span class=\"text\">{this.text}</span>;\n };\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return (\n <limel-icon\n badge={true}\n name={icon}\n style={{\n color: `${(this.icon as Icon)?.color}`,\n 'background-color': `${\n (this.icon as Icon)?.backgroundColor\n }`,\n }}\n />\n );\n }\n\n private renderBadge() {\n if (!this.badge) {\n return;\n }\n\n return <limel-badge label={this.badge} />;\n }\n\n private renderRemoveButton() {\n if (!this.removable || this.readonly || this.disabled) {\n return;\n }\n\n const svgData =\n '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n return (\n <button\n class=\"trailing-button remove-button\"\n tabIndex={-1}\n aria-label={this.removeChipLabel}\n aria-controls={this.chipId}\n innerHTML={svgData}\n onClick={this.handleRemoveClick}\n />\n );\n }\n\n private filterClickWhenDisabled = (e) => {\n if (this.disabled || this.readonly) {\n e.preventDefault();\n }\n };\n\n private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n event.stopPropagation();\n this.remove.emit();\n };\n\n private handleDeleteKeyDown = (event: KeyboardEvent) => {\n if (!this.removable) {\n return;\n }\n\n const keys = [DELETE, BACKSPACE];\n const keycodes = [DELETE_KEY_CODE, BACKSPACE_KEY_CODE];\n\n if (keys.includes(event.key) || keycodes.includes(event.keyCode)) {\n this.handleRemoveClick(event);\n }\n };\n\n private removeChipLabel = (): string => {\n return translate.get('chip-set.remove-chip', this.language);\n };\n}\n"],"version":3}
|
|
@@ -116,6 +116,12 @@
|
|
|
116
116
|
.chip:has(+ .remove-button:hover) {
|
|
117
117
|
box-shadow: var(--shadow-depth-8-error);
|
|
118
118
|
}
|
|
119
|
+
.chip:has(+ .trailing-button) {
|
|
120
|
+
padding-right: calc(var(--limel-chip-height) + 0.125rem);
|
|
121
|
+
}
|
|
122
|
+
.chip:has(+ .trailing-button) .text {
|
|
123
|
+
padding-right: 0;
|
|
124
|
+
}
|
|
119
125
|
|
|
120
126
|
:host(limel-chip[disabled]) .chip {
|
|
121
127
|
color: rgba(var(--contrast-1600), 0.37);
|
|
@@ -140,13 +146,6 @@
|
|
|
140
146
|
color: var(--mdc-theme-primary);
|
|
141
147
|
}
|
|
142
148
|
|
|
143
|
-
:host(limel-chip[removable]) .chip:not([disabled]) {
|
|
144
|
-
padding-right: calc(var(--limel-chip-height) + 0.125rem);
|
|
145
|
-
}
|
|
146
|
-
:host(limel-chip[removable]) .chip:not([disabled]) .text {
|
|
147
|
-
padding-right: 0;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
149
|
:host(limel-chip[type=filter]) .chip {
|
|
151
150
|
border-top-left-radius: 0.5rem;
|
|
152
151
|
border-bottom-left-radius: 0.5rem;
|
|
@@ -46,15 +46,16 @@ import { BACKSPACE, BACKSPACE_KEY_CODE, DELETE, DELETE_KEY_CODE, } from '../../u
|
|
|
46
46
|
*/
|
|
47
47
|
export class Chip {
|
|
48
48
|
constructor() {
|
|
49
|
+
this.chipId = 'chip-' + crypto.randomUUID();
|
|
49
50
|
this.renderAsButton = () => {
|
|
50
51
|
return [
|
|
51
|
-
h("button", { class: "chip", role: "button", disabled: this.disabled || this.readonly, onKeyDown: this.handleDeleteKeyDown }, this.renderIcon(), this.renderLabel(), this.renderBadge()),
|
|
52
|
+
h("button", { id: this.chipId, class: "chip", role: "button", disabled: this.disabled || this.readonly, onKeyDown: this.handleDeleteKeyDown }, this.renderIcon(), this.renderLabel(), this.renderBadge()),
|
|
52
53
|
this.renderRemoveButton(),
|
|
53
54
|
];
|
|
54
55
|
};
|
|
55
56
|
this.renderAsLink = () => {
|
|
56
57
|
return [
|
|
57
|
-
h("a", { class: "chip", href: this.link.href, title: this.link.title, target: this.link.target, "aria-disabled": this.disabled || this.readonly, tabindex: this.disabled || this.readonly ? -1 : 0, onKeyDown: this.handleDeleteKeyDown }, this.renderIcon(), this.renderLabel(), this.renderBadge()),
|
|
58
|
+
h("a", { id: this.chipId, class: "chip", href: this.link.href, title: this.link.title, target: this.link.target, "aria-disabled": this.disabled || this.readonly, tabindex: this.disabled || this.readonly ? -1 : 0, onKeyDown: this.handleDeleteKeyDown }, this.renderIcon(), this.renderLabel(), this.renderBadge()),
|
|
58
59
|
this.renderRemoveButton(),
|
|
59
60
|
];
|
|
60
61
|
};
|
|
@@ -125,7 +126,7 @@ export class Chip {
|
|
|
125
126
|
return;
|
|
126
127
|
}
|
|
127
128
|
const svgData = '<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-width="2" d="m8 8 16 16M24 8 8 24"/></svg>';
|
|
128
|
-
return (h("button", { class: "trailing-button remove-button", tabIndex: -1, "aria-label": this.removeChipLabel, innerHTML: svgData, onClick: this.handleRemoveClick }));
|
|
129
|
+
return (h("button", { class: "trailing-button remove-button", tabIndex: -1, "aria-label": this.removeChipLabel, "aria-controls": this.chipId, innerHTML: svgData, onClick: this.handleRemoveClick }));
|
|
129
130
|
}
|
|
130
131
|
static get is() { return "limel-chip"; }
|
|
131
132
|
static get encapsulation() { return "shadow"; }
|
|
@@ -195,7 +196,7 @@ export class Chip {
|
|
|
195
196
|
}
|
|
196
197
|
},
|
|
197
198
|
"required": false,
|
|
198
|
-
"optional":
|
|
199
|
+
"optional": true,
|
|
199
200
|
"docs": {
|
|
200
201
|
"tags": [],
|
|
201
202
|
"text": "Icon of the chip."
|
|
@@ -324,7 +325,7 @@ export class Chip {
|
|
|
324
325
|
"references": {}
|
|
325
326
|
},
|
|
326
327
|
"required": false,
|
|
327
|
-
"optional":
|
|
328
|
+
"optional": true,
|
|
328
329
|
"docs": {
|
|
329
330
|
"tags": [],
|
|
330
331
|
"text": "Set to `filter` to render the chip with a distinct style\nsuitable for visualizing filters."
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,EACH,SAAS,EACT,kBAAkB,EAClB,MAAM,EACN,eAAe,GAClB,MAAM,qBAAqB,CAAC;AAO7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAMH,MAAM,OAAO,IAAI;;IA2FL,mBAAc,GAAG,GAAG,EAAE;MAC1B,OAAO;QACH,cACI,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,SAAS,EAAE,IAAI,CAAC,mBAAmB;UAElC,IAAI,CAAC,UAAU,EAAE;UACjB,IAAI,CAAC,WAAW,EAAE;UAClB,IAAI,CAAC,WAAW,EAAE,CACd;QACT,IAAI,CAAC,kBAAkB,EAAE;OAC5B,CAAC;IACN,CAAC,CAAC;IAEM,iBAAY,GAAG,GAAG,EAAE;MACxB,OAAO;QACH,SACI,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EACpB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EACtB,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,mBACT,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACjD,SAAS,EAAE,IAAI,CAAC,mBAAmB;UAElC,IAAI,CAAC,UAAU,EAAE;UACjB,IAAI,CAAC,WAAW,EAAE;UAClB,IAAI,CAAC,WAAW,EAAE,CACnB;QACJ,IAAI,CAAC,kBAAkB,EAAE;OAC5B,CAAC;IACN,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACvB,OAAO,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC;IACjD,CAAC,CAAC;IAkDM,4BAAuB,GAAG,CAAC,CAAC,EAAE,EAAE;MACpC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;QAChC,CAAC,CAAC,cAAc,EAAE,CAAC;OACtB;IACL,CAAC,CAAC;IAEM,sBAAiB,GAAG,CAAC,KAAiC,EAAE,EAAE;MAC9D,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;IAEM,wBAAmB,GAAG,CAAC,KAAoB,EAAE,EAAE;MACnD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACjB,OAAO;OACV;MAED,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;MACjC,MAAM,QAAQ,GAAG,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC;MAEvD,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;QAC9D,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;OACjC;IACL,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAW,EAAE;MACnC,OAAO,SAAS,CAAC,GAAG,CAAC,sBAAsB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChE,CAAC,CAAC;oBAtM2B,IAAI;;;;;oBA8Bf,KAAK;oBAOL,KAAK;oBAQL,KAAK;qBAMJ,KAAK;;;EAkBjB,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAClC,CAAC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpC,CAAC;EAEM,MAAM;IACT,OAAO,CACH,EAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,IACtC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CACrD,CACV,CAAC;EACN,CAAC;EAyCO,UAAU;;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAO,CACH,kBACI,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE;QACH,KAAK,EAAE,GAAG,MAAC,IAAI,CAAC,IAAa,0CAAE,KAAK,EAAE;QACtC,kBAAkB,EAAE,GAChB,MAAC,IAAI,CAAC,IAAa,0CAAE,eACzB,EAAE;OACL,GACH,CACL,CAAC;EACN,CAAC;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,mBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;EAC9C,CAAC;EAEO,kBAAkB;IACtB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;MACnD,OAAO;KACV;IAED,MAAM,OAAO,GACT,uJAAuJ,CAAC;IAE5J,OAAO,CACH,cACI,KAAK,EAAC,+BAA+B,EACrC,QAAQ,EAAE,CAAC,CAAC,gBACA,IAAI,CAAC,eAAe,EAChC,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,IAAI,CAAC,iBAAiB,GACjC,CACL,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BJ","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport { Icon, Languages, Link } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport {\n BACKSPACE,\n BACKSPACE_KEY_CODE,\n DELETE,\n DELETE_KEY_CODE,\n} from '../../util/keycodes';\nimport { Chip as OldChipInterface } from '../chip-set/chip.types';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @private\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n tag: 'limel-chip',\n shadow: true,\n styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Label displayed on the chip\n */\n @Prop({ reflect: true })\n public text: string;\n\n /**\n * Icon of the chip.\n */\n @Prop()\n public icon: string | Icon;\n\n /**\n * If supplied, the chip will become a clickable link.\n */\n @Prop()\n public link?: Omit<Link, 'text'>;\n\n /**\n * The value of the badge, displayed on the chip.\n */\n @Prop({ reflect: true })\n public badge?: string | number;\n\n /**\n * Set to `true` to disable the chip.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to render the chip as a static UI element.\n * Useful when the parent component has a `readonly` state.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to visualize the chip in a \"selected\" state.\n * This is typically used when the chip is used in a chip-set\n * along with other chips.\n */\n @Prop({ reflect: true })\n public selected = false;\n\n /**\n * Set to `true` to render a remove button on the chip.\n */\n @Prop({ reflect: true })\n public removable = false;\n\n /**\n * Set to `filter` to render the chip with a distinct style\n * suitable for visualizing filters.\n */\n @Prop({ reflect: true })\n public type: 'filter';\n\n /**\n * Fired when clicking on the remove button of a `removable` chip.\n */\n @Event()\n public remove: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelChipElement;\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n return (\n <Host onClick={this.filterClickWhenDisabled}>\n {this.link ? this.renderAsLink() : this.renderAsButton()}\n </Host>\n );\n }\n\n private renderAsButton = () => {\n return [\n <button\n class=\"chip\"\n role=\"button\"\n disabled={this.disabled || this.readonly}\n onKeyDown={this.handleDeleteKeyDown}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderBadge()}\n </button>,\n this.renderRemoveButton(),\n ];\n };\n\n private renderAsLink = () => {\n return [\n <a\n class=\"chip\"\n href={this.link.href}\n title={this.link.title}\n target={this.link.target}\n aria-disabled={this.disabled || this.readonly}\n tabindex={this.disabled || this.readonly ? -1 : 0}\n onKeyDown={this.handleDeleteKeyDown}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderBadge()}\n </a>,\n this.renderRemoveButton(),\n ];\n };\n\n private renderLabel = () => {\n return <span class=\"text\">{this.text}</span>;\n };\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return (\n <limel-icon\n badge={true}\n name={icon}\n style={{\n color: `${(this.icon as Icon)?.color}`,\n 'background-color': `${\n (this.icon as Icon)?.backgroundColor\n }`,\n }}\n />\n );\n }\n\n private renderBadge() {\n if (!this.badge) {\n return;\n }\n\n return <limel-badge label={this.badge} />;\n }\n\n private renderRemoveButton() {\n if (!this.removable || this.readonly || this.disabled) {\n return;\n }\n\n const svgData =\n '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n return (\n <button\n class=\"trailing-button remove-button\"\n tabIndex={-1}\n aria-label={this.removeChipLabel}\n innerHTML={svgData}\n onClick={this.handleRemoveClick}\n />\n );\n }\n\n private filterClickWhenDisabled = (e) => {\n if (this.disabled || this.readonly) {\n e.preventDefault();\n }\n };\n\n private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n event.stopPropagation();\n this.remove.emit();\n };\n\n private handleDeleteKeyDown = (event: KeyboardEvent) => {\n if (!this.removable) {\n return;\n }\n\n const keys = [DELETE, BACKSPACE];\n const keycodes = [DELETE_KEY_CODE, BACKSPACE_KEY_CODE];\n\n if (keys.includes(event.key) || keycodes.includes(event.keyCode)) {\n this.handleRemoveClick(event);\n }\n };\n\n private removeChipLabel = (): string => {\n return translate.get('chip-set.remove-chip', this.language);\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,EACH,SAAS,EACT,kBAAkB,EAClB,MAAM,EACN,eAAe,GAClB,MAAM,qBAAqB,CAAC;AAO7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAMH,MAAM,OAAO,IAAI;;IAmFL,WAAM,GAAG,OAAO,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;IAUvC,mBAAc,GAAG,GAAG,EAAE;MAC1B,OAAO;QACH,cACI,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,SAAS,EAAE,IAAI,CAAC,mBAAmB;UAElC,IAAI,CAAC,UAAU,EAAE;UACjB,IAAI,CAAC,WAAW,EAAE;UAClB,IAAI,CAAC,WAAW,EAAE,CACd;QACT,IAAI,CAAC,kBAAkB,EAAE;OAC5B,CAAC;IACN,CAAC,CAAC;IAEM,iBAAY,GAAG,GAAG,EAAE;MACxB,OAAO;QACH,SACI,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EACpB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EACtB,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,mBACT,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACjD,SAAS,EAAE,IAAI,CAAC,mBAAmB;UAElC,IAAI,CAAC,UAAU,EAAE;UACjB,IAAI,CAAC,WAAW,EAAE;UAClB,IAAI,CAAC,WAAW,EAAE,CACnB;QACJ,IAAI,CAAC,kBAAkB,EAAE;OAC5B,CAAC;IACN,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACvB,OAAO,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC;IACjD,CAAC,CAAC;IAmDM,4BAAuB,GAAG,CAAC,CAAC,EAAE,EAAE;MACpC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;QAChC,CAAC,CAAC,cAAc,EAAE,CAAC;OACtB;IACL,CAAC,CAAC;IAEM,sBAAiB,GAAG,CAAC,KAAiC,EAAE,EAAE;MAC9D,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IACvB,CAAC,CAAC;IAEM,wBAAmB,GAAG,CAAC,KAAoB,EAAE,EAAE;MACnD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACjB,OAAO;OACV;MAED,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;MACjC,MAAM,QAAQ,GAAG,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC;MAEvD,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;QAC9D,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;OACjC;IACL,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAW,EAAE;MACnC,OAAO,SAAS,CAAC,GAAG,CAAC,sBAAsB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChE,CAAC,CAAC;oBA3M2B,IAAI;;;;;oBA8Bf,KAAK;oBAOL,KAAK;oBAQL,KAAK;qBAMJ,KAAK;;;EAkBjB,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAClC,CAAC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpC,CAAC;EAIM,MAAM;IACT,OAAO,CACH,EAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,IACtC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CACrD,CACV,CAAC;EACN,CAAC;EA2CO,UAAU;;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAO,CACH,kBACI,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE;QACH,KAAK,EAAE,GAAG,MAAC,IAAI,CAAC,IAAa,0CAAE,KAAK,EAAE;QACtC,kBAAkB,EAAE,GAChB,MAAC,IAAI,CAAC,IAAa,0CAAE,eACzB,EAAE;OACL,GACH,CACL,CAAC;EACN,CAAC;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,mBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;EAC9C,CAAC;EAEO,kBAAkB;IACtB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;MACnD,OAAO;KACV;IAED,MAAM,OAAO,GACT,uJAAuJ,CAAC;IAE5J,OAAO,CACH,cACI,KAAK,EAAC,+BAA+B,EACrC,QAAQ,EAAE,CAAC,CAAC,gBACA,IAAI,CAAC,eAAe,mBACjB,IAAI,CAAC,MAAM,EAC1B,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,IAAI,CAAC,iBAAiB,GACjC,CACL,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BJ","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport { Icon, Languages, Link } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport {\n BACKSPACE,\n BACKSPACE_KEY_CODE,\n DELETE,\n DELETE_KEY_CODE,\n} from '../../util/keycodes';\nimport { Chip as OldChipInterface } from '../chip-set/chip.types';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @private\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n tag: 'limel-chip',\n shadow: true,\n styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n /**\n * Defines the language for translations.\n * Will translate the translatable strings on the components.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Label displayed on the chip\n */\n @Prop({ reflect: true })\n public text: string;\n\n /**\n * Icon of the chip.\n */\n @Prop()\n public icon?: string | Icon;\n\n /**\n * If supplied, the chip will become a clickable link.\n */\n @Prop()\n public link?: Omit<Link, 'text'>;\n\n /**\n * The value of the badge, displayed on the chip.\n */\n @Prop({ reflect: true })\n public badge?: string | number;\n\n /**\n * Set to `true` to disable the chip.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to render the chip as a static UI element.\n * Useful when the parent component has a `readonly` state.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to visualize the chip in a \"selected\" state.\n * This is typically used when the chip is used in a chip-set\n * along with other chips.\n */\n @Prop({ reflect: true })\n public selected = false;\n\n /**\n * Set to `true` to render a remove button on the chip.\n */\n @Prop({ reflect: true })\n public removable = false;\n\n /**\n * Set to `filter` to render the chip with a distinct style\n * suitable for visualizing filters.\n */\n @Prop({ reflect: true })\n public type?: 'filter';\n\n /**\n * Fired when clicking on the remove button of a `removable` chip.\n */\n @Event()\n public remove: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelChipElement;\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n private chipId = 'chip-' + crypto.randomUUID();\n\n public render() {\n return (\n <Host onClick={this.filterClickWhenDisabled}>\n {this.link ? this.renderAsLink() : this.renderAsButton()}\n </Host>\n );\n }\n\n private renderAsButton = () => {\n return [\n <button\n id={this.chipId}\n class=\"chip\"\n role=\"button\"\n disabled={this.disabled || this.readonly}\n onKeyDown={this.handleDeleteKeyDown}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderBadge()}\n </button>,\n this.renderRemoveButton(),\n ];\n };\n\n private renderAsLink = () => {\n return [\n <a\n id={this.chipId}\n class=\"chip\"\n href={this.link.href}\n title={this.link.title}\n target={this.link.target}\n aria-disabled={this.disabled || this.readonly}\n tabindex={this.disabled || this.readonly ? -1 : 0}\n onKeyDown={this.handleDeleteKeyDown}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderBadge()}\n </a>,\n this.renderRemoveButton(),\n ];\n };\n\n private renderLabel = () => {\n return <span class=\"text\">{this.text}</span>;\n };\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return (\n <limel-icon\n badge={true}\n name={icon}\n style={{\n color: `${(this.icon as Icon)?.color}`,\n 'background-color': `${\n (this.icon as Icon)?.backgroundColor\n }`,\n }}\n />\n );\n }\n\n private renderBadge() {\n if (!this.badge) {\n return;\n }\n\n return <limel-badge label={this.badge} />;\n }\n\n private renderRemoveButton() {\n if (!this.removable || this.readonly || this.disabled) {\n return;\n }\n\n const svgData =\n '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n return (\n <button\n class=\"trailing-button remove-button\"\n tabIndex={-1}\n aria-label={this.removeChipLabel}\n aria-controls={this.chipId}\n innerHTML={svgData}\n onClick={this.handleRemoveClick}\n />\n );\n }\n\n private filterClickWhenDisabled = (e) => {\n if (this.disabled || this.readonly) {\n e.preventDefault();\n }\n };\n\n private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n event.stopPropagation();\n this.remove.emit();\n };\n\n private handleDeleteKeyDown = (event: KeyboardEvent) => {\n if (!this.removable) {\n return;\n }\n\n const keys = [DELETE, BACKSPACE];\n const keycodes = [DELETE_KEY_CODE, BACKSPACE_KEY_CODE];\n\n if (keys.includes(event.key) || keycodes.includes(event.keyCode)) {\n this.handleRemoveClick(event);\n }\n };\n\n private removeChipLabel = (): string => {\n return translate.get('chip-set.remove-chip', this.language);\n };\n}\n"]}
|
|
@@ -2675,11 +2675,6 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading {
|
|
|
2675
2675
|
.mdc-chip-set.has-clear-all-button.mdc-chip-set--input {
|
|
2676
2676
|
padding-right: 2rem;
|
|
2677
2677
|
}
|
|
2678
|
-
.mdc-chip-set.disabled:not(.mdc-chip-set--input) {
|
|
2679
|
-
cursor: not-allowed;
|
|
2680
|
-
opacity: 0.4;
|
|
2681
|
-
pointer-events: none;
|
|
2682
|
-
}
|
|
2683
2678
|
|
|
2684
2679
|
.mdc-chip__icon.mdc-chip__icon--trailing {
|
|
2685
2680
|
transition: background-color 0.2s ease, color 0.2s ease;
|