@limetech/lime-elements 37.72.3 → 37.73.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/limel-breadcrumbs_7.cjs.entry.js +15 -4
- package/dist/cjs/limel-breadcrumbs_7.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-shortcut.cjs.entry.js.map +1 -1
- package/dist/collection/components/list/list.js +27 -2
- package/dist/collection/components/list/list.js.map +1 -1
- package/dist/collection/components/menu-list/menu-list.js +26 -2
- package/dist/collection/components/menu-list/menu-list.js.map +1 -1
- package/dist/collection/style/internal/lime-theme.scss +1 -1
- package/dist/collection/style/shadows.scss +8 -4
- package/dist/esm/limel-breadcrumbs_7.entry.js +15 -4
- package/dist/esm/limel-breadcrumbs_7.entry.js.map +1 -1
- package/dist/esm/limel-shortcut.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.css +8 -4
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-7172c8e7.entry.js → p-209cd952.entry.js} +3 -3
- package/dist/lime-elements/p-209cd952.entry.js.map +1 -0
- package/dist/lime-elements/p-f3a613a3.entry.js.map +1 -1
- package/dist/lime-elements/style/internal/lime-theme.scss +1 -1
- package/dist/lime-elements/style/shadows.scss +8 -4
- package/dist/types/components/list/list.d.ts +5 -0
- package/dist/types/components/menu-list/menu-list.d.ts +6 -0
- package/dist/types/components.d.ts +8 -0
- package/package.json +13 -13
- package/dist/lime-elements/p-7172c8e7.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-shortcut.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,+rEAA+rE;;MCuBtsE,QAAQ;;;IAiDT,gBAAW,GAAG;MAClB,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAOA,iCAAkB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAC;OACvD;KACJ,CAAC;IAEM,iBAAY,GAAG;;MACnB,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,CAAA,EAAE;QAChC,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OAC9C;MAED,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC;OACrB;MAED,IAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE;QAClB,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OAC1B;MAED,OAAO,SAAS,CAAC;KACpB,CAAC;IAEM,uBAAkB,GAAG;MACzB,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAOA,yBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;OAC7C;KACJ,CAAC;;iBAhEsB,IAAI;oBAMA,KAAK;;;;EAe1B,MAAM;;IACT,OAAO;MACHA,gCACmB,IAAI,CAAC,QAAQ,EAC5B,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,EACrB,MAAM,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,EACzB,QAAQ,EAAC,GAAG,gBACA,IAAI,CAAC,YAAY,EAAE,EAC/B,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,IAEvBA,wBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC/B;MACJ,IAAI,CAAC,WAAW,EAAE;MAClB,IAAI,CAAC,kBAAkB,EAAE;KAC5B,CAAC;GACL;;;;;;","names":["h"],"sources":["./src/components/shortcut/shortcut.scss?tag=limel-shortcut&encapsulation=shadow","./src/components/shortcut/shortcut.tsx"],"sourcesContent":["/**\n* @prop --shortcut-border-radius: defines the radius of corners of the shortcut. Defaults to `1rem`\n* @prop --shortcut-icon-color: defines the fill color of the shortcut icon. Defaults to `--contrast-1000`\n* @prop --shortcut-label-color: defines the color of the shortcut label. Defaults to `--contrast-1100`\n* @prop --shortcut-background-color: defines the backgrounds color of the shortcut icon. Defaults to `--lime-elevated-surface-background-color`\n* @prop --shortcut-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --shortcut-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n*/\n\n@use '../../style/mixins';\n\n:host(limel-shortcut) {\n --badge-text-color: var(\n --shortcut-badge-text-color,\n rgb(var(--color-white))\n );\n --badge-background-color: var(\n --shortcut-badge-background-color,\n rgb(var(--color-red-default))\n );\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n row-gap: 0.0625rem; //1px\n\n * {\n box-sizing: border-box;\n }\n}\n\n:host(limel-shortcut[disabled]) {\n a {\n opacity: 0.5;\n box-shadow: unset;\n cursor: not-allowed;\n }\n}\n\na {\n all: unset;\n @include mixins.is-elevated-clickable(\n $background-color
|
|
1
|
+
{"file":"limel-shortcut.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,+rEAA+rE;;MCuBtsE,QAAQ;;;IAiDT,gBAAW,GAAG;MAClB,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAOA,iCAAkB,MAAM,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAC;OACvD;KACJ,CAAC;IAEM,iBAAY,GAAG;;MACnB,IAAI,IAAI,CAAC,KAAK,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,CAAA,EAAE;QAChC,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OAC9C;MAED,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAO,IAAI,CAAC,KAAK,CAAC;OACrB;MAED,IAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE;QAClB,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OAC1B;MAED,OAAO,SAAS,CAAC;KACpB,CAAC;IAEM,uBAAkB,GAAG;MACzB,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAOA,yBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;OAC7C;KACJ,CAAC;;iBAhEsB,IAAI;oBAMA,KAAK;;;;EAe1B,MAAM;;IACT,OAAO;MACHA,gCACmB,IAAI,CAAC,QAAQ,EAC5B,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,EACrB,MAAM,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,EACzB,QAAQ,EAAC,GAAG,gBACA,IAAI,CAAC,YAAY,EAAE,EAC/B,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,IAEvBA,wBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC/B;MACJ,IAAI,CAAC,WAAW,EAAE;MAClB,IAAI,CAAC,kBAAkB,EAAE;KAC5B,CAAC;GACL;;;;;;","names":["h"],"sources":["./src/components/shortcut/shortcut.scss?tag=limel-shortcut&encapsulation=shadow","./src/components/shortcut/shortcut.tsx"],"sourcesContent":["/**\n* @prop --shortcut-border-radius: defines the radius of corners of the shortcut. Defaults to `1rem`\n* @prop --shortcut-icon-color: defines the fill color of the shortcut icon. Defaults to `--contrast-1000`\n* @prop --shortcut-label-color: defines the color of the shortcut label. Defaults to `--contrast-1100`\n* @prop --shortcut-background-color: defines the backgrounds color of the shortcut icon. Defaults to `--lime-elevated-surface-background-color`\n* @prop --shortcut-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --shortcut-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n*/\n\n@use '../../style/mixins';\n\n:host(limel-shortcut) {\n --badge-text-color: var(\n --shortcut-badge-text-color,\n rgb(var(--color-white))\n );\n --badge-background-color: var(\n --shortcut-badge-background-color,\n rgb(var(--color-red-default))\n );\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n row-gap: 0.0625rem; //1px\n\n * {\n box-sizing: border-box;\n }\n}\n\n:host(limel-shortcut[disabled]) {\n a {\n opacity: 0.5;\n box-shadow: unset;\n cursor: not-allowed;\n }\n}\n\na {\n all: unset;\n @include mixins.is-elevated-clickable(\n $background-color: var(\n --shortcut-background-color,\n var(--lime-elevated-surface-background-color)\n ),\n $background-color--hovered: var(\n --shortcut-background-color,\n var(--lime-elevated-surface-background-color)\n )\n );\n @include mixins.visualize-keyboard-focus;\n text-align: center;\n\n height: calc(100% - 1rem);\n width: calc(100% - 1rem);\n padding: 0.5rem;\n\n border-radius: var(--shortcut-border-radius, 1rem);\n}\n\nlimel-icon {\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n color: var(--shortcut-icon-color, rgb(var(--contrast-1000)));\n border-radius: var(--shortcut-border-radius, 1rem);\n}\n\nspan {\n @include mixins.truncate-text;\n width: 100%;\n color: var(--shortcut-label-color, rgb(var(--contrast-1100)));\n font-size: 0.75rem;\n text-align: center;\n}\n\nlimel-badge {\n position: absolute;\n top: -0.25rem;\n right: 0.125rem;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * Clicking on the component should navigate the user to a new screen,\n * to which you need to provide a URL, by specifying an `href` for the `link` property.\n *\n * By default, this navigation will happen within the same browser tab.\n * However, it is possible to override that behavior, by specifying a `target`\n * for the `link` property\n *\n * @exampleComponent limel-example-shortcut\n * @exampleComponent limel-example-shortcut-notification\n * @exampleComponent limel-example-shortcut-styling\n * @exampleComponent limel-example-shortcut-with-click-handler\n */\n\n@Component({\n tag: 'limel-shortcut',\n shadow: true,\n styleUrl: 'shortcut.scss',\n})\nexport class Shortcut {\n /**\n * Name of icon for the shortcut.\n */\n @Prop({ reflect: true })\n public icon: string;\n\n /**\n * The text to show below the shortcut. Long label will be truncated.\n */\n @Prop({ reflect: true })\n public label?: string = null;\n\n /**\n * Set to `true` if shortcut is disabled.\n */\n @Prop({ reflect: true })\n public disabled?: boolean = false;\n\n /**\n * If specified, will display a notification badge\n * on the shortcut.\n */\n @Prop({ reflect: true })\n public badge?: number | string;\n\n /**\n * If supplied, the shortcut will be a clickable link.\n */\n @Prop()\n public link?: Link;\n\n public render() {\n return [\n <a\n aria-disabled={this.disabled}\n href={this.link?.href}\n target={this.link?.target}\n tabindex=\"0\"\n aria-label={this.getAriaLabel()}\n title={this.link?.title}\n >\n <limel-icon name={this.icon} />\n </a>,\n this.renderLabel(),\n this.renderNotification(),\n ];\n }\n\n private renderLabel = () => {\n if (this.label) {\n return <span aria-hidden=\"true\">{this.label}</span>;\n }\n };\n\n private getAriaLabel = () => {\n if (this.label && this.link?.title) {\n return this.label + '. ' + this.link.title;\n }\n\n if (this.label) {\n return this.label;\n }\n\n if (this.link?.title) {\n return this.link.title;\n }\n\n return undefined;\n };\n\n private renderNotification = () => {\n if (this.badge) {\n return <limel-badge label={this.badge} />;\n }\n };\n}\n"],"version":3}
|
|
@@ -72,15 +72,19 @@ export class List {
|
|
|
72
72
|
const selectedItem = listItems.find((item) => {
|
|
73
73
|
return !!item.selected;
|
|
74
74
|
});
|
|
75
|
+
let interactedItem;
|
|
75
76
|
if (selectedItem) {
|
|
76
77
|
if (this.type !== 'radio') {
|
|
77
78
|
this.mdcList.selectedIndex = -1;
|
|
78
79
|
}
|
|
79
|
-
|
|
80
|
+
interactedItem = Object.assign(Object.assign({}, selectedItem), { selected: false });
|
|
81
|
+
this.change.emit(interactedItem);
|
|
80
82
|
}
|
|
81
83
|
if (listItems[index] !== selectedItem) {
|
|
82
|
-
|
|
84
|
+
interactedItem = Object.assign(Object.assign({}, listItems[index]), { selected: true });
|
|
85
|
+
this.change.emit(interactedItem);
|
|
83
86
|
}
|
|
87
|
+
this.interact.emit(interactedItem);
|
|
84
88
|
};
|
|
85
89
|
this.handleMultiSelect = (index) => {
|
|
86
90
|
const listItems = this.items.filter(this.isListItem);
|
|
@@ -101,6 +105,7 @@ export class List {
|
|
|
101
105
|
return Object.assign(Object.assign({}, item), { selected: true });
|
|
102
106
|
});
|
|
103
107
|
this.change.emit(selectedItems);
|
|
108
|
+
this.interact.emit(Object.assign({}, selectedItems[index]));
|
|
104
109
|
};
|
|
105
110
|
this.isListItem = (item) => {
|
|
106
111
|
return !('separator' in item);
|
|
@@ -335,6 +340,26 @@ export class List {
|
|
|
335
340
|
}
|
|
336
341
|
}
|
|
337
342
|
}
|
|
343
|
+
}, {
|
|
344
|
+
"method": "interact",
|
|
345
|
+
"name": "interact",
|
|
346
|
+
"bubbles": true,
|
|
347
|
+
"cancelable": true,
|
|
348
|
+
"composed": true,
|
|
349
|
+
"docs": {
|
|
350
|
+
"tags": [],
|
|
351
|
+
"text": "Fires when a user interacts with an item in the list (e.g., click,\nkeyboard select)."
|
|
352
|
+
},
|
|
353
|
+
"complexType": {
|
|
354
|
+
"original": "ListItem",
|
|
355
|
+
"resolved": "ListItem<any>",
|
|
356
|
+
"references": {
|
|
357
|
+
"ListItem": {
|
|
358
|
+
"location": "import",
|
|
359
|
+
"path": "./list-item.types"
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
}
|
|
338
363
|
}];
|
|
339
364
|
}
|
|
340
365
|
static get elementRef() { return "element"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/components/list/list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { IconSize } from '../icon/icon.types';\nimport { ListItem, ListSeparator } from './list-item.types';\nimport { ListType } from './list.types';\nimport { MDCList, MDCListActionEvent } from '@material/list';\nimport { strings as listStrings } from '@material/list/constants';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { ListRenderer } from './list-renderer';\nimport { ListRendererConfig } from './list-renderer-config';\n\nconst { ACTION_EVENT } = listStrings;\n\n/**\n * @exampleComponent limel-example-list\n * @exampleComponent limel-example-list-secondary\n * @exampleComponent limel-example-list-separator\n * @exampleComponent limel-example-list-selectable\n * @exampleComponent limel-example-list-icons\n * @exampleComponent limel-example-list-badge-icons\n * @exampleComponent limel-example-list-checkbox\n * @exampleComponent limel-example-list-checkbox-icons\n * @exampleComponent limel-example-list-radio-button\n * @exampleComponent limel-example-list-radio-button-icons\n * @exampleComponent limel-example-list-action\n * @exampleComponent limel-example-list-striped\n * @exampleComponent limel-example-list-badge-icons-with-multiple-lines\n * @exampleComponent limel-example-list-grid\n * @exampleComponent limel-example-list-primary-component\n */\n@Component({\n tag: 'limel-list',\n shadow: { delegatesFocus: true },\n styleUrl: 'list.scss',\n})\nexport class List {\n /**\n * List of items to display\n */\n @Prop()\n public items: Array<ListItem | ListSeparator>;\n\n /**\n * Set to `true` if the list should display larger icons with a background\n */\n @Prop()\n public badgeIcons: boolean;\n\n /**\n * Size of the icons in the list\n */\n @Prop()\n public iconSize: IconSize = 'small';\n\n /**\n * The type of the list, omit to get a regular list. Available types are:\n * `selectable`: regular list with single selection.\n * `radio`: radio button list with single selection.\n * `checkbox`: checkbox list with multiple selection.\n */\n @Prop()\n public type: ListType;\n\n /**\n * By default, lists will display 3 lines of text, and then truncate the rest.\n * Consumers can increase or decrease this number by specifying\n * `maxLinesSecondaryText`. If consumer enters zero or negative\n * numbers we default to 1; and if they type decimals we round up.\n */\n // eslint-disable-next-line no-magic-numbers\n @Prop() maxLinesSecondaryText: number = 3;\n\n @Element()\n private element: HTMLLimelListElement;\n\n private config: ListRendererConfig;\n private listRenderer = new ListRenderer();\n private mdcList: MDCList;\n private multiple: boolean;\n private selectable: boolean;\n\n /**\n * Fired when a new value has been selected from the list.\n * Only fired if `type` is set to `selectable`, `radio` or `checkbox`.\n */\n @Event()\n private change: EventEmitter<ListItem | ListItem[]>;\n\n /**\n * Fired when an action has been selected from the action menu of a list item\n */\n @Event()\n protected select: EventEmitter<ListItem | ListItem[]>;\n\n public connectedCallback() {\n this.setup();\n }\n\n public disconnectedCallback() {\n this.teardown();\n }\n\n public componentDidLoad() {\n this.setup();\n this.triggerIconColorWarning();\n }\n\n public render() {\n this.config = {\n badgeIcons: this.badgeIcons,\n type: this.type,\n iconSize: this.iconSize,\n };\n let maxLinesSecondaryText = +this.maxLinesSecondaryText?.toFixed();\n if (this.maxLinesSecondaryText < 1) {\n maxLinesSecondaryText = 1;\n }\n\n const html = this.listRenderer.render(this.items, this.config);\n\n return (\n <Host\n style={{\n '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,\n }}\n >\n {html}\n </Host>\n );\n }\n\n @Watch('type')\n protected handleType() {\n this.setupListeners();\n }\n\n @Watch('items')\n protected itemsChanged() {\n if (!this.mdcList) {\n return;\n }\n\n setTimeout(() => {\n this.setup();\n\n const listItems = this.items.filter(this.isListItem);\n\n if (this.multiple) {\n this.mdcList.selectedIndex = listItems\n .filter((item: ListItem) => item.selected)\n .map((item: ListItem) => listItems.indexOf(item));\n } else {\n const selectedIndex = listItems.findIndex(\n (item: ListItem) => item.selected,\n );\n\n if (selectedIndex === -1) {\n this.mdcList.initializeListType();\n } else {\n this.mdcList.selectedIndex = selectedIndex;\n }\n }\n }, 0);\n }\n\n private setup = () => {\n this.setupList();\n\n this.setupListeners();\n };\n\n private setupList = () => {\n if (this.mdcList) {\n this.teardown();\n this.mdcList = null;\n }\n\n const element = this.element.shadowRoot.querySelector(\n '.mdc-deprecated-list',\n );\n if (!element) {\n return;\n }\n\n this.mdcList = new MDCList(element);\n this.mdcList.hasTypeahead = true;\n };\n\n private setupListeners = () => {\n if (!this.mdcList) {\n return;\n }\n\n this.mdcList.unlisten(ACTION_EVENT, this.handleAction);\n\n this.selectable = ['selectable', 'radio', 'checkbox'].includes(\n this.type,\n );\n this.multiple = this.type === 'checkbox';\n\n if (!this.selectable) {\n return;\n }\n\n this.mdcList.listen(ACTION_EVENT, this.handleAction);\n this.mdcList.singleSelection = !this.multiple;\n };\n\n private teardown = () => {\n this.mdcList?.unlisten(ACTION_EVENT, this.handleAction);\n this.mdcList?.destroy();\n };\n\n private handleAction = (event: MDCListActionEvent) => {\n if (!this.multiple) {\n this.handleSingleSelect(event.detail.index);\n\n return;\n }\n\n this.handleMultiSelect(event.detail.index);\n };\n\n private handleSingleSelect = (index: number) => {\n const listItems = this.items.filter(this.isListItem) as ListItem[];\n if (listItems[index].disabled) {\n return;\n }\n\n const selectedItem: ListItem = listItems.find((item: ListItem) => {\n return !!item.selected;\n });\n\n if (selectedItem) {\n if (this.type !== 'radio') {\n this.mdcList.selectedIndex = -1;\n }\n\n this.change.emit({ ...selectedItem, selected: false });\n }\n\n if (listItems[index] !== selectedItem) {\n this.change.emit({ ...listItems[index], selected: true });\n }\n };\n\n private handleMultiSelect = (index: number) => {\n const listItems = this.items.filter(this.isListItem) as ListItem[];\n if (listItems[index].disabled) {\n return;\n }\n\n const selectedItems: ListItem[] = listItems\n .filter((item: ListItem, listIndex: number) => {\n if (listIndex === index) {\n // This is the item that was selected or deselected,\n // so we negate its previous selection status.\n return !item.selected;\n }\n\n // This is an item that didn't change, so we keep its selection status.\n return item.selected;\n })\n .map((item: ListItem) => {\n return { ...item, selected: true };\n });\n\n this.change.emit(selectedItems);\n };\n\n private isListItem = (item: ListItem): boolean => {\n return !('separator' in item);\n };\n\n private triggerIconColorWarning() {\n if (this.items?.some((item) => 'iconColor' in item)) {\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":"list.js","sourceRoot":"","sources":["../../../src/components/list/list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { IconSize } from '../icon/icon.types';\nimport { ListItem, ListSeparator } from './list-item.types';\nimport { ListType } from './list.types';\nimport { MDCList, MDCListActionEvent } from '@material/list';\nimport { strings as listStrings } from '@material/list/constants';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { ListRenderer } from './list-renderer';\nimport { ListRendererConfig } from './list-renderer-config';\n\nconst { ACTION_EVENT } = listStrings;\n\n/**\n * @exampleComponent limel-example-list\n * @exampleComponent limel-example-list-secondary\n * @exampleComponent limel-example-list-separator\n * @exampleComponent limel-example-list-selectable\n * @exampleComponent limel-example-list-icons\n * @exampleComponent limel-example-list-badge-icons\n * @exampleComponent limel-example-list-checkbox\n * @exampleComponent limel-example-list-checkbox-icons\n * @exampleComponent limel-example-list-radio-button\n * @exampleComponent limel-example-list-radio-button-icons\n * @exampleComponent limel-example-list-action\n * @exampleComponent limel-example-list-striped\n * @exampleComponent limel-example-list-badge-icons-with-multiple-lines\n * @exampleComponent limel-example-list-grid\n * @exampleComponent limel-example-list-primary-component\n */\n@Component({\n tag: 'limel-list',\n shadow: { delegatesFocus: true },\n styleUrl: 'list.scss',\n})\nexport class List {\n /**\n * List of items to display\n */\n @Prop()\n public items: Array<ListItem | ListSeparator>;\n\n /**\n * Set to `true` if the list should display larger icons with a background\n */\n @Prop()\n public badgeIcons: boolean;\n\n /**\n * Size of the icons in the list\n */\n @Prop()\n public iconSize: IconSize = 'small';\n\n /**\n * The type of the list, omit to get a regular list. Available types are:\n * `selectable`: regular list with single selection.\n * `radio`: radio button list with single selection.\n * `checkbox`: checkbox list with multiple selection.\n */\n @Prop()\n public type: ListType;\n\n /**\n * By default, lists will display 3 lines of text, and then truncate the rest.\n * Consumers can increase or decrease this number by specifying\n * `maxLinesSecondaryText`. If consumer enters zero or negative\n * numbers we default to 1; and if they type decimals we round up.\n */\n // eslint-disable-next-line no-magic-numbers\n @Prop() maxLinesSecondaryText: number = 3;\n\n @Element()\n private element: HTMLLimelListElement;\n\n private config: ListRendererConfig;\n private listRenderer = new ListRenderer();\n private mdcList: MDCList;\n private multiple: boolean;\n private selectable: boolean;\n\n /**\n * Fired when a new value has been selected from the list.\n * Only fired if `type` is set to `selectable`, `radio` or `checkbox`.\n */\n @Event()\n private change: EventEmitter<ListItem | ListItem[]>;\n\n /**\n * Fired when an action has been selected from the action menu of a list item\n */\n @Event()\n protected select: EventEmitter<ListItem | ListItem[]>;\n\n /**\n * Fires when a user interacts with an item in the list (e.g., click,\n * keyboard select).\n */\n @Event()\n interact: EventEmitter<ListItem>;\n\n public connectedCallback() {\n this.setup();\n }\n\n public disconnectedCallback() {\n this.teardown();\n }\n\n public componentDidLoad() {\n this.setup();\n this.triggerIconColorWarning();\n }\n\n public render() {\n this.config = {\n badgeIcons: this.badgeIcons,\n type: this.type,\n iconSize: this.iconSize,\n };\n let maxLinesSecondaryText = +this.maxLinesSecondaryText?.toFixed();\n if (this.maxLinesSecondaryText < 1) {\n maxLinesSecondaryText = 1;\n }\n\n const html = this.listRenderer.render(this.items, this.config);\n\n return (\n <Host\n style={{\n '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,\n }}\n >\n {html}\n </Host>\n );\n }\n\n @Watch('type')\n protected handleType() {\n this.setupListeners();\n }\n\n @Watch('items')\n protected itemsChanged() {\n if (!this.mdcList) {\n return;\n }\n\n setTimeout(() => {\n this.setup();\n\n const listItems = this.items.filter(this.isListItem);\n\n if (this.multiple) {\n this.mdcList.selectedIndex = listItems\n .filter((item: ListItem) => item.selected)\n .map((item: ListItem) => listItems.indexOf(item));\n } else {\n const selectedIndex = listItems.findIndex(\n (item: ListItem) => item.selected,\n );\n\n if (selectedIndex === -1) {\n this.mdcList.initializeListType();\n } else {\n this.mdcList.selectedIndex = selectedIndex;\n }\n }\n }, 0);\n }\n\n private setup = () => {\n this.setupList();\n\n this.setupListeners();\n };\n\n private setupList = () => {\n if (this.mdcList) {\n this.teardown();\n this.mdcList = null;\n }\n\n const element = this.element.shadowRoot.querySelector(\n '.mdc-deprecated-list',\n );\n if (!element) {\n return;\n }\n\n this.mdcList = new MDCList(element);\n this.mdcList.hasTypeahead = true;\n };\n\n private setupListeners = () => {\n if (!this.mdcList) {\n return;\n }\n\n this.mdcList.unlisten(ACTION_EVENT, this.handleAction);\n\n this.selectable = ['selectable', 'radio', 'checkbox'].includes(\n this.type,\n );\n this.multiple = this.type === 'checkbox';\n\n if (!this.selectable) {\n return;\n }\n\n this.mdcList.listen(ACTION_EVENT, this.handleAction);\n this.mdcList.singleSelection = !this.multiple;\n };\n\n private teardown = () => {\n this.mdcList?.unlisten(ACTION_EVENT, this.handleAction);\n this.mdcList?.destroy();\n };\n\n private handleAction = (event: MDCListActionEvent) => {\n if (!this.multiple) {\n this.handleSingleSelect(event.detail.index);\n\n return;\n }\n\n this.handleMultiSelect(event.detail.index);\n };\n\n private handleSingleSelect = (index: number) => {\n const listItems = this.items.filter(this.isListItem) as ListItem[];\n if (listItems[index].disabled) {\n return;\n }\n\n const selectedItem: ListItem = listItems.find((item: ListItem) => {\n return !!item.selected;\n });\n\n let interactedItem: ListItem;\n\n if (selectedItem) {\n if (this.type !== 'radio') {\n this.mdcList.selectedIndex = -1;\n }\n\n interactedItem = { ...selectedItem, selected: false };\n this.change.emit(interactedItem);\n }\n\n if (listItems[index] !== selectedItem) {\n interactedItem = { ...listItems[index], selected: true };\n this.change.emit(interactedItem);\n }\n\n this.interact.emit(interactedItem);\n };\n\n private handleMultiSelect = (index: number) => {\n const listItems = this.items.filter(this.isListItem) as ListItem[];\n if (listItems[index].disabled) {\n return;\n }\n\n const selectedItems: ListItem[] = listItems\n .filter((item: ListItem, listIndex: number) => {\n if (listIndex === index) {\n // This is the item that was selected or deselected,\n // so we negate its previous selection status.\n return !item.selected;\n }\n\n // This is an item that didn't change, so we keep its selection status.\n return item.selected;\n })\n .map((item: ListItem) => {\n return { ...item, selected: true };\n });\n\n this.change.emit(selectedItems);\n this.interact.emit({ ...selectedItems[index] });\n };\n\n private isListItem = (item: ListItem): boolean => {\n return !('separator' in item);\n };\n\n private triggerIconColorWarning() {\n if (this.items?.some((item) => 'iconColor' in item)) {\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"]}
|
|
@@ -51,12 +51,16 @@ export class MenuList {
|
|
|
51
51
|
const selectedItem = MenuItems.find((item) => {
|
|
52
52
|
return !!item.selected;
|
|
53
53
|
});
|
|
54
|
+
let interactedItem;
|
|
54
55
|
if (selectedItem) {
|
|
55
|
-
|
|
56
|
+
interactedItem = Object.assign(Object.assign({}, selectedItem), { selected: false });
|
|
57
|
+
this.select.emit(interactedItem);
|
|
56
58
|
}
|
|
57
59
|
if (MenuItems[index] !== selectedItem) {
|
|
58
|
-
|
|
60
|
+
interactedItem = Object.assign(Object.assign({}, MenuItems[index]), { selected: false });
|
|
61
|
+
this.select.emit(interactedItem);
|
|
59
62
|
}
|
|
63
|
+
this.interact.emit(interactedItem);
|
|
60
64
|
};
|
|
61
65
|
this.isMenuItem = (item) => {
|
|
62
66
|
return !('separator' in item);
|
|
@@ -246,6 +250,26 @@ export class MenuList {
|
|
|
246
250
|
}
|
|
247
251
|
}
|
|
248
252
|
}
|
|
253
|
+
}, {
|
|
254
|
+
"method": "interact",
|
|
255
|
+
"name": "interact",
|
|
256
|
+
"bubbles": true,
|
|
257
|
+
"cancelable": true,
|
|
258
|
+
"composed": true,
|
|
259
|
+
"docs": {
|
|
260
|
+
"tags": [],
|
|
261
|
+
"text": "Fires when a user interacts with an item in the list (e.g., click,\nkeyboard select)."
|
|
262
|
+
},
|
|
263
|
+
"complexType": {
|
|
264
|
+
"original": "MenuItem",
|
|
265
|
+
"resolved": "MenuItem<any>",
|
|
266
|
+
"references": {
|
|
267
|
+
"MenuItem": {
|
|
268
|
+
"location": "import",
|
|
269
|
+
"path": "../menu/menu.types"
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
}
|
|
249
273
|
}];
|
|
250
274
|
}
|
|
251
275
|
static get elementRef() { return "element"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-list.js","sourceRoot":"","sources":["../../../src/components/menu-list/menu-list.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAoB,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGxD,MAAM,EAAE,cAAc,EAAE,GAAG,WAAW,CAAC;AAEvC;;GAEG;AAMH,MAAM,OAAO,QAAQ;;IAwCT,qBAAgB,GAAG,IAAI,gBAAgB,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"menu-list.js","sourceRoot":"","sources":["../../../src/components/menu-list/menu-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { IconSize } from '../icon/icon.types';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { MenuListType } from '../menu-list/menu-list.types';\nimport { MDCMenu, MDCMenuItemEvent } from '@material/menu';\nimport { MDCRipple } from '@material/ripple';\nimport { strings as menuStrings } from '@material/menu/constants';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { MenuListRenderer } from './menu-list-renderer';\nimport { MenuListRendererConfig } from './menu-list-renderer-config';\n\nconst { SELECTED_EVENT } = menuStrings;\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-menu-list',\n shadow: { delegatesFocus: true },\n styleUrl: 'menu-list.scss',\n})\nexport class MenuList {\n /**\n * List of items to display\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator>;\n\n /**\n * Set to `true` if the list should display larger icons with a background\n */\n @Prop()\n public badgeIcons: boolean;\n\n /**\n * Size of the icons in the list\n */\n @Prop()\n public iconSize: IconSize = 'small';\n\n /**\n * The type of the menu, omit to get a regular vertical menu.\n * Available types are:\n * `menu`: regular vertical menu.\n */\n @Prop()\n public type: MenuListType;\n\n /**\n * By default, lists will display 3 lines of text, and then truncate the rest.\n * Consumers can increase or decrease this number by specifying\n * `maxLinesSecondaryText`. If consumer enters zero or negative\n * numbers we default to 1; and if they type decimals we round up.\n */\n // eslint-disable-next-line no-magic-numbers\n @Prop() maxLinesSecondaryText: number = 3;\n\n @Element()\n private element: HTMLLimelMenuListElement;\n\n private config: MenuListRendererConfig;\n private MenuListRenderer = new MenuListRenderer();\n private mdcMenu: MDCMenu;\n\n /**\n * Fired when a new value has been selected from the list.\n */\n @Event()\n private select: EventEmitter<MenuItem>;\n\n /**\n * Fires when a user interacts with an item in the list (e.g., click,\n * keyboard select).\n */\n @Event()\n interact: EventEmitter<MenuItem>;\n\n public connectedCallback() {\n this.setup();\n }\n\n public disconnectedCallback() {\n this.teardown();\n }\n\n public componentDidLoad() {\n this.setup();\n this.triggerIconColorWarning();\n }\n\n public render() {\n this.config = {\n badgeIcons: this.badgeIcons,\n type: this.type,\n iconSize: this.iconSize,\n };\n\n const html = this.MenuListRenderer.render(this.items, this.config);\n\n return <div class=\"mdc-menu mdc-menu-surface\">{html}</div>;\n }\n\n @Watch('type')\n protected handleType() {\n this.setupListeners();\n }\n\n @Watch('items')\n protected itemsChanged() {\n setTimeout(() => {\n this.setup();\n }, 0);\n }\n\n private setup = () => {\n this.setupMenu();\n this.setupListeners();\n };\n\n private setupMenu = () => {\n if (this.mdcMenu) {\n this.teardown();\n this.mdcMenu = null;\n }\n\n const element = this.element.shadowRoot.querySelector('.mdc-menu');\n if (!element) {\n return;\n }\n\n this.mdcMenu = new MDCMenu(element);\n this.mdcMenu.hasTypeahead = true;\n this.mdcMenu.wrapFocus = true;\n this.mdcMenu.items.forEach((item) => new MDCRipple(item));\n };\n\n private setupListeners = () => {\n if (!this.mdcMenu) {\n return;\n }\n\n this.mdcMenu.unlisten(SELECTED_EVENT, this.handleMenuSelect);\n this.mdcMenu.listen(SELECTED_EVENT, this.handleMenuSelect);\n };\n\n private teardown = () => {\n this.mdcMenu?.unlisten(SELECTED_EVENT, this.handleMenuSelect);\n this.mdcMenu?.destroy();\n };\n\n private handleMenuSelect = (event: MDCMenuItemEvent) => {\n this.handleSingleSelect(event.detail.index);\n };\n\n private handleSingleSelect = (index: number) => {\n const MenuItems = this.items.filter(this.isMenuItem) as MenuItem[];\n if (MenuItems[index].disabled) {\n return;\n }\n\n const selectedItem: MenuItem = MenuItems.find((item: MenuItem) => {\n return !!item.selected;\n });\n\n let interactedItem: MenuItem;\n if (selectedItem) {\n interactedItem = { ...selectedItem, selected: false };\n this.select.emit(interactedItem);\n }\n\n if (MenuItems[index] !== selectedItem) {\n interactedItem = { ...MenuItems[index], selected: false };\n this.select.emit(interactedItem);\n }\n\n this.interact.emit(interactedItem);\n };\n\n private isMenuItem = (item: MenuItem): boolean => {\n return !('separator' in item);\n };\n\n private triggerIconColorWarning() {\n if (this.items?.some((item) => 'iconColor' in item)) {\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"]}
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
// $text-secondary-on-dark: rgba(255, 255, 255, 0.7),
|
|
39
39
|
// $text-hint-on-dark: rgba(255, 255, 255, 0.5),
|
|
40
40
|
// $text-disabled-on-dark: rgba(255, 255, 255, 0.5),
|
|
41
|
-
|
|
41
|
+
// $text-icon-on-dark: rgba(255, 255, 255, 0.5),
|
|
42
42
|
);
|
|
43
43
|
@forward '@material/theme';
|
|
44
44
|
|
|
@@ -45,7 +45,8 @@
|
|
|
45
45
|
// Same as above, but when element is indicating error or warning
|
|
46
46
|
--shadow-depth-8-error: var(--shadow-depth-8), var(--shadow-error-state);
|
|
47
47
|
// Same as above, but light source is below the element, good for bottom bars, etc...
|
|
48
|
-
--shadow-depth-8-reversed: 0 -0.2rem 0.45rem 0
|
|
48
|
+
--shadow-depth-8-reversed: 0 -0.2rem 0.45rem 0
|
|
49
|
+
rgb(var(--color-black), 0.132),
|
|
49
50
|
0 -0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.108);
|
|
50
51
|
|
|
51
52
|
// Good for Teaching callouts, Search results dropdown, cards, Tooltips
|
|
@@ -64,19 +65,22 @@
|
|
|
64
65
|
--shadow-depth-64-focused: var(--shadow-depth-64),
|
|
65
66
|
var(--shadow-focused-state);
|
|
66
67
|
|
|
67
|
-
--shadow-inflated-8: -0.125rem -0.125rem 0.375rem
|
|
68
|
+
--shadow-inflated-8: -0.125rem -0.125rem 0.375rem
|
|
69
|
+
rgb(var(--color-black), 0.01),
|
|
68
70
|
-0.25rem -0.25rem 0.625rem rgb(var(--color-white), 0.6),
|
|
69
71
|
0.25rem 0.25rem 0.625rem rgb(var(--color-black), 0.05),
|
|
70
72
|
0.0625rem 0.0625rem 0.625rem rgb(var(--color-white), 0.7),
|
|
71
73
|
-1px -1px 0 1px rgb(var(--color-black), 0.07) inset,
|
|
72
74
|
0 0 1px 1px rgb(var(--color-white), 0.98) inset;
|
|
73
|
-
--shadow-inflated-16: -0.1875rem -0.1875rem 0.375rem
|
|
75
|
+
--shadow-inflated-16: -0.1875rem -0.1875rem 0.375rem
|
|
76
|
+
rgb(var(--color-black), 0.01),
|
|
74
77
|
-0.375rem -0.375rem 1rem rgb(var(--color-white), 0.8),
|
|
75
78
|
0.375rem 0.375rem 1rem rgb(var(--color-black), 0.05),
|
|
76
79
|
0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.7),
|
|
77
80
|
-1px -1px 0 1px rgb(var(--color-black), 0.07) inset,
|
|
78
81
|
0 0 1px 1px rgb(var(--color-white), 0.98) inset;
|
|
79
|
-
--shadow-inflated-64: -0.1875rem -0.1875rem 0.375rem
|
|
82
|
+
--shadow-inflated-64: -0.1875rem -0.1875rem 0.375rem
|
|
83
|
+
rgb(var(--color-black), 0.01),
|
|
80
84
|
-0.625rem -0.625rem 1.875rem rgb(var(--color-white), 1),
|
|
81
85
|
0.625rem 0.625rem 2.25rem rgb(var(--color-black), 0.06),
|
|
82
86
|
0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.7),
|
|
@@ -2440,6 +2440,7 @@ const List = class {
|
|
|
2440
2440
|
registerInstance(this, hostRef);
|
|
2441
2441
|
this.change = createEvent(this, "change", 7);
|
|
2442
2442
|
this.select = createEvent(this, "select", 7);
|
|
2443
|
+
this.interact = createEvent(this, "interact", 7);
|
|
2443
2444
|
this.listRenderer = new ListRenderer();
|
|
2444
2445
|
this.setup = () => {
|
|
2445
2446
|
this.setupList();
|
|
@@ -2490,15 +2491,19 @@ const List = class {
|
|
|
2490
2491
|
const selectedItem = listItems.find((item) => {
|
|
2491
2492
|
return !!item.selected;
|
|
2492
2493
|
});
|
|
2494
|
+
let interactedItem;
|
|
2493
2495
|
if (selectedItem) {
|
|
2494
2496
|
if (this.type !== 'radio') {
|
|
2495
2497
|
this.mdcList.selectedIndex = -1;
|
|
2496
2498
|
}
|
|
2497
|
-
|
|
2499
|
+
interactedItem = Object.assign(Object.assign({}, selectedItem), { selected: false });
|
|
2500
|
+
this.change.emit(interactedItem);
|
|
2498
2501
|
}
|
|
2499
2502
|
if (listItems[index] !== selectedItem) {
|
|
2500
|
-
|
|
2503
|
+
interactedItem = Object.assign(Object.assign({}, listItems[index]), { selected: true });
|
|
2504
|
+
this.change.emit(interactedItem);
|
|
2501
2505
|
}
|
|
2506
|
+
this.interact.emit(interactedItem);
|
|
2502
2507
|
};
|
|
2503
2508
|
this.handleMultiSelect = (index) => {
|
|
2504
2509
|
const listItems = this.items.filter(this.isListItem);
|
|
@@ -2519,6 +2524,7 @@ const List = class {
|
|
|
2519
2524
|
return Object.assign(Object.assign({}, item), { selected: true });
|
|
2520
2525
|
});
|
|
2521
2526
|
this.change.emit(selectedItems);
|
|
2527
|
+
this.interact.emit(Object.assign({}, selectedItems[index]));
|
|
2522
2528
|
};
|
|
2523
2529
|
this.isListItem = (item) => {
|
|
2524
2530
|
return !('separator' in item);
|
|
@@ -4635,6 +4641,7 @@ const MenuList = class {
|
|
|
4635
4641
|
constructor(hostRef) {
|
|
4636
4642
|
registerInstance(this, hostRef);
|
|
4637
4643
|
this.select = createEvent(this, "select", 7);
|
|
4644
|
+
this.interact = createEvent(this, "interact", 7);
|
|
4638
4645
|
this.MenuListRenderer = new MenuListRenderer();
|
|
4639
4646
|
this.setup = () => {
|
|
4640
4647
|
this.setupMenu();
|
|
@@ -4677,12 +4684,16 @@ const MenuList = class {
|
|
|
4677
4684
|
const selectedItem = MenuItems.find((item) => {
|
|
4678
4685
|
return !!item.selected;
|
|
4679
4686
|
});
|
|
4687
|
+
let interactedItem;
|
|
4680
4688
|
if (selectedItem) {
|
|
4681
|
-
|
|
4689
|
+
interactedItem = Object.assign(Object.assign({}, selectedItem), { selected: false });
|
|
4690
|
+
this.select.emit(interactedItem);
|
|
4682
4691
|
}
|
|
4683
4692
|
if (MenuItems[index] !== selectedItem) {
|
|
4684
|
-
|
|
4693
|
+
interactedItem = Object.assign(Object.assign({}, MenuItems[index]), { selected: false });
|
|
4694
|
+
this.select.emit(interactedItem);
|
|
4685
4695
|
}
|
|
4696
|
+
this.interact.emit(interactedItem);
|
|
4686
4697
|
};
|
|
4687
4698
|
this.isMenuItem = (item) => {
|
|
4688
4699
|
return !('separator' in item);
|