npm - @limetech/lime-elements - Versions diffs - 38.14.0 → 38.16.0 - Mend

@limetech/lime-elements 38.14.0 → 38.16.0

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

Files changed (92) hide show

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card.cjs\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker.cjs\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"allItems\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button.cjs\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer.cjs\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker.cjs\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-date-picker.cjs\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock.cjs\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-select.cjs\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart.cjs\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"invalid\":[516],\"actions\":[16]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-info-tile.cjs\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16]}]]],[\"limel-table.cjs\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16]}]]],[\"limel-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-ai-avatar.cjs\",[[1,\"limel-ai-avatar\",{\"isThinking\":[516,\"is-thinking\"],\"language\":[513]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config.cjs\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container.cjs\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-prosemirror-adapter.cjs\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette.cjs\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-checkbox.cjs\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-header.cjs\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content.cjs\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter.cjs\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-portal_2.cjs\",[[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}],[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-file-dropzone_2.cjs\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[4,\"lazy-load-images\"]}]]],[\"limel-badge_2.cjs\",[[1,\"limel-badge\",{\"label\":[520]}],[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}]]],[\"limel-dynamic-label_2.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-breadcrumbs_8.cjs\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}]]],[\"limel-chip_2.cjs\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"menuItems\":[16]}]]],[\"limel-button.cjs\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-action-bar-item_2.cjs\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2.cjs\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card.cjs\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker.cjs\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"allItems\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button.cjs\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer.cjs\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker.cjs\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-date-picker.cjs\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock.cjs\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-select.cjs\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart.cjs\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"icon\":[1],\"invalid\":[516],\"actions\":[16]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-info-tile.cjs\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16],\"hasPrimarySlot\":[32]}]]],[\"limel-table.cjs\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16]}]]],[\"limel-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-ai-avatar.cjs\",[[1,\"limel-ai-avatar\",{\"isThinking\":[516,\"is-thinking\"],\"language\":[513]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config.cjs\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container.cjs\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-prosemirror-adapter.cjs\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette.cjs\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-checkbox.cjs\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-header.cjs\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content.cjs\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter.cjs\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-portal_2.cjs\",[[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}],[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-file-dropzone_2.cjs\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[4,\"lazy-load-images\"]}]]],[\"limel-badge_2.cjs\",[[1,\"limel-badge\",{\"label\":[520]}],[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}]]],[\"limel-dynamic-label_2.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-breadcrumbs_8.cjs\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}]]],[\"limel-chip_2.cjs\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"menuItems\":[16]}]]],[\"limel-button.cjs\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-action-bar-item_2.cjs\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2.cjs\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
   });
 };

package/dist/collection/components/collapsible-section/collapsible-section.css CHANGED Viewed

@@ -207,17 +207,21 @@ header {
   align-items: center;
   display: flex;
   justify-content: space-between;
+  gap: 0.5rem;
   padding-left: 0.5rem;
   height: 2.5rem;
 }
