@limetech/lime-elements 34.0.2-next.7 → 34.1.0-next.10

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

@@ -0,0 +1,47 @@
+import { r as registerInstance, c as createEvent, h } from './index-2316f345.js';
+
+const colorPickerCss = ":host{--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-opacity='0.1' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>\")}.color-picker{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:3.5rem;height:3.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}.picker-trigger{border-radius:0.5rem;cursor:pointer;transition:background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;box-shadow:var(--button-shadow-normal)}.picker-trigger:hover{box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}: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:translateY(1rem)}";
+
+let ColorPicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "change", 7);
+    this.isOpen = false;
+    this.renderTooltip = () => {
+      if (!this.readonly && this.tooltipLabel) {
+        return (h("limel-tooltip", { label: this.tooltipLabel, elementId: "tooltip-button" }));
+      }
+    };
+    this.renderPickerPalette = () => {
+      if (this.readonly) {
+        return this.renderPickerTrigger();
+      }
+      return (h("limel-popover", { open: this.isOpen, onClose: this.onPopoverClose }, this.renderPickerTrigger(), h("limel-color-picker-palette", { value: this.value, label: this.label, helperText: this.helperText, onChange: this.handleChange, required: this.required })));
+    };
+    this.renderPickerTrigger = () => {
+      const background = this.value ? { '--background': this.value } : {};
+      return (h("div", { class: "picker-trigger", slot: "trigger", style: background, role: "button", tabindex: "0", onClick: this.openPopover, id: "tooltip-button" }));
+    };
+    this.openPopover = (event) => {
+      event.stopPropagation();
+      this.isOpen = true;
+    };
+    this.onPopoverClose = (event) => {
+      event.stopPropagation();
+      this.isOpen = false;
+    };
+    this.handleChange = (event) => {
+      event.stopPropagation();
+      this.change.emit(event.detail);
+    };
+  }
+  render() {
+    return [
+      this.renderTooltip(),
+      h("div", { class: "color-picker" }, this.renderPickerPalette(), h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, class: "chosen-color-input" })),
+    ];
+  }
+};
+ColorPicker.style = colorPickerCss;
+
+export { ColorPicker as limel_color_picker };