@nuraly/lumenui 0.3.4 → 0.3.6

package/dist/src/components/colorpicker/bundle.js

@@ -211,11 +211,12 @@ var k=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.g
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */var P=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let z=class extends((t=>p(d(b(f(t)))))(o)){constructor(){super(),this.requiredComponents=["nr-input","nr-icon"],this.color="#3498db",this.show=!1,this.defaultColorSets=[],this.disabled=!1,this.size="default",this.trigger="click",this.placement="auto",this.animation="fade",this.closeOnSelect=!1,this.closeOnOutsideClick=!0,this.closeOnEscape=!0,this.showInput=!0,this.showCopyButton=!0,this.format="hex",this.inputPlaceholder="Enter color",this.label="",this.helperText="",this.isValidColor=!0,this.dropdownController=new j(this),this.eventController=new A(this),this.handleTriggerClick=t=>{this.eventController.handleTriggerClick(t)},this.handleColorChanged=t=>{const e=t.detail.value;this.eventController.handleColorChange(e),this.closeOnSelect&&this.dropdownController.close()},this.handleInputChange=t=>{this.eventController.handleInputChange(t)},"undefined"!=typeof window&&Promise.resolve().then(function(){return lt})}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}updated(t){super.updated(t),t.has("color")&&this.validateColor()}open(){this.dropdownController.open()}close(){this.dropdownController.close()}toggle(){this.dropdownController.toggle()}validateColor(){return this.isValidColor=this.eventController.isValidColor(this.color),this.isValidColor}setupEventListeners(){(this.closeOnOutsideClick||this.closeOnEscape)&&this.eventController.setupEventListeners()}removeEventListeners(){this.eventController.removeEventListeners()}render(){const i={"color-picker-container":!0,"color-picker-container--disabled":this.disabled,"color-picker-container--open":this.show,[`color-picker-container--${this.size}`]:!0};return e`
-      <div class="${l(i)}" data-theme="${this.currentTheme}">
+      <div class="${l(i)}" part="container" data-theme="${this.currentTheme}">
         ${this.renderLabel()}
-        
+
         <nr-colorholder-box
           class="color-holder"
+          part="trigger"
           color="${this.color}"
           .size=${this.size}
           ?disabled="${this.disabled}"
@@ -240,8 +241,9 @@ var k=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.g
       ${o?e`<span class="${l}">*</span>`:t}
     </label>
   `}(this.label,!1,{cssClass:"color-picker-label"})}renderDropdown(){return this.show?e`
-      <div 
+      <div
         class="dropdown-container"
+        part="panel"
         role="dialog"
         aria-label="Color picker"
       >
@@ -250,24 +252,27 @@ var k=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.g
         ${this.renderColorInput()}
       </div>
     `:t}renderDefaultColorSets(){return this.defaultColorSets&&0!==this.defaultColorSets.length?e`
-      <nr-default-color-sets 
-        .defaultColorSets=${this.defaultColorSets} 
+      <nr-default-color-sets
+        part="default-colors"
+        .defaultColorSets=${this.defaultColorSets}
         @color-click="${this.handleColorChanged}"
         aria-label="Preset colors">
       </nr-default-color-sets>
     `:t}renderColorPicker(){return e`
       <hex-color-picker
+        part="picker"
         color="${this.color}"
         @color-changed="${this.handleColorChanged}"
         aria-label="Color gradient picker">
       </hex-color-picker>
     `}renderColorInput(){return this.showInput?e`
-      <nr-input 
-        type="text" 
-        .value="${this.color}" 
+      <nr-input
+        part="input"
+        type="text"
+        .value="${this.color}"
         placeholder="${this.inputPlaceholder}"
-        @nr-input="${this.handleInputChange}" 
-        ?withCopy=${this.showCopyButton} 
+        @nr-input="${this.handleInputChange}"
+        ?withCopy=${this.showCopyButton}
         .state="${this.isValidColor?"default":"error"}"
         aria-label="Color value input"
         aria-invalid="${!this.isValidColor}">

package/dist/src/components/colorpicker/color-picker.component.js

@@ -208,11 +208,12 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
             [`color-picker-container--${this.size}`]: true,
         };
         return html `
-      <div class="${classMap(containerClasses)}" data-theme="${this.currentTheme}">
+      <div class="${classMap(containerClasses)}" part="container" data-theme="${this.currentTheme}">
         ${this.renderLabel()}
-        
+
         <nr-colorholder-box
           class="color-holder"
+          part="trigger"
           color="${this.color}"
           .size=${this.size}
           ?disabled="${this.disabled}"
@@ -242,8 +243,9 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
         if (!this.show)
             return nothing;
         return html `
-      <div 
+      <div
         class="dropdown-container"
+        part="panel"
         role="dialog"
         aria-label="Color picker"
       >
@@ -261,8 +263,9 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
             return nothing;
         }
         return html `
-      <nr-default-color-sets 
-        .defaultColorSets=${this.defaultColorSets} 
+      <nr-default-color-sets
+        part="default-colors"
+        .defaultColorSets=${this.defaultColorSets}
         @color-click="${this.handleColorChanged}"
         aria-label="Preset colors">
       </nr-default-color-sets>
@@ -274,6 +277,7 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
     renderColorPicker() {
         return html `
       <hex-color-picker
+        part="picker"
         color="${this.color}"
         @color-changed="${this.handleColorChanged}"
         aria-label="Color gradient picker">
@@ -287,12 +291,13 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
         if (!this.showInput)
             return nothing;
         return html `
-      <nr-input 
-        type="text" 
-        .value="${this.color}" 
+      <nr-input
+        part="input"
+        type="text"
+        .value="${this.color}"
         placeholder="${this.inputPlaceholder}"
-        @nr-input="${this.handleInputChange}" 
-        ?withCopy=${this.showCopyButton} 
+        @nr-input="${this.handleInputChange}"
+        ?withCopy=${this.showCopyButton}
         .state="${!this.isValidColor ? "error" /* INPUT_STATE.Error */ : "default" /* INPUT_STATE.Default */}"
         aria-label="Color value input"
         aria-invalid="${!this.isValidColor}">