@limetech/lime-elements 38.15.0 → 38.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/lime-elements.cjs.js +1 -1
  3. package/dist/cjs/limel-breadcrumbs_8.cjs.entry.js +3 -3
  4. package/dist/cjs/limel-breadcrumbs_8.cjs.entry.js.map +1 -1
  5. package/dist/cjs/limel-info-tile.cjs.entry.js +17 -8
  6. package/dist/cjs/limel-info-tile.cjs.entry.js.map +1 -1
  7. package/dist/cjs/limel-picker.cjs.entry.js +1 -1
  8. package/dist/cjs/limel-picker.cjs.entry.js.map +1 -1
  9. package/dist/cjs/limel-select.cjs.entry.js +1 -1
  10. package/dist/cjs/limel-select.cjs.entry.js.map +1 -1
  11. package/dist/cjs/loader.cjs.js +1 -1
  12. package/dist/collection/components/info-tile/info-tile.css +25 -6
  13. package/dist/collection/components/info-tile/info-tile.js +22 -7
  14. package/dist/collection/components/info-tile/info-tile.js.map +1 -1
  15. package/dist/collection/components/input-field/input-field.js +1 -1
  16. package/dist/collection/components/input-field/input-field.js.map +1 -1
  17. package/dist/collection/components/menu/menu.js +1 -1
  18. package/dist/collection/components/menu/menu.js.map +1 -1
  19. package/dist/collection/components/menu-surface/menu-surface.css +3 -3
  20. package/dist/collection/components/picker/picker.js +1 -1
  21. package/dist/collection/components/picker/picker.js.map +1 -1
  22. package/dist/collection/components/select/select.template.js +1 -1
  23. package/dist/collection/components/select/select.template.js.map +1 -1
  24. package/dist/esm/lime-elements.js +1 -1
  25. package/dist/esm/limel-breadcrumbs_8.entry.js +3 -3
  26. package/dist/esm/limel-breadcrumbs_8.entry.js.map +1 -1
  27. package/dist/esm/limel-info-tile.entry.js +17 -8
  28. package/dist/esm/limel-info-tile.entry.js.map +1 -1
  29. package/dist/esm/limel-picker.entry.js +1 -1
  30. package/dist/esm/limel-picker.entry.js.map +1 -1
  31. package/dist/esm/limel-select.entry.js +1 -1
  32. package/dist/esm/limel-select.entry.js.map +1 -1
  33. package/dist/esm/loader.js +1 -1
  34. package/dist/lime-elements/lime-elements.esm.js +1 -1
  35. package/dist/lime-elements/lime-elements.esm.js.map +1 -1
  36. package/dist/lime-elements/{p-8e135e1a.entry.js → p-06138e7c.entry.js} +2 -2
  37. package/dist/lime-elements/{p-8e135e1a.entry.js.map → p-06138e7c.entry.js.map} +1 -1
  38. package/dist/lime-elements/p-19e93fb0.entry.js +2 -0
  39. package/dist/lime-elements/p-19e93fb0.entry.js.map +1 -0
  40. package/dist/lime-elements/{p-ee24ef88.entry.js → p-c0d37aa9.entry.js} +2 -2
  41. package/dist/lime-elements/{p-ee24ef88.entry.js.map → p-c0d37aa9.entry.js.map} +1 -1
  42. package/dist/lime-elements/{p-0aff1e5d.entry.js → p-fbc07821.entry.js} +4 -4
  43. package/dist/lime-elements/{p-0aff1e5d.entry.js.map → p-fbc07821.entry.js.map} +1 -1
  44. package/dist/types/components/info-tile/info-tile.d.ts +6 -0
  45. package/dist/types/components.d.ts +4 -0
  46. package/package.json +1 -1
  47. package/dist/lime-elements/p-fc078f90.entry.js +0 -2
  48. package/dist/lime-elements/p-fc078f90.entry.js.map +0 -1
package/dist/esm/limel-info-tile.entry.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, h, H as Host, g as getElement } from './index-2714248e.js';
2
2
  import { g as getMouseEventHandlers } from './3d-tilt-hover-effect-05648b3c.js';
3
3
 
