@limetech/lime-elements 38.27.0 → 38.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/lime-elements.cjs.js +1 -1
  3. package/dist/cjs/limel-color-picker-palette.cjs.entry.js +2 -1
  4. package/dist/cjs/limel-color-picker-palette.cjs.entry.js.map +1 -1
  5. package/dist/cjs/limel-color-picker.cjs.entry.js +3 -2
  6. package/dist/cjs/limel-color-picker.cjs.entry.js.map +1 -1
  7. package/dist/cjs/loader.cjs.js +1 -1
  8. package/dist/collection/components/color-picker/color-picker-palette.js +20 -1
  9. package/dist/collection/components/color-picker/color-picker-palette.js.map +1 -1
  10. package/dist/collection/components/color-picker/color-picker.js +24 -4
  11. package/dist/collection/components/color-picker/color-picker.js.map +1 -1
  12. package/dist/esm/lime-elements.js +1 -1
  13. package/dist/esm/limel-color-picker-palette.entry.js +2 -1
  14. package/dist/esm/limel-color-picker-palette.entry.js.map +1 -1
  15. package/dist/esm/limel-color-picker.entry.js +3 -2
  16. package/dist/esm/limel-color-picker.entry.js.map +1 -1
  17. package/dist/esm/loader.js +1 -1
  18. package/dist/lime-elements/lime-elements.esm.js +1 -1
  19. package/dist/lime-elements/lime-elements.esm.js.map +1 -1
  20. package/dist/lime-elements/{p-e1213871.entry.js → p-489d7f63.entry.js} +2 -2
  21. package/dist/lime-elements/p-489d7f63.entry.js.map +1 -0
  22. package/dist/lime-elements/{p-0345965e.entry.js → p-4f85b3c4.entry.js} +2 -2
  23. package/dist/lime-elements/p-4f85b3c4.entry.js.map +1 -0
  24. package/dist/types/components/color-picker/color-picker-palette.d.ts +4 -0
  25. package/dist/types/components/color-picker/color-picker.d.ts +9 -2
  26. package/dist/types/components.d.ts +28 -8
  27. package/package.json +1 -1
  28. package/dist/lime-elements/p-0345965e.entry.js.map +0 -1
  29. package/dist/lime-elements/p-e1213871.entry.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ ## [38.28.0](https://github.com/Lundalogik/lime-elements/compare/v38.27.0...v38.28.0) (2025-10-07)
2
+
3
+
4
+ ### Features
5
+
6
+
7
+ * **color-picker:** allow disabling manual input by users ([7604c5b](https://github.com/Lundalogik/lime-elements/commit/7604c5b621d069d3d0afff85565610b1e19f53cc))
8
+
1
9
  ## [38.27.0](https://github.com/Lundalogik/lime-elements/compare/v38.26.1...v38.27.0) (2025-10-07)
2
10
 
3
11
 
package/dist/cjs/lime-elements.cjs.js CHANGED
@@ -20,7 +20,7 @@ const patchBrowser = () => {
20
20
  };
21
21
 
22
22
  patchBrowser().then(options => {
23
- 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-list-item.cjs\",[[0,\"limel-list-item\",{\"language\":[513],\"value\":[8],\"text\":[513],\"secondaryText\":[513,\"secondary-text\"],\"disabled\":[516],\"icon\":[1],\"iconSize\":[513,\"icon-size\"],\"badgeIcon\":[516,\"badge-icon\"],\"selected\":[516],\"actions\":[16],\"primaryComponent\":[16],\"image\":[16],\"type\":[513]}]]],[\"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],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"placeholder\":[513],\"palette\":[16],\"paletteColumnCount\":[514,\"palette-column-count\"],\"isOpen\":[32]}]]],[\"limel-profile-picture.cjs\",[[1,\"limel-profile-picture\",{\"language\":[513],\"label\":[513],\"icon\":[1],\"helperText\":[1,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"required\":[516],\"invalid\":[516],\"loading\":[516],\"value\":[1],\"imageFit\":[513,\"image-fit\"],\"accept\":[513],\"resize\":[16],\"objectUrl\":[32],\"imageError\":[32],\"isErrorMessagePopoverOpen\":[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-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-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-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],\"language\":[513]}]]],[\"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-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"invalid\":[516],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-menu-item-meta.cjs\",[[1,\"limel-menu-item-meta\",{\"commandText\":[1,\"command-text\"],\"badge\":[8],\"showChevron\":[4,\"show-chevron\"]}]]],[\"limel-radio-button-group.cjs\",[[0,\"limel-radio-button-group\",{\"items\":[16],\"selectedItem\":[16],\"disabled\":[516],\"badgeIcons\":[516,\"badge-icons\"],\"maxLinesSecondaryText\":[514,\"max-lines-secondary-text\"]}]]],[\"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-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\"],\"placeholder\":[513],\"required\":[516],\"invalid\":[516],\"columnCount\":[514,\"column-count\"],\"palette\":[16]}]]],[\"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-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"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-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[1],\"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-dynamic-label.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[4,\"lazy-load-images\"]}]]],[\"limel-badge.cjs\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-helper-line.cjs\",[[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-portal_3.cjs\",[[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[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-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\"]}],[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-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[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\"]}],[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-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-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
23
+ 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-list-item.cjs\",[[0,\"limel-list-item\",{\"language\":[513],\"value\":[8],\"text\":[513],\"secondaryText\":[513,\"secondary-text\"],\"disabled\":[516],\"icon\":[1],\"iconSize\":[513,\"icon-size\"],\"badgeIcon\":[516,\"badge-icon\"],\"selected\":[516],\"actions\":[16],\"primaryComponent\":[16],\"image\":[16],\"type\":[513]}]]],[\"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],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"placeholder\":[513],\"manualInput\":[516,\"manual-input\"],\"palette\":[16],\"paletteColumnCount\":[514,\"palette-column-count\"],\"isOpen\":[32]}]]],[\"limel-profile-picture.cjs\",[[1,\"limel-profile-picture\",{\"language\":[513],\"label\":[513],\"icon\":[1],\"helperText\":[1,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"required\":[516],\"invalid\":[516],\"loading\":[516],\"value\":[1],\"imageFit\":[513,\"image-fit\"],\"accept\":[513],\"resize\":[16],\"objectUrl\":[32],\"imageError\":[32],\"isErrorMessagePopoverOpen\":[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-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-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-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],\"language\":[513]}]]],[\"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-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"invalid\":[516],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-menu-item-meta.cjs\",[[1,\"limel-menu-item-meta\",{\"commandText\":[1,\"command-text\"],\"badge\":[8],\"showChevron\":[4,\"show-chevron\"]}]]],[\"limel-radio-button-group.cjs\",[[0,\"limel-radio-button-group\",{\"items\":[16],\"selectedItem\":[16],\"disabled\":[516],\"badgeIcons\":[516,\"badge-icons\"],\"maxLinesSecondaryText\":[514,\"max-lines-secondary-text\"]}]]],[\"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-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\"],\"placeholder\":[513],\"required\":[516],\"invalid\":[516],\"manualInput\":[516,\"manual-input\"],\"columnCount\":[514,\"column-count\"],\"palette\":[16]}]]],[\"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-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"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-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[1],\"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-dynamic-label.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[4,\"lazy-load-images\"]}]]],[\"limel-badge.cjs\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-helper-line.cjs\",[[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-portal_3.cjs\",[[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[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-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\"]}],[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-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[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\"]}],[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-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-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
24
24
  });
25
25
 
26
26
  exports.setNonce = index.setNonce;
package/dist/cjs/limel-color-picker-palette.cjs.entry.js CHANGED
@@ -98,6 +98,7 @@ const Palette = class {
98
98
  this.placeholder = undefined;
99
99
  this.required = undefined;
100
100
  this.invalid = false;
101
+ this.manualInput = true;
101
102
  this.columnCount = undefined;
102
103
  this.palette = undefined;
103
104
  }
@@ -107,7 +108,7 @@ const Palette = class {
107
108
  index.h("div", { class: "color-picker-palette", style: {
108
109
  '--color-picker-column-count': `${this.getColumnCount()}`,
109
110
  } }, this.renderSwatches()),
110
- index.h("div", { class: "chosen-color-name" }, index.h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder }), index.h("div", { class: "chosen-color-preview", style: background })),
111
+ index.h("div", { class: "chosen-color-name" }, index.h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder, disabled: !this.manualInput }), index.h("div", { class: "chosen-color-preview", style: background })),
111
112
  ];
