@limetech/lime-elements 38.18.0 → 38.19.0

package/dist/cjs/loader.cjs.js

@@ -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],\"icon\":[1],\"invalid\":[516],\"actions\":[16],\"language\":[513]}]]],[\"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);
+  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],\"language\":[513]}]]],[\"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],\"size\":[513],\"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/chip/chip.css

@@ -79,7 +79,7 @@
 * @prop --chip-readonly-border-color: Color of the border in readonly state. Defaults to `rgb(var(--contrast-800), 0.5)`.
 */
 :host(limel-chip) {
-  --limel-chip-height: 1.75rem;
+  --limel-chip-height: var(--limel-chip-size, 1.75rem);
   --limel-chip-gap: 0.5rem;
   isolation: isolate;
   display: inline-flex;
@@ -87,6 +87,11 @@
   min-width: 0;
 }
 
+:host(limel-chip[size=small]) {
+  --limel-chip-height: 1.5rem;
+  --limel-chip-gap: 0.25rem;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -102,7 +107,7 @@
   max-width: min(var(--chip-max-width, 100%), 25rem);
   height: var(--limel-chip-height);
   border-radius: var(--limel-chip-height);
-  font-size: 0.875rem;
+  font-size: clamp(0.8125rem, var(--limel-chip-height) - 0.875rem, 1rem);
   padding: 0 0.125rem;
 }
 .chip:has(limel-icon) .text, .chip:has(img) .text {

package/dist/collection/components/chip/chip.js

@@ -47,6 +47,7 @@ import { isEmpty } from 'lodash-es';
  * @exampleComponent limel-example-chip-menu
  * @exampleComponent limel-example-chip-loading
  * @exampleComponent limel-example-chip-progress
+ * @exampleComponent limel-example-chip-size
  * @exampleComponent limel-example-chip-readonly-border
  * @exampleComponent limel-example-chip-aria-role
  */
@@ -124,6 +125,7 @@ export class Chip {
     this.loading = false;
     this.progress = undefined;
     this.identifier = crypto.randomUUID();
+    this.size = 'default';
     this.menuItems = [];
   }
   componentWillLoad() {
@@ -514,6 +516,24 @@ export class Chip {
         "reflect": true,
         "defaultValue": "crypto.randomUUID()"
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'default'",
+          "resolved": "\"default\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the size of the chip."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'default'"
+      },
       "menuItems": {
         "type": "unknown",
         "mutable": false,

package/dist/collection/components/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n} from '@stencil/core';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getRel } from '../../util/link-helper';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport { BACKSPACE, DELETE } from '../../util/keycodes';\nimport { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';\nimport { Image } from '../../global/shared-types/image.types';\nimport { isEmpty } from 'lodash-es';\n\nimport { ListSeparator } from '../list/list-item.types';\nimport { LimelMenuCustomEvent, MenuItem } from '../../components';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    identifier?: number | string;\n\n    /**\n     * The value of the badge.\n     */\n    badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-image\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-menu\n * @exampleComponent limel-example-chip-loading\n * @exampleComponent limel-example-chip-progress\n * @exampleComponent limel-example-chip-readonly-border\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n    tag: 'limel-chip',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Label displayed on the chip\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * Icon of the chip.\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * A picture to be displayed instead of the icon on the chip.\n     */\n    @Prop()\n    public image?: Image;\n\n    /**\n     * If supplied, the chip will become a clickable link.\n     */\n    @Prop()\n    public link?: Omit<Link, 'text'>;\n\n    /**\n     * The value of the badge, displayed on the chip.\n     */\n    @Prop({ reflect: true })\n    public badge?: string | number;\n\n    /**\n     * Set to `true` to disable the chip.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to render the chip as a static UI element.\n     * Useful when the parent component has a `readonly` state.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to visualize the chip in a \"selected\" state.\n     * This is typically used when the chip is used in a chip-set\n     * along with other chips.\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * Set to `true` to visualize the chip in an \"invalid\" or \"error\" state.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Set to `true` to render a remove button on the chip.\n     */\n    @Prop({ reflect: true })\n    public removable = false;\n\n    /**\n     * Set to `filter` to render the chip with a distinct style\n     * suitable for visualizing filters.\n     *\n     * @beta\n     */\n    @Prop({ reflect: true })\n    public type?: ChipType = 'default';\n\n    /**\n     * Set to `true` to put the component in the `loading` state,\n     * and render an indeterminate progress indicator inside the chip.\n     * This does _not_ disable the interactivity of the chip!\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * Reflects the current value of a progress bar on the chip,\n     * visualizing the percentage of an ongoing process.\n     * Must be a number between `0` and `100`.\n     */\n    @Prop({ reflect: true })\n    public progress?: number;\n\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    @Prop({ reflect: true })\n    public identifier?: number | string = crypto.randomUUID();\n\n    /**\n     * When provided, the chip will render an ellipsis menu with the supplied items.\n     * Also, this will hide the \"remove button\" when `removable={true}`, as\n     * the remove button will automatically become the last item in the menu.\n     */\n    @Prop()\n    public menuItems?: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Fired when clicking on the remove button of a `removable` chip.\n     * The value of `identifier` is emitted as the event detail.\n     */\n    @Event()\n    public remove: EventEmitter<number | string>;\n\n    /**\n     * Emitted when a menu item is selected from the actions menu.\n     */\n    @Event()\n    public menuItemSelected: EventEmitter<MenuItem>;\n\n    @Element()\n    private host: HTMLLimelChipElement;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                {this.link ? this.renderAsLink() : this.renderAsButton()}\n            </Host>\n        );\n    }\n\n    private renderAsButton = () => {\n        return [\n            <button\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                role=\"button\"\n                disabled={this.disabled || this.readonly}\n                aria-busy={this.loading ? 'true' : 'false'}\n                aria-live=\"polite\"\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </button>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderAsLink = () => {\n        const rel = getRel(this.link?.target, this.link?.rel);\n\n        return [\n            <a\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                href={this.link.href}\n                title={this.link.title}\n                target={this.link.target}\n                rel={rel}\n                aria-disabled={this.disabled || this.readonly}\n                tabindex={this.disabled || this.readonly ? -1 : 0}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </a>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderLabel = () => {\n        return <span class=\"text\">{this.text}</span>;\n    };\n\n    private renderPicture() {\n        const icon = getIconName(this.icon);\n\n        if (!icon && !this.image) {\n            return;\n        }\n\n        if (!isEmpty(this.image)) {\n            return (\n                <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />\n            );\n        }\n\n        return (\n            <limel-icon\n                badge={true}\n                name={icon}\n                style={{\n                    color: `${(this.icon as Icon)?.color}`,\n                    'background-color': `${\n                        (this.icon as Icon)?.backgroundColor\n                    }`,\n                }}\n            />\n        );\n    }\n\n    private renderBadge() {\n        if (!this.badge) {\n            return;\n        }\n\n        return <limel-badge label={this.badge} />;\n    }\n\n    private renderRemoveButton() {\n        if (\n            !this.removable ||\n            this.readonly ||\n            this.disabled ||\n            !!this.menuItems?.length\n        ) {\n            return;\n        }\n\n        const svgData =\n            '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n        return (\n            <button\n                class=\"trailing-button remove-button\"\n                tabIndex={-1}\n                aria-label={this.removeChipLabel}\n                aria-controls={'chip-' + this.identifier}\n                innerHTML={svgData}\n                onClick={this.handleRemoveClick}\n            />\n        );\n    }\n\n    private renderActionsMenu() {\n        if (!this.menuItems?.length) {\n            return;\n        }\n\n        const svgData =\n            '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" xml:space=\"preserve\"><circle fill=\"currentColor\" cx=\"16\" cy=\"16\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"24\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"8\" r=\"2\"/></svg>';\n\n        const menuItems = this.getMenuItems();\n\n        return (\n            <limel-menu\n                items={menuItems}\n                onSelect={this.handleActionMenuSelect}\n                openDirection=\"bottom-end\"\n                onCancel={this.handleActionMenuCancel}\n            >\n                <button\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                    class=\"trailing-button\"\n                    aria-label={this.actionMenuLabel}\n                    innerHTML={svgData}\n                />\n            </limel-menu>\n        );\n    }\n\n    private getMenuItems() {\n        let menuItems = [...this.menuItems];\n\n        if (this.removable) {\n            menuItems = [\n                ...menuItems,\n                { separator: true },\n                {\n                    text: this.removeChipLabel(),\n                    icon: {\n                        name: 'delete_sign',\n                        color: 'rgb(var(--color-red-default))',\n                    },\n                    value: '_remove',\n                },\n            ];\n        }\n\n        return menuItems;\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled || this.readonly) {\n            e.preventDefault();\n        }\n    };\n\n    private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n        this.remove.emit(this.identifier);\n    };\n\n    private handleDeleteKeyDown = (event: KeyboardEvent) => {\n        if (!this.removable) {\n            return;\n        }\n\n        const keys = [DELETE, BACKSPACE];\n\n        if (keys.includes(event.key)) {\n            this.handleRemoveClick(event);\n        }\n    };\n\n    private removeChipLabel = (): string => {\n        return translate.get('remove', this.language) + ' ' + this.text;\n    };\n\n    private actionMenuLabel = (): string => {\n        return translate.get('file-viewer.more-actions', this.language);\n    };\n\n    private renderSpinner() {\n        if (!this.loading) {\n            return;\n        }\n\n        return <limel-linear-progress indeterminate={true} />;\n    }\n\n    private renderProgressBar() {\n        if (!this.progress) {\n            return;\n        }\n\n        const currentPercentage = this.progress + '%';\n\n        return (\n            <div\n                role=\"progressbar\"\n                aria-label=\"%\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                aria-valuenow={this.progress}\n                style={{\n                    '--limel-chip-progress-percentage': currentPercentage,\n                }}\n            />\n        );\n    }\n\n    private handleActionMenuSelect = (\n        event: LimelMenuCustomEvent<MenuItem>,\n    ) => {\n        const menuItem = event.detail;\n\n        if (!menuItem) {\n            return;\n        }\n\n        if (menuItem.value === '_remove') {\n            this.remove.emit(this.identifier);\n\n            return;\n        }\n\n        this.menuItemSelected.emit(menuItem);\n    };\n\n    private handleActionMenuCancel = (event: LimelMenuCustomEvent<void>) => {\n        event.stopPropagation();\n    };\n}\n"]}
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n} from '@stencil/core';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getRel } from '../../util/link-helper';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport { BACKSPACE, DELETE } from '../../util/keycodes';\nimport { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';\nimport { Image } from '../../global/shared-types/image.types';\nimport { isEmpty } from 'lodash-es';\n\nimport { ListSeparator } from '../list/list-item.types';\nimport { LimelMenuCustomEvent, MenuItem } from '../../components';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    identifier?: number | string;\n\n    /**\n     * The value of the badge.\n     */\n    badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-image\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-menu\n * @exampleComponent limel-example-chip-loading\n * @exampleComponent limel-example-chip-progress\n * @exampleComponent limel-example-chip-size\n * @exampleComponent limel-example-chip-readonly-border\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n    tag: 'limel-chip',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Label displayed on the chip\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * Icon of the chip.\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * A picture to be displayed instead of the icon on the chip.\n     */\n    @Prop()\n    public image?: Image;\n\n    /**\n     * If supplied, the chip will become a clickable link.\n     */\n    @Prop()\n    public link?: Omit<Link, 'text'>;\n\n    /**\n     * The value of the badge, displayed on the chip.\n     */\n    @Prop({ reflect: true })\n    public badge?: string | number;\n\n    /**\n     * Set to `true` to disable the chip.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to render the chip as a static UI element.\n     * Useful when the parent component has a `readonly` state.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to visualize the chip in a \"selected\" state.\n     * This is typically used when the chip is used in a chip-set\n     * along with other chips.\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * Set to `true` to visualize the chip in an \"invalid\" or \"error\" state.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Set to `true` to render a remove button on the chip.\n     */\n    @Prop({ reflect: true })\n    public removable = false;\n\n    /**\n     * Set to `filter` to render the chip with a distinct style\n     * suitable for visualizing filters.\n     *\n     * @beta\n     */\n    @Prop({ reflect: true })\n    public type?: ChipType = 'default';\n\n    /**\n     * Set to `true` to put the component in the `loading` state,\n     * and render an indeterminate progress indicator inside the chip.\n     * This does _not_ disable the interactivity of the chip!\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * Reflects the current value of a progress bar on the chip,\n     * visualizing the percentage of an ongoing process.\n     * Must be a number between `0` and `100`.\n     */\n    @Prop({ reflect: true })\n    public progress?: number;\n\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    @Prop({ reflect: true })\n    public identifier?: number | string = crypto.randomUUID();\n\n    /**\n     * Defines the size of the chip.\n     */\n    @Prop({ reflect: true })\n    public size: 'small' | 'default' = 'default';\n\n    /**\n     * When provided, the chip will render an ellipsis menu with the supplied items.\n     * Also, this will hide the \"remove button\" when `removable={true}`, as\n     * the remove button will automatically become the last item in the menu.\n     */\n    @Prop()\n    public menuItems?: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Fired when clicking on the remove button of a `removable` chip.\n     * The value of `identifier` is emitted as the event detail.\n     */\n    @Event()\n    public remove: EventEmitter<number | string>;\n\n    /**\n     * Emitted when a menu item is selected from the actions menu.\n     */\n    @Event()\n    public menuItemSelected: EventEmitter<MenuItem>;\n\n    @Element()\n    private host: HTMLLimelChipElement;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                {this.link ? this.renderAsLink() : this.renderAsButton()}\n            </Host>\n        );\n    }\n\n    private renderAsButton = () => {\n        return [\n            <button\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                role=\"button\"\n                disabled={this.disabled || this.readonly}\n                aria-busy={this.loading ? 'true' : 'false'}\n                aria-live=\"polite\"\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </button>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderAsLink = () => {\n        const rel = getRel(this.link?.target, this.link?.rel);\n\n        return [\n            <a\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                href={this.link.href}\n                title={this.link.title}\n                target={this.link.target}\n                rel={rel}\n                aria-disabled={this.disabled || this.readonly}\n                tabindex={this.disabled || this.readonly ? -1 : 0}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </a>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderLabel = () => {\n        return <span class=\"text\">{this.text}</span>;\n    };\n\n    private renderPicture() {\n        const icon = getIconName(this.icon);\n\n        if (!icon && !this.image) {\n            return;\n        }\n\n        if (!isEmpty(this.image)) {\n            return (\n                <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />\n            );\n        }\n\n        return (\n            <limel-icon\n                badge={true}\n                name={icon}\n                style={{\n                    color: `${(this.icon as Icon)?.color}`,\n                    'background-color': `${\n                        (this.icon as Icon)?.backgroundColor\n                    }`,\n                }}\n            />\n        );\n    }\n\n    private renderBadge() {\n        if (!this.badge) {\n            return;\n        }\n\n        return <limel-badge label={this.badge} />;\n    }\n\n    private renderRemoveButton() {\n        if (\n            !this.removable ||\n            this.readonly ||\n            this.disabled ||\n            !!this.menuItems?.length\n        ) {\n            return;\n        }\n\n        const svgData =\n            '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n        return (\n            <button\n                class=\"trailing-button remove-button\"\n                tabIndex={-1}\n                aria-label={this.removeChipLabel}\n                aria-controls={'chip-' + this.identifier}\n                innerHTML={svgData}\n                onClick={this.handleRemoveClick}\n            />\n        );\n    }\n\n    private renderActionsMenu() {\n        if (!this.menuItems?.length) {\n            return;\n        }\n\n        const svgData =\n            '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" xml:space=\"preserve\"><circle fill=\"currentColor\" cx=\"16\" cy=\"16\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"24\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"8\" r=\"2\"/></svg>';\n\n        const menuItems = this.getMenuItems();\n\n        return (\n            <limel-menu\n                items={menuItems}\n                onSelect={this.handleActionMenuSelect}\n                openDirection=\"bottom-end\"\n                onCancel={this.handleActionMenuCancel}\n            >\n                <button\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                    class=\"trailing-button\"\n                    aria-label={this.actionMenuLabel}\n                    innerHTML={svgData}\n                />\n            </limel-menu>\n        );\n    }\n\n    private getMenuItems() {\n        let menuItems = [...this.menuItems];\n\n        if (this.removable) {\n            menuItems = [\n                ...menuItems,\n                { separator: true },\n                {\n                    text: this.removeChipLabel(),\n                    icon: {\n                        name: 'delete_sign',\n                        color: 'rgb(var(--color-red-default))',\n                    },\n                    value: '_remove',\n                },\n            ];\n        }\n\n        return menuItems;\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled || this.readonly) {\n            e.preventDefault();\n        }\n    };\n\n    private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n        this.remove.emit(this.identifier);\n    };\n\n    private handleDeleteKeyDown = (event: KeyboardEvent) => {\n        if (!this.removable) {\n            return;\n        }\n\n        const keys = [DELETE, BACKSPACE];\n\n        if (keys.includes(event.key)) {\n            this.handleRemoveClick(event);\n        }\n    };\n\n    private removeChipLabel = (): string => {\n        return translate.get('remove', this.language) + ' ' + this.text;\n    };\n\n    private actionMenuLabel = (): string => {\n        return translate.get('file-viewer.more-actions', this.language);\n    };\n\n    private renderSpinner() {\n        if (!this.loading) {\n            return;\n        }\n\n        return <limel-linear-progress indeterminate={true} />;\n    }\n\n    private renderProgressBar() {\n        if (!this.progress) {\n            return;\n        }\n\n        const currentPercentage = this.progress + '%';\n\n        return (\n            <div\n                role=\"progressbar\"\n                aria-label=\"%\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                aria-valuenow={this.progress}\n                style={{\n                    '--limel-chip-progress-percentage': currentPercentage,\n                }}\n            />\n        );\n    }\n\n    private handleActionMenuSelect = (\n        event: LimelMenuCustomEvent<MenuItem>,\n    ) => {\n        const menuItem = event.detail;\n\n        if (!menuItem) {\n            return;\n        }\n\n        if (menuItem.value === '_remove') {\n            this.remove.emit(this.identifier);\n\n            return;\n        }\n\n        this.menuItemSelected.emit(menuItem);\n    };\n\n    private handleActionMenuCancel = (event: LimelMenuCustomEvent<void>) => {\n        event.stopPropagation();\n    };\n}\n"]}

