npm - @limetech/lime-elements - Versions diffs - 37.1.0-next.56 → 37.1.0-next.58 - Mend

@limetech/lime-elements 37.1.0-next.56 → 37.1.0-next.58

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

Files changed (161) hide show

package/dist/collection/components/select/select.template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.template.js","sourceRoot":"","sources":["../../../src/components/select/select.template.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ListItem, Option } from '../../interface';\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { isMultiple } from '../../util/multiple';\n\ninterface SelectTemplateProps {\n disabled?: boolean;\n readonly?: boolean;\n required?: boolean;\n invalid?: boolean;\n options: Option[];\n value: Option \| Option[];\n label?: string;\n helperText?: string;\n multiple?: boolean;\n native: boolean;\n\n onNativeChange: (event: Event) => void;\n\n id: string;\n onMenuChange: (event: CustomEvent<ListItem \| ListItem[]>) => void;\n onTriggerPress: (event: KeyboardEvent) => void;\n isOpen: boolean;\n open: () => void;\n close: () => void;\n checkValid: boolean;\n\n dropdownZIndex: string;\n}\n\nexport const SelectTemplate: FunctionalComponent<SelectTemplateProps> = (\n props\n) => {\n const value = props.value;\n let hasValue = !!props.value;\n let hasEmptyText = true;\n if (isMultiple(value)) {\n hasValue = value.length > 0;\n } else if (hasValue) {\n hasValue = !!value.value;\n hasEmptyText = value.text === '';\n }\n\n let isValid = !props.invalid;\n if (props.checkValid && props.required && !hasValue) {\n isValid = false;\n }\n\n const classList = {\n 'limel-select': true,\n 'mdc-select': true,\n 'mdc-select--outlined': true,\n 'mdc-select--disabled': props.disabled,\n 'limel-select--readonly': props.readonly,\n 'limel-select--required': props.required,\n 'limel-select--invalid': !isValid,\n 'limel-select--empty': !hasValue,\n 'limel-select--with-helper-text': typeof props.helperText === 'string',\n };\n\n return (\n <div class={classList}>\n <SelectValue\n {...props}\n hasValue={hasValue}\n isValid={isValid}\n hasEmptyText={hasEmptyText}\n />\n <HelperText text={props.helperText} isValid={!props.invalid} />\n <SelectDropdown {...props} />\n </div>\n );\n};\n\nconst SelectValue: FunctionalComponent<\n SelectTemplateProps & {\n hasValue: boolean;\n isValid: boolean;\n hasEmptyText: boolean;\n }\n> = (props) => {\n const anchorClassList = {\n 'mdc-select__anchor': true,\n 'limel-select-trigger': true,\n 'limel-select--focused': props.isOpen,\n };\n const labelClassList = {\n 'mdc-floating-label': true,\n 'mdc-floating-label--float-above':\n !props.hasEmptyText \|\|\n props.isOpen \|\|\n props.readonly \|\|\n props.hasValue,\n 'mdc-floating-label--active': props.isOpen,\n };\n\n return (\n <button\n class={anchorClassList}\n onClick={props.open}\n onKeyPress={props.onTriggerPress}\n aria-haspopup=\"listbox\"\n aria-expanded={props.isOpen}\n aria-controls={props.id}\n aria-labelledby=\"s-label s-selected-text\"\n aria-required={props.required}\n disabled={props.disabled \|\| props.readonly}\n >\n <span id=\"s-label\" class={labelClassList}>\n {props.label}\n </span>\n <span class=\"mdc-select__selected-text-container limel-select__selected-option\">\n {getSelectedIcon(props.value)}\n <span\n id=\"s-selected-text\"\n class=\"mdc-select__selected-text limel-select__selected-option__text\"\n >\n {getSelectedText(props.value, props.readonly)}\n </span>\n </span>\n <ShowIcon {...props} isValid={props.isValid} />\n <span class=\"mdc-select__dropdown-icon\">\n <svg\n class=\"mdc-select__dropdown-icon-graphic\"\n viewBox=\"7 10 10 5\"\n focusable=\"false\"\n >\n <polygon\n stroke=\"none\"\n fill-rule=\"evenodd\"\n points=\"7 10 12 15 17 10\"\n ></polygon>\n </svg>\n </span>\n </button>\n );\n};\n\nconst ShowIcon: FunctionalComponent<\n SelectTemplateProps & {\n isValid: boolean;\n }\n> = (props) => {\n if (props.isValid) {\n return;\n }\n\n return (\n <limel-icon name=\"high_importance\" size=\"medium\" class=\"invalid-icon\" />\n );\n};\n\nconst HelperText: FunctionalComponent<{ text: string; isValid: boolean }> = (\n props\n) => {\n if (typeof props.text !== 'string') {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={props.text.trim()}\n invalid={!props.isValid}\n />\n );\n};\n\nconst SelectDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {\n if (props.native) {\n return <NativeDropdown {...props} />;\n }\n\n return <MenuDropdown {...props} />;\n};\n\nconst MenuDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {\n const items = createMenuItems(props.options, props.value, props.required);\n\n return (\n <limel-portal\n containerId={props.id}\n visible={props.isOpen}\n inheritParentWidth={true}\n containerStyle={{ 'z-index': props.dropdownZIndex }}\n >\n <limel-menu-surface\n open={props.isOpen}\n onDismiss={props.close}\n style={{\n '--mdc-menu-min-width': '100%',\n 'max-height': 'inherit',\n display: 'flex',\n 'min-width': '100%',\n width: 'fit-content',\n }}\n >\n <limel-list\n items={items}\n type={props.multiple ? 'checkbox' : 'selectable'}\n onChange={props.onMenuChange}\n />\n </limel-menu-surface>\n </limel-portal>\n );\n};\n\nconst NativeDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {\n return (\n <select\n required={props.required}\n aria-disabled={props.disabled}\n aria-required={props.required}\n onChange={props.onNativeChange}\n onFocus={props.open}\n onBlur={props.close}\n class=\"limel-select__native-control\"\n disabled={props.disabled}\n multiple={props.multiple}\n >\n {props.options.map((option) => {\n return (\n <option\n key={option.value}\n value={option.value}\n selected={isSelected(option, props.value)}\n disabled={option.disabled}\n >\n {option.text}\n </option>\n );\n })}\n </select>\n );\n};\n\nfunction isSelected(option: Option, value: Option \| Option[]): boolean {\n if (!value) {\n return false;\n }\n\n if (isMultiple(value)) {\n return value.some((o) => option.value === o.value);\n }\n\n return option.value === value.value;\n}\n\nfunction createMenuItems(\n options: Option[],\n value: Option \| Option[],\n selectIsRequired = false\n): Array<ListItem<Option>> {\n const menuOptionFilter = getMenuOptionFilter(selectIsRequired);\n\n return options.filter(menuOptionFilter).map((option) => {\n const selected = isSelected(option, value);\n const { text, disabled } = option;\n\n return {\n text: text,\n selected: selected,\n disabled: disabled,\n value: option,\n icon: option.icon,\n iconColor: option.iconColor,\n };\n });\n}\n\nfunction getMenuOptionFilter(selectIsRequired: boolean) {\n return (option: Option) => {\n if (!selectIsRequired) {\n // If the select component is NOT required, we keep all options.\n return true;\n }\n\n if (option.text) {\n // If the select component IS required, we keep only options\n // that are not \"empty\". We only check the text property, because\n // some systems use an \"empty option\" that will have a value for\n // the `value` property, to signify \"no option selected\". Such\n // an option should be treated as \"empty\".\n return true;\n }\n };\n}\n\nfunction getSelectedText(value: Option \| Option[], readonly: boolean): string {\n if ((!value \|\| (isMultiple(value) && !value.length)) && readonly) {\n return '–';\n }\n\n if (!value) {\n return '';\n }\n\n if (isMultiple(value)) {\n return value.map((option) => option.text).join(', ');\n }\n\n return value.text;\n}\n\nfunction getSelectedIcon(value: any) {\n if (!value \|\| !value.icon) {\n return '';\n }\n\n const style: any = {};\n if (value.iconColor) {\n style.color = value.iconColor;\n }\n\n return (\n <limel-icon\n class=\"limel-select__selected-option__icon\"\n name={value.icon}\n size=\"medium\"\n style={style}\n />\n );\n}\n"]}
1	+ {"version":3,"file":"select.template.js","sourceRoot":"","sources":["../../../src/components/select/select.template.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ListItem, Option } from '../../interface';\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { isMultiple } from '../../util/multiple';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\n\ninterface SelectTemplateProps {\n disabled?: boolean;\n readonly?: boolean;\n required?: boolean;\n invalid?: boolean;\n options: Option[];\n value: Option \| Option[];\n label?: string;\n helperText?: string;\n multiple?: boolean;\n native: boolean;\n\n onNativeChange: (event: Event) => void;\n\n id: string;\n onMenuChange: (event: CustomEvent<ListItem \| ListItem[]>) => void;\n onTriggerPress: (event: KeyboardEvent) => void;\n isOpen: boolean;\n open: () => void;\n close: () => void;\n checkValid: boolean;\n\n dropdownZIndex: string;\n}\n\nexport const SelectTemplate: FunctionalComponent<SelectTemplateProps> = (\n props\n) => {\n const value = props.value;\n let hasValue = !!props.value;\n let hasEmptyText = true;\n if (isMultiple(value)) {\n hasValue = value.length > 0;\n } else if (hasValue) {\n hasValue = !!value.value;\n hasEmptyText = value.text === '';\n }\n\n let isValid = !props.invalid;\n if (props.checkValid && props.required && !hasValue) {\n isValid = false;\n }\n\n const classList = {\n 'limel-select': true,\n 'mdc-select': true,\n 'mdc-select--outlined': true,\n 'mdc-select--disabled': props.disabled,\n 'limel-select--readonly': props.readonly,\n 'limel-select--required': props.required,\n 'limel-select--invalid': !isValid,\n 'limel-select--empty': !hasValue,\n 'limel-select--with-helper-text': typeof props.helperText === 'string',\n };\n\n return (\n <div class={classList}>\n <SelectValue\n {...props}\n hasValue={hasValue}\n isValid={isValid}\n hasEmptyText={hasEmptyText}\n />\n <HelperText text={props.helperText} isValid={!props.invalid} />\n <SelectDropdown {...props} />\n </div>\n );\n};\n\nconst SelectValue: FunctionalComponent<\n SelectTemplateProps & {\n hasValue: boolean;\n isValid: boolean;\n hasEmptyText: boolean;\n }\n> = (props) => {\n const anchorClassList = {\n 'mdc-select__anchor': true,\n 'limel-select-trigger': true,\n 'limel-select--focused': props.isOpen,\n };\n const labelClassList = {\n 'mdc-floating-label': true,\n 'mdc-floating-label--float-above':\n !props.hasEmptyText \|\|\n props.isOpen \|\|\n props.readonly \|\|\n props.hasValue,\n 'mdc-floating-label--active': props.isOpen,\n };\n\n return (\n <button\n class={anchorClassList}\n onClick={props.open}\n onKeyPress={props.onTriggerPress}\n aria-haspopup=\"listbox\"\n aria-expanded={props.isOpen}\n aria-controls={props.id}\n aria-labelledby=\"s-label s-selected-text\"\n aria-required={props.required}\n disabled={props.disabled \|\| props.readonly}\n >\n <span id=\"s-label\" class={labelClassList}>\n {props.label}\n </span>\n <span class=\"mdc-select__selected-text-container limel-select__selected-option\">\n {getSelectedIcon(props.value)}\n <span\n id=\"s-selected-text\"\n class=\"mdc-select__selected-text limel-select__selected-option__text\"\n >\n {getSelectedText(props.value, props.readonly)}\n </span>\n </span>\n <ShowIcon {...props} isValid={props.isValid} />\n <span class=\"mdc-select__dropdown-icon\">\n <svg\n class=\"mdc-select__dropdown-icon-graphic\"\n viewBox=\"7 10 10 5\"\n focusable=\"false\"\n >\n <polygon\n stroke=\"none\"\n fill-rule=\"evenodd\"\n points=\"7 10 12 15 17 10\"\n ></polygon>\n </svg>\n </span>\n </button>\n );\n};\n\nconst ShowIcon: FunctionalComponent<\n SelectTemplateProps & {\n isValid: boolean;\n }\n> = (props) => {\n if (props.isValid) {\n return;\n }\n\n return (\n <limel-icon name=\"high_importance\" size=\"medium\" class=\"invalid-icon\" />\n );\n};\n\nconst HelperText: FunctionalComponent<{ text: string; isValid: boolean }> = (\n props\n) => {\n if (typeof props.text !== 'string') {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={props.text.trim()}\n invalid={!props.isValid}\n />\n );\n};\n\nconst SelectDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {\n if (props.native) {\n return <NativeDropdown {...props} />;\n }\n\n return <MenuDropdown {...props} />;\n};\n\nconst MenuDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {\n const items = createMenuItems(props.options, props.value, props.required);\n\n return (\n <limel-portal\n containerId={props.id}\n visible={props.isOpen}\n inheritParentWidth={true}\n containerStyle={{ 'z-index': props.dropdownZIndex }}\n >\n <limel-menu-surface\n open={props.isOpen}\n onDismiss={props.close}\n style={{\n '--mdc-menu-min-width': '100%',\n 'max-height': 'inherit',\n display: 'flex',\n 'min-width': '100%',\n width: 'fit-content',\n }}\n >\n <limel-list\n items={items}\n type={props.multiple ? 'checkbox' : 'selectable'}\n onChange={props.onMenuChange}\n />\n </limel-menu-surface>\n </limel-portal>\n );\n};\n\nconst NativeDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {\n return (\n <select\n required={props.required}\n aria-disabled={props.disabled}\n aria-required={props.required}\n onChange={props.onNativeChange}\n onFocus={props.open}\n onBlur={props.close}\n class=\"limel-select__native-control\"\n disabled={props.disabled}\n multiple={props.multiple}\n >\n {props.options.map((option) => {\n return (\n <option\n key={option.value}\n value={option.value}\n selected={isSelected(option, props.value)}\n disabled={option.disabled}\n >\n {option.text}\n </option>\n );\n })}\n </select>\n );\n};\n\nfunction isSelected(option: Option, value: Option \| Option[]): boolean {\n if (!value) {\n return false;\n }\n\n if (isMultiple(value)) {\n return value.some((o) => option.value === o.value);\n }\n\n return option.value === value.value;\n}\n\nfunction createMenuItems(\n options: Option[],\n value: Option \| Option[],\n selectIsRequired = false\n): Array<ListItem<Option>> {\n const menuOptionFilter = getMenuOptionFilter(selectIsRequired);\n\n return options.filter(menuOptionFilter).map((option) => {\n const selected = isSelected(option, value);\n const { text, disabled } = option;\n const name = getIconName(option.icon);\n const color = getIconColor(option.icon, option.iconColor);\n\n return {\n text: text,\n selected: selected,\n disabled: disabled,\n value: option,\n icon: {\n name: name,\n color: color,\n },\n };\n });\n}\n\nfunction getMenuOptionFilter(selectIsRequired: boolean) {\n return (option: Option) => {\n if (!selectIsRequired) {\n // If the select component is NOT required, we keep all options.\n return true;\n }\n\n if (option.text) {\n // If the select component IS required, we keep only options\n // that are not \"empty\". We only check the text property, because\n // some systems use an \"empty option\" that will have a value for\n // the `value` property, to signify \"no option selected\". Such\n // an option should be treated as \"empty\".\n return true;\n }\n };\n}\n\nfunction getSelectedText(value: Option \| Option[], readonly: boolean): string {\n if ((!value \|\| (isMultiple(value) && !value.length)) && readonly) {\n return '–';\n }\n\n if (!value) {\n return '';\n }\n\n if (isMultiple(value)) {\n return value.map((option) => option.text).join(', ');\n }\n\n return value.text;\n}\n\nfunction getSelectedIcon(value: any) {\n if (!value \|\| !value.icon) {\n return '';\n }\n\n const name = getIconName(value.icon);\n const color = getIconColor(value.icon, value.iconColor);\n const style: any = {};\n if (color) {\n style.color = color;\n }\n\n return (\n <limel-icon\n class=\"limel-select__selected-option__icon\"\n name={name}\n size=\"medium\"\n style={style}\n />\n );\n}\n\nexport function triggerIconColorWarning(options: Option[]) {\n options.forEach((option) => {\n if (option.iconColor) {\n /* eslint-disable-next-line no-console */\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\"\n );\n }\n });\n}\n"]}