112
113
  }
113
114
  getPalette() {
package/dist/cjs/limel-color-picker-palette.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"limel-color-picker-palette.entry.cjs.js","mappings":"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","names":["index","h"],"sources":["./src/components/color-picker/swatches.ts","./src/components/color-picker/color-picker-palette.scss?tag=limel-color-picker-palette&encapsulation=shadow","./src/components/color-picker/color-picker-palette.tsx"],"sourcesContent":["export const colors = [\n 'red',\n 'pink',\n 'magenta',\n 'purple',\n 'violet',\n 'indigo',\n 'blue',\n 'sky',\n 'cyan',\n 'teal',\n 'green',\n 'lime',\n 'grass',\n 'yellow',\n 'amber',\n 'orange',\n 'coral',\n 'brown',\n 'gray',\n 'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\nexport interface Swatch {\n name: string;\n value: string;\n disabled?: boolean;\n}\n\n/**\n * Returns the CSS variable name holding the RGB triplet for the color & brightness.\n *\n * @param color the base color identifier (e.g. \"red\", \"blue\")\n * @param brightness the brightness variant (e.g. \"light\", \"default\")\n * @returns CSS variable name in the form --color-{color}-{brightness}\n */\nexport function getColorName(color: string, brightness: string): string {\n return `--color-${color}-${brightness}`;\n}\n\n/**\n * Swatch value: inline CSS color value in the required format: rgb(var(--color-*-*))\n * @param color\n * @param brightness\n */\nexport function getSwatchValue(color: string, brightness: string): string {\n return `rgb(var(${getColorName(color, brightness)}))`;\n}\n\n/**\n * Swatch name: human readable label like \"red default\"\n * @param color\n * @param brightness\n */\nexport function getSwatchName(color: string, brightness: string): string {\n return `${color} ${brightness}`;\n}\n\n/**\n * Convenience factory returning both name & value.\n * @param color\n * @param brightness\n */\nexport function createSwatch(color: string, brightness: string): Swatch {\n return {\n name: getSwatchName(color, brightness),\n value: getSwatchValue(color, brightness),\n };\n}\n\n/**\n * Returns the CSS color value for the given color and brightness.\n * @param color\n * @param brightness\n */\nexport function getCssColor(color: string, brightness: string): string {\n return getSwatchValue(color, brightness);\n}\n","@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n@import './partial-styles/lime-admin-hack';\n\n:host(limel-color-picker-palette) {\n --limel-color-palette-gap: 0.25rem;\n --limel-color-palette-max-column-count: 25;\n --limel-color-palette-min-width: 8rem;\n box-sizing: border-box;\n\n border-radius: 0.75rem; // is like popover's default `--popover-border-radius`\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding: 0.75rem;\n}\n\n*,\n*:before,\n:after {\n box-sizing: border-box;\n}\n\n.color-picker-palette {\n display: grid;\n gap: var(--limel-color-palette-gap);\n grid-template-columns: repeat(\n min(\n var(--color-picker-column-count),\n var(--limel-color-palette-max-column-count)\n ),\n 1fr\n );\n width: 100%;\n max-width: 58rem;\n min-width: var(--limel-color-palette-min-width);\n}\n\n.chosen-color-name {\n display: flex;\n gap: 0.5rem;\n}\n\nlimel-input-field {\n flex-grow: 1;\n width: min-content;\n}\n\n.chosen-color-preview {\n flex-shrink: 0;\n isolation: isolate;\n\n position: relative;\n width: shared_input-select-picker.$height-of-mdc-text-field;\n height: shared_input-select-picker.$height-of-mdc-text-field;\n\n border: 1px solid rgba(var(--contrast-700), 0.65);\n border-radius: 50%;\n\n &:before,\n &:after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n }\n\n &:before {\n @include mixins.add-chessboard-background();\n z-index: 0;\n }\n\n &:after {\n background: var(--background);\n z-index: 1;\n }\n}\n\nbutton.swatch {\n all: unset;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n\n max-width: 3rem;\n min-width: max(\n 2rem,\n 100% /\n min(\n var(--color-picker-column-count),\n var(--limel-color-palette-max-column-count)\n ) -\n (\n min(\n var(--color-picker-column-count),\n var(--limel-color-palette-max-column-count)\n ) -\n 1\n ) *\n var(--limel-color-palette-gap)\n );\n aspect-ratio: 1;\n border-radius: 0.1875rem;\n\n @include mixins.visualize-keyboard-focus();\n\n // Since the background color will be overwritten by the mixin,\n // we need to set it explicitly here and repeated in the mixin.\n background-color: var(--limel-color-picker-swatch-color);\n &:not([disabled]) {\n @include mixins.is-flat-clickable(\n $background-color: var(--limel-color-picker-swatch-color),\n $background-color--hovered: var(--limel-color-picker-swatch-color)\n );\n }\n\n &:focus-visible {\n box-shadow:\n var(--shadow-depth-8-focused),\n 0 0 0 0.125rem rgb(var(--contrast-100)) inset;\n }\n\n &[disabled] {\n cursor: not-allowed;\n box-shadow: 0 0 0 0.125rem rgb(var(--contrast-100), 0.6) inset;\n\n &:after {\n content: '';\n position: absolute;\n inset: 0;\n margin: auto;\n width: 0.125rem;\n height: 100%;\n\n opacity: 0.6;\n rotate: 45deg;\n border-radius: 1rem;\n background-color: rgb(var(--contrast-100));\n }\n }\n}\n\nbutton.swatch--selected {\n box-shadow: var(--button-shadow-inset);\n\n border-radius: 50%;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, createSwatch, Swatch } from './swatches';\nimport type { CustomPalette, CustomColorSwatch } from './color-picker.types';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-color-picker-palette',\n shadow: { delegatesFocus: true },\n styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n /**\n * Color value that is manually typed by the user\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Label of the input field\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Helper text of the input field\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is focused and empty.\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Set to `true` if a value is required\n */\n @Prop({ reflect: true })\n public required: boolean;\n\n /**\n * Set to `true` to indicate that the current value of the input field is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Defines the number of columns in the color swatch grid.\n * If not provided, it will default to the number of colors in the palette.\n */\n @Prop({ reflect: true })\n public columnCount?: number;\n\n /**\n * Custom color palette to use instead of Lime palette. Internal prop passed from parent.\n */\n @Prop()\n public palette?: CustomPalette;\n\n /**\n * Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n const background = this.value ? { '--background': this.value } : {};\n\n return [\n <div\n class=\"color-picker-palette\"\n style={{\n '--color-picker-column-count': `${this.getColumnCount()}`,\n }}\n >\n {this.renderSwatches()}\n </div>,\n <div class=\"chosen-color-name\">\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n invalid={this.invalid}\n placeholder={this.placeholder}\n />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return this.getPalette().map(this.renderSwatchButton);\n };\n\n private getPalette(): Swatch[] {\n if (this.usesCustomPalette()) {\n return (this.palette || []).map((entry) => {\n const normalized = this.normalizeEntry(entry);\n return {\n name: normalized.name || normalized.value,\n value: normalized.value,\n disabled: normalized.disabled,\n };\n });\n }\n\n // Order default swatches by brightness first, then by color.\n // This gives a more intuitive CSS grid layout logic, and\n // enables adding the `columnCount` prop.\n const swatches: Swatch[] = [];\n for (const b of brightnesses) {\n for (const color of colors) {\n swatches.push(createSwatch(color, b));\n }\n }\n return swatches;\n }\n\n private renderSwatchButton = (swatch: Swatch, index: number) => {\n const isSelected = this.value === swatch.value;\n const classList = {\n swatch: true,\n 'swatch--selected': isSelected,\n 'custom-swatch': this.usesCustomPalette(),\n };\n\n return (\n <button\n class={classList}\n style={{ '--limel-color-picker-swatch-color': swatch.value }}\n title={swatch.name}\n disabled={swatch.disabled}\n data-index={index}\n key={index}\n onClick={this.handleSwatchClick(swatch.value)}\n />\n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleSwatchClick = (value: string) => (event: MouseEvent) => {\n event.stopPropagation();\n const newValue = this.value === value ? '' : value;\n this.change.emit(newValue);\n };\n\n private normalizeEntry(\n entry: string | CustomColorSwatch\n ): CustomColorSwatch {\n if (typeof entry === 'string') {\n return { value: entry };\n }\n return entry;\n }\n\n private usesCustomPalette(): boolean {\n return this.palette?.length > 0;\n }\n\n private getColumnCount(): number {\n if (this.columnCount > 0) {\n return this.columnCount;\n }\n\n // Default palette: fixed 20 columns (one per base color)\n if (!this.usesCustomPalette()) {\n return 20;\n }\n\n // Custom palette: span all provided swatches unless empty\n const palette = this.getPalette();\n return palette.length > 0 ? palette.length : 1;\n }\n}\n"],"version":3}
1
+ {"file":"limel-color-picker-palette.entry.cjs.js","mappings":"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","names":["index","h"],"sources":["./src/components/color-picker/swatches.ts","./src/components/color-picker/color-picker-palette.scss?tag=limel-color-picker-palette&encapsulation=shadow","./src/components/color-picker/color-picker-palette.tsx"],"sourcesContent":["export const colors = [\n 'red',\n 'pink',\n 'magenta',\n 'purple',\n 'violet',\n 'indigo',\n 'blue',\n 'sky',\n 'cyan',\n 'teal',\n 'green',\n 'lime',\n 'grass',\n 'yellow',\n 'amber',\n 'orange',\n 'coral',\n 'brown',\n 'gray',\n 'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\nexport interface Swatch {\n name: string;\n value: string;\n disabled?: boolean;\n}\n\n/**\n * Returns the CSS variable name holding the RGB triplet for the color & brightness.\n *\n * @param color the base color identifier (e.g. \"red\", \"blue\")\n * @param brightness the brightness variant (e.g. \"light\", \"default\")\n * @returns CSS variable name in the form --color-{color}-{brightness}\n */\nexport function getColorName(color: string, brightness: string): string {\n return `--color-${color}-${brightness}`;\n}\n\n/**\n * Swatch value: inline CSS color value in the required format: rgb(var(--color-*-*))\n * @param color\n * @param brightness\n */\nexport function getSwatchValue(color: string, brightness: string): string {\n return `rgb(var(${getColorName(color, brightness)}))`;\n}\n\n/**\n * Swatch name: human readable label like \"red default\"\n * @param color\n * @param brightness\n */\nexport function getSwatchName(color: string, brightness: string): string {\n return `${color} ${brightness}`;\n}\n\n/**\n * Convenience factory returning both name & value.\n * @param color\n * @param brightness\n */\nexport function createSwatch(color: string, brightness: string): Swatch {\n return {\n name: getSwatchName(color, brightness),\n value: getSwatchValue(color, brightness),\n };\n}\n\n/**\n * Returns the CSS color value for the given color and brightness.\n * @param color\n * @param brightness\n */\nexport function getCssColor(color: string, brightness: string): string {\n return getSwatchValue(color, brightness);\n}\n","@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n@import './partial-styles/lime-admin-hack';\n\n:host(limel-color-picker-palette) {\n --limel-color-palette-gap: 0.25rem;\n --limel-color-palette-max-column-count: 25;\n --limel-color-palette-min-width: 8rem;\n box-sizing: border-box;\n\n border-radius: 0.75rem; // is like popover's default `--popover-border-radius`\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding: 0.75rem;\n}\n\n*,\n*:before,\n:after {\n box-sizing: border-box;\n}\n\n.color-picker-palette {\n display: grid;\n gap: var(--limel-color-palette-gap);\n grid-template-columns: repeat(\n min(\n var(--color-picker-column-count),\n var(--limel-color-palette-max-column-count)\n ),\n 1fr\n );\n width: 100%;\n max-width: 58rem;\n min-width: var(--limel-color-palette-min-width);\n}\n\n.chosen-color-name {\n display: flex;\n gap: 0.5rem;\n}\n\nlimel-input-field {\n flex-grow: 1;\n width: min-content;\n}\n\n.chosen-color-preview {\n flex-shrink: 0;\n isolation: isolate;\n\n position: relative;\n width: shared_input-select-picker.$height-of-mdc-text-field;\n height: shared_input-select-picker.$height-of-mdc-text-field;\n\n border: 1px solid rgba(var(--contrast-700), 0.65);\n border-radius: 50%;\n\n &:before,\n &:after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n }\n\n &:before {\n @include mixins.add-chessboard-background();\n z-index: 0;\n }\n\n &:after {\n background: var(--background);\n z-index: 1;\n }\n}\n\nbutton.swatch {\n all: unset;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n\n max-width: 3rem;\n min-width: max(\n 2rem,\n 100% /\n min(\n var(--color-picker-column-count),\n var(--limel-color-palette-max-column-count)\n ) -\n (\n min(\n var(--color-picker-column-count),\n var(--limel-color-palette-max-column-count)\n ) -\n 1\n ) *\n var(--limel-color-palette-gap)\n );\n aspect-ratio: 1;\n border-radius: 0.1875rem;\n\n @include mixins.visualize-keyboard-focus();\n\n // Since the background color will be overwritten by the mixin,\n // we need to set it explicitly here and repeated in the mixin.\n background-color: var(--limel-color-picker-swatch-color);\n &:not([disabled]) {\n @include mixins.is-flat-clickable(\n $background-color: var(--limel-color-picker-swatch-color),\n $background-color--hovered: var(--limel-color-picker-swatch-color)\n );\n }\n\n &:focus-visible {\n box-shadow:\n var(--shadow-depth-8-focused),\n 0 0 0 0.125rem rgb(var(--contrast-100)) inset;\n }\n\n &[disabled] {\n cursor: not-allowed;\n box-shadow: 0 0 0 0.125rem rgb(var(--contrast-100), 0.6) inset;\n\n &:after {\n content: '';\n position: absolute;\n inset: 0;\n margin: auto;\n width: 0.125rem;\n height: 100%;\n\n opacity: 0.6;\n rotate: 45deg;\n border-radius: 1rem;\n background-color: rgb(var(--contrast-100));\n }\n }\n}\n\nbutton.swatch--selected {\n box-shadow: var(--button-shadow-inset);\n\n border-radius: 50%;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, createSwatch, Swatch } from './swatches';\nimport type { CustomPalette, CustomColorSwatch } from './color-picker.types';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-color-picker-palette',\n shadow: { delegatesFocus: true },\n styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n /**\n * Color value that is manually typed by the user\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Label of the input field\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Helper text of the input field\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is focused and empty.\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Set to `true` if a value is required\n */\n @Prop({ reflect: true })\n public required: boolean;\n\n /**\n * Set to `true` to indicate that the current value of the input field is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Set to `false` to disallow custom color values to be typed into the input field.\n */\n @Prop({ reflect: true })\n public manualInput = true;\n\n /**\n * Defines the number of columns in the color swatch grid.\n * If not provided, it will default to the number of colors in the palette.\n */\n @Prop({ reflect: true })\n public columnCount?: number;\n\n /**\n * Custom color palette to use instead of Lime palette. Internal prop passed from parent.\n */\n @Prop()\n public palette?: CustomPalette;\n\n /**\n * Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n const background = this.value ? { '--background': this.value } : {};\n\n return [\n <div\n class=\"color-picker-palette\"\n style={{\n '--color-picker-column-count': `${this.getColumnCount()}`,\n }}\n >\n {this.renderSwatches()}\n </div>,\n <div class=\"chosen-color-name\">\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n invalid={this.invalid}\n placeholder={this.placeholder}\n disabled={!this.manualInput}\n />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return this.getPalette().map(this.renderSwatchButton);\n };\n\n private getPalette(): Swatch[] {\n if (this.usesCustomPalette()) {\n return (this.palette || []).map((entry) => {\n const normalized = this.normalizeEntry(entry);\n return {\n name: normalized.name || normalized.value,\n value: normalized.value,\n disabled: normalized.disabled,\n };\n });\n }\n\n // Order default swatches by brightness first, then by color.\n // This gives a more intuitive CSS grid layout logic, and\n // enables adding the `columnCount` prop.\n const swatches: Swatch[] = [];\n for (const b of brightnesses) {\n for (const color of colors) {\n swatches.push(createSwatch(color, b));\n }\n }\n return swatches;\n }\n\n private renderSwatchButton = (swatch: Swatch, index: number) => {\n const isSelected = this.value === swatch.value;\n const classList = {\n swatch: true,\n 'swatch--selected': isSelected,\n 'custom-swatch': this.usesCustomPalette(),\n };\n\n return (\n <button\n class={classList}\n style={{ '--limel-color-picker-swatch-color': swatch.value }}\n title={swatch.name}\n disabled={swatch.disabled}\n data-index={index}\n key={index}\n onClick={this.handleSwatchClick(swatch.value)}\n />\n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleSwatchClick = (value: string) => (event: MouseEvent) => {\n event.stopPropagation();\n const newValue = this.value === value ? '' : value;\n this.change.emit(newValue);\n };\n\n private normalizeEntry(\n entry: string | CustomColorSwatch\n ): CustomColorSwatch {\n if (typeof entry === 'string') {\n return { value: entry };\n }\n return entry;\n }\n\n private usesCustomPalette(): boolean {\n return this.palette?.length > 0;\n }\n\n private getColumnCount(): number {\n if (this.columnCount > 0) {\n return this.columnCount;\n }\n\n // Default palette: fixed 20 columns (one per base color)\n if (!this.usesCustomPalette()) {\n return 20;\n }\n\n // Custom palette: span all provided swatches unless empty\n const palette = this.getPalette();\n return palette.length > 0 ? palette.length : 1;\n }\n}\n"],"version":3}
package/dist/cjs/limel-color-picker.cjs.entry.js CHANGED
@@ -20,7 +20,7 @@ const ColorPicker = class {
20
20
  if (this.readonly) {
21
21
  return this.renderPickerTrigger();
22
22
  }
23
- return (index.h("limel-popover", { open: this.isOpen, openDirection: "bottom-start", onClose: this.onPopoverClose }, this.renderPickerTrigger(), index.h("limel-color-picker-palette", { ref: this.setColorPickerPaletteElement, value: this.value, label: this.label, helperText: this.helperText, placeholder: this.placeholder, invalid: this.invalid, onChange: this.handleChange, required: this.required, palette: this.palette, columnCount: this.paletteColumnCount })));
23
+ return (index.h("limel-popover", { open: this.isOpen, openDirection: "bottom-start", onClose: this.onPopoverClose }, this.renderPickerTrigger(), index.h("limel-color-picker-palette", { ref: this.setColorPickerPaletteElement, value: this.value, label: this.label, helperText: this.helperText, placeholder: this.placeholder, invalid: this.invalid, onChange: this.handleChange, required: this.required, palette: this.palette, columnCount: this.paletteColumnCount, manualInput: this.manualInput })));
24
24
  };