package/dist/collection/components/file/file.js

@@ -43,7 +43,7 @@ const DEFAULT_FILE_CHIP = {
 export class File {
   constructor() {
     this.dropZoneTip = () => {
-      return this.getTranslation('drag-and-drop-tips');
+      return this.getTranslation('file.drag-and-drop-tips');
     };
     this.handleNewFiles = (event) => {
       this.preventAndStop(event);
@@ -106,7 +106,7 @@ export class File {
     event.preventDefault();
   }
   getTranslation(key) {
-    return translate.get(`file.${key}`, this.language);
+    return translate.get(key, this.language);
   }
   static get is() { return "limel-file"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/file/file.js.map

@@ -1 +1 @@
-{"version":3,"file":"file.js","sourceRoot":"","sources":["../../../src/components/file/file.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAGlD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EACH,sBAAsB,EACtB,YAAY,EACZ,qBAAqB,EACrB,WAAW,GACd,MAAM,0BAA0B,CAAC;AAGlC,MAAM,iBAAiB,GAAS;EAC5B,EAAE,EAAE,IAAI;EACR,IAAI,EAAE,IAAI;EACV,SAAS,EAAE,IAAI;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAMH,MAAM,OAAO,IAAI;;IA2FL,gBAAW,GAAG,GAAW,EAAE;MAC/B,OAAO,IAAI,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;IACrD,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAA8B,EAAE,EAAE;MACxD,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;MAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACtC,CAAC,CAAC;IAsDM,wBAAmB,GAAG,CAAC,KAAkB,EAAE,EAAE;MACjD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,MAAM,IAAI,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;MAC3D,IAAI,CAAC,IAAI,EAAE;QACP,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;OAC1B;IACL,CAAC,CAAC;IAEM,uBAAkB,GAAG,CAAC,KAAwB,EAAE,EAAE;MACtD,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;MAC3B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IACxC,CAAC,CAAC;;;oBAlJyB,KAAK;oBAML,KAAK;oBAOL,KAAK;mBAOf,KAAK;kBAME,GAAG;oBAME,IAAI;;EAc1B,MAAM;IACT,OAAO;MACH,2BACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,EACxD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,eAAe,EAAE,IAAI,CAAC,cAAc,IAEnC,IAAI,CAAC,aAAa,EAAE,CACH;MACtB,IAAI,CAAC,oBAAoB,EAAE;KAC9B,CAAC;EACN,CAAC;EAEO,oBAAoB;IACxB,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;MAC9C,OAAO;KACV;IAED,OAAO,CACH,WAAK,KAAK,EAAC,mBAAmB;MAC1B,YAAM,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,cAAc,IACjD,IAAI,CAAC,KAAK,CACR;MACP,YAAM,KAAK,EAAC,KAAK,IAAE,IAAI,CAAC,WAAW,EAAE,CAAQ,CAC3C,CACT,CAAC;EACN,CAAC;EAWO,YAAY;IAChB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO,EAAE,CAAC;KACb;IAED,OAAO;sCAEI,iBAAiB,KACpB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EACzB,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,EACjB,IAAI,EAAE;UACF,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;UAC7B,KAAK,EAAE,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC;UACxC,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;UAC/B,eAAe,EAAE,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC;SACtD,EACD,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI;KAE5B,CAAC;EACN,CAAC;EAEO,aAAa;IACjB,MAAM,OAAO,GAAG,CACZ,sBACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAC,iBAAiB,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,mBAAmB,EAClC,UAAU,EAAE,IAAI,CAAC,kBAAkB,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAC5B,CACL,CAAC;IAEF,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,OAAO,OAAO,CAAC;KAClB;IAED,OAAO,CACH,wBACI,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAEvC,OAAO,CACO,CACtB,CAAC;EACN,CAAC;EAeO,cAAc,CAAC,KAAY;IAC/B,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,cAAc,EAAE,CAAC;EAC3B,CAAC;EAEO,cAAc,CAAC,GAAW;IAC9B,OAAO,SAAS,CAAC,GAAG,CAAC,QAAQ,GAAG,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;EACvD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import translate from '../../global/translations';\nimport { Chip } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport {\n    getFileBackgroundColor,\n    getFileColor,\n    getFileExtensionTitle,\n    getFileIcon,\n} from '../../util/file-metadata';\nimport { FileInfo } from '../../global/shared-types/file.types';\n\nconst DEFAULT_FILE_CHIP: Chip = {\n    id: null,\n    text: null,\n    removable: true,\n};\n\n/**\n * This component lets end-users select a *single* file from their device\n * storage. Regardless of the user's device or operating system, this component\n * opens up a file picker dialog that allows the user to choose a file.\n *\n * ## Using correct labels\n *\n * This file picker can be used in different contexts. The component's distinct\n * visual design including the upload icon hints end-users that this is not a\n * normal input field like other fields in the form for example.\n *\n * :::important\n * you need to use a descriptive `label` that clarifies the\n * functionality of the file picker, and/or provides users with clear\n * instructions.\n *\n * Depending on the context, you may need to avoid labels such as:\n * - File\n * - Document\n *\n * and instead consider using labels like:\n * - Attach a file\n * - Upload a file\n * - Choose a document\n * - Choose a file\n *\n * and similar phrases...\n * :::\n *\n * @exampleComponent limel-example-file\n * @exampleComponent limel-example-file-custom-icon\n * @exampleComponent limel-example-file-accepted-types\n * @exampleComponent limel-example-file-composite\n */\n@Component({\n    tag: 'limel-file',\n    shadow: true,\n    styleUrl: 'file.scss',\n})\nexport class File {\n    /**\n     * The selected file.\n     */\n    @Prop()\n    public value: FileInfo;\n\n    /**\n     * The input label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * True if the input should be disabled\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * Set to `true` to disable adding and removing files, but allow interaction\n     * with any already existing file.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the chosen file is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)\n     */\n    @Prop({ reflect: true })\n    public accept: string = '*';\n\n    /**\n     * Defines the localisation for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Dispatched when a file is selected/deselected\n     */\n    @Event()\n    private change: EventEmitter<FileInfo>;\n\n    /**\n     * Dispatched when clicking on a chip\n     */\n    @Event()\n    private interact: EventEmitter<number | string>;\n\n    public render() {\n        return [\n            <limel-file-dropzone\n                disabled={this.disabled || this.readonly || !!this.value}\n                accept={this.accept}\n                onFilesSelected={this.handleNewFiles}\n            >\n                {this.renderChipset()}\n            </limel-file-dropzone>,\n            this.renderDragAndDropTip(),\n        ];\n    }\n\n    private renderDragAndDropTip() {\n        if (this.value || this.disabled || this.readonly) {\n            return;\n        }\n\n        return (\n            <div class=\"drag-and-drop-tip\">\n                <span class=\"invisible-label-mock\" role=\"presentation\">\n                    {this.label}\n                </span>\n                <span class=\"tip\">{this.dropZoneTip()}</span>\n            </div>\n        );\n    }\n\n    private dropZoneTip = (): string => {\n        return this.getTranslation('drag-and-drop-tips');\n    };\n\n    private handleNewFiles = (event: CustomEvent<FileInfo[]>) => {\n        this.preventAndStop(event);\n        this.change.emit(event.detail[0]);\n    };\n\n    private getChipArray(): Chip[] {\n        if (!this.value) {\n            return [];\n        }\n\n        return [\n            {\n                ...DEFAULT_FILE_CHIP,\n                text: this.value.filename,\n                id: this.value.id,\n                icon: {\n                    name: getFileIcon(this.value),\n                    title: getFileExtensionTitle(this.value),\n                    color: getFileColor(this.value),\n                    backgroundColor: getFileBackgroundColor(this.value),\n                },\n                href: this.value.href,\n            },\n        ];\n    }\n\n    private renderChipset() {\n        const chipset = (\n            <limel-chip-set\n                disabled={this.disabled}\n                readonly={this.readonly}\n                invalid={this.invalid}\n                label={this.label}\n                leadingIcon=\"upload_to_cloud\"\n                language={this.language}\n                onChange={this.handleChipSetChange}\n                onInteract={this.handleChipInteract}\n                required={this.required}\n                type=\"input\"\n                value={this.getChipArray()}\n            />\n        );\n\n        if (this.value) {\n            return chipset;\n        }\n\n        return (\n            <limel-file-input\n                accept={this.accept}\n                disabled={this.disabled || this.readonly}\n            >\n                {chipset}\n            </limel-file-input>\n        );\n    }\n\n    private handleChipSetChange = (event: CustomEvent) => {\n        event.stopPropagation();\n        const file = !event.detail.length ? event.detail[0] : null;\n        if (!file) {\n            this.change.emit(file);\n        }\n    };\n\n    private handleChipInteract = (event: CustomEvent<Chip>) => {\n        this.preventAndStop(event);\n        this.interact.emit(event.detail.id);\n    };\n\n    private preventAndStop(event: Event) {\n        event.stopPropagation();\n        event.preventDefault();\n    }\n\n    private getTranslation(key: string) {\n        return translate.get(`file.${key}`, this.language);\n    }\n}\n"]}
+{"version":3,"file":"file.js","sourceRoot":"","sources":["../../../src/components/file/file.tsx"],"names":[],"mappings":"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","sourcesContent":["import translate from '../../global/translations';\nimport { Chip } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport {\n    getFileBackgroundColor,\n    getFileColor,\n    getFileExtensionTitle,\n    getFileIcon,\n} from '../../util/file-metadata';\nimport { FileInfo } from '../../global/shared-types/file.types';\n\nconst DEFAULT_FILE_CHIP: Chip = {\n    id: null,\n    text: null,\n    removable: true,\n};\n\n/**\n * This component lets end-users select a *single* file from their device\n * storage. Regardless of the user's device or operating system, this component\n * opens up a file picker dialog that allows the user to choose a file.\n *\n * ## Using correct labels\n *\n * This file picker can be used in different contexts. The component's distinct\n * visual design including the upload icon hints end-users that this is not a\n * normal input field like other fields in the form for example.\n *\n * :::important\n * you need to use a descriptive `label` that clarifies the\n * functionality of the file picker, and/or provides users with clear\n * instructions.\n *\n * Depending on the context, you may need to avoid labels such as:\n * - File\n * - Document\n *\n * and instead consider using labels like:\n * - Attach a file\n * - Upload a file\n * - Choose a document\n * - Choose a file\n *\n * and similar phrases...\n * :::\n *\n * @exampleComponent limel-example-file\n * @exampleComponent limel-example-file-custom-icon\n * @exampleComponent limel-example-file-accepted-types\n * @exampleComponent limel-example-file-composite\n */\n@Component({\n    tag: 'limel-file',\n    shadow: true,\n    styleUrl: 'file.scss',\n})\nexport class File {\n    /**\n     * The selected file.\n     */\n    @Prop()\n    public value: FileInfo;\n\n    /**\n     * The input label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * True if the input should be disabled\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * Set to `true` to disable adding and removing files, but allow interaction\n     * with any already existing file.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the chosen file is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)\n     */\n    @Prop({ reflect: true })\n    public accept: string = '*';\n\n    /**\n     * Defines the localisation for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Dispatched when a file is selected/deselected\n     */\n    @Event()\n    private change: EventEmitter<FileInfo>;\n\n    /**\n     * Dispatched when clicking on a chip\n     */\n    @Event()\n    private interact: EventEmitter<number | string>;\n\n    public render() {\n        return [\n            <limel-file-dropzone\n                disabled={this.disabled || this.readonly || !!this.value}\n                accept={this.accept}\n                onFilesSelected={this.handleNewFiles}\n            >\n                {this.renderChipset()}\n            </limel-file-dropzone>,\n            this.renderDragAndDropTip(),\n        ];\n    }\n\n    private renderDragAndDropTip() {\n        if (this.value || this.disabled || this.readonly) {\n            return;\n        }\n\n        return (\n            <div class=\"drag-and-drop-tip\">\n                <span class=\"invisible-label-mock\" role=\"presentation\">\n                    {this.label}\n                </span>\n                <span class=\"tip\">{this.dropZoneTip()}</span>\n            </div>\n        );\n    }\n\n    private dropZoneTip = (): string => {\n        return this.getTranslation('file.drag-and-drop-tips');\n    };\n\n    private handleNewFiles = (event: CustomEvent<FileInfo[]>) => {\n        this.preventAndStop(event);\n        this.change.emit(event.detail[0]);\n    };\n\n    private getChipArray(): Chip[] {\n        if (!this.value) {\n            return [];\n        }\n\n        return [\n            {\n                ...DEFAULT_FILE_CHIP,\n                text: this.value.filename,\n                id: this.value.id,\n                icon: {\n                    name: getFileIcon(this.value),\n                    title: getFileExtensionTitle(this.value),\n                    color: getFileColor(this.value),\n                    backgroundColor: getFileBackgroundColor(this.value),\n                },\n                href: this.value.href,\n            },\n        ];\n    }\n\n    private renderChipset() {\n        const chipset = (\n            <limel-chip-set\n                disabled={this.disabled}\n                readonly={this.readonly}\n                invalid={this.invalid}\n                label={this.label}\n                leadingIcon=\"upload_to_cloud\"\n                language={this.language}\n                onChange={this.handleChipSetChange}\n                onInteract={this.handleChipInteract}\n                required={this.required}\n                type=\"input\"\n                value={this.getChipArray()}\n            />\n        );\n\n        if (this.value) {\n            return chipset;\n        }\n\n        return (\n            <limel-file-input\n                accept={this.accept}\n                disabled={this.disabled || this.readonly}\n            >\n                {chipset}\n            </limel-file-input>\n        );\n    }\n\n    private handleChipSetChange = (event: CustomEvent) => {\n        event.stopPropagation();\n        const file = !event.detail.length ? event.detail[0] : null;\n        if (!file) {\n            this.change.emit(file);\n        }\n    };\n\n    private handleChipInteract = (event: CustomEvent<Chip>) => {\n        this.preventAndStop(event);\n        this.interact.emit(event.detail.id);\n    };\n\n    private preventAndStop(event: Event) {\n        event.stopPropagation();\n        event.preventDefault();\n    }\n\n    private getTranslation(key: string) {\n        return translate.get(key, this.language);\n    }\n}\n"]}

package/dist/collection/components/file-viewer/file-viewer.js

@@ -77,7 +77,7 @@ export class FileViewer {
       return officeViewers[this.officeViewer];
     };
     this.renderNoFileSupportMessage = () => {
-      return (h("div", { class: "no-support", role: "alert" }, h("limel-icon", { class: "icon--warning", name: "brake_warning", size: "large", role: "presentation" }), h("p", null, this.getTranslation('message.unsupported-filetype')), this.renderDownloadButton()));
+      return (h("div", { class: "no-support", role: "alert" }, h("limel-icon", { class: "icon--warning", name: "brake_warning", size: "large", role: "presentation" }), h("p", null, this.getTranslation('file-viewer.message.unsupported-filetype')), this.renderDownloadButton()));
     };
     this.renderButtons = () => {
       return (h("div", { class: "buttons" }, this.renderActionMenu(), this.renderToggleFullscreenButton(), this.renderDownloadButton(), this.renderOpenInNewTabButton()));
@@ -90,8 +90,8 @@ export class FileViewer {
       // eslint-disable-next-line multiline-ternary
       const label = this.isFullscreen
         ? // eslint-disable-next-line multiline-ternary
-          this.getTranslation('exit-fullscreen')
-        : this.getTranslation('open-in-fullscreen');
+          this.getTranslation('file-viewer.exit-fullscreen')
+        : this.getTranslation('file-viewer.open-in-fullscreen');
       return [
         h("button", { class: "button--toggle-fullscreen", id: "tooltip-toggle-fullscreen", role: "button", onClick: this.handleToggleFullscreen }, h("limel-icon", { name: icon }), h("limel-tooltip", { label: label, elementId: "tooltip-toggle-fullscreen", openDirection: "left" })),
       ];
@@ -100,19 +100,19 @@ export class FileViewer {
       if (!this.allowDownload || this.isFullscreen) {
         return;
       }
-      return (h("a", { class: "button--download", id: "tooltip-download", role: "button", download: this.filename ? this.filename : '', href: this.fileUrl, target: "_blank" }, h("limel-icon", { name: "download_2" }), h("limel-tooltip", { label: this.getTranslation('download'), elementId: "tooltip-download", openDirection: "left" })));
+      return (h("a", { class: "button--download", id: "tooltip-download", role: "button", download: this.filename ? this.filename : '', href: this.fileUrl, target: "_blank" }, h("limel-icon", { name: "download_2" }), h("limel-tooltip", { label: this.getTranslation('file-viewer.download'), elementId: "tooltip-download", openDirection: "left" })));
     };
     this.renderOpenInNewTabButton = () => {
       if (!this.allowOpenInNewTab || this.isFullscreen) {
         return;
       }
-      return (h("a", { class: "button--new-tab", id: "tooltip-new-tab", role: "button", href: this.fileUrl, target: "_blank", rel: "noopener noreferrer" }, h("limel-icon", { name: "external_link" }), h("limel-tooltip", { label: this.getTranslation('open-in-new-tab'), elementId: "tooltip-new-tab", openDirection: "left" })));
+      return (h("a", { class: "button--new-tab", id: "tooltip-new-tab", role: "button", href: this.fileUrl, target: "_blank", rel: "noopener noreferrer" }, h("limel-icon", { name: "external_link" }), h("limel-tooltip", { label: this.getTranslation('file-viewer.open-in-new-tab'), elementId: "tooltip-new-tab", openDirection: "left" })));
     };
     this.renderActionMenu = () => {
       if (!this.actions || this.isFullscreen) {
         return;
       }
-      return (h("limel-menu", { class: "action-menu", items: this.actions, onSelect: this.emitOnAction, "open-direction": "left" }, h("button", { class: "button--action", id: "tooltip-more", role: "button", slot: "trigger" }, h("limel-icon", { name: "menu_2" }), h("limel-tooltip", { label: this.getTranslation('more-actions'), elementId: "tooltip-more", openDirection: "left" }))));
+      return (h("limel-menu", { class: "action-menu", items: this.actions, onSelect: this.emitOnAction, "open-direction": "left" }, h("button", { class: "button--action", id: "tooltip-more", role: "button", slot: "trigger" }, h("limel-icon", { name: "menu_2" }), h("limel-tooltip", { label: this.getTranslation('file-viewer.more-actions'), elementId: "tooltip-more", openDirection: "left" }))));
     };
     this.createURL = async (fileType) => {
       if (['pdf'].includes(fileType)) {
@@ -185,7 +185,7 @@ export class FileViewer {
     return fileViewerFunction();
   }
   getTranslation(key) {
-    return translate.get(`file-viewer.${key}`, this.language);
+    return translate.get(key, this.language);
   }
   static get is() { return "limel-file-viewer"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/file-viewer/file-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-viewer.js","sourceRoot":"","sources":["../../../src/components/file-viewer/file-viewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Watch,\n} from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport { ListItem } from '../list/list-item.types';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\nimport { LimelMenuCustomEvent } from '../../components';\n\n/**\n * This is a smart component that automatically detects\n * the most common file types such as image, audio, video, and text,\n * and properly displays them in the browser.\n * The component is also capable to render the most common office files.\n *\n * :::note\n * Image files will always be contained in their containers, which means\n * they automatically increase or decrease in size to fill their containing box\n * whilst preserving their aspect-ratio.\n *\n * Text and PDF files will also always respect the width and height of the\n * container in which the `limel-file-viewer` is loaded.\n * :::\n *\n * For some file types such as text and images, the component will display a\n * download button and a button to open the file in a new browser tab.\n * This will allow users to preview the file in a fullscreen mode with the\n * browser and take advantage of for example native zooming and panning\n * functionalities.\n *\n * @exampleComponent limel-example-file-viewer-basic\n * @exampleComponent limel-example-file-viewer-office\n * @exampleComponent limel-example-file-viewer-filename\n * @exampleComponent limel-example-file-viewer-inbuilt-actions\n * @exampleComponent limel-example-file-viewer-custom-actions\n * @exampleComponent limel-example-file-viewer-with-picker\n *\n * @beta\n */\n\n@Component({\n    tag: 'limel-file-viewer',\n    shadow: true,\n    styleUrl: 'file-viewer.scss',\n})\nexport class FileViewer {\n    /**\n     * Link to the file\n     */\n    @Prop({ reflect: true })\n    public url: string;\n\n    /**\n     * The name of the file that must also contains its extension.\n     * This overrides the filename that the `url` ends with.\n     * Useful when the `url` does not contain the filename.\n     * When specified, the `filename` will be used as filename of\n     * the downloaded file.\n     */\n    @Prop({ reflect: true })\n    public filename?: string;\n\n    /**\n     * An optional alternative text, mainly for assistive technologies and screen readers.\n     * It is used for only image files, as an `alt` attribute.\n     * Should optimally hold a description of the image,\n     * which is also displayed on the page if the image can't be loaded for some reason.\n     */\n    @Prop({ reflect: true })\n    public alt?: string;\n\n    /**\n     * Displays a button that allows the user to view the file\n     * in fullscreen mode.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowFullscreen?: boolean = false;\n\n    /**\n     * Displays a button that allows the user to open the file\n     * in a new browser tab.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowOpenInNewTab?: boolean = false;\n\n    /**\n     * Displays a button that allows the user to download the file.\n     * Note that due to the browser's security policies,\n     * the file should be hosted on the same domain\n     * for the download button to work properly.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowDownload?: boolean = false;\n\n    /**\n     * Defines the localization for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Defines the third-party viewer that should be used to render\n     * the content of office files, such as word processing documents,\n     * presentations, or spreadsheets.\n     */\n    @Prop({ reflect: true })\n    public officeViewer: OfficeViewer = 'microsoft-office';\n\n    /**\n     * An array of custom actions that can be displayed\n     * as an action menu on the file which is being displayed.\n     */\n    @Prop()\n    public actions: ListItem[];\n\n    /**\n     * Emitted when a custom action is selected from the action menu.\n     */\n    @Event()\n    public action: EventEmitter<ListItem>;\n\n    @Element()\n    public HostElement: HTMLLimelFileViewerElement;\n\n    private fullscreen: Fullscreen;\n\n    @State()\n    private isFullscreen: boolean = false;\n\n    @State()\n    private fileType: FileType;\n\n    /**\n     * True while the file is being loaded.\n     */\n    @State()\n    private loading: boolean = true;\n\n    @State()\n    private fileUrl: string = '';\n\n    constructor() {\n        this.fullscreen = new Fullscreen(this.HostElement);\n    }\n\n    public async componentWillLoad() {\n        this.fileType = detectExtension(this.filename, this.url);\n        await this.createURL(this.fileType);\n    }\n\n    public render() {\n        if (!this.isOfficeFileAccessibleViaURL) {\n            return this.renderNoFileSupportMessage();\n        }\n\n        if (this.loading) {\n            return <limel-spinner size=\"x-small\" limeBranded={false} />;\n        }\n\n        return this.renderFileViewer();\n    }\n\n    @Watch('url')\n    protected async watchUrl(newUrl: string, oldUrl: string) {\n        if (newUrl === oldUrl) {\n            return;\n        }\n\n        this.loading = true;\n        this.fileType = detectExtension(this.filename, this.fileUrl);\n        await this.createURL(this.fileType);\n    }\n\n    private renderFileViewer() {\n        const fileViewerFunctions = {\n            pdf: this.renderPdf,\n            image: this.renderImage,\n            video: this.renderVideo,\n            audio: this.renderAudio,\n            text: this.renderText,\n            office: this.renderOffice,\n        };\n        const fileViewerFunction =\n            fileViewerFunctions[this.fileType] ||\n            this.renderNoFileSupportMessage;\n\n        return fileViewerFunction();\n    }\n\n    private renderPdf = () => {\n        return [\n            <div class=\"action-menu-for-pdf-files\">\n                {this.renderActionMenu()}\n            </div>,\n            <iframe src={this.fileUrl} loading=\"lazy\" />,\n        ];\n    };\n\n    private renderImage = () => {\n        return [\n            this.renderButtons(),\n            <img src={this.fileUrl} alt={this.alt} loading=\"lazy\" />,\n        ];\n    };\n\n    private renderVideo = () => {\n        return (\n            <video controls>\n                <source src={this.fileUrl} />\n            </video>\n        );\n    };\n\n    private renderAudio = () => {\n        return (\n            <audio controls>\n                <source src={this.fileUrl} />\n            </audio>\n        );\n    };\n\n    private renderText = () => {\n        return [\n            this.renderButtons(),\n            <object data={this.fileUrl} type=\"text/plain\">\n                {`Text content from: ${this.filename || this.url}`}\n                <a\n                    href={this.fileUrl}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                >\n                    Open text file in new tab\n                </a>\n            </object>,\n        ];\n    };\n\n    private renderOffice = () => {\n        return [\n            <div class=\"action-menu-for-office-files\">\n                {this.renderActionMenu()}\n            </div>,\n            <iframe\n                src={\n                    this.getOfficeViewerUrl() + this.fileUrl + '&embedded=true'\n                }\n                loading=\"lazy\"\n            />,\n        ];\n    };\n\n    private isOfficeFileAccessibleViaURL = () => {\n        return (\n            this.fileType === 'office' &&\n            !(\n                this.fileUrl.startsWith('http://') ||\n                this.fileUrl.startsWith('https://')\n            )\n        );\n    };\n\n    private getOfficeViewerUrl = () => {\n        const officeViewers = {\n            'microsoft-office':\n                'https://view.officeapps.live.com/op/embed.aspx?src=',\n            'google-drive': 'https://docs.google.com/gview?url=',\n        };\n\n        return officeViewers[this.officeViewer];\n    };\n\n    private renderNoFileSupportMessage = () => {\n        return (\n            <div class=\"no-support\" role=\"alert\">\n                <limel-icon\n                    class=\"icon--warning\"\n                    name=\"brake_warning\"\n                    size=\"large\"\n                    role=\"presentation\"\n                />\n                <p>{this.getTranslation('message.unsupported-filetype')}</p>\n                {this.renderDownloadButton()}\n            </div>\n        );\n    };\n\n    private renderButtons = () => {\n        return (\n            <div class=\"buttons\">\n                {this.renderActionMenu()}\n                {this.renderToggleFullscreenButton()}\n                {this.renderDownloadButton()}\n                {this.renderOpenInNewTabButton()}\n            </div>\n        );\n    };\n\n    private renderToggleFullscreenButton = () => {\n        if (!this.allowFullscreen || !this.fullscreen.isSupported()) {\n            return;\n        }\n\n        const icon = this.isFullscreen ? 'multiply' : 'fit_to_width';\n        // eslint-disable-next-line multiline-ternary\n        const label = this.isFullscreen\n            ? // eslint-disable-next-line multiline-ternary\n              this.getTranslation('exit-fullscreen')\n            : this.getTranslation('open-in-fullscreen');\n\n        return [\n            <button\n                class=\"button--toggle-fullscreen\"\n                id=\"tooltip-toggle-fullscreen\"\n                role=\"button\"\n                onClick={this.handleToggleFullscreen}\n            >\n                <limel-icon name={icon} />\n                <limel-tooltip\n                    label={label}\n                    elementId=\"tooltip-toggle-fullscreen\"\n                    openDirection=\"left\"\n                />\n            </button>,\n        ];\n    };\n\n    private renderDownloadButton = () => {\n        if (!this.allowDownload || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <a\n                class=\"button--download\"\n                id=\"tooltip-download\"\n                role=\"button\"\n                download={this.filename ? this.filename : ''}\n                href={this.fileUrl}\n                target=\"_blank\"\n            >\n                <limel-icon name=\"download_2\" />\n                <limel-tooltip\n                    label={this.getTranslation('download')}\n                    elementId=\"tooltip-download\"\n                    openDirection=\"left\"\n                />\n            </a>\n        );\n    };\n\n    private renderOpenInNewTabButton = () => {\n        if (!this.allowOpenInNewTab || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <a\n                class=\"button--new-tab\"\n                id=\"tooltip-new-tab\"\n                role=\"button\"\n                href={this.fileUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n            >\n                <limel-icon name=\"external_link\" />\n                <limel-tooltip\n                    label={this.getTranslation('open-in-new-tab')}\n                    elementId=\"tooltip-new-tab\"\n                    openDirection=\"left\"\n                />\n            </a>\n        );\n    };\n\n    private renderActionMenu = () => {\n        if (!this.actions || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class=\"action-menu\"\n                items={this.actions}\n                onSelect={this.emitOnAction}\n                open-direction=\"left\"\n            >\n                <button\n                    class=\"button--action\"\n                    id=\"tooltip-more\"\n                    role=\"button\"\n                    slot=\"trigger\"\n                >\n                    <limel-icon name=\"menu_2\" />\n                    <limel-tooltip\n                        label={this.getTranslation('more-actions')}\n                        elementId=\"tooltip-more\"\n                        openDirection=\"left\"\n                    />\n                </button>\n            </limel-menu>\n        );\n    };\n\n    private createURL = async (fileType: string) => {\n        if (['pdf'].includes(fileType)) {\n            const response = await fetch(this.url);\n            const blob = await response.blob();\n\n            this.fileUrl = URL.createObjectURL(blob);\n        } else {\n            this.fileUrl = this.url;\n        }\n\n        this.loading = false;\n    };\n\n    private handleToggleFullscreen = () => {\n        if (this.fullscreen.isSupported()) {\n            this.fullscreen.toggle();\n            this.isFullscreen = !this.isFullscreen;\n        }\n    };\n\n    private emitOnAction = (event: LimelMenuCustomEvent<ListItem>) => {\n        event.stopPropagation();\n        this.action.emit(event.detail);\n    };\n\n    private getTranslation(key: string) {\n        return translate.get(`file-viewer.${key}`, this.language);\n    }\n}\n"]}
+{"version":3,"file":"file-viewer.js","sourceRoot":"","sources":["../../../src/components/file-viewer/file-viewer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Watch,\n} from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport { ListItem } from '../list/list-item.types';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\nimport { LimelMenuCustomEvent } from '../../components';\n\n/**\n * This is a smart component that automatically detects\n * the most common file types such as image, audio, video, and text,\n * and properly displays them in the browser.\n * The component is also capable to render the most common office files.\n *\n * :::note\n * Image files will always be contained in their containers, which means\n * they automatically increase or decrease in size to fill their containing box\n * whilst preserving their aspect-ratio.\n *\n * Text and PDF files will also always respect the width and height of the\n * container in which the `limel-file-viewer` is loaded.\n * :::\n *\n * For some file types such as text and images, the component will display a\n * download button and a button to open the file in a new browser tab.\n * This will allow users to preview the file in a fullscreen mode with the\n * browser and take advantage of for example native zooming and panning\n * functionalities.\n *\n * @exampleComponent limel-example-file-viewer-basic\n * @exampleComponent limel-example-file-viewer-office\n * @exampleComponent limel-example-file-viewer-filename\n * @exampleComponent limel-example-file-viewer-inbuilt-actions\n * @exampleComponent limel-example-file-viewer-custom-actions\n * @exampleComponent limel-example-file-viewer-with-picker\n *\n * @beta\n */\n\n@Component({\n    tag: 'limel-file-viewer',\n    shadow: true,\n    styleUrl: 'file-viewer.scss',\n})\nexport class FileViewer {\n    /**\n     * Link to the file\n     */\n    @Prop({ reflect: true })\n    public url: string;\n\n    /**\n     * The name of the file that must also contains its extension.\n     * This overrides the filename that the `url` ends with.\n     * Useful when the `url` does not contain the filename.\n     * When specified, the `filename` will be used as filename of\n     * the downloaded file.\n     */\n    @Prop({ reflect: true })\n    public filename?: string;\n\n    /**\n     * An optional alternative text, mainly for assistive technologies and screen readers.\n     * It is used for only image files, as an `alt` attribute.\n     * Should optimally hold a description of the image,\n     * which is also displayed on the page if the image can't be loaded for some reason.\n     */\n    @Prop({ reflect: true })\n    public alt?: string;\n\n    /**\n     * Displays a button that allows the user to view the file\n     * in fullscreen mode.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowFullscreen?: boolean = false;\n\n    /**\n     * Displays a button that allows the user to open the file\n     * in a new browser tab.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowOpenInNewTab?: boolean = false;\n\n    /**\n     * Displays a button that allows the user to download the file.\n     * Note that due to the browser's security policies,\n     * the file should be hosted on the same domain\n     * for the download button to work properly.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowDownload?: boolean = false;\n\n    /**\n     * Defines the localization for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Defines the third-party viewer that should be used to render\n     * the content of office files, such as word processing documents,\n     * presentations, or spreadsheets.\n     */\n    @Prop({ reflect: true })\n    public officeViewer: OfficeViewer = 'microsoft-office';\n\n    /**\n     * An array of custom actions that can be displayed\n     * as an action menu on the file which is being displayed.\n     */\n    @Prop()\n    public actions: ListItem[];\n\n    /**\n     * Emitted when a custom action is selected from the action menu.\n     */\n    @Event()\n    public action: EventEmitter<ListItem>;\n\n    @Element()\n    public HostElement: HTMLLimelFileViewerElement;\n\n    private fullscreen: Fullscreen;\n\n    @State()\n    private isFullscreen: boolean = false;\n\n    @State()\n    private fileType: FileType;\n\n    /**\n     * True while the file is being loaded.\n     */\n    @State()\n    private loading: boolean = true;\n\n    @State()\n    private fileUrl: string = '';\n\n    constructor() {\n        this.fullscreen = new Fullscreen(this.HostElement);\n    }\n\n    public async componentWillLoad() {\n        this.fileType = detectExtension(this.filename, this.url);\n        await this.createURL(this.fileType);\n    }\n\n    public render() {\n        if (!this.isOfficeFileAccessibleViaURL) {\n            return this.renderNoFileSupportMessage();\n        }\n\n        if (this.loading) {\n            return <limel-spinner size=\"x-small\" limeBranded={false} />;\n        }\n\n        return this.renderFileViewer();\n    }\n\n    @Watch('url')\n    protected async watchUrl(newUrl: string, oldUrl: string) {\n        if (newUrl === oldUrl) {\n            return;\n        }\n\n        this.loading = true;\n        this.fileType = detectExtension(this.filename, this.fileUrl);\n        await this.createURL(this.fileType);\n    }\n\n    private renderFileViewer() {\n        const fileViewerFunctions = {\n            pdf: this.renderPdf,\n            image: this.renderImage,\n            video: this.renderVideo,\n            audio: this.renderAudio,\n            text: this.renderText,\n            office: this.renderOffice,\n        };\n        const fileViewerFunction =\n            fileViewerFunctions[this.fileType] ||\n            this.renderNoFileSupportMessage;\n\n        return fileViewerFunction();\n    }\n\n    private renderPdf = () => {\n        return [\n            <div class=\"action-menu-for-pdf-files\">\n                {this.renderActionMenu()}\n            </div>,\n            <iframe src={this.fileUrl} loading=\"lazy\" />,\n        ];\n    };\n\n    private renderImage = () => {\n        return [\n            this.renderButtons(),\n            <img src={this.fileUrl} alt={this.alt} loading=\"lazy\" />,\n        ];\n    };\n\n    private renderVideo = () => {\n        return (\n            <video controls>\n                <source src={this.fileUrl} />\n            </video>\n        );\n    };\n\n    private renderAudio = () => {\n        return (\n            <audio controls>\n                <source src={this.fileUrl} />\n            </audio>\n        );\n    };\n\n    private renderText = () => {\n        return [\n            this.renderButtons(),\n            <object data={this.fileUrl} type=\"text/plain\">\n                {`Text content from: ${this.filename || this.url}`}\n                <a\n                    href={this.fileUrl}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                >\n                    Open text file in new tab\n                </a>\n            </object>,\n        ];\n    };\n\n    private renderOffice = () => {\n        return [\n            <div class=\"action-menu-for-office-files\">\n                {this.renderActionMenu()}\n            </div>,\n            <iframe\n                src={\n                    this.getOfficeViewerUrl() + this.fileUrl + '&embedded=true'\n                }\n                loading=\"lazy\"\n            />,\n        ];\n    };\n\n    private isOfficeFileAccessibleViaURL = () => {\n        return (\n            this.fileType === 'office' &&\n            !(\n                this.fileUrl.startsWith('http://') ||\n                this.fileUrl.startsWith('https://')\n            )\n        );\n    };\n\n    private getOfficeViewerUrl = () => {\n        const officeViewers = {\n            'microsoft-office':\n                'https://view.officeapps.live.com/op/embed.aspx?src=',\n            'google-drive': 'https://docs.google.com/gview?url=',\n        };\n\n        return officeViewers[this.officeViewer];\n    };\n\n    private renderNoFileSupportMessage = () => {\n        return (\n            <div class=\"no-support\" role=\"alert\">\n                <limel-icon\n                    class=\"icon--warning\"\n                    name=\"brake_warning\"\n                    size=\"large\"\n                    role=\"presentation\"\n                />\n                <p>\n                    {this.getTranslation(\n                        'file-viewer.message.unsupported-filetype',\n                    )}\n                </p>\n                {this.renderDownloadButton()}\n            </div>\n        );\n    };\n\n    private renderButtons = () => {\n        return (\n            <div class=\"buttons\">\n                {this.renderActionMenu()}\n                {this.renderToggleFullscreenButton()}\n                {this.renderDownloadButton()}\n                {this.renderOpenInNewTabButton()}\n            </div>\n        );\n    };\n\n    private renderToggleFullscreenButton = () => {\n        if (!this.allowFullscreen || !this.fullscreen.isSupported()) {\n            return;\n        }\n\n        const icon = this.isFullscreen ? 'multiply' : 'fit_to_width';\n        // eslint-disable-next-line multiline-ternary\n        const label = this.isFullscreen\n            ? // eslint-disable-next-line multiline-ternary\n              this.getTranslation('file-viewer.exit-fullscreen')\n            : this.getTranslation('file-viewer.open-in-fullscreen');\n\n        return [\n            <button\n                class=\"button--toggle-fullscreen\"\n                id=\"tooltip-toggle-fullscreen\"\n                role=\"button\"\n                onClick={this.handleToggleFullscreen}\n            >\n                <limel-icon name={icon} />\n                <limel-tooltip\n                    label={label}\n                    elementId=\"tooltip-toggle-fullscreen\"\n                    openDirection=\"left\"\n                />\n            </button>,\n        ];\n    };\n\n    private renderDownloadButton = () => {\n        if (!this.allowDownload || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <a\n                class=\"button--download\"\n                id=\"tooltip-download\"\n                role=\"button\"\n                download={this.filename ? this.filename : ''}\n                href={this.fileUrl}\n                target=\"_blank\"\n            >\n                <limel-icon name=\"download_2\" />\n                <limel-tooltip\n                    label={this.getTranslation('file-viewer.download')}\n                    elementId=\"tooltip-download\"\n                    openDirection=\"left\"\n                />\n            </a>\n        );\n    };\n\n    private renderOpenInNewTabButton = () => {\n        if (!this.allowOpenInNewTab || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <a\n                class=\"button--new-tab\"\n                id=\"tooltip-new-tab\"\n                role=\"button\"\n                href={this.fileUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n            >\n                <limel-icon name=\"external_link\" />\n                <limel-tooltip\n                    label={this.getTranslation('file-viewer.open-in-new-tab')}\n                    elementId=\"tooltip-new-tab\"\n                    openDirection=\"left\"\n                />\n            </a>\n        );\n    };\n\n    private renderActionMenu = () => {\n        if (!this.actions || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class=\"action-menu\"\n                items={this.actions}\n                onSelect={this.emitOnAction}\n                open-direction=\"left\"\n            >\n                <button\n                    class=\"button--action\"\n                    id=\"tooltip-more\"\n                    role=\"button\"\n                    slot=\"trigger\"\n                >\n                    <limel-icon name=\"menu_2\" />\n                    <limel-tooltip\n                        label={this.getTranslation('file-viewer.more-actions')}\n                        elementId=\"tooltip-more\"\n                        openDirection=\"left\"\n                    />\n                </button>\n            </limel-menu>\n        );\n    };\n\n    private createURL = async (fileType: string) => {\n        if (['pdf'].includes(fileType)) {\n            const response = await fetch(this.url);\n            const blob = await response.blob();\n\n            this.fileUrl = URL.createObjectURL(blob);\n        } else {\n            this.fileUrl = this.url;\n        }\n\n        this.loading = false;\n    };\n\n    private handleToggleFullscreen = () => {\n        if (this.fullscreen.isSupported()) {\n            this.fullscreen.toggle();\n            this.isFullscreen = !this.isFullscreen;\n        }\n    };\n\n    private emitOnAction = (event: LimelMenuCustomEvent<ListItem>) => {\n        event.stopPropagation();\n        this.action.emit(event.detail);\n    };\n\n    private getTranslation(key: string) {\n        return translate.get(key, this.language);\n    }\n}\n"]}

package/dist/collection/components/icon/icon.js

@@ -2,11 +2,6 @@ import { h } from '@stencil/core';
 import { globalConfig } from '../../global/config';
 import iconCache from '../../global/icon-cache/factory';
 /**
- * Search for an icon and **click on it to copy its name to clipboard**.
- * <limel-example-icon-finder />
- *
- * *******
- *
  * :::important
  * To install your icon set correctly, please read the [documentation here](#/).
  * :::
@@ -14,19 +9,6 @@ import iconCache from '../../global/icon-cache/factory';
  * The size and color of the icon is normally set in CSS, however there are a few
  * standard sizes defined that can be used with the `size` property.
  *
- * :::note
- * There are icons included in the `@lundalogik/lime-icons8` package which are
- * designed by our designers at Lime.
- * The names of these icons start with `-lime-`, which makes them easy to
- * find using the Icon Finder tool below.
- *
- * Some of the multi-colored `-lime-` icons use our own CSS variables
- * (instead of HEX or RGB) values to visualize their colors. Thus, you must import
- * our color palette css files into your project to render the icons properly.
- * Read more about our [Color System](#/DesignGuidelines/color-system.md/)
- * and how to do this.
- * :::
- *
  * @exampleComponent limel-example-icon-name
  * @exampleComponent limel-example-icon-size
  * @exampleComponent limel-example-icon-color

package/dist/collection/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,SAAS,MAAM,iCAAiC,CAAC;AAGxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAMH,MAAM,OAAO,IAAI;;;;;;EAuBN,gBAAgB;IACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAEM,MAAM;IACT,OAAO,WAAK,KAAK,EAAC,WAAW,GAAG,CAAC;EACrC,CAAC;EAGS,KAAK,CAAC,QAAQ,CAAC,IAAY;IACjC,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,EAAE,EAAE;MACnC,OAAO;KACV;IAED,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED;;;;;KAKG;EACK,OAAO,CAAC,IAAY;IACxB,OAAO,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;EACtD,CAAC;EAED;;;;;KAKG;EACK,SAAS,CAAC,OAAe;IAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACtE,IAAI,SAAS,EAAE;MACX,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;KACjC;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { globalConfig } from '../../global/config';\nimport iconCache from '../../global/icon-cache/factory';\nimport { IconSize } from './icon.types';\n\n/**\n * Search for an icon and **click on it to copy its name to clipboard**.\n * <limel-example-icon-finder />\n *\n * *******\n *\n * :::important\n * To install your icon set correctly, please read the [documentation here](#/).\n * :::\n *\n * The size and color of the icon is normally set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n *\n * :::note\n * There are icons included in the `@lundalogik/lime-icons8` package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n *\n * Some of the multi-colored `-lime-` icons use our own CSS variables\n * (instead of HEX or RGB) values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n *\n * @exampleComponent limel-example-icon-name\n * @exampleComponent limel-example-icon-size\n * @exampleComponent limel-example-icon-color\n */\n@Component({\n    tag: 'limel-icon',\n    shadow: true,\n    styleUrl: 'icon.scss',\n})\nexport class Icon {\n    /**\n     * Size of the icon\n     */\n    @Prop({ reflect: true })\n    public size: IconSize;\n\n    /**\n     * Name of the icon\n     */\n    @Prop({ reflect: true })\n    public name: string;\n\n    /**\n     * Set to `true` to give the icon a round background with some padding.\n     * Only works when the `size` attribute is also set.\n     */\n    @Prop({ reflect: true })\n    public badge: boolean;\n\n    @Element()\n    private host: HTMLLimelIconElement;\n\n    public componentDidLoad() {\n        this.loadIcon(this.name);\n    }\n\n    public render() {\n        return <div class=\"container\" />;\n    }\n\n    @Watch('name')\n    protected async loadIcon(name: string) {\n        if (name === undefined || name === '') {\n            return;\n        }\n\n        const svgData = await this.loadSvg(name);\n        this.renderSvg(svgData);\n    }\n\n    /**\n     * Load the SVG data for the icon from the icon cache\n     *\n     * @param name - name of the icon\n     * @returns the icon SVG data\n     */\n    private loadSvg(name: string) {\n        return iconCache.get(name, globalConfig.iconPath);\n    }\n\n    /*\n     * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n     * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n     * will remain the way they look in the file.\n     * Therefore we inject the svg as inline markup instead.\n     */\n    private renderSvg(svgData: string) {\n        const container = this.host.shadowRoot.querySelector('div.container');\n        if (container) {\n            container.innerHTML = svgData;\n        }\n    }\n}\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,SAAS,MAAM,iCAAiC,CAAC;AAGxD;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,IAAI;;;;;;EAuBN,gBAAgB;IACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAEM,MAAM;IACT,OAAO,WAAK,KAAK,EAAC,WAAW,GAAG,CAAC;EACrC,CAAC;EAGS,KAAK,CAAC,QAAQ,CAAC,IAAY;IACjC,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,EAAE,EAAE;MACnC,OAAO;KACV;IAED,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED;;;;;KAKG;EACK,OAAO,CAAC,IAAY;IACxB,OAAO,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;EACtD,CAAC;EAED;;;;;KAKG;EACK,SAAS,CAAC,OAAe;IAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACtE,IAAI,SAAS,EAAE;MACX,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;KACjC;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { globalConfig } from '../../global/config';\nimport iconCache from '../../global/icon-cache/factory';\nimport { IconSize } from './icon.types';\n\n/**\n * :::important\n * To install your icon set correctly, please read the [documentation here](#/).\n * :::\n *\n * The size and color of the icon is normally set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n *\n * @exampleComponent limel-example-icon-name\n * @exampleComponent limel-example-icon-size\n * @exampleComponent limel-example-icon-color\n */\n@Component({\n    tag: 'limel-icon',\n    shadow: true,\n    styleUrl: 'icon.scss',\n})\nexport class Icon {\n    /**\n     * Size of the icon\n     */\n    @Prop({ reflect: true })\n    public size: IconSize;\n\n    /**\n     * Name of the icon\n     */\n    @Prop({ reflect: true })\n    public name: string;\n\n    /**\n     * Set to `true` to give the icon a round background with some padding.\n     * Only works when the `size` attribute is also set.\n     */\n    @Prop({ reflect: true })\n    public badge: boolean;\n\n    @Element()\n    private host: HTMLLimelIconElement;\n\n    public componentDidLoad() {\n        this.loadIcon(this.name);\n    }\n\n    public render() {\n        return <div class=\"container\" />;\n    }\n\n    @Watch('name')\n    protected async loadIcon(name: string) {\n        if (name === undefined || name === '') {\n            return;\n        }\n\n        const svgData = await this.loadSvg(name);\n        this.renderSvg(svgData);\n    }\n\n    /**\n     * Load the SVG data for the icon from the icon cache\n     *\n     * @param name - name of the icon\n     * @returns the icon SVG data\n     */\n    private loadSvg(name: string) {\n        return iconCache.get(name, globalConfig.iconPath);\n    }\n\n    /*\n     * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n     * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n     * will remain the way they look in the file.\n     * Therefore we inject the svg as inline markup instead.\n     */\n    private renderSvg(svgData: string) {\n        const container = this.host.shadowRoot.querySelector('div.container');\n        if (container) {\n            container.innerHTML = svgData;\n        }\n    }\n}\n"]}

package/dist/collection/components/table/table.css

@@ -1019,6 +1019,7 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   --table-arrow-color: var(--contrast-800);
   --table-arrow-color--active: var(--mdc-theme-primary);
   --table-text-color: var(--mdc-theme-text-primary-on-background);
+  --limel-chip-size: 1.25rem;
 }
 
 #tabulator-container,
@@ -1160,6 +1161,10 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   pointer-events: none;
 }
 
+limel-chip {
+  transform: translateY(-0.15rem);
+}
+
 /*
  * This file is imported into every component!
  *