@limetech/lime-elements 38.9.2 → 38.9.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/cjs/limel-breadcrumbs_8.cjs.entry.js +11 -3
- package/dist/cjs/limel-breadcrumbs_8.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-chip_2.cjs.entry.js +1 -1
- package/dist/cjs/limel-chip_2.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-select.cjs.entry.js +17 -2
- package/dist/cjs/limel-select.cjs.entry.js.map +1 -1
- package/dist/collection/components/chip-set/chip-set.css +7 -0
- package/dist/collection/components/input-field/input-field.css +7 -0
- package/dist/collection/components/list/list-renderer.js +5 -1
- package/dist/collection/components/list/list-renderer.js.map +1 -1
- package/dist/collection/components/menu-list/menu-list-renderer.js +5 -1
- package/dist/collection/components/menu-list/menu-list-renderer.js.map +1 -1
- package/dist/collection/components/select/select.css +4 -7
- package/dist/collection/components/select/select.template.js +16 -1
- package/dist/collection/components/select/select.template.js.map +1 -1
- package/dist/esm/limel-breadcrumbs_8.entry.js +11 -3
- package/dist/esm/limel-breadcrumbs_8.entry.js.map +1 -1
- package/dist/esm/limel-chip_2.entry.js +1 -1
- package/dist/esm/limel-chip_2.entry.js.map +1 -1
- package/dist/esm/limel-select.entry.js +17 -2
- package/dist/esm/limel-select.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-447e573c.entry.js → p-13680113.entry.js} +2 -2
- package/dist/lime-elements/p-13680113.entry.js.map +1 -0
- package/dist/lime-elements/p-66fafbe6.entry.js +266 -0
- package/dist/lime-elements/p-66fafbe6.entry.js.map +1 -0
- package/dist/lime-elements/p-6d55f15c.entry.js +68 -0
- package/dist/lime-elements/p-6d55f15c.entry.js.map +1 -0
- package/package.json +2 -2
- package/dist/lime-elements/p-447e573c.entry.js.map +0 -1
- package/dist/lime-elements/p-7993102f.entry.js +0 -68
- package/dist/lime-elements/p-7993102f.entry.js.map +0 -1
- package/dist/lime-elements/p-ccc8ee07.entry.js +0 -266
- package/dist/lime-elements/p-ccc8ee07.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list-renderer.js","sourceRoot":"","sources":["../../../src/components/list/list-renderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ListItem } from './list-item.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { h } from '@stencil/core';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { ListRendererConfig } from './list-renderer-config';\nimport { RadioButtonTemplate } from './radio-button/radio-button.template';\nimport {\n getIconColor,\n getIconName,\n getIconTitle,\n} from '../icon/get-icon-props';\nimport { isEmpty } from 'lodash-es';\n\nexport class ListRenderer {\n private defaultConfig: ListRendererConfig = {\n isOpen: true,\n badgeIcons: false,\n };\n\n private config: ListRendererConfig;\n\n private hasIcons: boolean;\n private twoLines: boolean;\n private avatarList: boolean;\n private commandKey: boolean;\n\n private applyTabIndexToItemAtIndex: number;\n\n public render(\n items: Array<ListItem | ListSeparator>,\n config: ListRendererConfig = {},\n ) {\n items = items || [];\n this.config = { ...this.defaultConfig, ...config };\n\n this.twoLines = items.some((item) => {\n return 'secondaryText' in item && !!item.secondaryText;\n });\n\n this.hasIcons = items.some((item) => {\n return 'icon' in item && !!item.icon;\n });\n\n this.avatarList = this.config.badgeIcons && this.hasIcons;\n const selectableListTypes = ['selectable', 'radio', 'checkbox'];\n\n let role;\n switch (this.config.type) {\n case 'checkbox':\n role = 'group';\n break;\n case 'radio':\n role = 'radiogroup';\n break;\n default:\n role = 'listbox';\n }\n\n this.applyTabIndexToItemAtIndex =\n this.getIndexForWhichToApplyTabIndex(items);\n\n const classNames = {\n 'mdc-deprecated-list': true,\n 'mdc-deprecated-list--two-line': this.twoLines,\n selectable: selectableListTypes.includes(this.config.type),\n 'mdc-deprecated-list--avatar-list': this.avatarList,\n 'list--compact':\n this.twoLines &&\n this.commandKey &&\n ['small', 'x-small'].includes(this.config.iconSize),\n };\n\n return (\n <ul class={classNames} role={role} aria-orientation=\"vertical\">\n {items.map(this.renderListItem)}\n </ul>\n );\n }\n\n /**\n * Determine which ListItem should have the `tab-index` attribute set,\n * and return the index at which that ListItem is located in `items`.\n * Returns `undefined` if no item should have the attribute set.\n * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility\n *\n * @param items - the items of the list, including any `ListSeparator`:s\n * @returns the index as per the description\n */\n private getIndexForWhichToApplyTabIndex = (\n items: Array<ListItem | ListSeparator>,\n ) => {\n let result;\n for (let i = 0, max = items.length; i < max; i += 1) {\n if ('separator' in items[i]) {\n // Ignore ListSeparator\n } else {\n const item = items[i] as ListItem<any>;\n if (item.selected) {\n result = i;\n break;\n }\n\n if (result === undefined && !item.disabled) {\n result = i;\n // Do NOT break, as any later item with\n // `selected=true` should get the tab-index instead!\n }\n }\n }\n\n return result;\n };\n\n /**\n * Render a single list item\n *\n * @param item - the item to render\n * @param index - the index the item had in the `items` array\n * @returns the list item\n */\n private renderListItem = (\n item: ListItem | ListSeparator,\n index: number,\n ) => {\n if ('separator' in item) {\n return (\n <li class=\"mdc-deprecated-list-divider\" role=\"separator\">\n {this.renderTextForSeparator(item)}\n <div class=\"limel-list-divider-line\" />\n </li>\n );\n }\n\n if (['radio', 'checkbox'].includes(this.config.type)) {\n return this.renderVariantListItem(this.config, item, index);\n }\n\n const classNames = {\n 'mdc-deprecated-list-item': true,\n 'mdc-deprecated-list-item--disabled': item.disabled,\n 'mdc-deprecated-list-item--selected': item.selected,\n 'has-primary-component': this.hasPrimaryComponent(item),\n };\n\n const attributes: { tabindex?: string } = {};\n if (index === this.applyTabIndexToItemAtIndex) {\n attributes.tabindex = '0';\n }\n\n return (\n <li\n class={classNames}\n aria-disabled={item.disabled ? 'true' : 'false'}\n aria-selected={item.selected ? 'true' : 'false'}\n data-index={index}\n {...attributes}\n >\n {this.renderIcon(this.config, item)}\n {this.renderPicture(item)}\n {this.getPrimaryComponent(item)}\n {this.renderText(item)}\n {this.twoLines && this.avatarList ? this.renderDivider() : null}\n {this.renderActionMenu(item.actions)}\n </li>\n );\n };\n\n private renderTextForSeparator = (item: ListSeparator) => {\n if ('text' in item) {\n return <h2 class=\"limel-list-divider-title\">{item.text}</h2>;\n }\n };\n\n private getPrimaryComponent(item: ListItem): Element {\n if (!this.hasPrimaryComponent(item)) {\n return;\n }\n\n const PrimaryComponent = item.primaryComponent.name;\n const props = item.primaryComponent.props;\n\n return <PrimaryComponent {...props} />;\n }\n\n private hasPrimaryComponent = (item: ListItem) => {\n return !!item?.primaryComponent?.name;\n };\n\n /**\n * Render the text of the list item\n *\n * @param item - the list item\n * @returns the text for the list item\n */\n private renderText = (item: ListItem) => {\n if (this.isSimpleItem(item)) {\n return (\n <span class=\"mdc-deprecated-list-item__text\">{item.text}</span>\n );\n }\n\n return (\n <div class=\"mdc-deprecated-list-item__text\">\n <div class=\"mdc-deprecated-list-item__primary-command-text\">\n <div class=\"mdc-deprecated-list-item__primary-text\">\n {item.text}\n </div>\n </div>\n <div class=\"mdc-deprecated-list-item__secondary-text\">\n {item.secondaryText}\n </div>\n </div>\n );\n };\n\n private isSimpleItem = (item: ListItem): boolean => {\n return !('secondaryText' in item);\n };\n\n /**\n * Render an icon for a list item\n *\n * @param config - the config object, passed on from the `renderListItem` function\n * @param item - the list item\n * @returns the icon element\n */\n private renderIcon = (config: ListRendererConfig, item: ListItem) => {\n const style: any = {};\n const name = getIconName(item.icon);\n if (!name) {\n return;\n }\n\n // eslint-disable-next-line sonarjs/deprecation\n const color = getIconColor(item.icon, item.iconColor);\n const title = getIconTitle(item.icon);\n\n if (color) {\n if (config.badgeIcons) {\n style['--icon-background-color'] = color;\n } else {\n style.color = color;\n }\n }\n\n return (\n <limel-icon\n badge={config.badgeIcons}\n class=\"mdc-deprecated-list-item__graphic\"\n name={name}\n style={style}\n size={config.iconSize}\n aria-label={title}\n aria-hidden={title ? null : 'true'}\n />\n );\n };\n\n private renderPicture(item: ListItem) {\n const image = item.image;\n if (isEmpty(image)) {\n return;\n }\n\n return <img src={image.src} alt={image.alt} loading=\"lazy\" />;\n }\n\n private renderDivider = () => {\n const classes = {\n 'mdc-deprecated-list-divider': true,\n 'mdc-deprecated-list-divider--inset': true,\n };\n if (this.config.iconSize) {\n classes[this.config.iconSize] = true;\n }\n\n return <hr class={classes} />;\n };\n\n private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n if (!actions || actions.length === 0) {\n return;\n }\n\n return (\n <limel-menu\n class=\"mdc-deprecated-list-item__meta\"\n items={actions}\n openDirection=\"left-start\"\n >\n <limel-icon-button\n class=\"action-menu-trigger\"\n slot=\"trigger\"\n icon=\"menu_2\"\n />\n </limel-menu>\n );\n };\n\n private renderVariantListItem = (\n config: ListRendererConfig,\n item: ListItem,\n index: number,\n ) => {\n let itemTemplate;\n if (config.type === 'radio') {\n itemTemplate = (\n <RadioButtonTemplate\n id={`c_${index}`}\n checked={item.selected}\n disabled={item.disabled}\n />\n );\n } else if (config.type === 'checkbox') {\n itemTemplate = (\n <CheckboxTemplate\n id={`c_${index}`}\n checked={item.selected}\n disabled={item.disabled}\n />\n );\n }\n\n const classNames = {\n 'mdc-deprecated-list-item': true,\n 'mdc-deprecated-list-item--disabled': item.disabled,\n 'mdc-deprecated-list-item__text': !item.secondaryText,\n 'has-primary-component': this.hasPrimaryComponent(item),\n };\n\n const attributes: { tabindex?: string } = {};\n if (index === this.applyTabIndexToItemAtIndex) {\n attributes.tabindex = '0';\n }\n\n return (\n <li\n class={classNames}\n role={config.type}\n aria-checked={item.selected ? 'true' : 'false'}\n aria-disabled={item.disabled ? 'true' : 'false'}\n data-index={index}\n {...attributes}\n >\n {this.renderVariantListItemContent(config, item, itemTemplate)}\n </li>\n );\n };\n\n private renderVariantListItemContent = (\n config: ListRendererConfig,\n item: ListItem,\n itemTemplate: any,\n ) => {\n if (this.hasIcons) {\n return [\n item.icon ? this.renderIcon(config, item) : null,\n this.getPrimaryComponent(item),\n this.renderText(item),\n <div class=\"mdc-deprecated-list-item__meta\">\n {itemTemplate}\n </div>,\n ];\n }\n\n return [\n <div class=\"mdc-deprecated-list-item__graphic\">{itemTemplate}</div>,\n this.getPrimaryComponent(item),\n this.renderText(item),\n ];\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"list-renderer.js","sourceRoot":"","sources":["../../../src/components/list/list-renderer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAEjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EACH,YAAY,EACZ,WAAW,EACX,YAAY,GACf,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,OAAO,YAAY;EAAzB;IACY,kBAAa,GAAuB;MACxC,MAAM,EAAE,IAAI;MACZ,UAAU,EAAE,KAAK;KACpB,CAAC;IA8DF;;;;;;;;OAQG;IACK,oCAA+B,GAAG,CACtC,KAAsC,EACxC,EAAE;MACA,IAAI,MAAM,CAAC;MACX,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE;QACjD,IAAI,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE;UACzB,uBAAuB;SAC1B;aAAM;UACH,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAkB,CAAC;UACvC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,uDAAuD;YACvD,SAAS;WACZ;UAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,MAAM,GAAG,CAAC,CAAC;YACX,MAAM;WACT;UAED,IAAI,MAAM,KAAK,SAAS,EAAE;YACtB,MAAM,GAAG,CAAC,CAAC;YACX,uCAAuC;YACvC,oDAAoD;WACvD;SACJ;OACJ;MAED,OAAO,MAAM,CAAC;IAClB,CAAC,CAAC;IAEF;;;;;;OAMG;IACK,mBAAc,GAAG,CACrB,IAA8B,EAC9B,KAAa,EACf,EAAE;MACA,IAAI,WAAW,IAAI,IAAI,EAAE;QACrB,OAAO,CACH,UAAI,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,WAAW;UACnD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;UAClC,WAAK,KAAK,EAAC,yBAAyB,GAAG,CACtC,CACR,CAAC;OACL;MAED,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;QAClD,OAAO,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;OAC/D;MAED,MAAM,UAAU,GAAG;QACf,0BAA0B,EAAE,IAAI;QAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ;QACnD,oCAAoC,EAAE,IAAI,CAAC,QAAQ;QACnD,uBAAuB,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;OAC1D,CAAC;MAEF,MAAM,UAAU,GAA0B,EAAE,CAAC;MAC7C,IAAI,KAAK,KAAK,IAAI,CAAC,0BAA0B,EAAE;QAC3C,UAAU,CAAC,QAAQ,GAAG,GAAG,CAAC;OAC7B;MAED,OAAO,CACH,wBACI,KAAK,EAAE,UAAU,mBACF,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACnC,KAAK,IACb,UAAU;QAEb,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;QAClC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;QACxB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACrB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI;QAC9D,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CACnC,CACR,CAAC;IACN,CAAC,CAAC;IAEM,2BAAsB,GAAG,CAAC,IAAmB,EAAE,EAAE;MACrD,IAAI,MAAM,IAAI,IAAI,EAAE;QAChB,OAAO,UAAI,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAM,CAAC;OAChE;IACL,CAAC,CAAC;IAaM,wBAAmB,GAAG,CAAC,IAAc,EAAE,EAAE;;MAC7C,OAAO,CAAC,CAAC,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,0CAAE,IAAI,CAAA,CAAC;IAC1C,CAAC,CAAC;IAEF;;;;;OAKG;IACK,eAAU,GAAG,CAAC,IAAc,EAAE,EAAE;MACpC,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;QACzB,OAAO,CACH,YAAM,KAAK,EAAC,gCAAgC,IAAE,IAAI,CAAC,IAAI,CAAQ,CAClE,CAAC;OACL;MAED,OAAO,CACH,WAAK,KAAK,EAAC,gCAAgC;QACvC,WAAK,KAAK,EAAC,gDAAgD;UACvD,WAAK,KAAK,EAAC,wCAAwC,IAC9C,IAAI,CAAC,IAAI,CACR,CACJ;QACN,WAAK,KAAK,EAAC,0CAA0C,IAChD,IAAI,CAAC,aAAa,CACjB,CACJ,CACT,CAAC;IACN,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,IAAc,EAAW,EAAE;MAC/C,OAAO,CAAC,CAAC,eAAe,IAAI,IAAI,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF;;;;;;OAMG;IACK,eAAU,GAAG,CAAC,MAA0B,EAAE,IAAc,EAAE,EAAE;MAChE,MAAM,KAAK,GAAQ,EAAE,CAAC;MACtB,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MACpC,IAAI,CAAC,IAAI,EAAE;QACP,OAAO;OACV;MAED,+CAA+C;MAC/C,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;MACtD,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MAEtC,IAAI,KAAK,EAAE;QACP,IAAI,MAAM,CAAC,UAAU,EAAE;UACnB,KAAK,CAAC,yBAAyB,CAAC,GAAG,KAAK,CAAC;SAC5C;aAAM;UACH,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;SACvB;OACJ;MAED,OAAO,CACH,kBACI,KAAK,EAAE,MAAM,CAAC,UAAU,EACxB,KAAK,EAAC,mCAAmC,EACzC,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,MAAM,CAAC,QAAQ,gBACT,KAAK,iBACJ,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,GACpC,CACL,CAAC;IACN,CAAC,CAAC;IAWM,kBAAa,GAAG,GAAG,EAAE;MACzB,MAAM,OAAO,GAAG;QACZ,6BAA6B,EAAE,IAAI;QACnC,oCAAoC,EAAE,IAAI;OAC7C,CAAC;MACF,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE;QACtB,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;OACxC;MAED,OAAO,UAAI,KAAK,EAAE,OAAO,GAAI,CAAC;IAClC,CAAC,CAAC;IAEM,qBAAgB,GAAG,CAAC,OAAwC,EAAE,EAAE;MACpE,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QAClC,OAAO;OACV;MAED,OAAO,CACH,kBACI,KAAK,EAAC,gCAAgC,EACtC,KAAK,EAAE,OAAO,EACd,aAAa,EAAC,YAAY;QAE1B,yBACI,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,GACf,CACO,CAChB,CAAC;IACN,CAAC,CAAC;IAEM,0BAAqB,GAAG,CAC5B,MAA0B,EAC1B,IAAc,EACd,KAAa,EACf,EAAE;MACA,IAAI,YAAY,CAAC;MACjB,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,EAAE;QACzB,YAAY,GAAG,CACX,EAAC,mBAAmB,IAChB,EAAE,EAAE,KAAK,KAAK,EAAE,EAChB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACL,CAAC;OACL;WAAM,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,EAAE;QACnC,YAAY,GAAG,CACX,EAAC,gBAAgB,IACb,EAAE,EAAE,KAAK,KAAK,EAAE,EAChB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACL,CAAC;OACL;MAED,MAAM,UAAU,GAAG;QACf,0BAA0B,EAAE,IAAI;QAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ;QACnD,gCAAgC,EAAE,CAAC,IAAI,CAAC,aAAa;QACrD,uBAAuB,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;OAC1D,CAAC;MAEF,MAAM,UAAU,GAA0B,EAAE,CAAC;MAC7C,IAAI,KAAK,KAAK,IAAI,CAAC,0BAA0B,EAAE;QAC3C,UAAU,CAAC,QAAQ,GAAG,GAAG,CAAC;OAC7B;MAED,OAAO,CACH,wBACI,KAAK,EAAE,UAAU,EACjB,IAAI,EAAE,MAAM,CAAC,IAAI,kBACH,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACnC,KAAK,IACb,UAAU,GAEb,IAAI,CAAC,4BAA4B,CAAC,MAAM,EAAE,IAAI,EAAE,YAAY,CAAC,CAC7D,CACR,CAAC;IACN,CAAC,CAAC;IAEM,iCAA4B,GAAG,CACnC,MAA0B,EAC1B,IAAc,EACd,YAAiB,EACnB,EAAE;MACA,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO;UACH,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI;UAChD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;UAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;UACrB,WAAK,KAAK,EAAC,gCAAgC,IACtC,YAAY,CACX;SACT,CAAC;OACL;MAED,OAAO;QACH,WAAK,KAAK,EAAC,mCAAmC,IAAE,YAAY,CAAO;QACnE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;OACxB,CAAC;IACN,CAAC,CAAC;EACN,CAAC;EA5VU,MAAM,CACT,KAAsC,EACtC,SAA6B,EAAE;IAE/B,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;IACpB,IAAI,CAAC,MAAM,mCAAQ,IAAI,CAAC,aAAa,GAAK,MAAM,CAAE,CAAC;IAEnD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;MAChC,OAAO,eAAe,IAAI,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;MAChC,OAAO,MAAM,IAAI,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,IAAI,IAAI,CAAC,QAAQ,CAAC;IAC1D,MAAM,mBAAmB,GAAG,CAAC,YAAY,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;IAEhE,IAAI,IAAI,CAAC;IACT,QAAQ,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;MACtB,KAAK,UAAU;QACX,IAAI,GAAG,OAAO,CAAC;QACf,MAAM;MACV,KAAK,OAAO;QACR,IAAI,GAAG,YAAY,CAAC;QACpB,MAAM;MACV;QACI,IAAI,GAAG,SAAS,CAAC;KACxB;IAED,IAAI,CAAC,0BAA0B;MAC3B,IAAI,CAAC,+BAA+B,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,UAAU,GAAG;MACf,qBAAqB,EAAE,IAAI;MAC3B,+BAA+B,EAAE,IAAI,CAAC,QAAQ;MAC9C,UAAU,EAAE,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;MAC1D,kCAAkC,EAAE,IAAI,CAAC,UAAU;MACnD,eAAe,EACX,IAAI,CAAC,QAAQ;QACb,IAAI,CAAC,UAAU;QACf,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;KAC1D,CAAC;IAEF,OAAO,CACH,UAAI,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,sBAAmB,UAAU,IACzD,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAC9B,CACR,CAAC;EACN,CAAC;EAqGO,mBAAmB,CAAC,IAAc;IACtC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE;MACjC,OAAO;KACV;IAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpD,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;IAE1C,OAAO,EAAC,gBAAgB,oBAAK,KAAK,EAAI,CAAC;EAC3C,CAAC;EA4EO,aAAa,CAAC,IAAc;IAChC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACzB,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE;MAChB,OAAO;KACV;IAED,OAAO,WAAK,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,OAAO,EAAC,MAAM,GAAG,CAAC;EAClE,CAAC;CA0GJ","sourcesContent":["import { ListItem } from './list-item.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { h } from '@stencil/core';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { ListRendererConfig } from './list-renderer-config';\nimport { RadioButtonTemplate } from './radio-button/radio-button.template';\nimport {\n getIconColor,\n getIconName,\n getIconTitle,\n} from '../icon/get-icon-props';\nimport { isEmpty } from 'lodash-es';\n\nexport class ListRenderer {\n private defaultConfig: ListRendererConfig = {\n isOpen: true,\n badgeIcons: false,\n };\n\n private config: ListRendererConfig;\n\n private hasIcons: boolean;\n private twoLines: boolean;\n private avatarList: boolean;\n private commandKey: boolean;\n\n private applyTabIndexToItemAtIndex: number;\n\n public render(\n items: Array<ListItem | ListSeparator>,\n config: ListRendererConfig = {},\n ) {\n items = items || [];\n this.config = { ...this.defaultConfig, ...config };\n\n this.twoLines = items.some((item) => {\n return 'secondaryText' in item && !!item.secondaryText;\n });\n\n this.hasIcons = items.some((item) => {\n return 'icon' in item && !!item.icon;\n });\n\n this.avatarList = this.config.badgeIcons && this.hasIcons;\n const selectableListTypes = ['selectable', 'radio', 'checkbox'];\n\n let role;\n switch (this.config.type) {\n case 'checkbox':\n role = 'group';\n break;\n case 'radio':\n role = 'radiogroup';\n break;\n default:\n role = 'listbox';\n }\n\n this.applyTabIndexToItemAtIndex =\n this.getIndexForWhichToApplyTabIndex(items);\n\n const classNames = {\n 'mdc-deprecated-list': true,\n 'mdc-deprecated-list--two-line': this.twoLines,\n selectable: selectableListTypes.includes(this.config.type),\n 'mdc-deprecated-list--avatar-list': this.avatarList,\n 'list--compact':\n this.twoLines &&\n this.commandKey &&\n ['small', 'x-small'].includes(this.config.iconSize),\n };\n\n return (\n <ul class={classNames} role={role} aria-orientation=\"vertical\">\n {items.map(this.renderListItem)}\n </ul>\n );\n }\n\n /**\n * Determine which ListItem should have the `tab-index` attribute set,\n * and return the index at which that ListItem is located in `items`.\n * Returns `undefined` if no item should have the attribute set.\n * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility\n *\n * @param items - the items of the list, including any `ListSeparator`:s\n * @returns the index as per the description\n */\n private getIndexForWhichToApplyTabIndex = (\n items: Array<ListItem | ListSeparator>,\n ) => {\n let result;\n for (let i = 0, max = items.length; i < max; i += 1) {\n if ('separator' in items[i]) {\n // Ignore ListSeparator\n } else {\n const item = items[i] as ListItem<any>;\n if (item.disabled) {\n // Skip disabled items - they should never get tabindex\n continue;\n }\n\n if (item.selected) {\n result = i;\n break;\n }\n\n if (result === undefined) {\n result = i;\n // Do NOT break, as any later item with\n // `selected=true` should get the tab-index instead!\n }\n }\n }\n\n return result;\n };\n\n /**\n * Render a single list item\n *\n * @param item - the item to render\n * @param index - the index the item had in the `items` array\n * @returns the list item\n */\n private renderListItem = (\n item: ListItem | ListSeparator,\n index: number,\n ) => {\n if ('separator' in item) {\n return (\n <li class=\"mdc-deprecated-list-divider\" role=\"separator\">\n {this.renderTextForSeparator(item)}\n <div class=\"limel-list-divider-line\" />\n </li>\n );\n }\n\n if (['radio', 'checkbox'].includes(this.config.type)) {\n return this.renderVariantListItem(this.config, item, index);\n }\n\n const classNames = {\n 'mdc-deprecated-list-item': true,\n 'mdc-deprecated-list-item--disabled': item.disabled,\n 'mdc-deprecated-list-item--selected': item.selected,\n 'has-primary-component': this.hasPrimaryComponent(item),\n };\n\n const attributes: { tabindex?: string } = {};\n if (index === this.applyTabIndexToItemAtIndex) {\n attributes.tabindex = '0';\n }\n\n return (\n <li\n class={classNames}\n aria-disabled={item.disabled ? 'true' : 'false'}\n aria-selected={item.selected ? 'true' : 'false'}\n data-index={index}\n {...attributes}\n >\n {this.renderIcon(this.config, item)}\n {this.renderPicture(item)}\n {this.getPrimaryComponent(item)}\n {this.renderText(item)}\n {this.twoLines && this.avatarList ? this.renderDivider() : null}\n {this.renderActionMenu(item.actions)}\n </li>\n );\n };\n\n private renderTextForSeparator = (item: ListSeparator) => {\n if ('text' in item) {\n return <h2 class=\"limel-list-divider-title\">{item.text}</h2>;\n }\n };\n\n private getPrimaryComponent(item: ListItem): Element {\n if (!this.hasPrimaryComponent(item)) {\n return;\n }\n\n const PrimaryComponent = item.primaryComponent.name;\n const props = item.primaryComponent.props;\n\n return <PrimaryComponent {...props} />;\n }\n\n private hasPrimaryComponent = (item: ListItem) => {\n return !!item?.primaryComponent?.name;\n };\n\n /**\n * Render the text of the list item\n *\n * @param item - the list item\n * @returns the text for the list item\n */\n private renderText = (item: ListItem) => {\n if (this.isSimpleItem(item)) {\n return (\n <span class=\"mdc-deprecated-list-item__text\">{item.text}</span>\n );\n }\n\n return (\n <div class=\"mdc-deprecated-list-item__text\">\n <div class=\"mdc-deprecated-list-item__primary-command-text\">\n <div class=\"mdc-deprecated-list-item__primary-text\">\n {item.text}\n </div>\n </div>\n <div class=\"mdc-deprecated-list-item__secondary-text\">\n {item.secondaryText}\n </div>\n </div>\n );\n };\n\n private isSimpleItem = (item: ListItem): boolean => {\n return !('secondaryText' in item);\n };\n\n /**\n * Render an icon for a list item\n *\n * @param config - the config object, passed on from the `renderListItem` function\n * @param item - the list item\n * @returns the icon element\n */\n private renderIcon = (config: ListRendererConfig, item: ListItem) => {\n const style: any = {};\n const name = getIconName(item.icon);\n if (!name) {\n return;\n }\n\n // eslint-disable-next-line sonarjs/deprecation\n const color = getIconColor(item.icon, item.iconColor);\n const title = getIconTitle(item.icon);\n\n if (color) {\n if (config.badgeIcons) {\n style['--icon-background-color'] = color;\n } else {\n style.color = color;\n }\n }\n\n return (\n <limel-icon\n badge={config.badgeIcons}\n class=\"mdc-deprecated-list-item__graphic\"\n name={name}\n style={style}\n size={config.iconSize}\n aria-label={title}\n aria-hidden={title ? null : 'true'}\n />\n );\n };\n\n private renderPicture(item: ListItem) {\n const image = item.image;\n if (isEmpty(image)) {\n return;\n }\n\n return <img src={image.src} alt={image.alt} loading=\"lazy\" />;\n }\n\n private renderDivider = () => {\n const classes = {\n 'mdc-deprecated-list-divider': true,\n 'mdc-deprecated-list-divider--inset': true,\n };\n if (this.config.iconSize) {\n classes[this.config.iconSize] = true;\n }\n\n return <hr class={classes} />;\n };\n\n private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n if (!actions || actions.length === 0) {\n return;\n }\n\n return (\n <limel-menu\n class=\"mdc-deprecated-list-item__meta\"\n items={actions}\n openDirection=\"left-start\"\n >\n <limel-icon-button\n class=\"action-menu-trigger\"\n slot=\"trigger\"\n icon=\"menu_2\"\n />\n </limel-menu>\n );\n };\n\n private renderVariantListItem = (\n config: ListRendererConfig,\n item: ListItem,\n index: number,\n ) => {\n let itemTemplate;\n if (config.type === 'radio') {\n itemTemplate = (\n <RadioButtonTemplate\n id={`c_${index}`}\n checked={item.selected}\n disabled={item.disabled}\n />\n );\n } else if (config.type === 'checkbox') {\n itemTemplate = (\n <CheckboxTemplate\n id={`c_${index}`}\n checked={item.selected}\n disabled={item.disabled}\n />\n );\n }\n\n const classNames = {\n 'mdc-deprecated-list-item': true,\n 'mdc-deprecated-list-item--disabled': item.disabled,\n 'mdc-deprecated-list-item__text': !item.secondaryText,\n 'has-primary-component': this.hasPrimaryComponent(item),\n };\n\n const attributes: { tabindex?: string } = {};\n if (index === this.applyTabIndexToItemAtIndex) {\n attributes.tabindex = '0';\n }\n\n return (\n <li\n class={classNames}\n role={config.type}\n aria-checked={item.selected ? 'true' : 'false'}\n aria-disabled={item.disabled ? 'true' : 'false'}\n data-index={index}\n {...attributes}\n >\n {this.renderVariantListItemContent(config, item, itemTemplate)}\n </li>\n );\n };\n\n private renderVariantListItemContent = (\n config: ListRendererConfig,\n item: ListItem,\n itemTemplate: any,\n ) => {\n if (this.hasIcons) {\n return [\n item.icon ? this.renderIcon(config, item) : null,\n this.getPrimaryComponent(item),\n this.renderText(item),\n <div class=\"mdc-deprecated-list-item__meta\">\n {itemTemplate}\n </div>,\n ];\n }\n\n return [\n <div class=\"mdc-deprecated-list-item__graphic\">{itemTemplate}</div>,\n this.getPrimaryComponent(item),\n this.renderText(item),\n ];\n };\n}\n"]}
|
|
@@ -24,11 +24,15 @@ export class MenuListRenderer {
|
|
|
24
24
|
}
|
|
25
25
|
else {
|
|
26
26
|
const item = items[i];
|
|
27
|
+
if (item.disabled) {
|
|
28
|
+
// Skip disabled items - they should never get tabindex
|
|
29
|
+
continue;
|
|
30
|
+
}
|
|
27
31
|
if (item.selected) {
|
|
28
32
|
result = i;
|
|
29
33
|
break;
|
|
30
34
|
}
|
|
31
|
-
if (result === undefined
|
|
35
|
+
if (result === undefined) {
|
|
32
36
|
result = i;
|
|
33
37
|
// Do NOT break, as any later item with
|
|
34
38
|
// `selected=true` should get the tab-index instead!
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-list-renderer.js","sourceRoot":"","sources":["../../../src/components/menu-list/menu-list-renderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ListSeparator } from '../list/list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { h } from '@stencil/core';\nimport { MenuListRendererConfig } from './menu-list-renderer-config';\nimport {\n getIconColor,\n getIconName,\n getIconTitle,\n} from '../icon/get-icon-props';\nimport { isFunction } from 'lodash-es';\n\nexport class MenuListRenderer {\n private defaultConfig: MenuListRendererConfig = {\n isOpen: true,\n badgeIcons: false,\n };\n\n private config: MenuListRendererConfig;\n\n private hasIcons: boolean;\n private twoLines: boolean;\n private avatarList: boolean;\n private commandKey: boolean;\n\n private applyTabIndexToItemAtIndex: number;\n\n public render(\n items: Array<MenuItem | ListSeparator>,\n config: MenuListRendererConfig = {},\n ) {\n items = items || [];\n this.config = { ...this.defaultConfig, ...config };\n\n this.twoLines = items.some((item) => {\n return 'secondaryText' in item && !!item.secondaryText;\n });\n\n this.commandKey = items.some((item) => {\n return 'commandText' in item && !!item.commandText;\n });\n\n this.hasIcons = items.some((item) => {\n return 'icon' in item && !!item.icon;\n });\n\n this.avatarList = this.config.badgeIcons && this.hasIcons;\n\n this.applyTabIndexToItemAtIndex =\n this.getIndexForWhichToApplyTabIndex(items);\n\n const classNames = {\n 'mdc-deprecated-list': true,\n 'mdc-deprecated-list--two-line': this.twoLines,\n selectable: true,\n 'mdc-deprecated-list--avatar-list': this.avatarList,\n 'list--compact':\n this.twoLines &&\n this.commandKey &&\n ['small', 'x-small'].includes(this.config.iconSize),\n };\n\n return (\n <ul\n class={classNames}\n role=\"menu\"\n aria-orientation=\"vertical\"\n style={{ '--maxLinesSecondaryText': '2' }}\n >\n {items.map(this.renderMenuItem)}\n </ul>\n );\n }\n\n /**\n * Determine which MenuItem should have the `tab-index` attribute set,\n * and return the index at which that MenuItem is located in `items`.\n * Returns `undefined` if no item should have the attribute set.\n * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility\n *\n * @param items - the items of the list, including any `ListSeparator`:s\n * @returns the index as per the description\n */\n private getIndexForWhichToApplyTabIndex = (\n items: Array<MenuItem | ListSeparator>,\n ) => {\n let result;\n for (let i = 0, max = items.length; i < max; i += 1) {\n if ('separator' in items[i]) {\n // Ignore ListSeparator\n } else {\n const item = items[i] as MenuItem<any>;\n if (item.selected) {\n result = i;\n break;\n }\n\n if (result === undefined && !item.disabled) {\n result = i;\n // Do NOT break, as any later item with\n // `selected=true` should get the tab-index instead!\n }\n }\n }\n\n return result;\n };\n\n /**\n * Render a single list item\n *\n * @param item - the item to render\n * @param index - the index the item had in the `items` array\n * @returns the list item\n */\n private renderMenuItem = (\n item: MenuItem | ListSeparator,\n index: number,\n ) => {\n if ('separator' in item) {\n return (\n <li class=\"mdc-deprecated-list-divider\" role=\"separator\">\n {this.rendertext(item)}\n <div class=\"limel-list-divider-line\" />\n </li>\n );\n }\n\n const classNames = {\n 'mdc-deprecated-list-item': true,\n 'mdc-deprecated-list-item--disabled': item.disabled,\n 'mdc-deprecated-list-item--selected': item.selected,\n };\n\n const attributes: { tabindex?: string } = {};\n if (index === this.applyTabIndexToItemAtIndex) {\n attributes.tabindex = '0';\n }\n\n return (\n <li\n class={classNames}\n role=\"menuitem\"\n aria-disabled={item.disabled ? 'true' : 'false'}\n aria-selected={item.selected ? 'true' : 'false'}\n data-index={index}\n data-text={item.text}\n {...attributes}\n >\n {this.renderIcon(this.config, item)}\n {this.renderText(item)}\n {this.renderSubMenuIcon(item)}\n {this.renderNotification(item)}\n {this.twoLines && this.avatarList ? this.renderDivider() : null}\n </li>\n );\n };\n\n /**\n * Render the text of the list item\n *\n * @param item - the list item\n * @returns the text for the list item\n */\n private renderText = (item: MenuItem) => {\n if (this.isSimpleItem(item)) {\n return (\n <span class=\"mdc-deprecated-list-item__text\">{item.text}</span>\n );\n }\n\n return (\n <div class=\"mdc-deprecated-list-item__text\">\n <div class=\"mdc-deprecated-list-item__primary-command-text\">\n <div class=\"mdc-deprecated-list-item__primary-text\">\n {item.text}\n </div>\n {this.renderCommandText(item)}\n </div>\n <div class=\"mdc-deprecated-list-item__secondary-text\">\n {item.secondaryText}\n </div>\n </div>\n );\n };\n\n private renderSubMenuIcon = (item: MenuItem) => {\n if (!this.hasSubItems(item)) {\n return;\n }\n\n return <limel-icon class=\"sub-menu-icon\" name=\"-lime-caret-right\" />;\n };\n\n private rendertext = (item: ListSeparator) => {\n if ('text' in item) {\n return <h2 class=\"limel-list-divider-title\">{item.text}</h2>;\n }\n };\n\n private renderCommandText = (item: MenuItem) => {\n if (!('commandText' in item)) {\n return;\n }\n\n return (\n <div class=\"mdc-deprecated-list-item__command-text\">\n {item.commandText}\n </div>\n );\n };\n\n private isSimpleItem = (item: MenuItem): boolean => {\n if ('commandText' in item) {\n return false;\n }\n\n return !('secondaryText' in item);\n };\n\n /**\n * Render an icon for a list item\n *\n * @param config - the config object, passed on from the `renderMenuItem` function\n * @param item - the list item\n * @returns the icon element\n */\n private renderIcon = (config: MenuListRendererConfig, item: MenuItem) => {\n const style: any = {};\n const name = getIconName(item.icon);\n if (!name) {\n return;\n }\n\n // eslint-disable-next-line sonarjs/deprecation\n const color = getIconColor(item.icon, item.iconColor);\n const title = getIconTitle(item.icon);\n\n if (color) {\n if (config.badgeIcons) {\n style['--icon-background-color'] = color;\n } else {\n style.color = color;\n }\n }\n\n return (\n <limel-icon\n badge={config.badgeIcons}\n class=\"mdc-deprecated-list-item__graphic\"\n name={name}\n style={style}\n size={config.iconSize}\n aria-label={title}\n aria-hidden={title ? null : 'true'}\n />\n );\n };\n\n private renderNotification = (item: MenuItem) => {\n if (item.badge !== undefined) {\n return <limel-badge label={item.badge} />;\n }\n };\n\n private renderDivider = () => {\n const classes = {\n 'mdc-deprecated-list-divider': true,\n 'mdc-deprecated-list-divider--inset': true,\n };\n if (this.config.iconSize) {\n classes[this.config.iconSize] = true;\n }\n\n return <hr class={classes} />;\n };\n\n private hasSubItems = (item: MenuItem): boolean => {\n return (\n (Array.isArray(item.items) && item.items.length > 0) ||\n isFunction(item.items)\n );\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"menu-list-renderer.js","sourceRoot":"","sources":["../../../src/components/menu-list/menu-list-renderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ListSeparator } from '../list/list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { h } from '@stencil/core';\nimport { MenuListRendererConfig } from './menu-list-renderer-config';\nimport {\n getIconColor,\n getIconName,\n getIconTitle,\n} from '../icon/get-icon-props';\nimport { isFunction } from 'lodash-es';\n\nexport class MenuListRenderer {\n private defaultConfig: MenuListRendererConfig = {\n isOpen: true,\n badgeIcons: false,\n };\n\n private config: MenuListRendererConfig;\n\n private hasIcons: boolean;\n private twoLines: boolean;\n private avatarList: boolean;\n private commandKey: boolean;\n\n private applyTabIndexToItemAtIndex: number;\n\n public render(\n items: Array<MenuItem | ListSeparator>,\n config: MenuListRendererConfig = {},\n ) {\n items = items || [];\n this.config = { ...this.defaultConfig, ...config };\n\n this.twoLines = items.some((item) => {\n return 'secondaryText' in item && !!item.secondaryText;\n });\n\n this.commandKey = items.some((item) => {\n return 'commandText' in item && !!item.commandText;\n });\n\n this.hasIcons = items.some((item) => {\n return 'icon' in item && !!item.icon;\n });\n\n this.avatarList = this.config.badgeIcons && this.hasIcons;\n\n this.applyTabIndexToItemAtIndex =\n this.getIndexForWhichToApplyTabIndex(items);\n\n const classNames = {\n 'mdc-deprecated-list': true,\n 'mdc-deprecated-list--two-line': this.twoLines,\n selectable: true,\n 'mdc-deprecated-list--avatar-list': this.avatarList,\n 'list--compact':\n this.twoLines &&\n this.commandKey &&\n ['small', 'x-small'].includes(this.config.iconSize),\n };\n\n return (\n <ul\n class={classNames}\n role=\"menu\"\n aria-orientation=\"vertical\"\n style={{ '--maxLinesSecondaryText': '2' }}\n >\n {items.map(this.renderMenuItem)}\n </ul>\n );\n }\n\n /**\n * Determine which MenuItem should have the `tab-index` attribute set,\n * and return the index at which that MenuItem is located in `items`.\n * Returns `undefined` if no item should have the attribute set.\n * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility\n *\n * @param items - the items of the list, including any `ListSeparator`:s\n * @returns the index as per the description\n */\n private getIndexForWhichToApplyTabIndex = (\n items: Array<MenuItem | ListSeparator>,\n ) => {\n let result;\n for (let i = 0, max = items.length; i < max; i += 1) {\n if ('separator' in items[i]) {\n // Ignore ListSeparator\n } else {\n const item = items[i] as MenuItem<any>;\n if (item.disabled) {\n // Skip disabled items - they should never get tabindex\n continue;\n }\n\n if (item.selected) {\n result = i;\n break;\n }\n\n if (result === undefined) {\n result = i;\n // Do NOT break, as any later item with\n // `selected=true` should get the tab-index instead!\n }\n }\n }\n\n return result;\n };\n\n /**\n * Render a single list item\n *\n * @param item - the item to render\n * @param index - the index the item had in the `items` array\n * @returns the list item\n */\n private renderMenuItem = (\n item: MenuItem | ListSeparator,\n index: number,\n ) => {\n if ('separator' in item) {\n return (\n <li class=\"mdc-deprecated-list-divider\" role=\"separator\">\n {this.rendertext(item)}\n <div class=\"limel-list-divider-line\" />\n </li>\n );\n }\n\n const classNames = {\n 'mdc-deprecated-list-item': true,\n 'mdc-deprecated-list-item--disabled': item.disabled,\n 'mdc-deprecated-list-item--selected': item.selected,\n };\n\n const attributes: { tabindex?: string } = {};\n if (index === this.applyTabIndexToItemAtIndex) {\n attributes.tabindex = '0';\n }\n\n return (\n <li\n class={classNames}\n role=\"menuitem\"\n aria-disabled={item.disabled ? 'true' : 'false'}\n aria-selected={item.selected ? 'true' : 'false'}\n data-index={index}\n data-text={item.text}\n {...attributes}\n >\n {this.renderIcon(this.config, item)}\n {this.renderText(item)}\n {this.renderSubMenuIcon(item)}\n {this.renderNotification(item)}\n {this.twoLines && this.avatarList ? this.renderDivider() : null}\n </li>\n );\n };\n\n /**\n * Render the text of the list item\n *\n * @param item - the list item\n * @returns the text for the list item\n */\n private renderText = (item: MenuItem) => {\n if (this.isSimpleItem(item)) {\n return (\n <span class=\"mdc-deprecated-list-item__text\">{item.text}</span>\n );\n }\n\n return (\n <div class=\"mdc-deprecated-list-item__text\">\n <div class=\"mdc-deprecated-list-item__primary-command-text\">\n <div class=\"mdc-deprecated-list-item__primary-text\">\n {item.text}\n </div>\n {this.renderCommandText(item)}\n </div>\n <div class=\"mdc-deprecated-list-item__secondary-text\">\n {item.secondaryText}\n </div>\n </div>\n );\n };\n\n private renderSubMenuIcon = (item: MenuItem) => {\n if (!this.hasSubItems(item)) {\n return;\n }\n\n return <limel-icon class=\"sub-menu-icon\" name=\"-lime-caret-right\" />;\n };\n\n private rendertext = (item: ListSeparator) => {\n if ('text' in item) {\n return <h2 class=\"limel-list-divider-title\">{item.text}</h2>;\n }\n };\n\n private renderCommandText = (item: MenuItem) => {\n if (!('commandText' in item)) {\n return;\n }\n\n return (\n <div class=\"mdc-deprecated-list-item__command-text\">\n {item.commandText}\n </div>\n );\n };\n\n private isSimpleItem = (item: MenuItem): boolean => {\n if ('commandText' in item) {\n return false;\n }\n\n return !('secondaryText' in item);\n };\n\n /**\n * Render an icon for a list item\n *\n * @param config - the config object, passed on from the `renderMenuItem` function\n * @param item - the list item\n * @returns the icon element\n */\n private renderIcon = (config: MenuListRendererConfig, item: MenuItem) => {\n const style: any = {};\n const name = getIconName(item.icon);\n if (!name) {\n return;\n }\n\n // eslint-disable-next-line sonarjs/deprecation\n const color = getIconColor(item.icon, item.iconColor);\n const title = getIconTitle(item.icon);\n\n if (color) {\n if (config.badgeIcons) {\n style['--icon-background-color'] = color;\n } else {\n style.color = color;\n }\n }\n\n return (\n <limel-icon\n badge={config.badgeIcons}\n class=\"mdc-deprecated-list-item__graphic\"\n name={name}\n style={style}\n size={config.iconSize}\n aria-label={title}\n aria-hidden={title ? null : 'true'}\n />\n );\n };\n\n private renderNotification = (item: MenuItem) => {\n if (item.badge !== undefined) {\n return <limel-badge label={item.badge} />;\n }\n };\n\n private renderDivider = () => {\n const classes = {\n 'mdc-deprecated-list-divider': true,\n 'mdc-deprecated-list-divider--inset': true,\n };\n if (this.config.iconSize) {\n classes[this.config.iconSize] = true;\n }\n\n return <hr class={classes} />;\n };\n\n private hasSubItems = (item: MenuItem): boolean => {\n return (\n (Array.isArray(item.items) && item.items.length > 0) ||\n isFunction(item.items)\n );\n };\n}\n"]}
|
|
@@ -1679,13 +1679,10 @@ limel-notched-outline:not([invalid]:not([invalid=false])) .limel-notched-outline
|
|
|
1679
1679
|
text-overflow: ellipsis;
|
|
1680
1680
|
}
|
|
1681
1681
|
.mdc-select:not(.mdc-select--disabled) .limel-select__selected-option__text {
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
font-weight: 400;
|
|
1687
|
-
letter-spacing: 0.009375em;
|
|
1688
|
-
color: rgba(var(--contrast-1200), 1);
|
|
1682
|
+
color: rgba(var(--contrast-1400), 1);
|
|
1683
|
+
}
|
|
1684
|
+
.mdc-select.mdc-select--disabled .limel-select__selected-option__text {
|
|
1685
|
+
color: rgba(var(--contrast-1400), 0.5);
|
|
1689
1686
|
}
|
|
1690
1687
|
|
|
1691
1688
|
.limel-select {
|
|
@@ -25,11 +25,26 @@ export const SelectTemplate = (props) => {
|
|
|
25
25
|
'limel-select--with-helper-text': typeof props.helperText === 'string',
|
|
26
26
|
};
|
|
27
27
|
return [
|
|
28
|
-
h("limel-notched-outline", { class: classList, labelId: "s-label", label: props.label, required: props.required, invalid: !isValid, disabled: props.disabled, readonly: props.readonly, hasValue: hasValue, hasFloatingLabel: props
|
|
28
|
+
h("limel-notched-outline", { class: classList, labelId: "s-label", label: props.label, required: props.required, invalid: !isValid, disabled: props.disabled, readonly: props.readonly, hasValue: hasValue, hasFloatingLabel: floatLabelAbove(props) }, h(SelectValue, Object.assign({}, props, { hasValue: hasValue, isValid: isValid, hasEmptyText: hasEmptyText }))),
|
|
29
29
|
h(HelperText, { text: props.helperText, isValid: !props.invalid }),
|
|
30
30
|
h(SelectDropdown, Object.assign({}, props)),
|
|
31
31
|
];
|
|
32
32
|
};
|
|
33
|
+
const floatLabelAbove = (props) => {
|
|
34
|
+
if (props.isOpen) {
|
|
35
|
+
return true;
|
|
36
|
+
}
|
|
37
|
+
const value = props.value;
|
|
38
|
+
if (value) {
|
|
39
|
+
if (isMultiple(value)) {
|
|
40
|
+
return value.length > 0;
|
|
41
|
+
}
|
|
42
|
+
else {
|
|
43
|
+
return value.text !== '';
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
return false;
|
|
47
|
+
};
|
|
33
48
|
const SelectValue = (props) => {
|
|
34
49
|
const anchorClassList = {
|
|
35
50
|
'mdc-select__anchor': true,
|
|
@@ -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, ListSeparator } from '../list/list-item.types';\nimport { Option } from '../select/option.types';\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { isMultiple } from '../../util/multiple';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\ninterface SelectTemplateProps {\n disabled?: boolean;\n readonly?: boolean;\n required?: boolean;\n invalid?: boolean;\n options: Array<Option | ListSeparator>;\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--disabled': props.disabled,\n 'limel-select--readonly': props.readonly,\n 'limel-select--invalid': !isValid,\n 'limel-select--with-helper-text': typeof props.helperText === 'string',\n };\n\n return [\n <limel-notched-outline\n class={classList}\n labelId=\"s-label\"\n label={props.label}\n required={props.required}\n invalid={!isValid}\n disabled={props.disabled}\n readonly={props.readonly}\n hasValue={hasValue}\n hasFloatingLabel={props.isOpen}\n >\n <SelectValue\n {...props}\n hasValue={hasValue}\n isValid={isValid}\n hasEmptyText={hasEmptyText}\n />\n </limel-notched-outline>,\n <HelperText text={props.helperText} isValid={!props.invalid} />,\n <SelectDropdown {...props} />,\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\n return (\n <button\n slot=\"content\"\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 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)}\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 const options = props.options\n .filter((option): option is Option => !('separator' in option))\n .map(renderOption(props.value));\n\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 {options}\n </select>\n );\n};\n\nconst renderOption = (selectedOption: Option | Option[]) => {\n return (option: Option) => {\n const { value, disabled, text } = option;\n\n return (\n <option\n key={value}\n value={value}\n selected={isSelected(option, selectedOption)}\n disabled={disabled}\n >\n {text}\n </option>\n );\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: Array<Option | ListSeparator>,\n value: Option | Option[],\n selectIsRequired = false,\n): Array<ListItem<Option> | ListSeparator> {\n const menuOptionFilter = getMenuOptionFilter(selectIsRequired);\n\n return options.filter(menuOptionFilter).map((option) => {\n if ('separator' in option) {\n return {\n text: option.text,\n separator: true,\n };\n }\n\n const selected = isSelected(option, value);\n const { text, secondaryText, disabled } = option;\n const name = getIconName(option.icon);\n // eslint-disable-next-line sonarjs/deprecation\n const color = getIconColor(option.icon, option.iconColor);\n\n if (!name) {\n return {\n text: text,\n secondaryText: secondaryText,\n selected: selected,\n disabled: disabled,\n value: option,\n };\n }\n\n return {\n text: text,\n secondaryText: secondaryText,\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 | ListSeparator) => {\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 if ('separator' in option) {\n return true;\n }\n };\n}\n\nfunction getSelectedText(value: Option | Option[]): string {\n const isEmptyValue = !value || (isMultiple(value) && !value.length);\n if (isEmptyValue) {\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?.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 // eslint-disable-next-line sonarjs/deprecation\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"]}
|
|
1
|
+
{"version":3,"file":"select.template.js","sourceRoot":"","sources":["../../../src/components/select/select.template.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ListItem, ListSeparator } from '../list/list-item.types';\nimport { Option } from '../select/option.types';\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { isMultiple } from '../../util/multiple';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\ninterface SelectTemplateProps {\n disabled?: boolean;\n readonly?: boolean;\n required?: boolean;\n invalid?: boolean;\n options: Array<Option | ListSeparator>;\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--disabled': props.disabled,\n 'limel-select--readonly': props.readonly,\n 'limel-select--invalid': !isValid,\n 'limel-select--with-helper-text': typeof props.helperText === 'string',\n };\n\n return [\n <limel-notched-outline\n class={classList}\n labelId=\"s-label\"\n label={props.label}\n required={props.required}\n invalid={!isValid}\n disabled={props.disabled}\n readonly={props.readonly}\n hasValue={hasValue}\n hasFloatingLabel={floatLabelAbove(props)}\n >\n <SelectValue\n {...props}\n hasValue={hasValue}\n isValid={isValid}\n hasEmptyText={hasEmptyText}\n />\n </limel-notched-outline>,\n <HelperText text={props.helperText} isValid={!props.invalid} />,\n <SelectDropdown {...props} />,\n ];\n};\n\nconst floatLabelAbove = (props: SelectTemplateProps) => {\n if (props.isOpen) {\n return true;\n }\n\n const value = props.value;\n if (value) {\n if (isMultiple(value)) {\n return value.length > 0;\n } else {\n return value.text !== '';\n }\n }\n\n return false;\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\n return (\n <button\n slot=\"content\"\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 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)}\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 const options = props.options\n .filter((option): option is Option => !('separator' in option))\n .map(renderOption(props.value));\n\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 {options}\n </select>\n );\n};\n\nconst renderOption = (selectedOption: Option | Option[]) => {\n return (option: Option) => {\n const { value, disabled, text } = option;\n\n return (\n <option\n key={value}\n value={value}\n selected={isSelected(option, selectedOption)}\n disabled={disabled}\n >\n {text}\n </option>\n );\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: Array<Option | ListSeparator>,\n value: Option | Option[],\n selectIsRequired = false,\n): Array<ListItem<Option> | ListSeparator> {\n const menuOptionFilter = getMenuOptionFilter(selectIsRequired);\n\n return options.filter(menuOptionFilter).map((option) => {\n if ('separator' in option) {\n return {\n text: option.text,\n separator: true,\n };\n }\n\n const selected = isSelected(option, value);\n const { text, secondaryText, disabled } = option;\n const name = getIconName(option.icon);\n // eslint-disable-next-line sonarjs/deprecation\n const color = getIconColor(option.icon, option.iconColor);\n\n if (!name) {\n return {\n text: text,\n secondaryText: secondaryText,\n selected: selected,\n disabled: disabled,\n value: option,\n };\n }\n\n return {\n text: text,\n secondaryText: secondaryText,\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 | ListSeparator) => {\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 if ('separator' in option) {\n return true;\n }\n };\n}\n\nfunction getSelectedText(value: Option | Option[]): string {\n const isEmptyValue = !value || (isMultiple(value) && !value.length);\n if (isEmptyValue) {\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?.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 // eslint-disable-next-line sonarjs/deprecation\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"]}
|