25
25
  this.renderPickerTrigger = () => {
26
26
  const background = this.value ? { '--background': this.value } : {};
@@ -51,6 +51,7 @@ const ColorPicker = class {
51
51
  this.readonly = false;
52
52
  this.invalid = false;
53
53
  this.placeholder = undefined;
54
+ this.manualInput = true;
54
55
  this.palette = undefined;
55
56
  this.paletteColumnCount = undefined;
56
57
  this.isOpen = false;
@@ -63,7 +64,7 @@ const ColorPicker = class {
63
64
  }
64
65
  }
65
66
  render() {
66
- return (index.h(index.Host, null, this.renderTooltip(), this.renderPickerPalette(), index.h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, disabled: this.disabled, invalid: this.invalid, placeholder: this.placeholder })));
67
+ return (index.h(index.Host, null, this.renderTooltip(), this.renderPickerPalette(), index.h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, disabled: this.disabled || !this.manualInput, invalid: this.invalid, placeholder: this.placeholder })));
67
68
  }
68
69
  };
69
70
  ColorPicker.style = colorPickerCss;
package/dist/cjs/limel-color-picker.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"limel-color-picker.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host(limel-color-picker) {\n display: grid;\n gap: 0.25rem;\n grid-template-columns: auto 1fr;\n}\n\nbutton[slot='trigger'] {\n all: unset;\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n width: shared_input-select-picker.$height-of-mdc-text-field;\n height: shared_input-select-picker.$height-of-mdc-text-field;\n\n border-radius: 0.5rem;\n\n &:not([disabled]):not([disabled='true']) {\n @include mixins.is-elevated-clickable();\n @include mixins.visualize-keyboard-focus();\n }\n\n &:before,\n &:after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n }\n\n &:before {\n @include mixins.add-chessboard-background();\n z-index: 0;\n }\n\n &:after {\n z-index: 1;\n box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n background: var(--background);\n }\n}\n\n:host([readonly]:not([readonly='false'])) {\n limel-input-field {\n transform: translateX(\n calc(\n #{shared_input-select-picker.$height-of-mdc-text-field} /\n 4 * -1\n )\n )\n translateY(\n calc(\n #{shared_input-select-picker.$height-of-mdc-text-field} / 4\n )\n );\n }\n}\n\n:host([readonly]:not([readonly='false'])),\n:host([disabled]:not([disabled='false'])) {\n button[slot='trigger'] {\n border: 1px solid rgba(var(--contrast-700), 0.65);\n }\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Host,\n} from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport type { CustomColorSwatch } from './color-picker.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n * @exampleComponent limel-example-color-picker-custom-palette\n */\n@Component({\n tag: 'limel-color-picker',\n shadow: true,\n styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n /**\n * Name or code of the chosen color\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * The label of the input field\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Helper text of the input field\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Displayed as tooltips when picker is hovered.\n */\n @Prop({ reflect: true })\n public tooltipLabel: string;\n\n /**\n * Set to `true` if a value is required\n */\n @Prop({ reflect: true })\n public required: boolean;\n\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to make the field read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value of the input field is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is focused and empty.\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * An array of either color value strings, or objects with a `name` and a `value`,\n * which replaces the default palette. Any valid CSS color format is accepted as value\n * (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).\n */\n @Prop()\n public palette?: Array<string | CustomColorSwatch>;\n\n /**\n * Defines the number of columns in the color swatch grid.\n * If not provided, it will default to the number of colors in the palette;\n * but stops at a maximum of 25 columns.\n */\n @Prop({ reflect: true })\n public paletteColumnCount?: number;\n\n /**\n * Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n @State()\n private isOpen = false;\n\n public componentDidRender() {\n if (this.shouldFocus && this.isOpen) {\n this.shouldFocus = false;\n this.contentElement?.focus();\n }\n }\n\n private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n private shouldFocus = false;\n\n public render() {\n return (\n <Host>\n {this.renderTooltip()}\n {this.renderPickerPalette()}\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n readonly={this.readonly}\n disabled={this.disabled}\n invalid={this.invalid}\n placeholder={this.placeholder}\n />\n </Host>\n );\n }\n private renderTooltip = () => {\n if (!this.readonly && this.tooltipLabel) {\n return (\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-button\"\n />\n );\n }\n };\n\n private renderPickerPalette = () => {\n if (this.readonly) {\n return this.renderPickerTrigger();\n }\n\n return (\n <limel-popover\n open={this.isOpen}\n openDirection=\"bottom-start\"\n onClose={this.onPopoverClose}\n >\n {this.renderPickerTrigger()}\n <limel-color-picker-palette\n ref={this.setColorPickerPaletteElement}\n value={this.value}\n label={this.label}\n helperText={this.helperText}\n placeholder={this.placeholder}\n invalid={this.invalid}\n onChange={this.handleChange}\n required={this.required}\n palette={this.palette as any}\n columnCount={this.paletteColumnCount}\n />\n </limel-popover>\n );\n };\n\n private renderPickerTrigger = () => {\n const background = this.value ? { '--background': this.value } : {};\n\n return (\n <button\n slot=\"trigger\"\n style={background}\n role=\"button\"\n onClick={this.openPopover}\n id=\"tooltip-button\"\n disabled={this.readonly || this.disabled}\n />\n );\n };\n\n private setColorPickerPaletteElement = (\n element: HTMLLimelColorPickerPaletteElement\n ) => {\n this.contentElement = element;\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n\n this.shouldFocus = this.isOpen;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"],"version":3}
1
+ {"file":"limel-color-picker.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host(limel-color-picker) {\n display: grid;\n gap: 0.25rem;\n grid-template-columns: auto 1fr;\n}\n\nbutton[slot='trigger'] {\n all: unset;\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n width: shared_input-select-picker.$height-of-mdc-text-field;\n height: shared_input-select-picker.$height-of-mdc-text-field;\n\n border-radius: 0.5rem;\n\n &:not([disabled]):not([disabled='true']) {\n @include mixins.is-elevated-clickable();\n @include mixins.visualize-keyboard-focus();\n }\n\n &:before,\n &:after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n }\n\n &:before {\n @include mixins.add-chessboard-background();\n z-index: 0;\n }\n\n &:after {\n z-index: 1;\n box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n background: var(--background);\n }\n}\n\n:host([readonly]:not([readonly='false'])) {\n limel-input-field {\n transform: translateX(\n calc(\n #{shared_input-select-picker.$height-of-mdc-text-field} /\n 4 * -1\n )\n )\n translateY(\n calc(\n #{shared_input-select-picker.$height-of-mdc-text-field} / 4\n )\n );\n }\n}\n\n:host([readonly]:not([readonly='false'])),\n:host([disabled]:not([disabled='false'])) {\n button[slot='trigger'] {\n border: 1px solid rgba(var(--contrast-700), 0.65);\n }\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Host,\n} from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport type { CustomColorSwatch } from './color-picker.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker-basic\n * @exampleComponent limel-example-color-picker-custom-palette\n * @exampleComponent limel-example-color-picker-manual-input\n * @exampleComponent limel-example-color-picker-composite\n */\n@Component({\n tag: 'limel-color-picker',\n shadow: true,\n styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n /**\n * Name or code of the chosen color\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * The label of the input field\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Helper text of the input field\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Displayed as tooltips when picker is hovered.\n */\n @Prop({ reflect: true })\n public tooltipLabel: string;\n\n /**\n * Set to `true` if a value is required\n */\n @Prop({ reflect: true })\n public required: boolean;\n\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to make the field read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value of the input field is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is focused and empty.\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Set to `false` to disallow custom color values to be typed into the input field.\n * Setting this to `false` does not completely disable the color picker.\n * It will only allow users to pick from the provided color palette.\n */\n @Prop({ reflect: true })\n public manualInput = true;\n\n /**\n * An array of either color value strings, or objects with a `name` and a `value`,\n * which replaces the default palette. Any valid CSS color format is accepted as value\n * (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).\n */\n @Prop()\n public palette?: Array<string | CustomColorSwatch>;\n\n /**\n * Defines the number of columns in the color swatch grid.\n * If not provided, it will default to the number of colors in the palette;\n * but stops at a maximum of 25 columns.\n */\n @Prop({ reflect: true })\n public paletteColumnCount?: number;\n\n /**\n * Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n @State()\n private isOpen = false;\n\n public componentDidRender() {\n if (this.shouldFocus && this.isOpen) {\n this.shouldFocus = false;\n this.contentElement?.focus();\n }\n }\n\n private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n private shouldFocus = false;\n\n public render() {\n return (\n <Host>\n {this.renderTooltip()}\n {this.renderPickerPalette()}\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n readonly={this.readonly}\n disabled={this.disabled || !this.manualInput}\n invalid={this.invalid}\n placeholder={this.placeholder}\n />\n </Host>\n );\n }\n private renderTooltip = () => {\n if (!this.readonly && this.tooltipLabel) {\n return (\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-button\"\n />\n );\n }\n };\n\n private renderPickerPalette = () => {\n if (this.readonly) {\n return this.renderPickerTrigger();\n }\n\n return (\n <limel-popover\n open={this.isOpen}\n openDirection=\"bottom-start\"\n onClose={this.onPopoverClose}\n >\n {this.renderPickerTrigger()}\n <limel-color-picker-palette\n ref={this.setColorPickerPaletteElement}\n value={this.value}\n label={this.label}\n helperText={this.helperText}\n placeholder={this.placeholder}\n invalid={this.invalid}\n onChange={this.handleChange}\n required={this.required}\n palette={this.palette as any}\n columnCount={this.paletteColumnCount}\n manualInput={this.manualInput}\n />\n </limel-popover>\n );\n };\n\n private renderPickerTrigger = () => {\n const background = this.value ? { '--background': this.value } : {};\n\n return (\n <button\n slot=\"trigger\"\n style={background}\n role=\"button\"\n onClick={this.openPopover}\n id=\"tooltip-button\"\n disabled={this.readonly || this.disabled}\n />\n );\n };\n\n private setColorPickerPaletteElement = (\n element: HTMLLimelColorPickerPaletteElement\n ) => {\n this.contentElement = element;\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n\n this.shouldFocus = this.isOpen;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"],"version":3}
package/dist/cjs/loader.cjs.js CHANGED
@@ -14,7 +14,7 @@ const patchEsm = () => {
14
14
  const defineCustomElements = (win, options) => {
15
15
  if (typeof window === 'undefined') return Promise.resolve();
16
16
  return patchEsm().then(() => {
17
- 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-list-item.cjs\",[[0,\"limel-list-item\",{\"language\":[513],\"value\":[8],\"text\":[513],\"secondaryText\":[513,\"secondary-text\"],\"disabled\":[516],\"icon\":[1],\"iconSize\":[513,\"icon-size\"],\"badgeIcon\":[516,\"badge-icon\"],\"selected\":[516],\"actions\":[16],\"primaryComponent\":[16],\"image\":[16],\"type\":[513]}]]],[\"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],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"placeholder\":[513],\"palette\":[16],\"paletteColumnCount\":[514,\"palette-column-count\"],\"isOpen\":[32]}]]],[\"limel-profile-picture.cjs\",[[1,\"limel-profile-picture\",{\"language\":[513],\"label\":[513],\"icon\":[1],\"helperText\":[1,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"required\":[516],\"invalid\":[516],\"loading\":[516],\"value\":[1],\"imageFit\":[513,\"image-fit\"],\"accept\":[513],\"resize\":[16],\"objectUrl\":[32],\"imageError\":[32],\"isErrorMessagePopoverOpen\":[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-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-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-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],\"language\":[513]}]]],[\"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-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"invalid\":[516],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-menu-item-meta.cjs\",[[1,\"limel-menu-item-meta\",{\"commandText\":[1,\"command-text\"],\"badge\":[8],\"showChevron\":[4,\"show-chevron\"]}]]],[\"limel-radio-button-group.cjs\",[[0,\"limel-radio-button-group\",{\"items\":[16],\"selectedItem\":[16],\"disabled\":[516],\"badgeIcons\":[516,\"badge-icons\"],\"maxLinesSecondaryText\":[514,\"max-lines-secondary-text\"]}]]],[\"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-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\"],\"placeholder\":[513],\"required\":[516],\"invalid\":[516],\"columnCount\":[514,\"column-count\"],\"palette\":[16]}]]],[\"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-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"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-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[1],\"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-dynamic-label.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[4,\"lazy-load-images\"]}]]],[\"limel-badge.cjs\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-helper-line.cjs\",[[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-portal_3.cjs\",[[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[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-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\"]}],[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-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[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\"]}],[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-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-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
17
+ 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-list-item.cjs\",[[0,\"limel-list-item\",{\"language\":[513],\"value\":[8],\"text\":[513],\"secondaryText\":[513,\"secondary-text\"],\"disabled\":[516],\"icon\":[1],\"iconSize\":[513,\"icon-size\"],\"badgeIcon\":[516,\"badge-icon\"],\"selected\":[516],\"actions\":[16],\"primaryComponent\":[16],\"image\":[16],\"type\":[513]}]]],[\"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],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"placeholder\":[513],\"manualInput\":[516,\"manual-input\"],\"palette\":[16],\"paletteColumnCount\":[514,\"palette-column-count\"],\"isOpen\":[32]}]]],[\"limel-profile-picture.cjs\",[[1,\"limel-profile-picture\",{\"language\":[513],\"label\":[513],\"icon\":[1],\"helperText\":[1,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"required\":[516],\"invalid\":[516],\"loading\":[516],\"value\":[1],\"imageFit\":[513,\"image-fit\"],\"accept\":[513],\"resize\":[16],\"objectUrl\":[32],\"imageError\":[32],\"isErrorMessagePopoverOpen\":[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-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-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-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],\"language\":[513]}]]],[\"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-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"invalid\":[516],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-menu-item-meta.cjs\",[[1,\"limel-menu-item-meta\",{\"commandText\":[1,\"command-text\"],\"badge\":[8],\"showChevron\":[4,\"show-chevron\"]}]]],[\"limel-radio-button-group.cjs\",[[0,\"limel-radio-button-group\",{\"items\":[16],\"selectedItem\":[16],\"disabled\":[516],\"badgeIcons\":[516,\"badge-icons\"],\"maxLinesSecondaryText\":[514,\"max-lines-secondary-text\"]}]]],[\"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-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\"],\"placeholder\":[513],\"required\":[516],\"invalid\":[516],\"manualInput\":[516,\"manual-input\"],\"columnCount\":[514,\"column-count\"],\"palette\":[16]}]]],[\"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-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"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-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[1],\"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-dynamic-label.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[4,\"lazy-load-images\"]}]]],[\"limel-badge.cjs\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-helper-line.cjs\",[[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-portal_3.cjs\",[[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[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-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\"]}],[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-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[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\"]}],[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-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-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
18
18
  });
19
19
  };
20
20
 
package/dist/collection/components/color-picker/color-picker-palette.js CHANGED
@@ -32,6 +32,7 @@ export class Palette {
32
32
  this.placeholder = undefined;
33
33
  this.required = undefined;
34
34
  this.invalid = false;
35
+ this.manualInput = true;
35
36
  this.columnCount = undefined;
36
37
  this.palette = undefined;
37
38
  }
@@ -41,7 +42,7 @@ export class Palette {
41
42
  h("div", { class: "color-picker-palette", style: {
42
43
  '--color-picker-column-count': `${this.getColumnCount()}`,
43
44
  } }, this.renderSwatches()),
44
- h("div", { class: "chosen-color-name" }, h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder }), h("div", { class: "chosen-color-preview", style: background })),
45
+ h("div", { class: "chosen-color-name" }, h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder, disabled: !this.manualInput }), h("div", { class: "chosen-color-preview", style: background })),
45
46
  ];
