@limetech/lime-elements 37.64.2 → 37.64.3

package/dist/lime-elements/lime-elements.css

@@ -28,55 +28,48 @@
   );--mdc-theme-on-surface:var(
       --lime-on-surface-color,
       rgb(var(--contrast-1500))
-  )}:root{--lime-deep-red:rgb(var(--lime-brand-color-deep-red));--lime-red:rgb(var(--lime-brand-color-sellable-orange));--lime-orange:rgb(var(--lime-brand-color-orange));--lime-yellow:rgb(var(--lime-brand-color-yellow));--lime-green:rgb(var(--lime-brand-color-lime-green));--lime-turquoise:rgb(var(--lime-brand-color-flexible-turquoise));--lime-blue:rgb(var(--lime-brand-color-simple-blue));--lime-dark-blue:rgb(var(--lime-brand-color-dark-blue));--lime-magenta:rgb(var(--lime-brand-color-loving-magenta));--lime-light-grey:rgb(var(--lime-brand-color-light-grey));--lime-dark-grey:rgb(var(--lime-brand-color-grey));--color-percent--0:rgb(var(--color-gray-default));--color-percent--0to10:rgb(var(--color-red-dark));--color-percent--10to20:rgb(var(--color-red-default));--color-percent--20to30:rgb(var(--color-coral-default));--color-percent--30to40:rgb(var(--color-orange-default));--color-percent--40to50:rgb(var(--color-amber-default));--color-percent--50to60:rgb(var(--color-yellow-default));--color-percent--60to70:rgb(var(--color-grass-default));--color-percent--70to80:rgb(var(--color-lime-default));--color-percent--80to90:rgb(var(--color-teal-default));--color-percent--90to100:rgb(var(--color-teal-dark))}:root{--shadow-focused-state:0 0 0 0.125rem var(--mdc-theme-primary);--shadow-error-state:0 0 0 0.125rem rgb(var(--color-red-default));--button-shadow-normal:0 0.09375rem 0.225rem 0 rgba(var(--color-black), 0.232),
-      0 0.01875rem 0.05625rem 0
-          rgba(var(--color-black), 0.208);--button-shadow-hovered:0 0.125rem 0.375rem
-          rgba(var(--color-black), 0.15),
-      0 0.375rem 0.625rem
-          rgba(var(--color-black), 0.05);--button-shadow-pressed:0 0.0625rem 0.1875rem 0
-          rgba(var(--color-black), 0.132),
-      0 0.01875rem 0.05625rem 0
-          rgba(var(--color-black), 0.108);--button-shadow-inset:0 0.03125rem 0.21875rem
-          0 rgba(var(--color-black), 0.132) inset,
-      0 0.01875rem 0.05625rem 0
-          rgba(var(--color-black), 0.108) inset,
-      0 0 0.25rem rgba(var(--color-white), 0.9);--button-shadow-inset-pressed:0 0.03125rem 0.34375rem 0 rgba(var(--color-black), 0.132) inset,
-      0 0.01875rem 0.11875rem 0
-          rgba(var(--color-black), 0.12) inset,
-      0 0 0.1875rem rgba(var(--color-white), 0.9);--shadow-depth-8:0 0.2rem 0.45rem 0
-          rgba(var(--color-black), 0.132),
-      0 0.0375rem 0.1125rem 0
-          rgba(var(--color-black), 0.108);--shadow-depth-8-focused:var(--shadow-depth-8), var(--shadow-focused-state);--shadow-depth-8-error:var(--shadow-depth-8), var(--shadow-error-state);--shadow-depth-8-reversed:0 -0.2rem 0.45rem 0 rgba(var(--color-black), 0.132),
-      0 -0.0375rem 0.1125rem 0
-          rgba(var(--color-black), 0.108);--shadow-depth-16:0 0.4rem 0.9rem 0
-          rgba(var(--color-black), 0.132),
-      0 0.075rem 0.225rem 0
-          rgba(var(--color-black), 0.108);--shadow-depth-16-focused:var(--shadow-depth-16),
-      var(--shadow-focused-state);--shadow-depth-64:0 1.6rem 3.6rem 0
-          rgba(var(--color-black), 0.22),
-      0 0.3rem 0.9rem 0
-          rgba(var(--color-black), 0.18);--shadow-depth-64-focused:var(--shadow-depth-64),
-      var(--shadow-focused-state);--shadow-inflated-8:-0.125rem -0.125rem 0.375rem rgba(var(--color-black), 0.01),
-      -0.25rem -0.25rem 0.625rem rgba(var(--color-white), 0.6),
-      0.25rem 0.25rem 0.625rem
-          rgba(var(--color-black), 0.05),
-      0.0625rem 0.0625rem 0.625rem
-          rgba(var(--color-white), 0.7),
-      -1px -1px 0 1px rgba(var(--color-black), 0.07) inset,
-      0 0 1px 1px rgba(var(--color-white), 0.98) inset;--shadow-inflated-16:-0.1875rem -0.1875rem 0.375rem rgba(var(--color-black), 0.01),
-      -0.375rem -0.375rem 1rem rgba(var(--color-white), 0.8),
-      0.375rem 0.375rem 1rem
-          rgba(var(--color-black), 0.05),
-      0.125rem 0.125rem 0.625rem
-          rgba(var(--color-white), 0.7),
-      -1px -1px 0 1px rgba(var(--color-black), 0.07) inset,
-      0 0 1px 1px rgba(var(--color-white), 0.98) inset;--shadow-inflated-64:-0.1875rem -0.1875rem 0.375rem rgba(var(--color-black), 0.01),
-      -0.625rem -0.625rem 1.875rem rgba(var(--color-white), 1),
-      0.625rem 0.625rem 2.25rem rgba(var(--color-black), 0.06),
-      0.125rem 0.125rem 0.625rem
-          rgba(var(--color-white), 0.7),
-      -1px -1px 0 1px rgba(var(--color-black), 0.07) inset,
-      0 0 1px 1px rgba(var(--color-white), 0.98) inset}.CodeMirror-lint-tooltip.cm-s-lime{position:fixed;z-index:var(--tooltip-z-index, var(--dropdown-z-index, 130));transition:opacity 0.4s ease 0s;opacity:0;color:var(--mdc-theme-text-primary-on-background);background-color:var(--mdc-theme-on-primary);font-family:monospace;font-size:0.875rem;white-space:pre-wrap;padding:0.25rem 0.5rem;border-radius:0.5rem;max-width:40rem;box-shadow:var(--shadow-depth-64)}:root{--mdc-theme-primary:var(
+  )}:root{--lime-deep-red:rgb(var(--lime-brand-color-deep-red));--lime-red:rgb(var(--lime-brand-color-sellable-orange));--lime-orange:rgb(var(--lime-brand-color-orange));--lime-yellow:rgb(var(--lime-brand-color-yellow));--lime-green:rgb(var(--lime-brand-color-lime-green));--lime-turquoise:rgb(var(--lime-brand-color-flexible-turquoise));--lime-blue:rgb(var(--lime-brand-color-simple-blue));--lime-dark-blue:rgb(var(--lime-brand-color-dark-blue));--lime-magenta:rgb(var(--lime-brand-color-loving-magenta));--lime-light-grey:rgb(var(--lime-brand-color-light-grey));--lime-dark-grey:rgb(var(--lime-brand-color-grey));--color-percent--0:rgb(var(--color-gray-default));--color-percent--0to10:rgb(var(--color-red-dark));--color-percent--10to20:rgb(var(--color-red-default));--color-percent--20to30:rgb(var(--color-coral-default));--color-percent--30to40:rgb(var(--color-orange-default));--color-percent--40to50:rgb(var(--color-amber-default));--color-percent--50to60:rgb(var(--color-yellow-default));--color-percent--60to70:rgb(var(--color-grass-default));--color-percent--70to80:rgb(var(--color-lime-default));--color-percent--80to90:rgb(var(--color-teal-default));--color-percent--90to100:rgb(var(--color-teal-dark))}:root{--shadow-brighten-edges-inside:0 -1px 0.26rem rgb(var(--color-white), 0.06)
+          inset,
+      0 0 0 1px rgb(var(--color-white), 0.06) inset;--shadow-brighten-edges-outside:0 0.125rem 0.26rem
+          rgb(var(--color-white), 0.06),
+      0 0 0 1px rgb(var(--color-white), 0.06);--shadow-focused-state:0 0 0 0.125rem var(--mdc-theme-primary);--shadow-error-state:0 0 0 0.125rem rgb(var(--color-red-default));--button-shadow-normal:0 0.09375rem 0.225rem 0
+          rgb(var(--color-black), 0.232),
+      0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.208),
+      var(--shadow-brighten-edges-inside);--button-shadow-hovered:0 0.125rem 0.375rem rgb(var(--color-black), 0.25),
+      0 0.4rem 0.475rem -0.3rem rgb(var(--color-black), 0.1),
+      var(--shadow-brighten-edges-inside);--button-shadow-pressed:0 0.0625rem 0.1875rem 0
+          rgb(var(--color-black), 0.132),
+      0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.108),
+      var(--shadow-brighten-edges-inside);--button-shadow-inset:0 0.03125rem 0.21875rem 0
+          rgb(var(--color-black), 0.132) inset,
+      0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.108) inset,
+      var(--shadow-brighten-edges-outside),
+      0 0 0.25rem rgb(var(--color-white), 0.9);--button-shadow-inset-pressed:0 0.03125rem 0.34375rem 0
+          rgb(var(--color-black), 0.132) inset,
+      0 0.01875rem 0.11875rem 0 rgb(var(--color-black), 0.12) inset,
+      0 -1px 0.3rem rgb(var(--color-white), 0.9),
+      var(--shadow-brighten-edges-outside);--shadow-depth-8:0 0.2rem 0.45rem 0 rgb(var(--color-black), 0.132),
+      0 0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.108);--shadow-depth-8-focused:var(--shadow-depth-8), var(--shadow-focused-state);--shadow-depth-8-error:var(--shadow-depth-8), var(--shadow-error-state);--shadow-depth-8-reversed:0 -0.2rem 0.45rem 0 rgb(var(--color-black), 0.132),
+      0 -0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.108);--shadow-depth-16:0 0.4rem 0.9rem 0 rgb(var(--color-black), 0.132),
+      0 0.075rem 0.225rem 0 rgb(var(--color-black), 0.108);--shadow-depth-16-focused:var(--shadow-depth-16),
+      var(--shadow-focused-state);--shadow-depth-64:0 1.6rem 3.6rem 0 rgb(var(--color-black), 0.22),
+      0 0.3rem 0.9rem 0 rgb(var(--color-black), 0.18);--shadow-depth-64-focused:var(--shadow-depth-64),
+      var(--shadow-focused-state);--shadow-inflated-8:-0.125rem -0.125rem 0.375rem rgb(var(--color-black), 0.01),
+      -0.25rem -0.25rem 0.625rem rgb(var(--color-white), 0.6),
+      0.25rem 0.25rem 0.625rem rgb(var(--color-black), 0.05),
+      0.0625rem 0.0625rem 0.625rem rgb(var(--color-white), 0.7),
+      -1px -1px 0 1px rgb(var(--color-black), 0.07) inset,
+      0 0 1px 1px rgb(var(--color-white), 0.98) inset;--shadow-inflated-16:-0.1875rem -0.1875rem 0.375rem rgb(var(--color-black), 0.01),
+      -0.375rem -0.375rem 1rem rgb(var(--color-white), 0.8),
+      0.375rem 0.375rem 1rem rgb(var(--color-black), 0.05),
+      0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.7),
+      -1px -1px 0 1px rgb(var(--color-black), 0.07) inset,
+      0 0 1px 1px rgb(var(--color-white), 0.98) inset;--shadow-inflated-64:-0.1875rem -0.1875rem 0.375rem rgb(var(--color-black), 0.01),
+      -0.625rem -0.625rem 1.875rem rgb(var(--color-white), 1),
+      0.625rem 0.625rem 2.25rem rgb(var(--color-black), 0.06),
+      0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.7),
+      -1px -1px 0 1px rgb(var(--color-black), 0.07) inset,
+      0 0 1px 1px rgb(var(--color-white), 0.98) inset}.CodeMirror-lint-tooltip.cm-s-lime{position:fixed;z-index:var(--tooltip-z-index, var(--dropdown-z-index, 130));transition:opacity 0.4s ease 0s;opacity:0;color:var(--mdc-theme-text-primary-on-background);background-color:var(--mdc-theme-on-primary);font-family:monospace;font-size:0.875rem;white-space:pre-wrap;padding:0.25rem 0.5rem;border-radius:0.5rem;max-width:40rem;box-shadow:var(--shadow-depth-64)}:root{--mdc-theme-primary:var(
       --lime-primary-color,
       rgb(var(--color-teal-default))
   );--mdc-theme-secondary:var(

package/dist/lime-elements/lime-elements.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as l}from"./p-443111b3.js";export{s as setNonce}from"./p-443111b3.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-6c1c51bd",[[1,"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],"plugins":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-03eea223",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-dd5affea",[[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],"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-f60702fd",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-31a0bdac",[[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-48652dbe",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-c85589d6",[[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-eb5ff7ca",[[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-40e0c71f",[[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-3d6dc7de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-e973fd15",[[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-3cd95c9f",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-00e3e9be",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["p-5d01dc2a",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-126ed7d5",[[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-56f23a19",[[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-dab818a1",[[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]}]]],["p-7d215789",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["p-20440a35",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-4b7ea1b9",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-eb58b4b7",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-6b2bc81b",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-1bcdc70b",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-195df464",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-6b0ef5ee",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-11d775ca",[[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-16e4ca3e",[[1,"limel-config",{"config":[16]}]]],["p-ea98795d",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-c864b34b",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-b5f723e2",[[1,"limel-grid"]]],["p-d9b7a208",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}],[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"],"invalidLink":[32]}],[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-2ab02bd9",[[1,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"plugins":[16],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-7a202104",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-c9598cfe",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["p-1367c295",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-30ca30ec",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-0fef416f",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-d6660d2a",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-97571329",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-f340d860",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-497b65ba",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-347c1107",[[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-da20ff72",[[1,"limel-markdown",{"value":[1],"whitelist":[16]}]]],["p-f6929c67",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}],[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-968c49d9",[[17,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-5d12d8d2",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-0b3a043a",[[1,"limel-badge",{"label":[520]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["p-d86f8aea",[[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"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["p-484ecb49",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"menuItems":[16]}]]],["p-c1cbba2c",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]]]'),e)));
+import{p as e,b as l}from"./p-443111b3.js";export{s as setNonce}from"./p-443111b3.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-6c1c51bd",[[1,"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],"plugins":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-03eea223",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-dd5affea",[[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],"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-211456f2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-1a0aaf41",[[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-8f1b76df",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-c85589d6",[[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-6500050d",[[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-40e0c71f",[[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-3d6dc7de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-782aa617",[[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-84e87a39",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-00e3e9be",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["p-fda881a3",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-b5dba995",[[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-56f23a19",[[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-259c1bef",[[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]}]]],["p-32844d2b",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["p-20440a35",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-4b7ea1b9",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-eb58b4b7",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-f3a613a3",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-1bcdc70b",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-195df464",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-6b0ef5ee",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-28c76ae8",[[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-16e4ca3e",[[1,"limel-config",{"config":[16]}]]],["p-ea98795d",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-c864b34b",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-b5f723e2",[[1,"limel-grid"]]],["p-0af1417f",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}],[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"],"invalidLink":[32]}],[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-2ab02bd9",[[1,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"plugins":[16],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-9c5f2c45",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-c9598cfe",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["p-09434f79",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-30ca30ec",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-0fef416f",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-d6660d2a",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-97571329",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-f340d860",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-9c92c1db",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-347c1107",[[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-da20ff72",[[1,"limel-markdown",{"value":[1],"whitelist":[16]}]]],["p-f6929c67",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}],[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-609b34fd",[[17,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-5d12d8d2",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-0b3a043a",[[1,"limel-badge",{"label":[520]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["p-9d5436bb",[[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"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["p-dbac0053",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"menuItems":[16]}]]],["p-493e2b10",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]]]'),e)));
 //# sourceMappingURL=lime-elements.esm.js.map

package/dist/lime-elements/p-09434f79.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as o}from"./p-443111b3.js";import{c as i}from"./p-3ccdc4a3.js";const r='@charset "UTF-8";.button{all:unset;isolation:isolate;position:relative;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-dock-item-text-color);background-color:var(--dock-background-color);box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--dock-item-height);border-radius:0.375rem;font-size:0.875rem;padding:0 0.5rem;min-width:var(--dock-item-height)}.button:hover,.button:focus,.button:focus-visible{will-change:color, background-color, box-shadow, transform}.button:hover{transform:translate3d(0, -0.04rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.button: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);background-color:var(--mdc-theme-surface);box-shadow:var(--button-shadow-inset-pressed)}.button:hover,.button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.button:focus{outline:none}.button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.button:hover{z-index:1}.button.selected{color:var(--limel-dock-item-text-color--selected);background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)));box-shadow:var(--button-shadow-inset)}.button.selected:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}.button.selected .icon{color:var(--limel-dock-item-text--selected)}limel-popover{display:grid;grid-template-columns:100%}limel-popover button[slot=trigger][aria-expanded=true]{box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:0.5rem;padding-right:0.75rem}.icon{flex-shrink:0;width:calc(var(--dock-item-height) - 1rem);height:calc(var(--dock-item-height) - 1rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}limel-badge{position:absolute;top:-0.125rem;right:-0.125rem}.icon{position:relative}.icon:before{text-align:center;pointer-events:none;position:absolute;inset:0;background-color:var(--dock-background-color, rgb(var(--contrast-100)));background-position:center;background-repeat:no-repeat;background-size:contain;background-image:var(--limel-custom-home-icon);content:var(--limel-custom-home-icon-enabler)}.button.selected .icon:before{background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)))}';const s=class{constructor(r){t(this,r);this.itemSelected=e(this,"itemSelected",7);this.menuOpen=e(this,"menuOpen",7);this.close=e(this,"close",7);this.renderNotification=()=>{if(this.item.badge!==undefined){return o("limel-badge",{label:this.item.badge})}};this.openPopover=t=>{t.stopPropagation();this.isOpen=true;this.menuOpen.emit(this.item)};this.setCustomComponentElement=t=>{this.customComponentElement=t};this.onPopoverClose=()=>{this.isOpen=false;this.close.emit()};this.handleClick=t=>{t.stopPropagation();this.itemSelected.emit(this.item)};this.focusCustomComponentElement=t=>{var e,o,i;const r=t.find((t=>t.target===this.customComponentElement));if(!r){return}if(!r.isIntersecting){return}if((o=(e=this.customComponentElement)===null||e===void 0?void 0:e.shadowRoot)===null||o===void 0?void 0:o.delegatesFocus){(i=this.customComponentElement)===null||i===void 0?void 0:i.focus()}};this.getOpenDirection=()=>{if(this.useMobileLayout){return"top"}return"right"};this.item=undefined;this.expanded=false;this.useMobileLayout=false;this.isOpen=false;this.tooltipId=i()}render(){var t,e;if((e=(t=this.item)===null||t===void 0?void 0:t.dockMenu)===null||e===void 0?void 0:e.componentName){return this.renderPopover()}return this.renderButton(this.handleClick)}openWatcher(){if(!this.isOpen){return}if(!this.intersectionObserver){this.intersectionObserver=new IntersectionObserver(this.focusCustomComponentElement);this.intersectionObserver.observe(this.customComponentElement)}}disconnectedCallback(){var t;(t=this.intersectionObserver)===null||t===void 0?void 0:t.disconnect();this.intersectionObserver=undefined}renderPopover(){var t;const e=(t=this.item)===null||t===void 0?void 0:t.dockMenu.componentName;return o("limel-popover",{openDirection:this.useMobileLayout?"top":"right-start",open:this.isOpen||this.item.dockMenu.menuOpen,onClose:this.onPopoverClose},this.renderButton(this.openPopover,"trigger"),o(e,Object.assign({ref:this.setCustomComponentElement},this.item.dockMenu.props||{},{onClose:this.onPopoverClose})))}renderButton(t,e){var i;return o("button",{slot:e,tabindex:"0",id:this.tooltipId,type:"button",class:{button:true,selected:(i=this.item)===null||i===void 0?void 0:i.selected},onClick:t,"aria-live":"polite"},this.renderIcon(),this.renderLabel(),this.renderTooltip(),this.renderNotification())}renderIcon(){if(!this.item.icon){return}return o("limel-icon",{name:this.item.icon,class:"icon"})}renderLabel(){if(this.expanded){return o("span",{class:"text"},this.item.label)}}renderTooltip(){if(!this.expanded&&this.item.label){return o("limel-tooltip",{elementId:this.tooltipId,label:this.item.label,helperLabel:this.item.helperLabel,openDirection:this.getOpenDirection()})}if(this.expanded&&this.item.helperLabel){return o("limel-tooltip",{elementId:this.tooltipId,label:this.item.helperLabel,openDirection:this.getOpenDirection()})}}static get watchers(){return{isOpen:["openWatcher"]}}};s.style=r;export{s as limel_dock_button};
+//# sourceMappingURL=p-09434f79.entry.js.map

package/dist/lime-elements/{p-1367c295.entry.js.map → p-09434f79.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["dockButtonCss","DockButton","constructor","hostRef","this","renderNotification","item","badge","undefined","h","label","openPopover","event","stopPropagation","isOpen","menuOpen","emit","setCustomComponentElement","element","customComponentElement","onPopoverClose","close","handleClick","itemSelected","focusCustomComponentElement","entries","entry","find","e","target","isIntersecting","_b","_a","shadowRoot","delegatesFocus","_c","focus","getOpenDirection","useMobileLayout","tooltipId","createRandomString","render","dockMenu","componentName","renderPopover","renderButton","openWatcher","intersectionObserver","IntersectionObserver","observe","disconnectedCallback","disconnect","CustomComponent","openDirection","open","onClose","Object","assign","ref","props","slot","tabindex","id","type","class","button","selected","onClick","renderIcon","renderLabel","renderTooltip","icon","name","expanded","elementId","helperLabel"],"sources":["./src/components/dock/dock-button/dock-button.scss?tag=limel-dock-button","./src/components/dock/dock-button/dock-button.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n.button {\n    all: unset;\n    isolation: isolate;\n    position: relative;\n\n    @include mixins.is-flat-inset-clickable(\n        $color: var(--limel-dock-item-text-color),\n        $background-color: var(--dock-background-color)\n    );\n    @include mixins.visualize-keyboard-focus;\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    height: var(--dock-item-height);\n\n    border-radius: functions.pxToRem(6);\n    font-size: functions.pxToRem(14);\n    padding: 0 0.5rem;\n    min-width: var(--dock-item-height);\n\n    &:hover {\n        z-index: 1;\n    }\n\n    &.selected {\n        color: var(--limel-dock-item-text-color--selected);\n        background-color: var(\n            --dock-item-background-color--selected,\n            rgb(var(--contrast-200))\n        );\n\n        box-shadow: var(--button-shadow-inset);\n\n        &:focus-visible {\n            box-shadow: var(--button-shadow-inset),\n                var(--shadow-depth-8-focused);\n        }\n\n        .icon {\n            color: var(--limel-dock-item-text--selected);\n        }\n    }\n}\n\nlimel-popover {\n    // makes buttons that are wrapped in a popover become fullwidth\n    display: grid;\n    grid-template-columns: 100%;\n\n    button[slot='trigger'][aria-expanded='true'] {\n        box-shadow: var(--button-shadow-inset);\n    }\n}\n\n.text {\n    @include mixins.truncate-text();\n    padding-left: 0.5rem;\n    padding-right: 0.75rem;\n}\n\n.icon {\n    flex-shrink: 0;\n    width: calc(var(--dock-item-height) - 1rem);\n    height: calc(var(--dock-item-height) - 1rem);\n    color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));\n}\n\nlimel-badge {\n    position: absolute;\n    top: -0.125rem;\n    right: -0.125rem;\n}\n\n// 👇 Below is a hidden and private hack\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\n.icon {\n    position: relative;\n\n    &:before {\n        text-align: center;\n        pointer-events: none;\n        position: absolute;\n        inset: 0;\n        background: {\n            color: var(--dock-background-color, rgb(var(--contrast-100)));\n            position: center;\n            repeat: no-repeat;\n            size: contain;\n            image: var(--limel-custom-home-icon);\n        }\n        // Since `content` defaults to `undefined`\n        // no pseudo element will be rendered, unless\n        // the consumer defines something.\n        content: var(--limel-custom-home-icon-enabler);\n\n        .button.selected & {\n            background-color: var(\n                --dock-item-background-color--selected,\n                rgb(var(--contrast-200))\n            );\n        }\n    }\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-dock-button',\n    shadow: false,\n    styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n    /**\n     * Item that is placed in the dock.\n     */\n    @Prop()\n    public item!: DockItem;\n\n    /**\n     * When the dock is expanded or collapsed, dock items\n     * show labels and tooltips as suitable for the layout.\n     */\n    @Prop({ reflect: true })\n    public expanded? = false;\n\n    /**\n     * When dock is using mobile layout, dock items\n     * show labels and tooltips as suitable for the layout.\n     */\n    @Prop({ reflect: true })\n    public useMobileLayout? = false;\n\n    /**\n     * Fired when a dock item has been selected from the dock.\n     */\n    @Event()\n    public itemSelected: EventEmitter<DockItem>;\n\n    /**\n     * Fired when a dock menu is opened.\n     */\n    @Event()\n    public menuOpen: EventEmitter<DockItem>;\n\n    /**\n     * Indicated whether the popover that renders a component is open.\n     */\n    @State()\n    private isOpen = false;\n\n    /**\n     * Fired when the popover is closed.\n     */\n    @Event()\n    public close: EventEmitter<void>;\n\n    private tooltipId: string;\n    private customComponentElement: HTMLElement;\n    private intersectionObserver?: IntersectionObserver;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public render() {\n        if (this.item?.dockMenu?.componentName) {\n            return this.renderPopover();\n        }\n\n        return this.renderButton(this.handleClick);\n    }\n\n    @Watch('isOpen')\n    protected openWatcher() {\n        if (!this.isOpen) {\n            return;\n        }\n\n        if (!this.intersectionObserver) {\n            this.intersectionObserver = new IntersectionObserver(\n                this.focusCustomComponentElement,\n            );\n            this.intersectionObserver.observe(this.customComponentElement);\n        }\n    }\n\n    public disconnectedCallback() {\n        this.intersectionObserver?.disconnect();\n        this.intersectionObserver = undefined;\n    }\n\n    private renderPopover() {\n        const CustomComponent = this.item?.dockMenu.componentName;\n\n        return (\n            <limel-popover\n                openDirection={this.useMobileLayout ? 'top' : 'right-start'}\n                open={this.isOpen || this.item.dockMenu.menuOpen}\n                onClose={this.onPopoverClose}\n            >\n                {this.renderButton(this.openPopover, 'trigger')}\n                <CustomComponent\n                    ref={this.setCustomComponentElement}\n                    {...(this.item.dockMenu.props || {})}\n                    onClose={this.onPopoverClose}\n                />\n            </limel-popover>\n        );\n    }\n\n    private renderButton(\n        handleClick: (event: MouseEvent) => void,\n        slot?: string,\n    ) {\n        return (\n            <button\n                slot={slot}\n                tabindex=\"0\"\n                id={this.tooltipId}\n                type=\"button\"\n                class={{\n                    button: true,\n                    selected: this.item?.selected,\n                }}\n                onClick={handleClick}\n                aria-live=\"polite\"\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n                {this.renderNotification()}\n            </button>\n        );\n    }\n\n    private renderNotification = () => {\n        if (this.item.badge !== undefined) {\n            return <limel-badge label={this.item.badge} />;\n        }\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n        this.menuOpen.emit(this.item);\n    };\n\n    private setCustomComponentElement = (element: HTMLElement) => {\n        this.customComponentElement = element;\n    };\n\n    private onPopoverClose = () => {\n        this.isOpen = false;\n        this.close.emit();\n    };\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.itemSelected.emit(this.item);\n    };\n\n    private renderIcon() {\n        if (!this.item.icon) {\n            return;\n        }\n\n        return <limel-icon name={this.item.icon} class=\"icon\" />;\n    }\n\n    private renderLabel() {\n        if (this.expanded) {\n            return <span class=\"text\">{this.item.label}</span>;\n        }\n    }\n\n    private renderTooltip() {\n        if (!this.expanded && this.item.label) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.label}\n                    helperLabel={this.item.helperLabel}\n                    openDirection={this.getOpenDirection()}\n                />\n            );\n        }\n\n        if (this.expanded && this.item.helperLabel) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.helperLabel}\n                    openDirection={this.getOpenDirection()}\n                />\n            );\n        }\n    }\n\n    private focusCustomComponentElement = (\n        entries: IntersectionObserverEntry[],\n    ) => {\n        const entry = entries.find(\n            (e) => e.target === this.customComponentElement,\n        );\n        if (!entry) {\n            return;\n        }\n\n        if (!entry.isIntersecting) {\n            return;\n        }\n\n        if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n            this.customComponentElement?.focus();\n        }\n    };\n\n    private getOpenDirection = () => {\n        if (this.useMobileLayout) {\n            return 'top';\n        }\n\n        return 'right';\n    };\n}\n"],"mappings":"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"}
+{"version":3,"names":["dockButtonCss","DockButton","constructor","hostRef","this","renderNotification","item","badge","undefined","h","label","openPopover","event","stopPropagation","isOpen","menuOpen","emit","setCustomComponentElement","element","customComponentElement","onPopoverClose","close","handleClick","itemSelected","focusCustomComponentElement","entries","entry","find","e","target","isIntersecting","_b","_a","shadowRoot","delegatesFocus","_c","focus","getOpenDirection","useMobileLayout","tooltipId","createRandomString","render","dockMenu","componentName","renderPopover","renderButton","openWatcher","intersectionObserver","IntersectionObserver","observe","disconnectedCallback","disconnect","CustomComponent","openDirection","open","onClose","Object","assign","ref","props","slot","tabindex","id","type","class","button","selected","onClick","renderIcon","renderLabel","renderTooltip","icon","name","expanded","elementId","helperLabel"],"sources":["./src/components/dock/dock-button/dock-button.scss?tag=limel-dock-button","./src/components/dock/dock-button/dock-button.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n.button {\n    all: unset;\n    isolation: isolate;\n    position: relative;\n\n    @include mixins.is-flat-inset-clickable(\n        $color: var(--limel-dock-item-text-color),\n        $background-color: var(--dock-background-color)\n    );\n    @include mixins.visualize-keyboard-focus;\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n\n    width: 100%;\n    height: var(--dock-item-height);\n\n    border-radius: functions.pxToRem(6);\n    font-size: functions.pxToRem(14);\n    padding: 0 0.5rem;\n    min-width: var(--dock-item-height);\n\n    &:hover {\n        z-index: 1;\n    }\n\n    &.selected {\n        color: var(--limel-dock-item-text-color--selected);\n        background-color: var(\n            --dock-item-background-color--selected,\n            rgb(var(--contrast-200))\n        );\n\n        box-shadow: var(--button-shadow-inset);\n\n        &:focus-visible {\n            box-shadow: var(--button-shadow-inset),\n                var(--shadow-depth-8-focused);\n        }\n\n        .icon {\n            color: var(--limel-dock-item-text--selected);\n        }\n    }\n}\n\nlimel-popover {\n    // makes buttons that are wrapped in a popover become fullwidth\n    display: grid;\n    grid-template-columns: 100%;\n\n    button[slot='trigger'][aria-expanded='true'] {\n        box-shadow: var(--button-shadow-inset);\n    }\n}\n\n.text {\n    @include mixins.truncate-text();\n    padding-left: 0.5rem;\n    padding-right: 0.75rem;\n}\n\n.icon {\n    flex-shrink: 0;\n    width: calc(var(--dock-item-height) - 1rem);\n    height: calc(var(--dock-item-height) - 1rem);\n    color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));\n}\n\nlimel-badge {\n    position: absolute;\n    top: -0.125rem;\n    right: -0.125rem;\n}\n\n// 👇 Below is a hidden and private hack\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\n.icon {\n    position: relative;\n\n    &:before {\n        text-align: center;\n        pointer-events: none;\n        position: absolute;\n        inset: 0;\n        background: {\n            color: var(--dock-background-color, rgb(var(--contrast-100)));\n            position: center;\n            repeat: no-repeat;\n            size: contain;\n            image: var(--limel-custom-home-icon);\n        }\n        // Since `content` defaults to `undefined`\n        // no pseudo element will be rendered, unless\n        // the consumer defines something.\n        content: var(--limel-custom-home-icon-enabler);\n\n        .button.selected & {\n            background-color: var(\n                --dock-item-background-color--selected,\n                rgb(var(--contrast-200))\n            );\n        }\n    }\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-dock-button',\n    shadow: false,\n    styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n    /**\n     * Item that is placed in the dock.\n     */\n    @Prop()\n    public item!: DockItem;\n\n    /**\n     * When the dock is expanded or collapsed, dock items\n     * show labels and tooltips as suitable for the layout.\n     */\n    @Prop({ reflect: true })\n    public expanded? = false;\n\n    /**\n     * When dock is using mobile layout, dock items\n     * show labels and tooltips as suitable for the layout.\n     */\n    @Prop({ reflect: true })\n    public useMobileLayout? = false;\n\n    /**\n     * Fired when a dock item has been selected from the dock.\n     */\n    @Event()\n    public itemSelected: EventEmitter<DockItem>;\n\n    /**\n     * Fired when a dock menu is opened.\n     */\n    @Event()\n    public menuOpen: EventEmitter<DockItem>;\n\n    /**\n     * Indicated whether the popover that renders a component is open.\n     */\n    @State()\n    private isOpen = false;\n\n    /**\n     * Fired when the popover is closed.\n     */\n    @Event()\n    public close: EventEmitter<void>;\n\n    private tooltipId: string;\n    private customComponentElement: HTMLElement;\n    private intersectionObserver?: IntersectionObserver;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public render() {\n        if (this.item?.dockMenu?.componentName) {\n            return this.renderPopover();\n        }\n\n        return this.renderButton(this.handleClick);\n    }\n\n    @Watch('isOpen')\n    protected openWatcher() {\n        if (!this.isOpen) {\n            return;\n        }\n\n        if (!this.intersectionObserver) {\n            this.intersectionObserver = new IntersectionObserver(\n                this.focusCustomComponentElement,\n            );\n            this.intersectionObserver.observe(this.customComponentElement);\n        }\n    }\n\n    public disconnectedCallback() {\n        this.intersectionObserver?.disconnect();\n        this.intersectionObserver = undefined;\n    }\n\n    private renderPopover() {\n        const CustomComponent = this.item?.dockMenu.componentName;\n\n        return (\n            <limel-popover\n                openDirection={this.useMobileLayout ? 'top' : 'right-start'}\n                open={this.isOpen || this.item.dockMenu.menuOpen}\n                onClose={this.onPopoverClose}\n            >\n                {this.renderButton(this.openPopover, 'trigger')}\n                <CustomComponent\n                    ref={this.setCustomComponentElement}\n                    {...(this.item.dockMenu.props || {})}\n                    onClose={this.onPopoverClose}\n                />\n            </limel-popover>\n        );\n    }\n\n    private renderButton(\n        handleClick: (event: MouseEvent) => void,\n        slot?: string,\n    ) {\n        return (\n            <button\n                slot={slot}\n                tabindex=\"0\"\n                id={this.tooltipId}\n                type=\"button\"\n                class={{\n                    button: true,\n                    selected: this.item?.selected,\n                }}\n                onClick={handleClick}\n                aria-live=\"polite\"\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n                {this.renderNotification()}\n            </button>\n        );\n    }\n\n    private renderNotification = () => {\n        if (this.item.badge !== undefined) {\n            return <limel-badge label={this.item.badge} />;\n        }\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n        this.menuOpen.emit(this.item);\n    };\n\n    private setCustomComponentElement = (element: HTMLElement) => {\n        this.customComponentElement = element;\n    };\n\n    private onPopoverClose = () => {\n        this.isOpen = false;\n        this.close.emit();\n    };\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.itemSelected.emit(this.item);\n    };\n\n    private renderIcon() {\n        if (!this.item.icon) {\n            return;\n        }\n\n        return <limel-icon name={this.item.icon} class=\"icon\" />;\n    }\n\n    private renderLabel() {\n        if (this.expanded) {\n            return <span class=\"text\">{this.item.label}</span>;\n        }\n    }\n\n    private renderTooltip() {\n        if (!this.expanded && this.item.label) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.label}\n                    helperLabel={this.item.helperLabel}\n                    openDirection={this.getOpenDirection()}\n                />\n            );\n        }\n\n        if (this.expanded && this.item.helperLabel) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.helperLabel}\n                    openDirection={this.getOpenDirection()}\n                />\n            );\n        }\n    }\n\n    private focusCustomComponentElement = (\n        entries: IntersectionObserverEntry[],\n    ) => {\n        const entry = entries.find(\n            (e) => e.target === this.customComponentElement,\n        );\n        if (!entry) {\n            return;\n        }\n\n        if (!entry.isIntersecting) {\n            return;\n        }\n\n        if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n            this.customComponentElement?.focus();\n        }\n    };\n\n    private getOpenDirection = () => {\n        if (this.useMobileLayout) {\n            return 'top';\n        }\n\n        return 'right';\n    };\n}\n"],"mappings":"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"}

package/dist/lime-elements/p-0af1417f.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,H as s,g as o}from"./p-443111b3.js";import{i as r}from"./p-91741e79.js";import{c as n}from"./p-3ccdc4a3.js";import{m as a,r as l}from"./p-869d6d77.js";import{g as h,a as c}from"./p-2f777fdb.js";import{t as d}from"./p-fe15bcbb.js";import{h as m,g as b,p as u}from"./p-ebaa0958.js";import{a as f,E as p}from"./p-e03dfe70.js";const v=":host(limel-action-bar){--action-bar-item-height:2rem;--limel-action-bar-item-text-color:var(\n      --action-bar-item-text-color,\n      rgb(var(--contrast-1100))\n  );box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.25rem;max-width:100%;border-radius:var(--action-bar-border-radius);background-color:var(--action-bar-background-color, rgb(var(--contrast-100)))}:host(limel-action-bar),.items{gap:0.25rem}@media (pointer: coarse){:host(limel-action-bar),.items{gap:0.5rem}}.items{display:inline-flex;max-width:100%;min-width:0}:host(limel-action-bar.is-full-width){width:100%}:host(limel-action-bar.is-floating){--action-bar-border-radius:100vw;border:1px solid rgb(var(--contrast-400));padding-right:0.125rem;padding-left:0.125rem;max-width:calc(100% - 2rem);box-shadow:var(--shadow-depth-16), var(--shadow-depth-8)}";const g=class{constructor(s){t(this,s);this.itemSelected=i(this,"itemSelected",7);this.firstRender=true;this.actionBarItems=[];this.renderActionBarItem=(t,i)=>e("limel-action-bar-item",{item:t,onSelect:this.handleSelect,isVisible:this.isVisible(i),role:"gridcell"});this.renderOverflowMenu=t=>{if(!(this.actions.length-this.overflowCutoff)){return}return e("limel-action-bar-overflow-menu",{openDirection:this.openDirection,items:t,onSelect:this.handleSelect,role:"gridcell"})};this.handleSelect=t=>{t.stopPropagation();if(r(t.detail)){this.itemSelected.emit(t.detail)}};this.handleIntersection=t=>{const i=t.filter((t=>t.isIntersecting));const e=t.filter((t=>!t.isIntersecting));if(this.firstRender){this.overflowCutoff=i.length}else{this.overflowCutoff=this.overflowCutoff+i.length-e.length}this.firstRender=false};this.actions=[];this.accessibleLabel=undefined;this.layout=undefined;this.openDirection=undefined;this.overflowCutoff=this.actions.length}render(){let t=[];if(this.actions.length){t=this.actions.slice(this.overflowCutoff)}return e(s,{"aria-label":this.accessibleLabel,class:{"is-full-width":this.layout==="fullWidth","is-floating":this.layout==="floating"},role:"grid"},e("div",{class:"items",role:"rowgroup"},this.actions.map(this.renderActionBarItem)),this.renderOverflowMenu(t))}connectedCallback(){}componentDidRender(){var t;if(this.haveItemsChanged()){(t=this.intersectionObserver)===null||t===void 0?void 0:t.disconnect();this.createIntersectionObserver()}}disconnectedCallback(){var t;(t=this.intersectionObserver)===null||t===void 0?void 0:t.disconnect();this.intersectionObserver=undefined;this.actionBarItems=[];this.connectedCallback=()=>this.createIntersectionObserver()}isVisible(t){return t<this.overflowCutoff}createIntersectionObserver(){const t={root:this.host.shadowRoot.querySelector(".items"),rootMargin:"0px",threshold:1};this.overflowCutoff=this.actions.length;this.firstRender=true;this.actionBarItems=[];this.intersectionObserver=new IntersectionObserver(this.handleIntersection,t);this.host.shadowRoot.querySelectorAll("limel-action-bar-item").forEach((t=>{this.observe(t)}))}observe(t){this.intersectionObserver.observe(t);this.actionBarItems.push(t)}haveItemsChanged(){const t=this.actionBarItems.some((t=>!this.host.shadowRoot.contains(t)));const i=Array.from(this.host.shadowRoot.querySelectorAll("limel-action-bar-item")).some((t=>!this.actionBarItems.includes(t)));return t||i}get host(){return o(this)}};g.style=v;const w='@charset "UTF-8";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button: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-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover,button:not([disabled]):focus,button:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button:not([disabled]):hover{transform:translate3d(0, -0.04rem, 0);color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button: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);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed)}button:not([disabled]):hover,button:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected{color:var(--mdc-theme-primary) !important}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}';const x=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.handleClick=t=>{t.stopPropagation();this.select.emit(this.item)};this.item=undefined;this.isVisible=true;this.selected=false;this.tooltipId=n()}componentWillLoad(){a(this.host)}componentDidLoad(){this.triggerIconColorWarning()}disconnectedCallback(){l(this.host)}render(){if(!this.isItem(this.item)&&this.item.separator){return e("div",{role:"separator"})}return e("button",{id:this.tooltipId,type:"button",onClick:this.handleClick,disabled:this.isDisabled(),class:{"is-selected":this.isItem(this.item)&&this.item.selected}},this.renderIcon(),this.renderLabel(),this.renderTooltip())}isItem(t){return!("separator"in t)}isDisabled(){if(this.isItem(this.item)&&this.item.disabled){return true}if(!this.isVisible){return true}}renderIcon(){if(this.isItem(this.item)&&!this.item.icon){return}if("icon"in this.item){const t=h(this.item.icon);const i=c(this.item.icon,this.item.iconColor);return e("limel-icon",{name:t,style:{"--action-bar-item-icon-color":`${i}`}})}}renderLabel(){if(!this.isItem(this.item)||this.item.iconOnly){return}return e("span",{class:"text"},this.item.text)}renderTooltip(){if(!this.isItem(this.item)){return}if(this.item.text){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.text,helperLabel:this.item.commandText})}if(this.item.commandText){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.commandText})}}triggerIconColorWarning(){if(this.isItem(this.item)&&this.item.iconColor){console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}}get host(){return o(this)}};x.style=w;const k=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.countOverflowedItems=()=>`+${this.numberOfMenuItems}`;this.handleSelect=t=>{t.stopPropagation();this.select.emit(t.detail)};this.items=undefined;this.openDirection="bottom-end"}render(){return[e("limel-menu",{openDirection:this.openDirection,items:this.items,onSelect:this.handleSelect},e("button",{slot:"trigger"},this.countOverflowedItems()))]}get numberOfMenuItems(){return this.items.filter((t=>this.isMenuItem(t))).length}isMenuItem(t){return!("separator"in t)}};const y=":host(limel-text-editor-link-menu){animation:fade 0.2s ease forwards;animation-delay:0.1s;opacity:0;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;max-width:calc(100vw - 2rem);border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-16)}.actions{display:flex;justify-content:end;gap:0.5rem}@keyframes fade{0%{scale:0.86;opacity:0}100%{scale:1;opacity:1}}";const _=class{constructor(e){t(this,e);this.cancel=i(this,"cancel",7);this.save=i(this,"save",7);this.linkChange=i(this,"linkChange",7);this.getTranslation=t=>d.get(t,this.language);this.validateLink=t=>{if(!m(t)){const i=u(t);return!!b(i)}return!!b(t)};this.handleKeyDown=t=>{var i;if(t.key!==f){return}if(this.saveButton){this.saveButton.focus()}t.preventDefault();if(((i=this.link)===null||i===void 0?void 0:i.href)&&!this.invalidLink){this.handleSave(t)}};this.handleCancel=t=>{if(t instanceof KeyboardEvent&&t.key!==p){return}t.stopPropagation();t.preventDefault();this.cancel.emit()};this.handleSave=t=>{t.stopPropagation();this.save.emit()};this.handleLinkInputAction=t=>{window.open(this.link.href,"_blank");t.stopPropagation()};this.handleLinkTitleChange=t=>{var i;this.emitLinkChange(t.detail,(i=this.link)===null||i===void 0?void 0:i.href)};this.handleLinkValueChange=t=>{var i;const e=t.detail;const s=this.validateLink(e);this.invalidLink=!s;this.emitLinkChange((i=this.link)===null||i===void 0?void 0:i.text,e)};this.emitLinkChange=(t,i)=>{const e={text:t,href:i};this.linkChange.emit(e)};this.link=undefined;this.language="en";this.isOpen=false;this.invalidLink=false}connectedCallback(){this.setupGlobalHandlers()}disconnectedCallback(){this.teardownGlobalHandlers()}setupGlobalHandlers(){if(this.isOpen){document.addEventListener("keyup",this.handleCancel)}}teardownGlobalHandlers(){document.removeEventListener("keyup",this.handleCancel)}componentDidLoad(){this.focusOnTextInput()}focusOnTextInput(){if(this.textInput){const t=this.textInput.shadowRoot.querySelector("input");if(t){requestAnimationFrame((()=>{t.focus()}))}}}render(){var t,i,s;return[e("limel-input-field",{label:this.getTranslation("editor-link-menu.text"),value:((t=this.link)===null||t===void 0?void 0:t.text)||"",leadingIcon:"text_cursor",onChange:this.handleLinkTitleChange,onKeyDown:this.handleKeyDown,ref:t=>this.textInput=t}),e("limel-input-field",{label:this.getTranslation("editor-link-menu.link"),value:((i=this.link)===null||i===void 0?void 0:i.href)||"",type:"text",leadingIcon:"-lime-text-link",trailingIcon:"external_link",invalid:this.invalidLink,onChange:this.handleLinkValueChange,onAction:this.handleLinkInputAction,onKeyDown:this.handleKeyDown}),e("div",{class:"actions"},e("limel-button",{label:this.getTranslation("cancel"),onClick:this.handleCancel}),e("limel-button",{primary:true,label:this.getTranslation("save"),disabled:!((s=this.link)===null||s===void 0?void 0:s.href)||this.invalidLink,onClick:this.handleSave,ref:t=>this.saveButton=t,slot:"button"}))]}};_.style=y;export{g as limel_action_bar,x as limel_action_bar_item,k as limel_action_bar_overflow_menu,_ as limel_text_editor_link_menu};
+//# sourceMappingURL=p-0af1417f.entry.js.map

package/dist/lime-elements/{p-d9b7a208.entry.js.map → p-0af1417f.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["actionBarCss","ActionBar","this","firstRender","actionBarItems","renderActionBarItem","item","index","h","onSelect","handleSelect","isVisible","role","renderOverflowMenu","items","actions","length","overflowCutoff","openDirection","event","stopPropagation","isItem","detail","itemSelected","emit","handleIntersection","entries","intersectingItems","filter","entry","isIntersecting","notIntersectingItems","render","overflowActions","slice","Host","accessibleLabel","class","layout","map","connectedCallback","componentDidRender","haveItemsChanged","_a","intersectionObserver","disconnect","createIntersectionObserver","disconnectedCallback","undefined","options","root","host","shadowRoot","querySelector","rootMargin","threshold","IntersectionObserver","querySelectorAll","forEach","actionBarItem","observe","push","someItemRemoved","some","contains","someItemAdded","Array","from","includes","actionBarItemCss","ActionBarButton","constructor","hostRef","handleClick","select","tooltipId","createRandomString","componentWillLoad","makeEnterClickable","componentDidLoad","triggerIconColorWarning","removeEnterClickable","separator","id","type","onClick","disabled","isDisabled","selected","renderIcon","renderLabel","renderTooltip","icon","name","getIconName","color","getIconColor","iconColor","style","iconOnly","text","elementId","label","helperLabel","commandText","console","warn","ActionBarOverflowMenu","countOverflowedItems","numberOfMenuItems","slot","isMenuItem","editorLinkMenuCss","TextEditorLinkMenu","getTranslation","key","translate","get","language","validateLink","href","hasKnownProtocol","formattedLink","prependProtocol","getHref","handleKeyDown","ENTER","saveButton","focus","preventDefault","link","invalidLink","handleSave","handleCancel","KeyboardEvent","ESCAPE","cancel","save","handleLinkInputAction","window","open","handleLinkTitleChange","emitLinkChange","handleLinkValueChange","isValid","newLink","linkChange","setupGlobalHandlers","teardownGlobalHandlers","isOpen","document","addEventListener","removeEventListener","focusOnTextInput","textInput","inputField","requestAnimationFrame","value","leadingIcon","onChange","onKeyDown","ref","el","_b","trailingIcon","invalid","onAction","primary","_c"],"sources":["./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx","./src/components/text-editor/link-menu/editor-link-menu.scss?tag=limel-text-editor-link-menu&encapsulation=shadow","./src/components/text-editor/link-menu/editor-link-menu.tsx"],"sourcesContent":["/**\n* @prop --action-bar-item-text-color: Text color of action bar items, defaults to `--contrast-1100`.\n* @prop --action-bar-item-icon-color: Color of the icons displayed on each action bar item. Defaults to the text color. To specify a color for an individual item, use the `iconColor` prop instead.\n* @prop --action-bar-item-max-width: Maximum width of a button in the action bar. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n* @prop --action-bar-border-radius: Defines the roundness of the corners of the action bar. Defaults to `0`.\n* @prop --action-bar-background-color: Background color of the whole component. Defaults to `--contrast-100`.\n*/\n\n:host(limel-action-bar) {\n    --action-bar-item-height: 2rem;\n\n    --limel-action-bar-item-text-color: var(\n        --action-bar-item-text-color,\n        rgb(var(--contrast-1100))\n    );\n\n    box-sizing: border-box;\n\n    display: inline-flex;\n    align-items: center;\n    padding: 0.125rem 0.25rem;\n    max-width: 100%;\n    border-radius: var(--action-bar-border-radius);\n\n    background-color: var(\n        --action-bar-background-color,\n        rgb(var(--contrast-100))\n    );\n}\n\n:host(limel-action-bar),\n.items {\n    gap: 0.25rem;\n    @media (pointer: coarse) {\n        gap: 0.5rem;\n    }\n}\n\n.items {\n    display: inline-flex;\n    max-width: 100%;\n    min-width: 0;\n}\n\n:host(limel-action-bar.is-full-width) {\n    width: 100%;\n}\n\n:host(limel-action-bar.is-floating) {\n    --action-bar-border-radius: 100vw;\n    border: 1px solid rgb(var(--contrast-400));\n\n    padding-right: 0.125rem;\n    padding-left: 0.125rem;\n\n    max-width: calc(100% - 2rem);\n    box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { isItem } from './isItem';\n\n/**\n * An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n *\n * The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n *\n * The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n *\n * The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n *\n * @exampleComponent limel-example-action-bar-basic\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n */\n@Component({\n    tag: 'limel-action-bar',\n    shadow: true,\n    styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n    /**\n     * Items that are placed in the action bar.\n     * These represent primary actions.\n     */\n    @Prop()\n    public actions: Array<ActionBarItem | ListSeparator> = [];\n\n    /**\n     * A label used to describe the purpose of the element to users\n     * of assistive technologies, like screen readers.\n     * Example value: \"toolbar\"\n     */\n    @Prop({ reflect: true })\n    public accessibleLabel?: string;\n\n    /**\n     * - When set to `fullWidth`, the component will take the\n     * entire width of its container.\n     * - When set to `floating`, the component will get basic stylings\n     * to visualize the floating state.\n     * :::note\n     * You should still properly position the component\n     * according to the structure of your user interface.\n     * For example, use an `absolute` or `fixed` position.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public layout?: 'fullWidth' | 'floating';\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     * @public\n     */\n    @Event()\n    public itemSelected: EventEmitter<ActionBarItem>;\n\n    @Element()\n    private host: HTMLElement;\n\n    @State()\n    private overflowCutoff: number = this.actions.length;\n\n    private intersectionObserver: IntersectionObserver;\n    private firstRender = true;\n    private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n    public render() {\n        let overflowActions: Array<MenuItem | ListSeparator> = [];\n        if (this.actions.length) {\n            overflowActions = this.actions.slice(this.overflowCutoff);\n        }\n\n        return (\n            <Host\n                aria-label={this.accessibleLabel}\n                class={{\n                    'is-full-width': this.layout === 'fullWidth',\n                    'is-floating': this.layout === 'floating',\n                }}\n                role=\"grid\"\n            >\n                <div class=\"items\" role=\"rowgroup\">\n                    {this.actions.map(this.renderActionBarItem)}\n                </div>\n                {this.renderOverflowMenu(overflowActions)}\n            </Host>\n        );\n    }\n\n    public connectedCallback() {}\n\n    public componentDidRender() {\n        if (this.haveItemsChanged()) {\n            this.intersectionObserver?.disconnect();\n            this.createIntersectionObserver();\n        }\n    }\n\n    public disconnectedCallback() {\n        this.intersectionObserver?.disconnect();\n        this.intersectionObserver = undefined;\n        this.actionBarItems = [];\n        this.connectedCallback = () => this.createIntersectionObserver();\n    }\n\n    private renderActionBarItem = (item: ActionBarItem, index: number) => {\n        return (\n            <limel-action-bar-item\n                item={item}\n                onSelect={this.handleSelect}\n                isVisible={this.isVisible(index)}\n                role=\"gridcell\"\n            />\n        );\n    };\n\n    private renderOverflowMenu = (items: Array<MenuItem | ListSeparator>) => {\n        if (!(this.actions.length - this.overflowCutoff)) {\n            return;\n        }\n\n        return (\n            <limel-action-bar-overflow-menu\n                openDirection={this.openDirection}\n                items={items}\n                onSelect={this.handleSelect}\n                role=\"gridcell\"\n            />\n        );\n    };\n\n    private isVisible(index: number) {\n        return index < this.overflowCutoff;\n    }\n\n    private handleSelect = (\n        event: CustomEvent<ActionBarItem | ListSeparator>,\n    ) => {\n        event.stopPropagation();\n        if (isItem(event.detail)) {\n            this.itemSelected.emit(event.detail);\n        }\n    };\n\n    private handleIntersection = (entries: IntersectionObserverEntry[]) => {\n        const intersectingItems = entries.filter(\n            (entry) => entry.isIntersecting,\n        );\n\n        const notIntersectingItems = entries.filter(\n            (entry) => !entry.isIntersecting,\n        );\n\n        if (this.firstRender) {\n            this.overflowCutoff = intersectingItems.length;\n        } else {\n            this.overflowCutoff =\n                this.overflowCutoff +\n                intersectingItems.length -\n                notIntersectingItems.length;\n        }\n\n        this.firstRender = false;\n    };\n\n    private createIntersectionObserver() {\n        const options = {\n            root: this.host.shadowRoot.querySelector('.items'),\n            rootMargin: '0px',\n            threshold: 1.0,\n        };\n\n        this.overflowCutoff = this.actions.length;\n        this.firstRender = true;\n\n        this.actionBarItems = [];\n\n        this.intersectionObserver = new IntersectionObserver(\n            this.handleIntersection,\n            options,\n        );\n\n        this.host.shadowRoot\n            .querySelectorAll('limel-action-bar-item')\n            .forEach((actionBarItem) => {\n                this.observe(actionBarItem);\n            });\n    }\n\n    private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n        this.intersectionObserver.observe(actionBarItem);\n        this.actionBarItems.push(actionBarItem);\n    }\n\n    private haveItemsChanged() {\n        const someItemRemoved = this.actionBarItems.some(\n            (actionBarItem: HTMLLimelActionBarItemElement) =>\n                !this.host.shadowRoot.contains(actionBarItem),\n        );\n\n        const someItemAdded = Array.from(\n            this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n        ).some(\n            (actionBarItem: HTMLLimelActionBarItemElement) =>\n                !this.actionBarItems.includes(actionBarItem),\n        );\n\n        return someItemRemoved || someItemAdded;\n    }\n}\n","@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n    transition: opacity 0.2s ease-in-out;\n    position: relative;\n    display: flex;\n    align-items: center;\n\n    &:not([is-visible]) {\n        opacity: 0;\n        pointer-events: none;\n    }\n}\n\nbutton {\n    all: unset;\n\n    &:not([disabled]) {\n        @include mixins.is-flat-inset-clickable(\n            $color: var(--limel-action-bar-item-text-color),\n            $color--hovered: var(--limel-action-bar-item-text-color),\n            $background-color: var(--action-bar-background-color),\n            $background-color--hovered: var(--action-bar-background-color),\n            $background-color--inset: var(--action-bar-background-color)\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    width: 100%;\n    min-width: var(--action-bar-item-height);\n    max-width: var(--action-bar-item-max-width, 10rem);\n    height: var(--action-bar-item-height);\n    color: var(--limel-action-bar-item-text-color);\n\n    border-radius: var(--action-bar-item-height);\n    font-size: functions.pxToRem(14);\n    padding: 0 0.25rem;\n\n    &:has(.text) {\n        padding: 0 0.5rem;\n    }\n\n    &[disabled] {\n        opacity: 0.4;\n    }\n\n    &.is-selected {\n        &:not(:hover) {\n            box-shadow: var(--button-shadow-inset);\n        }\n        color: var(--mdc-theme-primary) !important;\n    }\n}\n\n.text {\n    @include mixins.truncate-text();\n    padding: 0 0.25rem;\n}\n\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--action-bar-item-height) - 0.75rem);\n    height: calc(var(--action-bar-item-height) - 0.75rem);\n    color: var(\n        --action-bar-item-icon-color,\n        var(--limel-action-bar-item-text-color)\n    );\n}\n\ndiv[role='separator'] {\n    width: 1px;\n    height: 1.5rem;\n    border-radius: var(--action-bar-item-height);\n    background-color: var(--limel-action-bar-item-text-color);\n    opacity: 0.2;\n\n    @media (pointer: fine) {\n        margin-right: 0.5rem;\n        margin-left: 0.5rem;\n    }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n    --notification-badge-background-color: rgb(var(--contrast-600));\n    --notification-badge-text-color: rgb(var(--contrast-1200));\n\n    &[open] {\n        button {\n            box-shadow: var(--button-shadow-inset);\n        }\n    }\n}\n\nbutton[slot='trigger'] {\n    animation: fade-in ease-out 0.25s;\n    font-size: 0.75rem;\n    font-weight: bold;\n    transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n    0% {\n        scale: 0.8;\n        opacity: 0;\n    }\n    100% {\n        scale: 1;\n        opacity: 1;\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-item',\n    shadow: false,\n    styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n    /**\n     * Item that is placed in the action bar.\n     */\n    @Prop()\n    public item!: ActionBarItem | ListSeparator;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     * @public\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n    /**\n     * When the item is displayed in the available width,\n     * this will be `false`.\n     */\n    @Prop({ reflect: true })\n    public isVisible: boolean = true;\n\n    /**\n     * When the item is selected, this will be `true`.\n     */\n    @Prop({ reflect: true })\n    public selected: boolean = false;\n\n    @Element()\n    private host: HTMLLimelActionBarItemElement;\n\n    /**\n     * Used to attach the right tooltip to the right button\n     */\n    private tooltipId: string;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.triggerIconColorWarning();\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        if (!this.isItem(this.item) && this.item.separator) {\n            return <div role=\"separator\" />;\n        }\n\n        return (\n            <button\n                id={this.tooltipId}\n                type=\"button\"\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n                class={{\n                    'is-selected': this.isItem(this.item) && this.item.selected,\n                }}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n            </button>\n        );\n    }\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.select.emit(this.item);\n    };\n\n    private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n        return !('separator' in item);\n    }\n\n    private isDisabled() {\n        if (this.isItem(this.item) && this.item.disabled) {\n            return true;\n        }\n\n        if (!this.isVisible) {\n            return true;\n        }\n    }\n\n    private renderIcon() {\n        if (this.isItem(this.item) && !this.item.icon) {\n            return;\n        }\n\n        if ('icon' in this.item) {\n            const name = getIconName(this.item.icon);\n            const color = getIconColor(this.item.icon, this.item.iconColor);\n\n            return (\n                <limel-icon\n                    name={name}\n                    style={{\n                        '--action-bar-item-icon-color': `${color}`,\n                    }}\n                />\n            );\n        }\n    }\n\n    private renderLabel() {\n        if (!this.isItem(this.item) || this.item.iconOnly) {\n            return;\n        }\n\n        return <span class=\"text\">{this.item.text}</span>;\n    }\n\n    private renderTooltip() {\n        if (!this.isItem(this.item)) {\n            return;\n        }\n\n        if (this.item.text) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.text}\n                    helperLabel={this.item.commandText}\n                />\n            );\n        }\n\n        if (this.item.commandText) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.commandText}\n                />\n            );\n        }\n    }\n\n    private triggerIconColorWarning() {\n        if (this.isItem(this.item) && this.item.iconColor) {\n            /* eslint-disable-next-line no-console */\n            console.warn(\n                \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n            );\n        }\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-overflow-menu',\n    shadow: false,\n})\nexport class ActionBarOverflowMenu {\n    /**\n     * List of the items that should be rendered in the overflow menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator>;\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     * It defaults to `bottom-end`, since in normal scenarios\n     * (for example when the action bar is not floating at the bottom of the screen)\n     * this menu is the right-most item in the user interface of the component.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'bottom-end';\n\n    /**\n     * Fired when an item in the action bar overflow menu has been clicked.\n     * @public\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem>;\n\n    public render() {\n        return [\n            <limel-menu\n                openDirection={this.openDirection}\n                items={this.items}\n                onSelect={this.handleSelect}\n            >\n                <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n            </limel-menu>,\n        ];\n    }\n\n    private countOverflowedItems = () => {\n        return `+${this.numberOfMenuItems}`;\n    };\n\n    private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n        event.stopPropagation();\n        this.select.emit(event.detail);\n    };\n\n    private get numberOfMenuItems() {\n        return this.items.filter((item) => this.isMenuItem(item)).length;\n    }\n\n    private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n        return !('separator' in item);\n    }\n}\n",":host(limel-text-editor-link-menu) {\n    animation: fade 0.2s ease forwards;\n    animation-delay: 0.1s; // prevents the visual glitch when the link opens\n    opacity: 0;\n\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding: 0.5rem;\n    max-width: calc(100vw - 2rem);\n    border-radius: 0.5rem;\n    background-color: var(--lime-elevated-surface-background-color);\n    box-shadow: var(--shadow-depth-16);\n}\n\n.actions {\n    display: flex;\n    justify-content: end;\n    gap: 0.5rem;\n}\n\n@keyframes fade {\n    0% {\n        scale: 0.86;\n        opacity: 0;\n    }\n    100% {\n        scale: 1;\n        opacity: 1;\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\nimport { EditorTextLink } from '../prosemirror-adapter/menu/types';\nimport { Languages } from '../../date-picker/date.types';\nimport translate from '../../../global/translations';\nimport {\n    getHref,\n    hasKnownProtocol,\n    prependProtocol,\n} from '../../../util/link-helper';\nimport { LimelInputFieldCustomEvent } from '../../../components';\nimport { ENTER, ESCAPE } from '../../../util/keycodes';\n\n/**\n * This component is a menu for editing a link in the text editor.\n * It allows the user to input the text and url for the link.\n * @beta\n * @private\n */\n@Component({\n    tag: 'limel-text-editor-link-menu',\n    shadow: true,\n    styleUrl: 'editor-link-menu.scss',\n})\nexport class TextEditorLinkMenu {\n    /**\n     * The link\n     */\n    @Prop({ reflect: true })\n    public link: EditorTextLink;\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Open state of the link-menu dialog\n     */\n    @Prop({ reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Emitted when the menu is closed from inside the component.\n     * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n     */\n    @Event()\n    private cancel: EventEmitter<void>;\n\n    /**\n     * Emitted when the menu is saved from inside the component.\n     */\n    @Event()\n    private save: EventEmitter<void>;\n\n    /**\n     * Emitted when the user inputs new values for the link\n     */\n    @Event()\n    private linkChange: EventEmitter<EditorTextLink>;\n\n    @State()\n    private invalidLink: boolean = false;\n\n    private textInput: HTMLLimelInputFieldElement;\n    private saveButton: HTMLLimelButtonElement;\n\n    public connectedCallback() {\n        this.setupGlobalHandlers();\n    }\n\n    public disconnectedCallback() {\n        this.teardownGlobalHandlers();\n    }\n\n    private setupGlobalHandlers() {\n        if (this.isOpen) {\n            document.addEventListener('keyup', this.handleCancel);\n        }\n    }\n\n    private teardownGlobalHandlers() {\n        document.removeEventListener('keyup', this.handleCancel);\n    }\n\n    public componentDidLoad() {\n        this.focusOnTextInput();\n    }\n\n    private focusOnTextInput() {\n        if (this.textInput) {\n            const inputField = this.textInput.shadowRoot.querySelector('input');\n            if (inputField) {\n                requestAnimationFrame(() => {\n                    inputField.focus();\n                });\n            }\n        }\n    }\n\n    public render() {\n        return [\n            <limel-input-field\n                label={this.getTranslation('editor-link-menu.text')}\n                value={this.link?.text || ''}\n                leadingIcon=\"text_cursor\"\n                onChange={this.handleLinkTitleChange}\n                onKeyDown={this.handleKeyDown}\n                ref={(el) =>\n                    (this.textInput = el as HTMLLimelInputFieldElement)\n                }\n            />,\n            <limel-input-field\n                label={this.getTranslation('editor-link-menu.link')}\n                value={this.link?.href || ''}\n                type=\"text\"\n                leadingIcon=\"-lime-text-link\"\n                trailingIcon=\"external_link\"\n                invalid={this.invalidLink}\n                onChange={this.handleLinkValueChange}\n                onAction={this.handleLinkInputAction}\n                onKeyDown={this.handleKeyDown}\n            />,\n            <div class=\"actions\">\n                <limel-button\n                    label={this.getTranslation('cancel')}\n                    onClick={this.handleCancel}\n                />\n                <limel-button\n                    primary={true}\n                    label={this.getTranslation('save')}\n                    disabled={!this.link?.href || this.invalidLink}\n                    onClick={this.handleSave}\n                    ref={(el) =>\n                        (this.saveButton = el as HTMLLimelButtonElement)\n                    }\n                    slot=\"button\"\n                />\n            </div>,\n        ];\n    }\n\n    private getTranslation = (key: string) => {\n        return translate.get(key, this.language);\n    };\n\n    private validateLink = (href: string): boolean => {\n        if (!hasKnownProtocol(href)) {\n            const formattedLink = prependProtocol(href);\n\n            return !!getHref(formattedLink);\n        }\n\n        return !!getHref(href);\n    };\n\n    private handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== ENTER) {\n            return;\n        }\n\n        if (this.saveButton) {\n            this.saveButton.focus();\n        }\n\n        event.preventDefault();\n        if (this.link?.href && !this.invalidLink) {\n            this.handleSave(event);\n        }\n    };\n\n    private handleCancel = (event: MouseEvent | KeyboardEvent) => {\n        if (event instanceof KeyboardEvent && event.key !== ESCAPE) {\n            return;\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n        this.cancel.emit();\n    };\n\n    private handleSave = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n\n        this.save.emit();\n    };\n\n    private handleLinkInputAction = (\n        event: LimelInputFieldCustomEvent<void>,\n    ) => {\n        window.open(this.link.href, '_blank');\n        event.stopPropagation();\n    };\n\n    private handleLinkTitleChange = (event: CustomEvent<string>) => {\n        this.emitLinkChange(event.detail, this.link?.href);\n    };\n\n    private handleLinkValueChange = (event: CustomEvent<string>) => {\n        const href = event.detail;\n        const isValid = this.validateLink(href);\n\n        this.invalidLink = !isValid;\n        this.emitLinkChange(this.link?.text, href);\n    };\n\n    private emitLinkChange = (text: string, href: string) => {\n        const newLink: EditorTextLink = {\n            text: text,\n            href: href,\n        };\n\n        this.linkChange.emit(newLink);\n    };\n}\n"],"mappings":"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"}
+{"version":3,"names":["actionBarCss","ActionBar","this","firstRender","actionBarItems","renderActionBarItem","item","index","h","onSelect","handleSelect","isVisible","role","renderOverflowMenu","items","actions","length","overflowCutoff","openDirection","event","stopPropagation","isItem","detail","itemSelected","emit","handleIntersection","entries","intersectingItems","filter","entry","isIntersecting","notIntersectingItems","render","overflowActions","slice","Host","accessibleLabel","class","layout","map","connectedCallback","componentDidRender","haveItemsChanged","_a","intersectionObserver","disconnect","createIntersectionObserver","disconnectedCallback","undefined","options","root","host","shadowRoot","querySelector","rootMargin","threshold","IntersectionObserver","querySelectorAll","forEach","actionBarItem","observe","push","someItemRemoved","some","contains","someItemAdded","Array","from","includes","actionBarItemCss","ActionBarButton","constructor","hostRef","handleClick","select","tooltipId","createRandomString","componentWillLoad","makeEnterClickable","componentDidLoad","triggerIconColorWarning","removeEnterClickable","separator","id","type","onClick","disabled","isDisabled","selected","renderIcon","renderLabel","renderTooltip","icon","name","getIconName","color","getIconColor","iconColor","style","iconOnly","text","elementId","label","helperLabel","commandText","console","warn","ActionBarOverflowMenu","countOverflowedItems","numberOfMenuItems","slot","isMenuItem","editorLinkMenuCss","TextEditorLinkMenu","getTranslation","key","translate","get","language","validateLink","href","hasKnownProtocol","formattedLink","prependProtocol","getHref","handleKeyDown","ENTER","saveButton","focus","preventDefault","link","invalidLink","handleSave","handleCancel","KeyboardEvent","ESCAPE","cancel","save","handleLinkInputAction","window","open","handleLinkTitleChange","emitLinkChange","handleLinkValueChange","isValid","newLink","linkChange","setupGlobalHandlers","teardownGlobalHandlers","isOpen","document","addEventListener","removeEventListener","focusOnTextInput","textInput","inputField","requestAnimationFrame","value","leadingIcon","onChange","onKeyDown","ref","el","_b","trailingIcon","invalid","onAction","primary","_c"],"sources":["./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx","./src/components/text-editor/link-menu/editor-link-menu.scss?tag=limel-text-editor-link-menu&encapsulation=shadow","./src/components/text-editor/link-menu/editor-link-menu.tsx"],"sourcesContent":["/**\n* @prop --action-bar-item-text-color: Text color of action bar items, defaults to `--contrast-1100`.\n* @prop --action-bar-item-icon-color: Color of the icons displayed on each action bar item. Defaults to the text color. To specify a color for an individual item, use the `iconColor` prop instead.\n* @prop --action-bar-item-max-width: Maximum width of a button in the action bar. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n* @prop --action-bar-border-radius: Defines the roundness of the corners of the action bar. Defaults to `0`.\n* @prop --action-bar-background-color: Background color of the whole component. Defaults to `--contrast-100`.\n*/\n\n:host(limel-action-bar) {\n    --action-bar-item-height: 2rem;\n\n    --limel-action-bar-item-text-color: var(\n        --action-bar-item-text-color,\n        rgb(var(--contrast-1100))\n    );\n\n    box-sizing: border-box;\n\n    display: inline-flex;\n    align-items: center;\n    padding: 0.125rem 0.25rem;\n    max-width: 100%;\n    border-radius: var(--action-bar-border-radius);\n\n    background-color: var(\n        --action-bar-background-color,\n        rgb(var(--contrast-100))\n    );\n}\n\n:host(limel-action-bar),\n.items {\n    gap: 0.25rem;\n    @media (pointer: coarse) {\n        gap: 0.5rem;\n    }\n}\n\n.items {\n    display: inline-flex;\n    max-width: 100%;\n    min-width: 0;\n}\n\n:host(limel-action-bar.is-full-width) {\n    width: 100%;\n}\n\n:host(limel-action-bar.is-floating) {\n    --action-bar-border-radius: 100vw;\n    border: 1px solid rgb(var(--contrast-400));\n\n    padding-right: 0.125rem;\n    padding-left: 0.125rem;\n\n    max-width: calc(100% - 2rem);\n    box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { isItem } from './isItem';\n\n/**\n * An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n *\n * The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n *\n * The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n *\n * The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n *\n * @exampleComponent limel-example-action-bar-basic\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n */\n@Component({\n    tag: 'limel-action-bar',\n    shadow: true,\n    styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n    /**\n     * Items that are placed in the action bar.\n     * These represent primary actions.\n     */\n    @Prop()\n    public actions: Array<ActionBarItem | ListSeparator> = [];\n\n    /**\n     * A label used to describe the purpose of the element to users\n     * of assistive technologies, like screen readers.\n     * Example value: \"toolbar\"\n     */\n    @Prop({ reflect: true })\n    public accessibleLabel?: string;\n\n    /**\n     * - When set to `fullWidth`, the component will take the\n     * entire width of its container.\n     * - When set to `floating`, the component will get basic stylings\n     * to visualize the floating state.\n     * :::note\n     * You should still properly position the component\n     * according to the structure of your user interface.\n     * For example, use an `absolute` or `fixed` position.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public layout?: 'fullWidth' | 'floating';\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     * @public\n     */\n    @Event()\n    public itemSelected: EventEmitter<ActionBarItem>;\n\n    @Element()\n    private host: HTMLElement;\n\n    @State()\n    private overflowCutoff: number = this.actions.length;\n\n    private intersectionObserver: IntersectionObserver;\n    private firstRender = true;\n    private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n    public render() {\n        let overflowActions: Array<MenuItem | ListSeparator> = [];\n        if (this.actions.length) {\n            overflowActions = this.actions.slice(this.overflowCutoff);\n        }\n\n        return (\n            <Host\n                aria-label={this.accessibleLabel}\n                class={{\n                    'is-full-width': this.layout === 'fullWidth',\n                    'is-floating': this.layout === 'floating',\n                }}\n                role=\"grid\"\n            >\n                <div class=\"items\" role=\"rowgroup\">\n                    {this.actions.map(this.renderActionBarItem)}\n                </div>\n                {this.renderOverflowMenu(overflowActions)}\n            </Host>\n        );\n    }\n\n    public connectedCallback() {}\n\n    public componentDidRender() {\n        if (this.haveItemsChanged()) {\n            this.intersectionObserver?.disconnect();\n            this.createIntersectionObserver();\n        }\n    }\n\n    public disconnectedCallback() {\n        this.intersectionObserver?.disconnect();\n        this.intersectionObserver = undefined;\n        this.actionBarItems = [];\n        this.connectedCallback = () => this.createIntersectionObserver();\n    }\n\n    private renderActionBarItem = (item: ActionBarItem, index: number) => {\n        return (\n            <limel-action-bar-item\n                item={item}\n                onSelect={this.handleSelect}\n                isVisible={this.isVisible(index)}\n                role=\"gridcell\"\n            />\n        );\n    };\n\n    private renderOverflowMenu = (items: Array<MenuItem | ListSeparator>) => {\n        if (!(this.actions.length - this.overflowCutoff)) {\n            return;\n        }\n\n        return (\n            <limel-action-bar-overflow-menu\n                openDirection={this.openDirection}\n                items={items}\n                onSelect={this.handleSelect}\n                role=\"gridcell\"\n            />\n        );\n    };\n\n    private isVisible(index: number) {\n        return index < this.overflowCutoff;\n    }\n\n    private handleSelect = (\n        event: CustomEvent<ActionBarItem | ListSeparator>,\n    ) => {\n        event.stopPropagation();\n        if (isItem(event.detail)) {\n            this.itemSelected.emit(event.detail);\n        }\n    };\n\n    private handleIntersection = (entries: IntersectionObserverEntry[]) => {\n        const intersectingItems = entries.filter(\n            (entry) => entry.isIntersecting,\n        );\n\n        const notIntersectingItems = entries.filter(\n            (entry) => !entry.isIntersecting,\n        );\n\n        if (this.firstRender) {\n            this.overflowCutoff = intersectingItems.length;\n        } else {\n            this.overflowCutoff =\n                this.overflowCutoff +\n                intersectingItems.length -\n                notIntersectingItems.length;\n        }\n\n        this.firstRender = false;\n    };\n\n    private createIntersectionObserver() {\n        const options = {\n            root: this.host.shadowRoot.querySelector('.items'),\n            rootMargin: '0px',\n            threshold: 1.0,\n        };\n\n        this.overflowCutoff = this.actions.length;\n        this.firstRender = true;\n\n        this.actionBarItems = [];\n\n        this.intersectionObserver = new IntersectionObserver(\n            this.handleIntersection,\n            options,\n        );\n\n        this.host.shadowRoot\n            .querySelectorAll('limel-action-bar-item')\n            .forEach((actionBarItem) => {\n                this.observe(actionBarItem);\n            });\n    }\n\n    private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n        this.intersectionObserver.observe(actionBarItem);\n        this.actionBarItems.push(actionBarItem);\n    }\n\n    private haveItemsChanged() {\n        const someItemRemoved = this.actionBarItems.some(\n            (actionBarItem: HTMLLimelActionBarItemElement) =>\n                !this.host.shadowRoot.contains(actionBarItem),\n        );\n\n        const someItemAdded = Array.from(\n            this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n        ).some(\n            (actionBarItem: HTMLLimelActionBarItemElement) =>\n                !this.actionBarItems.includes(actionBarItem),\n        );\n\n        return someItemRemoved || someItemAdded;\n    }\n}\n","@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n    transition: opacity 0.2s ease-in-out;\n    position: relative;\n    display: flex;\n    align-items: center;\n\n    &:not([is-visible]) {\n        opacity: 0;\n        pointer-events: none;\n    }\n}\n\nbutton {\n    all: unset;\n\n    &:not([disabled]) {\n        @include mixins.is-flat-inset-clickable(\n            $color: var(--limel-action-bar-item-text-color),\n            $color--hovered: var(--limel-action-bar-item-text-color),\n            $background-color: var(--action-bar-background-color),\n            $background-color--hovered: var(--action-bar-background-color),\n            $background-color--inset: var(--action-bar-background-color)\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    width: 100%;\n    min-width: var(--action-bar-item-height);\n    max-width: var(--action-bar-item-max-width, 10rem);\n    height: var(--action-bar-item-height);\n    color: var(--limel-action-bar-item-text-color);\n\n    border-radius: var(--action-bar-item-height);\n    font-size: functions.pxToRem(14);\n    padding: 0 0.25rem;\n\n    &:has(.text) {\n        padding: 0 0.5rem;\n    }\n\n    &[disabled] {\n        opacity: 0.4;\n    }\n\n    &.is-selected {\n        &:not(:hover) {\n            box-shadow: var(--button-shadow-inset);\n        }\n        color: var(--mdc-theme-primary) !important;\n    }\n}\n\n.text {\n    @include mixins.truncate-text();\n    padding: 0 0.25rem;\n}\n\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--action-bar-item-height) - 0.75rem);\n    height: calc(var(--action-bar-item-height) - 0.75rem);\n    color: var(\n        --action-bar-item-icon-color,\n        var(--limel-action-bar-item-text-color)\n    );\n}\n\ndiv[role='separator'] {\n    width: 1px;\n    height: 1.5rem;\n    border-radius: var(--action-bar-item-height);\n    background-color: var(--limel-action-bar-item-text-color);\n    opacity: 0.2;\n\n    @media (pointer: fine) {\n        margin-right: 0.5rem;\n        margin-left: 0.5rem;\n    }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n    --notification-badge-background-color: rgb(var(--contrast-600));\n    --notification-badge-text-color: rgb(var(--contrast-1200));\n\n    &[open] {\n        button {\n            box-shadow: var(--button-shadow-inset);\n        }\n    }\n}\n\nbutton[slot='trigger'] {\n    animation: fade-in ease-out 0.25s;\n    font-size: 0.75rem;\n    font-weight: bold;\n    transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n    0% {\n        scale: 0.8;\n        opacity: 0;\n    }\n    100% {\n        scale: 1;\n        opacity: 1;\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-item',\n    shadow: false,\n    styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n    /**\n     * Item that is placed in the action bar.\n     */\n    @Prop()\n    public item!: ActionBarItem | ListSeparator;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     * @public\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n    /**\n     * When the item is displayed in the available width,\n     * this will be `false`.\n     */\n    @Prop({ reflect: true })\n    public isVisible: boolean = true;\n\n    /**\n     * When the item is selected, this will be `true`.\n     */\n    @Prop({ reflect: true })\n    public selected: boolean = false;\n\n    @Element()\n    private host: HTMLLimelActionBarItemElement;\n\n    /**\n     * Used to attach the right tooltip to the right button\n     */\n    private tooltipId: string;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.triggerIconColorWarning();\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        if (!this.isItem(this.item) && this.item.separator) {\n            return <div role=\"separator\" />;\n        }\n\n        return (\n            <button\n                id={this.tooltipId}\n                type=\"button\"\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n                class={{\n                    'is-selected': this.isItem(this.item) && this.item.selected,\n                }}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n            </button>\n        );\n    }\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.select.emit(this.item);\n    };\n\n    private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n        return !('separator' in item);\n    }\n\n    private isDisabled() {\n        if (this.isItem(this.item) && this.item.disabled) {\n            return true;\n        }\n\n        if (!this.isVisible) {\n            return true;\n        }\n    }\n\n    private renderIcon() {\n        if (this.isItem(this.item) && !this.item.icon) {\n            return;\n        }\n\n        if ('icon' in this.item) {\n            const name = getIconName(this.item.icon);\n            const color = getIconColor(this.item.icon, this.item.iconColor);\n\n            return (\n                <limel-icon\n                    name={name}\n                    style={{\n                        '--action-bar-item-icon-color': `${color}`,\n                    }}\n                />\n            );\n        }\n    }\n\n    private renderLabel() {\n        if (!this.isItem(this.item) || this.item.iconOnly) {\n            return;\n        }\n\n        return <span class=\"text\">{this.item.text}</span>;\n    }\n\n    private renderTooltip() {\n        if (!this.isItem(this.item)) {\n            return;\n        }\n\n        if (this.item.text) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.text}\n                    helperLabel={this.item.commandText}\n                />\n            );\n        }\n\n        if (this.item.commandText) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.commandText}\n                />\n            );\n        }\n    }\n\n    private triggerIconColorWarning() {\n        if (this.isItem(this.item) && this.item.iconColor) {\n            /* eslint-disable-next-line no-console */\n            console.warn(\n                \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n            );\n        }\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-overflow-menu',\n    shadow: false,\n})\nexport class ActionBarOverflowMenu {\n    /**\n     * List of the items that should be rendered in the overflow menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator>;\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     * It defaults to `bottom-end`, since in normal scenarios\n     * (for example when the action bar is not floating at the bottom of the screen)\n     * this menu is the right-most item in the user interface of the component.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'bottom-end';\n\n    /**\n     * Fired when an item in the action bar overflow menu has been clicked.\n     * @public\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem>;\n\n    public render() {\n        return [\n            <limel-menu\n                openDirection={this.openDirection}\n                items={this.items}\n                onSelect={this.handleSelect}\n            >\n                <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n            </limel-menu>,\n        ];\n    }\n\n    private countOverflowedItems = () => {\n        return `+${this.numberOfMenuItems}`;\n    };\n\n    private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n        event.stopPropagation();\n        this.select.emit(event.detail);\n    };\n\n    private get numberOfMenuItems() {\n        return this.items.filter((item) => this.isMenuItem(item)).length;\n    }\n\n    private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n        return !('separator' in item);\n    }\n}\n",":host(limel-text-editor-link-menu) {\n    animation: fade 0.2s ease forwards;\n    animation-delay: 0.1s; // prevents the visual glitch when the link opens\n    opacity: 0;\n\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding: 0.5rem;\n    max-width: calc(100vw - 2rem);\n    border-radius: 0.5rem;\n    background-color: var(--lime-elevated-surface-background-color);\n    box-shadow: var(--shadow-depth-16);\n}\n\n.actions {\n    display: flex;\n    justify-content: end;\n    gap: 0.5rem;\n}\n\n@keyframes fade {\n    0% {\n        scale: 0.86;\n        opacity: 0;\n    }\n    100% {\n        scale: 1;\n        opacity: 1;\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\nimport { EditorTextLink } from '../prosemirror-adapter/menu/types';\nimport { Languages } from '../../date-picker/date.types';\nimport translate from '../../../global/translations';\nimport {\n    getHref,\n    hasKnownProtocol,\n    prependProtocol,\n} from '../../../util/link-helper';\nimport { LimelInputFieldCustomEvent } from '../../../components';\nimport { ENTER, ESCAPE } from '../../../util/keycodes';\n\n/**\n * This component is a menu for editing a link in the text editor.\n * It allows the user to input the text and url for the link.\n * @beta\n * @private\n */\n@Component({\n    tag: 'limel-text-editor-link-menu',\n    shadow: true,\n    styleUrl: 'editor-link-menu.scss',\n})\nexport class TextEditorLinkMenu {\n    /**\n     * The link\n     */\n    @Prop({ reflect: true })\n    public link: EditorTextLink;\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Open state of the link-menu dialog\n     */\n    @Prop({ reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Emitted when the menu is closed from inside the component.\n     * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n     */\n    @Event()\n    private cancel: EventEmitter<void>;\n\n    /**\n     * Emitted when the menu is saved from inside the component.\n     */\n    @Event()\n    private save: EventEmitter<void>;\n\n    /**\n     * Emitted when the user inputs new values for the link\n     */\n    @Event()\n    private linkChange: EventEmitter<EditorTextLink>;\n\n    @State()\n    private invalidLink: boolean = false;\n\n    private textInput: HTMLLimelInputFieldElement;\n    private saveButton: HTMLLimelButtonElement;\n\n    public connectedCallback() {\n        this.setupGlobalHandlers();\n    }\n\n    public disconnectedCallback() {\n        this.teardownGlobalHandlers();\n    }\n\n    private setupGlobalHandlers() {\n        if (this.isOpen) {\n            document.addEventListener('keyup', this.handleCancel);\n        }\n    }\n\n    private teardownGlobalHandlers() {\n        document.removeEventListener('keyup', this.handleCancel);\n    }\n\n    public componentDidLoad() {\n        this.focusOnTextInput();\n    }\n\n    private focusOnTextInput() {\n        if (this.textInput) {\n            const inputField = this.textInput.shadowRoot.querySelector('input');\n            if (inputField) {\n                requestAnimationFrame(() => {\n                    inputField.focus();\n                });\n            }\n        }\n    }\n\n    public render() {\n        return [\n            <limel-input-field\n                label={this.getTranslation('editor-link-menu.text')}\n                value={this.link?.text || ''}\n                leadingIcon=\"text_cursor\"\n                onChange={this.handleLinkTitleChange}\n                onKeyDown={this.handleKeyDown}\n                ref={(el) =>\n                    (this.textInput = el as HTMLLimelInputFieldElement)\n                }\n            />,\n            <limel-input-field\n                label={this.getTranslation('editor-link-menu.link')}\n                value={this.link?.href || ''}\n                type=\"text\"\n                leadingIcon=\"-lime-text-link\"\n                trailingIcon=\"external_link\"\n                invalid={this.invalidLink}\n                onChange={this.handleLinkValueChange}\n                onAction={this.handleLinkInputAction}\n                onKeyDown={this.handleKeyDown}\n            />,\n            <div class=\"actions\">\n                <limel-button\n                    label={this.getTranslation('cancel')}\n                    onClick={this.handleCancel}\n                />\n                <limel-button\n                    primary={true}\n                    label={this.getTranslation('save')}\n                    disabled={!this.link?.href || this.invalidLink}\n                    onClick={this.handleSave}\n                    ref={(el) =>\n                        (this.saveButton = el as HTMLLimelButtonElement)\n                    }\n                    slot=\"button\"\n                />\n            </div>,\n        ];\n    }\n\n    private getTranslation = (key: string) => {\n        return translate.get(key, this.language);\n    };\n\n    private validateLink = (href: string): boolean => {\n        if (!hasKnownProtocol(href)) {\n            const formattedLink = prependProtocol(href);\n\n            return !!getHref(formattedLink);\n        }\n\n        return !!getHref(href);\n    };\n\n    private handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== ENTER) {\n            return;\n        }\n\n        if (this.saveButton) {\n            this.saveButton.focus();\n        }\n\n        event.preventDefault();\n        if (this.link?.href && !this.invalidLink) {\n            this.handleSave(event);\n        }\n    };\n\n    private handleCancel = (event: MouseEvent | KeyboardEvent) => {\n        if (event instanceof KeyboardEvent && event.key !== ESCAPE) {\n            return;\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n        this.cancel.emit();\n    };\n\n    private handleSave = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n\n        this.save.emit();\n    };\n\n    private handleLinkInputAction = (\n        event: LimelInputFieldCustomEvent<void>,\n    ) => {\n        window.open(this.link.href, '_blank');\n        event.stopPropagation();\n    };\n\n    private handleLinkTitleChange = (event: CustomEvent<string>) => {\n        this.emitLinkChange(event.detail, this.link?.href);\n    };\n\n    private handleLinkValueChange = (event: CustomEvent<string>) => {\n        const href = event.detail;\n        const isValid = this.validateLink(href);\n\n        this.invalidLink = !isValid;\n        this.emitLinkChange(this.link?.text, href);\n    };\n\n    private emitLinkChange = (text: string, href: string) => {\n        const newLink: EditorTextLink = {\n            text: text,\n            href: href,\n        };\n\n        this.linkChange.emit(newLink);\n    };\n}\n"],"mappings":"+VAAA,MAAMA,EAAe,o1B,MC8CRC,EAAS,M,oEAmDVC,KAAAC,YAAc,KACdD,KAAAE,eAAkD,GAyClDF,KAAAG,oBAAsB,CAACC,EAAqBC,IAE5CC,EAAA,yBACIF,KAAMA,EACNG,SAAUP,KAAKQ,aACfC,UAAWT,KAAKS,UAAUJ,GAC1BK,KAAK,aAKTV,KAAAW,mBAAsBC,IAC1B,KAAMZ,KAAKa,QAAQC,OAASd,KAAKe,gBAAiB,CAC9C,M,CAGJ,OACIT,EAAA,kCACIU,cAAehB,KAAKgB,cACpBJ,MAAOA,EACPL,SAAUP,KAAKQ,aACfE,KAAK,YACP,EAQFV,KAAAQ,aACJS,IAEAA,EAAMC,kBACN,GAAIC,EAAOF,EAAMG,QAAS,CACtBpB,KAAKqB,aAAaC,KAAKL,EAAMG,O,GAI7BpB,KAAAuB,mBAAsBC,IAC1B,MAAMC,EAAoBD,EAAQE,QAC7BC,GAAUA,EAAMC,iBAGrB,MAAMC,EAAuBL,EAAQE,QAChCC,IAAWA,EAAMC,iBAGtB,GAAI5B,KAAKC,YAAa,CAClBD,KAAKe,eAAiBU,EAAkBX,M,KACrC,CACHd,KAAKe,eACDf,KAAKe,eACLU,EAAkBX,OAClBe,EAAqBf,M,CAG7Bd,KAAKC,YAAc,KAAK,E,aAhJ2B,G,sGA0CtBD,KAAKa,QAAQC,M,CAMvCgB,SACH,IAAIC,EAAmD,GACvD,GAAI/B,KAAKa,QAAQC,OAAQ,CACrBiB,EAAkB/B,KAAKa,QAAQmB,MAAMhC,KAAKe,e,CAG9C,OACIT,EAAC2B,EAAI,cACWjC,KAAKkC,gBACjBC,MAAO,CACH,gBAAiBnC,KAAKoC,SAAW,YACjC,cAAepC,KAAKoC,SAAW,YAEnC1B,KAAK,QAELJ,EAAA,OAAK6B,MAAM,QAAQzB,KAAK,YACnBV,KAAKa,QAAQwB,IAAIrC,KAAKG,sBAE1BH,KAAKW,mBAAmBoB,G,CAK9BO,oBAAiB,CAEjBC,qB,MACH,GAAIvC,KAAKwC,mBAAoB,EACzBC,EAAAzC,KAAK0C,wBAAoB,MAAAD,SAAA,SAAAA,EAAEE,aAC3B3C,KAAK4C,4B,EAINC,uB,OACHJ,EAAAzC,KAAK0C,wBAAoB,MAAAD,SAAA,SAAAA,EAAEE,aAC3B3C,KAAK0C,qBAAuBI,UAC5B9C,KAAKE,eAAiB,GACtBF,KAAKsC,kBAAoB,IAAMtC,KAAK4C,4B,CA6BhCnC,UAAUJ,GACd,OAAOA,EAAQL,KAAKe,c,CAiChB6B,6BACJ,MAAMG,EAAU,CACZC,KAAMhD,KAAKiD,KAAKC,WAAWC,cAAc,UACzCC,WAAY,MACZC,UAAW,GAGfrD,KAAKe,eAAiBf,KAAKa,QAAQC,OACnCd,KAAKC,YAAc,KAEnBD,KAAKE,eAAiB,GAEtBF,KAAK0C,qBAAuB,IAAIY,qBAC5BtD,KAAKuB,mBACLwB,GAGJ/C,KAAKiD,KAAKC,WACLK,iBAAiB,yBACjBC,SAASC,IACNzD,KAAK0D,QAAQD,EAAc,G,CAI/BC,QAAQD,GACZzD,KAAK0C,qBAAqBgB,QAAQD,GAClCzD,KAAKE,eAAeyD,KAAKF,E,CAGrBjB,mBACJ,MAAMoB,EAAkB5D,KAAKE,eAAe2D,MACvCJ,IACIzD,KAAKiD,KAAKC,WAAWY,SAASL,KAGvC,MAAMM,EAAgBC,MAAMC,KACxBjE,KAAKiD,KAAKC,WAAWK,iBAAiB,0BACxCM,MACGJ,IACIzD,KAAKE,eAAegE,SAAST,KAGtC,OAAOG,GAAmBG,C,uCCjPlC,MAAMI,EAAmB,y9F,MCyBZC,EAAe,MAmCxBC,YAAAC,G,yCAsCQtE,KAAAuE,YAAetD,IACnBA,EAAMC,kBACNlB,KAAKwE,OAAOlD,KAAKtB,KAAKI,KAAK,E,mCAxDH,K,cAMD,MAWvBJ,KAAKyE,UAAYC,G,CAGdC,oBACHC,EAAmB5E,KAAKiD,K,CAGrB4B,mBACH7E,KAAK8E,yB,CAGFjC,uBACHkC,EAAqB/E,KAAKiD,K,CAGvBnB,SACH,IAAK9B,KAAKmB,OAAOnB,KAAKI,OAASJ,KAAKI,KAAK4E,UAAW,CAChD,OAAO1E,EAAA,OAAKI,KAAK,a,CAGrB,OACIJ,EAAA,UACI2E,GAAIjF,KAAKyE,UACTS,KAAK,SACLC,QAASnF,KAAKuE,YACda,SAAUpF,KAAKqF,aACflD,MAAO,CACH,cAAenC,KAAKmB,OAAOnB,KAAKI,OAASJ,KAAKI,KAAKkF,WAGtDtF,KAAKuF,aACLvF,KAAKwF,cACLxF,KAAKyF,gB,CAUVtE,OAAOf,GACX,QAAS,cAAeA,E,CAGpBiF,aACJ,GAAIrF,KAAKmB,OAAOnB,KAAKI,OAASJ,KAAKI,KAAKgF,SAAU,CAC9C,OAAO,I,CAGX,IAAKpF,KAAKS,UAAW,CACjB,OAAO,I,EAIP8E,aACJ,GAAIvF,KAAKmB,OAAOnB,KAAKI,QAAUJ,KAAKI,KAAKsF,KAAM,CAC3C,M,CAGJ,GAAI,SAAU1F,KAAKI,KAAM,CACrB,MAAMuF,EAAOC,EAAY5F,KAAKI,KAAKsF,MACnC,MAAMG,EAAQC,EAAa9F,KAAKI,KAAKsF,KAAM1F,KAAKI,KAAK2F,WAErD,OACIzF,EAAA,cACIqF,KAAMA,EACNK,MAAO,CACH,+BAAgC,GAAGH,M,EAO/CL,cACJ,IAAKxF,KAAKmB,OAAOnB,KAAKI,OAASJ,KAAKI,KAAK6F,SAAU,CAC/C,M,CAGJ,OAAO3F,EAAA,QAAM6B,MAAM,QAAQnC,KAAKI,KAAK8F,K,CAGjCT,gBACJ,IAAKzF,KAAKmB,OAAOnB,KAAKI,MAAO,CACzB,M,CAGJ,GAAIJ,KAAKI,KAAK8F,KAAM,CAChB,OACI5F,EAAA,iBACI6F,UAAWnG,KAAKyE,UAChB2B,MAAOpG,KAAKI,KAAK8F,KACjBG,YAAarG,KAAKI,KAAKkG,a,CAKnC,GAAItG,KAAKI,KAAKkG,YAAa,CACvB,OACIhG,EAAA,iBACI6F,UAAWnG,KAAKyE,UAChB2B,MAAOpG,KAAKI,KAAKkG,a,EAMzBxB,0BACJ,GAAI9E,KAAKmB,OAAOnB,KAAKI,OAASJ,KAAKI,KAAK2F,UAAW,CAE/CQ,QAAQC,KACJ,uK,8CCjKHC,EAAqB,M,wDAoCtBzG,KAAA0G,qBAAuB,IACpB,IAAI1G,KAAK2G,oBAGZ3G,KAAAQ,aAAgBS,IACpBA,EAAMC,kBACNlB,KAAKwE,OAAOlD,KAAKL,EAAMG,OAAO,E,wCA3BI,Y,CAS/BU,SACH,MAAO,CACHxB,EAAA,cACIU,cAAehB,KAAKgB,cACpBJ,MAAOZ,KAAKY,MACZL,SAAUP,KAAKQ,cAEfF,EAAA,UAAQsG,KAAK,WAAW5G,KAAK0G,yB,CAc7BC,wBACR,OAAO3G,KAAKY,MAAMc,QAAQtB,GAASJ,KAAK6G,WAAWzG,KAAOU,M,CAGtD+F,WAAWzG,GACf,QAAS,cAAeA,E,GC/DhC,MAAM0G,EAAoB,4a,MCuBbC,EAAkB,M,0HAuHnB/G,KAAAgH,eAAkBC,GACfC,EAAUC,IAAIF,EAAKjH,KAAKoH,UAG3BpH,KAAAqH,aAAgBC,IACpB,IAAKC,EAAiBD,GAAO,CACzB,MAAME,EAAgBC,EAAgBH,GAEtC,QAASI,EAAQF,E,CAGrB,QAASE,EAAQJ,EAAK,EAGlBtH,KAAA2H,cAAiB1G,I,MACrB,GAAIA,EAAMgG,MAAQW,EAAO,CACrB,M,CAGJ,GAAI5H,KAAK6H,WAAY,CACjB7H,KAAK6H,WAAWC,O,CAGpB7G,EAAM8G,iBACN,KAAItF,EAAAzC,KAAKgI,QAAI,MAAAvF,SAAA,SAAAA,EAAE6E,QAAStH,KAAKiI,YAAa,CACtCjI,KAAKkI,WAAWjH,E,GAIhBjB,KAAAmI,aAAgBlH,IACpB,GAAIA,aAAiBmH,eAAiBnH,EAAMgG,MAAQoB,EAAQ,CACxD,M,CAGJpH,EAAMC,kBACND,EAAM8G,iBACN/H,KAAKsI,OAAOhH,MAAM,EAGdtB,KAAAkI,WAAcjH,IAClBA,EAAMC,kBAENlB,KAAKuI,KAAKjH,MAAM,EAGZtB,KAAAwI,sBACJvH,IAEAwH,OAAOC,KAAK1I,KAAKgI,KAAKV,KAAM,UAC5BrG,EAAMC,iBAAiB,EAGnBlB,KAAA2I,sBAAyB1H,I,MAC7BjB,KAAK4I,eAAe3H,EAAMG,QAAQqB,EAAAzC,KAAKgI,QAAI,MAAAvF,SAAA,SAAAA,EAAE6E,KAAK,EAG9CtH,KAAA6I,sBAAyB5H,I,MAC7B,MAAMqG,EAAOrG,EAAMG,OACnB,MAAM0H,EAAU9I,KAAKqH,aAAaC,GAElCtH,KAAKiI,aAAea,EACpB9I,KAAK4I,gBAAenG,EAAAzC,KAAKgI,QAAI,MAAAvF,SAAA,SAAAA,EAAEyD,KAAMoB,EAAK,EAGtCtH,KAAA4I,eAAiB,CAAC1C,EAAcoB,KACpC,MAAMyB,EAA0B,CAC5B7C,KAAMA,EACNoB,KAAMA,GAGVtH,KAAKgJ,WAAW1H,KAAKyH,EAAQ,E,kCAlLJ,K,YAMJ,M,iBAsBM,K,CAKxBzG,oBACHtC,KAAKiJ,qB,CAGFpG,uBACH7C,KAAKkJ,wB,CAGDD,sBACJ,GAAIjJ,KAAKmJ,OAAQ,CACbC,SAASC,iBAAiB,QAASrJ,KAAKmI,a,EAIxCe,yBACJE,SAASE,oBAAoB,QAAStJ,KAAKmI,a,CAGxCtD,mBACH7E,KAAKuJ,kB,CAGDA,mBACJ,GAAIvJ,KAAKwJ,UAAW,CAChB,MAAMC,EAAazJ,KAAKwJ,UAAUtG,WAAWC,cAAc,SAC3D,GAAIsG,EAAY,CACZC,uBAAsB,KAClBD,EAAW3B,OAAO,G,GAM3BhG,S,UACH,MAAO,CACHxB,EAAA,qBACI8F,MAAOpG,KAAKgH,eAAe,yBAC3B2C,QAAOlH,EAAAzC,KAAKgI,QAAI,MAAAvF,SAAA,SAAAA,EAAEyD,OAAQ,GAC1B0D,YAAY,cACZC,SAAU7J,KAAK2I,sBACfmB,UAAW9J,KAAK2H,cAChBoC,IAAMC,GACDhK,KAAKwJ,UAAYQ,IAG1B1J,EAAA,qBACI8F,MAAOpG,KAAKgH,eAAe,yBAC3B2C,QAAOM,EAAAjK,KAAKgI,QAAI,MAAAiC,SAAA,SAAAA,EAAE3C,OAAQ,GAC1BpC,KAAK,OACL0E,YAAY,kBACZM,aAAa,gBACbC,QAASnK,KAAKiI,YACd4B,SAAU7J,KAAK6I,sBACfuB,SAAUpK,KAAKwI,sBACfsB,UAAW9J,KAAK2H,gBAEpBrH,EAAA,OAAK6B,MAAM,WACP7B,EAAA,gBACI8F,MAAOpG,KAAKgH,eAAe,UAC3B7B,QAASnF,KAAKmI,eAElB7H,EAAA,gBACI+J,QAAS,KACTjE,MAAOpG,KAAKgH,eAAe,QAC3B5B,YAAWkF,EAAAtK,KAAKgI,QAAI,MAAAsC,SAAA,SAAAA,EAAEhD,OAAQtH,KAAKiI,YACnC9C,QAASnF,KAAKkI,WACd6B,IAAMC,GACDhK,KAAK6H,WAAamC,EAEvBpD,KAAK,Y"}

package/dist/lime-elements/p-1a0aaf41.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,g as o}from"./p-443111b3.js";import{t as r}from"./p-fe15bcbb.js";function s(t,e){const i=t||e;if(!i){return"unknown"}const o=i.split(".").pop().toLowerCase();const r={pdf:"pdf",jpg:"image",jpeg:"image",heic:"image",bmp:"image",png:"image",gif:"image",svg:"image",svgz:"image",ep:"image",eps:"image",avi:"video",flv:"video",h264:"video",mov:"video",mp4:"video",mwv:"video",mkv:"video",mp3:"audio",wav:"audio",wma:"audio",ogg:"audio",txt:"text",json:"text",html:"text",xml:"text",doc:"office",docx:"office",odt:"office",dot:"office",dotx:"office",docm:"office",dotm:"office",pot:"office",ppt:"office",pptx:"office",odp:"office",potx:"office",potm:"office",pps:"office",ppsx:"office",ppsm:"office",pptm:"office",ppam:"office",pages:"office",xls:"office",xlsx:"office",xlsm:"office",xlsb:"office",ods:"office",csv:"office",numbers:"office"};return r[o]||"unknown"}class n{constructor(t){this.requestFullscreen=()=>{if(this.enter){this.enter()}};this.exitFullscreen=()=>{if(this.exit){this.exit.bind(window.document)()}};this.toggle=()=>{const t=window.document;const e=t.fullscreenElement||t.mozFullScreenElement||t.webkitFullscreenElement||t.msFullscreenElement;if(e){this.exitFullscreen()}else{this.requestFullscreen()}};this.enter=t.requestFullscreen||t.msRequestFullscreen||t.mozRequestFullScreen||t.webkitRequestFullscreen;this.enter=this.enter.bind(t);const e=window.document;this.exit=e.exitFullscreen||e.msExitFullscreen||e.mozCancelFullScreen||e.webkitExitFullscreen}isSupported(){return!!this.requestFullscreen}}const a='@charset "UTF-8";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host{isolation:isolate;position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100%}*{box-sizing:border-box}img,video,audio,object,iframe{max-height:100%;max-width:100%;box-sizing:border-box}iframe{border:none;width:100%;height:100%;min-height:20rem}img{min-width:7rem;object-fit:contain}video{width:100%;height:auto}audio{width:100%}object{width:100%;height:100%}object[type="application/pdf"]{min-height:20rem}object[type="text/plain"]{border-radius:0.25rem;padding-right:2rem;overflow-y:auto}:host(:fullscreen){background-color:rgb(var(--color-gray-darker))}:host(:fullscreen) object[type="text/plain"]{max-width:50rem;max-height:calc(100% - 2rem)}:host(:-webkit-full-screen){background-color:rgb(var(--color-gray-darker))}:host(:-webkit-full-screen) object[type="text/plain"]{max-width:50rem;max-height:calc(100% - 2rem)}.buttons{position:absolute;z-index:1;top:0.25rem;right:0.25rem;display:flex;flex-direction:column;gap:0.25rem}@media (pointer: coarse){.buttons{gap:0.5rem}}.no-support{display:flex;flex-direction:column;align-items:center;border:1px dashed rgb(var(--contrast-600));border-radius:0.5rem;padding:1.25rem}.no-support .icon--warning{color:rgb(var(--color-orange-default))}[class^=button--]{all:unset;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(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);display:flex;align-items:center;justify-content:center;border-radius:50%;width:2rem;height:2rem;background-color:rgba(var(--contrast-100), 0.8);backdrop-filter:blur(0.25rem);-webkit-backdrop-filter:blur(0.25rem)}[class^=button--]:hover,[class^=button--]:focus,[class^=button--]:focus-visible{will-change:color, background-color, box-shadow, transform}[class^=button--]:hover{transform:translate3d(0, -0.04rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}[class^=button--]: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)}[class^=button--]:hover,[class^=button--]:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}[class^=button--]:focus{outline:none}[class^=button--]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}[class^=button--] limel-icon{transition:color 0.2s ease;width:1.25rem;color:rgb(var(--contrast-1200))}[class^=button--]:hover limel-icon{color:rgb(var(--contrast-1400))}.action-menu-for-pdf-files,.action-menu-for-office-files{position:absolute;right:0.75rem}.action-menu-for-pdf-files{bottom:0.75rem}.action-menu-for-office-files{top:0.75rem}';const l=class{constructor(o){t(this,o);this.action=e(this,"action",7);this.renderPdf=()=>[i("div",{class:"action-menu-for-pdf-files"},this.renderActionMenu()),i("iframe",{src:this.fileUrl,loading:"lazy"})];this.renderImage=()=>[this.renderButtons(),i("img",{src:this.fileUrl,alt:this.alt,loading:"lazy"})];this.renderVideo=()=>i("video",{controls:true},i("source",{src:this.fileUrl}));this.renderAudio=()=>i("audio",{controls:true},i("source",{src:this.fileUrl}));this.renderText=()=>[this.renderButtons(),i("object",{data:this.fileUrl,type:"text/plain"})];this.renderOffice=()=>[i("div",{class:"action-menu-for-office-files"},this.renderActionMenu()),i("iframe",{src:this.getOfficeViewerUrl()+this.fileUrl+"&embedded=true",loading:"lazy"})];this.isOfficeFileAccessibleViaURL=()=>this.fileType==="office"&&!(this.fileUrl.startsWith("http://")||this.fileUrl.startsWith("https://"));this.getOfficeViewerUrl=()=>{const t={"microsoft-office":"https://view.officeapps.live.com/op/embed.aspx?src=","google-drive":"https://docs.google.com/gview?url="};return t[this.officeViewer]};this.renderNoFileSupportMessage=()=>i("div",{class:"no-support"},i("limel-icon",{class:"icon--warning",name:"brake_warning",size:"large",role:"presentation"}),i("p",null,this.getTranslation("message.unsupported-filetype")),this.renderDownloadButton());this.renderButtons=()=>i("div",{class:"buttons"},this.renderActionMenu(),this.renderToggleFullscreenButton(),this.renderDownloadButton(),this.renderOpenInNewTabButton());this.renderToggleFullscreenButton=()=>{if(!this.allowFullscreen||!this.fullscreen.isSupported()){return}const t=this.isFullscreen?"multiply":"fit_to_width";const e=this.isFullscreen?this.getTranslation("exit-fullscreen"):this.getTranslation("open-in-fullscreen");return[i("button",{class:"button--toggle-fullscreen",id:"tooltip-toggle-fullscreen",role:"button",onClick:this.handleToggleFullscreen},i("limel-icon",{name:t}),i("limel-tooltip",{label:e,elementId:"tooltip-toggle-fullscreen",openDirection:"left"}))]};this.renderDownloadButton=()=>{if(!this.allowDownload||this.isFullscreen){return}return i("a",{class:"button--download",id:"tooltip-download",role:"button",download:this.filename?this.filename:"",href:this.fileUrl,target:"_blank"},i("limel-icon",{name:"download_2"}),i("limel-tooltip",{label:this.getTranslation("download"),elementId:"tooltip-download",openDirection:"left"}))};this.renderOpenInNewTabButton=()=>{if(!this.allowOpenInNewTab||this.isFullscreen){return}return i("a",{class:"button--new-tab",id:"tooltip-new-tab",role:"button",href:this.fileUrl,target:"_blank",rel:"noopener noreferrer"},i("limel-icon",{name:"external_link"}),i("limel-tooltip",{label:this.getTranslation("open-in-new-tab"),elementId:"tooltip-new-tab",openDirection:"left"}))};this.renderActionMenu=()=>{if(!this.actions||this.isFullscreen){return}return i("limel-menu",{class:"action-menu",items:this.actions,onSelect:this.emitOnAction,"open-direction":"left"},i("button",{class:"button--action",id:"tooltip-more",role:"button",slot:"trigger"},i("limel-icon",{name:"menu_2"}),i("limel-tooltip",{label:this.getTranslation("more-actions"),elementId:"tooltip-more",openDirection:"left"})))};this.createURL=async t=>{if(["pdf"].includes(t)){const t=await fetch(this.url);const e=await t.blob();this.fileUrl=URL.createObjectURL(e)}else{this.fileUrl=this.url}this.loading=false};this.handleToggleFullscreen=()=>{if(this.fullscreen.isSupported()){this.fullscreen.toggle();this.isFullscreen=!this.isFullscreen}};this.emitOnAction=t=>{t.stopPropagation();this.action.emit(t.detail)};this.url=undefined;this.filename=undefined;this.alt=undefined;this.allowFullscreen=false;this.allowOpenInNewTab=false;this.allowDownload=false;this.language="en";this.officeViewer="microsoft-office";this.actions=undefined;this.isFullscreen=false;this.fileType=undefined;this.loading=true;this.fileUrl="";this.fullscreen=new n(this.HostElement)}async componentWillLoad(){this.fileType=s(this.filename,this.url);await this.createURL(this.fileType)}render(){if(!this.isOfficeFileAccessibleViaURL){return this.renderNoFileSupportMessage()}if(this.loading){return i("limel-spinner",{size:"x-small",limeBranded:false})}return this.renderFileViewer()}async watchUrl(t,e){if(t===e){return}this.loading=true;this.fileType=s(this.filename,this.fileUrl);await this.createURL(this.fileType)}renderFileViewer(){const t={pdf:this.renderPdf,image:this.renderImage,video:this.renderVideo,audio:this.renderAudio,text:this.renderText,office:this.renderOffice};const e=t[this.fileType]||this.renderNoFileSupportMessage;return e()}getTranslation(t){return r.get(`file-viewer.${t}`,this.language)}get HostElement(){return o(this)}static get watchers(){return{url:["watchUrl"]}}};l.style=a;export{l as limel_file_viewer};
+//# sourceMappingURL=p-1a0aaf41.entry.js.map