+limel-icon {
+  width: 1.5rem;
+}
 .title {
   font-size: 1rem;
   font-weight: 300;
   color: var(--mdc-theme-on-surface);
   justify-self: flex-start;
   user-select: none;
-  padding-right: 0.5rem;
   height: auto;
   max-height: 3rem;
   line-height: 1.2rem;
@@ -234,8 +238,8 @@ header {
   height: 0.125rem;
   border-radius: 1rem;
   background-color: var(--header-stroke-color, rgb(var(--contrast-900)));
-  margin-right: 0.5rem;
   opacity: 0;
+  margin-right: 0.5rem;
 }
 section.open .divider-line {
   opacity: 0.16;
@@ -292,7 +296,7 @@ header:hover + .body slot {
 .expand-icon {
   position: relative;
   height: 1.875rem;
-  margin: 0 1rem 0 0.5rem;
+  margin: 0 0 0 0.5rem;
   width: 0.75rem;
   flex-shrink: 0;
 }

package/dist/collection/components/collapsible-section/collapsible-section.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { h, } from '@stencil/core';
 import { dispatchResizeEvent } from '../../util/dispatch-resize-event';
 import { makeEnterClickable, removeEnterClickable, } from '../../util/make-enter-clickable';
 import { createRandomString } from '../../util/random-string';
+import { getIconColor, getIconName, getIconTitle, } from '../icon/get-icon-props';
 /**
  * A collapsible section can be used to group related content together
  * and hide the group when not needed.
@@ -20,11 +21,13 @@ import { createRandomString } from '../../util/random-string';
  * @exampleComponent limel-example-collapsible-section-external-control
  * @exampleComponent limel-example-collapsible-section-with-slider
  * @exampleComponent limel-example-collapsible-section-invalid
+ * @exampleComponent limel-example-collapsible-section-icon
  * @exampleComponent limel-example-collapsible-section-css-props
  */
 export class CollapsibleSection {
   constructor() {
     this.bodyId = createRandomString();
+    this.headingId = createRandomString();
     this.onClick = () => {
       this.handleInteraction();
     };
@@ -39,6 +42,23 @@ export class CollapsibleSection {
         this.close.emit();
       }
     };
+    this.renderIcon = () => {
+      if (!this.icon) {
+        return;
+      }
+      const name = getIconName(this.icon);
+      const color = getIconColor(this.icon);
+      const title = getIconTitle(this.icon);
+      return (h("limel-icon", { name: name, "aria-label": title, "aria-hidden": title ? null : 'true', style: {
+          color: `${color}`,
+        } }));
+    };
+    this.renderHeading = () => {
+      if (!this.header) {
+        return;
+      }
+      return (h("h2", { class: "title mdc-typography mdc-typography--headline2", id: this.headingId }, this.header));
+    };
     this.renderActions = () => {
       if (!this.actions) {
         return;
@@ -54,6 +74,7 @@ export class CollapsibleSection {
     };
     this.isOpen = false;
     this.header = undefined;
+    this.icon = undefined;
     this.invalid = false;
     this.actions = undefined;
   }
@@ -66,7 +87,7 @@ export class CollapsibleSection {
     removeEnterClickable(button);
   }
   render() {
-    return (h("section", { class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid }, h("header", null, h("button", { class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId }), h("div", { class: "expand-icon" }, h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" })), h("h2", { class: "title mdc-typography mdc-typography--headline2" }, this.header), h("div", { class: "divider-line" }), this.renderHeaderSlot(), this.renderActions()), h("div", { class: "body", "aria-hidden": String(!this.isOpen), id: this.bodyId }, h("slot", null))));
+    return (h("section", { class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid, "aria-labelledby": this.header ? this.headingId : null }, h("header", null, h("button", { class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId }), h("div", { class: "expand-icon" }, h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" })), this.renderIcon(), this.renderHeading(), h("div", { class: "divider-line", role: "presentation" }), this.renderHeaderSlot(), this.renderActions()), h("div", { class: "body", "aria-hidden": String(!this.isOpen), id: this.bodyId }, h("slot", null))));
   }
   renderHeaderSlot() {
     return h("slot", { name: "header" });
@@ -120,6 +141,28 @@ export class CollapsibleSection {
         "attribute": "header",
         "reflect": true
       },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | Icon",
+          "resolved": "Icon | string",
+          "references": {
+            "Icon": {
+              "location": "import",
+              "path": "../../global/shared-types/icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Icon to display in the header of the section"
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
       "invalid": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/collapsible-section/collapsible-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"collapsible-section.js","sourceRoot":"","sources":["../../../src/components/collapsible-section/collapsible-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n Element,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/*\n A collapsible section can be used to group related content together\n * and hide the group when not needed.\n * Using this component can help to:\n * - Save vertical space by hiding non-essential content\n * - Improve content organization and scannability of the user interface\n * - Reduce cognitive load by displaying only a set of relevant information at a time\n * - Or disclose complex information, progressively to the user\n \n @slot - Content to put inside the collapsible section\n * @slot header - Optional slot for custom header content\n \n @exampleComponent limel-example-collapsible-section-basic\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-with-custom-header-component\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n * @exampleComponent limel-example-collapsible-section-invalid\n * @exampleComponent limel-example-collapsible-section-css-props\n /\n@Component({\n tag: 'limel-collapsible-section',\n shadow: true,\n styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n /\n `true` if the section is expanded, `false` if collapsed.\n /\n @Prop({ mutable: true, reflect: true })\n public isOpen: boolean = false;\n\n /\n Text to display in the header of the section\n /\n @Prop({ reflect: true })\n public header: string;\n\n /\n `true` if the section is invalid, `false` if valid.\n * This can be used to indicate that the content inside the section is invalid.\n /\n @Prop({ reflect: true })\n public invalid = false;\n\n /\n Actions to place to the far right inside the header\n /\n @Prop()\n public actions: Action[];\n\n /\n Emitted when the section is expanded\n /\n @Event()\n private open: EventEmitter<void>;\n\n /\n Emitted when the section is collapsed\n /\n @Event()\n private close: EventEmitter<void>;\n\n /\n Emitted when an action is clicked inside the header\n */\n @Event()\n private action: EventEmitter<Action>;\n\n @Element()\n private host: HTMLElement;\n\n private bodyId = createRandomString();\n\n public componentDidRender() {\n const button = this.host.shadowRoot.querySelector(\n '.open-close-toggle',\n ) as HTMLElement;\n\n makeEnterClickable(button);\n }\n\n public disconnectedCallback() {\n const button = this.host.shadowRoot.querySelector(\n '.open-close-toggle',\n ) as HTMLElement;\n\n removeEnterClickable(button);\n }\n\n public render() {\n return (\n <section\n class={`${this.isOpen ? 'open' : ''}`}\n aria-invalid={this.invalid}\n >\n <header>\n <button\n class=\"open-close-toggle\"\n onClick={this.onClick}\n aria-controls={this.bodyId}\n />\n <div class=\"expand-icon\">\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n </div>\n <h2 class=\"title mdc-typography mdc-typography--headline2\">\n {this.header}\n </h2>\n <div class=\"divider-line\" />\n {this.renderHeaderSlot()}\n {this.renderActions()}\n </header>\n <div\n class=\"body\"\n aria-hidden={String(!this.isOpen)}\n id={this.bodyId}\n >\n <slot />\n </div>\n </section>\n );\n }\n\n private onClick = () => {\n this.handleInteraction();\n };\n\n private handleInteraction = () => {\n this.isOpen = !this.isOpen;\n\n if (this.isOpen) {\n this.open.emit();\n const waitForUiToRender = 100;\n setTimeout(dispatchResizeEvent, waitForUiToRender);\n } else {\n this.close.emit();\n }\n };\n\n private renderActions = () => {\n if (!this.actions) {\n return;\n }\n\n return (\n <div class=\"actions\">\n {this.actions.map(this.renderActionButton)}\n </div>\n );\n };\n\n private renderHeaderSlot() {\n return <slot name=\"header\" />;\n }\n\n private renderActionButton = (action: Action) => {\n return (\n <limel-icon-button\n icon={action.icon}\n label={action.label}\n disabled={action.disabled}\n onClick={this.handleActionClick(action)}\n />\n );\n };\n\n private handleActionClick = (action: Action) => (event: MouseEvent) => {\n event.stopPropagation();\n this.action.emit(action);\n };\n}\n"]}
1	+ {"version":3,"file":"collapsible-section.js","sourceRoot":"","sources":["../../../src/components/collapsible-section/collapsible-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n Element,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport {\n getIconColor,\n getIconName,\n getIconTitle,\n} from '../icon/get-icon-props';\n\n/*\n A collapsible section can be used to group related content together\n * and hide the group when not needed.\n * Using this component can help to:\n * - Save vertical space by hiding non-essential content\n * - Improve content organization and scannability of the user interface\n * - Reduce cognitive load by displaying only a set of relevant information at a time\n * - Or disclose complex information, progressively to the user\n \n @slot - Content to put inside the collapsible section\n * @slot header - Optional slot for custom header content\n \n @exampleComponent limel-example-collapsible-section-basic\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-with-custom-header-component\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n * @exampleComponent limel-example-collapsible-section-invalid\n * @exampleComponent limel-example-collapsible-section-icon\n * @exampleComponent limel-example-collapsible-section-css-props\n /\n@Component({\n tag: 'limel-collapsible-section',\n shadow: true,\n styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n /\n `true` if the section is expanded, `false` if collapsed.\n /\n @Prop({ mutable: true, reflect: true })\n public isOpen: boolean = false;\n\n /\n Text to display in the header of the section\n /\n @Prop({ reflect: true })\n public header: string;\n\n /\n Icon to display in the header of the section\n /\n @Prop()\n public icon?: string \| Icon;\n\n /\n `true` if the section is invalid, `false` if valid.\n * This can be used to indicate that the content inside the section is invalid.\n /\n @Prop({ reflect: true })\n public invalid = false;\n\n /\n Actions to place to the far right inside the header\n /\n @Prop()\n public actions: Action[];\n\n /\n Emitted when the section is expanded\n /\n @Event()\n private open: EventEmitter<void>;\n\n /\n Emitted when the section is collapsed\n /\n @Event()\n private close: EventEmitter<void>;\n\n /\n Emitted when an action is clicked inside the header\n */\n @Event()\n private action: EventEmitter<Action>;\n\n @Element()\n private host: HTMLElement;\n\n private bodyId = createRandomString();\n private headingId = createRandomString();\n\n public componentDidRender() {\n const button = this.host.shadowRoot.querySelector(\n '.open-close-toggle',\n ) as HTMLElement;\n\n makeEnterClickable(button);\n }\n\n public disconnectedCallback() {\n const button = this.host.shadowRoot.querySelector(\n '.open-close-toggle',\n ) as HTMLElement;\n\n removeEnterClickable(button);\n }\n\n public render() {\n return (\n <section\n class={`${this.isOpen ? 'open' : ''}`}\n aria-invalid={this.invalid}\n aria-labelledby={this.header ? this.headingId : null}\n >\n <header>\n <button\n class=\"open-close-toggle\"\n onClick={this.onClick}\n aria-controls={this.bodyId}\n />\n <div class=\"expand-icon\">\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n </div>\n {this.renderIcon()}\n {this.renderHeading()}\n <div class=\"divider-line\" role=\"presentation\" />\n {this.renderHeaderSlot()}\n {this.renderActions()}\n </header>\n <div\n class=\"body\"\n aria-hidden={String(!this.isOpen)}\n id={this.bodyId}\n >\n <slot />\n </div>\n </section>\n );\n }\n\n private onClick = () => {\n this.handleInteraction();\n };\n\n private handleInteraction = () => {\n this.isOpen = !this.isOpen;\n\n if (this.isOpen) {\n this.open.emit();\n const waitForUiToRender = 100;\n setTimeout(dispatchResizeEvent, waitForUiToRender);\n } else {\n this.close.emit();\n }\n };\n\n private renderIcon = () => {\n if (!this.icon) {\n return;\n }\n\n const name = getIconName(this.icon);\n const color = getIconColor(this.icon);\n const title = getIconTitle(this.icon);\n\n return (\n <limel-icon\n name={name}\n aria-label={title}\n aria-hidden={title ? null : 'true'}\n style={{\n color: `${color}`,\n }}\n />\n );\n };\n\n private renderHeading = () => {\n if (!this.header) {\n return;\n }\n\n return (\n <h2\n class=\"title mdc-typography mdc-typography--headline2\"\n id={this.headingId}\n >\n {this.header}\n </h2>\n );\n };\n\n private renderActions = () => {\n if (!this.actions) {\n return;\n }\n\n return (\n <div class=\"actions\">\n {this.actions.map(this.renderActionButton)}\n </div>\n );\n };\n\n private renderHeaderSlot() {\n return <slot name=\"header\" />;\n }\n\n private renderActionButton = (action: Action) => {\n return (\n <limel-icon-button\n icon={action.icon}\n label={action.label}\n disabled={action.disabled}\n onClick={this.handleActionClick(action)}\n />\n );\n };\n\n private handleActionClick = (action: Action) => (event: MouseEvent) => {\n event.stopPropagation();\n this.action.emit(action);\n };\n}\n"]}

package/dist/collection/components/info-tile/info-tile.css CHANGED Viewed

@@ -149,6 +149,11 @@ a {
   background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));
 }
+:host ::slotted([slot=primary]) {
+  width: 100%;
+  height: 100%;
+}
 .icon {
   z-index: 1;
   position: absolute;
@@ -165,17 +170,27 @@ a {
     width: max(10%, 3rem);
   }
 }
-.has-circular-progress .icon {
+:host(.has-primary-slot-content) .icon, a:has(limel-circular-progress) .icon {
   top: unset;
   bottom: 0.5rem;
   --icon-min-size: 1.5rem;
   --icon-preferred-size: 20cqh;
 }
-.progress {
+slot[name=primary] {
+  display: block;
+  aspect-ratio: 1;
+  width: min(var(--icon-preferred-size), var(--icon-max-size));
+}
+.progress,
+slot[name=primary] {
   position: absolute;
   top: 0.75rem;
   right: 0.75rem;
+}
+.progress {
   --circular-progress-size: min(
       var(--icon-preferred-size),
       var(--icon-max-size)
@@ -272,7 +287,8 @@ limel-linear-progress {
 }
 @container (width < 8rem) {
-  .progress {
+  .progress,
+  slot[name=primary] {
     top: 0.25rem;
     right: 0.25rem;
   }
@@ -282,7 +298,8 @@ limel-linear-progress {
   }
 }
 @container (width < 18.75rem) {
-  .progress {
+  .progress,
+  slot[name=primary] {
     top: 0.5rem;
     right: 0.5rem;
   }
@@ -290,7 +307,7 @@ limel-linear-progress {
     top: 0.25rem;
     right: 0.5rem;
   }
-  .has-circular-progress .icon {
+  :host(.has-primary-slot-content) .icon, a:has(limel-circular-progress) .icon {
     right: 0.25rem;
     bottom: 0.25rem;
   }
@@ -335,6 +352,7 @@ limel-linear-progress {
 }
 @container (height > 18.75rem) {
   .progress,
+  slot[name=primary],
   .icon {
     position: relative;
     top: unset;
@@ -347,7 +365,8 @@ limel-linear-progress {
   .label {
     text-align: center;
   }
-  .has-circular-progress .icon {
+  :host(.has-primary-slot-content) .icon,
+  a:has(limel-circular-progress) .icon {
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;

package/dist/collection/components/info-tile/info-tile.js CHANGED Viewed

@@ -13,6 +13,7 @@ import { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';
  * @exampleComponent limel-example-info-tile-badge
  * @exampleComponent limel-example-info-tile-progress
  * @exampleComponent limel-example-info-tile-loading
+ * @exampleComponent limel-example-info-tile-primary-slot
  * @exampleComponent limel-example-info-tile-styling
  */
 export class InfoTile {
@@ -45,11 +46,20 @@ export class InfoTile {
         return h("limel-icon", { class: "icon", name: this.icon });
       }
     };
+    this.updateHasPrimarySlotContent = (e) => {
+      var _a;
+      const slot = (_a = e === null || e === void 0 ? void 0 : e.target) !== null && _a !== void 0 ? _a : this.host.shadowRoot.querySelector('slot[name="primary"]');
+      this.hasPrimarySlot = slot && slot.assignedElements().length > 0;
+    };
     this.renderProgress = () => {
       var _a, _b;
-      if (((_a = this.progress) === null || _a === void 0 ? void 0 : _a.value) || ((_b = this.progress) === null || _b === void 0 ? void 0 : _b.value) === 0) {
-        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 }));
+      if (this.hasPrimarySlot) {
+        return;
+      }
+      if (!((_a = this.progress) === null || _a === void 0 ? void 0 : _a.value) && ((_b = this.progress) === null || _b === void 0 ? void 0 : _b.value) !== 0) {
+        return;
       }
+      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 }));
     };
     this.renderLabel = () => {
       if (this.label) {
@@ -76,14 +86,16 @@ export class InfoTile {
     this.loading = false;
     this.link = undefined;
     this.progress = undefined;
+    this.hasPrimarySlot = false;
   }
   componentWillLoad() {
     const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
     this.handleMouseEnter = handleMouseEnter;
     this.handleMouseLeave = handleMouseLeave;
+    this.updateHasPrimarySlotContent();
   }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const extendedAriaLabel = this.checkProps(this === null || this === void 0 ? void 0 : this.prefix) +
       this.value +
       ' ' +
@@ -95,11 +107,9 @@ export class InfoTile {
       this.checkProps((_c = this === null || this === void 0 ? void 0 : this.progress) === null || _c === void 0 ? void 0 : _c.suffix) +
       this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
     const link = !this.disabled ? (_e = this.link) === null || _e === void 0 ? void 0 : _e.href : '#';
-    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: {
+    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: {
         'is-clickable': !!((_h = this.link) === null || _h === void 0 ? void 0 : _h.href) && !this.disabled,
-        'has-circular-progress': !!((_j = this.progress) === null || _j === void 0 ? void 0 : _j.value) ||
-          ((_k = this.progress) === null || _k === void 0 ? void 0 : _k.value) === 0,
-      } }, 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()));
+      } }, 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()));
   }
   checkProps(propValue) {
     return !propValue ? '' : propValue + ' ';
@@ -299,6 +309,11 @@ export class InfoTile {
       }
     };
   }
+  static get states() {
+    return {
+      "hasPrimarySlot": {}
+    };
+  }
   static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=info-tile.js.map

package/dist/collection/components/info-tile/info-tile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"info-tile.js","sourceRoot":"","sources":["../../../src/components/info-tile/info-tile.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1	+ {"version":3,"file":"info-tile.js","sourceRoot":"","sources":["../../../src/components/info-tile/info-tile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAExE;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,QAAQ;;IAgKT,iBAAY,GAAG,GAAG,EAAE;MACxB,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,OAAO,YAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CAAC;OACpD;IACL,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;;MACvB,MAAM,cAAc,GAAG,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC;MAE5D,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE;QAC7B,OAAO,YAAM,KAAK,EAAC,OAAO,yBAAW,CAAC;OACzC;MAED,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAO,CACH,YACI,KAAK,EAAE;YACH,KAAK,EAAE,IAAI;YACX,CAAC,MAAM,cAAc,EAAE,CAAC,EAAE,IAAI;WACjC,IAEA,IAAI,CAAC,KAAK,CACR,CACV,CAAC;OACL;IACL,CAAC,CAAC;IAEM,iBAAY,GAAG,GAAG,EAAE;MACxB,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,OAAO,YAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CAAC;OACpD;IACL,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACtB,IAAI,IAAI,CAAC,IAAI,EAAE;QACX,OAAO,kBAAY,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;OACvD;IACL,CAAC,CAAC;IAEM,gCAA2B,GAAG,CAAC,CAAS,EAAE,EAAE;;MAChD,MAAM,IAAI,GACN,MAAC,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAA0B,mCAC9B,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;MAC/D,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IACrE,CAAC,CAAC;IAEM,mBAAc,GAAG,GAAG,EAAE;;MAC1B,IAAI,IAAI,CAAC,cAAc,EAAE;QACrB,OAAO;OACV;MAED,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,CAAA,IAAI,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,MAAK,CAAC,EAAE;QACrD,OAAO;OACV;MAED,OAAO,CACH,+BACI,KAAK,EAAC,UAAU,EAChB,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,EAC5B,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,EAC1B,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAChC,uBAAuB,EAAE,IAAI,CAAC,QAAQ,CAAC,uBAAuB,GAChE,CACL,CAAC;IACN,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACvB,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAO,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAC;OAClD;IACL,CAAC,CAAC;IAEM,uBAAkB,GAAG,GAAG,EAAE;MAC9B,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAO,mBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;OAC7C;IACL,CAAC,CAAC;IAEM,kBAAa,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,OAAO,EAAE;QACd,OAAO,6BAAuB,aAAa,EAAE,IAAI,GAAI,CAAC;OACzD;IACL,CAAC,CAAC;;;iBAjOsB,IAAI;;;oBAkBT,KAAK;;mBAcN,KAAK;;;0BAoCE,KAAK;;EAKvB,iBAAiB;IACpB,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAChE,IAAI,CAAC,IAAI,CACZ,CAAC;IACF,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;IACzC,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;IACzC,IAAI,CAAC,2BAA2B,EAAE,CAAC;EACvC,CAAC;EAEM,MAAM;;IACT,MAAM,iBAAiB,GACnB,IAAI,CAAC,UAAU,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC;MAC7B,IAAI,CAAC,KAAK;MACV,GAAG;MACH,IAAI,CAAC,UAAU,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAC;MAC5B,IAAI;MACJ,IAAI,CAAC,UAAU,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,0CAAE,MAAM,CAAC;MACvC,IAAI,CAAC,UAAU,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,0CAAE,KAAK,CAAC;MACtC,IAAI,CAAC,UAAU,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,0CAAE,MAAM,CAAC;MACvC,IAAI,CAAC,UAAU,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,KAAK,CAAC,CAAC;IAEvC,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;IAEpD,OAAO,CACH,EAAC,IAAI,IACD,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,KAAK,EAAE,EAAE,0BAA0B,EAAE,IAAI,CAAC,cAAc,EAAE;MAE1D,SACI,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EACvB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,EACzB,QAAQ,EAAC,GAAG,gBACA,iBAAiB,mBACd,IAAI,CAAC,QAAQ,eACjB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,eAChC,QAAQ,EAClB,KAAK,EAAE;UACH,cAAc,EAAE,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,CAAA,IAAI,CAAC,IAAI,CAAC,QAAQ;SACtD;QAEA,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,cAAc,EAAE;QACtB,YACI,IAAI,EAAC,SAAS,EACd,YAAY,EAAE,IAAI,CAAC,2BAA2B,GAChD;QACF,WAAK,KAAK,EAAC,aAAa;UACnB,IAAI,CAAC,YAAY,EAAE;UACpB,WAAK,KAAK,EAAC,kBAAkB;YACxB,IAAI,CAAC,WAAW,EAAE;YAClB,IAAI,CAAC,YAAY,EAAE,CAClB;UACL,IAAI,CAAC,aAAa,EAAE,CACnB;QACL,IAAI,CAAC,WAAW,EAAE;QACnB,qCAA8B,CAC9B;MACH,IAAI,CAAC,kBAAkB,EAAE,CACvB,CACV,CAAC;EACN,CAAC;EAEO,UAAU,CAAC,SAAS;IACxB,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,CAAC;EAC7C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFJ","sourcesContent":["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"]}

package/dist/esm/{file-metadata-01403ecd.js → file-metadata-77f9e2dd.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { g as getIconName, a as getIconColor, b as getIconBackgroundColor } from './get-icon-props-5a77e17e.js';
+import { g as getIconName, a as getIconColor, c as getIconBackgroundColor } from './get-icon-props-37514418.js';
 const DEFAULT_ICON_BACKGROUND_COLOR = 'rgba(var(--color-gray-lighter), 0.4)';
 const CALENDAR_ICON_BACKGROUND_COLOR = 'rgba(var(--color-cyan-lighter), 0.4)';
@@ -391,4 +391,4 @@ function getExtension(file) {
 export { getFileExtensionTitle as a, getFileColor as b, getFileBackgroundColor as c, getFileIcon as g };
-//# sourceMappingURL=file-metadata-01403ecd.js.map
+//# sourceMappingURL=file-metadata-77f9e2dd.js.map