46
47
  }
47
48
  getPalette() {
@@ -206,6 +207,24 @@ export class Palette {
206
207
  "reflect": true,
207
208
  "defaultValue": "false"
208
209
  },
210
+ "manualInput": {
211
+ "type": "boolean",
212
+ "mutable": false,
213
+ "complexType": {
214
+ "original": "boolean",
215
+ "resolved": "boolean",
216
+ "references": {}
217
+ },
218
+ "required": false,
219
+ "optional": false,
220
+ "docs": {
221
+ "tags": [],
222
+ "text": "Set to `false` to disallow custom color values to be typed into the input field."
223
+ },
224
+ "attribute": "manual-input",
225
+ "reflect": true,
226
+ "defaultValue": "true"
227
+ },
209
228
  "columnCount": {
210
229
  "type": "number",
211
230
  "mutable": false,
package/dist/collection/components/color-picker/color-picker-palette.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"color-picker-palette.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker-palette.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, createSwatch, Swatch } from './swatches';\nimport type { CustomPalette, CustomColorSwatch } from './color-picker.types';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-color-picker-palette',\n shadow: { delegatesFocus: true },\n styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n /**\n * Color value that is manually typed by the user\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Label of the input field\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Helper text of the input field\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is focused and empty.\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Set to `true` if a value is required\n */\n @Prop({ reflect: true })\n public required: boolean;\n\n /**\n * Set to `true` to indicate that the current value of the input field is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Defines the number of columns in the color swatch grid.\n * If not provided, it will default to the number of colors in the palette.\n */\n @Prop({ reflect: true })\n public columnCount?: number;\n\n /**\n * Custom color palette to use instead of Lime palette. Internal prop passed from parent.\n */\n @Prop()\n public palette?: CustomPalette;\n\n /**\n * Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n const background = this.value ? { '--background': this.value } : {};\n\n return [\n <div\n class=\"color-picker-palette\"\n style={{\n '--color-picker-column-count': `${this.getColumnCount()}`,\n }}\n >\n {this.renderSwatches()}\n </div>,\n <div class=\"chosen-color-name\">\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n invalid={this.invalid}\n placeholder={this.placeholder}\n />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return this.getPalette().map(this.renderSwatchButton);\n };\n\n private getPalette(): Swatch[] {\n if (this.usesCustomPalette()) {\n return (this.palette || []).map((entry) => {\n const normalized = this.normalizeEntry(entry);\n return {\n name: normalized.name || normalized.value,\n value: normalized.value,\n disabled: normalized.disabled,\n };\n });\n }\n\n // Order default swatches by brightness first, then by color.\n // This gives a more intuitive CSS grid layout logic, and\n // enables adding the `columnCount` prop.\n const swatches: Swatch[] = [];\n for (const b of brightnesses) {\n for (const color of colors) {\n swatches.push(createSwatch(color, b));\n }\n }\n return swatches;\n }\n\n private renderSwatchButton = (swatch: Swatch, index: number) => {\n const isSelected = this.value === swatch.value;\n const classList = {\n swatch: true,\n 'swatch--selected': isSelected,\n 'custom-swatch': this.usesCustomPalette(),\n };\n\n return (\n <button\n class={classList}\n style={{ '--limel-color-picker-swatch-color': swatch.value }}\n title={swatch.name}\n disabled={swatch.disabled}\n data-index={index}\n key={index}\n onClick={this.handleSwatchClick(swatch.value)}\n />\n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleSwatchClick = (value: string) => (event: MouseEvent) => {\n event.stopPropagation();\n const newValue = this.value === value ? '' : value;\n this.change.emit(newValue);\n };\n\n private normalizeEntry(\n entry: string | CustomColorSwatch\n ): CustomColorSwatch {\n if (typeof entry === 'string') {\n return { value: entry };\n }\n return entry;\n }\n\n private usesCustomPalette(): boolean {\n return this.palette?.length > 0;\n }\n\n private getColumnCount(): number {\n if (this.columnCount > 0) {\n return this.columnCount;\n }\n\n // Default palette: fixed 20 columns (one per base color)\n if (!this.usesCustomPalette()) {\n return 20;\n }\n\n // Custom palette: span all provided swatches unless empty\n const palette = this.getPalette();\n return palette.length > 0 ? palette.length : 1;\n }\n}\n"]}
1
+ {"version":3,"file":"color-picker-palette.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker-palette.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, createSwatch, Swatch } from './swatches';\nimport type { CustomPalette, CustomColorSwatch } from './color-picker.types';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-color-picker-palette',\n shadow: { delegatesFocus: true },\n styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n /**\n * Color value that is manually typed by the user\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Label of the input field\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Helper text of the input field\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is focused and empty.\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Set to `true` if a value is required\n */\n @Prop({ reflect: true })\n public required: boolean;\n\n /**\n * Set to `true` to indicate that the current value of the input field is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Set to `false` to disallow custom color values to be typed into the input field.\n */\n @Prop({ reflect: true })\n public manualInput = true;\n\n /**\n * Defines the number of columns in the color swatch grid.\n * If not provided, it will default to the number of colors in the palette.\n */\n @Prop({ reflect: true })\n public columnCount?: number;\n\n /**\n * Custom color palette to use instead of Lime palette. Internal prop passed from parent.\n */\n @Prop()\n public palette?: CustomPalette;\n\n /**\n * Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n const background = this.value ? { '--background': this.value } : {};\n\n return [\n <div\n class=\"color-picker-palette\"\n style={{\n '--color-picker-column-count': `${this.getColumnCount()}`,\n }}\n >\n {this.renderSwatches()}\n </div>,\n <div class=\"chosen-color-name\">\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n invalid={this.invalid}\n placeholder={this.placeholder}\n disabled={!this.manualInput}\n />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return this.getPalette().map(this.renderSwatchButton);\n };\n\n private getPalette(): Swatch[] {\n if (this.usesCustomPalette()) {\n return (this.palette || []).map((entry) => {\n const normalized = this.normalizeEntry(entry);\n return {\n name: normalized.name || normalized.value,\n value: normalized.value,\n disabled: normalized.disabled,\n };\n });\n }\n\n // Order default swatches by brightness first, then by color.\n // This gives a more intuitive CSS grid layout logic, and\n // enables adding the `columnCount` prop.\n const swatches: Swatch[] = [];\n for (const b of brightnesses) {\n for (const color of colors) {\n swatches.push(createSwatch(color, b));\n }\n }\n return swatches;\n }\n\n private renderSwatchButton = (swatch: Swatch, index: number) => {\n const isSelected = this.value === swatch.value;\n const classList = {\n swatch: true,\n 'swatch--selected': isSelected,\n 'custom-swatch': this.usesCustomPalette(),\n };\n\n return (\n <button\n class={classList}\n style={{ '--limel-color-picker-swatch-color': swatch.value }}\n title={swatch.name}\n disabled={swatch.disabled}\n data-index={index}\n key={index}\n onClick={this.handleSwatchClick(swatch.value)}\n />\n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleSwatchClick = (value: string) => (event: MouseEvent) => {\n event.stopPropagation();\n const newValue = this.value === value ? '' : value;\n this.change.emit(newValue);\n };\n\n private normalizeEntry(\n entry: string | CustomColorSwatch\n ): CustomColorSwatch {\n if (typeof entry === 'string') {\n return { value: entry };\n }\n return entry;\n }\n\n private usesCustomPalette(): boolean {\n return this.palette?.length > 0;\n }\n\n private getColumnCount(): number {\n if (this.columnCount > 0) {\n return this.columnCount;\n }\n\n // Default palette: fixed 20 columns (one per base color)\n if (!this.usesCustomPalette()) {\n return 20;\n }\n\n // Custom palette: span all provided swatches unless empty\n const palette = this.getPalette();\n return palette.length > 0 ? palette.length : 1;\n }\n}\n"]}
package/dist/collection/components/color-picker/color-picker.js CHANGED
@@ -10,9 +10,10 @@ import { h, Host, } from '@stencil/core';
10
10
  * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