4
- const infoTileCss = "@charset \"UTF-8\";\n/**\n * Note! This file is exported to `dist/scss/` in the published\n * node module, for consumer projects to import.\n * That means this file cannot import from any file that isn't\n * also exported, keeping the same relative path.\n *\n * Or, just don't import anything, that works too.\n */\n/**\n* This can be used on a trigger element that opens a dropdown menu or a popover.\n*/\n/**\n * This mixin will mask out the content that is close to\n * the edges of a scrollable area.\n * - If the scrollable content has `overflow-y`, use `vertically`\n * as an argument for `$direction`.\n - If the scrollable content has `overflow-x`, use `horizontally`\n * as an argument for `$direction`.\n *\n * For the visual effect to work smoothly, we need to make sure that\n * the size of the fade-out edge effect is the same as the\n * internal paddings of the scrollable area. Otherwise, content of a\n * scrollable area that does not have a padding will fade out before\n * any scrolling has been done.\n * This is why this mixin already adds paddings, which automatically\n * default to the size of the fade-out effect.\n * This size defaults to `1rem`, but to override the size use\n * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`\n * when `vertically` argument is set, and use\n * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`\n * when `horizontally` argument is set.\n * Of course you can also programmatically increase and decrease the\n * size of these variables for each edge, based on the amount of\n * scrolling that has been done by the user. In this case, make sure\n * to add a custom padding where the mixin is used, to override\n * the paddings that are automatically added by the mixin in the\n * compiled CSS code.\n */\n/**\n* This mixin will add an animated underline to the bottom of an `a` elements.\n* Note that you may need to add `all: unset;` –depending on your use case–\n* before using this mixin.\n*/\n/**\n* This mixin creates a cross-browser font stack.\n* - `sans-serif` can be used for the UI of the components.\n* - `monospace` can be used for code.\n*\n* ⚠️ If we change the font stacks, we need to update\n* 1. the consumer documentation in `README.md`, and\n* 2. the CSS variables of `--kompendium-example-font-family`\n* in the `<style>` tag of `index.html`.\n*/\n/**\n* This mixin is a hack, using old CSS syntax\n* to enable you to truncate a piece of text,\n* after a certain number of lines.\n*/\n/**\n * The breakpoints below are used to create responsive designs\n * in Lime's products. Therefore, they are here to get distributed\n * to all components in other private repos, which rely on this `mixins`\n * file, to create consistent styles.\n *\n * :::important\n * In very rare cases you should used media queries!\n * Nowadays, there are many better ways of achieving responsive design\n * without media queries. For example, using CSS Grid, Flexbox, and their features.\n * :::\n */\n/**\n * Media query mixins for responsive design based on screen width.\n * Note that these mixins do not detect the device type!\n */\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n --badge-text-color: var(\n --info-tile-badge-text-color,\n rgb(var(--color-white))\n );\n --badge-background-color: var(\n --info-tile-badge-background-color,\n rgb(var(--color-red-default))\n );\n --circular-progress-text-color: var(\n --info-tile-progress-text-color,\n var(--info-tile-text-color)\n );\n --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n --circular-progress-background-color: var(\n --info-tile-progress-background-color,\n var(--info-tile-background-color)\n );\n --label-min-size: 0.75rem;\n --label-preferred-size: 6cqw;\n --label-max-size: 1rem;\n --value-min-size: 1rem;\n --value-preferred-size: 20cqw;\n --value-max-size: 4rem;\n --suffix-prefix-min-size: 0.75rem;\n --suffix-prefix-preferred-size: 8cqw;\n --suffix-prefix-max-size: 1.5rem;\n --icon-min-size: 2rem;\n --icon-preferred-size: 60cqh;\n --icon-max-size: calc(100cqw - 0.5rem);\n container-type: size;\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n}\n:host(limel-info-tile) * {\n box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\na {\n all: unset;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n height: 100%;\n width: 100%;\n flex-grow: 1;\n padding: 0.25rem 1rem 0.5rem 1rem;\n border-radius: var(--info-tile-border-radius, 1rem);\n background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\n\n.icon {\n z-index: 1;\n position: absolute;\n top: 0.5rem;\n right: 0.75rem;\n padding: 0.25rem;\n aspect-ratio: 1/1;\n color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n border-radius: 0;\n height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n .icon {\n width: max(10%, 3rem);\n }\n}\n.has-circular-progress .icon {\n top: unset;\n bottom: 0.5rem;\n --icon-min-size: 1.5rem;\n --icon-preferred-size: 20cqh;\n}\n\n.progress {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n --circular-progress-size: min(\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n}\n@supports not (container-type: size) {\n .progress {\n --circular-progress-size: initial;\n }\n}\n\n.label {\n z-index: 1;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n line-height: 1.2;\n font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n .label {\n font-size: 0.875rem;\n }\n}\n\nlimel-badge {\n position: absolute;\n top: -0.25rem;\n right: -0.25rem;\n}\n\nlimel-linear-progress {\n --lime-primary-color: var(--info-tile-text-color);\n position: absolute;\n inset: auto 0 0 0;\n}\n\n.value-group {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n display: flex;\n}\n\n.prefix,\n.suffix {\n font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n opacity: 0.7;\n}\n@supports not (container-type: size) {\n .prefix,\n .suffix {\n font-size: 0.75rem;\n }\n}\n\n.prefix {\n align-self: flex-start;\n line-height: normal;\n transform: translateY(40%);\n}\n\n.value {\n transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n transform-origin: left;\n transform: translate3d(0, 0, 0) scale(1);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: bold;\n line-height: normal;\n font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n .value {\n font-size: 1.5rem;\n }\n}\n:host(limel-info-tile[loading]) .value {\n opacity: 0.3;\n transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n .progress {\n top: 0.25rem;\n right: 0.25rem;\n }\n a {\n padding: 0.375rem;\n gap: 0.125rem;\n }\n}\n@container (width < 18.75rem) {\n .progress {\n top: 0.5rem;\n right: 0.5rem;\n }\n .icon {\n top: 0.25rem;\n right: 0.5rem;\n }\n .has-circular-progress .icon {\n right: 0.25rem;\n bottom: 0.25rem;\n }\n}\n@container (width < 40.5rem) {\n .value {\n --value-preferred-size: 13cqw;\n }\n .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n --value-preferred-size: 20cqw;\n }\n .value.ch-5 {\n --value-preferred-size: 18cqw;\n }\n .value.ch-6 {\n --value-preferred-size: 17cqw;\n }\n .value.ch-7 {\n --value-preferred-size: 16cqw;\n }\n .value.ch-8 {\n --value-preferred-size: 15cqw;\n }\n .value.ch-9 {\n --value-preferred-size: 14cqw;\n }\n}\n@container (height > 8rem) {\n a {\n padding-top: 0.75rem;\n padding-bottom: 1rem;\n }\n}\n@container (height < 8rem) and (width > 8rem) {\n .value {\n --value-preferred-size: 32cqh !important;\n }\n .suffix,\n .prefix {\n --suffix-prefix-preferred-size: 16cqh !important;\n }\n}\n@container (height > 18.75rem) {\n .progress,\n .icon {\n position: relative;\n top: unset;\n right: unset;\n }\n a {\n align-items: center;\n justify-content: center;\n }\n .label {\n text-align: center;\n }\n .has-circular-progress .icon {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n --icon-max-size: 3rem;\n }\n}\nlimel-3d-hover-effect-glow {\n border-radius: var(--info-tile-border-radius, 1rem);\n}\n\n:host(limel-info-tile) {\n isolation: isolate;\n transform-style: preserve-3d;\n perspective: 1000px;\n}\n@media (prefers-reduced-motion) {\n :host(limel-info-tile) {\n perspective: 2000px;\n }\n}\n\na {\n position: relative;\n transition-duration: 0.8s;\n transition-property: transform, box-shadow, background-color;\n transition-timing-function: ease-out;\n transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n}\na:focus {\n outline: none;\n}\na:hover, a:focus, a:focus-visible, a:focus-within {\n will-change: background-color, box-shadow, transform;\n}\na:hover, a:focus, a:focus-visible, a:active {\n transition-duration: 0.2s;\n}\na:hover, a:focus-visible {\n box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na:hover {\n transform: scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d));\n}\na:focus-visible {\n outline: none;\n transform: scale3d(1.01, 1.01, 1.01);\n}\na:hover limel-3d-hover-effect-glow {\n --limel-3d-hover-effect-glow-opacity: 0.5;\n}\n@media (prefers-reduced-motion) {\n a:hover limel-3d-hover-effect-glow {\n --limel-3d-hover-effect-glow-opacity: 0.2;\n }\n}\na.is-clickable {\n cursor: pointer;\n box-shadow: var(--button-shadow-normal);\n}\na.is-clickable:hover, a.is-clickable:focus-visible {\n box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na.is-clickable:active {\n transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n box-shadow: var(--button-shadow-pressed);\n}\na.is-clickable:focus-visible {\n box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);\n}\na.is-clickable:focus-visible:active {\n box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);\n}";
4
+ const infoTileCss = "@charset \"UTF-8\";\n/**\n * Note! This file is exported to `dist/scss/` in the published\n * node module, for consumer projects to import.\n * That means this file cannot import from any file that isn't\n * also exported, keeping the same relative path.\n *\n * Or, just don't import anything, that works too.\n */\n/**\n* This can be used on a trigger element that opens a dropdown menu or a popover.\n*/\n/**\n * This mixin will mask out the content that is close to\n * the edges of a scrollable area.\n * - If the scrollable content has `overflow-y`, use `vertically`\n * as an argument for `$direction`.\n - If the scrollable content has `overflow-x`, use `horizontally`\n * as an argument for `$direction`.\n *\n * For the visual effect to work smoothly, we need to make sure that\n * the size of the fade-out edge effect is the same as the\n * internal paddings of the scrollable area. Otherwise, content of a\n * scrollable area that does not have a padding will fade out before\n * any scrolling has been done.\n * This is why this mixin already adds paddings, which automatically\n * default to the size of the fade-out effect.\n * This size defaults to `1rem`, but to override the size use\n * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`\n * when `vertically` argument is set, and use\n * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`\n * when `horizontally` argument is set.\n * Of course you can also programmatically increase and decrease the\n * size of these variables for each edge, based on the amount of\n * scrolling that has been done by the user. In this case, make sure\n * to add a custom padding where the mixin is used, to override\n * the paddings that are automatically added by the mixin in the\n * compiled CSS code.\n */\n/**\n* This mixin will add an animated underline to the bottom of an `a` elements.\n* Note that you may need to add `all: unset;` –depending on your use case–\n* before using this mixin.\n*/\n/**\n* This mixin creates a cross-browser font stack.\n* - `sans-serif` can be used for the UI of the components.\n* - `monospace` can be used for code.\n*\n* ⚠️ If we change the font stacks, we need to update\n* 1. the consumer documentation in `README.md`, and\n* 2. the CSS variables of `--kompendium-example-font-family`\n* in the `<style>` tag of `index.html`.\n*/\n/**\n* This mixin is a hack, using old CSS syntax\n* to enable you to truncate a piece of text,\n* after a certain number of lines.\n*/\n/**\n * The breakpoints below are used to create responsive designs\n * in Lime's products. Therefore, they are here to get distributed\n * to all components in other private repos, which rely on this `mixins`\n * file, to create consistent styles.\n *\n * :::important\n * In very rare cases you should used media queries!\n * Nowadays, there are many better ways of achieving responsive design\n * without media queries. For example, using CSS Grid, Flexbox, and their features.\n * :::\n */\n/**\n * Media query mixins for responsive design based on screen width.\n * Note that these mixins do not detect the device type!\n */\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n --badge-text-color: var(\n --info-tile-badge-text-color,\n rgb(var(--color-white))\n );\n --badge-background-color: var(\n --info-tile-badge-background-color,\n rgb(var(--color-red-default))\n );\n --circular-progress-text-color: var(\n --info-tile-progress-text-color,\n var(--info-tile-text-color)\n );\n --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n --circular-progress-background-color: var(\n --info-tile-progress-background-color,\n var(--info-tile-background-color)\n );\n --label-min-size: 0.75rem;\n --label-preferred-size: 6cqw;\n --label-max-size: 1rem;\n --value-min-size: 1rem;\n --value-preferred-size: 20cqw;\n --value-max-size: 4rem;\n --suffix-prefix-min-size: 0.75rem;\n --suffix-prefix-preferred-size: 8cqw;\n --suffix-prefix-max-size: 1.5rem;\n --icon-min-size: 2rem;\n --icon-preferred-size: 60cqh;\n --icon-max-size: calc(100cqw - 0.5rem);\n container-type: size;\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n}\n:host(limel-info-tile) * {\n box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\na {\n all: unset;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n height: 100%;\n width: 100%;\n flex-grow: 1;\n padding: 0.25rem 1rem 0.5rem 1rem;\n border-radius: var(--info-tile-border-radius, 1rem);\n background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\n\n:host ::slotted([slot=primary]) {\n width: 100%;\n height: 100%;\n}\n\n.icon {\n z-index: 1;\n position: absolute;\n top: 0.5rem;\n right: 0.75rem;\n padding: 0.25rem;\n aspect-ratio: 1/1;\n color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n border-radius: 0;\n height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n .icon {\n width: max(10%, 3rem);\n }\n}\n:host(.has-primary-slot-content) .icon, a:has(limel-circular-progress) .icon {\n top: unset;\n bottom: 0.5rem;\n --icon-min-size: 1.5rem;\n --icon-preferred-size: 20cqh;\n}\n\nslot[name=primary] {\n display: block;\n aspect-ratio: 1;\n width: min(var(--icon-preferred-size), var(--icon-max-size));\n}\n\n.progress,\nslot[name=primary] {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n}\n\n.progress {\n --circular-progress-size: min(\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n}\n@supports not (container-type: size) {\n .progress {\n --circular-progress-size: initial;\n }\n}\n\n.label {\n z-index: 1;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n line-height: 1.2;\n font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n .label {\n font-size: 0.875rem;\n }\n}\n\nlimel-badge {\n position: absolute;\n top: -0.25rem;\n right: -0.25rem;\n}\n\nlimel-linear-progress {\n --lime-primary-color: var(--info-tile-text-color);\n position: absolute;\n inset: auto 0 0 0;\n}\n\n.value-group {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n display: flex;\n}\n\n.prefix,\n.suffix {\n font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n opacity: 0.7;\n}\n@supports not (container-type: size) {\n .prefix,\n .suffix {\n font-size: 0.75rem;\n }\n}\n\n.prefix {\n align-self: flex-start;\n line-height: normal;\n transform: translateY(40%);\n}\n\n.value {\n transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n transform-origin: left;\n transform: translate3d(0, 0, 0) scale(1);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: bold;\n line-height: normal;\n font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n .value {\n font-size: 1.5rem;\n }\n}\n:host(limel-info-tile[loading]) .value {\n opacity: 0.3;\n transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n .progress,\n slot[name=primary] {\n top: 0.25rem;\n right: 0.25rem;\n }\n a {\n padding: 0.375rem;\n gap: 0.125rem;\n }\n}\n@container (width < 18.75rem) {\n .progress,\n slot[name=primary] {\n top: 0.5rem;\n right: 0.5rem;\n }\n .icon {\n top: 0.25rem;\n right: 0.5rem;\n }\n :host(.has-primary-slot-content) .icon, a:has(limel-circular-progress) .icon {\n right: 0.25rem;\n bottom: 0.25rem;\n }\n}\n@container (width < 40.5rem) {\n .value {\n --value-preferred-size: 13cqw;\n }\n .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n --value-preferred-size: 20cqw;\n }\n .value.ch-5 {\n --value-preferred-size: 18cqw;\n }\n .value.ch-6 {\n --value-preferred-size: 17cqw;\n }\n .value.ch-7 {\n --value-preferred-size: 16cqw;\n }\n .value.ch-8 {\n --value-preferred-size: 15cqw;\n }\n .value.ch-9 {\n --value-preferred-size: 14cqw;\n }\n}\n@container (height > 8rem) {\n a {\n padding-top: 0.75rem;\n padding-bottom: 1rem;\n }\n}\n@container (height < 8rem) and (width > 8rem) {\n .value {\n --value-preferred-size: 32cqh !important;\n }\n .suffix,\n .prefix {\n --suffix-prefix-preferred-size: 16cqh !important;\n }\n}\n@container (height > 18.75rem) {\n .progress,\n slot[name=primary],\n .icon {\n position: relative;\n top: unset;\n right: unset;\n }\n a {\n align-items: center;\n justify-content: center;\n }\n .label {\n text-align: center;\n }\n :host(.has-primary-slot-content) .icon,\n a:has(limel-circular-progress) .icon {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n --icon-max-size: 3rem;\n }\n}\nlimel-3d-hover-effect-glow {\n border-radius: var(--info-tile-border-radius, 1rem);\n}\n\n:host(limel-info-tile) {\n isolation: isolate;\n transform-style: preserve-3d;\n perspective: 1000px;\n}\n@media (prefers-reduced-motion) {\n :host(limel-info-tile) {\n perspective: 2000px;\n }\n}\n\na {\n position: relative;\n transition-duration: 0.8s;\n transition-property: transform, box-shadow, background-color;\n transition-timing-function: ease-out;\n transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n}\na:focus {\n outline: none;\n}\na:hover, a:focus, a:focus-visible, a:focus-within {\n will-change: background-color, box-shadow, transform;\n}\na:hover, a:focus, a:focus-visible, a:active {\n transition-duration: 0.2s;\n}\na:hover, a:focus-visible {\n box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na:hover {\n transform: scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d));\n}\na:focus-visible {\n outline: none;\n transform: scale3d(1.01, 1.01, 1.01);\n}\na:hover limel-3d-hover-effect-glow {\n --limel-3d-hover-effect-glow-opacity: 0.5;\n}\n@media (prefers-reduced-motion) {\n a:hover limel-3d-hover-effect-glow {\n --limel-3d-hover-effect-glow-opacity: 0.2;\n }\n}\na.is-clickable {\n cursor: pointer;\n box-shadow: var(--button-shadow-normal);\n}\na.is-clickable:hover, a.is-clickable:focus-visible {\n box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na.is-clickable:active {\n transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n box-shadow: var(--button-shadow-pressed);\n}\na.is-clickable:focus-visible {\n box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);\n}\na.is-clickable:focus-visible:active {\n box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);\n}";
5
5
 