package/dist/collection/components/tab-bar/tab-bar.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { MDCTabBar } from '@material/tab-bar';
 import { strings } from '@material/tab-bar/constants';
 import { isEqual, difference } from 'lodash-es';
 import { setActiveTab } from './tabs';
+import { getIconColor, getIconName } from '../icon/get-icon-props';
 const { TAB_ACTIVATED_EVENT } = strings;
 const SCROLL_DISTANCE_ON_CLICK_PX = 150;
 const HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX = 40;
@@ -42,6 +43,7 @@ export class TabBar {
   }
   componentDidLoad() {
     this.setup();
+    this.triggerIconColorWarning();
   }
   componentDidUpdate() {
     if (!this.setupMdc) {
@@ -148,11 +150,13 @@ export class TabBar {
     if (!tab.icon) {
       return;
     }
+    const name = getIconName(tab.icon);
+    const color = getIconColor(tab.icon, tab.iconColor);
     const style = { color: '' };
-    if (tab.iconColor) {
-      style.color = tab.iconColor;
+    if (color) {
+      style.color = color;
     }
-    return (h("limel-icon", { class: "mdc-tab__icon", name: tab.icon, style: style, size: "small", "aria-hidden": "true" }));
+    return (h("limel-icon", { class: "mdc-tab__icon", name: name, style: style, size: "small", "aria-hidden": "true" }));
   }
   renderTab(tab) {
     return (h("button", { class: {
@@ -163,6 +167,12 @@ export class TabBar {
         'mdc-tab-indicator--active': !!tab.active,
       } }, h("span", { class: "mdc-tab-indicator__content mdc-tab-indicator__content--underline" })), h("span", { class: "mdc-tab__ripple" })));
   }
+  triggerIconColorWarning() {
+    if (this.tabs.some((tab) => tab.iconColor)) {
+      /* eslint-disable-next-line no-console */
+      console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.");
+    }
+  }
   static get is() { return "limel-tab-bar"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {

package/dist/collection/components/tab-bar/tab-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../../../src/components/tab-bar/tab-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Listen,\n Prop,\n Element,\n EventEmitter,\n Event,\n State,\n Watch,\n} from '@stencil/core';\nimport { MDCTabBar, MDCTabBarActivatedEvent } from '@material/tab-bar';\nimport { strings } from '@material/tab-bar/constants';\nimport { Tab } from '../../interface';\nimport { isEqual, difference } from 'lodash-es';\nimport { setActiveTab } from './tabs';\n\nconst { TAB_ACTIVATED_EVENT } = strings;\nconst SCROLL_DISTANCE_ON_CLICK_PX = 150;\nconst HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX = 40;\n\n/*\n Tabs are great to organize information hierarchically in the interface and divide it into distinct categories. Using tabs, you can create groups of content that are related and at the same level in the hierarchy.\n * :::warning\n * Tab bars should be strictly used for navigation at the top levels.\n * They should never be used to perform actions, or navigate away from the view which contains them.\n * :::\n * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.\n * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.\n * :::tip Other things to consider\n * Never divide the content of a tab using a nested tab bar.\n * Never place two tab bars within the same screen.\n * Never use background color for icons in tabs.\n * Avoid having long labels for tabs.\n * A tab will never be removed or get disabled, even if there is no content under it.\n * :::\n * @exampleComponent limel-example-tab-bar\n * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width\n * @exampleComponent limel-example-tab-bar-with-equal-tab-width\n /\n@Component({\n tag: 'limel-tab-bar',\n styleUrl: 'tab-bar.scss',\n shadow: true,\n})\nexport class TabBar {\n /\n List of tabs to display\n /\n @Prop({ mutable: true })\n public tabs: Tab[] = [];\n\n /\n Emitted when a tab has been changed\n */\n @Event()\n private changeTab: EventEmitter<Tab>;\n\n @Element()\n private host: HTMLLimelTabBarElement;\n\n @State()\n private canScrollLeft = false;\n\n @State()\n private canScrollRight = false;\n\n private mdcTabBar: MDCTabBar;\n private setupMdc = false;\n private scrollArea: HTMLElement;\n private scrollContent: HTMLElement;\n\n constructor() {\n this.handleTabActivated = this.handleTabActivated.bind(this);\n this.handleScroll = this.handleScroll.bind(this);\n this.handleLeftScrollClick = this.handleLeftScrollClick.bind(this);\n this.handleRightScrollClick = this.handleRightScrollClick.bind(this);\n this.renderTab = this.renderTab.bind(this);\n }\n\n public connectedCallback() {\n this.setup();\n }\n\n public componentDidLoad() {\n this.setup();\n }\n\n public componentDidUpdate() {\n if (!this.setupMdc) {\n return;\n }\n\n this.setup();\n this.setupMdc = false;\n }\n\n public disconnectedCallback() {\n this.tearDown();\n }\n\n public render() {\n return (\n <div class=\"mdc-tab-bar\" role=\"tablist\">\n <div\n class={{\n 'mdc-tab-scroller': true,\n 'can-scroll-left': this.canScrollLeft,\n 'can-scroll-right': this.canScrollRight,\n }}\n >\n <div class=\"mdc-tab-scroller__scroll-area lime-hide-scrollbars\">\n <div class=\"mdc-tab-scroller__scroll-content\">\n {this.tabs.map(this.renderTab)}\n </div>\n </div>\n <div class=\"scroll-fade left\" />\n <div class=\"scroll-button left\">\n <limel-icon-button\n icon=\"angle_left\"\n elevated={true}\n tabindex=\"-1\"\n aria-hidden=\"true\"\n disabled={!this.canScrollLeft}\n onClick={this.handleLeftScrollClick}\n />\n </div>\n <div class=\"scroll-fade right\" />\n <div class=\"scroll-button right\">\n <limel-icon-button\n icon=\"angle_right\"\n elevated={true}\n tabindex=\"-1\"\n aria-hidden=\"true\"\n disabled={!this.canScrollRight}\n onClick={this.handleRightScrollClick}\n />\n </div>\n </div>\n </div>\n );\n }\n\n @Watch('tabs')\n protected tabsChanged(newTabs: Tab[] = [], oldTabs: Tab[] = []) {\n const newIds = newTabs.map((tab) => tab.id);\n const oldIds = oldTabs.map((tab) => tab.id);\n\n if (isEqual(newIds, oldIds)) {\n return;\n }\n\n this.setupMdc = true;\n this.tearDown();\n }\n\n @Listen('resize', { passive: true, target: 'window' })\n protected handleWindowResize() {\n this.handleScroll();\n }\n\n private setup() {\n const element = this.host.shadowRoot.querySelector('.mdc-tab-bar');\n if (!element) {\n return;\n }\n\n this.mdcTabBar = new MDCTabBar(element);\n this.mdcTabBar.focusOnActivate = true;\n this.mdcTabBar.useAutomaticActivation = true;\n this.scrollArea = element.querySelector(\n '.mdc-tab-scroller__scroll-area'\n );\n this.scrollContent = element.querySelector(\n '.mdc-tab-scroller__scroll-content'\n );\n\n this.setupListeners();\n\n // Use timeout to avoid Stencil warning about re-renders. /Ads\n setTimeout(this.handleScroll, 0);\n }\n\n private tearDown() {\n if (this.scrollArea) {\n this.scrollArea.removeEventListener('scroll', this.handleScroll);\n }\n\n if (this.mdcTabBar) {\n this.mdcTabBar.unlisten(\n TAB_ACTIVATED_EVENT,\n this.handleTabActivated\n );\n this.mdcTabBar.destroy();\n }\n }\n\n private setupListeners() {\n this.mdcTabBar.listen(TAB_ACTIVATED_EVENT, this.handleTabActivated);\n this.scrollArea.addEventListener('scroll', this.handleScroll, {\n passive: true,\n });\n }\n\n private handleTabActivated(event: MDCTabBarActivatedEvent) {\n const index = event.detail.index;\n const newTabs = setActiveTab(this.tabs, index);\n\n difference(newTabs, this.tabs)\n .sort(this.sortByInactive)\n .forEach((tab: Tab) => {\n this.changeTab.emit(tab);\n });\n\n this.tabs = newTabs;\n }\n\n private sortByInactive(a: Tab, b: Tab) {\n return Number(a.active) - Number(b.active);\n }\n\n private handleScroll() {\n const scrollLeft = this.scrollArea.scrollLeft;\n const scrollRight = Math.floor(\n this.scrollContent.getBoundingClientRect().width -\n this.scrollArea.getBoundingClientRect().width -\n scrollLeft\n );\n\n if (scrollLeft > HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX) {\n this.canScrollLeft = true;\n } else {\n this.canScrollLeft = false;\n }\n\n if (scrollRight > HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX) {\n this.canScrollRight = true;\n } else {\n this.canScrollRight = false;\n }\n }\n\n private handleLeftScrollClick() {\n this.scrollArea.scroll({\n left: this.scrollArea.scrollLeft - SCROLL_DISTANCE_ON_CLICK_PX,\n behavior: 'smooth',\n });\n }\n\n private handleRightScrollClick() {\n this.scrollArea.scroll({\n left: this.scrollArea.scrollLeft + SCROLL_DISTANCE_ON_CLICK_PX,\n behavior: 'smooth',\n });\n }\n\n private renderIcon(tab: Tab) {\n if (!tab.icon) {\n return;\n }\n\n const style = { color: '' };\n\n if (tab.iconColor) {\n style.color = tab.iconColor;\n }\n\n return (\n <limel-icon\n class=\"mdc-tab__icon\"\n name={tab.icon}\n style={style}\n size=\"small\"\n aria-hidden=\"true\"\n />\n );\n }\n\n private renderTab(tab: Tab) {\n return (\n <button\n class={{\n 'mdc-tab': true,\n 'mdc-tab--active': !!tab.active,\n }}\n role=\"tab\"\n aria-selected={tab.active ? 'true' : 'false'}\n tabindex={tab.active ? 0 : -1}\n >\n <span class=\"mdc-tab__content\">\n {this.renderIcon(tab)}\n <span class=\"mdc-tab__text-label\">{tab.text}</span>\n {tab.badge ? <limel-badge label={tab.badge} /> : ''}\n </span>\n <span\n class={{\n 'mdc-tab-indicator': true,\n 'mdc-tab-indicator--active': !!tab.active,\n }}\n >\n <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\" />\n </span>\n <span class=\"mdc-tab__ripple\" />\n </button>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../../../src/components/tab-bar/tab-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,CAAC,EACD,MAAM,EACN,IAAI,EACJ,OAAO,EAEP,KAAK,EACL,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAA2B,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAEnE,MAAM,EAAE,mBAAmB,EAAE,GAAG,OAAO,CAAC;AACxC,MAAM,2BAA2B,GAAG,GAAG,CAAC;AACxC,MAAM,8CAA8C,GAAG,EAAE,CAAC;AAE1D;;;;;;;;;;;;;;;;;;GAkBG;AAMH,MAAM,OAAO,MAAM;EA2Bf;IAJQ,aAAQ,GAAG,KAAK,CAAC;gBAlBJ,EAAE;yBAYC,KAAK;0BAGJ,KAAK;IAQ1B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnE,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC9C;EAEM,iBAAiB;IACpB,IAAI,CAAC,KAAK,EAAE,CAAC;EACjB,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,KAAK,EAAE,CAAC;IACb,IAAI,CAAC,uBAAuB,EAAE,CAAC;EACnC,CAAC;EAEM,kBAAkB;IACrB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAChB,OAAO;KACV;IAED,IAAI,CAAC,KAAK,EAAE,CAAC;IACb,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;EAC1B,CAAC;EAEM,oBAAoB;IACvB,IAAI,CAAC,QAAQ,EAAE,CAAC;EACpB,CAAC;EAEM,MAAM;IACT,OAAO,CACH,WAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS;MACnC,WACI,KAAK,EAAE;UACH,kBAAkB,EAAE,IAAI;UACxB,iBAAiB,EAAE,IAAI,CAAC,aAAa;UACrC,kBAAkB,EAAE,IAAI,CAAC,cAAc;SAC1C;QAED,WAAK,KAAK,EAAC,oDAAoD;UAC3D,WAAK,KAAK,EAAC,kCAAkC,IACxC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAC5B,CACJ;QACN,WAAK,KAAK,EAAC,kBAAkB,GAAG;QAChC,WAAK,KAAK,EAAC,oBAAoB;UAC3B,yBACI,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAC,IAAI,iBACD,MAAM,EAClB,QAAQ,EAAE,CAAC,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,qBAAqB,GACrC,CACA;QACN,WAAK,KAAK,EAAC,mBAAmB,GAAG;QACjC,WAAK,KAAK,EAAC,qBAAqB;UAC5B,yBACI,IAAI,EAAC,aAAa,EAClB,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAC,IAAI,iBACD,MAAM,EAClB,QAAQ,EAAE,CAAC,IAAI,CAAC,cAAc,EAC9B,OAAO,EAAE,IAAI,CAAC,sBAAsB,GACtC,CACA,CACJ,CACJ,CACT,CAAC;EACN,CAAC;EAGS,WAAW,CAAC,UAAiB,EAAE,EAAE,UAAiB,EAAE;IAC1D,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC5C,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAE5C,IAAI,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE;MACzB,OAAO;KACV;IAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,QAAQ,EAAE,CAAC;EACpB,CAAC;EAGS,kBAAkB;IACxB,IAAI,CAAC,YAAY,EAAE,CAAC;EACxB,CAAC;EAEO,KAAK;IACT,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACnE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;IACxC,IAAI,CAAC,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC;IACtC,IAAI,CAAC,SAAS,CAAC,sBAAsB,GAAG,IAAI,CAAC;IAC7C,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,aAAa,CACnC,gCAAgC,CACnC,CAAC;IACF,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,aAAa,CACtC,mCAAmC,CACtC,CAAC;IAEF,IAAI,CAAC,cAAc,EAAE,CAAC;IAEtB,8DAA8D;IAC9D,UAAU,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;EACrC,CAAC;EAEO,QAAQ;IACZ,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KACpE;IAED,IAAI,IAAI,CAAC,SAAS,EAAE;MAChB,IAAI,CAAC,SAAS,CAAC,QAAQ,CACnB,mBAAmB,EACnB,IAAI,CAAC,kBAAkB,CAC1B,CAAC;MACF,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;KAC5B;EACL,CAAC;EAEO,cAAc;IAClB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACpE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE;MAC1D,OAAO,EAAE,IAAI;KAChB,CAAC,CAAC;EACP,CAAC;EAEO,kBAAkB,CAAC,KAA8B;IACrD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IACjC,MAAM,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAE/C,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC;OACzB,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC;OACzB,OAAO,CAAC,CAAC,GAAQ,EAAE,EAAE;MAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEP,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;EACxB,CAAC;EAEO,cAAc,CAAC,CAAM,EAAE,CAAM;IACjC,OAAO,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;EAC/C,CAAC;EAEO,YAAY;IAChB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;IAC9C,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAC1B,IAAI,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,KAAK;MAC5C,IAAI,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK;MAC7C,UAAU,CACjB,CAAC;IAEF,IAAI,UAAU,GAAG,8CAA8C,EAAE;MAC7D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;KAC7B;SAAM;MACH,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC9B;IAED,IAAI,WAAW,GAAG,8CAA8C,EAAE;MAC9D,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC9B;SAAM;MACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC/B;EACL,CAAC;EAEO,qBAAqB;IACzB,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;MACnB,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,UAAU,GAAG,2BAA2B;MAC9D,QAAQ,EAAE,QAAQ;KACrB,CAAC,CAAC;EACP,CAAC;EAEO,sBAAsB;IAC1B,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;MACnB,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,UAAU,GAAG,2BAA2B;MAC9D,QAAQ,EAAE,QAAQ;KACrB,CAAC,CAAC;EACP,CAAC;EAEO,UAAU,CAAC,GAAQ;IACvB,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;MACX,OAAO;KACV;IAED,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC;IACpD,MAAM,KAAK,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;IAE5B,IAAI,KAAK,EAAE;MACP,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;KACvB;IAED,OAAO,CACH,kBACI,KAAK,EAAC,eAAe,EACrB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,OAAO,iBACA,MAAM,GACpB,CACL,CAAC;EACN,CAAC;EAEO,SAAS,CAAC,GAAQ;IACtB,OAAO,CACH,cACI,KAAK,EAAE;QACH,SAAS,EAAE,IAAI;QACf,iBAAiB,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM;OAClC,EACD,IAAI,EAAC,KAAK,mBACK,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC5C,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;MAE7B,YAAM,KAAK,EAAC,kBAAkB;QACzB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC;QACrB,YAAM,KAAK,EAAC,qBAAqB,IAAE,GAAG,CAAC,IAAI,CAAQ;QAClD,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,mBAAa,KAAK,EAAE,GAAG,CAAC,KAAK,GAAI,CAAC,CAAC,CAAC,EAAE,CAChD;MACP,YACI,KAAK,EAAE;UACH,mBAAmB,EAAE,IAAI;UACzB,2BAA2B,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM;SAC5C;QAED,YAAM,KAAK,EAAC,kEAAkE,GAAG,CAC9E;MACP,YAAM,KAAK,EAAC,iBAAiB,GAAG,CAC3B,CACZ,CAAC;EACN,CAAC;EAEO,uBAAuB;IAC3B,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;MACxC,yCAAyC;MACzC,OAAO,CAAC,IAAI,CACR,sKAAsK,CACzK,CAAC;KACL;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n Component,\n h,\n Listen,\n Prop,\n Element,\n EventEmitter,\n Event,\n State,\n Watch,\n} from '@stencil/core';\nimport { MDCTabBar, MDCTabBarActivatedEvent } from '@material/tab-bar';\nimport { strings } from '@material/tab-bar/constants';\nimport { Tab } from '../../interface';\nimport { isEqual, difference } from 'lodash-es';\nimport { setActiveTab } from './tabs';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\n\nconst { TAB_ACTIVATED_EVENT } = strings;\nconst SCROLL_DISTANCE_ON_CLICK_PX = 150;\nconst HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX = 40;\n\n/*\n Tabs are great to organize information hierarchically in the interface and divide it into distinct categories. Using tabs, you can create groups of content that are related and at the same level in the hierarchy.\n * :::warning\n * Tab bars should be strictly used for navigation at the top levels.\n * They should never be used to perform actions, or navigate away from the view which contains them.\n * :::\n * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.\n * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device.\n * :::tip Other things to consider\n * Never divide the content of a tab using a nested tab bar.\n * Never place two tab bars within the same screen.\n * Never use background color for icons in tabs.\n * Avoid having long labels for tabs.\n * A tab will never be removed or get disabled, even if there is no content under it.\n * :::\n * @exampleComponent limel-example-tab-bar\n * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width\n * @exampleComponent limel-example-tab-bar-with-equal-tab-width\n /\n@Component({\n tag: 'limel-tab-bar',\n styleUrl: 'tab-bar.scss',\n shadow: true,\n})\nexport class TabBar {\n /\n List of tabs to display\n /\n @Prop({ mutable: true })\n public tabs: Tab[] = [];\n\n /\n Emitted when a tab has been changed\n /\n @Event()\n private changeTab: EventEmitter<Tab>;\n\n @Element()\n private host: HTMLLimelTabBarElement;\n\n @State()\n private canScrollLeft = false;\n\n @State()\n private canScrollRight = false;\n\n private mdcTabBar: MDCTabBar;\n private setupMdc = false;\n private scrollArea: HTMLElement;\n private scrollContent: HTMLElement;\n\n constructor() {\n this.handleTabActivated = this.handleTabActivated.bind(this);\n this.handleScroll = this.handleScroll.bind(this);\n this.handleLeftScrollClick = this.handleLeftScrollClick.bind(this);\n this.handleRightScrollClick = this.handleRightScrollClick.bind(this);\n this.renderTab = this.renderTab.bind(this);\n }\n\n public connectedCallback() {\n this.setup();\n }\n\n public componentDidLoad() {\n this.setup();\n this.triggerIconColorWarning();\n }\n\n public componentDidUpdate() {\n if (!this.setupMdc) {\n return;\n }\n\n this.setup();\n this.setupMdc = false;\n }\n\n public disconnectedCallback() {\n this.tearDown();\n }\n\n public render() {\n return (\n <div class=\"mdc-tab-bar\" role=\"tablist\">\n <div\n class={{\n 'mdc-tab-scroller': true,\n 'can-scroll-left': this.canScrollLeft,\n 'can-scroll-right': this.canScrollRight,\n }}\n >\n <div class=\"mdc-tab-scroller__scroll-area lime-hide-scrollbars\">\n <div class=\"mdc-tab-scroller__scroll-content\">\n {this.tabs.map(this.renderTab)}\n </div>\n </div>\n <div class=\"scroll-fade left\" />\n <div class=\"scroll-button left\">\n <limel-icon-button\n icon=\"angle_left\"\n elevated={true}\n tabindex=\"-1\"\n aria-hidden=\"true\"\n disabled={!this.canScrollLeft}\n onClick={this.handleLeftScrollClick}\n />\n </div>\n <div class=\"scroll-fade right\" />\n <div class=\"scroll-button right\">\n <limel-icon-button\n icon=\"angle_right\"\n elevated={true}\n tabindex=\"-1\"\n aria-hidden=\"true\"\n disabled={!this.canScrollRight}\n onClick={this.handleRightScrollClick}\n />\n </div>\n </div>\n </div>\n );\n }\n\n @Watch('tabs')\n protected tabsChanged(newTabs: Tab[] = [], oldTabs: Tab[] = []) {\n const newIds = newTabs.map((tab) => tab.id);\n const oldIds = oldTabs.map((tab) => tab.id);\n\n if (isEqual(newIds, oldIds)) {\n return;\n }\n\n this.setupMdc = true;\n this.tearDown();\n }\n\n @Listen('resize', { passive: true, target: 'window' })\n protected handleWindowResize() {\n this.handleScroll();\n }\n\n private setup() {\n const element = this.host.shadowRoot.querySelector('.mdc-tab-bar');\n if (!element) {\n return;\n }\n\n this.mdcTabBar = new MDCTabBar(element);\n this.mdcTabBar.focusOnActivate = true;\n this.mdcTabBar.useAutomaticActivation = true;\n this.scrollArea = element.querySelector(\n '.mdc-tab-scroller__scroll-area'\n );\n this.scrollContent = element.querySelector(\n '.mdc-tab-scroller__scroll-content'\n );\n\n this.setupListeners();\n\n // Use timeout to avoid Stencil warning about re-renders. /Ads\n setTimeout(this.handleScroll, 0);\n }\n\n private tearDown() {\n if (this.scrollArea) {\n this.scrollArea.removeEventListener('scroll', this.handleScroll);\n }\n\n if (this.mdcTabBar) {\n this.mdcTabBar.unlisten(\n TAB_ACTIVATED_EVENT,\n this.handleTabActivated\n );\n this.mdcTabBar.destroy();\n }\n }\n\n private setupListeners() {\n this.mdcTabBar.listen(TAB_ACTIVATED_EVENT, this.handleTabActivated);\n this.scrollArea.addEventListener('scroll', this.handleScroll, {\n passive: true,\n });\n }\n\n private handleTabActivated(event: MDCTabBarActivatedEvent) {\n const index = event.detail.index;\n const newTabs = setActiveTab(this.tabs, index);\n\n difference(newTabs, this.tabs)\n .sort(this.sortByInactive)\n .forEach((tab: Tab) => {\n this.changeTab.emit(tab);\n });\n\n this.tabs = newTabs;\n }\n\n private sortByInactive(a: Tab, b: Tab) {\n return Number(a.active) - Number(b.active);\n }\n\n private handleScroll() {\n const scrollLeft = this.scrollArea.scrollLeft;\n const scrollRight = Math.floor(\n this.scrollContent.getBoundingClientRect().width -\n this.scrollArea.getBoundingClientRect().width -\n scrollLeft\n );\n\n if (scrollLeft > HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX) {\n this.canScrollLeft = true;\n } else {\n this.canScrollLeft = false;\n }\n\n if (scrollRight > HIDE_SCROLL_BUTTONS_WHEN_SCROLLED_LESS_THAN_PX) {\n this.canScrollRight = true;\n } else {\n this.canScrollRight = false;\n }\n }\n\n private handleLeftScrollClick() {\n this.scrollArea.scroll({\n left: this.scrollArea.scrollLeft - SCROLL_DISTANCE_ON_CLICK_PX,\n behavior: 'smooth',\n });\n }\n\n private handleRightScrollClick() {\n this.scrollArea.scroll({\n left: this.scrollArea.scrollLeft + SCROLL_DISTANCE_ON_CLICK_PX,\n behavior: 'smooth',\n });\n }\n\n private renderIcon(tab: Tab) {\n if (!tab.icon) {\n return;\n }\n\n const name = getIconName(tab.icon);\n const color = getIconColor(tab.icon, tab.iconColor);\n const style = { color: '' };\n\n if (color) {\n style.color = color;\n }\n\n return (\n <limel-icon\n class=\"mdc-tab__icon\"\n name={name}\n style={style}\n size=\"small\"\n aria-hidden=\"true\"\n />\n );\n }\n\n private renderTab(tab: Tab) {\n return (\n <button\n class={{\n 'mdc-tab': true,\n 'mdc-tab--active': !!tab.active,\n }}\n role=\"tab\"\n aria-selected={tab.active ? 'true' : 'false'}\n tabindex={tab.active ? 0 : -1}\n >\n <span class=\"mdc-tab__content\">\n {this.renderIcon(tab)}\n <span class=\"mdc-tab__text-label\">{tab.text}</span>\n {tab.badge ? <limel-badge label={tab.badge} /> : ''}\n </span>\n <span\n class={{\n 'mdc-tab-indicator': true,\n 'mdc-tab-indicator--active': !!tab.active,\n }}\n >\n <span class=\"mdc-tab-indicator__content mdc-tab-indicator__content--underline\" />\n </span>\n <span class=\"mdc-tab__ripple\" />\n </button>\n );\n }\n\n private triggerIconColorWarning() {\n if (this.tabs.some((tab) => tab.iconColor)) {\n / eslint-disable-next-line no-console */\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\"\n );\n }\n }\n}\n"]}

package/dist/collection/components/tab-bar/tab.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab.types.js","sourceRoot":"","sources":["../../../src/components/tab-bar/tab.types.ts"],"names":[],"mappings":"","sourcesContent":["~~export~~ interface Tab {\n /*\n Id of the tab. Must be unique.\n /\n id: number \| string;\n\n /\n Text to display inside the tab.\n /\n text?: string;\n\n /\n Name of the icon to use.\n /\n icon?: string;\n\n /\n True if the tab should be selected.\n /\n active?: boolean;\n\n /\n Color of the icon.\n /\n iconColor?: string;\n\n /\n Shows a badge within the tab with a specified label\n */\n badge?: number \| string;\n}\n"]}
1	+ {"version":3,"file":"tab.types.js","sourceRoot":"","sources":["../../../src/components/tab-bar/tab.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icon } from '../../interface';\n\nexport interface Tab {\n /*\n Id of the tab. Must be unique.\n /\n id: number \| string;\n\n /\n Text to display inside the tab.\n /\n text?: string;\n\n /\n Name of the icon to use.\n /\n icon?: string \| Icon;\n\n /\n True if the tab should be selected.\n /\n active?: boolean;\n\n /\n Color of the icon.\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 iconColor?: string;\n\n /\n Shows a badge within the tab with a specified label\n */\n badge?: number \| string;\n}\n"]}

package/dist/esm/get-icon-props-02ab4784.js ADDED Viewed

@@ -0,0 +1,91 @@
+/**
+ * Get the icon name.
+ * This helps in setting the right icon, both if the consumer only types `icon: string`,
+ * and if they use the `Icon` interface for writing the icon name.
+ * @param {string | Icon | undefined} icon - The icon to retrieve the name from.
+ * @returns {string | undefined} The icon name or the provided string, or `undefined` if `icon` is falsy.
+ */
+function getIconName(icon) {
+  if (typeof icon === 'object' && 'name' in icon) {
+    return icon.name;
+  }
+  if (typeof icon === 'string') {
+    return icon;
+  }
+  return undefined;
+}
+/**
+ * Get the icon color.
+ * This is added because the old way of specifying `iconColor`
+ * deprecated in our components. So consumers should now use the new
+ * `Icon` interface instead. But our components must still support the
+ * old way of writing `iconColor: string`.
+ * @param {string | Icon | undefined} icon - The icon to retrieve the color from.
+ * @param {string | undefined} [iconColor] - The color to use when the deprecated `iconColor` is used.
+ * @returns {string | undefined} The icon color or the provided color string, or `undefined` if `iconColor` is falsy.
+ */
+function getIconColor(icon, iconColor) {
+  if (typeof icon === 'object' && 'color' in icon) {
+    return icon.color;
+  }
+  if (typeof icon === 'string') {
+    return iconColor;
+  }
+  return undefined;
+}
+/**
+ * Get the icon color.
+ * This is added because the old way of specifying `iconFillColor` is
+ * deprecated in our components. So consumers should now use the new
+ * `Icon` interface instead. But our components must still support the
+ * old way of writing `iconFillColor: string`.
+ * @param {string | Icon} icon - The icon to retrieve the color from.
+ * @param {string | undefined} [iconFillColor] - The color to use when `iconFillColor` is used.
+ * @returns {string | undefined} The icon color or the provided color string, or `undefined` if `iconColor` is falsy.
+ */
+function getIconFillColor(icon, iconFillColor) {
+  if (typeof icon === 'object' && 'color' in icon) {
+    return icon.color;
+  }
+  if (typeof icon === 'string') {
+    return iconFillColor;
+  }
+  return undefined;
+}
+/**
+ * Get the icon background color.
+ * This function is used to retrieve the background color associated with an icon,
+ * whether provided as a string or using the `Icon` interface.
+ * @param {string | Icon | undefined} icon - The icon to retrieve the background color from.
+ * @param {string | undefined} [iconBackgroundColor] - The background color to use when provided explicitly.
+ * @returns {string | undefined} The icon background color or the provided background color string, or `undefined` if `iconBackgroundColor` is falsy.
+ */
+function getIconBackgroundColor(icon, iconBackgroundColor) {
+  if (typeof icon === 'object' && 'backgroundColor' in icon) {
+    return icon.backgroundColor;
+  }
+  if (typeof icon === 'string') {
+    return iconBackgroundColor;
+  }
+  return undefined;
+}
+/**
+ * Get the icon title.
+ * This function is used to retrieve the title associated with an icon, whether provided as a string or using the `Icon` interface.
+ * @param {string | Icon | undefined} icon - The icon to retrieve the title from.
+ * @param {string | undefined} [iconTitle] - The title to use when provided explicitly.
+ * @returns {string | undefined} The icon title or the provided title string, or `undefined` if `iconTitle` is falsy.
+ */
+function getIconTitle(icon, iconTitle) {
+  if (typeof icon === 'object' && 'title' in icon) {
+    return icon.title;
+  }
+  if (typeof icon === 'string') {
+    return iconTitle;
+  }
+  return undefined;
+}
+export { getIconColor as a, getIconBackgroundColor as b, getIconFillColor as c, getIconTitle as d, getIconName as g };
+//# sourceMappingURL=get-icon-props-02ab4784.js.map

package/dist/esm/get-icon-props-02ab4784.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"get-icon-props-02ab4784.js","mappings":"AAEA;;;;;;;SAOgB,WAAW,CACvB,IAA+B;EAE/B,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,MAAM,IAAI,IAAI,EAAE;IAC5C,OAAO,IAAI,CAAC,IAAI,CAAC;GACpB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,IAAI,CAAC;GACf;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;;;SAUgB,YAAY,CACxB,IAA+B,EAC/B,SAA8B;EAE9B,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,IAAI,EAAE;IAC7C,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,SAAS,CAAC;GACpB;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;;;SAUgB,gBAAgB,CAC5B,IAA+B,EAC/B,aAAkC;EAElC,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,IAAI,EAAE;IAC7C,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,aAAa,CAAC;GACxB;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;;SAQgB,sBAAsB,CAClC,IAA+B,EAC/B,mBAAwC;EAExC,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,iBAAiB,IAAI,IAAI,EAAE;IACvD,OAAO,IAAI,CAAC,eAAe,CAAC;GAC/B;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,mBAAmB,CAAC;GAC9B;EAED,OAAO,SAAS,CAAC;AACrB,CAAC;AAED;;;;;;;SAOgB,YAAY,CACxB,IAA+B,EAC/B,SAA8B;EAE9B,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,IAAI,EAAE;IAC7C,OAAO,IAAI,CAAC,KAAK,CAAC;GACrB;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,SAAS,CAAC;GACpB;EAED,OAAO,SAAS,CAAC;AACrB;;;;","names":[],"sources":["./src/components/icon/get-icon-props.ts"],"sourcesContent":["import { Icon } from '../../interface';\n\n/**\n * Get the icon name.\n * This helps in setting the right icon, both if the consumer only types `icon: string`,\n * and if they use the `Icon` interface for writing the icon name.\n * @param {string | Icon | undefined} icon - The icon to retrieve the name from.\n * @returns {string | undefined} The icon name or the provided string, or `undefined` if `icon` is falsy.\n */\nexport function getIconName(\n icon: string | Icon | undefined\n): string | undefined {\n if (typeof icon === 'object' && 'name' in icon) {\n return icon.name;\n }\n\n if (typeof icon === 'string') {\n return icon;\n }\n\n return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconColor`\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconColor: string`.\n * @param {string | Icon | undefined} icon - The icon to retrieve the color from.\n * @param {string | undefined} [iconColor] - The color to use when the deprecated `iconColor` is used.\n * @returns {string | undefined} The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconColor(\n icon: string | Icon | undefined,\n iconColor?: string | undefined\n): string | undefined {\n if (typeof icon === 'object' && 'color' in icon) {\n return icon.color;\n }\n\n if (typeof icon === 'string') {\n return iconColor;\n }\n\n return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconFillColor` is\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconFillColor: string`.\n * @param {string | Icon} icon - The icon to retrieve the color from.\n * @param {string | undefined} [iconFillColor] - The color to use when `iconFillColor` is used.\n * @returns {string | undefined} The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconFillColor(\n icon: string | Icon | undefined,\n iconFillColor?: string | undefined\n): string {\n if (typeof icon === 'object' && 'color' in icon) {\n return icon.color;\n }\n\n if (typeof icon === 'string') {\n return iconFillColor;\n }\n\n return undefined;\n}\n\n/**\n * Get the icon background color.\n * This function is used to retrieve the background color associated with an icon,\n * whether provided as a string or using the `Icon` interface.\n * @param {string | Icon | undefined} icon - The icon to retrieve the background color from.\n * @param {string | undefined} [iconBackgroundColor] - The background color to use when provided explicitly.\n * @returns {string | undefined} The icon background color or the provided background color string, or `undefined` if `iconBackgroundColor` is falsy.\n */\nexport function getIconBackgroundColor(\n icon: string | Icon | undefined,\n iconBackgroundColor?: string | undefined\n): string | undefined {\n if (typeof icon === 'object' && 'backgroundColor' in icon) {\n return icon.backgroundColor;\n }\n\n if (typeof icon === 'string') {\n return iconBackgroundColor;\n }\n\n return undefined;\n}\n\n/**\n * Get the icon title.\n * This function is used to retrieve the title associated with an icon, whether provided as a string or using the `Icon` interface.\n * @param {string | Icon | undefined} icon - The icon to retrieve the title from.\n * @param {string | undefined} [iconTitle] - The title to use when provided explicitly.\n * @returns {string | undefined} The icon title or the provided title string, or `undefined` if `iconTitle` is falsy.\n */\nexport function getIconTitle(\n icon: string | Icon | undefined,\n iconTitle?: string | undefined\n): string | undefined {\n if (typeof icon === 'object' && 'title' in icon) {\n return icon.title;\n }\n\n if (typeof icon === 'string') {\n return iconTitle;\n }\n\n return undefined;\n}\n"],"version":3}

package/dist/esm/limel-action-bar-item_2.entry.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-232e9616.js';
 import { c as createRandomString } from './random-string-812b1c35.js';
 import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-0473e94a.js';
+import { g as getIconName, a as getIconColor } from './get-icon-props-02ab4784.js';
 const actionBarItemCss = "limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button: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(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";
@@ -19,6 +20,9 @@ const ActionBarButton = class {
   componentWillLoad() {
     makeEnterClickable(this.host);
   }
+  componentDidLoad() {
+    this.triggerIconColorWarning();
+  }
   disconnectedCallback() {
     removeEnterClickable(this.host);
   }
@@ -44,8 +48,10 @@ const ActionBarButton = class {
       return;
     }
     if ('icon' in this.item) {
-      return (h("limel-icon", { name: this.item.icon, style: {
-          '--action-bar-item-icon-color': `${this.item.iconColor}`,
+      const name = getIconName(this.item.icon);
+      const color = getIconColor(this.item.icon, this.item.iconColor);
+      return (h("limel-icon", { name: name, style: {
+          '--action-bar-item-icon-color': `${color}`,
         } }));
     }
   }
@@ -66,6 +72,12 @@ const ActionBarButton = class {
       return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.commandText }));
     }
   }
+  triggerIconColorWarning() {
+    if (this.isItem(this.item) && this.item.iconColor) {
+      /* eslint-disable-next-line no-console */
+      console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.");
+    }
+  }
   get host() { return getElement(this); }
 };
 ActionBarButton.style = actionBarItemCss;

package/dist/esm/limel-action-bar-item_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-action-bar-item.limel-action-bar-overflow-menu.entry.js","mappings":"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","names":[],"sources":["./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n transition: opacity 0.2s ease-in-out;\n position: relative;\n display: flex;\n align-items: center;\n\n &:not([is-visible]) {\n opacity: 0;\n pointer-events: none;\n }\n}\n\nbutton {\n all: unset;\n\n &:not([disabled]) {\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-action-bar-item-text-color),\n $color--hovered: var(--limel-action-bar-item-text-color),\n $background-color: var(--action-bar-background-color),\n $background-color--hovered: var(--action-bar-background-color),\n $background-color--inset: var(--action-bar-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n width: 100%;\n min-width: var(--action-bar-item-height);\n max-width: var(--action-bar-item-max-width, 10rem);\n height: var(--action-bar-item-height);\n color: var(--limel-action-bar-item-text-color);\n\n border-radius: var(--action-bar-item-height);\n font-size: functions.pxToRem(14);\n padding: 0 0.25rem;\n\n &:has(.text) {\n padding: 0 0.5rem;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding: 0 0.25rem;\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--action-bar-item-height) - 0.75rem);\n height: calc(var(--action-bar-item-height) - 0.75rem);\n color: var(\n --action-bar-item-icon-color,\n var(--limel-action-bar-item-text-color)\n );\n}\n\ndiv[role='separator'] {\n width: 1px;\n height: 1.5rem;\n border-radius: var(--action-bar-item-height);\n background-color: var(--limel-action-bar-item-text-color);\n opacity: 0.2;\n\n @media (pointer: fine) {\n margin-right: 0.5rem;\n margin-left: 0.5rem;\n }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n --notification-badge-background-color: rgb(var(--contrast-600));\n --notification-badge-text-color: rgb(var(--contrast-1200));\n\n &[open] {\n button {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\nbutton[slot='trigger'] {\n animation: fade-in ease-out 0.25s;\n font-size: 0.75rem;\n font-weight: bold;\n transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n 0% {\n scale: 0.8;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem, ListSeparator } from '../../../interface';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /\n Item that is placed in the action bar.\n /\n @Prop()\n public item!: ActionBarItem \| ListSeparator;\n\n /\n Fired when a action bar item has been clicked.\n /\n @Event()\n public select: EventEmitter<ActionBarItem \| ListSeparator>;\n\n /\n When the item is displayed in the available width,\n * this will be `false`.\n /\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /\n Used to attach the right tooltip to the right button\n /\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem \| ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n return (\n <limel-icon\n name={this.item.icon}\n style={{\n '--action-bar-item-icon-color': `${this.item.iconColor}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) \|\| this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport {\n ActionBarItem,\n ListSeparator,\n MenuItem,\n OpenDirection,\n} from '../../../interface';\nimport { LimelMenuCustomEvent } from 'src/components';\n\n/\n @private\n /\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /\n List of the items that should be rendered in the overflow menu.\n /\n @Prop()\n public items: Array<MenuItem \| ListSeparator>;\n\n /\n Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n </limel-menu>,\n ];\n }\n\n private countOverflowedItems = () => {\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem \| ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n"],"version":3}
1	+ {"file":"limel-action-bar-item.limel-action-bar-overflow-menu.entry.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,urEAAurE;;MCwBnsE,eAAe;EA4BxB;;;IAmCQ,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC/B,CAAC;;qBAhD0B,IAAI;IAW5B,IAAI,CAAC,SAAS,GAAG,kBAAkB,EAAE,CAAC;GACzC;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;EAEM,gBAAgB;IACnB,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAClC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACnC;EAEM,MAAM;IACT,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MAChD,OAAO,WAAK,IAAI,EAAC,WAAW,GAAG,CAAC;KACnC;IAED,QACI,cACI,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,IAE1B,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,aAAa,EAAE,CAChB,EACX;GACL;EAOO,MAAM,CAAC,IAAmC;IAC9C,OAAO,EAAE,WAAW,IAAI,IAAI,CAAC,CAAC;GACjC;EAEO,UAAU;IACd,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAC9C,OAAO,IAAI,CAAC;KACf;IAED,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO,IAAI,CAAC;KACf;GACJ;EAEO,UAAU;IACd,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MAC3C,OAAO;KACV;IAED,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE;MACrB,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MACzC,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;MAEhE,QACI,kBACI,IAAI,EAAE,IAAI,EACV,KAAK,EAAE;UACH,8BAA8B,EAAE,GAAG,KAAK,EAAE;SAC7C,GACH,EACJ;KACL;GACJ;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAC/C,OAAO;KACV;IAED,OAAO,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAQ,CAAC;GACrD;EAEO,aAAa;IACjB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;MACzB,OAAO;KACV;IAED,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MAChB,QACI,qBACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EACrB,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,GACpC,EACJ;KACL;IAED,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACvB,QACI,qBACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,GAC9B,EACJ;KACL;GACJ;EAEO,uBAAuB;IAC3B,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;;MAE/C,OAAO,CAAC,IAAI,CACR,sKAAsK,CACzK,CAAC;KACL;GACJ;;;;;MCtJQ,qBAAqB;;;;IAgCtB,yBAAoB,GAAG;MAC3B,OAAO,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACvC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAqC;MACzD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;;yBAxBoC,YAAY;;EAK3C,MAAM;IACT,OAAO;MACH,kBACI,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,IAE3B,cAAQ,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,oBAAoB,EAAE,CAAU,CACpD;KAChB,CAAC;GACL;EAWD,IAAY,iBAAiB;IACzB,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;GACpE;EAEO,UAAU,CAAC,IAA8B;IAC7C,OAAO,EAAE,WAAW,IAAI,IAAI,CAAC,CAAC;GACjC;;;;;","names":[],"sources":["./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n transition: opacity 0.2s ease-in-out;\n position: relative;\n display: flex;\n align-items: center;\n\n &:not([is-visible]) {\n opacity: 0;\n pointer-events: none;\n }\n}\n\nbutton {\n all: unset;\n\n &:not([disabled]) {\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-action-bar-item-text-color),\n $color--hovered: var(--limel-action-bar-item-text-color),\n $background-color: var(--action-bar-background-color),\n $background-color--hovered: var(--action-bar-background-color),\n $background-color--inset: var(--action-bar-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n width: 100%;\n min-width: var(--action-bar-item-height);\n max-width: var(--action-bar-item-max-width, 10rem);\n height: var(--action-bar-item-height);\n color: var(--limel-action-bar-item-text-color);\n\n border-radius: var(--action-bar-item-height);\n font-size: functions.pxToRem(14);\n padding: 0 0.25rem;\n\n &:has(.text) {\n padding: 0 0.5rem;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding: 0 0.25rem;\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--action-bar-item-height) - 0.75rem);\n height: calc(var(--action-bar-item-height) - 0.75rem);\n color: var(\n --action-bar-item-icon-color,\n var(--limel-action-bar-item-text-color)\n );\n}\n\ndiv[role='separator'] {\n width: 1px;\n height: 1.5rem;\n border-radius: var(--action-bar-item-height);\n background-color: var(--limel-action-bar-item-text-color);\n opacity: 0.2;\n\n @media (pointer: fine) {\n margin-right: 0.5rem;\n margin-left: 0.5rem;\n }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n --notification-badge-background-color: rgb(var(--contrast-600));\n --notification-badge-text-color: rgb(var(--contrast-1200));\n\n &[open] {\n button {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\nbutton[slot='trigger'] {\n animation: fade-in ease-out 0.25s;\n font-size: 0.75rem;\n font-weight: bold;\n transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n 0% {\n scale: 0.8;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem, ListSeparator } from '../../../interface';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from 'src/util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /\n Item that is placed in the action bar.\n /\n @Prop()\n public item!: ActionBarItem \| ListSeparator;\n\n /\n Fired when a action bar item has been clicked.\n /\n @Event()\n public select: EventEmitter<ActionBarItem \| ListSeparator>;\n\n /\n When the item is displayed in the available width,\n * this will be `false`.\n /\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /\n Used to attach the right tooltip to the right button\n /\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning();\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem \| ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n const name = getIconName(this.item.icon);\n const color = getIconColor(this.item.icon, this.item.iconColor);\n\n return (\n <limel-icon\n name={name}\n style={{\n '--action-bar-item-icon-color': `${color}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) \|\| this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n\n private triggerIconColorWarning() {\n if (this.isItem(this.item) && this.item.iconColor) {\n / eslint-disable-next-line no-console /\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\"\n );\n }\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport {\n ActionBarItem,\n ListSeparator,\n MenuItem,\n OpenDirection,\n} from '../../../interface';\nimport { LimelMenuCustomEvent } from 'src/components';\n\n/\n @private\n /\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /\n List of the items that should be rendered in the overflow menu.\n /\n @Prop()\n public items: Array<MenuItem \| ListSeparator>;\n\n /\n Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n </limel-menu>,\n ];\n }\n\n private countOverflowedItems = () => {\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem \| ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n"],"version":3}

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

@@ -1,6 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-232e9616.js';
 import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-0473e94a.js';
 import { c as createRandomString } from './random-string-812b1c35.js';
+import { g as getIconName, a as getIconColor } from './get-icon-props-02ab4784.js';
 const breadcrumbsCss = ":host(limel-breadcrumbs){--limel-breadcrumbs-item-height:1.5rem;--limel-breadcrumbs-gap:0.75rem;--limel-breadcrumbs-gap:0.75rem;--limel-breadcrumbs-item-text-color:var(\n      --breadcrumbs-item-text-color,\n      rgb(var(--contrast-1500))\n  );--limel-overflow-mask-horizontal:linear-gradient(\n      to right,\n      transparent 0%,\n      black calc(0% + var(--limel-left-edge-fade-width, 1rem)),\n      black calc(100% - var(--limel-right-edge-fade-width, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-horizontal);mask-image:var(--limel-overflow-mask-horizontal);padding-left:var(--limel-left-edge-fade-width, 1rem);padding-right:var(--limel-right-edge-fade-width, 1rem);--limel-left-edge-fade-width:0.5rem;--limel-right-edge-fade-width:0.5rem}ol,li,.step{all:unset}*{box-sizing:border-box}ol{padding:0.5rem;gap:var(--limel-breadcrumbs-gap)}.step{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:var(--breadcrumbs-item-max-width, 10rem);height:var(--limel-breadcrumbs-item-height);color:var(--limel-breadcrumbs-item-text-color);border-radius:100vw;font-size:0.875rem;padding:0 0.25rem}.step:not(:has(.text)){padding:0 0.125rem}.step:not(.last):focus{outline:none}.step:not(.last):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.step:not(.last):after{content:var(--limel-breadcrumbs-divider);width:var(--limel-breadcrumbs-gap);position:absolute;top:0;right:calc(var(--limel-breadcrumbs-gap) * -1);bottom:0;left:auto;text-align:center}a.step{cursor:pointer;transition:color 0.2s ease}a.step:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.step:hover{--limel-breadcrumbs-item-text-color:rgb(var(--color-blue-default))}a.step:hover:before{opacity:0.3;transform:scale(1)}button.step:not(.last){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-breadcrumbs-item-text-color);background-color:transparent}button.step:not(.last):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button.step:not(.last):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}limel-icon{flex-shrink:0;width:calc(var(--limel-breadcrumbs-item-height) - 0.25rem);height:calc(var(--limel-breadcrumbs-item-height) - 0.25rem)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}.last{opacity:0.7}:host(limel-breadcrumbs){box-sizing:border-box;display:flex;width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;direction:rtl}:host(limel-breadcrumbs)::-webkit-scrollbar{display:none}ol{display:flex;flex-direction:row-reverse;justify-content:flex-end;margin-right:auto}.step{direction:ltr}";
@@ -34,13 +35,14 @@ const Breadcrumbs = class {
       return (h("li", { class: "last step", tabindex: "-1", "aria-current": this.areItemsLinks(this.items) ? 'page' : 'step' }, this.renderIcon(lastItem[0]), h("span", { class: "text" }, lastItem[0].text)));
     };
     this.renderIcon = (item) => {
-      var _a;
-      if (!((_a = item.icon) === null || _a === void 0 ? void 0 : _a.name)) {
+      const name = getIconName(item.icon);
+      const color = getIconColor(item.icon);
+      if (!name) {
         return;
       }
       return (h("limel-icon", { style: {
-          color: `${item.icon.color}`,
-        }, name: item.icon.name }));
+          color: `${color}`,
+        }, name: name }));
     };
     this.renderLabel = (item) => {
       if (item.type === 'icon-only') {

package/dist/esm/limel-breadcrumbs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-breadcrumbs.entry.js","mappings":"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","names":[],"sources":["./src/components/breadcrumbs/breadcrumbs.scss?tag=limel-breadcrumbs&encapsulation=shadow","./src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/*\n @prop --breadcrumbs-item-text-color: Text color of breadcrumbs items, defaults to `--contrast-1100`.\n* @prop --breadcrumbs-item-max-width: Maximum width of a button in the breadcrumbs. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n/\n\n$padding: 0.5rem;\n\n:host(limel-breadcrumbs) {\n --limel-breadcrumbs-item-height: 1.5rem;\n --limel-breadcrumbs-gap: 0.75rem;\n --limel-breadcrumbs-gap: 0.75rem;\n --limel-breadcrumbs-item-text-color: var(\n --breadcrumbs-item-text-color,\n rgb(var(--contrast-1500))\n );\n @include mixins.fade-out-overflowed-content-on-edges(horizontally);\n --limel-left-edge-fade-width: #{$padding};\n --limel-right-edge-fade-width: #{$padding};\n}\n\nol,\nli,\n.step {\n all: unset;\n}\n\n {\n box-sizing: border-box;\n}\n\nol {\n padding: $padding; // needed for the focus and hover effects, since we are using overflow\n gap: var(--limel-breadcrumbs-gap);\n}\n\n.step {\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(--breadcrumbs-item-max-width, 10rem);\n height: var(--limel-breadcrumbs-item-height);\n\n color: var(--limel-breadcrumbs-item-text-color);\n border-radius: 100vw;\n font-size: 0.875rem;\n padding: 0 0.25rem;\n\n &:not(:has(.text)) {\n padding: 0 0.125rem;\n }\n\n &:not(.last) {\n @include mixins.visualize-keyboard-focus;\n\n &:after {\n content: var(--limel-breadcrumbs-divider);\n width: var(--limel-breadcrumbs-gap);\n\n position: absolute;\n top: 0;\n right: calc(var(--limel-breadcrumbs-gap) * -1);\n bottom: 0;\n left: auto;\n\n text-align: center;\n }\n }\n}\n\na.step {\n cursor: pointer;\n transition: color 0.2s ease;\n &:before {\n transition: opacity 0.2s ease, transform 0.3s ease-out;\n content: '';\n position: absolute;\n inset: auto 0 0 0;\n width: calc(100% - 0.5rem);\n margin: auto;\n height: 0.125rem;\n border-radius: 1rem;\n\n background-color: currentColor;\n opacity: 0;\n transform: scale(0.6);\n }\n\n &:hover {\n --limel-breadcrumbs-item-text-color: rgb(var(--color-blue-default));\n &:before {\n opacity: 0.3;\n transform: scale(1);\n }\n }\n}\n\nbutton.step {\n &:not(.last) {\n @include mixins.is-flat-clickable(\n $color: var(--limel-breadcrumbs-item-text-color)\n );\n }\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--limel-breadcrumbs-item-height) - 0.25rem);\n height: calc(var(--limel-breadcrumbs-item-height) - 0.25rem);\n}\n\n.text {\n @include mixins.truncate-text;\n padding: 0 0.25rem;\n}\n\n.last {\n opacity: 0.7;\n}\n\n// LAYOUT:\n// The code below makes sure that the last item is always visible,\n// and previous items overflow out of the container\n// while keeping the container scrollable.\n// All without any additional scripts in the component code.\n\n:host(limel-breadcrumbs) {\n box-sizing: border-box;\n\n display: flex;\n width: 100%;\n overflow-x: auto;\n scrollbar-width: none; // This hides the scrollbars appearing under in Firefox\n -ms-overflow-style: none; // Same as above for IE 11\n &::-webkit-scrollbar {\n display: none; // This hides the scrollbars appearing under in Chrome\n }\n\n direction: rtl;\n}\n\nol {\n display: flex;\n flex-direction: row-reverse;\n justify-content: flex-end;\n margin-right: auto;\n}\n\n.step {\n direction: ltr;\n}\n","import {\n Component,\n Element,\n h,\n Event,\n EventEmitter,\n Prop,\n} from '@stencil/core';\nimport { BreadcrumbsItem } from '../../interface';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/*\n A Breadcrumb consists of a list of distinct \"places\" that a user has gone through,\n * before ending up where they are right now, in a website or an application.\n \n These \"places\" can be for example _pages_ of a website, which are hierarchically\n * laid out before the current page that the user is looking at.\n * They could also be _steps_ which the user has gone through, which perhaps have no\n * hierarchical relation with each other, but has eventually led the user \"here\".\n \n :::note\n * - Where the user currently is, is always the last step of the breadcrumb.\n * - A breadcrumbs never shows where users can go after this place.\n * It only illustrates where user has been before ending up here.\n * If the path that a user can take is not changing and if next steps are clear,\n * you can use the [Progress flow component](#/component/limel-progress-flow) instead.\n * :::\n \n Breadcrumbs are often placed horizontally before the main content of the current screen.\n * @exampleComponent limel-example-breadcrumbs-links\n * @exampleComponent limel-example-breadcrumbs-buttons\n * @exampleComponent limel-example-breadcrumbs-icons\n * @exampleComponent limel-example-breadcrumbs-divider\n * @exampleComponent limel-example-breadcrumbs-icon-color\n * @exampleComponent limel-example-breadcrumbs-styling\n /\n\n@Component({\n tag: 'limel-breadcrumbs',\n shadow: true,\n styleUrl: 'breadcrumbs.scss',\n})\nexport class Breadcrumbs {\n /\n List of items in the breadcrumbs,\n * each representing a step or a page.\n /\n @Prop()\n public items: BreadcrumbsItem[];\n\n /\n The visual divider that separates items.\n * It must be a single character such as `-` or `,`.\n /\n @Prop()\n public divider: string = '›';\n\n /\n Fired when clicking on buttons (not links!)\n * inside the breadcrumbs.\n */\n @Event()\n public select: EventEmitter<BreadcrumbsItem>;\n\n @Element()\n private host: HTMLLimelBreadcrumbsElement;\n\n private button: HTMLButtonElement;\n private anchor: HTMLAnchorElement;\n\n public render() {\n return (\n <ol\n role=\"navigation\"\n aria-label=\"Breadcrumb\"\n style={{ '--limel-breadcrumbs-divider': `'${this.divider}'` }}\n >\n {this.renderSteps()}\n {this.renderLastStep()}\n </ol>\n );\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n this.removeEnterClickable();\n }\n\n private renderSteps = () => {\n const allStepsWithoutLast = this.items.slice(0, -1);\n\n if (this.areItemsLinks(this.items)) {\n return allStepsWithoutLast.map(this.renderAsLink);\n }\n\n return allStepsWithoutLast.map(this.renderAsButton);\n };\n\n private renderAsButton = (item: BreadcrumbsItem) => {\n const tooltipId = createRandomString();\n\n return [\n <button\n role=\"listitem\"\n id={tooltipId}\n class=\"step\"\n onClick={this.handleClick(item)}\n >\n {this.renderIcon(item)}\n {this.renderLabel(item)}\n </button>,\n this.renderTooltip(item, tooltipId),\n ];\n };\n\n private renderAsLink = (item: BreadcrumbsItem) => {\n const tooltipId = createRandomString();\n\n return [\n <a\n role=\"listitem\"\n id={createRandomString()}\n class=\"step\"\n href={item.link.href}\n title={item.link.title}\n >\n {this.renderIcon(item)}\n {this.renderLabel(item)}\n </a>,\n this.renderTooltip(item, tooltipId),\n ];\n };\n\n private renderLastStep = () => {\n const lastItem = this.items.slice(-1);\n\n return (\n <li\n class=\"last step\"\n tabindex=\"-1\"\n aria-current={this.areItemsLinks(this.items) ? 'page' : 'step'}\n >\n {this.renderIcon(lastItem[0])}\n <span class=\"text\">{lastItem[0].text}</span>\n </li>\n );\n };\n\n private renderIcon = (item: BreadcrumbsItem) => {\n if (!item.icon?.name) {\n return;\n }\n\n return (\n <limel-icon\n style={{\n color: `${item.icon.color}`,\n }}\n name={item.icon.name}\n />\n );\n };\n\n private renderLabel = (item: BreadcrumbsItem) => {\n if (item.type === 'icon-only') {\n return;\n }\n\n return <span class=\"text\">{item.text}</span>;\n };\n\n private renderTooltip = (item: BreadcrumbsItem, tooltipId: string) => {\n if (item.type === 'icon-only') {\n return <limel-tooltip elementId={tooltipId} label={item.text} />;\n }\n };\n\n private areItemsLinks = (items: BreadcrumbsItem[]) => {\n return items.some((item) => 'link' in item);\n };\n\n private handleClick = (item: BreadcrumbsItem) => (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(item);\n };\n\n private removeEnterClickable() {\n const element = this.button ?? this.anchor;\n removeEnterClickable(element);\n }\n}\n"],"version":3}
1	+ {"file":"limel-breadcrumbs.entry.js","mappings":"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","names":[],"sources":["./src/components/breadcrumbs/breadcrumbs.scss?tag=limel-breadcrumbs&encapsulation=shadow","./src/components/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/*\n @prop --breadcrumbs-item-text-color: Text color of breadcrumbs items, defaults to `--contrast-1100`.\n* @prop --breadcrumbs-item-max-width: Maximum width of a button in the breadcrumbs. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n/\n\n$padding: 0.5rem;\n\n:host(limel-breadcrumbs) {\n --limel-breadcrumbs-item-height: 1.5rem;\n --limel-breadcrumbs-gap: 0.75rem;\n --limel-breadcrumbs-gap: 0.75rem;\n --limel-breadcrumbs-item-text-color: var(\n --breadcrumbs-item-text-color,\n rgb(var(--contrast-1500))\n );\n @include mixins.fade-out-overflowed-content-on-edges(horizontally);\n --limel-left-edge-fade-width: #{$padding};\n --limel-right-edge-fade-width: #{$padding};\n}\n\nol,\nli,\n.step {\n all: unset;\n}\n\n {\n box-sizing: border-box;\n}\n\nol {\n padding: $padding; // needed for the focus and hover effects, since we are using overflow\n gap: var(--limel-breadcrumbs-gap);\n}\n\n.step {\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(--breadcrumbs-item-max-width, 10rem);\n height: var(--limel-breadcrumbs-item-height);\n\n color: var(--limel-breadcrumbs-item-text-color);\n border-radius: 100vw;\n font-size: 0.875rem;\n padding: 0 0.25rem;\n\n &:not(:has(.text)) {\n padding: 0 0.125rem;\n }\n\n &:not(.last) {\n @include mixins.visualize-keyboard-focus;\n\n &:after {\n content: var(--limel-breadcrumbs-divider);\n width: var(--limel-breadcrumbs-gap);\n\n position: absolute;\n top: 0;\n right: calc(var(--limel-breadcrumbs-gap) * -1);\n bottom: 0;\n left: auto;\n\n text-align: center;\n }\n }\n}\n\na.step {\n cursor: pointer;\n transition: color 0.2s ease;\n &:before {\n transition: opacity 0.2s ease, transform 0.3s ease-out;\n content: '';\n position: absolute;\n inset: auto 0 0 0;\n width: calc(100% - 0.5rem);\n margin: auto;\n height: 0.125rem;\n border-radius: 1rem;\n\n background-color: currentColor;\n opacity: 0;\n transform: scale(0.6);\n }\n\n &:hover {\n --limel-breadcrumbs-item-text-color: rgb(var(--color-blue-default));\n &:before {\n opacity: 0.3;\n transform: scale(1);\n }\n }\n}\n\nbutton.step {\n &:not(.last) {\n @include mixins.is-flat-clickable(\n $color: var(--limel-breadcrumbs-item-text-color)\n );\n }\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--limel-breadcrumbs-item-height) - 0.25rem);\n height: calc(var(--limel-breadcrumbs-item-height) - 0.25rem);\n}\n\n.text {\n @include mixins.truncate-text;\n padding: 0 0.25rem;\n}\n\n.last {\n opacity: 0.7;\n}\n\n// LAYOUT:\n// The code below makes sure that the last item is always visible,\n// and previous items overflow out of the container\n// while keeping the container scrollable.\n// All without any additional scripts in the component code.\n\n:host(limel-breadcrumbs) {\n box-sizing: border-box;\n\n display: flex;\n width: 100%;\n overflow-x: auto;\n scrollbar-width: none; // This hides the scrollbars appearing under in Firefox\n -ms-overflow-style: none; // Same as above for IE 11\n &::-webkit-scrollbar {\n display: none; // This hides the scrollbars appearing under in Chrome\n }\n\n direction: rtl;\n}\n\nol {\n display: flex;\n flex-direction: row-reverse;\n justify-content: flex-end;\n margin-right: auto;\n}\n\n.step {\n direction: ltr;\n}\n","import {\n Component,\n Element,\n h,\n Event,\n EventEmitter,\n Prop,\n} from '@stencil/core';\nimport { BreadcrumbsItem } from '../../interface';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\n\n/*\n A Breadcrumb consists of a list of distinct \"places\" that a user has gone through,\n * before ending up where they are right now, in a website or an application.\n \n These \"places\" can be for example _pages_ of a website, which are hierarchically\n * laid out before the current page that the user is looking at.\n * They could also be _steps_ which the user has gone through, which perhaps have no\n * hierarchical relation with each other, but has eventually led the user \"here\".\n \n :::note\n * - Where the user currently is, is always the last step of the breadcrumb.\n * - A breadcrumbs never shows where users can go after this place.\n * It only illustrates where user has been before ending up here.\n * If the path that a user can take is not changing and if next steps are clear,\n * you can use the [Progress flow component](#/component/limel-progress-flow) instead.\n * :::\n \n Breadcrumbs are often placed horizontally before the main content of the current screen.\n * @exampleComponent limel-example-breadcrumbs-links\n * @exampleComponent limel-example-breadcrumbs-buttons\n * @exampleComponent limel-example-breadcrumbs-icons\n * @exampleComponent limel-example-breadcrumbs-divider\n * @exampleComponent limel-example-breadcrumbs-icon-color\n * @exampleComponent limel-example-breadcrumbs-styling\n /\n\n@Component({\n tag: 'limel-breadcrumbs',\n shadow: true,\n styleUrl: 'breadcrumbs.scss',\n})\nexport class Breadcrumbs {\n /\n List of items in the breadcrumbs,\n * each representing a step or a page.\n /\n @Prop()\n public items: BreadcrumbsItem[];\n\n /\n The visual divider that separates items.\n * It must be a single character such as `-` or `,`.\n /\n @Prop()\n public divider: string = '›';\n\n /\n Fired when clicking on buttons (not links!)\n * inside the breadcrumbs.\n */\n @Event()\n public select: EventEmitter<BreadcrumbsItem>;\n\n @Element()\n private host: HTMLLimelBreadcrumbsElement;\n\n private button: HTMLButtonElement;\n private anchor: HTMLAnchorElement;\n\n public render() {\n return (\n <ol\n role=\"navigation\"\n aria-label=\"Breadcrumb\"\n style={{ '--limel-breadcrumbs-divider': `'${this.divider}'` }}\n >\n {this.renderSteps()}\n {this.renderLastStep()}\n </ol>\n );\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n this.removeEnterClickable();\n }\n\n private renderSteps = () => {\n const allStepsWithoutLast = this.items.slice(0, -1);\n\n if (this.areItemsLinks(this.items)) {\n return allStepsWithoutLast.map(this.renderAsLink);\n }\n\n return allStepsWithoutLast.map(this.renderAsButton);\n };\n\n private renderAsButton = (item: BreadcrumbsItem) => {\n const tooltipId = createRandomString();\n\n return [\n <button\n role=\"listitem\"\n id={tooltipId}\n class=\"step\"\n onClick={this.handleClick(item)}\n >\n {this.renderIcon(item)}\n {this.renderLabel(item)}\n </button>,\n this.renderTooltip(item, tooltipId),\n ];\n };\n\n private renderAsLink = (item: BreadcrumbsItem) => {\n const tooltipId = createRandomString();\n\n return [\n <a\n role=\"listitem\"\n id={createRandomString()}\n class=\"step\"\n href={item.link.href}\n title={item.link.title}\n >\n {this.renderIcon(item)}\n {this.renderLabel(item)}\n </a>,\n this.renderTooltip(item, tooltipId),\n ];\n };\n\n private renderLastStep = () => {\n const lastItem = this.items.slice(-1);\n\n return (\n <li\n class=\"last step\"\n tabindex=\"-1\"\n aria-current={this.areItemsLinks(this.items) ? 'page' : 'step'}\n >\n {this.renderIcon(lastItem[0])}\n <span class=\"text\">{lastItem[0].text}</span>\n </li>\n );\n };\n\n private renderIcon = (item: BreadcrumbsItem) => {\n const name = getIconName(item.icon);\n const color = getIconColor(item.icon);\n\n if (!name) {\n return;\n }\n\n return (\n <limel-icon\n style={{\n color: `${color}`,\n }}\n name={name}\n />\n );\n };\n\n private renderLabel = (item: BreadcrumbsItem) => {\n if (item.type === 'icon-only') {\n return;\n }\n\n return <span class=\"text\">{item.text}</span>;\n };\n\n private renderTooltip = (item: BreadcrumbsItem, tooltipId: string) => {\n if (item.type === 'icon-only') {\n return <limel-tooltip elementId={tooltipId} label={item.text} />;\n }\n };\n\n private areItemsLinks = (items: BreadcrumbsItem[]) => {\n return items.some((item) => 'link' in item);\n };\n\n private handleClick = (item: BreadcrumbsItem) => (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(item);\n };\n\n private removeEnterClickable() {\n const element = this.button ?? this.anchor;\n removeEnterClickable(element);\n }\n}\n"],"version":3}

package/dist/esm/limel-chip-set.entry.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './i
 import { i as ARROW_LEFT, j as ARROW_LEFT_KEY_CODE, k as ARROW_RIGHT, l as ARROW_RIGHT_KEY_CODE, a as ENTER, d as ENTER_KEY_CODE, D as DELETE, m as DELETE_KEY_CODE, B as BACKSPACE, n as BACKSPACE_KEY_CODE, E as ESCAPE, c as ESCAPE_KEY_CODE } from './keycodes-44c01beb.js';
 import { t as translate } from './translations-dea847ae.js';
 import { g as getHref, a as getTarget } from './link-helper-b08fe56c.js';
+import { g as getIconName, d as getIconTitle, a as getIconColor, b as getIconBackgroundColor } from './get-icon-props-02ab4784.js';
 import { M as MDCTextField } from './component-288691f3.js';
 import { i as isEqual } from './isEqual-c5a636a4.js';
 import { M as MDCFoundation, a as MDCComponent } from './component-410aad5a.js';
@@ -1831,6 +1832,7 @@ const ChipSet = class {
     this.syncEmptyInput();
   }
   componentDidLoad() {
+    this.triggerIconColorWarning(this.value);
     if (this.type === 'input') {
       this.mdcTextField = new MDCTextField(this.host.shadowRoot.querySelector('.mdc-text-field'));
     }
@@ -2063,14 +2065,18 @@ const ChipSet = class {
     event.stopPropagation();
   }
   renderChipIcon(chip) {
+    const name = getIconName(chip.icon);
+    const color = getIconColor(chip.icon, chip.iconFillColor);
+    const backgroundColor = getIconBackgroundColor(chip.icon, chip.iconBackgroundColor);
+    const title = getIconTitle(chip.icon, chip.iconTitle);
     const style = {};
-    if (chip.iconFillColor) {
-      style['--icon-color'] = chip.iconFillColor;
+    if (color) {
+      style['--icon-color'] = color;
     }
-    if (chip.iconBackgroundColor) {
-      style['--icon-background-color'] = chip.iconBackgroundColor;
+    if (backgroundColor) {
+      style['--icon-background-color'] = backgroundColor;
     }
-    return (h("limel-icon", { class: "mdc-chip__icon mdc-chip__icon--leading", name: chip.icon, style: style, size: "small", badge: true, title: chip.iconTitle }));
+    return (h("limel-icon", { class: "mdc-chip__icon mdc-chip__icon--leading", name: name, style: style, size: "small", badge: true, title: title }));
   }
   renderLeadingIcon() {
     if (!this.leadingIcon) {
@@ -2114,6 +2120,17 @@ const ChipSet = class {
     }
     return h("limel-badge", { label: chip.badge });
   }
+  triggerIconColorWarning(value) {
+    for (const chip of value) {
+      if (chip.icon &&
+        (chip.iconFillColor ||
+          chip.iconBackgroundColor ||
+          chip.iconTitle)) {
+        /* eslint-disable-next-line no-console */
+        console.warn("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' }`.");
+      }
+    }
+  }
   get host() { return getElement(this); }
   static get watchers() { return {
     "value": ["handleChangeChips"]