11
11
  * :::
12
12
  *
13
- * @exampleComponent limel-example-color-picker
14
- * @exampleComponent limel-example-color-picker-readonly
13
+ * @exampleComponent limel-example-color-picker-basic
15
14
  * @exampleComponent limel-example-color-picker-custom-palette
15
+ * @exampleComponent limel-example-color-picker-manual-input
16
+ * @exampleComponent limel-example-color-picker-composite
16
17
  */
17
18
  export class ColorPicker {
18
19
  constructor() {
@@ -26,7 +27,7 @@ export class ColorPicker {
26
27
  if (this.readonly) {
27
28
  return this.renderPickerTrigger();
28
29
  }
29
- return (h("limel-popover", { open: this.isOpen, openDirection: "bottom-start", onClose: this.onPopoverClose }, this.renderPickerTrigger(), h("limel-color-picker-palette", { ref: this.setColorPickerPaletteElement, value: this.value, label: this.label, helperText: this.helperText, placeholder: this.placeholder, invalid: this.invalid, onChange: this.handleChange, required: this.required, palette: this.palette, columnCount: this.paletteColumnCount })));
30
+ return (h("limel-popover", { open: this.isOpen, openDirection: "bottom-start", onClose: this.onPopoverClose }, this.renderPickerTrigger(), h("limel-color-picker-palette", { ref: this.setColorPickerPaletteElement, value: this.value, label: this.label, helperText: this.helperText, placeholder: this.placeholder, invalid: this.invalid, onChange: this.handleChange, required: this.required, palette: this.palette, columnCount: this.paletteColumnCount, manualInput: this.manualInput })));
30
31
  };
31
32
  this.renderPickerTrigger = () => {
32
33
  const background = this.value ? { '--background': this.value } : {};
@@ -57,6 +58,7 @@ export class ColorPicker {
57
58
  this.readonly = false;
58
59
  this.invalid = false;
59
60
  this.placeholder = undefined;
61
+ this.manualInput = true;
60
62
  this.palette = undefined;
61
63
  this.paletteColumnCount = undefined;
62
64
  this.isOpen = false;
@@ -69,7 +71,7 @@ export class ColorPicker {
69
71
  }
70
72
  }
71
73
  render() {
72
- return (h(Host, null, this.renderTooltip(), this.renderPickerPalette(), h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, disabled: this.disabled, invalid: this.invalid, placeholder: this.placeholder })));
74
+ return (h(Host, null, this.renderTooltip(), this.renderPickerPalette(), h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, disabled: this.disabled || !this.manualInput, invalid: this.invalid, placeholder: this.placeholder })));
73
75
  }
74
76
  static get is() { return "limel-color-picker"; }
75
77
  static get encapsulation() { return "shadow"; }
@@ -241,6 +243,24 @@ export class ColorPicker {
241
243
  "attribute": "placeholder",
242
244
  "reflect": true
243
245
  },
246
+ "manualInput": {
247
+ "type": "boolean",
248
+ "mutable": false,
249
+ "complexType": {
250
+ "original": "boolean",
251
+ "resolved": "boolean",
252
+ "references": {}
253
+ },
254
+ "required": false,
255
+ "optional": false,
256
+ "docs": {
257
+ "tags": [],
258
+ "text": "Set to `false` to disallow custom color values to be typed into the input field.\nSetting this to `false` does not completely disable the color picker.\nIt will only allow users to pick from the provided color palette."
259
+ },
260
+ "attribute": "manual-input",
261
+ "reflect": true,
262
+ "defaultValue": "true"
263
+ },
244
264
  "palette": {
245
265
  "type": "unknown",
246
266
  "mutable": false,