npm - @limetech/lime-elements - Versions diffs - 38.1.1 → 38.1.2 - Mend

@limetech/lime-elements 38.1.1 → 38.1.2

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

Files changed (139) hide show

package/dist/esm/limel-color-picker-palette.entry.js CHANGED Viewed

@@ -30,7 +30,7 @@ function getCssColor(color, brightness) {
   return `rgb(var(${getColorName(color, brightness)}))`;
 }
-const colorPickerPaletteCss = "@charset \"UTF-8\";.color-palette{display:grid;gap:0.25rem;grid-auto-flow:column;margin:0.75rem auto 1.25rem auto;padding:1.25rem 0.75rem;background-color:rgb(var(--kompendium-contrast-300));border-radius:0.1875rem}.brightness-label,.swatch{display:flex;align-items:center;position:relative}.swatch{border-radius:3px;justify-content:center;color:rgba(var(--kompendium-color-white), 0.4);font-size:1.25rem;line-height:99%}.swatch:after{content:\"\";display:block;padding-top:100%}.swatch.hue{font-family:\"Source Code Pro\", monospace;font-size:0.75rem;position:relative;color:rgb(var(--kompendium-contrast-900));padding-top:0.5rem;writing-mode:vertical-lr;justify-content:left}.brightness-label{font-family:\"Source Code Pro\", monospace;font-size:0.75rem;color:rgb(var(--kompendium-contrast-900));justify-content:start}.--color-red-lighter{background-color:rgb(var(--color-red-lighter))}.--color-red-light{background-color:rgb(var(--color-red-light))}.--color-red-default{background-color:rgb(var(--color-red-default))}.--color-red-dark{background-color:rgb(var(--color-red-dark))}.--color-red-darker{background-color:rgb(var(--color-red-darker))}.--color-pink-lighter{background-color:rgb(var(--color-pink-lighter))}.--color-pink-light{background-color:rgb(var(--color-pink-light))}.--color-pink-default{background-color:rgb(var(--color-pink-default))}.--color-pink-dark{background-color:rgb(var(--color-pink-dark))}.--color-pink-darker{background-color:rgb(var(--color-pink-darker))}.--color-magenta-lighter{background-color:rgb(var(--color-magenta-lighter))}.--color-magenta-light{background-color:rgb(var(--color-magenta-light))}.--color-magenta-default{background-color:rgb(var(--color-magenta-default))}.--color-magenta-dark{background-color:rgb(var(--color-magenta-dark))}.--color-magenta-darker{background-color:rgb(var(--color-magenta-darker))}.--color-purple-lighter{background-color:rgb(var(--color-purple-lighter))}.--color-purple-light{background-color:rgb(var(--color-purple-light))}.--color-purple-default{background-color:rgb(var(--color-purple-default))}.--color-purple-dark{background-color:rgb(var(--color-purple-dark))}.--color-purple-darker{background-color:rgb(var(--color-purple-darker))}.--color-violet-lighter{background-color:rgb(var(--color-violet-lighter))}.--color-violet-light{background-color:rgb(var(--color-violet-light))}.--color-violet-default{background-color:rgb(var(--color-violet-default))}.--color-violet-dark{background-color:rgb(var(--color-violet-dark))}.--color-violet-darker{background-color:rgb(var(--color-violet-darker))}.--color-indigo-lighter{background-color:rgb(var(--color-indigo-lighter))}.--color-indigo-light{background-color:rgb(var(--color-indigo-light))}.--color-indigo-default{background-color:rgb(var(--color-indigo-default))}.--color-indigo-dark{background-color:rgb(var(--color-indigo-dark))}.--color-indigo-darker{background-color:rgb(var(--color-indigo-darker))}.--color-blue-lighter{background-color:rgb(var(--color-blue-lighter))}.--color-blue-light{background-color:rgb(var(--color-blue-light))}.--color-blue-default{background-color:rgb(var(--color-blue-default))}.--color-blue-dark{background-color:rgb(var(--color-blue-dark))}.--color-blue-darker{background-color:rgb(var(--color-blue-darker))}.--color-sky-lighter{background-color:rgb(var(--color-sky-lighter))}.--color-sky-light{background-color:rgb(var(--color-sky-light))}.--color-sky-default{background-color:rgb(var(--color-sky-default))}.--color-sky-dark{background-color:rgb(var(--color-sky-dark))}.--color-sky-darker{background-color:rgb(var(--color-sky-darker))}.--color-cyan-lighter{background-color:rgb(var(--color-cyan-lighter))}.--color-cyan-light{background-color:rgb(var(--color-cyan-light))}.--color-cyan-default{background-color:rgb(var(--color-cyan-default))}.--color-cyan-dark{background-color:rgb(var(--color-cyan-dark))}.--color-cyan-darker{background-color:rgb(var(--color-cyan-darker))}.--color-teal-lighter{background-color:rgb(var(--color-teal-lighter))}.--color-teal-light{background-color:rgb(var(--color-teal-light))}.--color-teal-default{background-color:rgb(var(--color-teal-default))}.--color-teal-dark{background-color:rgb(var(--color-teal-dark))}.--color-teal-darker{background-color:rgb(var(--color-teal-darker))}.--color-green-lighter{background-color:rgb(var(--color-green-lighter))}.--color-green-light{background-color:rgb(var(--color-green-light))}.--color-green-default{background-color:rgb(var(--color-green-default))}.--color-green-dark{background-color:rgb(var(--color-green-dark))}.--color-green-darker{background-color:rgb(var(--color-green-darker))}.--color-lime-lighter{background-color:rgb(var(--color-lime-lighter))}.--color-lime-light{background-color:rgb(var(--color-lime-light))}.--color-lime-default{background-color:rgb(var(--color-lime-default))}.--color-lime-dark{background-color:rgb(var(--color-lime-dark))}.--color-lime-darker{background-color:rgb(var(--color-lime-darker))}.--color-grass-lighter{background-color:rgb(var(--color-grass-lighter))}.--color-grass-light{background-color:rgb(var(--color-grass-light))}.--color-grass-default{background-color:rgb(var(--color-grass-default))}.--color-grass-dark{background-color:rgb(var(--color-grass-dark))}.--color-grass-darker{background-color:rgb(var(--color-grass-darker))}.--color-yellow-lighter{background-color:rgb(var(--color-yellow-lighter))}.--color-yellow-light{background-color:rgb(var(--color-yellow-light))}.--color-yellow-default{background-color:rgb(var(--color-yellow-default))}.--color-yellow-dark{background-color:rgb(var(--color-yellow-dark))}.--color-yellow-darker{background-color:rgb(var(--color-yellow-darker))}.--color-amber-lighter{background-color:rgb(var(--color-amber-lighter))}.--color-amber-light{background-color:rgb(var(--color-amber-light))}.--color-amber-default{background-color:rgb(var(--color-amber-default))}.--color-amber-dark{background-color:rgb(var(--color-amber-dark))}.--color-amber-darker{background-color:rgb(var(--color-amber-darker))}.--color-orange-lighter{background-color:rgb(var(--color-orange-lighter))}.--color-orange-light{background-color:rgb(var(--color-orange-light))}.--color-orange-default{background-color:rgb(var(--color-orange-default))}.--color-orange-dark{background-color:rgb(var(--color-orange-dark))}.--color-orange-darker{background-color:rgb(var(--color-orange-darker))}.--color-coral-lighter{background-color:rgb(var(--color-coral-lighter))}.--color-coral-light{background-color:rgb(var(--color-coral-light))}.--color-coral-default{background-color:rgb(var(--color-coral-default))}.--color-coral-dark{background-color:rgb(var(--color-coral-dark))}.--color-coral-darker{background-color:rgb(var(--color-coral-darker))}.--color-brown-lighter{background-color:rgb(var(--color-brown-lighter))}.--color-brown-light{background-color:rgb(var(--color-brown-light))}.--color-brown-default{background-color:rgb(var(--color-brown-default))}.--color-brown-dark{background-color:rgb(var(--color-brown-dark))}.--color-brown-darker{background-color:rgb(var(--color-brown-darker))}.--color-gray-lighter{background-color:rgb(var(--color-gray-lighter))}.--color-gray-light{background-color:rgb(var(--color-gray-light))}.--color-gray-default{background-color:rgb(var(--color-gray-default))}.--color-gray-dark{background-color:rgb(var(--color-gray-dark))}.--color-gray-darker{background-color:rgb(var(--color-gray-darker))}.--color-glaucous-lighter{background-color:rgb(var(--color-glaucous-lighter))}.--color-glaucous-light{background-color:rgb(var(--color-glaucous-light))}.--color-glaucous-default{background-color:rgb(var(--color-glaucous-default))}.--color-glaucous-dark{background-color:rgb(var(--color-glaucous-dark))}.--color-glaucous-darker{background-color:rgb(var(--color-glaucous-darker))}.--contrast-100{color:rgb(var(--contrast-900));background-color:rgb(var(--contrast-100))}.--contrast-200{color:rgb(var(--contrast-1000));background-color:rgb(var(--contrast-200))}.--contrast-300{color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-300))}.--contrast-400{color:rgb(var(--contrast-1200));background-color:rgb(var(--contrast-400))}.--contrast-500{color:rgb(var(--contrast-1300));background-color:rgb(var(--contrast-500))}.--contrast-600{color:rgb(var(--contrast-1400));background-color:rgb(var(--contrast-600))}.--contrast-700{color:rgb(var(--contrast-1500));background-color:rgb(var(--contrast-700))}.--contrast-800{color:rgb(var(--contrast-1600));background-color:rgb(var(--contrast-800))}.--contrast-900{color:rgb(var(--contrast-1700));background-color:rgb(var(--contrast-900))}.--contrast-1000{color:rgb(var(--contrast-100));background-color:rgb(var(--contrast-1000))}.--contrast-1100{color:rgb(var(--contrast-200));background-color:rgb(var(--contrast-1100))}.--contrast-1200{color:rgb(var(--contrast-300));background-color:rgb(var(--contrast-1200))}.--contrast-1300{color:rgb(var(--contrast-400));background-color:rgb(var(--contrast-1300))}.--contrast-1400{color:rgb(var(--contrast-500));background-color:rgb(var(--contrast-1400))}.--contrast-1500{color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-1500))}.--contrast-1600{color:rgb(var(--contrast-700));background-color:rgb(var(--contrast-1600))}.--contrast-1700{color:rgb(var(--contrast-800));background-color:rgb(var(--contrast-1700))}.--color-white{color:rgb(var(--color-black));background-color:rgb(var(--color-white))}.--color-black{color:rgb(var(--color-white));background-color:rgb(var(--color-black))}.color-palette{grid-template-rows:repeat(5, 1fr) auto;grid-template-columns:repeat(20, 1fr) auto}: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  )}.picker-trigger[style=\"--background:lime-magenta;\"]:after,.chosen-color-preview[style=\"--background:lime-magenta;\"]:after{background-color:var(--lime-magenta)}.picker-trigger[style=\"--background:lime-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-blue;\"]:after{background-color:var(--lime-blue)}.picker-trigger[style=\"--background:lime-orange;\"]:after,.chosen-color-preview[style=\"--background:lime-orange;\"]:after{background-color:var(--lime-orange)}.picker-trigger[style=\"--background:lime-green;\"]:after,.chosen-color-preview[style=\"--background:lime-green;\"]:after{background-color:var(--lime-green)}.picker-trigger[style=\"--background:lime-red;\"]:after,.chosen-color-preview[style=\"--background:lime-red;\"]:after{background-color:var(--lime-red)}.picker-trigger[style=\"--background:lime-dark-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-dark-blue;\"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style=\"--background:lime-turquoise;\"]:after,.chosen-color-preview[style=\"--background:lime-turquoise;\"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style=\"--background:lime-yellow;\"]:after,.chosen-color-preview[style=\"--background:lime-yellow;\"]:after{background-color:var(--lime-yellow)}.picker-trigger[style=\"--background:lime-light-grey;\"]:after,.chosen-color-preview[style=\"--background:lime-light-grey;\"]:after{background-color:var(--lime-light-grey)}:host{position:relative;--popover-surface-width:50rem;--color-picker-default-background:url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\")}.color-picker{display:grid;gap:0.25rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;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), var(--limel-additional-clickable-transition-properties);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.picker-trigger:hover,.picker-trigger:focus,.picker-trigger:focus-visible{will-change:color, background-color, box-shadow, transform}.picker-trigger: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)}.picker-trigger: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)}.picker-trigger:hover,.picker-trigger:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4))}:host{border-radius:0.75rem;background-color:rgb(var(--kompendium-contrast-300))}.color-picker-palette{display:grid;gap:0.25rem;grid-auto-flow:column;grid-template-columns:repeat(20, 1fr);grid-template-rows:repeat(4, 1fr) auto;margin:1rem}.chosen-color-name{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:1fr auto;gap:0.5rem}.chosen-color-preview{border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.swatch:not(.hue){border:none;aspect-ratio:1;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer}.swatch:not(.hue):focus{outline:none}.swatch:not(.hue):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.swatch:not(.hue):hover{box-shadow:var(--button-shadow-hovered)}.swatch:not(.hue):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.swatch:not(.hue):focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.25rem rgb(var(--contrast-100)) inset}.swatch--selected{border-radius:50%}";
+const colorPickerPaletteCss = "@charset \"UTF-8\";.color-palette{display:grid;gap:0.25rem;grid-auto-flow:column;margin:0.75rem auto 1.25rem auto;padding:1.25rem 0.75rem;background-color:rgb(var(--kompendium-contrast-300));border-radius:0.1875rem}.brightness-label,.swatch{display:flex;align-items:center;position:relative}.swatch{border-radius:3px;justify-content:center;color:rgba(var(--kompendium-color-white), 0.4);font-size:1.25rem;line-height:99%}.swatch:after{content:\"\";display:block;padding-top:100%}.swatch.hue{font-family:\"Source Code Pro\", monospace;font-size:0.75rem;position:relative;color:rgb(var(--kompendium-contrast-900));padding-top:0.5rem;writing-mode:vertical-lr;justify-content:left}.brightness-label{font-family:\"Source Code Pro\", monospace;font-size:0.75rem;color:rgb(var(--kompendium-contrast-900));justify-content:start}.--color-red-lighter{background-color:rgb(var(--color-red-lighter))}.--color-red-light{background-color:rgb(var(--color-red-light))}.--color-red-default{background-color:rgb(var(--color-red-default))}.--color-red-dark{background-color:rgb(var(--color-red-dark))}.--color-red-darker{background-color:rgb(var(--color-red-darker))}.--color-pink-lighter{background-color:rgb(var(--color-pink-lighter))}.--color-pink-light{background-color:rgb(var(--color-pink-light))}.--color-pink-default{background-color:rgb(var(--color-pink-default))}.--color-pink-dark{background-color:rgb(var(--color-pink-dark))}.--color-pink-darker{background-color:rgb(var(--color-pink-darker))}.--color-magenta-lighter{background-color:rgb(var(--color-magenta-lighter))}.--color-magenta-light{background-color:rgb(var(--color-magenta-light))}.--color-magenta-default{background-color:rgb(var(--color-magenta-default))}.--color-magenta-dark{background-color:rgb(var(--color-magenta-dark))}.--color-magenta-darker{background-color:rgb(var(--color-magenta-darker))}.--color-purple-lighter{background-color:rgb(var(--color-purple-lighter))}.--color-purple-light{background-color:rgb(var(--color-purple-light))}.--color-purple-default{background-color:rgb(var(--color-purple-default))}.--color-purple-dark{background-color:rgb(var(--color-purple-dark))}.--color-purple-darker{background-color:rgb(var(--color-purple-darker))}.--color-violet-lighter{background-color:rgb(var(--color-violet-lighter))}.--color-violet-light{background-color:rgb(var(--color-violet-light))}.--color-violet-default{background-color:rgb(var(--color-violet-default))}.--color-violet-dark{background-color:rgb(var(--color-violet-dark))}.--color-violet-darker{background-color:rgb(var(--color-violet-darker))}.--color-indigo-lighter{background-color:rgb(var(--color-indigo-lighter))}.--color-indigo-light{background-color:rgb(var(--color-indigo-light))}.--color-indigo-default{background-color:rgb(var(--color-indigo-default))}.--color-indigo-dark{background-color:rgb(var(--color-indigo-dark))}.--color-indigo-darker{background-color:rgb(var(--color-indigo-darker))}.--color-blue-lighter{background-color:rgb(var(--color-blue-lighter))}.--color-blue-light{background-color:rgb(var(--color-blue-light))}.--color-blue-default{background-color:rgb(var(--color-blue-default))}.--color-blue-dark{background-color:rgb(var(--color-blue-dark))}.--color-blue-darker{background-color:rgb(var(--color-blue-darker))}.--color-sky-lighter{background-color:rgb(var(--color-sky-lighter))}.--color-sky-light{background-color:rgb(var(--color-sky-light))}.--color-sky-default{background-color:rgb(var(--color-sky-default))}.--color-sky-dark{background-color:rgb(var(--color-sky-dark))}.--color-sky-darker{background-color:rgb(var(--color-sky-darker))}.--color-cyan-lighter{background-color:rgb(var(--color-cyan-lighter))}.--color-cyan-light{background-color:rgb(var(--color-cyan-light))}.--color-cyan-default{background-color:rgb(var(--color-cyan-default))}.--color-cyan-dark{background-color:rgb(var(--color-cyan-dark))}.--color-cyan-darker{background-color:rgb(var(--color-cyan-darker))}.--color-teal-lighter{background-color:rgb(var(--color-teal-lighter))}.--color-teal-light{background-color:rgb(var(--color-teal-light))}.--color-teal-default{background-color:rgb(var(--color-teal-default))}.--color-teal-dark{background-color:rgb(var(--color-teal-dark))}.--color-teal-darker{background-color:rgb(var(--color-teal-darker))}.--color-green-lighter{background-color:rgb(var(--color-green-lighter))}.--color-green-light{background-color:rgb(var(--color-green-light))}.--color-green-default{background-color:rgb(var(--color-green-default))}.--color-green-dark{background-color:rgb(var(--color-green-dark))}.--color-green-darker{background-color:rgb(var(--color-green-darker))}.--color-lime-lighter{background-color:rgb(var(--color-lime-lighter))}.--color-lime-light{background-color:rgb(var(--color-lime-light))}.--color-lime-default{background-color:rgb(var(--color-lime-default))}.--color-lime-dark{background-color:rgb(var(--color-lime-dark))}.--color-lime-darker{background-color:rgb(var(--color-lime-darker))}.--color-grass-lighter{background-color:rgb(var(--color-grass-lighter))}.--color-grass-light{background-color:rgb(var(--color-grass-light))}.--color-grass-default{background-color:rgb(var(--color-grass-default))}.--color-grass-dark{background-color:rgb(var(--color-grass-dark))}.--color-grass-darker{background-color:rgb(var(--color-grass-darker))}.--color-yellow-lighter{background-color:rgb(var(--color-yellow-lighter))}.--color-yellow-light{background-color:rgb(var(--color-yellow-light))}.--color-yellow-default{background-color:rgb(var(--color-yellow-default))}.--color-yellow-dark{background-color:rgb(var(--color-yellow-dark))}.--color-yellow-darker{background-color:rgb(var(--color-yellow-darker))}.--color-amber-lighter{background-color:rgb(var(--color-amber-lighter))}.--color-amber-light{background-color:rgb(var(--color-amber-light))}.--color-amber-default{background-color:rgb(var(--color-amber-default))}.--color-amber-dark{background-color:rgb(var(--color-amber-dark))}.--color-amber-darker{background-color:rgb(var(--color-amber-darker))}.--color-orange-lighter{background-color:rgb(var(--color-orange-lighter))}.--color-orange-light{background-color:rgb(var(--color-orange-light))}.--color-orange-default{background-color:rgb(var(--color-orange-default))}.--color-orange-dark{background-color:rgb(var(--color-orange-dark))}.--color-orange-darker{background-color:rgb(var(--color-orange-darker))}.--color-coral-lighter{background-color:rgb(var(--color-coral-lighter))}.--color-coral-light{background-color:rgb(var(--color-coral-light))}.--color-coral-default{background-color:rgb(var(--color-coral-default))}.--color-coral-dark{background-color:rgb(var(--color-coral-dark))}.--color-coral-darker{background-color:rgb(var(--color-coral-darker))}.--color-brown-lighter{background-color:rgb(var(--color-brown-lighter))}.--color-brown-light{background-color:rgb(var(--color-brown-light))}.--color-brown-default{background-color:rgb(var(--color-brown-default))}.--color-brown-dark{background-color:rgb(var(--color-brown-dark))}.--color-brown-darker{background-color:rgb(var(--color-brown-darker))}.--color-gray-lighter{background-color:rgb(var(--color-gray-lighter))}.--color-gray-light{background-color:rgb(var(--color-gray-light))}.--color-gray-default{background-color:rgb(var(--color-gray-default))}.--color-gray-dark{background-color:rgb(var(--color-gray-dark))}.--color-gray-darker{background-color:rgb(var(--color-gray-darker))}.--color-glaucous-lighter{background-color:rgb(var(--color-glaucous-lighter))}.--color-glaucous-light{background-color:rgb(var(--color-glaucous-light))}.--color-glaucous-default{background-color:rgb(var(--color-glaucous-default))}.--color-glaucous-dark{background-color:rgb(var(--color-glaucous-dark))}.--color-glaucous-darker{background-color:rgb(var(--color-glaucous-darker))}.--contrast-100{color:rgb(var(--contrast-900));background-color:rgb(var(--contrast-100))}.--contrast-200{color:rgb(var(--contrast-1000));background-color:rgb(var(--contrast-200))}.--contrast-300{color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-300))}.--contrast-400{color:rgb(var(--contrast-1200));background-color:rgb(var(--contrast-400))}.--contrast-500{color:rgb(var(--contrast-1300));background-color:rgb(var(--contrast-500))}.--contrast-600{color:rgb(var(--contrast-1400));background-color:rgb(var(--contrast-600))}.--contrast-700{color:rgb(var(--contrast-1500));background-color:rgb(var(--contrast-700))}.--contrast-800{color:rgb(var(--contrast-1600));background-color:rgb(var(--contrast-800))}.--contrast-900{color:rgb(var(--contrast-1700));background-color:rgb(var(--contrast-900))}.--contrast-1000{color:rgb(var(--contrast-100));background-color:rgb(var(--contrast-1000))}.--contrast-1100{color:rgb(var(--contrast-200));background-color:rgb(var(--contrast-1100))}.--contrast-1200{color:rgb(var(--contrast-300));background-color:rgb(var(--contrast-1200))}.--contrast-1300{color:rgb(var(--contrast-400));background-color:rgb(var(--contrast-1300))}.--contrast-1400{color:rgb(var(--contrast-500));background-color:rgb(var(--contrast-1400))}.--contrast-1500{color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-1500))}.--contrast-1600{color:rgb(var(--contrast-700));background-color:rgb(var(--contrast-1600))}.--contrast-1700{color:rgb(var(--contrast-800));background-color:rgb(var(--contrast-1700))}.--color-white{color:rgb(var(--color-black));background-color:rgb(var(--color-white))}.--color-black{color:rgb(var(--color-white));background-color:rgb(var(--color-black))}.color-palette{grid-template-rows:repeat(5, 1fr) auto;grid-template-columns:repeat(20, 1fr) auto}: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  )}.picker-trigger[style=\"--background:lime-magenta;\"]:after,.chosen-color-preview[style=\"--background:lime-magenta;\"]:after{background-color:var(--lime-magenta)}.picker-trigger[style=\"--background:lime-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-blue;\"]:after{background-color:var(--lime-blue)}.picker-trigger[style=\"--background:lime-orange;\"]:after,.chosen-color-preview[style=\"--background:lime-orange;\"]:after{background-color:var(--lime-orange)}.picker-trigger[style=\"--background:lime-green;\"]:after,.chosen-color-preview[style=\"--background:lime-green;\"]:after{background-color:var(--lime-green)}.picker-trigger[style=\"--background:lime-red;\"]:after,.chosen-color-preview[style=\"--background:lime-red;\"]:after{background-color:var(--lime-red)}.picker-trigger[style=\"--background:lime-dark-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-dark-blue;\"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style=\"--background:lime-turquoise;\"]:after,.chosen-color-preview[style=\"--background:lime-turquoise;\"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style=\"--background:lime-yellow;\"]:after,.chosen-color-preview[style=\"--background:lime-yellow;\"]:after{background-color:var(--lime-yellow)}.picker-trigger[style=\"--background:lime-light-grey;\"]:after,.chosen-color-preview[style=\"--background:lime-light-grey;\"]:after{background-color:var(--lime-light-grey)}:host{position:relative;--popover-surface-width:50rem;--color-picker-default-background:url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\")}.color-picker{display:grid;gap:0.25rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;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)}.picker-trigger:hover,.picker-trigger:focus,.picker-trigger:focus-visible{will-change:color, background-color, box-shadow, transform}.picker-trigger: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)}.picker-trigger: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)}.picker-trigger:hover,.picker-trigger:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4))}:host{border-radius:0.75rem;background-color:rgb(var(--kompendium-contrast-300))}.color-picker-palette{display:grid;gap:0.25rem;grid-auto-flow:column;grid-template-columns:repeat(20, 1fr);grid-template-rows:repeat(4, 1fr) auto;margin:1rem}.chosen-color-name{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:1fr auto;gap:0.5rem}.chosen-color-preview{border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.swatch:not(.hue){border:none;aspect-ratio:1;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer}.swatch:not(.hue):focus{outline:none}.swatch:not(.hue):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.swatch:not(.hue):hover{box-shadow:var(--button-shadow-hovered)}.swatch:not(.hue):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.swatch:not(.hue):focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.25rem rgb(var(--contrast-100)) inset}.swatch--selected{border-radius:50%}";
 const Palette = class {
   constructor(hostRef) {

package/dist/esm/limel-color-picker-palette.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-color-picker-palette.entry.js","mappings":";;AAAO,MAAM,MAAM,GAAG;EAClB,KAAK;EACL,MAAM;EACN,SAAS;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,KAAK;EACL,MAAM;EACN,MAAM;EACN,OAAO;EACP,MAAM;EACN,OAAO;EACP,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;EACP,OAAO;EACP,MAAM;EACN,UAAU;CACb,CAAC;AAEK,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;SAE9D,YAAY,CAAC,KAAa,EAAE,UAAkB;EAC1D,OAAO,WAAW,KAAK,IAAI,UAAU,EAAE,CAAC;AAC5C,CAAC;SAEe,WAAW,CAAC,KAAa,EAAE,UAAkB;EACzD,OAAO,WAAW,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC;AAC1D;;AC/BA,MAAM,qBAAqB,GAAG~~,+7eAA+7e~~;;~~MCYh9e~~,OAAO;;;;IAiDR,mBAAc,GAAG;MACrB,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK;QACpB,OAAO,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;OACrD,CAAC,CAAC;KACN,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAa,KAAK,CAAC,UAAkB;MACzD,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAClD,MAAM,SAAS,GAAG;QACd,MAAM,EAAE,IAAI;QACZ,CAAC,SAAS,GAAG,IAAI;QACjB,kBAAkB,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC;OACpE,CAAC;MAEF,QACI,cACI,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,GAC9C,EACJ;KACL,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B;MAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;IAEM,gBAAW,GACf,CAAC,KAAa,EAAE,UAAkB,KAAK,CAAC,KAAiB;MACrD,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B,CAAC;;;;;;EAlDC,MAAM;IACT,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;IAEpE,OAAO;MACH,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,cAAc,EAAE,CAAO;MAC/D,WAAK,KAAK,EAAC,mBAAmB,IAC1B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,EACF,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,UAAU,GAAI,CACrD;KACT,CAAC;GACL;;;;;;;","names":[],"sources":["./src/components/color-picker/swatches.ts","./src/components/color-picker/color-picker-palette.scss?tag=limel-color-picker-palette&encapsulation=shadow","./src/components/color-picker/color-picker-palette.tsx"],"sourcesContent":["export const colors = [\n 'red',\n 'pink',\n 'magenta',\n 'purple',\n 'violet',\n 'indigo',\n 'blue',\n 'sky',\n 'cyan',\n 'teal',\n 'green',\n 'lime',\n 'grass',\n 'yellow',\n 'amber',\n 'orange',\n 'coral',\n 'brown',\n 'gray',\n 'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\nexport function getColorName(color: string, brightness: string): string {\n return `--color-${color}-${brightness}`;\n}\n\nexport function getCssColor(color: string, brightness: string): string {\n return `rgb(var(${getColorName(color, brightness)}))`;\n}\n","@use '../../design-guidelines/color-system/examples/extended-color-palette';\n@use '../../style/mixins';\n@import './color-picker';\n\n:host {\n border-radius: 0.75rem; // is like popover's default `--popover-border-radius`\n background-color: rgb(var(--kompendium-contrast-300));\n}\n\n.color-picker-palette {\n display: grid;\n gap: 0.25rem;\n grid-auto-flow: column;\n grid-template-columns: repeat(20, 1fr);\n grid-template-rows: repeat(4, 1fr) auto;\n margin: 1rem;\n}\n\n.chosen-color-name {\n box-sizing: border-box;\n padding: 1rem;\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 0.5rem;\n}\n\n.chosen-color-preview {\n border: 1px solid rgba(var(--contrast-700), 0.65); // color is the same as\n // colors in shared_input-select-picker.scss\n border-radius: 50%;\n}\n\n.swatch:not(.hue) {\n border: none;\n aspect-ratio: 1;\n\n @include mixins.visualize-keyboard-focus();\n\n // We could use the `@include mixins.is-flat-clickable();` mixin\n // But its `background-color` arguments would interfere with the\n // styles here. So we just copy/pasted the useful parts of the mixin here\n transition:\n color 0.2s ease,\n background-color 0.2s ease,\n box-shadow 0.2s ease,\n transform 0.1s ease-out;\n\n &:hover {\n box-shadow: var(--button-shadow-hovered);\n }\n\n &:active {\n box-shadow: var(--button-shadow-pressed);\n\n transform: translate3d(0, 0.08rem, 0);\n }\n cursor: pointer;\n\n &:focus-visible {\n box-shadow:\n var(--shadow-depth-8-focused),\n 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n }\n}\n\n.swatch--selected {\n border-radius: 50%;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-color-picker-palette',\n shadow: { delegatesFocus: true },\n styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n /\n Color value that is manually typed by the user\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n Label of the input field\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Helper text of the input field\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\n\n /\n Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n const background = this.value ? { '--background': this.value } : {};\n\n return [\n <div class=\"color-picker-palette\">{this.renderSwatches()}</div>,\n <div class=\"chosen-color-name\">\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return colors.map((color) => {\n return brightnesses.map(this.renderSwatch(color));\n });\n };\n\n private renderSwatch = (color: string) => (brightness: string) => {\n const colorName = getColorName(color, brightness);\n const classList = {\n swatch: true,\n [colorName]: true,\n 'swatch--selected': this.value === getCssColor(color, brightness),\n };\n\n return (\n <button\n class={classList}\n onClick={this.handleClick(color, brightness)}\n />\n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleClick =\n (color: string, brightness: string) => (event: MouseEvent) => {\n const value = getCssColor(color, brightness);\n event.stopPropagation();\n this.change.emit(value);\n };\n}\n"],"version":3}
1	+ {"file":"limel-color-picker-palette.entry.js","mappings":";;AAAO,MAAM,MAAM,GAAG;EAClB,KAAK;EACL,MAAM;EACN,SAAS;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,KAAK;EACL,MAAM;EACN,MAAM;EACN,OAAO;EACP,MAAM;EACN,OAAO;EACP,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;EACP,OAAO;EACP,MAAM;EACN,UAAU;CACb,CAAC;AAEK,MAAM,YAAY,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;SAE9D,YAAY,CAAC,KAAa,EAAE,UAAkB;EAC1D,OAAO,WAAW,KAAK,IAAI,UAAU,EAAE,CAAC;AAC5C,CAAC;SAEe,WAAW,CAAC,KAAa,EAAE,UAAkB;EACzD,OAAO,WAAW,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC;AAC1D;;AC/BA,MAAM,qBAAqB,GAAG,s4eAAs4e;;MCYv5e,OAAO;;;;IAiDR,mBAAc,GAAG;MACrB,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK;QACpB,OAAO,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;OACrD,CAAC,CAAC;KACN,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAa,KAAK,CAAC,UAAkB;MACzD,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAClD,MAAM,SAAS,GAAG;QACd,MAAM,EAAE,IAAI;QACZ,CAAC,SAAS,GAAG,IAAI;QACjB,kBAAkB,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC;OACpE,CAAC;MAEF,QACI,cACI,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,GAC9C,EACJ;KACL,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B;MAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;IAEM,gBAAW,GACf,CAAC,KAAa,EAAE,UAAkB,KAAK,CAAC,KAAiB;MACrD,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B,CAAC;;;;;;EAlDC,MAAM;IACT,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;IAEpE,OAAO;MACH,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,cAAc,EAAE,CAAO;MAC/D,WAAK,KAAK,EAAC,mBAAmB,IAC1B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,EACF,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,UAAU,GAAI,CACrD;KACT,CAAC;GACL;;;;;;;","names":[],"sources":["./src/components/color-picker/swatches.ts","./src/components/color-picker/color-picker-palette.scss?tag=limel-color-picker-palette&encapsulation=shadow","./src/components/color-picker/color-picker-palette.tsx"],"sourcesContent":["export const colors = [\n 'red',\n 'pink',\n 'magenta',\n 'purple',\n 'violet',\n 'indigo',\n 'blue',\n 'sky',\n 'cyan',\n 'teal',\n 'green',\n 'lime',\n 'grass',\n 'yellow',\n 'amber',\n 'orange',\n 'coral',\n 'brown',\n 'gray',\n 'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\nexport function getColorName(color: string, brightness: string): string {\n return `--color-${color}-${brightness}`;\n}\n\nexport function getCssColor(color: string, brightness: string): string {\n return `rgb(var(${getColorName(color, brightness)}))`;\n}\n","@use '../../design-guidelines/color-system/examples/extended-color-palette';\n@use '../../style/mixins';\n@import './color-picker';\n\n:host {\n border-radius: 0.75rem; // is like popover's default `--popover-border-radius`\n background-color: rgb(var(--kompendium-contrast-300));\n}\n\n.color-picker-palette {\n display: grid;\n gap: 0.25rem;\n grid-auto-flow: column;\n grid-template-columns: repeat(20, 1fr);\n grid-template-rows: repeat(4, 1fr) auto;\n margin: 1rem;\n}\n\n.chosen-color-name {\n box-sizing: border-box;\n padding: 1rem;\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 0.5rem;\n}\n\n.chosen-color-preview {\n border: 1px solid rgba(var(--contrast-700), 0.65); // color is the same as\n // colors in shared_input-select-picker.scss\n border-radius: 50%;\n}\n\n.swatch:not(.hue) {\n border: none;\n aspect-ratio: 1;\n\n @include mixins.visualize-keyboard-focus();\n\n // We could use the `@include mixins.is-flat-clickable();` mixin\n // But its `background-color` arguments would interfere with the\n // styles here. So we just copy/pasted the useful parts of the mixin here\n transition:\n color 0.2s ease,\n background-color 0.2s ease,\n box-shadow 0.2s ease,\n transform 0.1s ease-out;\n\n &:hover {\n box-shadow: var(--button-shadow-hovered);\n }\n\n &:active {\n box-shadow: var(--button-shadow-pressed);\n\n transform: translate3d(0, 0.08rem, 0);\n }\n cursor: pointer;\n\n &:focus-visible {\n box-shadow:\n var(--shadow-depth-8-focused),\n 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n }\n}\n\n.swatch--selected {\n border-radius: 50%;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-color-picker-palette',\n shadow: { delegatesFocus: true },\n styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n /\n Color value that is manually typed by the user\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n Label of the input field\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Helper text of the input field\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\n\n /\n Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n const background = this.value ? { '--background': this.value } : {};\n\n return [\n <div class=\"color-picker-palette\">{this.renderSwatches()}</div>,\n <div class=\"chosen-color-name\">\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return colors.map((color) => {\n return brightnesses.map(this.renderSwatch(color));\n });\n };\n\n private renderSwatch = (color: string) => (brightness: string) => {\n const colorName = getColorName(color, brightness);\n const classList = {\n swatch: true,\n [colorName]: true,\n 'swatch--selected': this.value === getCssColor(color, brightness),\n };\n\n return (\n <button\n class={classList}\n onClick={this.handleClick(color, brightness)}\n />\n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleClick =\n (color: string, brightness: string) => (event: MouseEvent) => {\n const value = getCssColor(color, brightness);\n event.stopPropagation();\n this.change.emit(value);\n };\n}\n"],"version":3}

package/dist/esm/limel-color-picker.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index-6156b4fd.js';
-const colorPickerCss = "@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  )}.picker-trigger[style=\"--background:lime-magenta;\"]:after,.chosen-color-preview[style=\"--background:lime-magenta;\"]:after{background-color:var(--lime-magenta)}.picker-trigger[style=\"--background:lime-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-blue;\"]:after{background-color:var(--lime-blue)}.picker-trigger[style=\"--background:lime-orange;\"]:after,.chosen-color-preview[style=\"--background:lime-orange;\"]:after{background-color:var(--lime-orange)}.picker-trigger[style=\"--background:lime-green;\"]:after,.chosen-color-preview[style=\"--background:lime-green;\"]:after{background-color:var(--lime-green)}.picker-trigger[style=\"--background:lime-red;\"]:after,.chosen-color-preview[style=\"--background:lime-red;\"]:after{background-color:var(--lime-red)}.picker-trigger[style=\"--background:lime-dark-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-dark-blue;\"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style=\"--background:lime-turquoise;\"]:after,.chosen-color-preview[style=\"--background:lime-turquoise;\"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style=\"--background:lime-yellow;\"]:after,.chosen-color-preview[style=\"--background:lime-yellow;\"]:after{background-color:var(--lime-yellow)}.picker-trigger[style=\"--background:lime-light-grey;\"]:after,.chosen-color-preview[style=\"--background:lime-light-grey;\"]:after{background-color:var(--lime-light-grey)}:host{position:relative;--popover-surface-width:50rem;--color-picker-default-background:url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\")}.color-picker{display:grid;gap:0.25rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;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), var(--limel-additional-clickable-transition-properties);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.picker-trigger:hover,.picker-trigger:focus,.picker-trigger:focus-visible{will-change:color, background-color, box-shadow, transform}.picker-trigger: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)}.picker-trigger: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)}.picker-trigger:hover,.picker-trigger:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4))}";
+const colorPickerCss = "@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  )}.picker-trigger[style=\"--background:lime-magenta;\"]:after,.chosen-color-preview[style=\"--background:lime-magenta;\"]:after{background-color:var(--lime-magenta)}.picker-trigger[style=\"--background:lime-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-blue;\"]:after{background-color:var(--lime-blue)}.picker-trigger[style=\"--background:lime-orange;\"]:after,.chosen-color-preview[style=\"--background:lime-orange;\"]:after{background-color:var(--lime-orange)}.picker-trigger[style=\"--background:lime-green;\"]:after,.chosen-color-preview[style=\"--background:lime-green;\"]:after{background-color:var(--lime-green)}.picker-trigger[style=\"--background:lime-red;\"]:after,.chosen-color-preview[style=\"--background:lime-red;\"]:after{background-color:var(--lime-red)}.picker-trigger[style=\"--background:lime-dark-blue;\"]:after,.chosen-color-preview[style=\"--background:lime-dark-blue;\"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style=\"--background:lime-turquoise;\"]:after,.chosen-color-preview[style=\"--background:lime-turquoise;\"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style=\"--background:lime-yellow;\"]:after,.chosen-color-preview[style=\"--background:lime-yellow;\"]:after{background-color:var(--lime-yellow)}.picker-trigger[style=\"--background:lime-light-grey;\"]:after,.chosen-color-preview[style=\"--background:lime-light-grey;\"]:after{background-color:var(--lime-light-grey)}:host{position:relative;--popover-surface-width:50rem;--color-picker-default-background:url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\")}.color-picker{display:grid;gap:0.25rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;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)}.picker-trigger:hover,.picker-trigger:focus,.picker-trigger:focus-visible{will-change:color, background-color, box-shadow, transform}.picker-trigger: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)}.picker-trigger: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)}.picker-trigger:hover,.picker-trigger:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4))}";
 const ColorPicker = class {
   constructor(hostRef) {

package/dist/esm/limel-color-picker.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-color-picker.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,~~6kKAA6kK~~;;~~MCsBvlK~~,WAAW;;;;IAuDZ,gBAAW,GAAG,KAAK,CAAC;IAoBpB,kBAAa,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;QACrC,QACI,qBACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,SAAS,EAAC,gBAAgB,GAC5B,EACJ;OACL;KACJ,CAAC;IAEM,wBAAmB,GAAG;MAC1B,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;OACrC;MAED,QACI,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,aAAa,EAAC,cAAc,EAC5B,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,IAAI,CAAC,mBAAmB,EAAE,EAC3B,kCACI,GAAG,EAAE,IAAI,CAAC,4BAA4B,EACtC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACU,EAClB;KACL,CAAC;IAEM,wBAAmB,GAAG;MAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;MAEpE,QACI,cACI,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,EAAE,EAAC,gBAAgB,GACrB,EACJ;KACL,CAAC;IAEM,iCAA4B,GAAG,CACnC,OAA2C;MAE3C,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;KACjC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MAEnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;KAClC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACvB,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B;MAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;;;;;;;kBAtGe,KAAK;;EAEf,kBAAkB;;IACrB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,MAAM,EAAE;MACjC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;MACzB,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,EAAE,CAAC;KAChC;GACJ;EAMM,MAAM;IACT,OAAO;MACH,IAAI,CAAC,aAAa,EAAE;MACpB,WAAK,KAAK,EAAC,cAAc,IACpB,IAAI,CAAC,mBAAmB,EAAE,EAE3B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,oBAAoB,GAC5B,CACA;KACT,CAAC;GACL;;;;;;","names":[],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host {\n position: relative;\n --popover-surface-width: 50rem;\n --color-picker-default-background: url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\");\n}\n\n.color-picker {\n display: grid;\n gap: 0.25rem;\n grid-template-columns: auto 1fr;\n}\n\n.picker-trigger {\n all: unset;\n border-radius: 0.5rem;\n @include mixins.is-elevated-clickable();\n @include mixins.visualize-keyboard-focus();\n\n &:after {\n box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n }\n}\n\n.chosen-color-preview,\n.picker-trigger {\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n width: shared_input-select-picker.$height-of-mdc-text-field;\n height: shared_input-select-picker.$height-of-mdc-text-field;\n\n &:before,\n &:after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n }\n\n &:before {\n background: var(--color-picker-default-background);\n background-size: 0.5rem;\n z-index: 0;\n }\n\n &:after {\n background: var(--background);\n z-index: 1;\n }\n}\n\n:host([readonly]) {\n .picker-trigger {\n &:hover,\n &:active {\n cursor: default;\n box-shadow: var(--button-shadow-normal);\n transform: none;\n }\n }\n}\n\n.chosen-color-input[readonly] {\n transform: translateX(\n calc(\n #{shared_input-select-picker.$height-of-mdc-text-field} / 4 * -1\n )\n )\n translateY(\n calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4)\n );\n}\n","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n\n/*\n This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n \n The color picker can also show you a preview of any valid color name or color value.\n \n :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n \n @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n /\n@Component({\n tag: 'limel-color-picker',\n shadow: true,\n styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n /\n Name or code of the chosen color\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n The label of the input field\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Helper text of the input field\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Displayed as tooltips when picker is hovered.\n /\n @Prop({ reflect: true })\n public tooltipLabel: string;\n\n /\n Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\n\n /\n Set to `true` if a value is readonly. This makes the component un-interactive.\n /\n @Prop({ reflect: true })\n public readonly: boolean;\n\n /\n Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n @State()\n private isOpen = false;\n\n public componentDidRender() {\n if (this.shouldFocus && this.isOpen) {\n this.shouldFocus = false;\n this.contentElement?.focus();\n }\n }\n\n private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n private shouldFocus = false;\n\n public render() {\n return [\n this.renderTooltip(),\n <div class=\"color-picker\">\n {this.renderPickerPalette()}\n\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n readonly={this.readonly}\n class=\"chosen-color-input\"\n />\n </div>,\n ];\n }\n private renderTooltip = () => {\n if (!this.readonly && this.tooltipLabel) {\n return (\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-button\"\n />\n );\n }\n };\n\n private renderPickerPalette = () => {\n if (this.readonly) {\n return this.renderPickerTrigger();\n }\n\n return (\n <limel-popover\n open={this.isOpen}\n openDirection=\"bottom-start\"\n onClose={this.onPopoverClose}\n >\n {this.renderPickerTrigger()}\n <limel-color-picker-palette\n ref={this.setColorPickerPaletteElement}\n value={this.value}\n label={this.label}\n helperText={this.helperText}\n onChange={this.handleChange}\n required={this.required}\n />\n </limel-popover>\n );\n };\n\n private renderPickerTrigger = () => {\n const background = this.value ? { '--background': this.value } : {};\n\n return (\n <button\n class=\"picker-trigger\"\n slot=\"trigger\"\n style={background}\n role=\"button\"\n onClick={this.openPopover}\n id=\"tooltip-button\"\n />\n );\n };\n\n private setColorPickerPaletteElement = (\n element: HTMLLimelColorPickerPaletteElement,\n ) => {\n this.contentElement = element;\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n\n this.shouldFocus = this.isOpen;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"],"version":3}
1	+ {"file":"limel-color-picker.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,ohKAAohK;;MCsB9hK,WAAW;;;;IAuDZ,gBAAW,GAAG,KAAK,CAAC;IAoBpB,kBAAa,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;QACrC,QACI,qBACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,SAAS,EAAC,gBAAgB,GAC5B,EACJ;OACL;KACJ,CAAC;IAEM,wBAAmB,GAAG;MAC1B,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;OACrC;MAED,QACI,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,aAAa,EAAC,cAAc,EAC5B,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,IAAI,CAAC,mBAAmB,EAAE,EAC3B,kCACI,GAAG,EAAE,IAAI,CAAC,4BAA4B,EACtC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACU,EAClB;KACL,CAAC;IAEM,wBAAmB,GAAG;MAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC;MAEpE,QACI,cACI,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,EAAE,EAAC,gBAAgB,GACrB,EACJ;KACL,CAAC;IAEM,iCAA4B,GAAG,CACnC,OAA2C;MAE3C,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;KACjC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MAEnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;KAClC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACvB,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B;MAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;;;;;;;kBAtGe,KAAK;;EAEf,kBAAkB;;IACrB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,MAAM,EAAE;MACjC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;MACzB,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,EAAE,CAAC;KAChC;GACJ;EAMM,MAAM;IACT,OAAO;MACH,IAAI,CAAC,aAAa,EAAE;MACpB,WAAK,KAAK,EAAC,cAAc,IACpB,IAAI,CAAC,mBAAmB,EAAE,EAE3B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,oBAAoB,GAC5B,CACA;KACT,CAAC;GACL;;;;;;","names":[],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host {\n position: relative;\n --popover-surface-width: 50rem;\n --color-picker-default-background: url(\"data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\");\n}\n\n.color-picker {\n display: grid;\n gap: 0.25rem;\n grid-template-columns: auto 1fr;\n}\n\n.picker-trigger {\n all: unset;\n border-radius: 0.5rem;\n @include mixins.is-elevated-clickable();\n @include mixins.visualize-keyboard-focus();\n\n &:after {\n box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n }\n}\n\n.chosen-color-preview,\n.picker-trigger {\n box-sizing: border-box;\n position: relative;\n isolation: isolate;\n width: shared_input-select-picker.$height-of-mdc-text-field;\n height: shared_input-select-picker.$height-of-mdc-text-field;\n\n &:before,\n &:after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n }\n\n &:before {\n background: var(--color-picker-default-background);\n background-size: 0.5rem;\n z-index: 0;\n }\n\n &:after {\n background: var(--background);\n z-index: 1;\n }\n}\n\n:host([readonly]) {\n .picker-trigger {\n &:hover,\n &:active {\n cursor: default;\n box-shadow: var(--button-shadow-normal);\n transform: none;\n }\n }\n}\n\n.chosen-color-input[readonly] {\n transform: translateX(\n calc(\n #{shared_input-select-picker.$height-of-mdc-text-field} / 4 * -1\n )\n )\n translateY(\n calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4)\n );\n}\n","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n\n/*\n This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n \n The color picker can also show you a preview of any valid color name or color value.\n \n :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n \n @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n /\n@Component({\n tag: 'limel-color-picker',\n shadow: true,\n styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n /\n Name or code of the chosen color\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n The label of the input field\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Helper text of the input field\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Displayed as tooltips when picker is hovered.\n /\n @Prop({ reflect: true })\n public tooltipLabel: string;\n\n /\n Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\n\n /\n Set to `true` if a value is readonly. This makes the component un-interactive.\n /\n @Prop({ reflect: true })\n public readonly: boolean;\n\n /\n Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n @State()\n private isOpen = false;\n\n public componentDidRender() {\n if (this.shouldFocus && this.isOpen) {\n this.shouldFocus = false;\n this.contentElement?.focus();\n }\n }\n\n private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n private shouldFocus = false;\n\n public render() {\n return [\n this.renderTooltip(),\n <div class=\"color-picker\">\n {this.renderPickerPalette()}\n\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n readonly={this.readonly}\n class=\"chosen-color-input\"\n />\n </div>,\n ];\n }\n private renderTooltip = () => {\n if (!this.readonly && this.tooltipLabel) {\n return (\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-button\"\n />\n );\n }\n };\n\n private renderPickerPalette = () => {\n if (this.readonly) {\n return this.renderPickerTrigger();\n }\n\n return (\n <limel-popover\n open={this.isOpen}\n openDirection=\"bottom-start\"\n onClose={this.onPopoverClose}\n >\n {this.renderPickerTrigger()}\n <limel-color-picker-palette\n ref={this.setColorPickerPaletteElement}\n value={this.value}\n label={this.label}\n helperText={this.helperText}\n onChange={this.handleChange}\n required={this.required}\n />\n </limel-popover>\n );\n };\n\n private renderPickerTrigger = () => {\n const background = this.value ? { '--background': this.value } : {};\n\n return (\n <button\n class=\"picker-trigger\"\n slot=\"trigger\"\n style={background}\n role=\"button\"\n onClick={this.openPopover}\n id=\"tooltip-button\"\n />\n );\n };\n\n private setColorPickerPaletteElement = (\n element: HTMLLimelColorPickerPaletteElement,\n ) => {\n this.contentElement = element;\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n\n this.shouldFocus = this.isOpen;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"],"version":3}

package/dist/esm/limel-dock-button.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h } from './index-6156b4fd.js';
 import { c as createRandomString } from './random-string-e74dc48d.js';
-const dockButtonCss = "@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), var(--limel-additional-clickable-transition-properties);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 dockButtonCss = "@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 DockButton = class {
   constructor(hostRef) {

package/dist/esm/limel-dock-button.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-dock-button.entry.js","mappings":"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","names":[],"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:\n var(--button-shadow-inset), 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"],"version":3}
1	+ {"file":"limel-dock-button.entry.js","mappings":"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","names":[],"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:\n var(--button-shadow-inset), 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"],"version":3}

package/dist/esm/limel-dock.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-6156b4fd.js';
-const dockCss = "@charset \"UTF-8\";:host(limel-dock){--badge-background-color:rgb(var(--color-red-default));--badge-text-color:rgb(var(--color-white));--dock-item-height:2.75rem;--limel-dock-padding:0.25rem;--dock-expand-shrink-button-height:1rem;--limel-dock-item-text-color:var(\n      --dock-item-text-color,\n      rgb(var(--contrast-1100))\n  );--limel-dock-item-text-color--selected:var(\n      --dock-item-text-color--selected,\n      rgb(var(--contrast-1300))\n  );isolation:isolate;position:relative;display:inline-flex;flex-direction:column;background-color:var(--dock-background-color, rgb(var(--contrast-100)));box-shadow:var(--shadow-depth-8);padding-top:var(--dock-padding-top);padding-right:var(--dock-padding-right);padding-bottom:var(--dock-padding-bottom);padding-left:var(--dock-padding-left)}:host(limel-dock:not(.has-mobile-layout)){height:100%;width:calc(var(--limel-dock-padding) * 2 + var(--dock-item-height))}:host(limel-dock:not(.has-mobile-layout)) nav{padding-bottom:calc(var(--limel-dock-padding) + 0.25rem)}:host(limel-dock.expanded){width:var(--dock-expanded-max-width, max-content)}.footer-separator{margin-top:auto;justify-self:flex-end}nav{box-sizing:border-box;display:inline-flex;flex-direction:column;gap:0.375rem;flex-grow:1;padding:var(--limel-dock-padding);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}nav::-webkit-scrollbar{display:none}:host(limel-dock.has-mobile-layout) nav{justify-content:space-between;flex-direction:row}limel-dock-button:first-of-type{--limel-custom-home-icon-enabler:var(--crm-custom-home-icon-enabler);--limel-custom-home-icon:var(--crm-custom-home-icon)}.expand-shrink{all:unset;box-sizing:border-box;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), var(--limel-additional-clickable-transition-properties);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent;display:flex;justify-content:center;align-items:center;height:var(--dock-expand-shrink-button-height);padding:0 0.5rem;margin:var(--limel-dock-padding);border-radius:0.375rem}.expand-shrink:hover,.expand-shrink:focus,.expand-shrink:focus-visible{will-change:color, background-color, box-shadow, transform}.expand-shrink:hover{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.expand-shrink: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)}.expand-shrink:hover,.expand-shrink:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.expand-shrink:focus{outline:none}.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.expand-shrink.expanded{justify-content:flex-end}.expand-shrink.expanded limel-icon{transform:rotateY(180deg)}.expand-shrink limel-icon{width:calc(var(--dock-expand-shrink-button-height) - 0.25rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}";
+const dockCss = "@charset \"UTF-8\";:host(limel-dock){--badge-background-color:rgb(var(--color-red-default));--badge-text-color:rgb(var(--color-white));--dock-item-height:2.75rem;--limel-dock-padding:0.25rem;--dock-expand-shrink-button-height:1rem;--limel-dock-item-text-color:var(\n      --dock-item-text-color,\n      rgb(var(--contrast-1100))\n  );--limel-dock-item-text-color--selected:var(\n      --dock-item-text-color--selected,\n      rgb(var(--contrast-1300))\n  );isolation:isolate;position:relative;display:inline-flex;flex-direction:column;background-color:var(--dock-background-color, rgb(var(--contrast-100)));box-shadow:var(--shadow-depth-8);padding-top:var(--dock-padding-top);padding-right:var(--dock-padding-right);padding-bottom:var(--dock-padding-bottom);padding-left:var(--dock-padding-left)}:host(limel-dock:not(.has-mobile-layout)){height:100%;width:calc(var(--limel-dock-padding) * 2 + var(--dock-item-height))}:host(limel-dock:not(.has-mobile-layout)) nav{padding-bottom:calc(var(--limel-dock-padding) + 0.25rem)}:host(limel-dock.expanded){width:var(--dock-expanded-max-width, max-content)}.footer-separator{margin-top:auto;justify-self:flex-end}nav{box-sizing:border-box;display:inline-flex;flex-direction:column;gap:0.375rem;flex-grow:1;padding:var(--limel-dock-padding);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}nav::-webkit-scrollbar{display:none}:host(limel-dock.has-mobile-layout) nav{justify-content:space-between;flex-direction:row}limel-dock-button:first-of-type{--limel-custom-home-icon-enabler:var(--crm-custom-home-icon-enabler);--limel-custom-home-icon:var(--crm-custom-home-icon)}.expand-shrink{all:unset;box-sizing:border-box;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:transparent;display:flex;justify-content:center;align-items:center;height:var(--dock-expand-shrink-button-height);padding:0 0.5rem;margin:var(--limel-dock-padding);border-radius:0.375rem}.expand-shrink:hover,.expand-shrink:focus,.expand-shrink:focus-visible{will-change:color, background-color, box-shadow, transform}.expand-shrink:hover{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.expand-shrink: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)}.expand-shrink:hover,.expand-shrink:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.expand-shrink:focus{outline:none}.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.expand-shrink.expanded{justify-content:flex-end}.expand-shrink.expanded limel-icon{transform:rotateY(180deg)}.expand-shrink limel-icon{width:calc(var(--dock-expand-shrink-button-height) - 0.25rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}";
 const DEFAULT_MOBILE_BREAKPOINT = 700;
 const Dock = class {

package/dist/esm/limel-dock.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-dock.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,wwGAAwwG;;ACWxxG,MAAM,yBAAyB,GAAG,GAAG,CAAC;MAezB,IAAI;;;;;;;IAmHL,oBAAe,GAAG;MACtB,OAAO,IAAI,CAAC,eAAe,GAAG,IAAI,GAAG,YAAM,KAAK,EAAC,kBAAkB,GAAG,CAAC;KAC1E,CAAC;IAEM,mBAAc,GAAG,CAAC,IAAc;MACpC,QACI,yBACI,KAAK,EAAE;UACH,WAAW,EAAE,IAAI;UACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,EACD,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,EAChD,eAAe,EAAE,IAAI,CAAC,eAAe,GACvC,EACJ;KACL,CAAC;IAEM,iBAAY,GAAG;MACnB,IAAI,MAAM,CAAC,UAAU,IAAI,IAAI,CAAC,gBAAgB,EAAE;QAC5C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;OAC/B;WAAM;QACH,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;OAChC;KACJ,CAAC;IAoBM,oBAAe,GAAG;MACtB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;MAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACzC,CAAC;qBA7J6B,EAAE;2BAOK,EAAE;;oBAqBrB,KAAK;uBAUF,IAAI;4BASS,yBAAyB;2BA+BlC,KAAK;;EAIxB,gBAAgB;IACnB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;GAC9C;EAED,oBAAoB;IAChB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;GACpC;EAEM,MAAM;IACT,QACI,EAAC,IAAI,IACD,KAAK,EAAE;QACH,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,mBAAmB,EAAE,IAAI,CAAC,eAAe;OAC5C,IAED,yBAAiB,IAAI,CAAC,eAAe,IAChC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,EACvC,IAAI,CAAC,eAAe,EAAE,EACtB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAC5C,EACL,IAAI,CAAC,wBAAwB,EAAE,CAC7B,EACT;GACL;EA4BO,wBAAwB;IAC5B,IAAI,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MAC3C,OAAO;KACV;IAED,QACI,cACI,KAAK,EAAE;QACH,eAAe,EAAE,IAAI;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OAC1B,EACD,OAAO,EAAE,IAAI,CAAC,eAAe,IAE7B,kBAAY,IAAI,EAAC,aAAa,GAAG,CAC5B,EACX;GACL;;;;;;","names":[],"sources":["./src/components/dock/dock.scss?tag=limel-dock&encapsulation=shadow","./src/components/dock/dock.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/functions';\n@use '../../style/internal/variables';\n\n/*\n @prop --dock-expanded-max-width: The maximum width of the Dock when it is expanded. Defaults to `max-content` which means the Dock will adjust its width to the widest dock item.\n* @prop --dock-background-color: Background color of the whole component, defaults to `--contrast-100`.\n* @prop --dock-item-background-color--selected: Background color of selected dock item, defaults to `--contrast-200`.\n* @prop --dock-item-text-color: Text of dock items, defaults to `--contrast-1100`.\n* @prop --dock-item-text-color--selected: Text color of selected dock item, defaults to `--contrast-1300`.\n* @prop --dock-item-icon-color: Color of the optional icons used in each dock item. Only affects inactive dock items, defaults to text colors for default or selected states.\n* @prop --dock-padding-top: Space of top side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-top)`.\n* @prop --dock-padding-right: Space of the right side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-right)`.\n* @prop --dock-padding-bottom: Space of the bottom side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-bottom)`.\n* @prop --dock-padding-left: Space of the left side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-left)`.\n* @prop --popover-surface-width: Defines the width of the popover that is opened for dock items with custom components. Defaults to `auto`.\n/\n\n:host(limel-dock) {\n --badge-background-color: rgb(var(--color-red-default));\n --badge-text-color: rgb(var(--color-white));\n\n --dock-item-height: 2.75rem;\n --limel-dock-padding: 0.25rem;\n --dock-expand-shrink-button-height: 1rem;\n\n --limel-dock-item-text-color: var(\n --dock-item-text-color,\n rgb(var(--contrast-1100))\n );\n --limel-dock-item-text-color--selected: var(\n --dock-item-text-color--selected,\n rgb(var(--contrast-1300))\n );\n\n isolation: isolate;\n position: relative;\n\n display: inline-flex;\n flex-direction: column;\n\n background-color: var(--dock-background-color, rgb(var(--contrast-100)));\n box-shadow: var(--shadow-depth-8);\n\n padding-top: var(--dock-padding-top);\n padding-right: var(--dock-padding-right);\n padding-bottom: var(--dock-padding-bottom);\n padding-left: var(--dock-padding-left);\n}\n\n:host(limel-dock:not(.has-mobile-layout)) {\n height: 100%;\n width: calc((var(--limel-dock-padding) 2) + var(--dock-item-height));\n nav {\n padding-bottom: calc((var(--limel-dock-padding) + 0.25rem));\n }\n}\n\n:host(limel-dock.expanded) {\n width: var(--dock-expanded-max-width, max-content);\n}\n\n.footer-separator {\n margin-top: auto;\n justify-self: flex-end;\n}\n\nnav {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: column;\n gap: functions.pxToRem(6);\n flex-grow: 1;\n\n padding: var(--limel-dock-padding); // needed for the focus effect\n\n overflow-y: auto;\n scrollbar-width: none; // This hides the scrollbars appearing under in Firefox\n -ms-overflow-style: none; // Same as above for IE 11\n &::-webkit-scrollbar {\n display: none; // This hides the scrollbars appearing under in Chrome\n }\n\n :host(limel-dock.has-mobile-layout) & {\n justify-content: space-between;\n flex-direction: row;\n }\n}\n\n// 👇 Below is a hidden and private prop\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.\nlimel-dock-button {\n &:first-of-type {\n // `--crm-custom-home-icon-enabler`: in the CRM must be set to `''`\n --limel-custom-home-icon-enabler: var(--crm-custom-home-icon-enabler);\n // `--crm-custom-home-icon` in the CRM must be set to a url to an image file, or an SVG code\n --limel-custom-home-icon: var(--crm-custom-home-icon);\n }\n}\n\n@import './partial-styles/shrink-expand-button';\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { DockItem } from './dock.types';\n\nconst DEFAULT_MOBILE_BREAKPOINT = 700;\n\n/*\n @exampleComponent limel-example-dock-basic\n * @exampleComponent limel-example-dock-custom-component\n * @exampleComponent limel-example-dock-notification\n * @exampleComponent limel-example-dock-mobile\n * @exampleComponent limel-example-dock-expanded\n * @exampleComponent limel-example-dock-colors-css\n /\n@Component({\n tag: 'limel-dock',\n shadow: true,\n styleUrl: 'dock.scss',\n})\nexport class Dock {\n /\n Items that are placed in the dock.\n /\n @Prop()\n public dockItems: DockItem[] = [];\n\n /\n Items that are placed at the bottom of the dock. (Or at the end in mobile\n * layout.)\n /\n @Prop()\n public dockFooterItems?: DockItem[] = [];\n\n /\n A label used to describe the purpose of the navigation element to users\n * of assistive technologies, like screen readers. Especially useful when\n * there are multiple navigation elements in the user interface.\n * Example value: \"Primary navigation\"\n /\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /\n Defines the width of the component, when it loads.\n * - `true`: shows both icons and labels of the Dock items.\n * - `false`: only shows icons of the doc items, and displays\n * their labels as tooltip.\n \n Note: when `useMobileLayout` is `true`, labels will always\n * be shown as tooltips. Read more below…\n /\n @Prop({ reflect: true })\n public expanded? = false;\n\n /\n Set to `false` if you do not want to allow end-users\n * to exapnd or shrink the Dock. This will hide the\n * expand/shrink button, and the only things that defines\n * the layout will be the `expanded` property, and\n * the `mobileBreakPoint`.\n /\n @Prop({ reflect: true })\n public allowResize? = true;\n\n /\n Defines the breakpoint in pixles, at which the component will be rendered\n * in a hoizontal layout. Default breakpoint is `700` pixels, which means\n * when the screen size is smaller than `700px`, the component will automatically\n * switch to a horizontal layout.\n /\n @Prop({ reflect: true })\n public mobileBreakPoint?: number = DEFAULT_MOBILE_BREAKPOINT;\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 Fired when the popover is closed.\n /\n @Event()\n public close: EventEmitter<void>;\n\n /\n Fired when a Dock is expanded or collapsed.\n /\n @Event()\n private dockExpanded: EventEmitter<boolean>;\n\n /\n Is used to render the component horizontally, and place\n * the Dock items in a row.\n */\n @State()\n private useMobileLayout = false;\n\n private resizeObserver: ResizeObserver;\n\n public componentDidLoad() {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(document.body);\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n public render() {\n return (\n <Host\n class={{\n dock: true,\n expanded: this.expanded,\n 'has-mobile-layout': this.useMobileLayout,\n }}\n >\n <nav aria-label={this.accessibleLabel}>\n {this.dockItems.map(this.renderDockItem)}\n {this.renderSeparator()}\n {this.dockFooterItems.map(this.renderDockItem)}\n </nav>\n {this.renderExpandShrinkToggle()}\n </Host>\n );\n }\n\n private renderSeparator = () => {\n return this.useMobileLayout ? null : <span class=\"footer-separator\" />;\n };\n\n private renderDockItem = (item: DockItem) => {\n return (\n <limel-dock-button\n class={{\n 'dock-item': true,\n selected: item.selected,\n }}\n item={item}\n expanded={this.expanded && !this.useMobileLayout}\n useMobileLayout={this.useMobileLayout}\n />\n );\n };\n\n private handleResize = () => {\n if (window.innerWidth <= this.mobileBreakPoint) {\n this.useMobileLayout = true;\n } else {\n this.useMobileLayout = false;\n }\n };\n\n private renderExpandShrinkToggle() {\n if (this.useMobileLayout \|\| !this.allowResize) {\n return;\n }\n\n return (\n <button\n class={{\n 'expand-shrink': true,\n expanded: this.expanded,\n }}\n onClick={this.toggleDockWidth}\n >\n <limel-icon name=\"angle_right\" />\n </button>\n );\n }\n\n private toggleDockWidth = () => {\n this.expanded = !this.expanded;\n this.dockExpanded.emit(this.expanded);\n };\n}\n"],"version":3}
1	+ {"file":"limel-dock.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,+sGAA+sG;;ACW/tG,MAAM,yBAAyB,GAAG,GAAG,CAAC;MAezB,IAAI;;;;;;;IAmHL,oBAAe,GAAG;MACtB,OAAO,IAAI,CAAC,eAAe,GAAG,IAAI,GAAG,YAAM,KAAK,EAAC,kBAAkB,GAAG,CAAC;KAC1E,CAAC;IAEM,mBAAc,GAAG,CAAC,IAAc;MACpC,QACI,yBACI,KAAK,EAAE;UACH,WAAW,EAAE,IAAI;UACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,EACD,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe,EAChD,eAAe,EAAE,IAAI,CAAC,eAAe,GACvC,EACJ;KACL,CAAC;IAEM,iBAAY,GAAG;MACnB,IAAI,MAAM,CAAC,UAAU,IAAI,IAAI,CAAC,gBAAgB,EAAE;QAC5C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;OAC/B;WAAM;QACH,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;OAChC;KACJ,CAAC;IAoBM,oBAAe,GAAG;MACtB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;MAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACzC,CAAC;qBA7J6B,EAAE;2BAOK,EAAE;;oBAqBrB,KAAK;uBAUF,IAAI;4BASS,yBAAyB;2BA+BlC,KAAK;;EAIxB,gBAAgB;IACnB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;GAC9C;EAED,oBAAoB;IAChB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;GACpC;EAEM,MAAM;IACT,QACI,EAAC,IAAI,IACD,KAAK,EAAE;QACH,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,mBAAmB,EAAE,IAAI,CAAC,eAAe;OAC5C,IAED,yBAAiB,IAAI,CAAC,eAAe,IAChC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,EACvC,IAAI,CAAC,eAAe,EAAE,EACtB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAC5C,EACL,IAAI,CAAC,wBAAwB,EAAE,CAC7B,EACT;GACL;EA4BO,wBAAwB;IAC5B,IAAI,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MAC3C,OAAO;KACV;IAED,QACI,cACI,KAAK,EAAE;QACH,eAAe,EAAE,IAAI;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OAC1B,EACD,OAAO,EAAE,IAAI,CAAC,eAAe,IAE7B,kBAAY,IAAI,EAAC,aAAa,GAAG,CAC5B,EACX;GACL;;;;;;","names":[],"sources":["./src/components/dock/dock.scss?tag=limel-dock&encapsulation=shadow","./src/components/dock/dock.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/functions';\n@use '../../style/internal/variables';\n\n/*\n @prop --dock-expanded-max-width: The maximum width of the Dock when it is expanded. Defaults to `max-content` which means the Dock will adjust its width to the widest dock item.\n* @prop --dock-background-color: Background color of the whole component, defaults to `--contrast-100`.\n* @prop --dock-item-background-color--selected: Background color of selected dock item, defaults to `--contrast-200`.\n* @prop --dock-item-text-color: Text of dock items, defaults to `--contrast-1100`.\n* @prop --dock-item-text-color--selected: Text color of selected dock item, defaults to `--contrast-1300`.\n* @prop --dock-item-icon-color: Color of the optional icons used in each dock item. Only affects inactive dock items, defaults to text colors for default or selected states.\n* @prop --dock-padding-top: Space of top side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-top)`.\n* @prop --dock-padding-right: Space of the right side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-right)`.\n* @prop --dock-padding-bottom: Space of the bottom side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-bottom)`.\n* @prop --dock-padding-left: Space of the left side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-left)`.\n* @prop --popover-surface-width: Defines the width of the popover that is opened for dock items with custom components. Defaults to `auto`.\n/\n\n:host(limel-dock) {\n --badge-background-color: rgb(var(--color-red-default));\n --badge-text-color: rgb(var(--color-white));\n\n --dock-item-height: 2.75rem;\n --limel-dock-padding: 0.25rem;\n --dock-expand-shrink-button-height: 1rem;\n\n --limel-dock-item-text-color: var(\n --dock-item-text-color,\n rgb(var(--contrast-1100))\n );\n --limel-dock-item-text-color--selected: var(\n --dock-item-text-color--selected,\n rgb(var(--contrast-1300))\n );\n\n isolation: isolate;\n position: relative;\n\n display: inline-flex;\n flex-direction: column;\n\n background-color: var(--dock-background-color, rgb(var(--contrast-100)));\n box-shadow: var(--shadow-depth-8);\n\n padding-top: var(--dock-padding-top);\n padding-right: var(--dock-padding-right);\n padding-bottom: var(--dock-padding-bottom);\n padding-left: var(--dock-padding-left);\n}\n\n:host(limel-dock:not(.has-mobile-layout)) {\n height: 100%;\n width: calc((var(--limel-dock-padding) 2) + var(--dock-item-height));\n nav {\n padding-bottom: calc((var(--limel-dock-padding) + 0.25rem));\n }\n}\n\n:host(limel-dock.expanded) {\n width: var(--dock-expanded-max-width, max-content);\n}\n\n.footer-separator {\n margin-top: auto;\n justify-self: flex-end;\n}\n\nnav {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: column;\n gap: functions.pxToRem(6);\n flex-grow: 1;\n\n padding: var(--limel-dock-padding); // needed for the focus effect\n\n overflow-y: auto;\n scrollbar-width: none; // This hides the scrollbars appearing under in Firefox\n -ms-overflow-style: none; // Same as above for IE 11\n &::-webkit-scrollbar {\n display: none; // This hides the scrollbars appearing under in Chrome\n }\n\n :host(limel-dock.has-mobile-layout) & {\n justify-content: space-between;\n flex-direction: row;\n }\n}\n\n// 👇 Below is a hidden and private prop\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.\nlimel-dock-button {\n &:first-of-type {\n // `--crm-custom-home-icon-enabler`: in the CRM must be set to `''`\n --limel-custom-home-icon-enabler: var(--crm-custom-home-icon-enabler);\n // `--crm-custom-home-icon` in the CRM must be set to a url to an image file, or an SVG code\n --limel-custom-home-icon: var(--crm-custom-home-icon);\n }\n}\n\n@import './partial-styles/shrink-expand-button';\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { DockItem } from './dock.types';\n\nconst DEFAULT_MOBILE_BREAKPOINT = 700;\n\n/*\n @exampleComponent limel-example-dock-basic\n * @exampleComponent limel-example-dock-custom-component\n * @exampleComponent limel-example-dock-notification\n * @exampleComponent limel-example-dock-mobile\n * @exampleComponent limel-example-dock-expanded\n * @exampleComponent limel-example-dock-colors-css\n /\n@Component({\n tag: 'limel-dock',\n shadow: true,\n styleUrl: 'dock.scss',\n})\nexport class Dock {\n /\n Items that are placed in the dock.\n /\n @Prop()\n public dockItems: DockItem[] = [];\n\n /\n Items that are placed at the bottom of the dock. (Or at the end in mobile\n * layout.)\n /\n @Prop()\n public dockFooterItems?: DockItem[] = [];\n\n /\n A label used to describe the purpose of the navigation element to users\n * of assistive technologies, like screen readers. Especially useful when\n * there are multiple navigation elements in the user interface.\n * Example value: \"Primary navigation\"\n /\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /\n Defines the width of the component, when it loads.\n * - `true`: shows both icons and labels of the Dock items.\n * - `false`: only shows icons of the doc items, and displays\n * their labels as tooltip.\n \n Note: when `useMobileLayout` is `true`, labels will always\n * be shown as tooltips. Read more below…\n /\n @Prop({ reflect: true })\n public expanded? = false;\n\n /\n Set to `false` if you do not want to allow end-users\n * to exapnd or shrink the Dock. This will hide the\n * expand/shrink button, and the only things that defines\n * the layout will be the `expanded` property, and\n * the `mobileBreakPoint`.\n /\n @Prop({ reflect: true })\n public allowResize? = true;\n\n /\n Defines the breakpoint in pixles, at which the component will be rendered\n * in a hoizontal layout. Default breakpoint is `700` pixels, which means\n * when the screen size is smaller than `700px`, the component will automatically\n * switch to a horizontal layout.\n /\n @Prop({ reflect: true })\n public mobileBreakPoint?: number = DEFAULT_MOBILE_BREAKPOINT;\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 Fired when the popover is closed.\n /\n @Event()\n public close: EventEmitter<void>;\n\n /\n Fired when a Dock is expanded or collapsed.\n /\n @Event()\n private dockExpanded: EventEmitter<boolean>;\n\n /\n Is used to render the component horizontally, and place\n * the Dock items in a row.\n */\n @State()\n private useMobileLayout = false;\n\n private resizeObserver: ResizeObserver;\n\n public componentDidLoad() {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(document.body);\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n public render() {\n return (\n <Host\n class={{\n dock: true,\n expanded: this.expanded,\n 'has-mobile-layout': this.useMobileLayout,\n }}\n >\n <nav aria-label={this.accessibleLabel}>\n {this.dockItems.map(this.renderDockItem)}\n {this.renderSeparator()}\n {this.dockFooterItems.map(this.renderDockItem)}\n </nav>\n {this.renderExpandShrinkToggle()}\n </Host>\n );\n }\n\n private renderSeparator = () => {\n return this.useMobileLayout ? null : <span class=\"footer-separator\" />;\n };\n\n private renderDockItem = (item: DockItem) => {\n return (\n <limel-dock-button\n class={{\n 'dock-item': true,\n selected: item.selected,\n }}\n item={item}\n expanded={this.expanded && !this.useMobileLayout}\n useMobileLayout={this.useMobileLayout}\n />\n );\n };\n\n private handleResize = () => {\n if (window.innerWidth <= this.mobileBreakPoint) {\n this.useMobileLayout = true;\n } else {\n this.useMobileLayout = false;\n }\n };\n\n private renderExpandShrinkToggle() {\n if (this.useMobileLayout \|\| !this.allowResize) {\n return;\n }\n\n return (\n <button\n class={{\n 'expand-shrink': true,\n expanded: this.expanded,\n }}\n onClick={this.toggleDockWidth}\n >\n <limel-icon name=\"angle_right\" />\n </button>\n );\n }\n\n private toggleDockWidth = () => {\n this.expanded = !this.expanded;\n this.dockExpanded.emit(this.expanded);\n };\n}\n"],"version":3}

package/dist/esm/limel-file-viewer.entry.js CHANGED Viewed

@@ -110,7 +110,7 @@ class Fullscreen {
   }
 }
-const fileViewerCss = "@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), var(--limel-additional-clickable-transition-properties);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 fileViewerCss = "@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 FileViewer = class {
   constructor(hostRef) {

package/dist/esm/limel-file-viewer.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-file-viewer.entry.js","mappings":"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","names":[],"sources":["./src/components/file-viewer/extension-mapping.tsx","./src/components/file-viewer/fullscreen.ts","./src/components/file-viewer/file-viewer.scss?tag=limel-file-viewer&encapsulation=shadow","./src/components/file-viewer/file-viewer.tsx"],"sourcesContent":["export function detectExtension(fileName, url): any {\n const pathLike = fileName \|\| url;\n if (!pathLike) {\n return 'unknown';\n }\n\n const extension = pathLike.split('.').pop().toLowerCase();\n const extensionsToTypes = {\n pdf: 'pdf',\n jpg: 'image',\n jpeg: 'image',\n heic: 'image',\n bmp: 'image',\n png: 'image',\n gif: 'image',\n svg: 'image',\n svgz: 'image',\n ep: 'image',\n eps: 'image',\n avi: 'video',\n flv: 'video',\n h264: 'video',\n mov: 'video',\n mp4: 'video',\n mwv: 'video',\n mkv: 'video',\n mp3: 'audio',\n wav: 'audio',\n wma: 'audio',\n ogg: 'audio',\n txt: 'text',\n json: 'text',\n html: 'text',\n xml: 'text',\n // Word\n doc: 'office',\n docx: 'office',\n odt: 'office',\n dot: 'office',\n dotx: 'office',\n docm: 'office', // not supported\n dotm: 'office', // not yet tested\n // Presentation\n pot: 'office', // not tested\n ppt: 'office',\n pptx: 'office',\n odp: 'office',\n potx: 'office', // not supported\n potm: 'office', // not supported\n pps: 'office',\n ppsx: 'office',\n ppsm: 'office', // not supported\n pptm: 'office', // not supported\n ppam: 'office', // not tested\n pages: 'office', // not supported (Apple)\n // Spreadsheet\n xls: 'office',\n xlsx: 'office',\n xlsm: 'office',\n xlsb: 'office',\n ods: 'office',\n csv: 'office', // not supported\n numbers: 'office', // not supported (Apple)\n };\n\n return extensionsToTypes[extension] \|\| 'unknown';\n}\n","export class Fullscreen {\n private enter: () => void;\n private exit: () => void;\n\n constructor(element: any) {\n this.enter =\n element.requestFullscreen \|\|\n element.msRequestFullscreen \|\|\n element.mozRequestFullScreen \|\|\n element.webkitRequestFullscreen;\n this.enter = this.enter.bind(element);\n const doc: any = window.document;\n this.exit =\n doc.exitFullscreen \|\|\n doc.msExitFullscreen \|\|\n doc.mozCancelFullScreen \|\|\n doc.webkitExitFullscreen;\n }\n\n public requestFullscreen = () => {\n if (this.enter) {\n this.enter();\n }\n };\n\n public exitFullscreen = () => {\n if (this.exit) {\n this.exit.bind(window.document)();\n }\n };\n\n public toggle = () => {\n const doc: any = window.document;\n const isFullscreen =\n doc.fullscreenElement \|\|\n doc.mozFullScreenElement \|\|\n doc.webkitFullscreenElement \|\|\n doc.msFullscreenElement;\n\n if (isFullscreen) {\n this.exitFullscreen();\n } else {\n this.requestFullscreen();\n }\n };\n\n public isSupported(): boolean {\n return !!this.requestFullscreen;\n }\n}\n","@use '../../style/internal/variables';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n$size-of-buttons: 2rem;\n\n:host {\n isolation: isolate;\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n* {\n box-sizing: border-box;\n}\n\nimg,\nvideo,\naudio,\nobject,\niframe {\n max-height: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\niframe {\n border: none;\n width: 100%;\n height: 100%;\n min-height: 20rem; // makes sure to get minimum comfortable space for viewing office files, and Microsoft Office viewers toolbars\n}\n\nimg {\n min-width: 7rem;\n object-fit: contain; // increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.\n}\n\nvideo {\n width: 100%;\n height: auto;\n}\n\naudio {\n width: 100%;\n}\n\nobject {\n width: 100%;\n height: 100%;\n}\n\nobject[type='application/pdf'] {\n min-height: 20rem;\n // makes sure to get browsers' native controls for the PDF\n}\n\nobject[type='text/plain'] {\n border-radius: 0.25rem;\n padding-right: $size-of-buttons;\n\n overflow-y: auto;\n}\n\n@mixin plain-text-in-fullscreen {\n background-color: rgb(var(--color-gray-darker));\n\n object[type='text/plain'] {\n max-width: 50rem;\n max-height: calc(100% - 2rem);\n }\n}\n\n:host(:fullscreen) {\n @include plain-text-in-fullscreen;\n}\n:host(:-webkit-full-screen) {\n // this is repetition of the previous block,\n // but needed for Safari to work.\n // Cannot write SCSS rules for `:host` using commas for some reason.\n // e.g.: `:host(:fullscreen), :host(:-webkit-full-screen)`.\n // So you have to repeat it sadly.\n @include plain-text-in-fullscreen;\n}\n\n@import './partial-styles/ui-controls.scss';\n","import {\n Component,\n Element,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport { ListItem } from '../list/list-item.types';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\nimport { LimelMenuCustomEvent } from '../../components';\n\n/*\n This is a smart component that automatically detects\n * the most common file types such as image, audio, video, and text,\n * and properly displays them in the browser.\n * The component is also capable to render the most common office files.\n \n :::note\n * Image files will always be contained in their containers, which means\n * they automatically increase or decrease in size to fill their containing box\n * whilst preserving their aspect-ratio.\n \n Text and PDF files will also always respect the width and height of the\n * container in which the `limel-file-viewer` is loaded.\n * :::\n \n For some file types such as text and images, the component will display a\n * download button and a button to open the file in a new browser tab.\n * This will allow users to preview the file in a fullscreen mode with the\n * browser and take advantage of for example native zooming and panning\n * functionalities.\n \n @exampleComponent limel-example-file-viewer-basic\n * @exampleComponent limel-example-file-viewer-office\n * @exampleComponent limel-example-file-viewer-filename\n * @exampleComponent limel-example-file-viewer-inbuilt-actions\n * @exampleComponent limel-example-file-viewer-custom-actions\n * @exampleComponent limel-example-file-viewer-with-picker\n \n @beta\n /\n\n@Component({\n tag: 'limel-file-viewer',\n shadow: true,\n styleUrl: 'file-viewer.scss',\n})\nexport class FileViewer {\n /\n Link to the file\n /\n @Prop({ reflect: true })\n public url: string;\n\n /\n The name of the file that must also contains its extension.\n * This overrides the filename that the `url` ends with.\n * Useful when the `url` does not contain the filename.\n * When specified, the `filename` will be used as filename of\n * the downloaded file.\n /\n @Prop({ reflect: true })\n public filename?: string;\n\n /\n An optional alternative text, mainly for assistive technologies and screen readers.\n * It is used for only image files, as an `alt` attribute.\n * Should optimally hold a description of the image,\n * which is also displayed on the page if the image can't be loaded for some reason.\n /\n @Prop({ reflect: true })\n public alt?: string;\n\n /\n Displays a button that allows the user to view the file\n * in fullscreen mode.\n * Not displayed for office files!\n /\n @Prop({ reflect: true })\n public allowFullscreen?: boolean = false;\n\n /\n Displays a button that allows the user to open the file\n * in a new browser tab.\n * Not displayed for office files!\n /\n @Prop({ reflect: true })\n public allowOpenInNewTab?: boolean = false;\n\n /\n Displays a button that allows the user to download the file.\n * Note that due to the browser's security policies,\n * the file should be hosted on the same domain\n * for the download button to work properly.\n * Not displayed for office files!\n /\n @Prop({ reflect: true })\n public allowDownload?: boolean = false;\n\n /\n Defines the localization for translations.\n /\n @Prop()\n public language: Languages = 'en';\n\n /\n Defines the third-party viewer that should be used to render\n * the content of office files, such as word processing documents,\n * presentations, or spreadsheets.\n /\n @Prop({ reflect: true })\n public officeViewer: OfficeViewer = 'microsoft-office';\n\n /\n An array of custom actions that can be displayed\n * as an action menu on the file which is being displayed.\n /\n @Prop()\n public actions: ListItem[];\n\n /\n Emitted when a custom action is selected from the action menu.\n /\n @Event()\n public action: EventEmitter<ListItem>;\n\n @Element()\n public HostElement: HTMLLimelFileViewerElement;\n\n private fullscreen: Fullscreen;\n\n @State()\n private isFullscreen: boolean = false;\n\n @State()\n private fileType: FileType;\n\n /\n True while the file is being loaded.\n */\n @State()\n private loading: boolean = true;\n\n @State()\n private fileUrl: string = '';\n\n constructor() {\n this.fullscreen = new Fullscreen(this.HostElement);\n }\n\n public async componentWillLoad() {\n this.fileType = detectExtension(this.filename, this.url);\n await this.createURL(this.fileType);\n }\n\n public render() {\n if (!this.isOfficeFileAccessibleViaURL) {\n return this.renderNoFileSupportMessage();\n }\n\n if (this.loading) {\n return <limel-spinner size=\"x-small\" limeBranded={false} />;\n }\n\n return this.renderFileViewer();\n }\n\n @Watch('url')\n protected async watchUrl(newUrl: string, oldUrl: string) {\n if (newUrl === oldUrl) {\n return;\n }\n\n this.loading = true;\n this.fileType = detectExtension(this.filename, this.fileUrl);\n await this.createURL(this.fileType);\n }\n\n private renderFileViewer() {\n const fileViewerFunctions = {\n pdf: this.renderPdf,\n image: this.renderImage,\n video: this.renderVideo,\n audio: this.renderAudio,\n text: this.renderText,\n office: this.renderOffice,\n };\n const fileViewerFunction =\n fileViewerFunctions[this.fileType] \|\|\n this.renderNoFileSupportMessage;\n\n return fileViewerFunction();\n }\n\n private renderPdf = () => {\n return [\n <div class=\"action-menu-for-pdf-files\">\n {this.renderActionMenu()}\n </div>,\n <iframe src={this.fileUrl} loading=\"lazy\" />,\n ];\n };\n\n private renderImage = () => {\n return [\n this.renderButtons(),\n <img src={this.fileUrl} alt={this.alt} loading=\"lazy\" />,\n ];\n };\n\n private renderVideo = () => {\n return (\n <video controls>\n <source src={this.fileUrl} />\n </video>\n );\n };\n\n private renderAudio = () => {\n return (\n <audio controls>\n <source src={this.fileUrl} />\n </audio>\n );\n };\n\n private renderText = () => {\n return [\n this.renderButtons(),\n <object data={this.fileUrl} type=\"text/plain\">\n {`Text content from: ${this.filename \|\| this.url}`}\n <a\n href={this.fileUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Open text file in new tab\n </a>\n </object>,\n ];\n };\n\n private renderOffice = () => {\n return [\n <div class=\"action-menu-for-office-files\">\n {this.renderActionMenu()}\n </div>,\n <iframe\n src={\n this.getOfficeViewerUrl() + this.fileUrl + '&embedded=true'\n }\n loading=\"lazy\"\n />,\n ];\n };\n\n private isOfficeFileAccessibleViaURL = () => {\n return (\n this.fileType === 'office' &&\n !(\n this.fileUrl.startsWith('http://') \|\|\n this.fileUrl.startsWith('https://')\n )\n );\n };\n\n private getOfficeViewerUrl = () => {\n const officeViewers = {\n 'microsoft-office':\n 'https://view.officeapps.live.com/op/embed.aspx?src=',\n 'google-drive': 'https://docs.google.com/gview?url=',\n };\n\n return officeViewers[this.officeViewer];\n };\n\n private renderNoFileSupportMessage = () => {\n return (\n <div class=\"no-support\" role=\"alert\">\n <limel-icon\n class=\"icon--warning\"\n name=\"brake_warning\"\n size=\"large\"\n role=\"presentation\"\n />\n <p>{this.getTranslation('message.unsupported-filetype')}</p>\n {this.renderDownloadButton()}\n </div>\n );\n };\n\n private renderButtons = () => {\n return (\n <div class=\"buttons\">\n {this.renderActionMenu()}\n {this.renderToggleFullscreenButton()}\n {this.renderDownloadButton()}\n {this.renderOpenInNewTabButton()}\n </div>\n );\n };\n\n private renderToggleFullscreenButton = () => {\n if (!this.allowFullscreen \|\| !this.fullscreen.isSupported()) {\n return;\n }\n\n const icon = this.isFullscreen ? 'multiply' : 'fit_to_width';\n // eslint-disable-next-line multiline-ternary\n const label = this.isFullscreen\n ? // eslint-disable-next-line multiline-ternary\n this.getTranslation('exit-fullscreen')\n : this.getTranslation('open-in-fullscreen');\n\n return [\n <button\n class=\"button--toggle-fullscreen\"\n id=\"tooltip-toggle-fullscreen\"\n role=\"button\"\n onClick={this.handleToggleFullscreen}\n >\n <limel-icon name={icon} />\n <limel-tooltip\n label={label}\n elementId=\"tooltip-toggle-fullscreen\"\n openDirection=\"left\"\n />\n </button>,\n ];\n };\n\n private renderDownloadButton = () => {\n if (!this.allowDownload \|\| this.isFullscreen) {\n return;\n }\n\n return (\n <a\n class=\"button--download\"\n id=\"tooltip-download\"\n role=\"button\"\n download={this.filename ? this.filename : ''}\n href={this.fileUrl}\n target=\"_blank\"\n >\n <limel-icon name=\"download_2\" />\n <limel-tooltip\n label={this.getTranslation('download')}\n elementId=\"tooltip-download\"\n openDirection=\"left\"\n />\n </a>\n );\n };\n\n private renderOpenInNewTabButton = () => {\n if (!this.allowOpenInNewTab \|\| this.isFullscreen) {\n return;\n }\n\n return (\n <a\n class=\"button--new-tab\"\n id=\"tooltip-new-tab\"\n role=\"button\"\n href={this.fileUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <limel-icon name=\"external_link\" />\n <limel-tooltip\n label={this.getTranslation('open-in-new-tab')}\n elementId=\"tooltip-new-tab\"\n openDirection=\"left\"\n />\n </a>\n );\n };\n\n private renderActionMenu = () => {\n if (!this.actions \|\| this.isFullscreen) {\n return;\n }\n\n return (\n <limel-menu\n class=\"action-menu\"\n items={this.actions}\n onSelect={this.emitOnAction}\n open-direction=\"left\"\n >\n <button\n class=\"button--action\"\n id=\"tooltip-more\"\n role=\"button\"\n slot=\"trigger\"\n >\n <limel-icon name=\"menu_2\" />\n <limel-tooltip\n label={this.getTranslation('more-actions')}\n elementId=\"tooltip-more\"\n openDirection=\"left\"\n />\n </button>\n </limel-menu>\n );\n };\n\n private createURL = async (fileType: string) => {\n if (['pdf'].includes(fileType)) {\n const response = await fetch(this.url);\n const blob = await response.blob();\n\n this.fileUrl = URL.createObjectURL(blob);\n } else {\n this.fileUrl = this.url;\n }\n\n this.loading = false;\n };\n\n private handleToggleFullscreen = () => {\n if (this.fullscreen.isSupported()) {\n this.fullscreen.toggle();\n this.isFullscreen = !this.isFullscreen;\n }\n };\n\n private emitOnAction = (event: LimelMenuCustomEvent<ListItem>) => {\n event.stopPropagation();\n this.action.emit(event.detail);\n };\n\n private getTranslation(key: string) {\n return translate.get(`file-viewer.${key}`, this.language);\n }\n}\n"],"version":3}
1	+ {"file":"limel-file-viewer.entry.js","mappings":";;;SAAgB,eAAe,CAAC,QAAQ,EAAE,GAAG;EACzC,MAAM,QAAQ,GAAG,QAAQ,IAAI,GAAG,CAAC;EACjC,IAAI,CAAC,QAAQ,EAAE;IACX,OAAO,SAAS,CAAC;GACpB;EAED,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC;EAC1D,MAAM,iBAAiB,GAAG;IACtB,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,OAAO;IACZ,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,OAAO;IACb,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,IAAI,EAAE,OAAO;IACb,EAAE,EAAE,OAAO;IACX,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,IAAI,EAAE,OAAO;IACb,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,MAAM;IACX,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,MAAM;;IAEX,GAAG,EAAE,QAAQ;IACb,IAAI,EAAE,QAAQ;IACd,GAAG,EAAE,QAAQ;IACb,GAAG,EAAE,QAAQ;IACb,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,QAAQ;;IAEd,GAAG,EAAE,QAAQ;IACb,GAAG,EAAE,QAAQ;IACb,IAAI,EAAE,QAAQ;IACd,GAAG,EAAE,QAAQ;IACb,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,QAAQ;IACd,GAAG,EAAE,QAAQ;IACb,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,QAAQ;;IAEf,GAAG,EAAE,QAAQ;IACb,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,QAAQ;IACd,GAAG,EAAE,QAAQ;IACb,GAAG,EAAE,QAAQ;IACb,OAAO,EAAE,QAAQ;GACpB,CAAC;EAEF,OAAO,iBAAiB,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC;AACrD;;MClEa,UAAU;EAInB,YAAY,OAAY;IAejB,sBAAiB,GAAG;MACvB,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,IAAI,CAAC,KAAK,EAAE,CAAC;OAChB;KACJ,CAAC;IAEK,mBAAc,GAAG;MACpB,IAAI,IAAI,CAAC,IAAI,EAAE;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC;OACrC;KACJ,CAAC;IAEK,WAAM,GAAG;MACZ,MAAM,GAAG,GAAQ,MAAM,CAAC,QAAQ,CAAC;MACjC,MAAM,YAAY,GACd,GAAG,CAAC,iBAAiB;QACrB,GAAG,CAAC,oBAAoB;QACxB,GAAG,CAAC,uBAAuB;QAC3B,GAAG,CAAC,mBAAmB,CAAC;MAE5B,IAAI,YAAY,EAAE;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;OACzB;WAAM;QACH,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC5B;KACJ,CAAC;IAvCE,IAAI,CAAC,KAAK;MACN,OAAO,CAAC,iBAAiB;QACzB,OAAO,CAAC,mBAAmB;QAC3B,OAAO,CAAC,oBAAoB;QAC5B,OAAO,CAAC,uBAAuB,CAAC;IACpC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,GAAG,GAAQ,MAAM,CAAC,QAAQ,CAAC;IACjC,IAAI,CAAC,IAAI;MACL,GAAG,CAAC,cAAc;QAClB,GAAG,CAAC,gBAAgB;QACpB,GAAG,CAAC,mBAAmB;QACvB,GAAG,CAAC,oBAAoB,CAAC;GAChC;EA6BM,WAAW;IACd,OAAO,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC;GACnC;;;AChDL,MAAM,aAAa,GAAG,ysIAAysI;;MCsDltI,UAAU;EAmGnB;;;IAgDQ,cAAS,GAAG;MAChB,OAAO;QACH,WAAK,KAAK,EAAC,2BAA2B,IACjC,IAAI,CAAC,gBAAgB,EAAE,CACtB;QACN,cAAQ,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAC,MAAM,GAAG;OAC/C,CAAC;KACL,CAAC;IAEM,gBAAW,GAAG;MAClB,OAAO;QACH,IAAI,CAAC,aAAa,EAAE;QACpB,WAAK,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAC,MAAM,GAAG;OAC3D,CAAC;KACL,CAAC;IAEM,gBAAW,GAAG;MAClB,QACI,aAAO,QAAQ,UACX,cAAQ,GAAG,EAAE,IAAI,CAAC,OAAO,GAAI,CACzB,EACV;KACL,CAAC;IAEM,gBAAW,GAAG;MAClB,QACI,aAAO,QAAQ,UACX,cAAQ,GAAG,EAAE,IAAI,CAAC,OAAO,GAAI,CACzB,EACV;KACL,CAAC;IAEM,eAAU,GAAG;MACjB,OAAO;QACH,IAAI,CAAC,aAAa,EAAE;QACpB,cAAQ,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,YAAY,IACxC,sBAAsB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,GAAG,EAAE,EAClD,SACI,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,gCAGzB,CACC;OACZ,CAAC;KACL,CAAC;IAEM,iBAAY,GAAG;MACnB,OAAO;QACH,WAAK,KAAK,EAAC,8BAA8B,IACpC,IAAI,CAAC,gBAAgB,EAAE,CACtB;QACN,cACI,GAAG,EACC,IAAI,CAAC,kBAAkB,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG,gBAAgB,EAE/D,OAAO,EAAC,MAAM,GAChB;OACL,CAAC;KACL,CAAC;IAEM,iCAA4B,GAAG;MACnC,QACI,IAAI,CAAC,QAAQ,KAAK,QAAQ;QAC1B,EACI,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,SAAS,CAAC;UAClC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,UAAU,CAAC,CACtC,EACH;KACL,CAAC;IAEM,uBAAkB,GAAG;MACzB,MAAM,aAAa,GAAG;QAClB,kBAAkB,EACd,qDAAqD;QACzD,cAAc,EAAE,oCAAoC;OACvD,CAAC;MAEF,OAAO,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC3C,CAAC;IAEM,+BAA0B,GAAG;MACjC,QACI,WAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,IAChC,kBACI,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,eAAe,EACpB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,cAAc,GACrB,EACF,aAAI,IAAI,CAAC,cAAc,CAAC,8BAA8B,CAAC,CAAK,EAC3D,IAAI,CAAC,oBAAoB,EAAE,CAC1B,EACR;KACL,CAAC;IAEM,kBAAa,GAAG;MACpB,QACI,WAAK,KAAK,EAAC,SAAS,IACf,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,4BAA4B,EAAE,EACnC,IAAI,CAAC,oBAAoB,EAAE,EAC3B,IAAI,CAAC,wBAAwB,EAAE,CAC9B,EACR;KACL,CAAC;IAEM,iCAA4B,GAAG;MACnC,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,EAAE;QACzD,OAAO;OACV;MAED,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,GAAG,UAAU,GAAG,cAAc,CAAC;;MAE7D,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY;;UAEzB,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC;UACtC,IAAI,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;MAEhD,OAAO;QACH,cACI,KAAK,EAAC,2BAA2B,EACjC,EAAE,EAAC,2BAA2B,EAC9B,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAEpC,kBAAY,IAAI,EAAE,IAAI,GAAI,EAC1B,qBACI,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,2BAA2B,EACrC,aAAa,EAAC,MAAM,GACtB,CACG;OACZ,CAAC;KACL,CAAC;IAEM,yBAAoB,GAAG;MAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,YAAY,EAAE;QAC1C,OAAO;OACV;MAED,QACI,SACI,KAAK,EAAC,kBAAkB,EACxB,EAAE,EAAC,kBAAkB,EACrB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,EAAE,EAC5C,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,MAAM,EAAC,QAAQ,IAEf,kBAAY,IAAI,EAAC,YAAY,GAAG,EAChC,qBACI,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,EACtC,SAAS,EAAC,kBAAkB,EAC5B,aAAa,EAAC,MAAM,GACtB,CACF,EACN;KACL,CAAC;IAEM,6BAAwB,GAAG;MAC/B,IAAI,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,YAAY,EAAE;QAC9C,OAAO;OACV;MAED,QACI,SACI,KAAK,EAAC,iBAAiB,EACvB,EAAE,EAAC,iBAAiB,EACpB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,IAEzB,kBAAY,IAAI,EAAC,eAAe,GAAG,EACnC,qBACI,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAC7C,SAAS,EAAC,iBAAiB,EAC3B,aAAa,EAAC,MAAM,GACtB,CACF,EACN;KACL,CAAC;IAEM,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,EAAE;QACpC,OAAO;OACV;MAED,QACI,kBACI,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,QAAQ,EAAE,IAAI,CAAC,YAAY,oBACZ,MAAM,IAErB,cACI,KAAK,EAAC,gBAAgB,EACtB,EAAE,EAAC,cAAc,EACjB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,SAAS,IAEd,kBAAY,IAAI,EAAC,QAAQ,GAAG,EAC5B,qBACI,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,SAAS,EAAC,cAAc,EACxB,aAAa,EAAC,MAAM,GACtB,CACG,CACA,EACf;KACL,CAAC;IAEM,cAAS,GAAG,OAAO,QAAgB;MACvC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QAC5B,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACvC,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAEnC,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;OAC5C;WAAM;QACH,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC;OAC3B;MAED,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACxB,CAAC;IAEM,2BAAsB,GAAG;MAC7B,IAAI,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,EAAE;QAC/B,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;QACzB,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;OAC1C;KACJ,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAqC;MACzD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;;;;2BAhWiC,KAAK;6BAQH,KAAK;yBAUT,KAAK;oBAMT,IAAI;wBAQG,kBAAkB;;wBAqBtB,KAAK;;mBASV,IAAI;mBAGL,EAAE;IAGxB,IAAI,CAAC,UAAU,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GACtD;EAEM,MAAM,iBAAiB;IAC1B,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IACzD,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACvC;EAEM,MAAM;IACT,IAAI,CAAC,IAAI,CAAC,4BAA4B,EAAE;MACpC,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAC5C;IAED,IAAI,IAAI,CAAC,OAAO,EAAE;MACd,OAAO,qBAAe,IAAI,EAAC,SAAS,EAAC,WAAW,EAAE,KAAK,GAAI,CAAC;KAC/D;IAED,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC;GAClC;EAGS,MAAM,QAAQ,CAAC,MAAc,EAAE,MAAc;IACnD,IAAI,MAAM,KAAK,MAAM,EAAE;MACnB,OAAO;KACV;IAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAC7D,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACvC;EAEO,gBAAgB;IACpB,MAAM,mBAAmB,GAAG;MACxB,GAAG,EAAE,IAAI,CAAC,SAAS;MACnB,KAAK,EAAE,IAAI,CAAC,WAAW;MACvB,KAAK,EAAE,IAAI,CAAC,WAAW;MACvB,KAAK,EAAE,IAAI,CAAC,WAAW;MACvB,IAAI,EAAE,IAAI,CAAC,UAAU;MACrB,MAAM,EAAE,IAAI,CAAC,YAAY;KAC5B,CAAC;IACF,MAAM,kBAAkB,GACpB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC;MAClC,IAAI,CAAC,0BAA0B,CAAC;IAEpC,OAAO,kBAAkB,EAAE,CAAC;GAC/B;EAiPO,cAAc,CAAC,GAAW;IAC9B,OAAO,SAAS,CAAC,GAAG,CAAC,eAAe,GAAG,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;GAC7D;;;;;;;;;;","names":[],"sources":["./src/components/file-viewer/extension-mapping.tsx","./src/components/file-viewer/fullscreen.ts","./src/components/file-viewer/file-viewer.scss?tag=limel-file-viewer&encapsulation=shadow","./src/components/file-viewer/file-viewer.tsx"],"sourcesContent":["export function detectExtension(fileName, url): any {\n const pathLike = fileName \|\| url;\n if (!pathLike) {\n return 'unknown';\n }\n\n const extension = pathLike.split('.').pop().toLowerCase();\n const extensionsToTypes = {\n pdf: 'pdf',\n jpg: 'image',\n jpeg: 'image',\n heic: 'image',\n bmp: 'image',\n png: 'image',\n gif: 'image',\n svg: 'image',\n svgz: 'image',\n ep: 'image',\n eps: 'image',\n avi: 'video',\n flv: 'video',\n h264: 'video',\n mov: 'video',\n mp4: 'video',\n mwv: 'video',\n mkv: 'video',\n mp3: 'audio',\n wav: 'audio',\n wma: 'audio',\n ogg: 'audio',\n txt: 'text',\n json: 'text',\n html: 'text',\n xml: 'text',\n // Word\n doc: 'office',\n docx: 'office',\n odt: 'office',\n dot: 'office',\n dotx: 'office',\n docm: 'office', // not supported\n dotm: 'office', // not yet tested\n // Presentation\n pot: 'office', // not tested\n ppt: 'office',\n pptx: 'office',\n odp: 'office',\n potx: 'office', // not supported\n potm: 'office', // not supported\n pps: 'office',\n ppsx: 'office',\n ppsm: 'office', // not supported\n pptm: 'office', // not supported\n ppam: 'office', // not tested\n pages: 'office', // not supported (Apple)\n // Spreadsheet\n xls: 'office',\n xlsx: 'office',\n xlsm: 'office',\n xlsb: 'office',\n ods: 'office',\n csv: 'office', // not supported\n numbers: 'office', // not supported (Apple)\n };\n\n return extensionsToTypes[extension] \|\| 'unknown';\n}\n","export class Fullscreen {\n private enter: () => void;\n private exit: () => void;\n\n constructor(element: any) {\n this.enter =\n element.requestFullscreen \|\|\n element.msRequestFullscreen \|\|\n element.mozRequestFullScreen \|\|\n element.webkitRequestFullscreen;\n this.enter = this.enter.bind(element);\n const doc: any = window.document;\n this.exit =\n doc.exitFullscreen \|\|\n doc.msExitFullscreen \|\|\n doc.mozCancelFullScreen \|\|\n doc.webkitExitFullscreen;\n }\n\n public requestFullscreen = () => {\n if (this.enter) {\n this.enter();\n }\n };\n\n public exitFullscreen = () => {\n if (this.exit) {\n this.exit.bind(window.document)();\n }\n };\n\n public toggle = () => {\n const doc: any = window.document;\n const isFullscreen =\n doc.fullscreenElement \|\|\n doc.mozFullScreenElement \|\|\n doc.webkitFullscreenElement \|\|\n doc.msFullscreenElement;\n\n if (isFullscreen) {\n this.exitFullscreen();\n } else {\n this.requestFullscreen();\n }\n };\n\n public isSupported(): boolean {\n return !!this.requestFullscreen;\n }\n}\n","@use '../../style/internal/variables';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n$size-of-buttons: 2rem;\n\n:host {\n isolation: isolate;\n position: relative;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n}\n\n* {\n box-sizing: border-box;\n}\n\nimg,\nvideo,\naudio,\nobject,\niframe {\n max-height: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\niframe {\n border: none;\n width: 100%;\n height: 100%;\n min-height: 20rem; // makes sure to get minimum comfortable space for viewing office files, and Microsoft Office viewers toolbars\n}\n\nimg {\n min-width: 7rem;\n object-fit: contain; // increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.\n}\n\nvideo {\n width: 100%;\n height: auto;\n}\n\naudio {\n width: 100%;\n}\n\nobject {\n width: 100%;\n height: 100%;\n}\n\nobject[type='application/pdf'] {\n min-height: 20rem;\n // makes sure to get browsers' native controls for the PDF\n}\n\nobject[type='text/plain'] {\n border-radius: 0.25rem;\n padding-right: $size-of-buttons;\n\n overflow-y: auto;\n}\n\n@mixin plain-text-in-fullscreen {\n background-color: rgb(var(--color-gray-darker));\n\n object[type='text/plain'] {\n max-width: 50rem;\n max-height: calc(100% - 2rem);\n }\n}\n\n:host(:fullscreen) {\n @include plain-text-in-fullscreen;\n}\n:host(:-webkit-full-screen) {\n // this is repetition of the previous block,\n // but needed for Safari to work.\n // Cannot write SCSS rules for `:host` using commas for some reason.\n // e.g.: `:host(:fullscreen), :host(:-webkit-full-screen)`.\n // So you have to repeat it sadly.\n @include plain-text-in-fullscreen;\n}\n\n@import './partial-styles/ui-controls.scss';\n","import {\n Component,\n Element,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport { ListItem } from '../list/list-item.types';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\nimport { LimelMenuCustomEvent } from '../../components';\n\n/*\n This is a smart component that automatically detects\n * the most common file types such as image, audio, video, and text,\n * and properly displays them in the browser.\n * The component is also capable to render the most common office files.\n \n :::note\n * Image files will always be contained in their containers, which means\n * they automatically increase or decrease in size to fill their containing box\n * whilst preserving their aspect-ratio.\n \n Text and PDF files will also always respect the width and height of the\n * container in which the `limel-file-viewer` is loaded.\n * :::\n \n For some file types such as text and images, the component will display a\n * download button and a button to open the file in a new browser tab.\n * This will allow users to preview the file in a fullscreen mode with the\n * browser and take advantage of for example native zooming and panning\n * functionalities.\n \n @exampleComponent limel-example-file-viewer-basic\n * @exampleComponent limel-example-file-viewer-office\n * @exampleComponent limel-example-file-viewer-filename\n * @exampleComponent limel-example-file-viewer-inbuilt-actions\n * @exampleComponent limel-example-file-viewer-custom-actions\n * @exampleComponent limel-example-file-viewer-with-picker\n \n @beta\n /\n\n@Component({\n tag: 'limel-file-viewer',\n shadow: true,\n styleUrl: 'file-viewer.scss',\n})\nexport class FileViewer {\n /\n Link to the file\n /\n @Prop({ reflect: true })\n public url: string;\n\n /\n The name of the file that must also contains its extension.\n * This overrides the filename that the `url` ends with.\n * Useful when the `url` does not contain the filename.\n * When specified, the `filename` will be used as filename of\n * the downloaded file.\n /\n @Prop({ reflect: true })\n public filename?: string;\n\n /\n An optional alternative text, mainly for assistive technologies and screen readers.\n * It is used for only image files, as an `alt` attribute.\n * Should optimally hold a description of the image,\n * which is also displayed on the page if the image can't be loaded for some reason.\n /\n @Prop({ reflect: true })\n public alt?: string;\n\n /\n Displays a button that allows the user to view the file\n * in fullscreen mode.\n * Not displayed for office files!\n /\n @Prop({ reflect: true })\n public allowFullscreen?: boolean = false;\n\n /\n Displays a button that allows the user to open the file\n * in a new browser tab.\n * Not displayed for office files!\n /\n @Prop({ reflect: true })\n public allowOpenInNewTab?: boolean = false;\n\n /\n Displays a button that allows the user to download the file.\n * Note that due to the browser's security policies,\n * the file should be hosted on the same domain\n * for the download button to work properly.\n * Not displayed for office files!\n /\n @Prop({ reflect: true })\n public allowDownload?: boolean = false;\n\n /\n Defines the localization for translations.\n /\n @Prop()\n public language: Languages = 'en';\n\n /\n Defines the third-party viewer that should be used to render\n * the content of office files, such as word processing documents,\n * presentations, or spreadsheets.\n /\n @Prop({ reflect: true })\n public officeViewer: OfficeViewer = 'microsoft-office';\n\n /\n An array of custom actions that can be displayed\n * as an action menu on the file which is being displayed.\n /\n @Prop()\n public actions: ListItem[];\n\n /\n Emitted when a custom action is selected from the action menu.\n /\n @Event()\n public action: EventEmitter<ListItem>;\n\n @Element()\n public HostElement: HTMLLimelFileViewerElement;\n\n private fullscreen: Fullscreen;\n\n @State()\n private isFullscreen: boolean = false;\n\n @State()\n private fileType: FileType;\n\n /\n True while the file is being loaded.\n */\n @State()\n private loading: boolean = true;\n\n @State()\n private fileUrl: string = '';\n\n constructor() {\n this.fullscreen = new Fullscreen(this.HostElement);\n }\n\n public async componentWillLoad() {\n this.fileType = detectExtension(this.filename, this.url);\n await this.createURL(this.fileType);\n }\n\n public render() {\n if (!this.isOfficeFileAccessibleViaURL) {\n return this.renderNoFileSupportMessage();\n }\n\n if (this.loading) {\n return <limel-spinner size=\"x-small\" limeBranded={false} />;\n }\n\n return this.renderFileViewer();\n }\n\n @Watch('url')\n protected async watchUrl(newUrl: string, oldUrl: string) {\n if (newUrl === oldUrl) {\n return;\n }\n\n this.loading = true;\n this.fileType = detectExtension(this.filename, this.fileUrl);\n await this.createURL(this.fileType);\n }\n\n private renderFileViewer() {\n const fileViewerFunctions = {\n pdf: this.renderPdf,\n image: this.renderImage,\n video: this.renderVideo,\n audio: this.renderAudio,\n text: this.renderText,\n office: this.renderOffice,\n };\n const fileViewerFunction =\n fileViewerFunctions[this.fileType] \|\|\n this.renderNoFileSupportMessage;\n\n return fileViewerFunction();\n }\n\n private renderPdf = () => {\n return [\n <div class=\"action-menu-for-pdf-files\">\n {this.renderActionMenu()}\n </div>,\n <iframe src={this.fileUrl} loading=\"lazy\" />,\n ];\n };\n\n private renderImage = () => {\n return [\n this.renderButtons(),\n <img src={this.fileUrl} alt={this.alt} loading=\"lazy\" />,\n ];\n };\n\n private renderVideo = () => {\n return (\n <video controls>\n <source src={this.fileUrl} />\n </video>\n );\n };\n\n private renderAudio = () => {\n return (\n <audio controls>\n <source src={this.fileUrl} />\n </audio>\n );\n };\n\n private renderText = () => {\n return [\n this.renderButtons(),\n <object data={this.fileUrl} type=\"text/plain\">\n {`Text content from: ${this.filename \|\| this.url}`}\n <a\n href={this.fileUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Open text file in new tab\n </a>\n </object>,\n ];\n };\n\n private renderOffice = () => {\n return [\n <div class=\"action-menu-for-office-files\">\n {this.renderActionMenu()}\n </div>,\n <iframe\n src={\n this.getOfficeViewerUrl() + this.fileUrl + '&embedded=true'\n }\n loading=\"lazy\"\n />,\n ];\n };\n\n private isOfficeFileAccessibleViaURL = () => {\n return (\n this.fileType === 'office' &&\n !(\n this.fileUrl.startsWith('http://') \|\|\n this.fileUrl.startsWith('https://')\n )\n );\n };\n\n private getOfficeViewerUrl = () => {\n const officeViewers = {\n 'microsoft-office':\n 'https://view.officeapps.live.com/op/embed.aspx?src=',\n 'google-drive': 'https://docs.google.com/gview?url=',\n };\n\n return officeViewers[this.officeViewer];\n };\n\n private renderNoFileSupportMessage = () => {\n return (\n <div class=\"no-support\" role=\"alert\">\n <limel-icon\n class=\"icon--warning\"\n name=\"brake_warning\"\n size=\"large\"\n role=\"presentation\"\n />\n <p>{this.getTranslation('message.unsupported-filetype')}</p>\n {this.renderDownloadButton()}\n </div>\n );\n };\n\n private renderButtons = () => {\n return (\n <div class=\"buttons\">\n {this.renderActionMenu()}\n {this.renderToggleFullscreenButton()}\n {this.renderDownloadButton()}\n {this.renderOpenInNewTabButton()}\n </div>\n );\n };\n\n private renderToggleFullscreenButton = () => {\n if (!this.allowFullscreen \|\| !this.fullscreen.isSupported()) {\n return;\n }\n\n const icon = this.isFullscreen ? 'multiply' : 'fit_to_width';\n // eslint-disable-next-line multiline-ternary\n const label = this.isFullscreen\n ? // eslint-disable-next-line multiline-ternary\n this.getTranslation('exit-fullscreen')\n : this.getTranslation('open-in-fullscreen');\n\n return [\n <button\n class=\"button--toggle-fullscreen\"\n id=\"tooltip-toggle-fullscreen\"\n role=\"button\"\n onClick={this.handleToggleFullscreen}\n >\n <limel-icon name={icon} />\n <limel-tooltip\n label={label}\n elementId=\"tooltip-toggle-fullscreen\"\n openDirection=\"left\"\n />\n </button>,\n ];\n };\n\n private renderDownloadButton = () => {\n if (!this.allowDownload \|\| this.isFullscreen) {\n return;\n }\n\n return (\n <a\n class=\"button--download\"\n id=\"tooltip-download\"\n role=\"button\"\n download={this.filename ? this.filename : ''}\n href={this.fileUrl}\n target=\"_blank\"\n >\n <limel-icon name=\"download_2\" />\n <limel-tooltip\n label={this.getTranslation('download')}\n elementId=\"tooltip-download\"\n openDirection=\"left\"\n />\n </a>\n );\n };\n\n private renderOpenInNewTabButton = () => {\n if (!this.allowOpenInNewTab \|\| this.isFullscreen) {\n return;\n }\n\n return (\n <a\n class=\"button--new-tab\"\n id=\"tooltip-new-tab\"\n role=\"button\"\n href={this.fileUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <limel-icon name=\"external_link\" />\n <limel-tooltip\n label={this.getTranslation('open-in-new-tab')}\n elementId=\"tooltip-new-tab\"\n openDirection=\"left\"\n />\n </a>\n );\n };\n\n private renderActionMenu = () => {\n if (!this.actions \|\| this.isFullscreen) {\n return;\n }\n\n return (\n <limel-menu\n class=\"action-menu\"\n items={this.actions}\n onSelect={this.emitOnAction}\n open-direction=\"left\"\n >\n <button\n class=\"button--action\"\n id=\"tooltip-more\"\n role=\"button\"\n slot=\"trigger\"\n >\n <limel-icon name=\"menu_2\" />\n <limel-tooltip\n label={this.getTranslation('more-actions')}\n elementId=\"tooltip-more\"\n openDirection=\"left\"\n />\n </button>\n </limel-menu>\n );\n };\n\n private createURL = async (fileType: string) => {\n if (['pdf'].includes(fileType)) {\n const response = await fetch(this.url);\n const blob = await response.blob();\n\n this.fileUrl = URL.createObjectURL(blob);\n } else {\n this.fileUrl = this.url;\n }\n\n this.loading = false;\n };\n\n private handleToggleFullscreen = () => {\n if (this.fullscreen.isSupported()) {\n this.fullscreen.toggle();\n this.isFullscreen = !this.isFullscreen;\n }\n };\n\n private emitOnAction = (event: LimelMenuCustomEvent<ListItem>) => {\n event.stopPropagation();\n this.action.emit(event.detail);\n };\n\n private getTranslation(key: string) {\n return translate.get(`file-viewer.${key}`, this.language);\n }\n}\n"],"version":3}