@nuralyui/colorpicker 0.0.8 → 0.0.9
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.
- package/bundle.js +232 -4
- package/package.json +1 -1
package/bundle.js
CHANGED
|
@@ -1,18 +1,246 @@
|
|
|
1
|
-
import{css as t,LitElement as e,html as o,nothing as
|
|
1
|
+
import{css as t,LitElement as e,html as o,nothing as r}from"lit";import{property as i,customElement as s,state as n}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as a}from"@nuralyui/common/mixins";import{styleMap as h}from"lit/directives/style-map.js";import{map as c}from"lit/directives/map.js";const d=t`
|
|
2
|
+
:host {
|
|
3
|
+
display: inline-block;
|
|
4
|
+
cursor: pointer;
|
|
5
|
+
|
|
6
|
+
/* Ensure clean state transitions */
|
|
7
|
+
* {
|
|
8
|
+
transition: all var(--nuraly-transition-fast, 0.15s) ease;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.color-holder-container {
|
|
13
|
+
width: var(--nuraly-size-colorpicker-default, 30px);
|
|
14
|
+
height: var(--nuraly-size-colorpicker-default-height, 25px);
|
|
15
|
+
border: 1px solid var(--nuraly-color-border, rgba(0, 0, 0, 0.2));
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
border-radius: var(--nuraly-border-radius-small, 2px);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
:host([size='small']) .color-holder-container {
|
|
21
|
+
width: var(--nuraly-size-colorpicker-small, 20px);
|
|
22
|
+
height: var(--nuraly-size-colorpicker-small-height, 15px);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
:host([size='large']) .color-holder-container {
|
|
26
|
+
width: var(--nuraly-size-colorpicker-large, 35px);
|
|
27
|
+
height: var(--nuraly-size-colorpicker-large-height, 30px);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.color-holder-container--disabled {
|
|
31
|
+
opacity: var(--nuraly-opacity-disabled, 0.5);
|
|
32
|
+
cursor: not-allowed;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
:host(:hover:not([disabled])) .color-holder-container {
|
|
36
|
+
border-color: var(--nuraly-color-border-hover, rgba(0, 0, 0, 0.4));
|
|
37
|
+
}
|
|
38
|
+
`;
|
|
2
39
|
/**
|
|
3
40
|
* @license
|
|
4
41
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
5
42
|
* SPDX-License-Identifier: MIT
|
|
6
43
|
*/
|
|
7
|
-
var u=function(t,e,o,
|
|
44
|
+
var u=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(s<3?i(n):s>3?i(e,o,n):i(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};let p=class extends e{constructor(){super(...arguments),this.color="#3498db",this.size="default",this.disabled=!1,this.showTransparencyGrid=!0,this.borderWidth=2,this.showBorder=!0}isValidColor(){try{return CSS.supports("color",this.color)}catch(t){return!1}}isTransparent(){return"transparent"===this.color||this.color.toLowerCase().includes("rgba")||this.color.toLowerCase().includes("hsla")}render(){const t={"color-holder-container":!0,"color-holder-container--disabled":this.disabled,"color-holder-container--invalid":!this.isValidColor(),"color-holder-container--transparent":this.isTransparent()&&this.showTransparencyGrid,[`color-holder-container--${this.size}`]:!0},e={backgroundColor:this.isValidColor()?this.color:"#ffffff",borderWidth:this.showBorder?`${this.borderWidth}px`:"0"};return o`
|
|
45
|
+
<div
|
|
46
|
+
class="${l(t)}"
|
|
47
|
+
style="${h(e)}"
|
|
48
|
+
role="img"
|
|
49
|
+
aria-label="Color swatch: ${this.color}"
|
|
50
|
+
title="${this.color}"
|
|
51
|
+
></div>
|
|
52
|
+
`}};p.styles=d,u([i({type:String})],p.prototype,"color",void 0),u([i({type:String,reflect:!0})],p.prototype,"size",void 0),u([i({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),u([i({type:Boolean,attribute:"show-transparency-grid"})],p.prototype,"showTransparencyGrid",void 0),u([i({type:Number,attribute:"border-width"})],p.prototype,"borderWidth",void 0),u([i({type:Boolean,attribute:"show-border"})],p.prototype,"showBorder",void 0),p=u([s("nr-colorholder-box")],p);const b=t`
|
|
53
|
+
.default-color-sets-container {
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-wrap: wrap;
|
|
56
|
+
justify-content: center;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.default-color-sets-container * {
|
|
60
|
+
margin: var(--nuraly-spacing-1, 0.25rem);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.color-set-container {
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
position: relative;
|
|
66
|
+
transition: all var(--nuraly-transition-base, 0.2s) ease-in-out;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.color-set-container:hover {
|
|
70
|
+
box-shadow: 0 0 0 2px var(--nuraly-color-focus, rgba(15, 98, 254, 0.5));
|
|
71
|
+
opacity: var(--nuraly-opacity-hover, 0.9);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.color-set-container:active {
|
|
75
|
+
box-shadow: 0 0 0 2px var(--nuraly-color-focus-active, rgba(15, 98, 254, 0.8));
|
|
76
|
+
opacity: 1;
|
|
77
|
+
}
|
|
78
|
+
`;
|
|
8
79
|
/**
|
|
9
80
|
* @license
|
|
10
81
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
11
82
|
* SPDX-License-Identifier: MIT
|
|
12
83
|
*/
|
|
13
|
-
var v=function(t,e,o,
|
|
84
|
+
var v=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(s<3?i(n):s>3?i(e,o,n):i(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};let f=class extends e{constructor(){super(...arguments),this.defaultColorSets=[],this.size="default",this.columns=8}handleColorClick(t,e){if(e.stopPropagation(),!this.isValidColor(t))return void console.warn(`Invalid color: ${t}`);const o={value:t};this.dispatchEvent(new CustomEvent("color-click",{bubbles:!0,composed:!0,detail:o}))}isValidColor(t){try{return CSS.supports("color",t)}catch(t){return!1}}render(){return this.defaultColorSets&&0!==this.defaultColorSets.length?o`
|
|
85
|
+
<div
|
|
86
|
+
class="default-color-sets-container"
|
|
87
|
+
role="list"
|
|
88
|
+
aria-label="Preset color swatches"
|
|
89
|
+
style="--columns: ${this.columns}"
|
|
90
|
+
>
|
|
91
|
+
${c(this.defaultColorSets,(t=>o`
|
|
92
|
+
<nr-colorholder-box
|
|
93
|
+
color="${t}"
|
|
94
|
+
.size=${this.size}
|
|
95
|
+
class="color-set-container"
|
|
96
|
+
role="listitem"
|
|
97
|
+
tabindex="0"
|
|
98
|
+
aria-label="Color ${t}"
|
|
99
|
+
@click=${e=>this.handleColorClick(t,e)}
|
|
100
|
+
@keydown=${e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleColorClick(t,e))}}
|
|
101
|
+
></nr-colorholder-box>
|
|
102
|
+
`))}
|
|
103
|
+
</div>
|
|
104
|
+
`:r}};f.styles=b,v([i({type:Array,attribute:"default-color-sets"})],f.prototype,"defaultColorSets",void 0),v([i({type:String,reflect:!0})],f.prototype,"size",void 0),v([i({type:Number,attribute:"columns"})],f.prototype,"columns",void 0),f=v([s("nr-default-color-sets")],f);var m=t`
|
|
105
|
+
:host {
|
|
106
|
+
display: inline-block;
|
|
107
|
+
vertical-align: middle;
|
|
108
|
+
|
|
109
|
+
/* Force CSS custom property inheritance to ensure theme switching works properly */
|
|
110
|
+
color: var(--nuraly-color-text);
|
|
111
|
+
background-color: var(--nuraly-color-background);
|
|
112
|
+
|
|
113
|
+
/* Ensure clean state transitions when theme changes */
|
|
114
|
+
* {
|
|
115
|
+
transition: all var(--nuraly-transition-fast, 0.15s) ease;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* Force re-evaluation of theme-dependent properties on theme change */
|
|
120
|
+
:host([data-theme]) {
|
|
121
|
+
color: inherit;
|
|
122
|
+
background-color: inherit;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.color-picker-container {
|
|
126
|
+
display: inline-flex;
|
|
127
|
+
flex-direction: column;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
hex-color-picker {
|
|
131
|
+
width: 100%;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.dropdown-container {
|
|
135
|
+
display: none;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
hex-color-picker::part(saturation) {
|
|
139
|
+
border-radius: 0px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
hex-color-picker::part(hue) {
|
|
143
|
+
border-radius: 0px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
hex-color-picker::part(saturation-pointer),
|
|
147
|
+
hex-color-picker::part(hue-pointer) {
|
|
148
|
+
cursor: pointer;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.color-holder {
|
|
152
|
+
cursor: pointer;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
:host([disabled]) .color-holder {
|
|
156
|
+
opacity: var(--nuraly-opacity-disabled, 0.5);
|
|
157
|
+
cursor: not-allowed;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
:host([show]) .dropdown-container {
|
|
161
|
+
display: block;
|
|
162
|
+
position: fixed;
|
|
163
|
+
width: 180px;
|
|
164
|
+
z-index: var(--nuraly-z-index-dropdown, 1000);
|
|
165
|
+
padding: var(--nuraly-spacing-2, 0.5rem);
|
|
166
|
+
background-color: var(--nuraly-color-surface, #ffffff);
|
|
167
|
+
border: 1px solid var(--nuraly-color-border, rgba(0, 0, 0, 0.1));
|
|
168
|
+
border-radius: var(--nuraly-border-radius-medium, 4px);
|
|
169
|
+
box-shadow: var(--nuraly-shadow-dropdown, 0 2px 8px rgba(0, 0, 0, 0.15));
|
|
170
|
+
opacity: 0;
|
|
171
|
+
visibility: hidden;
|
|
172
|
+
transition: opacity var(--nuraly-transition-fast, 0.15s) ease-in-out,
|
|
173
|
+
visibility var(--nuraly-transition-fast, 0.15s) ease-in-out;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
:host([show]) .dropdown-container.positioned {
|
|
177
|
+
opacity: 1;
|
|
178
|
+
visibility: visible;
|
|
179
|
+
}
|
|
180
|
+
`;class y{constructor(t){this.host=t,t.addController(this)}hostConnected(){}hostDisconnected(){}hostUpdated(){}dispatchEvent(t){this.host.dispatchEvent(t)}requestUpdate(){this.host.requestUpdate()}handleError(t,e){console.error(`[ColorPicker ${e}]:`,t)}findElement(t){var e;return(null===(e=this.host.shadowRoot)||void 0===e?void 0:e.querySelector(t))||null}}class x extends y{constructor(){super(...arguments),this._isOpen=!1,this._position={top:0,left:0,width:0,placement:"bottom"},this._dropdownElement=null,this._triggerElement=null,this._scrollHandler=null,this._resizeHandler=null}get isOpen(){return this._isOpen}get position(){return Object.assign({},this._position)}hostConnected(){this.setupScrollAndResizeListeners()}hostDisconnected(){this.cleanup()}open(){try{this._isOpen||this.host.disabled||(this._isOpen=!0,this.host.show=!0,this.requestUpdate(),requestAnimationFrame((()=>{this.findElements(),this._dropdownElement&&this._dropdownElement.classList.remove("positioned"),requestAnimationFrame((()=>{this.calculatePosition(),this._dropdownElement&&this._dropdownElement.classList.add("positioned")}))})),this.host&&"function"==typeof this.host.setupEventListeners&&setTimeout((()=>{var t,e;null===(e=(t=this.host).setupEventListeners)||void 0===e||e.call(t)}),50),this.dispatchEvent(new CustomEvent("nr-colorpicker-open",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"open")}}close(){var t,e;try{this._isOpen&&(this._isOpen=!1,this.host.show=!1,this.resetPosition(),this.requestUpdate(),this.host&&"function"==typeof this.host.removeEventListeners&&(null===(e=(t=this.host).removeEventListeners)||void 0===e||e.call(t)),this.dispatchEvent(new CustomEvent("nr-colorpicker-close",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"close")}}toggle(){this._isOpen?this.close():this.open()}findElements(){this._dropdownElement=this.findElement(".dropdown-container"),this._triggerElement=this.findElement(".color-holder")}calculatePosition(){var t,e;try{if(this._dropdownElement&&this._triggerElement||this.findElements(),!this._dropdownElement||!this._triggerElement)return;const o=this._triggerElement.getBoundingClientRect(),r=this._dropdownElement.getBoundingClientRect(),i=(null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight,s=(null===(e=window.visualViewport)||void 0===e?void 0:e.width)||window.innerWidth,n=i-o.bottom,l=o.top,a=s-o.left;let h,c,d="bottom";n>=r.height||n>l?(h=o.bottom,d="bottom"):(h=o.top-r.height,d="top"),c=a>=r.width?o.left:Math.max(0,s-r.width),this._position={top:h,left:c,width:Math.max(o.width,r.width),placement:d},this.applyPosition()}catch(t){this.handleError(t,"calculatePosition")}}applyPosition(){try{if(!this._dropdownElement)return;this._dropdownElement.style.position="fixed",this._dropdownElement.style.top=`${this._position.top}px`,this._dropdownElement.style.left=`${this._position.left}px`,this._dropdownElement.style.zIndex="9999",this._dropdownElement.classList.remove("placement-top","placement-bottom"),this._dropdownElement.classList.add(`placement-${this._position.placement}`),this._dropdownElement.classList.add("positioned")}catch(t){this.handleError(t,"applyPosition")}}resetPosition(){try{this._dropdownElement&&(this._dropdownElement.style.removeProperty("position"),this._dropdownElement.style.removeProperty("top"),this._dropdownElement.style.removeProperty("left"),this._dropdownElement.style.removeProperty("z-index"),this._dropdownElement.classList.remove("placement-top","placement-bottom","positioned"))}catch(t){this.handleError(t,"resetPosition")}}setupScrollAndResizeListeners(){this._scrollHandler=()=>{this._isOpen&&this.calculatePosition()},this._resizeHandler=()=>{this._isOpen&&this.calculatePosition()},document.addEventListener("scroll",this._scrollHandler,{passive:!0}),window.addEventListener("resize",this._resizeHandler)}cleanup(){this._scrollHandler&&(document.removeEventListener("scroll",this._scrollHandler),this._scrollHandler=null),this._resizeHandler&&(window.removeEventListener("resize",this._resizeHandler),this._resizeHandler=null)}}class g extends y{constructor(){super(...arguments),this._outsideClickHandler=null,this._escapeHandler=null}setupEventListeners(){this._outsideClickHandler=this.handleOutsideClick.bind(this),document.addEventListener("click",this._outsideClickHandler,!0),this._escapeHandler=this.handleEscapeKey.bind(this),document.addEventListener("keydown",this._escapeHandler)}removeEventListeners(){this._outsideClickHandler&&(document.removeEventListener("click",this._outsideClickHandler,!0),this._outsideClickHandler=null),this._escapeHandler&&(document.removeEventListener("keydown",this._escapeHandler),this._escapeHandler=null)}handleTriggerClick(t){if(t.stopPropagation(),!this.host.disabled){const t=this.host.dropdownController;t&&t.toggle()}}handleOutsideClick(t){if(!t.composedPath().includes(this.host)){const t=this.host.dropdownController;t&&t.close()}}handleEscapeKey(t){if("Escape"===t.key&&this.host.show){t.preventDefault();const e=this.host.dropdownController;e&&e.close()}}handleColorChange(t){if(this.isValidColor(t)&&this.host.color!==t){const e=this.host.color;this.host.color=t,this.dispatchColorChangeEvent(t,e),this.requestUpdate()}}handleInputChange(t){const e=t.detail.value;e&&e!==this.host.color&&this.handleColorChange(e)}dispatchColorChangeEvent(t,e){const o={value:t,previousValue:e,isValid:this.isValidColor(t)};this.dispatchEvent(new CustomEvent("hy-color-change",{bubbles:!0,composed:!0,detail:o})),this.dispatchEvent(new CustomEvent("color-changed",{bubbles:!0,composed:!0,detail:{value:t}}))}isValidColor(t){try{return CSS.supports("color",t)}catch(t){return!1}}}
|
|
14
181
|
/**
|
|
15
182
|
* @license
|
|
16
183
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
17
184
|
* SPDX-License-Identifier: MIT
|
|
18
|
-
*/var w=function(t,e,o,i){for(var r,s=arguments.length,n=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i,l=t.length-1;l>=0;l--)(r=t[l])&&(n=(s<3?r(n):s>3?r(e,o,n):r(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};let k=class extends(a(e)){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 x(this),this.eventController=new g(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 Y}))}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 t={"color-picker-container":!0,"color-picker-container--disabled":this.disabled,"color-picker-container--open":this.show,[`color-picker-container--${this.size}`]:!0};return o`<div class="${l(t)}" data-theme="${this.currentTheme}">${this.renderLabel()}<nr-colorholder-box class="color-holder" color="${this.color}" .size="${this.size}" ?disabled="${this.disabled}" @click="${this.disabled?i:this.handleTriggerClick}" role="button" aria-label="Select color" aria-expanded="${this.show}" aria-haspopup="dialog" tabindex="${this.disabled?-1:0}"></nr-colorholder-box>${this.renderDropdown()} ${this.renderHelperText()}</div>`}renderLabel(){return this.label?o`<label class="color-picker-label">${this.label}</label>`:i}renderDropdown(){return this.show?o`<div class="dropdown-container" role="dialog" aria-label="Color picker">${this.renderDefaultColorSets()} ${this.renderColorPicker()} ${this.renderColorInput()}</div>`:i}renderDefaultColorSets(){return this.defaultColorSets&&0!==this.defaultColorSets.length?o`<nr-default-color-sets .defaultColorSets="${this.defaultColorSets}" @color-click="${this.handleColorChanged}" aria-label="Preset colors"></nr-default-color-sets>`:i}renderColorPicker(){return o`<hex-color-picker color="${this.color}" @color-changed="${this.handleColorChanged}" aria-label="Color gradient picker"></hex-color-picker>`}renderColorInput(){return this.showInput?o`<nr-input type="text" .value="${this.color}" placeholder="${this.inputPlaceholder}" @nr-input="${this.handleInputChange}" ?withCopy="${this.showCopyButton}" .state="${this.isValidColor?"default":"error"}" aria-label="Color value input" aria-invalid="${!this.isValidColor}"></nr-input>`:i}renderHelperText(){return this.helperText?o`<div class="color-picker-helper-text">${this.helperText}</div>`:i}};k.styles=m,w([r({type:String})],k.prototype,"color",void 0),w([r({type:Boolean,reflect:!0})],k.prototype,"show",void 0),w([r({type:Array,attribute:"default-color-sets"})],k.prototype,"defaultColorSets",void 0),w([r({type:Boolean,reflect:!0})],k.prototype,"disabled",void 0),w([r({type:String,reflect:!0})],k.prototype,"size",void 0),w([r({type:String,reflect:!0})],k.prototype,"trigger",void 0),w([r({type:String,reflect:!0})],k.prototype,"placement",void 0),w([r({type:String,reflect:!0})],k.prototype,"animation",void 0),w([r({type:Boolean,attribute:"close-on-select"})],k.prototype,"closeOnSelect",void 0),w([r({type:Boolean,attribute:"close-on-outside-click"})],k.prototype,"closeOnOutsideClick",void 0),w([r({type:Boolean,attribute:"close-on-escape"})],k.prototype,"closeOnEscape",void 0),w([r({type:Boolean,attribute:"show-input"})],k.prototype,"showInput",void 0),w([r({type:Boolean,attribute:"show-copy-button"})],k.prototype,"showCopyButton",void 0),w([r({type:String,reflect:!0})],k.prototype,"format",void 0),w([r({type:String,attribute:"input-placeholder"})],k.prototype,"inputPlaceholder",void 0),w([r({type:String})],k.prototype,"label",void 0),w([r({type:String,attribute:"helper-text"})],k.prototype,"helperText",void 0),w([n()],k.prototype,"isValidColor",void 0),k=w([s("nr-color-picker")],k);const $=(t,e=0,o=1)=>t>o?o:t<e?e:t,C=(t,e=0,o=Math.pow(10,e))=>Math.round(o*t)/o,S=t=>("#"===t[0]&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?C(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:8===t.length?C(parseInt(t.substring(6,8),16)/255,2):1}),E=t=>{const{h:e,s:o,l:i}=(({h:t,s:e,v:o,a:i})=>{const r=(200-e)*o/100;return{h:C(t),s:C(r>0&&r<200?e*o/100/(r<=100?r:200-r)*100:0),l:C(r/2),a:C(i,2)}})(t);return`hsl(${e}, ${o}%, ${i}%)`},z=({h:t,s:e,v:o,a:i})=>{t=t/360*6,e/=100,o/=100;const r=Math.floor(t),s=o*(1-e),n=o*(1-(t-r)*e),l=o*(1-(1-t+r)*e),a=r%6;return{r:C(255*[o,n,s,s,l,o][a]),g:C(255*[l,o,o,n,s,s][a]),b:C(255*[s,s,l,o,o,n][a]),a:C(i,2)}},O=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},P=({r:t,g:e,b:o,a:i})=>{const r=i<1?O(C(255*i)):"";return"#"+O(t)+O(e)+O(o)+r},j=({r:t,g:e,b:o,a:i})=>{const r=Math.max(t,e,o),s=r-Math.min(t,e,o),n=s?r===t?(e-o)/s:r===e?2+(o-t)/s:4+(t-e)/s:0;return{h:C(60*(n<0?n+6:n)),s:C(r?s/r*100:0),v:C(r/255*100),a:i}},B=(t,e)=>{if(t===e)return!0;for(const o in t)if(t[o]!==e[o])return!1;return!0},I={},M=t=>{let e=I[t];return e||(e=document.createElement("template"),e.innerHTML=t,I[t]=e),e},A=(t,e,o)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:o}))};let L=!1;const T=t=>"touches"in t,H=(t,e)=>{const o=T(e)?e.touches[0]:e,i=t.el.getBoundingClientRect();A(t.el,"move",t.getMove({x:$((o.pageX-(i.left+window.pageXOffset))/i.width),y:$((o.pageY-(i.top+window.pageYOffset))/i.height)}))};class V{constructor(t,e,o,i){const r=M(`<div role="slider" tabindex="0" part="${e}" ${o}><div part="${e}-pointer"></div></div>`);t.appendChild(r.content.cloneNode(!0));const s=t.querySelector(`[part=${e}]`);s.addEventListener("mousedown",this),s.addEventListener("touchstart",this),s.addEventListener("keydown",this),this.el=s,this.xy=i,this.nodes=[s.firstChild,s]}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(L?"touchmove":"mousemove",this),e(L?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(L&&!T(t)||(L||(L=T(t)),0)))(t)||!L&&0!=t.button)return;this.el.focus(),H(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),H(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const o=e.keyCode;o>40||t.xy&&o<37||o<33||(e.preventDefault(),A(t.el,"move",t.getMove({x:39===o?.01:37===o?-.01:34===o?.05:33===o?-.05:35===o?1:36===o?-1:0,y:40===o?.01:38===o?-.01:0},!0)))})(this,t)}}style(t){t.forEach(((t,e)=>{for(const o in t)this.nodes[e].style.setProperty(o,t[o])}))}}class q extends V{constructor(t){super(t,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:t}){this.h=t,this.style([{left:t/360*100+"%",color:E({h:t,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",`${C(t)}`)}getMove(t,e){return{h:e?$(this.h+360*t.x,0,360):360*t.x}}}class D extends V{constructor(t){super(t,"saturation",'aria-label="Color"',!0)}update(t){this.hsva=t,this.style([{top:100-t.v+"%",left:`${t.s}%`,color:E(t)},{"background-color":E({h:t.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${C(t.s)}%, Brightness ${C(t.v)}%`)}getMove(t,e){return{s:e?$(this.hsva.s+100*t.x,0,100):100*t.x,v:e?$(this.hsva.v-100*t.y,0,100):Math.round(100-100*t.y)}}}const _=Symbol("same"),F=Symbol("color"),N=Symbol("hsva"),U=Symbol("update"),W=Symbol("parts"),G=Symbol("css"),K=Symbol("sliders");class R extends HTMLElement{static get observedAttributes(){return["color"]}get[G](){return[':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',"[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}","[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}"]}get[K](){return[D,q]}get color(){return this[F]}set color(t){if(!this[_](t)){const e=this.colorModel.toHsva(t);this[U](e),this[F]=t}}constructor(){super();const t=M(`<style>${this[G].join("")}</style>`),e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),e.addEventListener("move",this),this[W]=this[K].map((t=>new t(e)))}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,o){const i=this.colorModel.fromAttr(o);this[_](i)||(this.color=i)}handleEvent(t){const e=this[N],o={...e,...t.detail};let i;this[U](o),B(o,e)||this[_](i=this.colorModel.fromHsva(o))||(this[F]=i,A(this,"color-changed",{value:i}))}[_](t){return this.color&&this.colorModel.equal(t,this.color)}[U](t){this[N]=t,this[W].forEach((e=>e.update(t)))}}const J={defaultColor:"#000",toHsva:t=>j(S(t)),fromHsva:({h:t,s:e,v:o})=>P(z({h:t,s:e,v:o,a:1})),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()||B(S(t),S(e)),fromAttr:t=>t};class Q extends R{get colorModel(){return J}}class X extends Q{}customElements.define("hex-color-picker",X);var Y=Object.freeze({__proto__:null,HexColorPicker:X});export{p as ColorHolderBox,k as ColorPicker};
|
|
185
|
+
*/var w=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(s<3?i(n):s>3?i(e,o,n):i(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};let k=class extends(a(e)){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 x(this),this.eventController=new g(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 Y}))}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 t={"color-picker-container":!0,"color-picker-container--disabled":this.disabled,"color-picker-container--open":this.show,[`color-picker-container--${this.size}`]:!0};return o`
|
|
186
|
+
<div class="${l(t)}" data-theme="${this.currentTheme}">
|
|
187
|
+
${this.renderLabel()}
|
|
188
|
+
|
|
189
|
+
<nr-colorholder-box
|
|
190
|
+
class="color-holder"
|
|
191
|
+
color="${this.color}"
|
|
192
|
+
.size=${this.size}
|
|
193
|
+
?disabled="${this.disabled}"
|
|
194
|
+
@click=${this.disabled?r:this.handleTriggerClick}
|
|
195
|
+
role="button"
|
|
196
|
+
aria-label="Select color"
|
|
197
|
+
aria-expanded="${this.show}"
|
|
198
|
+
aria-haspopup="dialog"
|
|
199
|
+
tabindex="${this.disabled?-1:0}"
|
|
200
|
+
></nr-colorholder-box>
|
|
201
|
+
|
|
202
|
+
${this.renderDropdown()}
|
|
203
|
+
${this.renderHelperText()}
|
|
204
|
+
</div>
|
|
205
|
+
`}renderLabel(){return this.label?o`
|
|
206
|
+
<label class="color-picker-label">
|
|
207
|
+
${this.label}
|
|
208
|
+
</label>
|
|
209
|
+
`:r}renderDropdown(){return this.show?o`
|
|
210
|
+
<div
|
|
211
|
+
class="dropdown-container"
|
|
212
|
+
role="dialog"
|
|
213
|
+
aria-label="Color picker"
|
|
214
|
+
>
|
|
215
|
+
${this.renderDefaultColorSets()}
|
|
216
|
+
${this.renderColorPicker()}
|
|
217
|
+
${this.renderColorInput()}
|
|
218
|
+
</div>
|
|
219
|
+
`:r}renderDefaultColorSets(){return this.defaultColorSets&&0!==this.defaultColorSets.length?o`
|
|
220
|
+
<nr-default-color-sets
|
|
221
|
+
.defaultColorSets=${this.defaultColorSets}
|
|
222
|
+
@color-click="${this.handleColorChanged}"
|
|
223
|
+
aria-label="Preset colors">
|
|
224
|
+
</nr-default-color-sets>
|
|
225
|
+
`:r}renderColorPicker(){return o`
|
|
226
|
+
<hex-color-picker
|
|
227
|
+
color="${this.color}"
|
|
228
|
+
@color-changed="${this.handleColorChanged}"
|
|
229
|
+
aria-label="Color gradient picker">
|
|
230
|
+
</hex-color-picker>
|
|
231
|
+
`}renderColorInput(){return this.showInput?o`
|
|
232
|
+
<nr-input
|
|
233
|
+
type="text"
|
|
234
|
+
.value="${this.color}"
|
|
235
|
+
placeholder="${this.inputPlaceholder}"
|
|
236
|
+
@nr-input="${this.handleInputChange}"
|
|
237
|
+
?withCopy=${this.showCopyButton}
|
|
238
|
+
.state="${this.isValidColor?"default":"error"}"
|
|
239
|
+
aria-label="Color value input"
|
|
240
|
+
aria-invalid="${!this.isValidColor}">
|
|
241
|
+
</nr-input>
|
|
242
|
+
`:r}renderHelperText(){return this.helperText?o`
|
|
243
|
+
<div class="color-picker-helper-text">
|
|
244
|
+
${this.helperText}
|
|
245
|
+
</div>
|
|
246
|
+
`:r}};k.styles=m,w([i({type:String})],k.prototype,"color",void 0),w([i({type:Boolean,reflect:!0})],k.prototype,"show",void 0),w([i({type:Array,attribute:"default-color-sets"})],k.prototype,"defaultColorSets",void 0),w([i({type:Boolean,reflect:!0})],k.prototype,"disabled",void 0),w([i({type:String,reflect:!0})],k.prototype,"size",void 0),w([i({type:String,reflect:!0})],k.prototype,"trigger",void 0),w([i({type:String,reflect:!0})],k.prototype,"placement",void 0),w([i({type:String,reflect:!0})],k.prototype,"animation",void 0),w([i({type:Boolean,attribute:"close-on-select"})],k.prototype,"closeOnSelect",void 0),w([i({type:Boolean,attribute:"close-on-outside-click"})],k.prototype,"closeOnOutsideClick",void 0),w([i({type:Boolean,attribute:"close-on-escape"})],k.prototype,"closeOnEscape",void 0),w([i({type:Boolean,attribute:"show-input"})],k.prototype,"showInput",void 0),w([i({type:Boolean,attribute:"show-copy-button"})],k.prototype,"showCopyButton",void 0),w([i({type:String,reflect:!0})],k.prototype,"format",void 0),w([i({type:String,attribute:"input-placeholder"})],k.prototype,"inputPlaceholder",void 0),w([i({type:String})],k.prototype,"label",void 0),w([i({type:String,attribute:"helper-text"})],k.prototype,"helperText",void 0),w([n()],k.prototype,"isValidColor",void 0),k=w([s("nr-color-picker")],k);const $=(t,e=0,o=1)=>t>o?o:t<e?e:t,C=(t,e=0,o=Math.pow(10,e))=>Math.round(o*t)/o,S=t=>("#"===t[0]&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?C(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:8===t.length?C(parseInt(t.substring(6,8),16)/255,2):1}),E=t=>{const{h:e,s:o,l:r}=(({h:t,s:e,v:o,a:r})=>{const i=(200-e)*o/100;return{h:C(t),s:C(i>0&&i<200?e*o/100/(i<=100?i:200-i)*100:0),l:C(i/2),a:C(r,2)}})(t);return`hsl(${e}, ${o}%, ${r}%)`},z=({h:t,s:e,v:o,a:r})=>{t=t/360*6,e/=100,o/=100;const i=Math.floor(t),s=o*(1-e),n=o*(1-(t-i)*e),l=o*(1-(1-t+i)*e),a=i%6;return{r:C(255*[o,n,s,s,l,o][a]),g:C(255*[l,o,o,n,s,s][a]),b:C(255*[s,s,l,o,o,n][a]),a:C(r,2)}},O=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},P=({r:t,g:e,b:o,a:r})=>{const i=r<1?O(C(255*r)):"";return"#"+O(t)+O(e)+O(o)+i},j=({r:t,g:e,b:o,a:r})=>{const i=Math.max(t,e,o),s=i-Math.min(t,e,o),n=s?i===t?(e-o)/s:i===e?2+(o-t)/s:4+(t-e)/s:0;return{h:C(60*(n<0?n+6:n)),s:C(i?s/i*100:0),v:C(i/255*100),a:r}},B=(t,e)=>{if(t===e)return!0;for(const o in t)if(t[o]!==e[o])return!1;return!0},I={},M=t=>{let e=I[t];return e||(e=document.createElement("template"),e.innerHTML=t,I[t]=e),e},A=(t,e,o)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:o}))};let L=!1;const T=t=>"touches"in t,H=(t,e)=>{const o=T(e)?e.touches[0]:e,r=t.el.getBoundingClientRect();A(t.el,"move",t.getMove({x:$((o.pageX-(r.left+window.pageXOffset))/r.width),y:$((o.pageY-(r.top+window.pageYOffset))/r.height)}))};class V{constructor(t,e,o,r){const i=M(`<div role="slider" tabindex="0" part="${e}" ${o}><div part="${e}-pointer"></div></div>`);t.appendChild(i.content.cloneNode(!0));const s=t.querySelector(`[part=${e}]`);s.addEventListener("mousedown",this),s.addEventListener("touchstart",this),s.addEventListener("keydown",this),this.el=s,this.xy=r,this.nodes=[s.firstChild,s]}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(L?"touchmove":"mousemove",this),e(L?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(L&&!T(t)||(L||(L=T(t)),0)))(t)||!L&&0!=t.button)return;this.el.focus(),H(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),H(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const o=e.keyCode;o>40||t.xy&&o<37||o<33||(e.preventDefault(),A(t.el,"move",t.getMove({x:39===o?.01:37===o?-.01:34===o?.05:33===o?-.05:35===o?1:36===o?-1:0,y:40===o?.01:38===o?-.01:0},!0)))})(this,t)}}style(t){t.forEach(((t,e)=>{for(const o in t)this.nodes[e].style.setProperty(o,t[o])}))}}class q extends V{constructor(t){super(t,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:t}){this.h=t,this.style([{left:t/360*100+"%",color:E({h:t,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",`${C(t)}`)}getMove(t,e){return{h:e?$(this.h+360*t.x,0,360):360*t.x}}}class D extends V{constructor(t){super(t,"saturation",'aria-label="Color"',!0)}update(t){this.hsva=t,this.style([{top:100-t.v+"%",left:`${t.s}%`,color:E(t)},{"background-color":E({h:t.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${C(t.s)}%, Brightness ${C(t.v)}%`)}getMove(t,e){return{s:e?$(this.hsva.s+100*t.x,0,100):100*t.x,v:e?$(this.hsva.v-100*t.y,0,100):Math.round(100-100*t.y)}}}const F=Symbol("same"),_=Symbol("color"),N=Symbol("hsva"),U=Symbol("update"),W=Symbol("parts"),G=Symbol("css"),K=Symbol("sliders");class R extends HTMLElement{static get observedAttributes(){return["color"]}get[G](){return[':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',"[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}","[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}"]}get[K](){return[D,q]}get color(){return this[_]}set color(t){if(!this[F](t)){const e=this.colorModel.toHsva(t);this[U](e),this[_]=t}}constructor(){super();const t=M(`<style>${this[G].join("")}</style>`),e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),e.addEventListener("move",this),this[W]=this[K].map((t=>new t(e)))}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,o){const r=this.colorModel.fromAttr(o);this[F](r)||(this.color=r)}handleEvent(t){const e=this[N],o={...e,...t.detail};let r;this[U](o),B(o,e)||this[F](r=this.colorModel.fromHsva(o))||(this[_]=r,A(this,"color-changed",{value:r}))}[F](t){return this.color&&this.colorModel.equal(t,this.color)}[U](t){this[N]=t,this[W].forEach((e=>e.update(t)))}}const J={defaultColor:"#000",toHsva:t=>j(S(t)),fromHsva:({h:t,s:e,v:o})=>P(z({h:t,s:e,v:o,a:1})),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()||B(S(t),S(e)),fromAttr:t=>t};class Q extends R{get colorModel(){return J}}class X extends Q{}customElements.define("hex-color-picker",X);var Y=Object.freeze({__proto__:null,HexColorPicker:X});export{p as ColorHolderBox,k as ColorPicker};
|