6
6
  const InfoTile = class {
7
7
  constructor(hostRef) {
@@ -34,11 +34,20 @@ const InfoTile = class {
34
34
  return h("limel-icon", { class: "icon", name: this.icon });
35
35
  }
36
36
  };
37
+ this.updateHasPrimarySlotContent = (e) => {
38
+ var _a;
39
+ const slot = (_a = e === null || e === void 0 ? void 0 : e.target) !== null && _a !== void 0 ? _a : this.host.shadowRoot.querySelector('slot[name="primary"]');
40
+ this.hasPrimarySlot = slot && slot.assignedElements().length > 0;
41
+ };
37
42
  this.renderProgress = () => {
38
43
  var _a, _b;
39
- if (((_a = this.progress) === null || _a === void 0 ? void 0 : _a.value) || ((_b = this.progress) === null || _b === void 0 ? void 0 : _b.value) === 0) {
40
- return (h("limel-circular-progress", { class: "progress", prefix: this.progress.prefix, value: this.progress.value, suffix: this.progress.suffix, maxValue: this.progress.maxValue, displayPercentageColors: this.progress.displayPercentageColors }));
44
+ if (this.hasPrimarySlot) {
45
+ return;
46
+ }
47
+ if (!((_a = this.progress) === null || _a === void 0 ? void 0 : _a.value) && ((_b = this.progress) === null || _b === void 0 ? void 0 : _b.value) !== 0) {
48
+ return;
41
49
  }
50
+ return (h("limel-circular-progress", { class: "progress", prefix: this.progress.prefix, value: this.progress.value, suffix: this.progress.suffix, maxValue: this.progress.maxValue, displayPercentageColors: this.progress.displayPercentageColors }));
42
51
  };
43
52
  this.renderLabel = () => {
44
53
  if (this.label) {
@@ -65,14 +74,16 @@ const InfoTile = class {
65
74
  this.loading = false;
66
75
  this.link = undefined;
67
76
  this.progress = undefined;
77
+ this.hasPrimarySlot = false;
68
78
  }
69
79
  componentWillLoad() {
70
80
  const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
71
81
  this.handleMouseEnter = handleMouseEnter;
72
82
  this.handleMouseLeave = handleMouseLeave;
83
+ this.updateHasPrimarySlotContent();
73
84
  }
74
85
  render() {
75
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
86
+ var _a, _b, _c, _d, _e, _f, _g, _h;
76
87
  const extendedAriaLabel = this.checkProps(this === null || this === void 0 ? void 0 : this.prefix) +
77
88
  this.value +
78
89
  ' ' +
@@ -84,11 +95,9 @@ const InfoTile = class {
84
95
  this.checkProps((_c = this === null || this === void 0 ? void 0 : this.progress) === null || _c === void 0 ? void 0 : _c.suffix) +
85
96
  this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
86
97
  const link = !this.disabled ? (_e = this.link) === null || _e === void 0 ? void 0 : _e.href : '#';
87
- return (h(Host, { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { title: (_f = this.link) === null || _f === void 0 ? void 0 : _f.title, href: link, target: (_g = this.link) === null || _g === void 0 ? void 0 : _g.target, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
98
+ return (h(Host, { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { title: (_f = this.link) === null || _f === void 0 ? void 0 : _f.title, href: link, target: (_g = this.link) === null || _g === void 0 ? void 0 : _g.target, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
88
99
  'is-clickable': !!((_h = this.link) === null || _h === void 0 ? void 0 : _h.href) && !this.disabled,
89
- 'has-circular-progress': !!((_j = this.progress) === null || _j === void 0 ? void 0 : _j.value) ||
90
- ((_k = this.progress) === null || _k === void 0 ? void 0 : _k.value) === 0,
91
- } }, this.renderIcon(), this.renderProgress(), h("div", { class: "value-group" }, this.renderPrefix(), h("div", { class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", null)), this.renderNotification()));
100
+ } }, this.renderIcon(), this.renderProgress(), h("slot", { name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { class: "value-group" }, this.renderPrefix(), h("div", { class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", null)), this.renderNotification()));
92
101
  }
93
102
  checkProps(propValue) {
94
103
  return !propValue ? '' : propValue + ' ';
package/dist/esm/limel-info-tile.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"limel-info-tile.entry.js","mappings":"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","names":[],"sources":["./src/components/info-tile/info-tile.scss?tag=limel-info-tile&encapsulation=shadow","./src/components/info-tile/info-tile.tsx"],"sourcesContent":["/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n\n@use '../../style/mixins';\n\n:host(limel-info-tile) {\n --badge-text-color: var(\n --info-tile-badge-text-color,\n rgb(var(--color-white))\n );\n --badge-background-color: var(\n --info-tile-badge-background-color,\n rgb(var(--color-red-default))\n );\n\n --circular-progress-text-color: var(\n --info-tile-progress-text-color,\n var(--info-tile-text-color)\n );\n --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n --circular-progress-background-color: var(\n --info-tile-progress-background-color,\n var(--info-tile-background-color)\n );\n\n --label-min-size: 0.75rem;\n --label-preferred-size: 6cqw;\n --label-max-size: 1rem;\n\n --value-min-size: 1rem;\n --value-preferred-size: 20cqw;\n --value-max-size: 4rem;\n\n --suffix-prefix-min-size: 0.75rem;\n --suffix-prefix-preferred-size: 8cqw;\n --suffix-prefix-max-size: 1.5rem;\n\n --icon-min-size: 2rem;\n --icon-preferred-size: 60cqh;\n --icon-max-size: calc(100cqw - 0.5rem);\n\n container-type: size;\n position: relative;\n display: flex;\n\n width: 100%;\n height: 100%;\n\n * {\n box-sizing: border-box;\n }\n}\n\n:host(limel-info-tile[disabled]) {\n a {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}\n\na {\n all: unset;\n overflow: hidden;\n\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n\n height: 100%;\n width: 100%;\n flex-grow: 1;\n\n padding: 0.25rem 1rem 0.5rem 1rem;\n border-radius: var(--info-tile-border-radius, 1rem);\n background-color: var(\n --info-tile-background-color,\n var(--lime-elevated-surface-background-color)\n );\n}\n\n.icon {\n z-index: 1;\n position: absolute;\n top: 0.5rem;\n right: 0.75rem;\n padding: 0.25rem;\n\n aspect-ratio: 1/1;\n\n color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n\n border-radius: 0;\n height: clamp(\n var(--icon-min-size),\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n\n @supports not (container-type: size) {\n width: max(10%, 3rem);\n }\n\n .has-circular-progress & {\n top: unset;\n bottom: 0.5rem;\n --icon-min-size: 1.5rem;\n --icon-preferred-size: 20cqh;\n }\n}\n\n.progress {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n\n --circular-progress-size: min(\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n @supports not (container-type: size) {\n --circular-progress-size: initial;\n }\n}\n\n.label {\n z-index: 1;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n\n line-height: 1.2;\n font-size: clamp(\n var(--label-min-size),\n var(--label-preferred-size),\n var(--label-max-size)\n );\n @supports not (container-type: size) {\n font-size: 0.875rem;\n }\n}\n\nlimel-badge {\n position: absolute;\n top: -0.25rem;\n right: -0.25rem;\n}\n\nlimel-linear-progress {\n --lime-primary-color: var(--info-tile-text-color);\n position: absolute;\n inset: auto 0 0 0;\n}\n\n.value-group {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n text-shadow:\n 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))),\n 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n display: flex;\n}\n\n.prefix,\n.suffix {\n font-size: clamp(\n var(--suffix-prefix-min-size),\n var(--suffix-prefix-preferred-size),\n var(--suffix-prefix-max-size)\n );\n opacity: 0.7;\n\n @supports not (container-type: size) {\n font-size: 0.75rem;\n }\n}\n\n.prefix {\n align-self: flex-start;\n line-height: normal;\n transform: translateY(40%);\n}\n\n.value {\n transition:\n opacity 0.2s ease,\n transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n transform-origin: left;\n transform: translate3d(0, 0, 0) scale(1);\n\n @include mixins.truncate-text;\n font-weight: bold;\n line-height: normal;\n\n font-size: clamp(\n var(--value-min-size),\n var(--value-preferred-size),\n var(--value-max-size)\n );\n @supports not (container-type: size) {\n font-size: 1.5rem;\n }\n\n :host(limel-info-tile[loading]) & {\n opacity: 0.3;\n transform: translate3d(0, 0, 0) scale(0.9);\n }\n}\n\n.suffix {\n transform: translateY(10%);\n}\n\n$xs: 8rem; //128px:\n$s: 18.75rem; //300px\n$m: 40.5rem; //648px\n$l: 62.5rem; //1000px\n\n@container (width < #{$xs}) {\n .progress {\n top: 0.25rem;\n right: 0.25rem;\n }\n a {\n padding: 0.375rem;\n gap: 0.125rem;\n }\n}\n\n@container (width < #{$s}) {\n .progress {\n top: 0.5rem;\n right: 0.5rem;\n }\n .icon {\n top: 0.25rem;\n right: 0.5rem;\n .has-circular-progress & {\n right: 0.25rem;\n bottom: 0.25rem;\n }\n }\n}\n\n@container (width < #{$m}) {\n .value {\n &.ch-1,\n &.ch-2,\n &.ch-3,\n &.ch-4 {\n --value-preferred-size: 20cqw;\n }\n &.ch-5 {\n --value-preferred-size: 18cqw;\n }\n &.ch-6 {\n --value-preferred-size: 17cqw;\n }\n &.ch-7 {\n --value-preferred-size: 16cqw;\n }\n &.ch-8 {\n --value-preferred-size: 15cqw;\n }\n &.ch-9 {\n --value-preferred-size: 14cqw;\n }\n --value-preferred-size: 13cqw;\n }\n}\n\n@container (height > #{$xs}) {\n a {\n padding-top: 0.75rem;\n padding-bottom: 1rem;\n }\n}\n\n@container (height < #{$xs}) and (width > #{$xs}) {\n .value {\n --value-preferred-size: 32cqh !important;\n }\n .suffix,\n .prefix {\n --suffix-prefix-preferred-size: 16cqh !important;\n }\n}\n\n@container (height > #{$s}) {\n .progress,\n .icon {\n position: relative;\n top: unset;\n right: unset;\n }\n a {\n align-items: center;\n justify-content: center;\n }\n .label {\n text-align: center;\n // -webkit-line-clamp: 3;\n }\n .has-circular-progress {\n .icon {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n --icon-max-size: 3rem;\n }\n }\n}\n\n// The 3D effect\nlimel-3d-hover-effect-glow {\n border-radius: var(--info-tile-border-radius, 1rem);\n}\n\n:host(limel-info-tile) {\n @include mixins.parent-of-the-3d-element;\n}\n\na {\n @include mixins.the-3d-element;\n\n &.is-clickable {\n @include mixins.the-3d-element--clickable;\n }\n}\n","import { Component, Prop, h, Element, Host } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n *\n * If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n *\n * @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-styling\n */\n@Component({\n tag: 'limel-info-tile',\n shadow: true,\n styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n /**\n * A piece of text or number that is the main piece of information\n * which the component is intended to visualize.\n */\n @Prop({ reflect: true })\n public value: number | string;\n\n /**\n * Name of icon for the info tile.\n */\n @Prop()\n public icon?: string;\n\n /**\n * The text to show below the info tile. Long labels will be truncated.\n */\n @Prop({ reflect: true })\n public label?: string = null;\n\n /**\n * A string of text that is visually placed before the value.\n */\n @Prop({ reflect: true })\n public prefix?: string;\n\n /**\n * A string of text that is visually placed after the value.\n */\n @Prop({ reflect: true })\n public suffix?: string;\n\n /**\n * Set to `true` if info tile is disabled.\n */\n @Prop({ reflect: true })\n public disabled? = false;\n\n /**\n * If supplied, the info tile will display a notification badge.\n */\n @Prop({ reflect: true })\n public badge?: number | string;\n\n /**\n * Set to `true` to put the component in the `loading` state.\n * This does _not_ disable the link. To do so, the\n * `disabled` property should be set to `true` as well.\n */\n @Prop({ reflect: true })\n public loading? = false;\n\n /**\n * If supplied, the info tile will be a clickable link.\n *\n * Supplying a value also adds an elevated effect using a shadow,\n * as well as `cursor: pointer`, which appears on hover.\n * While we strongly recommend supplying a link whenever the\n * component should act as a link, if this is not possible, and\n * you need to provide interaction through a click handler,\n * you can still get the correct styling by supplying a `Link`\n * object with the `href` property set to `'#'`.\n */\n @Prop()\n public link?: Link;\n\n /**\n * Properties of the optional circular progress bar.\n *\n * Defaults:\n * - `maxValue`: 100\n * - `suffix`: %\n * - `displayPercentageColors`: false\n *\n * Colors change with intervals of 10 %.\n */\n @Prop()\n public progress?: InfoTileProgress;\n\n @Element()\n private host: HTMLElement;\n\n private handleMouseEnter: () => void;\n private handleMouseLeave: () => void;\n\n public componentWillLoad() {\n const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n this.host,\n );\n this.handleMouseEnter = handleMouseEnter;\n this.handleMouseLeave = handleMouseLeave;\n }\n\n public render() {\n const extendedAriaLabel =\n this.checkProps(this?.prefix) +\n this.value +\n ' ' +\n this.checkProps(this?.suffix) +\n this.checkProps(this?.label) +\n '. ' +\n this.checkProps(this?.progress?.prefix) +\n this.checkProps(this?.progress?.value) +\n this.checkProps(this?.progress?.suffix) +\n this.checkProps(this?.link?.title);\n\n const link = !this.disabled ? this.link?.href : '#';\n\n return (\n <Host\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <a\n title={this.link?.title}\n href={link}\n target={this.link?.target}\n tabindex=\"0\"\n aria-label={extendedAriaLabel}\n aria-disabled={this.disabled}\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n class={{\n 'is-clickable': !!this.link?.href && !this.disabled,\n 'has-circular-progress':\n !!this.progress?.value ||\n this.progress?.value === 0,\n }}\n >\n {this.renderIcon()}\n {this.renderProgress()}\n <div class=\"value-group\">\n {this.renderPrefix()}\n <div class=\"value-and-suffix\">\n {this.renderValue()}\n {this.renderSuffix()}\n </div>\n {this.renderSpinner()}\n </div>\n {this.renderLabel()}\n <limel-3d-hover-effect-glow />\n </a>\n {this.renderNotification()}\n </Host>\n );\n }\n\n private checkProps(propValue) {\n return !propValue ? '' : propValue + ' ';\n }\n\n private renderPrefix = () => {\n if (this.prefix) {\n return <span class=\"prefix\">{this.prefix}</span>;\n }\n };\n\n private renderValue = () => {\n const characterCount = (this.value ?? '').toString().length;\n\n if (!this.value && this.loading) {\n return <span class=\"value\">···</span>;\n }\n\n if (this.value) {\n return (\n <span\n class={{\n value: true,\n [`ch-${characterCount}`]: true,\n }}\n >\n {this.value}\n </span>\n );\n }\n };\n\n private renderSuffix = () => {\n if (this.suffix) {\n return <span class=\"suffix\">{this.suffix}</span>;\n }\n };\n\n private renderIcon = () => {\n if (this.icon) {\n return <limel-icon class=\"icon\" name={this.icon} />;\n }\n };\n\n private renderProgress = () => {\n if (this.progress?.value || this.progress?.value === 0) {\n return (\n <limel-circular-progress\n class=\"progress\"\n prefix={this.progress.prefix}\n value={this.progress.value}\n suffix={this.progress.suffix}\n maxValue={this.progress.maxValue}\n displayPercentageColors={\n this.progress.displayPercentageColors\n }\n />\n );\n }\n };\n\n private renderLabel = () => {\n if (this.label) {\n return <span class=\"label\">{this.label}</span>;\n }\n };\n\n private renderNotification = () => {\n if (this.badge) {\n return <limel-badge label={this.badge} />;\n }\n };\n\n private renderSpinner = () => {\n if (this.loading) {\n return <limel-linear-progress indeterminate={true} />;\n }\n };\n}\n"],"version":3}
1
+ {"file":"limel-info-tile.entry.js","mappings":"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","names":[],"sources":["./src/components/info-tile/info-tile.scss?tag=limel-info-tile&encapsulation=shadow","./src/components/info-tile/info-tile.tsx"],"sourcesContent":["/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n\n@use '../../style/mixins';\n\n:host(limel-info-tile) {\n --badge-text-color: var(\n --info-tile-badge-text-color,\n rgb(var(--color-white))\n );\n --badge-background-color: var(\n --info-tile-badge-background-color,\n rgb(var(--color-red-default))\n );\n\n --circular-progress-text-color: var(\n --info-tile-progress-text-color,\n var(--info-tile-text-color)\n );\n --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n --circular-progress-background-color: var(\n --info-tile-progress-background-color,\n var(--info-tile-background-color)\n );\n\n --label-min-size: 0.75rem;\n --label-preferred-size: 6cqw;\n --label-max-size: 1rem;\n\n --value-min-size: 1rem;\n --value-preferred-size: 20cqw;\n --value-max-size: 4rem;\n\n --suffix-prefix-min-size: 0.75rem;\n --suffix-prefix-preferred-size: 8cqw;\n --suffix-prefix-max-size: 1.5rem;\n\n --icon-min-size: 2rem;\n --icon-preferred-size: 60cqh;\n --icon-max-size: calc(100cqw - 0.5rem);\n\n container-type: size;\n position: relative;\n display: flex;\n\n width: 100%;\n height: 100%;\n\n * {\n box-sizing: border-box;\n }\n}\n\n:host(limel-info-tile[disabled]) {\n a {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}\n\na {\n all: unset;\n overflow: hidden;\n\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n\n height: 100%;\n width: 100%;\n flex-grow: 1;\n\n padding: 0.25rem 1rem 0.5rem 1rem;\n border-radius: var(--info-tile-border-radius, 1rem);\n background-color: var(\n --info-tile-background-color,\n var(--lime-elevated-surface-background-color)\n );\n}\n\n:host ::slotted([slot='primary']) {\n width: 100%;\n height: 100%;\n}\n\n.icon {\n z-index: 1;\n position: absolute;\n top: 0.5rem;\n right: 0.75rem;\n padding: 0.25rem;\n\n aspect-ratio: 1/1;\n\n color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n\n border-radius: 0;\n height: clamp(\n var(--icon-min-size),\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n\n @supports not (container-type: size) {\n width: max(10%, 3rem);\n }\n\n :host(.has-primary-slot-content) &,\n a:has(limel-circular-progress) & {\n top: unset;\n bottom: 0.5rem;\n --icon-min-size: 1.5rem;\n --icon-preferred-size: 20cqh;\n }\n}\n\nslot[name='primary'] {\n display: block;\n aspect-ratio: 1;\n width: min(var(--icon-preferred-size), var(--icon-max-size));\n}\n\n.progress,\nslot[name='primary'] {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n}\n\n.progress {\n --circular-progress-size: min(\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n @supports not (container-type: size) {\n --circular-progress-size: initial;\n }\n}\n\n.label {\n z-index: 1;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n\n line-height: 1.2;\n font-size: clamp(\n var(--label-min-size),\n var(--label-preferred-size),\n var(--label-max-size)\n );\n @supports not (container-type: size) {\n font-size: 0.875rem;\n }\n}\n\nlimel-badge {\n position: absolute;\n top: -0.25rem;\n right: -0.25rem;\n}\n\nlimel-linear-progress {\n --lime-primary-color: var(--info-tile-text-color);\n position: absolute;\n inset: auto 0 0 0;\n}\n\n.value-group {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n text-shadow:\n 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))),\n 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n display: flex;\n}\n\n.prefix,\n.suffix {\n font-size: clamp(\n var(--suffix-prefix-min-size),\n var(--suffix-prefix-preferred-size),\n var(--suffix-prefix-max-size)\n );\n opacity: 0.7;\n\n @supports not (container-type: size) {\n font-size: 0.75rem;\n }\n}\n\n.prefix {\n align-self: flex-start;\n line-height: normal;\n transform: translateY(40%);\n}\n\n.value {\n transition:\n opacity 0.2s ease,\n transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n transform-origin: left;\n transform: translate3d(0, 0, 0) scale(1);\n\n @include mixins.truncate-text;\n font-weight: bold;\n line-height: normal;\n\n font-size: clamp(\n var(--value-min-size),\n var(--value-preferred-size),\n var(--value-max-size)\n );\n @supports not (container-type: size) {\n font-size: 1.5rem;\n }\n\n :host(limel-info-tile[loading]) & {\n opacity: 0.3;\n transform: translate3d(0, 0, 0) scale(0.9);\n }\n}\n\n.suffix {\n transform: translateY(10%);\n}\n\n$xs: 8rem; //128px:\n$s: 18.75rem; //300px\n$m: 40.5rem; //648px\n$l: 62.5rem; //1000px\n\n@container (width < #{$xs}) {\n .progress,\n slot[name='primary'] {\n top: 0.25rem;\n right: 0.25rem;\n }\n a {\n padding: 0.375rem;\n gap: 0.125rem;\n }\n}\n\n@container (width < #{$s}) {\n .progress,\n slot[name='primary'] {\n top: 0.5rem;\n right: 0.5rem;\n }\n .icon {\n top: 0.25rem;\n right: 0.5rem;\n\n :host(.has-primary-slot-content) &,\n a:has(limel-circular-progress) & {\n right: 0.25rem;\n bottom: 0.25rem;\n }\n }\n}\n\n@container (width < #{$m}) {\n .value {\n &.ch-1,\n &.ch-2,\n &.ch-3,\n &.ch-4 {\n --value-preferred-size: 20cqw;\n }\n &.ch-5 {\n --value-preferred-size: 18cqw;\n }\n &.ch-6 {\n --value-preferred-size: 17cqw;\n }\n &.ch-7 {\n --value-preferred-size: 16cqw;\n }\n &.ch-8 {\n --value-preferred-size: 15cqw;\n }\n &.ch-9 {\n --value-preferred-size: 14cqw;\n }\n --value-preferred-size: 13cqw;\n }\n}\n\n@container (height > #{$xs}) {\n a {\n padding-top: 0.75rem;\n padding-bottom: 1rem;\n }\n}\n\n@container (height < #{$xs}) and (width > #{$xs}) {\n .value {\n --value-preferred-size: 32cqh !important;\n }\n .suffix,\n .prefix {\n --suffix-prefix-preferred-size: 16cqh !important;\n }\n}\n\n@container (height > #{$s}) {\n .progress,\n slot[name='primary'],\n .icon {\n position: relative;\n top: unset;\n right: unset;\n }\n a {\n align-items: center;\n justify-content: center;\n }\n .label {\n text-align: center;\n // -webkit-line-clamp: 3;\n }\n\n :host(.has-primary-slot-content),\n a:has(limel-circular-progress) {\n .icon {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n --icon-max-size: 3rem;\n }\n }\n}\n\n// The 3D effect\nlimel-3d-hover-effect-glow {\n border-radius: var(--info-tile-border-radius, 1rem);\n}\n\n:host(limel-info-tile) {\n @include mixins.parent-of-the-3d-element;\n}\n\na {\n @include mixins.the-3d-element;\n\n &.is-clickable {\n @include mixins.the-3d-element--clickable;\n }\n}\n","import { Component, Prop, h, Element, Host, State } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n *\n * If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n *\n * @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-primary-slot\n * @exampleComponent limel-example-info-tile-styling\n */\n@Component({\n tag: 'limel-info-tile',\n shadow: true,\n styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n /**\n * A piece of text or number that is the main piece of information\n * which the component is intended to visualize.\n */\n @Prop({ reflect: true })\n public value: number | string;\n\n /**\n * Name of icon for the info tile.\n */\n @Prop()\n public icon?: string;\n\n /**\n * The text to show below the info tile. Long labels will be truncated.\n */\n @Prop({ reflect: true })\n public label?: string = null;\n\n /**\n * A string of text that is visually placed before the value.\n */\n @Prop({ reflect: true })\n public prefix?: string;\n\n /**\n * A string of text that is visually placed after the value.\n */\n @Prop({ reflect: true })\n public suffix?: string;\n\n /**\n * Set to `true` if info tile is disabled.\n */\n @Prop({ reflect: true })\n public disabled? = false;\n\n /**\n * If supplied, the info tile will display a notification badge.\n */\n @Prop({ reflect: true })\n public badge?: number | string;\n\n /**\n * Set to `true` to put the component in the `loading` state.\n * This does _not_ disable the link. To do so, the\n * `disabled` property should be set to `true` as well.\n */\n @Prop({ reflect: true })\n public loading? = false;\n\n /**\n * If supplied, the info tile will be a clickable link.\n *\n * Supplying a value also adds an elevated effect using a shadow,\n * as well as `cursor: pointer`, which appears on hover.\n * While we strongly recommend supplying a link whenever the\n * component should act as a link, if this is not possible, and\n * you need to provide interaction through a click handler,\n * you can still get the correct styling by supplying a `Link`\n * object with the `href` property set to `'#'`.\n */\n @Prop()\n public link?: Link;\n\n /**\n * Properties of the optional circular progress bar.\n *\n * Defaults:\n * - `maxValue`: 100\n * - `suffix`: %\n * - `displayPercentageColors`: false\n *\n * Colors change with intervals of 10 %.\n */\n @Prop()\n public progress?: InfoTileProgress;\n\n @Element()\n private host: HTMLElement;\n\n /**\n * `true` when something is assigned to the `primary` slot\n */\n @State()\n private hasPrimarySlot = false;\n\n private handleMouseEnter: () => void;\n private handleMouseLeave: () => void;\n\n public componentWillLoad() {\n const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n this.host,\n );\n this.handleMouseEnter = handleMouseEnter;\n this.handleMouseLeave = handleMouseLeave;\n this.updateHasPrimarySlotContent();\n }\n\n public render() {\n const extendedAriaLabel =\n this.checkProps(this?.prefix) +\n this.value +\n ' ' +\n this.checkProps(this?.suffix) +\n this.checkProps(this?.label) +\n '. ' +\n this.checkProps(this?.progress?.prefix) +\n this.checkProps(this?.progress?.value) +\n this.checkProps(this?.progress?.suffix) +\n this.checkProps(this?.link?.title);\n\n const link = !this.disabled ? this.link?.href : '#';\n\n return (\n <Host\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n class={{ 'has-primary-slot-content': this.hasPrimarySlot }}\n >\n <a\n title={this.link?.title}\n href={link}\n target={this.link?.target}\n tabindex=\"0\"\n aria-label={extendedAriaLabel}\n aria-disabled={this.disabled}\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n class={{\n 'is-clickable': !!this.link?.href && !this.disabled,\n }}\n >\n {this.renderIcon()}\n {this.renderProgress()}\n <slot\n name=\"primary\"\n onSlotchange={this.updateHasPrimarySlotContent}\n />\n <div class=\"value-group\">\n {this.renderPrefix()}\n <div class=\"value-and-suffix\">\n {this.renderValue()}\n {this.renderSuffix()}\n </div>\n {this.renderSpinner()}\n </div>\n {this.renderLabel()}\n <limel-3d-hover-effect-glow />\n </a>\n {this.renderNotification()}\n </Host>\n );\n }\n\n private checkProps(propValue) {\n return !propValue ? '' : propValue + ' ';\n }\n\n private renderPrefix = () => {\n if (this.prefix) {\n return <span class=\"prefix\">{this.prefix}</span>;\n }\n };\n\n private renderValue = () => {\n const characterCount = (this.value ?? '').toString().length;\n\n if (!this.value && this.loading) {\n return <span class=\"value\">···</span>;\n }\n\n if (this.value) {\n return (\n <span\n class={{\n value: true,\n [`ch-${characterCount}`]: true,\n }}\n >\n {this.value}\n </span>\n );\n }\n };\n\n private renderSuffix = () => {\n if (this.suffix) {\n return <span class=\"suffix\">{this.suffix}</span>;\n }\n };\n\n private renderIcon = () => {\n if (this.icon) {\n return <limel-icon class=\"icon\" name={this.icon} />;\n }\n };\n\n private updateHasPrimarySlotContent = (e?: Event) => {\n const slot =\n (e?.target as HTMLSlotElement) ??\n this.host.shadowRoot.querySelector('slot[name=\"primary\"]');\n this.hasPrimarySlot = slot && slot.assignedElements().length > 0;\n };\n\n private renderProgress = () => {\n if (this.hasPrimarySlot) {\n return;\n }\n\n if (!this.progress?.value && this.progress?.value !== 0) {\n return;\n }\n\n return (\n <limel-circular-progress\n class=\"progress\"\n prefix={this.progress.prefix}\n value={this.progress.value}\n suffix={this.progress.suffix}\n maxValue={this.progress.maxValue}\n displayPercentageColors={this.progress.displayPercentageColors}\n />\n );\n };\n\n private renderLabel = () => {\n if (this.label) {\n return <span class=\"label\">{this.label}</span>;\n }\n };\n\n private renderNotification = () => {\n if (this.badge) {\n return <limel-badge label={this.badge} />;\n }\n };\n\n private renderSpinner = () => {\n if (this.loading) {\n return <limel-linear-progress indeterminate={true} />;\n }\n };\n}\n"],"version":3}
package/dist/esm/limel-picker.entry.js CHANGED
@@ -252,7 +252,7 @@ const Picker = class {
252
252
  renderPortal(content = []) {
253
253
  const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
254
254
  return (h("limel-portal", { visible: content.length > 0, containerId: this.portalId, inheritParentWidth: true, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { open: content.length > 0, allowClicksElement: this.host, style: {
255
- '--mdc-menu-min-width': '100%',
255
+ '--menu-surface-width': '100%',
256
256
  'max-height': 'inherit',
257
257
  display: 'flex',
258
258
  }, onDismiss: this.handleCloseMenu }, content)));
package/dist/esm/limel-picker.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"limel-picker.entry.js","mappings":"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","names":[],"sources":["./src/components/picker/picker.scss?tag=limel-picker&encapsulation=shadow","./src/components/picker/picker.tsx"],"sourcesContent":["// Note! The `--dropdown-z-index` property is used from `picker.tsx`.\n/**\n * @prop --dropdown-z-index: z-index of the dropdown menu.\n */\n\n:host {\n position: relative;\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n","import { Action } from '../collapsible-section/action';\nimport { ActionPosition, ActionScrollBehavior } from '../picker/actions.types';\nimport { Chip } from '../chip-set/chip.types';\nimport { ListItem } from '../list/list-item.types';\nimport { Searcher } from '../picker/searcher.types';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { isDescendant } from '../../util/dom';\nimport { ARROW_DOWN, ARROW_UP, ENTER, ESCAPE, TAB } from '../../util/keycodes';\nimport { createRandomString } from '../../util/random-string';\nimport {\n LimelChipSetCustomEvent,\n LimelListCustomEvent,\n} from '../../components';\nimport { getIconFillColor, getIconName } from '../icon/get-icon-props';\nimport { PickerValue } from './value.types';\nimport { DebouncedFunc, debounce } from 'lodash-es';\n\nconst SEARCH_DEBOUNCE = 300;\nconst CHIP_SET_TAG_NAME = 'limel-chip-set';\nconst DEFAULT_SEARCHER_MAX_RESULTS = 20;\n\n/**\n * @exampleComponent limel-example-picker-basic\n * @exampleComponent limel-example-picker-multiple\n * @exampleComponent limel-example-picker-icons\n * @exampleComponent limel-example-picker-pictures\n * @exampleComponent limel-example-picker-value-as-object\n * @exampleComponent limel-example-picker-value-as-object-with-actions\n * @exampleComponent limel-example-picker-empty-suggestions\n * @exampleComponent limel-example-picker-leading-icon\n * @exampleComponent limel-example-picker-static-actions\n * @exampleComponent limel-example-picker-composite\n */\n@Component({\n tag: 'limel-picker',\n shadow: true,\n styleUrl: 'picker.scss',\n})\nexport class Picker {\n /**\n * True if the picker should be disabled\n */\n @Prop()\n public disabled: boolean = false;\n\n /**\n * Set to `true` to disable adding and removing items,\n * but allow interaction with existing items.\n */\n @Prop({ reflect: true })\n public readonly: boolean = false;\n\n /**\n * Text to display for the input field of the picker\n */\n @Prop()\n public label: string;\n\n /**\n * Search label to display in the input field when searching\n */\n @Prop()\n public searchLabel: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Leading icon to show to the far left in the text field\n */\n @Prop()\n public leadingIcon: string;\n\n /**\n * A message to display when the search returned an empty result\n */\n @Prop()\n public emptyResultMessage: string;\n\n /**\n * True if the control requires a value\n */\n @Prop()\n public required: boolean = false;\n\n /**\n * Set to `true` to indicate that the current value of the input field is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Currently selected value or values. Where the value can be an object.\n */\n @Prop()\n public value: ListItem<PickerValue> | Array<ListItem<PickerValue>>;\n\n /**\n * A search function that takes a search-string as an argument,\n * and returns a promise that will eventually be resolved with\n * an array of `ListItem`:s.\n *\n * See the docs for the type `Searcher` for type information on\n * the searcher function itself.\n */\n @Prop()\n public searcher?: Searcher;\n\n /**\n * Only used if no `searcher` is provided. The picker will then use a\n * default search function that filters the `allItems` based on the\n * `text` and `secondaryText` properties of the items.\n * This way, custom search functions are typically only needed when the\n * search is done on the server.\n * For performance reasons, the default searcher will never return more\n * than 20 items, but if there are more than 20 items, the rest can be\n * found by typing more characters in the search field.\n */\n @Prop()\n public allItems?: Array<ListItem<PickerValue>> = [];\n\n /**\n * True if multiple values are allowed\n */\n @Prop()\n public multiple: boolean = false;\n\n /**\n * Sets delimiters between chips. Works only when `multiple` is `true`.\n */\n @Prop({ reflect: true })\n public delimiter: string = null;\n\n /**\n * Static actions that can be clicked by the user.\n */\n @Prop()\n public actions: Array<ListItem<Action>> = [];\n\n /**\n * Position of the custom static actions in the picker's results dropdown.\n * Can be set to `'top'` or `'bottom'`.\n */\n @Prop()\n public actionPosition: ActionPosition = 'bottom';\n\n /**\n * Scroll behavior of the custom static actions, when user scrolls\n * in the picker's results dropdown. Can be set to `'scroll'` which means\n * the action items will scroll together with the list, or `'sticky'` which\n * retains their position at the top or bottom of the drop down while\n * scrolling.\n */\n @Prop()\n public actionScrollBehavior: ActionScrollBehavior = 'sticky';\n\n /**\n * Whether badge icons should be used in the result list or not\n */\n @Prop({ reflect: true })\n public badgeIcons: boolean = false;\n\n /**\n * Fired when a new value has been selected from the picker\n */\n @Event()\n private change: EventEmitter<\n ListItem<PickerValue> | Array<ListItem<PickerValue>>\n >;\n\n /**\n * Fired when clicking on a selected value\n */\n @Event()\n private interact: EventEmitter<ListItem<PickerValue>>;\n\n /**\n * Emitted when the user selects an action.\n */\n @Event()\n private action: EventEmitter<Action>;\n\n @State()\n private items: Array<ListItem<number | string>>;\n\n @State()\n private textValue: string = '';\n\n @State()\n private loading: boolean = false;\n\n @State()\n private chips: Chip[] = [];\n\n @Element()\n private host: HTMLLimelPickerElement;\n\n // Should NOT be decorated with State(), since this\n // should not trigger a re-render by itself.\n private chipSetEditMode = false;\n\n private debouncedSearch: DebouncedFunc<(query: string) => Promise<void>>;\n private chipSet: HTMLLimelChipSetElement;\n private portalId: string;\n\n constructor() {\n this.handleTextInput = this.handleTextInput.bind(this);\n this.handleInputKeyDown = this.handleInputKeyDown.bind(this);\n this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);\n this.handleInputFieldFocus = this.handleInputFieldFocus.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.handleInteract = this.handleInteract.bind(this);\n this.handleListChange = this.handleListChange.bind(this);\n this.handleActionListChange = this.handleActionListChange.bind(this);\n this.handleStopEditAndBlur = this.handleStopEditAndBlur.bind(this);\n this.handleCloseMenu = this.handleCloseMenu.bind(this);\n this.onListKeyDown = this.onListKeyDown.bind(this);\n\n this.portalId = createRandomString();\n this.debouncedSearch = debounce(this.search, SEARCH_DEBOUNCE);\n }\n\n public componentWillLoad() {\n this.chips = this.createChips(this.value);\n }\n\n public componentDidLoad() {\n this.chipSet = this.host.shadowRoot.querySelector(CHIP_SET_TAG_NAME);\n }\n\n public disconnectedCallback() {\n this.debouncedSearch.cancel();\n }\n\n public async componentWillUpdate() {\n this.chipSetEditMode = false;\n if (this.chipSet) {\n this.chipSetEditMode = await this.chipSet.getEditMode();\n }\n }\n\n public render() {\n const props: {\n maxItems?: number;\n } = {};\n\n if (!this.multiple) {\n props.maxItems = 1;\n }\n\n return [\n <limel-chip-set\n type=\"input\"\n inputType=\"search\"\n label={this.label}\n helperText={this.helperText}\n leadingIcon={this.leadingIcon}\n value={this.chips}\n disabled={this.disabled}\n invalid={this.invalid}\n delimiter={this.renderDelimiter()}\n readonly={this.readonly}\n required={this.required}\n searchLabel={this.searchLabel}\n onInput={this.handleTextInput}\n onKeyDown={this.handleInputKeyDown}\n onChange={this.handleChange}\n onInteract={this.handleInteract}\n onStartEdit={this.handleInputFieldFocus}\n onStopEdit={this.handleStopEditAndBlur}\n emptyInputOnBlur={false}\n clearAllButton={this.multiple && !this.chipSetEditMode}\n {...props}\n />,\n this.renderDropdown(),\n ];\n }\n\n @Watch('value')\n protected onChangeValue() {\n this.chips = this.createChips(this.value);\n }\n\n private renderDelimiter() {\n if (this.multiple) {\n return this.delimiter;\n }\n\n return null;\n }\n\n private getValueId = (item: ListItem) => {\n const value = item.value;\n if (!!value && typeof value === 'object') {\n return value.id;\n }\n\n return value;\n };\n\n private createChips = (value: ListItem | ListItem[]): Chip[] => {\n if (!value) {\n return [];\n }\n\n if (this.multiple) {\n const listItems: ListItem[] = value as ListItem[];\n\n return listItems.map(this.createChip);\n }\n\n const listItem: ListItem = value as ListItem;\n\n return [this.createChip(listItem)];\n };\n\n private createChip = (listItem: ListItem): Chip => {\n const name = getIconName(listItem.icon);\n // eslint-disable-next-line sonarjs/deprecation\n const color = getIconFillColor(listItem.icon, listItem.iconColor);\n const valueId = this.getValueId(listItem);\n\n return {\n id: `${valueId}`,\n text: listItem.text,\n removable: true,\n icon: name ? { name: name, color: color } : undefined,\n image: listItem.image,\n value: listItem,\n menuItems: listItem.actions,\n };\n };\n\n /**\n * Renders the dropdown with the items to pick from, or a spinner if the picker\n * is waiting for items to be received\n *\n * @returns picker dropdown\n */\n private renderDropdown() {\n const dropDownContent = this.getDropdownContent();\n\n const content = [];\n\n if (this.shouldShowDropDownContent()) {\n const actionContent = this.getActionContent();\n if (this.actionPosition === 'top') {\n content.push(actionContent);\n }\n\n if (dropDownContent) {\n content.push(dropDownContent);\n }\n\n if (this.actionPosition === 'bottom') {\n content.push(actionContent);\n }\n }\n\n return this.renderPortal(content);\n }\n\n private getActionContent() {\n const actionCount = this.actions?.length ?? 0;\n if (actionCount === 0) {\n return null;\n }\n\n return [\n <limel-list\n class={{\n 'static-actions-list': true,\n 'is-on-top': this.actionPosition === 'top',\n 'is-at-bottom': this.actionPosition === 'bottom',\n 'has-position-sticky':\n this.actionScrollBehavior === 'sticky',\n }}\n badgeIcons={true}\n type={'selectable'}\n onChange={this.handleActionListChange}\n items={this.actions.map(this.removeUnusedPropertiesOnAction)}\n />,\n ];\n }\n\n private removeUnusedPropertiesOnAction(\n action: ListItem<Action>,\n ): ListItem<Action> {\n return {\n ...action,\n actions: [],\n };\n }\n\n private shouldShowDropDownContent() {\n if (this.isFull()) {\n return false;\n }\n\n return !!this.chipSetEditMode;\n }\n\n private getDropdownContent() {\n if (!this.shouldShowDropDownContent()) {\n return;\n }\n\n if (this.loading) {\n return this.renderSpinner();\n }\n\n if (!this.items?.length) {\n return this.renderEmptyMessage();\n }\n\n return this.renderListResult();\n }\n\n /**\n * Returns true if the picker is \"full\"\n * The picker is considered to be full if it has a value and only one is allowed\n *\n * @returns true if the picker is full\n */\n private isFull(): boolean {\n return !this.multiple && !!this.value;\n }\n\n private renderSpinner() {\n return (\n <div\n style={{\n width: '100%',\n display: 'flex',\n 'align-items': 'center',\n 'justify-content': 'center',\n padding: '1rem 0',\n }}\n >\n <limel-spinner limeBranded={false} />\n </div>\n );\n }\n\n private renderEmptyMessage() {\n if (!this.emptyResultMessage) {\n return;\n }\n\n const style = {\n color: 'rgb(var(--contrast-1100))',\n 'text-align': 'center',\n margin: '0.5rem 1rem',\n };\n\n return <p style={style}>{this.emptyResultMessage}</p>;\n }\n\n private renderListResult() {\n return (\n <limel-list\n badgeIcons={this.badgeIcons}\n onChange={this.handleListChange}\n onKeyDown={this.onListKeyDown}\n type=\"selectable\"\n items={this.items}\n />\n );\n }\n\n private onListKeyDown(event: KeyboardEvent) {\n const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);\n if (keyFound) {\n this.chipSet.setFocus();\n }\n }\n\n private renderPortal(content: any[] = []) {\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n return (\n <limel-portal\n visible={content.length > 0}\n containerId={this.portalId}\n inheritParentWidth={true}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-menu-surface\n open={content.length > 0}\n allowClicksElement={this.host}\n style={{\n '--mdc-menu-min-width': '100%',\n 'max-height': 'inherit',\n display: 'flex',\n }}\n onDismiss={this.handleCloseMenu}\n >\n {content}\n </limel-menu-surface>\n </limel-portal>\n );\n }\n\n /**\n * Check if a descendant still has focus. If not, reset text value and search result.\n */\n private handleStopEditAndBlur() {\n // In browsers where shadow DOM is not supported activeElement on shadowRoot will return null\n // However, document.activeElement will return the actual focused element instead of the outermost shadow host\n const element =\n this.host.shadowRoot.activeElement || document.activeElement;\n const portalElement = document.querySelector(`#${this.portalId}`);\n if (\n isDescendant(element as HTMLElement, this.host) ||\n isDescendant(element as HTMLElement, portalElement as HTMLElement)\n ) {\n return;\n }\n\n this.clearInputField();\n }\n\n /**\n * Input handler for the input field\n *\n * @param event - event\n */\n private async handleTextInput(event) {\n event.stopPropagation();\n\n const query = event.detail;\n this.textValue = query;\n\n this.debouncedSearch(query);\n // If the search-query is an empty string, bypass debouncing.\n if (query === '') {\n this.debouncedSearch.flush();\n }\n }\n\n private search = async (query: string) => {\n const timeoutId = setTimeout(() => {\n this.loading = true;\n });\n const searcher = this.searcher || this.defaultSearcher;\n const result = (await searcher(this.textValue)) as Array<\n ListItem<PickerValue>\n >;\n\n // If the search function resolves immediately,\n // the loading spinner will not be shown.\n clearTimeout(timeoutId);\n\n this.handleSearchResult(query, result);\n };\n\n private defaultSearcher: Searcher = async (\n query: string,\n ): Promise<ListItem[]> => {\n if (query === '') {\n return this.allItems.slice(0, DEFAULT_SEARCHER_MAX_RESULTS);\n }\n\n const filteredItems = this.allItems.filter((item) => {\n let searchText = item.text.toLowerCase();\n if (item.secondaryText) {\n searchText =\n searchText + ' ' + item.secondaryText.toLowerCase();\n }\n\n return searchText.includes(query.toLowerCase());\n });\n\n return filteredItems.slice(0, DEFAULT_SEARCHER_MAX_RESULTS);\n };\n\n /**\n * Change handler for the list\n *\n * @param event - event\n */\n private handleListChange(\n event: LimelListCustomEvent<ListItem<PickerValue>>,\n ) {\n event.stopPropagation();\n if (!this.value || this.value !== event.detail) {\n let newValue: ListItem<PickerValue> | Array<ListItem<PickerValue>> =\n event.detail;\n if (this.multiple) {\n newValue = [\n ...(this.value as Array<ListItem<PickerValue>>),\n event.detail,\n ];\n }\n\n this.change.emit(newValue);\n this.items = [];\n }\n\n if (this.multiple) {\n this.textValue = '';\n this.chipSet?.setFocus(true);\n }\n }\n\n /**\n * Change handler for the list\n *\n * @param event - event\n */\n private handleActionListChange(\n event: LimelListCustomEvent<ListItem<Action>>,\n ) {\n event.stopPropagation();\n if (!event.detail) {\n return;\n }\n\n this.action.emit(event.detail.value);\n this.items = [];\n }\n\n /**\n * Focus handler for the chip set\n * Prevent focus if the picker has a value and does not support multiple values\n */\n private handleInputFieldFocus() {\n const query = this.textValue;\n this.debouncedSearch(query);\n }\n\n private handleChange(event: LimelChipSetCustomEvent<Chip | Chip[]>) {\n event.stopPropagation();\n\n let newValue = null;\n if (this.multiple) {\n const chips = event.detail as Chip[];\n newValue = chips.map((chip) => {\n return (this.value as ListItem[]).find((item) => {\n const valueId = this.getValueId(item);\n\n return `${valueId}` === chip.id;\n });\n });\n }\n\n this.change.emit(newValue);\n }\n\n private handleInteract(event: LimelChipSetCustomEvent<Chip>) {\n event.stopPropagation();\n this.interact.emit(event.detail ? event.detail.value : event.detail);\n }\n\n /**\n * Key handler for the input field\n * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard\n *\n * @param event - event\n */\n private handleInputKeyDown(event: KeyboardEvent) {\n const isForwardTab =\n event.key === TAB &&\n !event.altKey &&\n !event.metaKey &&\n !event.shiftKey;\n const isUp = event.key === ARROW_UP;\n const isDown = event.key === ARROW_DOWN;\n\n if (!isForwardTab && !isUp && !isDown) {\n return;\n }\n\n const list = document.querySelector(` #${this.portalId} limel-list`);\n if (!list) {\n return;\n }\n\n event.preventDefault();\n\n if (isForwardTab || isDown) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:first-child',\n );\n listElement.focus();\n\n return;\n }\n\n if (isUp) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:last-child',\n );\n listElement.focus();\n }\n }\n\n /**\n * Key handler for the dropdown\n *\n * @param event - event\n */\n private handleDropdownKeyDown(event: KeyboardEvent) {\n const isEscape = event.key === ESCAPE;\n\n if (isEscape) {\n event.preventDefault();\n this.textValue = '';\n this.chipSet.setFocus(true);\n }\n }\n\n private handleSearchResult(query: string, result: ListItem[]) {\n if (query === this.textValue) {\n this.items = result;\n if (this.multiple) {\n const values = this.value as ListItem[];\n this.items = result.filter((item) => {\n return !values.includes(item);\n });\n }\n\n this.loading = false;\n }\n }\n\n private handleCloseMenu() {\n if (this.items.length > 0) {\n return;\n }\n\n this.clearInputField();\n }\n\n private clearInputField() {\n this.chipSet.emptyInput();\n this.textValue = '';\n this.handleSearchResult('', []);\n this.debouncedSearch.cancel();\n }\n}\n"],"version":3}
1
+ {"file":"limel-picker.entry.js","mappings":"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","names":[],"sources":["./src/components/picker/picker.scss?tag=limel-picker&encapsulation=shadow","./src/components/picker/picker.tsx"],"sourcesContent":["// Note! The `--dropdown-z-index` property is used from `picker.tsx`.\n/**\n * @prop --dropdown-z-index: z-index of the dropdown menu.\n */\n\n:host {\n position: relative;\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n","import { Action } from '../collapsible-section/action';\nimport { ActionPosition, ActionScrollBehavior } from '../picker/actions.types';\nimport { Chip } from '../chip-set/chip.types';\nimport { ListItem } from '../list/list-item.types';\nimport { Searcher } from '../picker/searcher.types';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { isDescendant } from '../../util/dom';\nimport { ARROW_DOWN, ARROW_UP, ENTER, ESCAPE, TAB } from '../../util/keycodes';\nimport { createRandomString } from '../../util/random-string';\nimport {\n LimelChipSetCustomEvent,\n LimelListCustomEvent,\n} from '../../components';\nimport { getIconFillColor, getIconName } from '../icon/get-icon-props';\nimport { PickerValue } from './value.types';\nimport { DebouncedFunc, debounce } from 'lodash-es';\n\nconst SEARCH_DEBOUNCE = 300;\nconst CHIP_SET_TAG_NAME = 'limel-chip-set';\nconst DEFAULT_SEARCHER_MAX_RESULTS = 20;\n\n/**\n * @exampleComponent limel-example-picker-basic\n * @exampleComponent limel-example-picker-multiple\n * @exampleComponent limel-example-picker-icons\n * @exampleComponent limel-example-picker-pictures\n * @exampleComponent limel-example-picker-value-as-object\n * @exampleComponent limel-example-picker-value-as-object-with-actions\n * @exampleComponent limel-example-picker-empty-suggestions\n * @exampleComponent limel-example-picker-leading-icon\n * @exampleComponent limel-example-picker-static-actions\n * @exampleComponent limel-example-picker-composite\n */\n@Component({\n tag: 'limel-picker',\n shadow: true,\n styleUrl: 'picker.scss',\n})\nexport class Picker {\n /**\n * True if the picker should be disabled\n */\n @Prop()\n public disabled: boolean = false;\n\n /**\n * Set to `true` to disable adding and removing items,\n * but allow interaction with existing items.\n */\n @Prop({ reflect: true })\n public readonly: boolean = false;\n\n /**\n * Text to display for the input field of the picker\n */\n @Prop()\n public label: string;\n\n /**\n * Search label to display in the input field when searching\n */\n @Prop()\n public searchLabel: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Leading icon to show to the far left in the text field\n */\n @Prop()\n public leadingIcon: string;\n\n /**\n * A message to display when the search returned an empty result\n */\n @Prop()\n public emptyResultMessage: string;\n\n /**\n * True if the control requires a value\n */\n @Prop()\n public required: boolean = false;\n\n /**\n * Set to `true` to indicate that the current value of the input field is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Currently selected value or values. Where the value can be an object.\n */\n @Prop()\n public value: ListItem<PickerValue> | Array<ListItem<PickerValue>>;\n\n /**\n * A search function that takes a search-string as an argument,\n * and returns a promise that will eventually be resolved with\n * an array of `ListItem`:s.\n *\n * See the docs for the type `Searcher` for type information on\n * the searcher function itself.\n */\n @Prop()\n public searcher?: Searcher;\n\n /**\n * Only used if no `searcher` is provided. The picker will then use a\n * default search function that filters the `allItems` based on the\n * `text` and `secondaryText` properties of the items.\n * This way, custom search functions are typically only needed when the\n * search is done on the server.\n * For performance reasons, the default searcher will never return more\n * than 20 items, but if there are more than 20 items, the rest can be\n * found by typing more characters in the search field.\n */\n @Prop()\n public allItems?: Array<ListItem<PickerValue>> = [];\n\n /**\n * True if multiple values are allowed\n */\n @Prop()\n public multiple: boolean = false;\n\n /**\n * Sets delimiters between chips. Works only when `multiple` is `true`.\n */\n @Prop({ reflect: true })\n public delimiter: string = null;\n\n /**\n * Static actions that can be clicked by the user.\n */\n @Prop()\n public actions: Array<ListItem<Action>> = [];\n\n /**\n * Position of the custom static actions in the picker's results dropdown.\n * Can be set to `'top'` or `'bottom'`.\n */\n @Prop()\n public actionPosition: ActionPosition = 'bottom';\n\n /**\n * Scroll behavior of the custom static actions, when user scrolls\n * in the picker's results dropdown. Can be set to `'scroll'` which means\n * the action items will scroll together with the list, or `'sticky'` which\n * retains their position at the top or bottom of the drop down while\n * scrolling.\n */\n @Prop()\n public actionScrollBehavior: ActionScrollBehavior = 'sticky';\n\n /**\n * Whether badge icons should be used in the result list or not\n */\n @Prop({ reflect: true })\n public badgeIcons: boolean = false;\n\n /**\n * Fired when a new value has been selected from the picker\n */\n @Event()\n private change: EventEmitter<\n ListItem<PickerValue> | Array<ListItem<PickerValue>>\n >;\n\n /**\n * Fired when clicking on a selected value\n */\n @Event()\n private interact: EventEmitter<ListItem<PickerValue>>;\n\n /**\n * Emitted when the user selects an action.\n */\n @Event()\n private action: EventEmitter<Action>;\n\n @State()\n private items: Array<ListItem<number | string>>;\n\n @State()\n private textValue: string = '';\n\n @State()\n private loading: boolean = false;\n\n @State()\n private chips: Chip[] = [];\n\n @Element()\n private host: HTMLLimelPickerElement;\n\n // Should NOT be decorated with State(), since this\n // should not trigger a re-render by itself.\n private chipSetEditMode = false;\n\n private debouncedSearch: DebouncedFunc<(query: string) => Promise<void>>;\n private chipSet: HTMLLimelChipSetElement;\n private portalId: string;\n\n constructor() {\n this.handleTextInput = this.handleTextInput.bind(this);\n this.handleInputKeyDown = this.handleInputKeyDown.bind(this);\n this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);\n this.handleInputFieldFocus = this.handleInputFieldFocus.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.handleInteract = this.handleInteract.bind(this);\n this.handleListChange = this.handleListChange.bind(this);\n this.handleActionListChange = this.handleActionListChange.bind(this);\n this.handleStopEditAndBlur = this.handleStopEditAndBlur.bind(this);\n this.handleCloseMenu = this.handleCloseMenu.bind(this);\n this.onListKeyDown = this.onListKeyDown.bind(this);\n\n this.portalId = createRandomString();\n this.debouncedSearch = debounce(this.search, SEARCH_DEBOUNCE);\n }\n\n public componentWillLoad() {\n this.chips = this.createChips(this.value);\n }\n\n public componentDidLoad() {\n this.chipSet = this.host.shadowRoot.querySelector(CHIP_SET_TAG_NAME);\n }\n\n public disconnectedCallback() {\n this.debouncedSearch.cancel();\n }\n\n public async componentWillUpdate() {\n this.chipSetEditMode = false;\n if (this.chipSet) {\n this.chipSetEditMode = await this.chipSet.getEditMode();\n }\n }\n\n public render() {\n const props: {\n maxItems?: number;\n } = {};\n\n if (!this.multiple) {\n props.maxItems = 1;\n }\n\n return [\n <limel-chip-set\n type=\"input\"\n inputType=\"search\"\n label={this.label}\n helperText={this.helperText}\n leadingIcon={this.leadingIcon}\n value={this.chips}\n disabled={this.disabled}\n invalid={this.invalid}\n delimiter={this.renderDelimiter()}\n readonly={this.readonly}\n required={this.required}\n searchLabel={this.searchLabel}\n onInput={this.handleTextInput}\n onKeyDown={this.handleInputKeyDown}\n onChange={this.handleChange}\n onInteract={this.handleInteract}\n onStartEdit={this.handleInputFieldFocus}\n onStopEdit={this.handleStopEditAndBlur}\n emptyInputOnBlur={false}\n clearAllButton={this.multiple && !this.chipSetEditMode}\n {...props}\n />,\n this.renderDropdown(),\n ];\n }\n\n @Watch('value')\n protected onChangeValue() {\n this.chips = this.createChips(this.value);\n }\n\n private renderDelimiter() {\n if (this.multiple) {\n return this.delimiter;\n }\n\n return null;\n }\n\n private getValueId = (item: ListItem) => {\n const value = item.value;\n if (!!value && typeof value === 'object') {\n return value.id;\n }\n\n return value;\n };\n\n private createChips = (value: ListItem | ListItem[]): Chip[] => {\n if (!value) {\n return [];\n }\n\n if (this.multiple) {\n const listItems: ListItem[] = value as ListItem[];\n\n return listItems.map(this.createChip);\n }\n\n const listItem: ListItem = value as ListItem;\n\n return [this.createChip(listItem)];\n };\n\n private createChip = (listItem: ListItem): Chip => {\n const name = getIconName(listItem.icon);\n // eslint-disable-next-line sonarjs/deprecation\n const color = getIconFillColor(listItem.icon, listItem.iconColor);\n const valueId = this.getValueId(listItem);\n\n return {\n id: `${valueId}`,\n text: listItem.text,\n removable: true,\n icon: name ? { name: name, color: color } : undefined,\n image: listItem.image,\n value: listItem,\n menuItems: listItem.actions,\n };\n };\n\n /**\n * Renders the dropdown with the items to pick from, or a spinner if the picker\n * is waiting for items to be received\n *\n * @returns picker dropdown\n */\n private renderDropdown() {\n const dropDownContent = this.getDropdownContent();\n\n const content = [];\n\n if (this.shouldShowDropDownContent()) {\n const actionContent = this.getActionContent();\n if (this.actionPosition === 'top') {\n content.push(actionContent);\n }\n\n if (dropDownContent) {\n content.push(dropDownContent);\n }\n\n if (this.actionPosition === 'bottom') {\n content.push(actionContent);\n }\n }\n\n return this.renderPortal(content);\n }\n\n private getActionContent() {\n const actionCount = this.actions?.length ?? 0;\n if (actionCount === 0) {\n return null;\n }\n\n return [\n <limel-list\n class={{\n 'static-actions-list': true,\n 'is-on-top': this.actionPosition === 'top',\n 'is-at-bottom': this.actionPosition === 'bottom',\n 'has-position-sticky':\n this.actionScrollBehavior === 'sticky',\n }}\n badgeIcons={true}\n type={'selectable'}\n onChange={this.handleActionListChange}\n items={this.actions.map(this.removeUnusedPropertiesOnAction)}\n />,\n ];\n }\n\n private removeUnusedPropertiesOnAction(\n action: ListItem<Action>,\n ): ListItem<Action> {\n return {\n ...action,\n actions: [],\n };\n }\n\n private shouldShowDropDownContent() {\n if (this.isFull()) {\n return false;\n }\n\n return !!this.chipSetEditMode;\n }\n\n private getDropdownContent() {\n if (!this.shouldShowDropDownContent()) {\n return;\n }\n\n if (this.loading) {\n return this.renderSpinner();\n }\n\n if (!this.items?.length) {\n return this.renderEmptyMessage();\n }\n\n return this.renderListResult();\n }\n\n /**\n * Returns true if the picker is \"full\"\n * The picker is considered to be full if it has a value and only one is allowed\n *\n * @returns true if the picker is full\n */\n private isFull(): boolean {\n return !this.multiple && !!this.value;\n }\n\n private renderSpinner() {\n return (\n <div\n style={{\n width: '100%',\n display: 'flex',\n 'align-items': 'center',\n 'justify-content': 'center',\n padding: '1rem 0',\n }}\n >\n <limel-spinner limeBranded={false} />\n </div>\n );\n }\n\n private renderEmptyMessage() {\n if (!this.emptyResultMessage) {\n return;\n }\n\n const style = {\n color: 'rgb(var(--contrast-1100))',\n 'text-align': 'center',\n margin: '0.5rem 1rem',\n };\n\n return <p style={style}>{this.emptyResultMessage}</p>;\n }\n\n private renderListResult() {\n return (\n <limel-list\n badgeIcons={this.badgeIcons}\n onChange={this.handleListChange}\n onKeyDown={this.onListKeyDown}\n type=\"selectable\"\n items={this.items}\n />\n );\n }\n\n private onListKeyDown(event: KeyboardEvent) {\n const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);\n if (keyFound) {\n this.chipSet.setFocus();\n }\n }\n\n private renderPortal(content: any[] = []) {\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n return (\n <limel-portal\n visible={content.length > 0}\n containerId={this.portalId}\n inheritParentWidth={true}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-menu-surface\n open={content.length > 0}\n allowClicksElement={this.host}\n style={{\n '--menu-surface-width': '100%',\n 'max-height': 'inherit',\n display: 'flex',\n }}\n onDismiss={this.handleCloseMenu}\n >\n {content}\n </limel-menu-surface>\n </limel-portal>\n );\n }\n\n /**\n * Check if a descendant still has focus. If not, reset text value and search result.\n */\n private handleStopEditAndBlur() {\n // In browsers where shadow DOM is not supported activeElement on shadowRoot will return null\n // However, document.activeElement will return the actual focused element instead of the outermost shadow host\n const element =\n this.host.shadowRoot.activeElement || document.activeElement;\n const portalElement = document.querySelector(`#${this.portalId}`);\n if (\n isDescendant(element as HTMLElement, this.host) ||\n isDescendant(element as HTMLElement, portalElement as HTMLElement)\n ) {\n return;\n }\n\n this.clearInputField();\n }\n\n /**\n * Input handler for the input field\n *\n * @param event - event\n */\n private async handleTextInput(event) {\n event.stopPropagation();\n\n const query = event.detail;\n this.textValue = query;\n\n this.debouncedSearch(query);\n // If the search-query is an empty string, bypass debouncing.\n if (query === '') {\n this.debouncedSearch.flush();\n }\n }\n\n private search = async (query: string) => {\n const timeoutId = setTimeout(() => {\n this.loading = true;\n });\n const searcher = this.searcher || this.defaultSearcher;\n const result = (await searcher(this.textValue)) as Array<\n ListItem<PickerValue>\n >;\n\n // If the search function resolves immediately,\n // the loading spinner will not be shown.\n clearTimeout(timeoutId);\n\n this.handleSearchResult(query, result);\n };\n\n private defaultSearcher: Searcher = async (\n query: string,\n ): Promise<ListItem[]> => {\n if (query === '') {\n return this.allItems.slice(0, DEFAULT_SEARCHER_MAX_RESULTS);\n }\n\n const filteredItems = this.allItems.filter((item) => {\n let searchText = item.text.toLowerCase();\n if (item.secondaryText) {\n searchText =\n searchText + ' ' + item.secondaryText.toLowerCase();\n }\n\n return searchText.includes(query.toLowerCase());\n });\n\n return filteredItems.slice(0, DEFAULT_SEARCHER_MAX_RESULTS);\n };\n\n /**\n * Change handler for the list\n *\n * @param event - event\n */\n private handleListChange(\n event: LimelListCustomEvent<ListItem<PickerValue>>,\n ) {\n event.stopPropagation();\n if (!this.value || this.value !== event.detail) {\n let newValue: ListItem<PickerValue> | Array<ListItem<PickerValue>> =\n event.detail;\n if (this.multiple) {\n newValue = [\n ...(this.value as Array<ListItem<PickerValue>>),\n event.detail,\n ];\n }\n\n this.change.emit(newValue);\n this.items = [];\n }\n\n if (this.multiple) {\n this.textValue = '';\n this.chipSet?.setFocus(true);\n }\n }\n\n /**\n * Change handler for the list\n *\n * @param event - event\n */\n private handleActionListChange(\n event: LimelListCustomEvent<ListItem<Action>>,\n ) {\n event.stopPropagation();\n if (!event.detail) {\n return;\n }\n\n this.action.emit(event.detail.value);\n this.items = [];\n }\n\n /**\n * Focus handler for the chip set\n * Prevent focus if the picker has a value and does not support multiple values\n */\n private handleInputFieldFocus() {\n const query = this.textValue;\n this.debouncedSearch(query);\n }\n\n private handleChange(event: LimelChipSetCustomEvent<Chip | Chip[]>) {\n event.stopPropagation();\n\n let newValue = null;\n if (this.multiple) {\n const chips = event.detail as Chip[];\n newValue = chips.map((chip) => {\n return (this.value as ListItem[]).find((item) => {\n const valueId = this.getValueId(item);\n\n return `${valueId}` === chip.id;\n });\n });\n }\n\n this.change.emit(newValue);\n }\n\n private handleInteract(event: LimelChipSetCustomEvent<Chip>) {\n event.stopPropagation();\n this.interact.emit(event.detail ? event.detail.value : event.detail);\n }\n\n /**\n * Key handler for the input field\n * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard\n *\n * @param event - event\n */\n private handleInputKeyDown(event: KeyboardEvent) {\n const isForwardTab =\n event.key === TAB &&\n !event.altKey &&\n !event.metaKey &&\n !event.shiftKey;\n const isUp = event.key === ARROW_UP;\n const isDown = event.key === ARROW_DOWN;\n\n if (!isForwardTab && !isUp && !isDown) {\n return;\n }\n\n const list = document.querySelector(` #${this.portalId} limel-list`);\n if (!list) {\n return;\n }\n\n event.preventDefault();\n\n if (isForwardTab || isDown) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:first-child',\n );\n listElement.focus();\n\n return;\n }\n\n if (isUp) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:last-child',\n );\n listElement.focus();\n }\n }\n\n /**\n * Key handler for the dropdown\n *\n * @param event - event\n */\n private handleDropdownKeyDown(event: KeyboardEvent) {\n const isEscape = event.key === ESCAPE;\n\n if (isEscape) {\n event.preventDefault();\n this.textValue = '';\n this.chipSet.setFocus(true);\n }\n }\n\n private handleSearchResult(query: string, result: ListItem[]) {\n if (query === this.textValue) {\n this.items = result;\n if (this.multiple) {\n const values = this.value as ListItem[];\n this.items = result.filter((item) => {\n return !values.includes(item);\n });\n }\n\n this.loading = false;\n }\n }\n\n private handleCloseMenu() {\n if (this.items.length > 0) {\n return;\n }\n\n this.clearInputField();\n }\n\n private clearInputField() {\n this.chipSet.emptyInput();\n this.textValue = '';\n this.handleSearchResult('', []);\n this.debouncedSearch.cancel();\n }\n}\n"],"version":3}
package/dist/esm/limel-select.entry.js CHANGED
@@ -335,7 +335,7 @@ const MenuDropdown = (props) => {
335
335
  const items = createMenuItems(props.options, props.value, props.required);
336
336
  return (h("limel-portal", { containerId: props.id, visible: props.isOpen, inheritParentWidth: true, containerStyle: { 'z-index': props.dropdownZIndex } },
337
337
  h("limel-menu-surface", { open: props.isOpen, onDismiss: props.close, style: {
338
- '--mdc-menu-min-width': '100%',
338
+ '--menu-surface-width': '100%',
339
339
  'max-height': 'inherit',
340
340
  display: 'flex',
341
341
  'min-width': '100%',