npm - @limetech/lime-elements - Versions diffs - 37.52.7 → 37.53.0 - Mend

@limetech/lime-elements 37.52.7 → 37.53.0

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

Files changed (29) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,19 @@
+## [37.53.0](https://github.com/Lundalogik/lime-elements/compare/v37.52.8...v37.53.0) (2024-06-26)
+### Features
+* **style:** add CSS variables for new Lime brand colors ([7675d8b](https://github.com/Lundalogik/lime-elements/commit/7675d8b52ae7173d1f06be7c526016eeb06f2857))
+## [37.52.8](https://github.com/Lundalogik/lime-elements/compare/v37.52.7...v37.52.8) (2024-06-26)
+### Bug Fixes
+* **date-picker:** avoid closing before input click ([bab7d9a](https://github.com/Lundalogik/lime-elements/commit/bab7d9a79335d565c3b43eb78806d6b1fb6d10a4))
 ## [37.52.7](https://github.com/Lundalogik/lime-elements/compare/v37.52.6...v37.52.7) (2024-06-24)

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

@@ -34,7 +34,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{transition:border-radius 0.2s ease;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}.brand-colors-tips{transition:opacity 0.2s ease 0.4s;opacity:0;font-size:0.875rem;padding-left:2.75rem;margin-bottom:2.5rem}.brand-colors .brand-colors-tips{opacity:1}@media (prefers-color-scheme: light){.brand-colors .--color-glaucous-default,.brand-colors .--color-gray-dark{border-radius:50%}}@media (prefers-color-scheme: dark){.brand-colors .--color-red-light,.brand-colors .--color-magenta-default,.brand-colors .--color-sky-light,.brand-colors .--color-teal-light,.brand-colors .--color-green-light,.brand-colors .--color-amber-light,.brand-colors .--color-amber-default,.brand-colors .--color-coral-light,.brand-colors .--color-gray-light{border-radius:50%}}.--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 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;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{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.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 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;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{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.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/cjs/limel-color-picker-palette.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-color-picker-palette.entry.cjs.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,~~w9eAAw9e~~;;~~MCYz+e~~,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,QACIA,oBACI,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;MACHA,iBAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,cAAc,EAAE,CAAO;MAC/DA,iBAAK,KAAK,EAAC,mBAAmB,IAC1BA,+BACI,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,EACFA,iBAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,UAAU,GAAI,CACrD;KACT,CAAC;GACL;;;;;;;","names":["h"],"sources":["./src/components/color-picker/swatches.ts","./src/components/color-picker/color-picker-palette.scss?tag=limel-color-picker-palette&encapsulation=shadow","./src/components/color-picker/color-picker-palette.tsx"],"sourcesContent":["export const colors = [\n 'red',\n 'pink',\n 'magenta',\n 'purple',\n 'violet',\n 'indigo',\n 'blue',\n 'sky',\n 'cyan',\n 'teal',\n 'green',\n 'lime',\n 'grass',\n 'yellow',\n 'amber',\n 'orange',\n 'coral',\n 'brown',\n 'gray',\n 'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\nexport 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.cjs.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,2xdAA2xd;;MCY5yd,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,QACIA,oBACI,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;MACHA,iBAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,cAAc,EAAE,CAAO;MAC/DA,iBAAK,KAAK,EAAC,mBAAmB,IAC1BA,+BACI,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,EACFA,iBAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,UAAU,GAAI,CACrD;KACT,CAAC;GACL;;;;;;;","names":["h"],"sources":["./src/components/color-picker/swatches.ts","./src/components/color-picker/color-picker-palette.scss?tag=limel-color-picker-palette&encapsulation=shadow","./src/components/color-picker/color-picker-palette.tsx"],"sourcesContent":["export const colors = [\n 'red',\n 'pink',\n 'magenta',\n 'purple',\n 'violet',\n 'indigo',\n 'blue',\n 'sky',\n 'cyan',\n 'teal',\n 'green',\n 'lime',\n 'grass',\n 'yellow',\n 'amber',\n 'orange',\n 'coral',\n 'brown',\n 'gray',\n 'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\nexport 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/cjs/limel-date-picker.cjs.entry.js CHANGED Viewed

@@ -78,8 +78,7 @@ const DatePicker = class {
     this.change = index.createEvent(this, "change", 7);
     this.portalId = `date-picker-calendar-${randomString.createRandomString()}`;
     this.documentClickListener = (event) => {
-      if (event.type === 'keydown' &&
-        event.key !== 'Tab') {
+      if (event.composedPath().includes(this.textField)) {
         return;
       }
       const element = document.querySelector(`#${this.portalId}`);
@@ -176,9 +175,6 @@ const DatePicker = class {
     document.addEventListener('mousedown', this.documentClickListener, {
       passive: true,
     });
-    document.addEventListener('keydown', this.documentClickListener, {
-      passive: true,
-    });
     document.addEventListener('blur', this.preventBlurFromCalendarContainer, {
       capture: true,
     });
@@ -198,7 +194,6 @@ const DatePicker = class {
       this.showPortal = false;
     });
     document.removeEventListener('mousedown', this.documentClickListener);
-    document.removeEventListener('keydown', this.documentClickListener);
     document.removeEventListener('blur', this.preventBlurFromCalendarContainer);
     if (!this.pickerIsAutoClosing()) {
       this.fixFlatpickrFocusBug();

package/dist/cjs/limel-date-picker.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-date-picker.entry.cjs.js","mappings":"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","names":["moment","isIOSDevice","createRandomString","isAndroidDevice","h","MDCTextField"],"sources":["./src/components/date-picker/dateFormatter.ts","./src/components/date-picker/date-picker.scss?tag=limel-date-picker&encapsulation=shadow","./src/components/date-picker/date-picker.tsx"],"sourcesContent":["import 'moment/locale/da';\nimport 'moment/locale/de';\nimport 'moment/locale/fi';\nimport 'moment/locale/fr';\nimport 'moment/locale/nb';\nimport 'moment/locale/nl';\nimport 'moment/locale/sv';\nimport moment from 'moment/moment';\nimport { DateType } from './date.types';\n\nexport class DateFormatter {\n private language: string;\n\n public constructor(language: string = 'en') {\n this.language = language;\n }\n\n public formatDate(date: Date, dateFormat: string) {\n if (date) {\n return moment(date).locale(this.getLanguage()).format(dateFormat);\n }\n\n return '';\n }\n\n public parseDate(date: string, dateFormat: string) {\n if (date) {\n return moment(date, dateFormat).toDate();\n }\n\n return null;\n }\n\n public getLanguage() {\n if (this.language === 'no') {\n return 'nb';\n }\n\n return this.language;\n }\n\n public getDateFormat(type: DateType) {\n return (\n {\n date: 'L',\n time: 'LT',\n week: '[w] W GGGG',\n month: 'MM/YYYY',\n quarter: '[Q]Q YYYY',\n year: 'YYYY',\n datetime: 'L - LT',\n }[type] \|\| 'L - LT'\n );\n }\n}\n","// Note! The `--dropdown-z-index` property is used from `date-picker.tsx`.\n/*\n @prop --dropdown-z-index: z-index of the dropdown menu.\n /\n\n:host(limel-date-picker) {\n position: relative;\n}\n\nlimel-input-field[disabled],\nlimel-input-field[readonly] {\n pointer-events: none;\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Element,\n EventEmitter,\n Event,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { isAndroidDevice, isIOSDevice } from '../../util/device';\nimport { DateType, Languages } from '../date-picker/date.types';\nimport { InputType } from '../input-field/input-field.types';\nimport { DateFormatter } from './dateFormatter';\nimport { MDCTextField } from '@material/textfield';\n\n// tslint:disable:no-duplicate-string\nconst nativeTypeForConsumerType: { [key: string]: InputType } = {\n date: 'date',\n time: 'time',\n // Mobile Safari feature detects as capable of input type `week`,\n // but it just displays a non-interactive input\n // TODO(ads): remove this when support is decent on iOS!\n week: isIOSDevice() ? 'date' : 'week',\n month: 'month',\n quarter: 'date',\n year: 'date',\n datetime: 'datetime-local',\n default: 'datetime-local',\n};\nconst nativeFormatForType = {\n date: 'Y-MM-DD',\n time: 'HH:mm',\n week: 'GGGG-[W]WW',\n month: 'Y-MM',\n 'datetime-local': 'Y-MM-DD[T]HH:mm',\n};\n// tslint:enable:no-duplicate-string\n\n/\n @exampleComponent limel-example-date-picker-datetime\n * @exampleComponent limel-example-date-picker-date\n * @exampleComponent limel-example-date-picker-time\n * @exampleComponent limel-example-date-picker-week\n * @exampleComponent limel-example-date-picker-month\n * @exampleComponent limel-example-date-picker-quarter\n * @exampleComponent limel-example-date-picker-year\n * @exampleComponent limel-example-date-picker-formatted\n * @exampleComponent limel-example-date-picker-programmatic-change\n * @exampleComponent limel-example-date-picker-composite\n * @exampleComponent limel-example-date-picker-custom-formatter\n /\n@Component({\n tag: 'limel-date-picker',\n shadow: true,\n styleUrl: 'date-picker.scss',\n})\nexport class DatePicker {\n /\n Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Set to `true` to make the field read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n Set to `true` to indicate that the current value of the date picker is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid = false;\n\n /\n Text to display next to the date picker\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n The placeholder text shown inside the input field, when the field is focused and empty\n /\n @Prop({ reflect: true })\n public placeholder: string;\n\n /\n Optional helper text to display below the input field when it has focus\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Set to `true` to indicate that the field is required.\n /\n @Prop({ reflect: true })\n public required = false;\n\n /\n The value of the field.\n /\n @Prop()\n public value: Date;\n\n /\n Type of date picker.\n /\n @Prop({ reflect: true })\n public type: DateType = 'datetime';\n\n /\n Format to display the selected date in.\n /\n @Prop({ reflect: true })\n public format: string;\n\n /\n Defines the localisation for translations and date formatting.\n * Property `format` customizes the localized date format.\n /\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /\n Custom formatting function. Will be used for date formatting.\n \n :::note\n * overrides `format` and `language`\n * :::\n /\n @Prop()\n public formatter?: (date: Date) => string;\n\n /\n Emitted when the date picker value is changed.\n */\n @Event()\n private change: EventEmitter<Date>;\n\n @Element()\n private host: HTMLLimelDatePickerElement;\n\n @State()\n private formattedValue: string;\n\n @State()\n private internalFormat: string;\n @State()\n private showPortal = false;\n\n private useNative: boolean;\n private nativeType: InputType;\n private nativeFormat: string;\n private textField: HTMLElement;\n private datePickerCalendar: HTMLLimelFlatpickrAdapterElement;\n private portalId = `date-picker-calendar-${createRandomString()}`;\n private dateFormatter: DateFormatter;\n\n constructor() {\n this.handleCalendarChange = this.handleCalendarChange.bind(this);\n this.handleInputElementChange =\n this.handleInputElementChange.bind(this);\n this.showCalendar = this.showCalendar.bind(this);\n this.dateFormatter = new DateFormatter(this.language);\n this.clearValue = this.clearValue.bind(this);\n this.hideCalendar = this.hideCalendar.bind(this);\n this.onInputClick = this.onInputClick.bind(this);\n this.nativeChangeHandler = this.nativeChangeHandler.bind(this);\n this.preventBlurFromCalendarContainer =\n this.preventBlurFromCalendarContainer.bind(this);\n }\n\n public componentWillLoad() {\n this.useNative = !this.readonly && (isIOSDevice() \|\| isAndroidDevice());\n\n this.updateInternalFormatAndType();\n\n this.formattedValue = this.formatValue(this.value);\n }\n\n public componentWillUpdate() {\n this.updateInternalFormatAndType();\n }\n\n public render() {\n const inputProps: any = {\n onAction: this.clearValue,\n };\n\n if (this.value && !this.readonly) {\n inputProps.trailingIcon = 'clear_symbol';\n }\n\n if (this.useNative) {\n return (\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n value={this.formattedValue}\n type={this.nativeType}\n onChange={this.nativeChangeHandler}\n />\n );\n }\n\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n return [\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n placeholder={this.placeholder}\n helperText={this.helperText}\n required={this.required}\n value={this.formattedValue}\n onFocus={this.showCalendar}\n onBlur={this.hideCalendar}\n onClick={this.onInputClick}\n onChange={this.handleInputElementChange}\n ref={(el) => (this.textField = el)}\n {...inputProps}\n />,\n <limel-portal\n containerId={this.portalId}\n visible={this.showPortal}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-flatpickr-adapter\n format={this.internalFormat}\n language={this.language}\n type={this.type}\n value={this.value}\n ref={(el) => (this.datePickerCalendar = el)}\n isOpen={this.showPortal}\n formatter={this.formatValue}\n onChange={this.handleCalendarChange}\n />\n </limel-portal>,\n ];\n }\n\n @Watch('value')\n protected onValueChange(newValue: string, oldValue: string) {\n if (newValue !== oldValue && newValue !== this.formattedValue) {\n this.formattedValue = this.formatValue(this.value);\n }\n }\n\n private updateInternalFormatAndType() {\n this.nativeType = nativeTypeForConsumerType[this.type \|\| 'default'];\n this.nativeFormat = nativeFormatForType[this.nativeType];\n\n if (this.useNative) {\n this.internalFormat = this.nativeFormat;\n } else if (this.formatter) {\n this.formatValue = this.formatter;\n } else if (this.format) {\n this.internalFormat = this.format;\n } else {\n this.internalFormat = this.dateFormatter.getDateFormat(this.type);\n }\n }\n\n private nativeChangeHandler(event: CustomEvent<string>) {\n event.stopPropagation();\n const date = this.dateFormatter.parseDate(\n event.detail,\n this.internalFormat,\n );\n this.formattedValue = event.detail;\n this.change.emit(date);\n }\n\n private showCalendar(event) {\n this.showPortal = true;\n const inputElement = this.textField.shadowRoot.querySelector('input');\n setTimeout(() => {\n this.datePickerCalendar.inputElement = inputElement;\n });\n event.stopPropagation();\n\n document.addEventListener('mousedown', this.documentClickListener, {\n passive: true,\n });\n document.addEventListener('keydown', this.documentClickListener, {\n passive: true,\n });\n\n document.addEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer,\n {\n capture: true,\n },\n );\n }\n\n private preventBlurFromCalendarContainer(event) {\n // We don't want the input element to lose focus when we pick\n // a date in the calendar container.\n // This is also required in order to not close the non\n // automatically closing pickers (type datetime and time)\n // when you pick a value.\n if (event.relatedTarget === this.datePickerCalendar) {\n event.stopPropagation();\n }\n }\n\n private hideCalendar() {\n setTimeout(() => {\n this.showPortal = false;\n });\n document.removeEventListener('mousedown', this.documentClickListener);\n document.removeEventListener('keydown', this.documentClickListener);\n document.removeEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer,\n );\n\n if (!this.pickerIsAutoClosing()) {\n this.fixFlatpickrFocusBug();\n }\n }\n\n private fixFlatpickrFocusBug() {\n // Flatpickr removes the focus from the input field\n // but the 'visual focus' is still there\n const mdcTextField = new MDCTextField(\n this.textField.shadowRoot.querySelector('.mdc-text-field'),\n );\n mdcTextField.getDefaultFoundation().deactivateFocus();\n }\n\n private documentClickListener = (event: MouseEvent \| KeyboardEvent) => {\n if (\n event.type === 'keydown' &&\n (event as KeyboardEvent).key !== 'Tab'\n ) {\n return;\n }\n\n const element = document.querySelector(`#${this.portalId}`);\n if (!element.contains(event.target as Node)) {\n this.hideCalendar();\n }\n };\n\n private handleCalendarChange(event) {\n const date = event.detail;\n this.formattedValue = this.formatValue(date);\n event.stopPropagation();\n if (this.pickerIsAutoClosing()) {\n this.hideCalendar();\n }\n\n this.change.emit(date);\n }\n\n private onInputClick(event) {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n if (this.showPortal) {\n return;\n }\n\n this.showCalendar(event);\n }\n\n private handleInputElementChange(event) {\n if (event.detail === '') {\n this.clearValue();\n }\n\n event.stopPropagation();\n }\n\n private pickerIsAutoClosing() {\n return this.type !== 'datetime' && this.type !== 'time';\n }\n\n private clearValue() {\n this.formattedValue = '';\n this.change.emit(null);\n }\n\n private formatValue = (value: Date): string =>\n this.dateFormatter.formatDate(value, this.internalFormat);\n}\n"],"version":3}
1	+ {"file":"limel-date-picker.entry.cjs.js","mappings":"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","names":["moment","isIOSDevice","createRandomString","isAndroidDevice","h","MDCTextField"],"sources":["./src/components/date-picker/dateFormatter.ts","./src/components/date-picker/date-picker.scss?tag=limel-date-picker&encapsulation=shadow","./src/components/date-picker/date-picker.tsx"],"sourcesContent":["import 'moment/locale/da';\nimport 'moment/locale/de';\nimport 'moment/locale/fi';\nimport 'moment/locale/fr';\nimport 'moment/locale/nb';\nimport 'moment/locale/nl';\nimport 'moment/locale/sv';\nimport moment from 'moment/moment';\nimport { DateType } from './date.types';\n\nexport class DateFormatter {\n private language: string;\n\n public constructor(language: string = 'en') {\n this.language = language;\n }\n\n public formatDate(date: Date, dateFormat: string) {\n if (date) {\n return moment(date).locale(this.getLanguage()).format(dateFormat);\n }\n\n return '';\n }\n\n public parseDate(date: string, dateFormat: string) {\n if (date) {\n return moment(date, dateFormat).toDate();\n }\n\n return null;\n }\n\n public getLanguage() {\n if (this.language === 'no') {\n return 'nb';\n }\n\n return this.language;\n }\n\n public getDateFormat(type: DateType) {\n return (\n {\n date: 'L',\n time: 'LT',\n week: '[w] W GGGG',\n month: 'MM/YYYY',\n quarter: '[Q]Q YYYY',\n year: 'YYYY',\n datetime: 'L - LT',\n }[type] \|\| 'L - LT'\n );\n }\n}\n","// Note! The `--dropdown-z-index` property is used from `date-picker.tsx`.\n/*\n @prop --dropdown-z-index: z-index of the dropdown menu.\n /\n\n:host(limel-date-picker) {\n position: relative;\n}\n\nlimel-input-field[disabled],\nlimel-input-field[readonly] {\n pointer-events: none;\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Element,\n EventEmitter,\n Event,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { isAndroidDevice, isIOSDevice } from '../../util/device';\nimport { DateType, Languages } from '../date-picker/date.types';\nimport { InputType } from '../input-field/input-field.types';\nimport { DateFormatter } from './dateFormatter';\nimport { MDCTextField } from '@material/textfield';\n\n// tslint:disable:no-duplicate-string\nconst nativeTypeForConsumerType: { [key: string]: InputType } = {\n date: 'date',\n time: 'time',\n // Mobile Safari feature detects as capable of input type `week`,\n // but it just displays a non-interactive input\n // TODO(ads): remove this when support is decent on iOS!\n week: isIOSDevice() ? 'date' : 'week',\n month: 'month',\n quarter: 'date',\n year: 'date',\n datetime: 'datetime-local',\n default: 'datetime-local',\n};\nconst nativeFormatForType = {\n date: 'Y-MM-DD',\n time: 'HH:mm',\n week: 'GGGG-[W]WW',\n month: 'Y-MM',\n 'datetime-local': 'Y-MM-DD[T]HH:mm',\n};\n// tslint:enable:no-duplicate-string\n\n/\n @exampleComponent limel-example-date-picker-datetime\n * @exampleComponent limel-example-date-picker-date\n * @exampleComponent limel-example-date-picker-time\n * @exampleComponent limel-example-date-picker-week\n * @exampleComponent limel-example-date-picker-month\n * @exampleComponent limel-example-date-picker-quarter\n * @exampleComponent limel-example-date-picker-year\n * @exampleComponent limel-example-date-picker-formatted\n * @exampleComponent limel-example-date-picker-programmatic-change\n * @exampleComponent limel-example-date-picker-composite\n * @exampleComponent limel-example-date-picker-custom-formatter\n /\n@Component({\n tag: 'limel-date-picker',\n shadow: true,\n styleUrl: 'date-picker.scss',\n})\nexport class DatePicker {\n /\n Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Set to `true` to make the field read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n Set to `true` to indicate that the current value of the date picker is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid = false;\n\n /\n Text to display next to the date picker\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n The placeholder text shown inside the input field, when the field is focused and empty\n /\n @Prop({ reflect: true })\n public placeholder: string;\n\n /\n Optional helper text to display below the input field when it has focus\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Set to `true` to indicate that the field is required.\n /\n @Prop({ reflect: true })\n public required = false;\n\n /\n The value of the field.\n /\n @Prop()\n public value: Date;\n\n /\n Type of date picker.\n /\n @Prop({ reflect: true })\n public type: DateType = 'datetime';\n\n /\n Format to display the selected date in.\n /\n @Prop({ reflect: true })\n public format: string;\n\n /\n Defines the localisation for translations and date formatting.\n * Property `format` customizes the localized date format.\n /\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /\n Custom formatting function. Will be used for date formatting.\n \n :::note\n * overrides `format` and `language`\n * :::\n /\n @Prop()\n public formatter?: (date: Date) => string;\n\n /\n Emitted when the date picker value is changed.\n */\n @Event()\n private change: EventEmitter<Date>;\n\n @Element()\n private host: HTMLLimelDatePickerElement;\n\n @State()\n private formattedValue: string;\n\n @State()\n private internalFormat: string;\n @State()\n private showPortal = false;\n\n private useNative: boolean;\n private nativeType: InputType;\n private nativeFormat: string;\n private textField: HTMLElement;\n private datePickerCalendar: HTMLLimelFlatpickrAdapterElement;\n private portalId = `date-picker-calendar-${createRandomString()}`;\n private dateFormatter: DateFormatter;\n\n constructor() {\n this.handleCalendarChange = this.handleCalendarChange.bind(this);\n this.handleInputElementChange =\n this.handleInputElementChange.bind(this);\n this.showCalendar = this.showCalendar.bind(this);\n this.dateFormatter = new DateFormatter(this.language);\n this.clearValue = this.clearValue.bind(this);\n this.hideCalendar = this.hideCalendar.bind(this);\n this.onInputClick = this.onInputClick.bind(this);\n this.nativeChangeHandler = this.nativeChangeHandler.bind(this);\n this.preventBlurFromCalendarContainer =\n this.preventBlurFromCalendarContainer.bind(this);\n }\n\n public componentWillLoad() {\n this.useNative = !this.readonly && (isIOSDevice() \|\| isAndroidDevice());\n\n this.updateInternalFormatAndType();\n\n this.formattedValue = this.formatValue(this.value);\n }\n\n public componentWillUpdate() {\n this.updateInternalFormatAndType();\n }\n\n public render() {\n const inputProps: any = {\n onAction: this.clearValue,\n };\n\n if (this.value && !this.readonly) {\n inputProps.trailingIcon = 'clear_symbol';\n }\n\n if (this.useNative) {\n return (\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n value={this.formattedValue}\n type={this.nativeType}\n onChange={this.nativeChangeHandler}\n />\n );\n }\n\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n return [\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n placeholder={this.placeholder}\n helperText={this.helperText}\n required={this.required}\n value={this.formattedValue}\n onFocus={this.showCalendar}\n onBlur={this.hideCalendar}\n onClick={this.onInputClick}\n onChange={this.handleInputElementChange}\n ref={(el) => (this.textField = el)}\n {...inputProps}\n />,\n <limel-portal\n containerId={this.portalId}\n visible={this.showPortal}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-flatpickr-adapter\n format={this.internalFormat}\n language={this.language}\n type={this.type}\n value={this.value}\n ref={(el) => (this.datePickerCalendar = el)}\n isOpen={this.showPortal}\n formatter={this.formatValue}\n onChange={this.handleCalendarChange}\n />\n </limel-portal>,\n ];\n }\n\n @Watch('value')\n protected onValueChange(newValue: string, oldValue: string) {\n if (newValue !== oldValue && newValue !== this.formattedValue) {\n this.formattedValue = this.formatValue(this.value);\n }\n }\n\n private updateInternalFormatAndType() {\n this.nativeType = nativeTypeForConsumerType[this.type \|\| 'default'];\n this.nativeFormat = nativeFormatForType[this.nativeType];\n\n if (this.useNative) {\n this.internalFormat = this.nativeFormat;\n } else if (this.formatter) {\n this.formatValue = this.formatter;\n } else if (this.format) {\n this.internalFormat = this.format;\n } else {\n this.internalFormat = this.dateFormatter.getDateFormat(this.type);\n }\n }\n\n private nativeChangeHandler(event: CustomEvent<string>) {\n event.stopPropagation();\n const date = this.dateFormatter.parseDate(\n event.detail,\n this.internalFormat,\n );\n this.formattedValue = event.detail;\n this.change.emit(date);\n }\n\n private showCalendar(event) {\n this.showPortal = true;\n const inputElement = this.textField.shadowRoot.querySelector('input');\n setTimeout(() => {\n this.datePickerCalendar.inputElement = inputElement;\n });\n event.stopPropagation();\n\n document.addEventListener('mousedown', this.documentClickListener, {\n passive: true,\n });\n\n document.addEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer,\n {\n capture: true,\n },\n );\n }\n\n private preventBlurFromCalendarContainer(event) {\n // We don't want the input element to lose focus when we pick\n // a date in the calendar container.\n // This is also required in order to not close the non\n // automatically closing pickers (type datetime and time)\n // when you pick a value.\n if (event.relatedTarget === this.datePickerCalendar) {\n event.stopPropagation();\n }\n }\n\n private hideCalendar() {\n setTimeout(() => {\n this.showPortal = false;\n });\n document.removeEventListener('mousedown', this.documentClickListener);\n document.removeEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer,\n );\n\n if (!this.pickerIsAutoClosing()) {\n this.fixFlatpickrFocusBug();\n }\n }\n\n private fixFlatpickrFocusBug() {\n // Flatpickr removes the focus from the input field\n // but the 'visual focus' is still there\n const mdcTextField = new MDCTextField(\n this.textField.shadowRoot.querySelector('.mdc-text-field'),\n );\n mdcTextField.getDefaultFoundation().deactivateFocus();\n }\n\n private documentClickListener = (event: MouseEvent) => {\n if (event.composedPath().includes(this.textField)) {\n return;\n }\n\n const element = document.querySelector(`#${this.portalId}`);\n if (!element.contains(event.target as Node)) {\n this.hideCalendar();\n }\n };\n\n private handleCalendarChange(event) {\n const date = event.detail;\n this.formattedValue = this.formatValue(date);\n event.stopPropagation();\n if (this.pickerIsAutoClosing()) {\n this.hideCalendar();\n }\n\n this.change.emit(date);\n }\n\n private onInputClick(event) {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n if (this.showPortal) {\n return;\n }\n\n this.showCalendar(event);\n }\n\n private handleInputElementChange(event) {\n if (event.detail === '') {\n this.clearValue();\n }\n\n event.stopPropagation();\n }\n\n private pickerIsAutoClosing() {\n return this.type !== 'datetime' && this.type !== 'time';\n }\n\n private clearValue() {\n this.formattedValue = '';\n this.change.emit(null);\n }\n\n private formatValue = (value: Date): string =>\n this.dateFormatter.formatDate(value, this.internalFormat);\n}\n"],"version":3}