@limetech/lime-elements 38.24.5 → 38.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-color-picker-palette.cjs.entry.js +87 -18
- package/dist/cjs/limel-color-picker-palette.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-color-picker.cjs.entry.js +10 -8
- package/dist/cjs/limel-color-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/color-picker/color-picker-palette.css +96 -742
- package/dist/collection/components/color-picker/color-picker-palette.js +134 -14
- package/dist/collection/components/color-picker/color-picker-palette.js.map +1 -1
- package/dist/collection/components/color-picker/color-picker.css +25 -39
- package/dist/collection/components/color-picker/color-picker.js +106 -9
- package/dist/collection/components/color-picker/color-picker.js.map +1 -1
- package/dist/collection/components/color-picker/color-picker.types.js +2 -0
- package/dist/collection/components/color-picker/color-picker.types.js.map +1 -0
- package/dist/collection/components/color-picker/swatches.js +33 -4
- package/dist/collection/components/color-picker/swatches.js.map +1 -1
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-color-picker-palette.entry.js +87 -18
- package/dist/esm/limel-color-picker-palette.entry.js.map +1 -1
- package/dist/esm/limel-color-picker.entry.js +11 -9
- package/dist/esm/limel-color-picker.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js.map +1 -1
- package/dist/lime-elements/p-0345965e.entry.js +2 -0
- package/dist/lime-elements/p-0345965e.entry.js.map +1 -0
- package/dist/lime-elements/p-e1213871.entry.js +2 -0
- package/dist/lime-elements/p-e1213871.entry.js.map +1 -0
- package/dist/types/components/color-picker/color-picker-palette.d.ts +26 -2
- package/dist/types/components/color-picker/color-picker.d.ts +35 -2
- package/dist/types/components/color-picker/color-picker.types.d.ts +24 -0
- package/dist/types/components/color-picker/swatches.d.ts +27 -2
- package/dist/types/components.d.ts +80 -2
- package/package.json +1 -1
- package/dist/lime-elements/p-63f2f6b8.entry.js +0 -2
- package/dist/lime-elements/p-63f2f6b8.entry.js.map +0 -1
- package/dist/lime-elements/p-bc5bbdf6.entry.js +0 -2
- package/dist/lime-elements/p-bc5bbdf6.entry.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-288f0842.js";export{s as setNonce}from"./p-288f0842.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-250acfe4",[[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]}]]],["p-ac334aa7",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-b5abf284",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-5ac43dbd",[[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]}]]],["p-0d4a48ce",[[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]}]]],["p-b43e8cb2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-d349e355",[[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]}]]],["p-bc5bbdf6",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-ed04acfc",[[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]}]]],["p-ac55217a",[[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]}]]],["p-cbbe129b",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-aeba4aa4",[[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"]]]]],["p-483ba5da",[[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]}]]],["p-8e7d31b3",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-f83ebd28",[[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]}]]],["p-ed8aa16c",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"icon":[1],"invalid":[516],"actions":[16],"language":[513]}]]],["p-580a29c5",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-e6245ef7",[[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]}]]],["p-68192519",[[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]}]]],["p-3a61deb1",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-51d475d8",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-2fdb51de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-ef1d26ac",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-1e4ca584",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-2116b3ce",[[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]}]]],["p-0115bb1e",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-5b1cb891",[[1,"limel-menu-item-meta",{"commandText":[1,"command-text"],"badge":[8],"showChevron":[4,"show-chevron"]}]]],["p-07988749",[[0,"limel-radio-button-group",{"items":[16],"selectedItem":[16],"disabled":[516],"badgeIcons":[516,"badge-icons"],"maxLinesSecondaryText":[514,"max-lines-secondary-text"]}]]],["p-8e3c4418",[[1,"limel-ai-avatar",{"isThinking":[516,"is-thinking"],"language":[513]}]]],["p-596af3ae",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-54fc2316",[[1,"limel-config",{"config":[16]}]]],["p-4ed15eb7",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-179e9d78",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-0d247b83",[[1,"limel-grid"]]],["p-202107e9",[[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]}]]],["p-63f2f6b8",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-47da9c59",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-a7aa383b",[[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]}]]],["p-d80e776d",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-1b036add",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-c7ffe359",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-32572c31",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-d4a220eb",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-52fb3988",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-eb396630",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-10d1256b",[[1,"limel-3d-hover-effect-glow"]]],["p-b928421f",[[17,"limel-icon-button",{"icon":[1],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-e839ce5b",[[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]}]]],["p-b45cfa71",[[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}]]],["p-0592207d",[[1,"limel-markdown",{"value":[1],"whitelist":[16],"lazyLoadImages":[4,"lazy-load-images"]}]]],["p-18a3c28a",[[1,"limel-badge",{"label":[520]}]]],["p-e4bafb75",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-7528a002",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-b5a96409",[[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]}]]],["p-78747886",[[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"]}]]],["p-2bfb4b41",[[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]}]]],["p-c6aaf532",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-2ff2186f",[[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]}]]],["p-cc7f4c81",[[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]}]]],["p-e6bb4d1a",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-eac0220e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
|
|
1
|
+
import{p as e,b as l}from"./p-288f0842.js";export{s as setNonce}from"./p-288f0842.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-250acfe4",[[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]}]]],["p-ac334aa7",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-b5abf284",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-5ac43dbd",[[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]}]]],["p-0d4a48ce",[[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]}]]],["p-b43e8cb2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-d349e355",[[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]}]]],["p-e1213871",[[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]}]]],["p-ed04acfc",[[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]}]]],["p-ac55217a",[[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]}]]],["p-cbbe129b",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-aeba4aa4",[[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"]]]]],["p-483ba5da",[[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]}]]],["p-8e7d31b3",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-f83ebd28",[[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]}]]],["p-ed8aa16c",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"icon":[1],"invalid":[516],"actions":[16],"language":[513]}]]],["p-580a29c5",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-e6245ef7",[[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]}]]],["p-68192519",[[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]}]]],["p-3a61deb1",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-51d475d8",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-2fdb51de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-ef1d26ac",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-1e4ca584",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-2116b3ce",[[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]}]]],["p-0115bb1e",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-5b1cb891",[[1,"limel-menu-item-meta",{"commandText":[1,"command-text"],"badge":[8],"showChevron":[4,"show-chevron"]}]]],["p-07988749",[[0,"limel-radio-button-group",{"items":[16],"selectedItem":[16],"disabled":[516],"badgeIcons":[516,"badge-icons"],"maxLinesSecondaryText":[514,"max-lines-secondary-text"]}]]],["p-8e3c4418",[[1,"limel-ai-avatar",{"isThinking":[516,"is-thinking"],"language":[513]}]]],["p-596af3ae",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-54fc2316",[[1,"limel-config",{"config":[16]}]]],["p-4ed15eb7",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-179e9d78",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-0d247b83",[[1,"limel-grid"]]],["p-202107e9",[[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]}]]],["p-0345965e",[[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]}]]],["p-47da9c59",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-a7aa383b",[[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]}]]],["p-d80e776d",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-1b036add",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-c7ffe359",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-32572c31",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-d4a220eb",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-52fb3988",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-eb396630",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-10d1256b",[[1,"limel-3d-hover-effect-glow"]]],["p-b928421f",[[17,"limel-icon-button",{"icon":[1],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-e839ce5b",[[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]}]]],["p-b45cfa71",[[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}]]],["p-0592207d",[[1,"limel-markdown",{"value":[1],"whitelist":[16],"lazyLoadImages":[4,"lazy-load-images"]}]]],["p-18a3c28a",[[1,"limel-badge",{"label":[520]}]]],["p-e4bafb75",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-7528a002",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-b5a96409",[[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]}]]],["p-78747886",[[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"]}]]],["p-2bfb4b41",[[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]}]]],["p-c6aaf532",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-2ff2186f",[[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]}]]],["p-cc7f4c81",[[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]}]]],["p-e6bb4d1a",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-eac0220e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
|
|
2
2
|
//# sourceMappingURL=lime-elements.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","JSON","parse"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.4.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n var _a, _b, _c;\n return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n if (BUILD.cssVarShim) {\n // shim css vars\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n plt.$cssShim$ = win.__cssshim;\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /*noop*/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = \n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n // Safari < v11 support: This IF is true if it's Safari below v11.\n // This fn cannot use async/await since Safari didn't support it until v11,\n // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n // so both the ESM file and nomodule file would get downloaded. Only Safari\n // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n return {\n then() {\n /* promise noop */\n },\n };\n }\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (!BUILD.safari10 && importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n }\n else if (BUILD.dynamicImportShim || BUILD.safari10) {\n opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim) {\n patchDynamicImport(opts.resourcesUrl, scriptElm);\n }\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim && !win.customElements) {\n // module support, but no custom elements support (Old Edge)\n // @ts-ignore\n return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n }\n }\n return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n const importFunctionName = getDynamicImportFunction(NAMESPACE);\n try {\n // test if this browser supports dynamic imports\n // There is a caching issue in V8, that breaks using import() in Function\n // By generating a random string, we can workaround it\n // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n }\n catch (e) {\n // this shim is specifically for browsers that do support \"esm\" imports\n // however, they do NOT support \"dynamic\" imports\n // basically this code is for old Edge, v18 and below\n const moduleMap = new Map();\n win[importFunctionName] = (src) => {\n var _a;\n const url = new URL(src, base).href;\n let mod = moduleMap.get(url);\n if (!mod) {\n const script = doc.createElement('script');\n script.type = 'module';\n script.crossOrigin = orgScriptElm.crossOrigin;\n script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n type: 'application/javascript',\n }));\n // Apply CSP nonce to the script tag if it exists\n const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n if (nonce != null) {\n script.setAttribute('nonce', nonce);\n }\n mod = new Promise((resolve) => {\n script.onload = () => {\n resolve(win[importFunctionName].m);\n script.remove();\n };\n });\n moduleMap.set(url, mod);\n doc.head.appendChild(script);\n }\n return mod;\n };\n }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAmBA,MAAMA,EAAe,KAkCjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAiB3E,GAAuBF,IAAe,GAAI,CACtCE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IAGrD,CAcI,OAAOC,EAAeJ,EAAK,ECrF/BH,IAAeQ,MAAKC,GAEXC,EAAcC,KAAAC,MAAA
|
|
1
|
+
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","JSON","parse"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.4.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n var _a, _b, _c;\n return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n if (BUILD.cssVarShim) {\n // shim css vars\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n plt.$cssShim$ = win.__cssshim;\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /*noop*/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = \n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n // Safari < v11 support: This IF is true if it's Safari below v11.\n // This fn cannot use async/await since Safari didn't support it until v11,\n // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n // so both the ESM file and nomodule file would get downloaded. Only Safari\n // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n return {\n then() {\n /* promise noop */\n },\n };\n }\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (!BUILD.safari10 && importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n }\n else if (BUILD.dynamicImportShim || BUILD.safari10) {\n opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim) {\n patchDynamicImport(opts.resourcesUrl, scriptElm);\n }\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim && !win.customElements) {\n // module support, but no custom elements support (Old Edge)\n // @ts-ignore\n return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n }\n }\n return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n const importFunctionName = getDynamicImportFunction(NAMESPACE);\n try {\n // test if this browser supports dynamic imports\n // There is a caching issue in V8, that breaks using import() in Function\n // By generating a random string, we can workaround it\n // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n }\n catch (e) {\n // this shim is specifically for browsers that do support \"esm\" imports\n // however, they do NOT support \"dynamic\" imports\n // basically this code is for old Edge, v18 and below\n const moduleMap = new Map();\n win[importFunctionName] = (src) => {\n var _a;\n const url = new URL(src, base).href;\n let mod = moduleMap.get(url);\n if (!mod) {\n const script = doc.createElement('script');\n script.type = 'module';\n script.crossOrigin = orgScriptElm.crossOrigin;\n script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n type: 'application/javascript',\n }));\n // Apply CSP nonce to the script tag if it exists\n const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n if (nonce != null) {\n script.setAttribute('nonce', nonce);\n }\n mod = new Promise((resolve) => {\n script.onload = () => {\n resolve(win[importFunctionName].m);\n script.remove();\n };\n });\n moduleMap.set(url, mod);\n doc.head.appendChild(script);\n }\n return mod;\n };\n }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAmBA,MAAMA,EAAe,KAkCjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAiB3E,GAAuBF,IAAe,GAAI,CACtCE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IAGrD,CAcI,OAAOC,EAAeJ,EAAK,ECrF/BH,IAAeQ,MAAKC,GAEXC,EAAcC,KAAAC,MAAA,+kaAAuCH"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as r,h as o}from"./p-288f0842.js";const t=["red","pink","magenta","purple","violet","indigo","blue","sky","cyan","teal","green","lime","grass","yellow","amber","orange","coral","brown","gray","glaucous"];const l=["lighter","light","default","dark","darker"];function i(e,r){return`--color-${e}-${r}`}function a(e,r){return`rgb(var(${i(e,r)}))`}function n(e,r){return`${e} ${r}`}function s(e,r){return{name:n(e,r),value:a(e,r)}}const c='@charset "UTF-8";.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host(limel-color-picker-palette){--limel-color-palette-gap:0.25rem;--limel-color-palette-max-column-count:25;--limel-color-palette-min-width:8rem;box-sizing:border-box;border-radius:0.75rem;display:flex;flex-direction:column;gap:1rem;padding:0.75rem}*,*:before,:after{box-sizing:border-box}.color-picker-palette{display:grid;gap:var(--limel-color-palette-gap);grid-template-columns:repeat(min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)), 1fr);width:100%;max-width:58rem;min-width:var(--limel-color-palette-min-width)}.chosen-color-name{display:flex;gap:0.5rem}limel-input-field{flex-grow:1;width:min-content}.chosen-color-preview{flex-shrink:0;isolation:isolate;position:relative;width:2.5rem;height:2.5rem;border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.chosen-color-preview:before,.chosen-color-preview:after{content:"";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20style%3D%27fill-rule%3Aevenodd%3B%27%3E%3Cpath%20fill%3D%27rgba(186%2C186%2C192%2C0.16)%27%20d%3D%27M0%200h4v4H0zM4%204h4v4H4z%27%2F%3E%3C%2Fsvg%3E");background-size:0.5rem;z-index:0}.chosen-color-preview:after{background:var(--background);z-index:1}button.swatch{all:unset;position:relative;display:flex;justify-content:center;align-items:center;max-width:3rem;min-width:max(2rem, 100% / min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)) - (min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)) - 1) * var(--limel-color-palette-gap));aspect-ratio:1;border-radius:0.1875rem;background-color:var(--limel-color-picker-swatch-color)}button.swatch:focus{outline:none}button.swatch:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.swatch:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--limel-color-picker-swatch-color)}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):focus,button.swatch:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--limel-color-picker-swatch-color)}button.swatch:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}button.swatch:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.swatch:focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.125rem rgb(var(--contrast-100)) inset}button.swatch[disabled]{cursor:not-allowed;box-shadow:0 0 0 0.125rem rgb(var(--contrast-100), 0.6) inset}button.swatch[disabled]:after{content:"";position:absolute;inset:0;margin:auto;width:0.125rem;height:100%;opacity:0.6;rotate:45deg;border-radius:1rem;background-color:rgb(var(--contrast-100))}button.swatch--selected{box-shadow:var(--button-shadow-inset);border-radius:50%}';const d=class{constructor(t){e(this,t);this.change=r(this,"change",7);this.renderSwatches=()=>this.getPalette().map(this.renderSwatchButton);this.renderSwatchButton=(e,r)=>{const t=this.value===e.value;const l={swatch:true,"swatch--selected":t,"custom-swatch":this.usesCustomPalette()};return o("button",{class:l,style:{"--limel-color-picker-swatch-color":e.value},title:e.name,disabled:e.disabled,"data-index":r,key:r,onClick:this.handleSwatchClick(e.value)})};this.handleChange=e=>{e.stopPropagation();this.change.emit(e.detail)};this.handleSwatchClick=e=>r=>{r.stopPropagation();const o=this.value===e?"":e;this.change.emit(o)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.placeholder=undefined;this.required=undefined;this.invalid=false;this.columnCount=undefined;this.palette=undefined}render(){const e=this.value?{"--background":this.value}:{};return[o("div",{class:"color-picker-palette",style:{"--color-picker-column-count":`${this.getColumnCount()}`}},this.renderSwatches()),o("div",{class:"chosen-color-name"},o("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required,invalid:this.invalid,placeholder:this.placeholder}),o("div",{class:"chosen-color-preview",style:e}))]}getPalette(){if(this.usesCustomPalette()){return(this.palette||[]).map((e=>{const r=this.normalizeEntry(e);return{name:r.name||r.value,value:r.value,disabled:r.disabled}}))}const e=[];for(const r of l){for(const o of t){e.push(s(o,r))}}return e}normalizeEntry(e){if(typeof e==="string"){return{value:e}}return e}usesCustomPalette(){var e;return((e=this.palette)===null||e===void 0?void 0:e.length)>0}getColumnCount(){if(this.columnCount>0){return this.columnCount}if(!this.usesCustomPalette()){return 20}const e=this.getPalette();return e.length>0?e.length:1}static get delegatesFocus(){return true}};d.style=c;export{d as limel_color_picker_palette};
|
|
2
|
+
//# sourceMappingURL=p-0345965e.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["colors","brightnesses","getColorName","color","brightness","getSwatchValue","getSwatchName","createSwatch","name","value","colorPickerPaletteCss","Palette","this","renderSwatches","getPalette","map","renderSwatchButton","swatch","index","isSelected","classList","usesCustomPalette","h","class","style","title","disabled","key","onClick","handleSwatchClick","handleChange","event","stopPropagation","change","emit","detail","newValue","render","background","getColumnCount","label","helperText","onChange","required","invalid","placeholder","palette","entry","normalized","normalizeEntry","swatches","b","push","_a","length","columnCount"],"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"],"mappings":"kDAAO,MAAMA,EAAS,CAClB,MACA,OACA,UACA,SACA,SACA,SACA,OACA,MACA,OACA,OACA,QACA,OACA,QACA,SACA,QACA,SACA,QACA,QACA,OACA,YAGG,MAAMC,EAAe,CAAC,UAAW,QAAS,UAAW,OAAQ,U,SAepDC,EAAaC,EAAeC,GACxC,MAAO,WAAWD,KAASC,GAC/B,C,SAOgBC,EAAeF,EAAeC,GAC1C,MAAO,WAAWF,EAAaC,EAAOC,MAC1C,C,SAOgBE,EAAcH,EAAeC,GACzC,MAAO,GAAGD,KAASC,GACvB,C,SAOgBG,EAAaJ,EAAeC,GACxC,MAAO,CACHI,KAAMF,EAAcH,EAAOC,GAC3BK,MAAOJ,EAAeF,EAAOC,GAErC,CCtEA,MAAMM,EAAwB,whK,MCajBC,EAAO,M,wDAqFRC,KAAAC,eAAiB,IACdD,KAAKE,aAAaC,IAAIH,KAAKI,oBA2B9BJ,KAAAI,mBAAqB,CAACC,EAAgBC,KAC1C,MAAMC,EAAaP,KAAKH,QAAUQ,EAAOR,MACzC,MAAMW,EAAY,CACdH,OAAQ,KACR,mBAAoBE,EACpB,gBAAiBP,KAAKS,qBAG1B,OACIC,EAAA,UACIC,MAAOH,EACPI,MAAO,CAAE,oCAAqCP,EAAOR,OACrDgB,MAAOR,EAAOT,KACdkB,SAAUT,EAAOS,SAAQ,aACbR,EACZS,IAAKT,EACLU,QAAShB,KAAKiB,kBAAkBZ,EAAOR,QACzC,EAIFG,KAAAkB,aAAgBC,IACpBA,EAAMC,kBACNpB,KAAKqB,OAAOC,KAAKH,EAAMI,OAAO,EAG1BvB,KAAAiB,kBAAqBpB,GAAmBsB,IAC5CA,EAAMC,kBACN,MAAMI,EAAWxB,KAAKH,QAAUA,EAAQ,GAAKA,EAC7CG,KAAKqB,OAAOC,KAAKE,EAAS,E,oIAzGb,M,kDAqBVC,SACH,MAAMC,EAAa1B,KAAKH,MAAQ,CAAE,eAAgBG,KAAKH,OAAU,GAEjE,MAAO,CACHa,EAAA,OACIC,MAAM,uBACNC,MAAO,CACH,8BAA+B,GAAGZ,KAAK2B,qBAG1C3B,KAAKC,kBAEVS,EAAA,OAAKC,MAAM,qBACPD,EAAA,qBACIkB,MAAO5B,KAAK4B,MACZC,WAAY7B,KAAK6B,WACjBhC,MAAOG,KAAKH,MACZiC,SAAU9B,KAAKkB,aACfa,SAAU/B,KAAK+B,SACfC,QAAShC,KAAKgC,QACdC,YAAajC,KAAKiC,cAEtBvB,EAAA,OAAKC,MAAM,uBAAuBC,MAAOc,K,CAS7CxB,aACJ,GAAIF,KAAKS,oBAAqB,CAC1B,OAAQT,KAAKkC,SAAW,IAAI/B,KAAKgC,IAC7B,MAAMC,EAAapC,KAAKqC,eAAeF,GACvC,MAAO,CACHvC,KAAMwC,EAAWxC,MAAQwC,EAAWvC,MACpCA,MAAOuC,EAAWvC,MAClBiB,SAAUsB,EAAWtB,SACxB,G,CAOT,MAAMwB,EAAqB,GAC3B,IAAK,MAAMC,KAAKlD,EAAc,CAC1B,IAAK,MAAME,KAASH,EAAQ,CACxBkD,EAASE,KAAK7C,EAAaJ,EAAOgD,G,EAG1C,OAAOD,C,CAmCHD,eACJF,GAEA,UAAWA,IAAU,SAAU,CAC3B,MAAO,CAAEtC,MAAOsC,E,CAEpB,OAAOA,C,CAGH1B,oB,MACJ,QAAOgC,EAAAzC,KAAKkC,WAAO,MAAAO,SAAA,SAAAA,EAAEC,QAAS,C,CAG1Bf,iBACJ,GAAI3B,KAAK2C,YAAc,EAAG,CACtB,OAAO3C,KAAK2C,W,CAIhB,IAAK3C,KAAKS,oBAAqB,CAC3B,OAAO,E,CAIX,MAAMyB,EAAUlC,KAAKE,aACrB,OAAOgC,EAAQQ,OAAS,EAAIR,EAAQQ,OAAS,C"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as t,h as r,H as o}from"./p-288f0842.js";const i='@charset "UTF-8";.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host(limel-color-picker){display:grid;gap:0.25rem;grid-template-columns:auto 1fr}button[slot=trigger]{all:unset;box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem;border-radius:0.5rem}button[slot=trigger]:not([disabled]):not([disabled=true]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}button[slot=trigger]:not([disabled]):not([disabled=true]):hover,button[slot=trigger]:not([disabled]):not([disabled=true]):focus,button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible{will-change:color, background-color, box-shadow, transform}button[slot=trigger]:not([disabled]):not([disabled=true]):hover,button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button[slot=trigger]:not([disabled]):not([disabled=true]):active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button[slot=trigger]:not([disabled]):not([disabled=true]):hover,button[slot=trigger]:not([disabled]):not([disabled=true]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button[slot=trigger]:not([disabled]):not([disabled=true]):focus{outline:none}button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button[slot=trigger]:before,button[slot=trigger]:after{content:"";position:absolute;inset:0;border-radius:inherit}button[slot=trigger]:before{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20style%3D%27fill-rule%3Aevenodd%3B%27%3E%3Cpath%20fill%3D%27rgba(186%2C186%2C192%2C0.16)%27%20d%3D%27M0%200h4v4H0zM4%204h4v4H4z%27%2F%3E%3C%2Fsvg%3E");background-size:0.5rem;z-index:0}button[slot=trigger]:after{z-index:1;box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset;background:var(--background)}:host([readonly]:not([readonly=false])) limel-input-field{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc( 2.5rem / 4 ))}:host([readonly]:not([readonly=false])) button[slot=trigger],:host([disabled]:not([disabled=false])) button[slot=trigger]{border:1px solid rgba(var(--contrast-700), 0.65)}';const l=class{constructor(o){e(this,o);this.change=t(this,"change",7);this.shouldFocus=false;this.renderTooltip=()=>{if(!this.readonly&&this.tooltipLabel){return r("limel-tooltip",{label:this.tooltipLabel,elementId:"tooltip-button"})}};this.renderPickerPalette=()=>{if(this.readonly){return this.renderPickerTrigger()}return r("limel-popover",{open:this.isOpen,openDirection:"bottom-start",onClose:this.onPopoverClose},this.renderPickerTrigger(),r("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}))};this.renderPickerTrigger=()=>{const e=this.value?{"--background":this.value}:{};return r("button",{slot:"trigger",style:e,role:"button",onClick:this.openPopover,id:"tooltip-button",disabled:this.readonly||this.disabled})};this.setColorPickerPaletteElement=e=>{this.contentElement=e};this.openPopover=e=>{e.stopPropagation();this.isOpen=true;this.shouldFocus=this.isOpen};this.onPopoverClose=e=>{e.stopPropagation();this.isOpen=false};this.handleChange=e=>{e.stopPropagation();this.change.emit(e.detail)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.tooltipLabel=undefined;this.required=undefined;this.disabled=false;this.readonly=false;this.invalid=false;this.placeholder=undefined;this.palette=undefined;this.paletteColumnCount=undefined;this.isOpen=false}componentDidRender(){var e;if(this.shouldFocus&&this.isOpen){this.shouldFocus=false;(e=this.contentElement)===null||e===void 0?void 0:e.focus()}}render(){return r(o,null,this.renderTooltip(),this.renderPickerPalette(),r("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}))}};l.style=i;export{l as limel_color_picker};
|
|
2
|
+
//# sourceMappingURL=p-e1213871.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["colorPickerCss","ColorPicker","this","shouldFocus","renderTooltip","readonly","tooltipLabel","h","label","elementId","renderPickerPalette","renderPickerTrigger","open","isOpen","openDirection","onClose","onPopoverClose","ref","setColorPickerPaletteElement","value","helperText","placeholder","invalid","onChange","handleChange","required","palette","columnCount","paletteColumnCount","background","slot","style","role","onClick","openPopover","id","disabled","element","contentElement","event","stopPropagation","change","emit","detail","componentDidRender","_a","focus","render","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"],"mappings":"yDAAA,MAAMA,EAAiB,8uI,MCgCVC,EAAW,M,wDAgGZC,KAAAC,YAAc,MAqBdD,KAAAE,cAAgB,KACpB,IAAKF,KAAKG,UAAYH,KAAKI,aAAc,CACrC,OACIC,EAAA,iBACIC,MAAON,KAAKI,aACZG,UAAU,kB,GAMlBP,KAAAQ,oBAAsB,KAC1B,GAAIR,KAAKG,SAAU,CACf,OAAOH,KAAKS,qB,CAGhB,OACIJ,EAAA,iBACIK,KAAMV,KAAKW,OACXC,cAAc,eACdC,QAASb,KAAKc,gBAEbd,KAAKS,sBACNJ,EAAA,8BACIU,IAAKf,KAAKgB,6BACVC,MAAOjB,KAAKiB,MACZX,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBC,YAAanB,KAAKmB,YAClBC,QAASpB,KAAKoB,QACdC,SAAUrB,KAAKsB,aACfC,SAAUvB,KAAKuB,SACfC,QAASxB,KAAKwB,QACdC,YAAazB,KAAK0B,qBAEV,EAIhB1B,KAAAS,oBAAsB,KAC1B,MAAMkB,EAAa3B,KAAKiB,MAAQ,CAAE,eAAgBjB,KAAKiB,OAAU,GAEjE,OACIZ,EAAA,UACIuB,KAAK,UACLC,MAAOF,EACPG,KAAK,SACLC,QAAS/B,KAAKgC,YACdC,GAAG,iBACHC,SAAUlC,KAAKG,UAAYH,KAAKkC,UAClC,EAIFlC,KAAAgB,6BACJmB,IAEAnC,KAAKoC,eAAiBD,CAAO,EAGzBnC,KAAAgC,YAAeK,IACnBA,EAAMC,kBACNtC,KAAKW,OAAS,KAEdX,KAAKC,YAAcD,KAAKW,MAAM,EAG1BX,KAAAc,eAAkBuB,IACtBA,EAAMC,kBACNtC,KAAKW,OAAS,KAAK,EAGfX,KAAAsB,aAAgBe,IACpBA,EAAMC,kBACNtC,KAAKuC,OAAOC,KAAKH,EAAMI,OAAO,E,sIAzJhB,M,cAQA,M,aAOD,M,gGAgCA,K,CAEVC,qB,MACH,GAAI1C,KAAKC,aAAeD,KAAKW,OAAQ,CACjCX,KAAKC,YAAc,OACnB0C,EAAA3C,KAAKoC,kBAAc,MAAAO,SAAA,SAAAA,EAAEC,O,EAQtBC,SACH,OACIxC,EAACyC,EAAI,KACA9C,KAAKE,gBACLF,KAAKQ,sBACNH,EAAA,qBACIC,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBD,MAAOjB,KAAKiB,MACZI,SAAUrB,KAAKsB,aACfC,SAAUvB,KAAKuB,SACfpB,SAAUH,KAAKG,SACf+B,SAAUlC,KAAKkC,SACfd,QAASpB,KAAKoB,QACdD,YAAanB,KAAKmB,c"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
2
|
import { FormComponent } from '../form/form.types';
|
|
3
|
+
import type { CustomPalette } from './color-picker.types';
|
|
3
4
|
/**
|
|
4
5
|
* @private
|
|
5
6
|
*/
|
|
@@ -16,18 +17,41 @@ export declare class Palette implements FormComponent {
|
|
|
16
17
|
* Helper text of the input field
|
|
17
18
|
*/
|
|
18
19
|
helperText: string;
|
|
20
|
+
/**
|
|
21
|
+
* The placeholder text shown inside the input field,
|
|
22
|
+
* when the field is focused and empty.
|
|
23
|
+
*/
|
|
24
|
+
placeholder: string;
|
|
19
25
|
/**
|
|
20
26
|
* Set to `true` if a value is required
|
|
21
27
|
*/
|
|
22
28
|
required: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Set to `true` to indicate that the current value of the input field is
|
|
31
|
+
* invalid.
|
|
32
|
+
*/
|
|
33
|
+
invalid: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Defines the number of columns in the color swatch grid.
|
|
36
|
+
* If not provided, it will default to the number of colors in the palette.
|
|
37
|
+
*/
|
|
38
|
+
columnCount?: number;
|
|
39
|
+
/**
|
|
40
|
+
* Custom color palette to use instead of Lime palette. Internal prop passed from parent.
|
|
41
|
+
*/
|
|
42
|
+
palette?: CustomPalette;
|
|
23
43
|
/**
|
|
24
44
|
* Emits chosen value to the parent component
|
|
25
45
|
*/
|
|
26
46
|
change: EventEmitter<string>;
|
|
27
47
|
render(): any[];
|
|
28
48
|
private renderSwatches;
|
|
29
|
-
private
|
|
49
|
+
private getPalette;
|
|
50
|
+
private renderSwatchButton;
|
|
30
51
|
private handleChange;
|
|
31
|
-
private
|
|
52
|
+
private handleSwatchClick;
|
|
53
|
+
private normalizeEntry;
|
|
54
|
+
private usesCustomPalette;
|
|
55
|
+
private getColumnCount;
|
|
32
56
|
}
|
|
33
57
|
//# sourceMappingURL=color-picker-palette.d.ts.map
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
2
|
import { FormComponent } from '../form/form.types';
|
|
3
|
+
import type { CustomColorSwatch } from './color-picker.types';
|
|
3
4
|
/**
|
|
4
5
|
* This component enables you to select a swatch from out color palette, simply
|
|
5
6
|
* by clicking on it. You can then copy the css variable name of the chosen color
|
|
@@ -13,6 +14,7 @@ import { FormComponent } from '../form/form.types';
|
|
|
13
14
|
*
|
|
14
15
|
* @exampleComponent limel-example-color-picker
|
|
15
16
|
* @exampleComponent limel-example-color-picker-readonly
|
|
17
|
+
* @exampleComponent limel-example-color-picker-custom-palette
|
|
16
18
|
*/
|
|
17
19
|
export declare class ColorPicker implements FormComponent {
|
|
18
20
|
/**
|
|
@@ -36,9 +38,40 @@ export declare class ColorPicker implements FormComponent {
|
|
|
36
38
|
*/
|
|
37
39
|
required: boolean;
|
|
38
40
|
/**
|
|
39
|
-
* Set to `true`
|
|
41
|
+
* Set to `true` to disable the field.
|
|
42
|
+
* Use `disabled` to indicate that the field can normally be interacted
|
|
43
|
+
* with, but is currently disabled. This tells the user that if certain
|
|
44
|
+
* requirements are met, the field may become enabled again.
|
|
45
|
+
*/
|
|
46
|
+
disabled: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Set to `true` to make the field read-only.
|
|
49
|
+
* Use `readonly` when the field is only there to present the data it holds,
|
|
50
|
+
* and will not become possible for the current user to edit.
|
|
40
51
|
*/
|
|
41
52
|
readonly: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Set to `true` to indicate that the current value of the input field is
|
|
55
|
+
* invalid.
|
|
56
|
+
*/
|
|
57
|
+
invalid: boolean;
|
|
58
|
+
/**
|
|
59
|
+
* The placeholder text shown inside the input field,
|
|
60
|
+
* when the field is focused and empty.
|
|
61
|
+
*/
|
|
62
|
+
placeholder: string;
|
|
63
|
+
/**
|
|
64
|
+
* An array of either color value strings, or objects with a `name` and a `value`,
|
|
65
|
+
* which replaces the default palette. Any valid CSS color format is accepted as value
|
|
66
|
+
* (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).
|
|
67
|
+
*/
|
|
68
|
+
palette?: Array<string | CustomColorSwatch>;
|
|
69
|
+
/**
|
|
70
|
+
* Defines the number of columns in the color swatch grid.
|
|
71
|
+
* If not provided, it will default to the number of colors in the palette;
|
|
72
|
+
* but stops at a maximum of 25 columns.
|
|
73
|
+
*/
|
|
74
|
+
paletteColumnCount?: number;
|
|
42
75
|
/**
|
|
43
76
|
* Emits chosen value to the parent component
|
|
44
77
|
*/
|
|
@@ -47,7 +80,7 @@ export declare class ColorPicker implements FormComponent {
|
|
|
47
80
|
componentDidRender(): void;
|
|
48
81
|
private contentElement?;
|
|
49
82
|
private shouldFocus;
|
|
50
|
-
render(): any
|
|
83
|
+
render(): any;
|
|
51
84
|
private renderTooltip;
|
|
52
85
|
private renderPickerPalette;
|
|
53
86
|
private renderPickerTrigger;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Represents a single custom color swatch that can be supplied to the color picker.
|
|
3
|
+
* @public
|
|
4
|
+
*/
|
|
5
|
+
export interface CustomColorSwatch {
|
|
6
|
+
/**
|
|
7
|
+
* Human readable name used for tooltip / accessibility. If omitted, `value` is shown.
|
|
8
|
+
*/
|
|
9
|
+
name?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Any valid CSS color (hex, rgb[a], hsl[a], lab, lch, color-mix(), named, etc.).
|
|
12
|
+
*/
|
|
13
|
+
value: string;
|
|
14
|
+
/**
|
|
15
|
+
* Disables the swatch when true.
|
|
16
|
+
*/
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* A custom palette: each entry is either a color string or a structured swatch object.
|
|
21
|
+
* @public
|
|
22
|
+
*/
|
|
23
|
+
export type CustomPalette = Array<string | CustomColorSwatch>;
|
|
24
|
+
//# sourceMappingURL=color-picker.types.d.ts.map
|
|
@@ -1,13 +1,38 @@
|
|
|
1
1
|
export declare const colors: string[];
|
|
2
2
|
export declare const brightnesses: string[];
|
|
3
|
+
export interface Swatch {
|
|
4
|
+
name: string;
|
|
5
|
+
value: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
}
|
|
3
8
|
/**
|
|
9
|
+
* Returns the CSS variable name holding the RGB triplet for the color & brightness.
|
|
4
10
|
*
|
|
11
|
+
* @param color the base color identifier (e.g. "red", "blue")
|
|
12
|
+
* @param brightness the brightness variant (e.g. "light", "default")
|
|
13
|
+
* @returns CSS variable name in the form --color-{color}-{brightness}
|
|
14
|
+
*/
|
|
15
|
+
export declare function getColorName(color: string, brightness: string): string;
|
|
16
|
+
/**
|
|
17
|
+
* Swatch value: inline CSS color value in the required format: rgb(var(--color-*-*))
|
|
5
18
|
* @param color
|
|
6
19
|
* @param brightness
|
|
7
20
|
*/
|
|
8
|
-
export declare function
|
|
21
|
+
export declare function getSwatchValue(color: string, brightness: string): string;
|
|
9
22
|
/**
|
|
10
|
-
*
|
|
23
|
+
* Swatch name: human readable label like "red default"
|
|
24
|
+
* @param color
|
|
25
|
+
* @param brightness
|
|
26
|
+
*/
|
|
27
|
+
export declare function getSwatchName(color: string, brightness: string): string;
|
|
28
|
+
/**
|
|
29
|
+
* Convenience factory returning both name & value.
|
|
30
|
+
* @param color
|
|
31
|
+
* @param brightness
|
|
32
|
+
*/
|
|
33
|
+
export declare function createSwatch(color: string, brightness: string): Swatch;
|
|
34
|
+
/**
|
|
35
|
+
* Returns the CSS color value for the given color and brightness.
|
|
11
36
|
* @param color
|
|
12
37
|
* @param brightness
|
|
13
38
|
*/
|
|
@@ -23,6 +23,7 @@ import { MenuItem as MenuItem1 } from "./components";
|
|
|
23
23
|
import { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
|
|
24
24
|
import { ColorScheme, Language } from "./components/code-editor/code-editor.types";
|
|
25
25
|
import { Action } from "./components/collapsible-section/action";
|
|
26
|
+
import { CustomColorSwatch, CustomPalette } from "./components/color-picker/color-picker.types";
|
|
26
27
|
import { Config } from "./global/config";
|
|
27
28
|
import { ClosingActions, DialogHeading } from "./components/dialog/dialog.types";
|
|
28
29
|
import { DockItem } from "./components/dock/dock.types";
|
|
@@ -66,6 +67,7 @@ export { MenuItem as MenuItem1 } from "./components";
|
|
|
66
67
|
export { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
|
|
67
68
|
export { ColorScheme, Language } from "./components/code-editor/code-editor.types";
|
|
68
69
|
export { Action } from "./components/collapsible-section/action";
|
|
70
|
+
export { CustomColorSwatch, CustomPalette } from "./components/color-picker/color-picker.types";
|
|
69
71
|
export { Config } from "./global/config";
|
|
70
72
|
export { ClosingActions, DialogHeading } from "./components/dialog/dialog.types";
|
|
71
73
|
export { DockItem } from "./components/dock/dock.types";
|
|
@@ -947,18 +949,39 @@ export namespace Components {
|
|
|
947
949
|
* :::
|
|
948
950
|
* @exampleComponent limel-example-color-picker
|
|
949
951
|
* @exampleComponent limel-example-color-picker-readonly
|
|
952
|
+
* @exampleComponent limel-example-color-picker-custom-palette
|
|
950
953
|
*/
|
|
951
954
|
interface LimelColorPicker {
|
|
955
|
+
/**
|
|
956
|
+
* Set to `true` to disable the field. Use `disabled` to indicate that the field can normally be interacted with, but is currently disabled. This tells the user that if certain requirements are met, the field may become enabled again.
|
|
957
|
+
*/
|
|
958
|
+
"disabled": boolean;
|
|
952
959
|
/**
|
|
953
960
|
* Helper text of the input field
|
|
954
961
|
*/
|
|
955
962
|
"helperText": string;
|
|
963
|
+
/**
|
|
964
|
+
* Set to `true` to indicate that the current value of the input field is invalid.
|
|
965
|
+
*/
|
|
966
|
+
"invalid": boolean;
|
|
956
967
|
/**
|
|
957
968
|
* The label of the input field
|
|
958
969
|
*/
|
|
959
970
|
"label": string;
|
|
960
971
|
/**
|
|
961
|
-
*
|
|
972
|
+
* An array of either color value strings, or objects with a `name` and a `value`, which replaces the default palette. Any valid CSS color format is accepted as value (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).
|
|
973
|
+
*/
|
|
974
|
+
"palette"?: Array<string | CustomColorSwatch>;
|
|
975
|
+
/**
|
|
976
|
+
* Defines the number of columns in the color swatch grid. If not provided, it will default to the number of colors in the palette; but stops at a maximum of 25 columns.
|
|
977
|
+
*/
|
|
978
|
+
"paletteColumnCount"?: number;
|
|
979
|
+
/**
|
|
980
|
+
* The placeholder text shown inside the input field, when the field is focused and empty.
|
|
981
|
+
*/
|
|
982
|
+
"placeholder": string;
|
|
983
|
+
/**
|
|
984
|
+
* Set to `true` to make the field read-only. Use `readonly` when the field is only there to present the data it holds, and will not become possible for the current user to edit.
|
|
962
985
|
*/
|
|
963
986
|
"readonly": boolean;
|
|
964
987
|
/**
|
|
@@ -978,14 +1001,30 @@ export namespace Components {
|
|
|
978
1001
|
* @private
|
|
979
1002
|
*/
|
|
980
1003
|
interface LimelColorPickerPalette {
|
|
1004
|
+
/**
|
|
1005
|
+
* Defines the number of columns in the color swatch grid. If not provided, it will default to the number of colors in the palette.
|
|
1006
|
+
*/
|
|
1007
|
+
"columnCount"?: number;
|
|
981
1008
|
/**
|
|
982
1009
|
* Helper text of the input field
|
|
983
1010
|
*/
|
|
984
1011
|
"helperText": string;
|
|
1012
|
+
/**
|
|
1013
|
+
* Set to `true` to indicate that the current value of the input field is invalid.
|
|
1014
|
+
*/
|
|
1015
|
+
"invalid": boolean;
|
|
985
1016
|
/**
|
|
986
1017
|
* Label of the input field
|
|
987
1018
|
*/
|
|
988
1019
|
"label": string;
|
|
1020
|
+
/**
|
|
1021
|
+
* Custom color palette to use instead of Lime palette. Internal prop passed from parent.
|
|
1022
|
+
*/
|
|
1023
|
+
"palette"?: CustomPalette;
|
|
1024
|
+
/**
|
|
1025
|
+
* The placeholder text shown inside the input field, when the field is focused and empty.
|
|
1026
|
+
*/
|
|
1027
|
+
"placeholder": string;
|
|
989
1028
|
/**
|
|
990
1029
|
* Set to `true` if a value is required
|
|
991
1030
|
*/
|
|
@@ -3865,6 +3904,7 @@ declare global {
|
|
|
3865
3904
|
* :::
|
|
3866
3905
|
* @exampleComponent limel-example-color-picker
|
|
3867
3906
|
* @exampleComponent limel-example-color-picker-readonly
|
|
3907
|
+
* @exampleComponent limel-example-color-picker-custom-palette
|
|
3868
3908
|
*/
|
|
3869
3909
|
interface HTMLLimelColorPickerElement extends Components.LimelColorPicker, HTMLStencilElement {
|
|
3870
3910
|
}
|
|
@@ -5975,12 +6015,21 @@ declare namespace LocalJSX {
|
|
|
5975
6015
|
* :::
|
|
5976
6016
|
* @exampleComponent limel-example-color-picker
|
|
5977
6017
|
* @exampleComponent limel-example-color-picker-readonly
|
|
6018
|
+
* @exampleComponent limel-example-color-picker-custom-palette
|
|
5978
6019
|
*/
|
|
5979
6020
|
interface LimelColorPicker {
|
|
6021
|
+
/**
|
|
6022
|
+
* Set to `true` to disable the field. Use `disabled` to indicate that the field can normally be interacted with, but is currently disabled. This tells the user that if certain requirements are met, the field may become enabled again.
|
|
6023
|
+
*/
|
|
6024
|
+
"disabled"?: boolean;
|
|
5980
6025
|
/**
|
|
5981
6026
|
* Helper text of the input field
|
|
5982
6027
|
*/
|
|
5983
6028
|
"helperText"?: string;
|
|
6029
|
+
/**
|
|
6030
|
+
* Set to `true` to indicate that the current value of the input field is invalid.
|
|
6031
|
+
*/
|
|
6032
|
+
"invalid"?: boolean;
|
|
5984
6033
|
/**
|
|
5985
6034
|
* The label of the input field
|
|
5986
6035
|
*/
|
|
@@ -5990,7 +6039,19 @@ declare namespace LocalJSX {
|
|
|
5990
6039
|
*/
|
|
5991
6040
|
"onChange"?: (event: LimelColorPickerCustomEvent<string>) => void;
|
|
5992
6041
|
/**
|
|
5993
|
-
*
|
|
6042
|
+
* An array of either color value strings, or objects with a `name` and a `value`, which replaces the default palette. Any valid CSS color format is accepted as value (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).
|
|
6043
|
+
*/
|
|
6044
|
+
"palette"?: Array<string | CustomColorSwatch>;
|
|
6045
|
+
/**
|
|
6046
|
+
* Defines the number of columns in the color swatch grid. If not provided, it will default to the number of colors in the palette; but stops at a maximum of 25 columns.
|
|
6047
|
+
*/
|
|
6048
|
+
"paletteColumnCount"?: number;
|
|
6049
|
+
/**
|
|
6050
|
+
* The placeholder text shown inside the input field, when the field is focused and empty.
|
|
6051
|
+
*/
|
|
6052
|
+
"placeholder"?: string;
|
|
6053
|
+
/**
|
|
6054
|
+
* Set to `true` to make the field read-only. Use `readonly` when the field is only there to present the data it holds, and will not become possible for the current user to edit.
|
|
5994
6055
|
*/
|
|
5995
6056
|
"readonly"?: boolean;
|
|
5996
6057
|
/**
|
|
@@ -6010,10 +6071,18 @@ declare namespace LocalJSX {
|
|
|
6010
6071
|
* @private
|
|
6011
6072
|
*/
|
|
6012
6073
|
interface LimelColorPickerPalette {
|
|
6074
|
+
/**
|
|
6075
|
+
* Defines the number of columns in the color swatch grid. If not provided, it will default to the number of colors in the palette.
|
|
6076
|
+
*/
|
|
6077
|
+
"columnCount"?: number;
|
|
6013
6078
|
/**
|
|
6014
6079
|
* Helper text of the input field
|
|
6015
6080
|
*/
|
|
6016
6081
|
"helperText"?: string;
|
|
6082
|
+
/**
|
|
6083
|
+
* Set to `true` to indicate that the current value of the input field is invalid.
|
|
6084
|
+
*/
|
|
6085
|
+
"invalid"?: boolean;
|
|
6017
6086
|
/**
|
|
6018
6087
|
* Label of the input field
|
|
6019
6088
|
*/
|
|
@@ -6022,6 +6091,14 @@ declare namespace LocalJSX {
|
|
|
6022
6091
|
* Emits chosen value to the parent component
|
|
6023
6092
|
*/
|
|
6024
6093
|
"onChange"?: (event: LimelColorPickerPaletteCustomEvent<string>) => void;
|
|
6094
|
+
/**
|
|
6095
|
+
* Custom color palette to use instead of Lime palette. Internal prop passed from parent.
|
|
6096
|
+
*/
|
|
6097
|
+
"palette"?: CustomPalette;
|
|
6098
|
+
/**
|
|
6099
|
+
* The placeholder text shown inside the input field, when the field is focused and empty.
|
|
6100
|
+
*/
|
|
6101
|
+
"placeholder"?: string;
|
|
6025
6102
|
/**
|
|
6026
6103
|
* Set to `true` if a value is required
|
|
6027
6104
|
*/
|
|
@@ -8984,6 +9061,7 @@ declare module "@stencil/core" {
|
|
|
8984
9061
|
* :::
|
|
8985
9062
|
* @exampleComponent limel-example-color-picker
|
|
8986
9063
|
* @exampleComponent limel-example-color-picker-readonly
|
|
9064
|
+
* @exampleComponent limel-example-color-picker-custom-palette
|
|
8987
9065
|
*/
|
|
8988
9066
|
"limel-color-picker": LocalJSX.LimelColorPicker & JSXBase.HTMLAttributes<HTMLLimelColorPickerElement>;
|
|
8989
9067
|
/**
|