UNPKG

smart-webcomponents

Version:

Web Components & Custom Elements for Professional Web Applications

github.com/HTMLElements/smart-elements

HTMLElements/smart-elements

34 lines (20 loc) • 382 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* Smart UI v22.0.10 (2025-02-10) Copyright (c) 2011-2024 jQWidgets. License: https://htmlelements.com/license/ */ // (function(){ if (typeof document === 'undefined') { return; } /* Smart UI v19.1.1 (2024-June) Copyright (c) 2011-2024 jQWidgets. License: https://htmlelements.com/license/ */ /******/ (() => { // webpackBootstrap /******/ var __webpack_modules__ = ({ /***/ 2612: /***/ (() => { Smart("smart-button",class extends Smart.ContentElement{static get properties(){return{value:{type:"string"},name:{type:"string"},type:{value:"button",type:"string"},clickMode:{allowedValues:["hover","press","release","pressAndRelease"],type:"string",value:"release"}}}static get styleUrls(){return["smart.button.css"]}template(){return"<button class=\"smart-button smart-unselectable\" inner-h-t-m-l='[[innerHTML]]' id='button' type='[[type]]' name='[[name]]' value='[[value]]' disabled='[[disabled]]' role=\"presentation\"></button>"}refresh(){}static get listeners(){return{"button.down":"_downHandler","button.mouseenter":"_mouseEnterHandler","button.mouseleave":"_mouseLeaveHandler","button.touchend":"_touchEndHandler","button.click":"_clickHandler","button.up":"_upHandler",up:"_upHandler","button.focus":"_focusHandler","button.blur":"_blurHandler"}}focus(){const e=this;e.$.button?e.$.button.focus():HTMLElement.prototype.focus.call(e)}blur(){const e=this;e.$.button?e.$.button.blur():HTMLElement.prototype.blur.call(e)}_upHandler(e){const t=this;if(e.stopPropagation(),t.$.setAttributeValue("active",!1),t.dataset.target){const n=document.querySelector(t.dataset.target);let a=t.dataset.toggle,r=t.dataset.arguments;const i="smart-window".toLowerCase();if(n&&n.nodeName.toLowerCase()===i&&"modal"===a&&(a="openModal"),"tab"===a||"pill"===a||"list"===a){const e=this.closest(".nav, .list-group"),a='[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',r=!e||"UL"!==e.nodeName&&"OL"!==e.nodeName?e.children(".active"):e.querySelectorAll("li > .active");if(e){const n=e.querySelectorAll(a);for(let e=0;e<n.length;e++)n[e].classList.remove("primary");for(let e=0;e<r.length;e++)r[e].classList.remove("active");let i=t.parentNode;for(;i;){if("LI"===i.nodeName){i.classList.add("active");break}i=i.parentNode}t.classList.add("primary")}return n.parentNode.querySelectorAll(".active").forEach((e=>{e.classList.remove("active"),e.classList.add("smart-hidden")})),n.classList.add("active"),void n.classList.remove("smart-hidden")}a&&n&&!n[a]&&"collapse"===a&&(setTimeout((()=>{n.classList.contains("smart-hidden")?n.classList.remove("smart-hidden"):n.classList.add("smart-hidden")})),e.originalEvent.preventDefault()),a&&n&&!n[a]&&"dropdown"===a?(setTimeout((()=>{n.opened=!n.opened})),e.originalEvent.preventDefault()):a&&n&&n[a]&&(setTimeout((()=>{r?n[a](r):n[a]()}),50),e.originalEvent.preventDefault())}}_focusHandler(){this.$.setAttributeValue("focus",!0),this.$.fireEvent("focus")}_blurHandler(){this.$.setAttributeValue("focus",!1),this.$.fireEvent("blur")}_clickHandler(e){const t=this;("release"!==t.clickMode&&"pressAndRelease"!==t.clickMode||t.readonly)&&(e.preventDefault(),e.stopPropagation())}_downHandler(e){const t=this;if(!(t.disabled||(t.hasRippleAnimation&&Smart.Utilities.Animation.Ripple.animate(t,e.pageX,e.pageY),t.$.setAttributeValue("active",!0),"press"!==t.clickMode&&"pressAndRelease"!==t.clickMode||t.readonly))){if(t.hasAttribute("smart-blazor"))return void t.$.dispatchEvent(new Event("click"));const n="buttons"in e?e.buttons:e.which;t.$.fireEvent("click",{buttons:n,clientX:e.clientX,clientY:e.clientY,pageX:e.pageX,pageY:e.pageY,screenX:e.screenX,screenY:e.screenY})}}_mouseEnterHandler(e){const t=this;if(!t.readonly&&(t.$button.setAttributeValue("hover",!0),t.$.setAttributeValue("hover",!0),"hover"===t.clickMode)){const n="buttons"in e?e.buttons:e.which;if(t.hasAttribute("smart-blazor"))return void t.$.dispatchEvent(new Event("click"));t.$.fireEvent("click",{buttons:n,clientX:e.clientX,clientY:e.clientY,pageX:e.pageX,pageY:e.pageY,screenX:e.screenX,screenY:e.screenY})}}_touchEndHandler(){const e=this;setTimeout((function(){e.$button.setAttributeValue("hover",!1),e.$.setAttributeValue("hover",!1)}),300)}_mouseLeaveHandler(){this.$button.setAttributeValue("hover",!1),this.$.setAttributeValue("hover",!1)}propertyChangedHandler(e,t,n){super.propertyChangedHandler(e,t,n);const a=this;"disabled"===e?(a._setFocusable(),a.$button&&a.$button.setAttributeValue("hover",!1),a.$.setAttributeValue("hover",!1),a instanceof Smart.RepeatButton&&a._stopRepeat()):"unfocusable"===e&&a._setFocusable()}_setFocusable(){const e=this,t=e.$.button?e.$.button:e;if(e.disabled||e.unfocusable)return t.removeAttribute("tabindex"),void(t.tabIndex=-1);t.tabIndex=e.tabIndex>0?e.tabIndex:0}ready(){const e=this;super.ready(),e.setAttribute("role","button"),e._setFocusable(),e.enableShadowDOM&&e.$.hiddenInput&&e.appendChild(e.$.hiddenInput)}}),Smart("smart-repeat-button",class extends Smart.Button{static get properties(){return{delay:{value:50,type:"number"},initialDelay:{value:150,type:"number"}}}static get listeners(){return{"button.down":"_startRepeat","button.mouseenter":"_overriddenHandler","button.mouseleave":"_overriddenHandler","button.pointerenter":"_updateInBoundsFlag","button.pointerleave":"_updateInBoundsFlag","button.touchmove":"_touchmoveHandler","document.up":"_stopRepeat"}}_clickHandler(e){const t=this;("release"!==t.clickMode||t.preventDefaultClick||t.readonly||t.disabled)&&(e.preventDefault(),e.stopPropagation(),t.preventDefaultClick=!1)}_updateInBoundsFlag(e){const t=this;-1!==e.type.indexOf("leave")?(t._isPointerInBounds=!1,t.$button.setAttributeValue("hover",!1),t.$.setAttributeValue("hover",!1)):(t._isPointerInBounds=!0,t.$button.setAttributeValue("hover",!0),t.$.setAttributeValue("hover",!0)),1!==("buttons"in e?e.buttons:e.which)&&t._stopRepeat(e)}_startRepeat(e){const t=this;t.setAttribute("active",""),t._initialTimer||t.readonly||(t._initialTimer=setTimeout((function(){t._repeatTimer=setInterval((()=>{if(t._isPointerInBounds){if(t.hasAttribute("smart-blazor"))return t.$.dispatchEvent(new Event("click")),void(t.preventDefaultClick=!0);const n="buttons"in e?e.buttons:e.which;t.$.fireEvent("click",{buttons:n,clientX:e.clientX,clientY:e.clientY,pageX:e.pageX,pageY:e.pageY,screenX:e.screenX,screenY:e.screenY}),t.preventDefaultClick=!0}}),t.delay)}),t.initialDelay))}_stopRepeat(e){const t=this;t.readonly||e&&("pointercancel"===e.type||e.originalEvent&&"pointercancel"===e.originalEvent.type)||(t.$.setAttributeValue("active",!1),t._repeatTimer&&(clearInterval(t._repeatTimer),t._repeatTimer=null),t._initialTimer&&(clearTimeout(t._initialTimer),t._initialTimer=null))}_touchmoveHandler(e){this.preventDefaultClick&&e.cancelable&&(e.preventDefault(),e.stopPropagation())}_overriddenHandler(){}}),Smart("smart-toggle-button",class extends Smart.Button{static get properties(){return{checked:{value:!1,type:"boolean?"},falseContent:{value:"",reflectToAttribute:!1,type:"string"},indeterminateContent:{value:"",reflectToAttribute:!1,type:"string"},indeterminate:{value:!1,type:"boolean"},trueContent:{value:"",reflectToAttribute:!1,type:"string"},indeterminateTemplate:{value:null,type:"any"},trueTemplate:{value:null,type:"any"},falseTemplate:{value:null,type:"any"},type:{value:"toggle",type:"string",defaultReflectToAttribute:!0,readonly:!0}}}static get listeners(){return{keydown:"_keyHandler",keyup:"_keyHandler",dragstart:"_dragStartHandler","button.click":"_buttonClickHandler","button.mouseenter":"_buttonMouseEnterHandler","button.mouseleave":"_buttonMouseLeaveHandler","document.up":"_documentUpHandler"}}ready(){super.ready(),this._setAriaState(),this._updateGroupValue()}_setAriaState(){const e=this,t=e.checked;null!==t?e.setAttribute("aria-pressed",t):e.setAttribute("aria-pressed","mixed")}_buttonClickHandler(){}_buttonMouseLeaveHandler(){this.removeAttribute("hover")}_buttonMouseEnterHandler(){const e=this;e.setAttribute("hover",""),e.disabled||e.readonly||"hover"!==e.clickMode||(e._changeCheckState("pointer"),e.focus(),e._updateHidenInputNameAndValue())}_documentUpHandler(e){const t=this;t._pressed&&(t._pressed=!1,t.disabled||t.readonly||"press"===t.clickMode||"pointercancel"===e.originalEvent.type||(t._changeCheckState("pointer"),t.focus(),t._updateHidenInputNameAndValue()))}_downHandler(e){const t=this;t.disabled||t.readonly||(t.hasRippleAnimation&&Smart.Utilities.Animation.Ripple.animate(t,e.pageX,e.pageY),t._pressed=!0,"press"!==t.clickMode&&"pressAndRelease"!==t.clickMode||(t._changeCheckState("pointer"),t.hasAttribute("smart-blazor")?t.$.dispatchEvent(new Event("click")):t.$.fireEvent("click"),t._updateHidenInputNameAndValue()),"press"===t.clickMode&&(e.preventDefault(),e.stopPropagation()))}_dragStartHandler(e){e.preventDefault()}_keyHandler(e){const t=this;if(!0!==t.disabled&&!t.readonly&&32===e.keyCode){if("keydown"===e.type)return void e.preventDefault();if("none"===t.switchMode)return;t._changeCheckState("keyboard"),t._updateHidenInputNameAndValue()}}_updateGroupValue(){const e=this;if(e.dataset.target){const t=document.querySelector(e.dataset.target);if(t){const n=document.querySelectorAll('[data-target="'+e.dataset.target+'"]'),a=[];if(e.checked){const n=e.dataset.property,a=e.dataset.value;if(n&&void 0!==t[n]){let e=a;"true"===e&&(e=!0),"false"===e&&(e=!1),t[n]=e}}for(let t=0;t<n.length;t++){const r=n[t];r.checked&&(r.name?(a.push(r.name),e.id&&r.setAttribute("data-id",e.id)):e.id&&a.push(e.id))}t.value=a.toString(),e._targetDispatchTimer&&clearTimeout(e._targetDispatchTimer),e._targetDispatchTimer=setTimeout((()=>{t.dispatchEvent(new Event("change"))}),100)}}}_changeCheckState(e){const t=this;let n=null;null===t.checked?t.checked=!0:(n=t.checked,t.checked=!t.checked),t._handleTextSelection(),t.$.fireEvent("change",{value:t.checked,oldValue:n,changeType:e}),t.checked?t.$.fireEvent("checkValue",{changeType:e}):t.$.fireEvent("uncheckValue",{changeType:e}),t._updateGroupValue(),t._setAriaState()}_handleTextSelection(){const e=this;e.$.addClass("smart-unselectable"),e.timer&&clearTimeout(e.timer),e.timer=setTimeout((()=>e.$.removeClass("smart-unselectable")),500)}propertyChangedHandler(e,t,n){super.propertyChangedHandler(e,t,n);const a=this;if("checked"===e)return a.$.fireEvent("change",{value:n,oldValue:t,changeType:"api"}),void a._setAriaState();switch(e){case"trueTemplate":a._handleTemplate(!0);break;case"falseTemplate":a._handleTemplate(!1);break;case"indeterminateTemplate":a._handleTemplate()}}_htmlBindOnInitialization(){const e=this;e._bindContentProperty("trueContent","smart-true-content"),e._bindContentProperty("falseContent","smart-false-content"),e._bindContentProperty("indeterminateContent","smart-indeterminate-content")}_bindContentProperty(e,t){const n=this;if(!n.$[e+"Container"])return;let a=document.createElement("div");a.innerHTML=n.innerHTML;let r,i=a.getElementsByClassName(t);if(i.length>0)for(let e=0;e<i.length;e++)r=i[e];""===n[e]&&(n[e]=void 0===r?"":r.outerHTML),n.$[e+"Container"].innerHTML=n[e]}_updateContentProperties(){const e=this;function t(t){e.$[t+"Container"]&&(e[t]=e.$[t+"Container"].innerHTML)}t("trueContent"),t("falseContent"),t("indeterminateContent")}_updateHidenInputValue(){const e=this;if(!e.$.hiddenInput)return;let t;t=null===e.checked?"null":!1===e.checked?"off":e.value||"on",e.$.hiddenInput.setAttribute("value",t)}_updateHidenInputName(){const e=this;if(!e.$.hiddenInput)return;let t=!1===e.checked?"":e.name||"";e.$.hiddenInput.setAttribute("name",t)}_updateHidenInputNameAndValue(){this._updateHidenInputName(),this._updateHidenInputValue()}_handleTemplate(e,t){const n=this;let a,r,i;if(!0===e?(a=n.trueTemplate,r=n.$.trueContentContainer,i=n.trueContent):!1===e?(a=n.falseTemplate,r=n.$.falseContentContainer,i=n.falseContent):(a=n.indeterminateTemplate,r=n.$.indeterminateContentContainer,i=n.indeterminateContent),t&&(r.innerHTML=i||""),null===a||!a)return;if("function"==typeof a)return void a(r,{value:i});if(!("content"in document.createElement("template")))return void n.error(n.localize("htmlTemplateNotSuported",{elementType:n.nodeName.toLowerCase()}));if(a=document.getElementById(a),null===a||!("content"in a))return void n.error(n.localize("invalidTemplate",{elementType:n.nodeName.toLowerCase(),property:"template"}));const o=a.content,l=o.childNodes.length,s=/{{\w+}}/g;let u,d=[];for(let e=0;e<l;e++)for(u=s.exec(o.childNodes[e].innerHTML);u;)d.push({childNodeIndex:e,bindingString:u[0]}),u=s.exec(o.childNodes[e].innerHTML);const c=d.length;let p,h,m=document.importNode(a.content,!0);for(let e=0;e<c;e++){p=m.childNodes[d[e].childNodeIndex],h=d.length;for(let t=0;t<h;t++)p.innerHTML=p.innerHTML.replace(d[e].bindingString,i)}r.innerHTML="";for(let e=0;e<m.childNodes.length;e++)m.childNodes[e].outerHTML&&(r.innerHTML+=m.childNodes[e].outerHTML)}}); /***/ }), /***/ 9097: /***/ (() => { Smart("smart-check-box",class extends Smart.ToggleButton{static get properties(){return{checkMode:{value:"both",allowedValues:["both","input","label"],type:"string"},type:{value:"checkbox",type:"string",defaultReflectToAttribute:!0,readonly:!0}}}template(){return"<div id='container' class='smart-container' role=\"presentation\">\n <div class='smart-overlay' role=\"presentation\"></div>\n <span id='checkBoxInput' class='smart-input' aria-hidden=\"true\"></span>\n <span id='checkBoxLabel' inner-h-t-m-l='[[innerHTML]]' class='smart-label'><content></content></span>\n <input id='hiddenInput' class='smart-hidden-input' type='hidden'>\n </div>"}static get listeners(){return{down:"_downHandler","document.up":"_documentUpHandler","checkBoxInput.mouseenter":"_mouseEnterHandler","checkBoxInput.mouseleave":"_mouseLeaveHandler",focus:"_focusHandler",blur:"_blurHandler"}}static get styleUrls(){return["smart.toggle.css"]}_focusHandler(){this.$.setAttributeValue("focus",!0)}_blurHandler(){this.$.setAttributeValue("focus",!1)}_mouseEnterHandler(){this.$.setAttributeValue("hover",!0)}_mouseLeaveHandler(){this.$.setAttributeValue("hover",!1)}ready(){const e=this;super.ready(),e.setAttribute("role","checkbox"),e.indeterminate&&(e._valueCache=e.checked,e.checked=null,e._setAriaState()),e.classList.add("smart-toggle-box"),e._updateHidenInputNameAndValue()}propertyChangedHandler(e,t,a){super.propertyChangedHandler(e,t,a);const n=this;switch(n._updateContentProperties(),e){case"indeterminate":a?(n._valueCache=n.checked,n.checked=null):n.checked=n._valueCache,n._setAriaState(),n._updateHidenInputNameAndValue();break;case"value":case"checked":n._updateHidenInputNameAndValue();break;case"name":n._updateHidenInputName()}}_documentUpHandler(e){const t=this;if(!t._pressed||"pointercancel"===e.originalEvent.type)return;const a=t.enableShadowDOM?e.originalEvent.composedPath()[0]:e.originalEvent.target;if(t._pressed=!1,t.$.setAttributeValue("active",!1),!(t.disabled||t.readonly||"input"===t.checkMode&&a!==t.$.checkBoxInput||"label"===t.checkMode&&a!==t.$.checkBoxLabel)){if("press"===t.clickMode)return e.preventDefault(),void e.stopPropagation();t._changeCheckState("pointer"),t.focus(),t._handleTextSelection(),t._updateHidenInputNameAndValue()}}_downHandler(e){const t=this,a=t.enableShadowDOM?e.originalEvent.composedPath()[0]:e.originalEvent.target;if(!(t.disabled||t.readonly||"input"===t.checkMode&&a!==t.$.checkBoxInput||"label"===t.checkMode&&a!==t.$.checkBoxLabel)){if(t.$.setAttributeValue("active",!0),t.hasRippleAnimation){const e=t.$.checkBoxInput.getBoundingClientRect(),a=window.scrollX||window.pageXOffset,n=window.scrollY||window.pageYOffset;Smart.Utilities.Animation.Ripple.animate(t.$.checkBoxInput,e.left+e.width/2+a,e.top+e.height/2+n)}t._pressed=!0,"press"!==t.clickMode&&"pressAndRelease"!==t.clickMode||(t._changeCheckState("pointer"),t.$.fireEvent("click"),t.focus(),t._updateHidenInputNameAndValue())}}_setAriaState(){const e=this,t=e.checked;null!==t?e.setAttribute("aria-checked",t):e.setAttribute("aria-checked","mixed")}}); /***/ }), /***/ 9884: /***/ (() => { Smart("smart-color-panel",class extends Smart.BaseElement{static get properties(){return{applyValueMode:{value:"instantly",allowedValues:["instantly","useButtons"],type:"string"},columnCount:{value:8,type:"number?"},displayMode:{value:"default",allowedValues:["default","grid","palette","radial","hexagonal","spectrumGrid","materialGrid"],type:"string"},disableUndo:{value:!1,type:"boolean"},editAlphaChannel:{value:!1,type:"boolean"},enableCustomColors:{value:!1,type:"boolean"},gridThemeColors:{value:null,type:"array?",reflectToAttribute:!1},gridShadeColors:{value:null,type:"array?",reflectToAttribute:!1},gridStandardColors:{value:null,type:"array?",reflectToAttribute:!1},hideAlphaEditor:{value:!1,type:"boolean"},hideContentToFit:{value:["RGB","HEX","alpha","previewContainer"],type:"array"},hideHEXEditor:{value:!1,type:"boolean"},hidePreviewContainer:{value:!1,type:"boolean"},hideRGBEditor:{value:!1,type:"boolean"},inverted:{value:!1,type:"boolean"},messages:{value:{en:{redPrefix:"R:",greenPrefix:"G:",bluePrefix:"B:",hexPrefix:"#:",alphaPrefix:"Alpha:",ok:"OK",cancel:"CANCEL",customColor:"CUSTOM COLOR",standardColors:"Standard colors",themeColors:"Theme colors"}},type:"object",extend:!0},name:{value:"",type:"string"},palette:{value:"default",allowedValues:["default","gray","red","green","blue","custom"],type:"string"},paletteColors:{value:null,type:"array?",reflectToAttribute:!1},paletteCustomColors:{value:null,type:"array?",reflectToAttribute:!1},tooltipDisplayMode:{value:"hex",allowedValues:["none","rgba","rgb","hex"],type:"string"},value:{value:null,type:"string?"},valueFormat:{value:"default",allowedValues:["rgb","rgba","hex","default"],type:"string"},valueMember:{value:"value",type:"string?"}}}static get listeners(){return{"container.click":"_containerClickHandler","container.mouseover":"_handleGridModeCellHover","paletteModeContainer.down":"_paletteDownHandler","container.change":"_handleInputChange","document.move":"_moveThumbHandler","document.up":"_releaseThumbUpHandler","paletteModeContainer.wheel":"_inputWheelHandler",resize:"_hideControlsByPriority","hexModeResizeTrigger.resize":"_resizeHoneycombItems","paletteModeContainer.move":"_paletteModeContainerMoveHandler"}}static get requires(){return{"Smart.Utilities.Draw":"smart.draw.js","Smart.Button":"smart.button.js","Smart.Tooltip":"smart.tooltip.js"}}static get styleUrls(){return["smart.button.css","smart.tooltip.css","smart.colorpanel.css"]}template(){return'<div id="container" role="presentation">\n <div id="gridModeContainer" class="grid-mode-container" role="presentation"></div>\n <div id="paletteModeContainer" class="palette-mode-container" role="presentation">\n <div id="colorPaletteContainer" class="color-palette-container" role="presentation">\n <div id="colorPalette" class="color-palette no-touch" aria-label="Color palette">\n <div id="colorPaletteThumb" class="color-palette-thumb" role="presentation"></div>\n </div>\n <div id="hueScale" class="hue-scale no-touch" aria-label="Hue scale" role="slider" aria-valuemin="0" aria-valuemax="360">\n <div id="hueScaleThumb" class="hue-scale-thumb" role="presentation"></div>\n </div>\n <div id="colorPaletteRadial" class="color-palette-radial no-touch" aria-label="Radial color palette">\n <span class="white-radial-gradient" role="presentation"></span>\n <div id="colorPaletteRadialThumb" class="color-palette-radial-thumb" role="presentation"></div>\n </div>\n <div id="colorPaletteHexagonal" class="color-palette-hexagonal" aria-label="Hexagonal color palette"></div>\n <div id="brightnessScale" class="brightness-scale no-touch" aria-label="Brightness scale" role="slider" aria-valuemin="0" aria-valuemax="1">\n <div id="brightnessScaleThumb" class="brightness-scale-thumb" role="presentation"></div>\n </div>\n <span id="hexModeResizeTrigger" class="color-sample hex-mode-resize-trigger"></span>\n <div id="colorControlsContainer" class="color-controls-container" role="presentation"></div>\n </div>\n <div id="alphaChannelContainer" class="alpha-channel-container"></div>\n </div>\n <div id="buttonsContainer" class="buttons-container"></div>\n <input id="hiddenInput" type="hidden" name="[[name]]">\n </div>'}propertyChangedHandler(e,a,t){const l=this;switch(e){case"applyValueMode":"instantly"!==t||l.value||(l._HSV={h:0,s:0,v:1},l._selectedItem&&l._selectedItem.classList.contains("selected")&&(l._selectedItem.classList.remove("selected"),l._selectedItem.removeAttribute("aria-current"),l._selectedItem.style.stroke=null)),"palette"!==l.displayMode&&"radial"!==l.displayMode&&"hexagonal"!==l.displayMode||l._handleCancelButtonClick(),"useButtons"===t&&l._createApplyValueButtons();break;case"paletteColors":l._customPalette=l._mapDataSourceToPalette(),r(l.displayMode);break;case"inverted":{if(-1===["hexagonal","radial","spectrumGrid"].indexOf(l.displayMode))return;const e=l.value,a=l.$.hueScaleThumb.offsetHeight,o=l._validateInRange(a/2,0,l.$.hueScale.offsetHeight-a)/l.$.brightnessScale.offsetHeight;if(isNaN(o))return void l._generateGridStructures();t?(l._HSV.v=l._HSV.s,l._HSV.s=1-o):(l._HSV.s=l._HSV.v,l._HSV.v=1-o),l.value=l._HSVtoRGBA(l._HSV),l.$.colorPaletteRadial.style.setProperty("--smart-color-panel-brightness",l.$.brightnessScaleThumb.s||0),r(l.displayMode),l.value!==e&&l.$.fireEvent("change",{oldValue:e,value:l.value});break}case"palette":r(l.displayMode),l._updatePreviewContainerValues(l.value);break;case"displayMode":case"gridThemeColors":case"gridShadeColors":case"gridStandardColors":if("displayMode"===e){const e=l.value;if(l.$.container.className.indexOf("custom-color-selection")>-1&&l._handleCancelButtonClick(),null!==l.value&&"palette"!==t&&"hexagonal"!==t&&"radial"!==t){!l.editAlphaChannel&&l.$.alphaChannelThumb&&(l.$.alphaChannelThumb.style[l.rightToLeft?"left":"right"]="",l.$.alphaChannelThumb.style[l.rightToLeft?"right":"left"]=0,l.$.alphaChannelThumb.a=l._RGBA.a=1,l.$.alphaChannelScale.setAttribute("aria-valuenow",1)),l.value=l._getValue(l.valueFormat),r(),l.$.fireEvent("change",{oldValue:e,value:l.value});break}if(null===l.value&&("palette"===t||"hexagonal"===t||"radial"===t)){l._RGBA={r:255,g:255,b:255,a:1},l._HSV={h:0,s:0,v:1},l.value=l._getValue(l.valueFormat),r(),l.$.fireEvent("change",{oldValue:e,value:l.value});break}if(l.value=l._getValue(l.valueFormat),Smart.Utilities.Core.Browser.Firefox&&"radial"===a){const e=l.$.colorPaletteRadial.querySelector("canvas");e&&e.remove()}}r(l.displayMode);break;case"locale":case"messages":l._localizeLabels();break;case"paletteCustomColors":l._userPalette=t||[],(l.displayMode.toLowerCase().indexOf("grid")>-1||"default"===l.displayMode)&&l._generatePaletteUserColorGrid(!0);break;case"editAlphaChannel":{if(!t&&(l._RGBA.a=1),t&&l._createAlphaChannel(),!l.value)return;const e=l.value;l.value=l._getValue(l.valueFormat),l.value!==e&&l.$.fireEvent("change",{oldValue:e,value:l.value});break}case"value":if(t="string"==typeof t?t.trim():t,!l._isValidColor(t))return void l._reset();l._applyValue(t),l.value=l._getValue(l.valueFormat),"hexagonal"===l.displayMode&&l._generateHoneycomb(l.columnCount,l.inverted?{s:l._HSV.s}:{v:l._HSV.v}),a!==l.value&&l.$.fireEvent("change",{oldValue:a,value:l.value});break;case"columnCount":{const e=l.$.container.style;null===t||isNaN(t)?e.removeProperty("--smart-color-panel-grid-mode-column-count"):e.setProperty("--smart-color-panel-grid-mode-column-count",t),l._generatePaletteUserColorGrid(),"spectrumGrid"===l.displayMode?l._generateSpectrumGrid(parseInt(t)):"hexagonal"===l.displayMode&&l._generateHoneycomb(t,l._HSV)}break;case"valueFormat":{if(!l.value)return;const e=l.value;l.value=l._getValue(t),l.$.fireEvent("change",{oldValue:e,value:l.value});break}case"tooltipDisplayMode":if(!l.$.tooltip)return;"none"===t?(l.$.tooltip.close(),l.$.tooltip.disabled=!0):l.$.tooltip.disabled=!1;break;default:if(super.propertyChangedHandler(e,a,t),"disabled"===e){const a=l.getElementsByClassName("color-input");for(let t=0;t<a.length;t++)a[t][e]}"disabled"!==e&&"theme"!==e&&"animation"!==e||(l.$.buttonOk&&(l.$.buttonOk[e]=t),l.$.buttonCancel&&(l.$.buttonCancel[e]=t),l.$.buttonCustom&&(l.$.buttonCustom[e]=t),l.$.tooltip&&(l.$.tooltip[e]=t))}function r(){l._generateGridStructures(),l._applyValue(l.value)}}ready(){super.ready()}render(){const e=this;e.setAttribute("role","dialog"),e._initializeBaseVars(),null===e.columnCount||isNaN(e.columnCount)?e.$.container.style.removeProperty("--smart-color-panel-grid-mode-column-count"):e.$.container.style.setProperty("--smart-color-panel-grid-mode-column-count",e.columnCount),"useButtons"===e.applyValueMode&&e._createApplyValueButtons(),e.editAlphaChannel&&e._createAlphaChannel(),e._generateGridStructures(),e._localizeLabels(),e.value||"hexagonal"!==e.displayMode&&"radial"!==e.displayMode&&"palette"!==e.displayMode||(e.value=e._getValue(e.valueFormat)),e._applyValue(e.value),e._hideControlsByPriority(),e.enableShadowDOM&&e.appendChild(e.$.hiddenInput),super.render()}_createApplyValueButtons(e){const a=this;function t(e){let t=document.createElement("smart-button");return t.classList.add(e),t.classList.add("primary"),t.rightToLeft=a.rightToLeft,t.disabled=a.disabled,t.theme=a.theme,t.animation=a.animation,a.$.buttonsContainer.appendChild(t),t}(e||"useButtons"===a.applyValueMode)&&(a.$.buttonsContainer.innerHTML.trim()||(a.$.buttonOk=t("button-ok"),a.$.buttonCancel=t("button-cancel"),a.$.buttonOk.content=a.localize("ok"),a.$.buttonCancel.content=a.localize("cancel")))}_createAlphaChannel(){const e=this;!e.editAlphaChannel||e.editAlphaChannel&&e.$.alphaChannelContainer.innerHTML.trim()||(e.$.alphaChannelContainer.innerHTML=`\n <div class="alpha-channel-scale no-touch" aria-label="Alpha channel scale" role="slider">\n <div class="alpha-channel-thumb" aria-hidden="true"></div>\n </div>\n <label for="${e.id}aChannelInput" class="a-channel"></label>\n <input type="number" step="0.01" id="${e.id}aChannelInput" class="color-input a-channel" value="1" min="0" max="1">`,e.$.alphaChannelScale=e.$.alphaChannelContainer.querySelector(".alpha-channel-scale"),e.$.alphaChannelThumb=e.$.alphaChannelContainer.querySelector(".alpha-channel-thumb"),e.$.alphaChannelScale.setAttribute("role","slider"),e.$.alphaChannelScale.setAttribute("aria-valuemin",0),e.$.alphaChannelScale.setAttribute("aria-valuemin",1),e.$.alphaChannelContainer.querySelector("input").disabled=e.disabled,e._localizeLabels(),e._applyAlphaValue(e._RGBA.a,"alphaScale"))}_createGridModeComponents(){const e=this,a=e.id;if(["radial","palette","hexagonal"].indexOf(e.displayMode)>-1)return!1;if(e.$.gridModeContainer.innerHTML.trim())return;const t=e.$.gridModeContainer;t.innerHTML=`\n <div id="${a}defaultSamplesContainer" class="default-samples-container"></div>\n <div id="${a}gridSamplesContainer" class="grid-samples-container"></div>\n <div id="${a}materialGridSamplesContainer" class="material-grid-samples-container" role="menu"></div>\n <div id="${a}spectrumGridSamplesContainer" class="spectrum-grid-samples-container"></div>\n <smart-button id="${a}buttonCustom" class="button-custom-color primary"></smart-button>\n <div id="${a}userSamplesContainer" class="user-samples-container" aria-label="User colors"></div>\n <smart-tooltip id="${a}tooltip" arrow position="auto"></smart-tooltip>`,e.$.defaultSamplesContainer=t.querySelector(".default-samples-container"),e.$.gridSamplesContainer=t.querySelector(".grid-samples-container"),e.$.materialGridSamplesContainer=t.querySelector(".material-grid-samples-container"),e.$.materialGridSamplesContainer.$=Smart.Utilities.Extend(e.$.materialGridSamplesContainer),e.$.spectrumGridSamplesContainer=t.querySelector(".spectrum-grid-samples-container"),e.$.userSamplesContainer=t.querySelector(".user-samples-container"),e.$.buttonCustom=t.querySelector("smart-button"),e.$.tooltip=t.querySelector("smart-tooltip"),e.$.buttonCustom.disabled=e.disabled,e.$.buttonCustom.rightToLeft=e.rightToLeft,e.$.buttonCustom.animation=e.animation,e.$.buttonCustom.theme=e.theme,e.$.buttonCustom.content=e.localize("customColor"),e.$.tooltip.disabled=e.disabled||"none"===e.tooltipDisplayMode,e.$.tooltip.rightToLeft=e.rightToLeft,e.$.tooltip.animation=e.animation,e.$.tooltip.theme=e.theme}_createColorControls(e){const a=this,t=a.id;if(!e&&["radial","palette","hexagonal"].indexOf(a.displayMode)<0)return!1;const l=a.$.colorControlsContainer;if(l.innerHTML.trim())return;l.innerHTML=`<div id="${t}previewContainer" class="preview-container gradient-background" aria-label="Preview"><span class="preview-container-top" aria-label="Current color"></span><span class="preview-container-bottom" aria-label="New color"></span></div><label for="${t}rChannelInput" id="${t}rChannelLabel" class="r-channel"></label><input type="number" min="0" max="255" id="${t}rChannelInput" class="color-input r-channel" value="255"><label for="${t}gChannelInput" id="${t}gChannelLabel" class="g-channel"></label><input type="number" min="0" max="255" id="${t}gChannelInput" class="color-input g-channel" value="255"><label for="${t}bChannelInput" id="${t}bChannelLabel" class="b-channel"></label><input type="number" min="0" max="255" id="${t}bChannelInput" class="color-input b-channel" value="255"><label for="${t}hexInput" id="${t}hexLabel" class="hex"></label><input type="text" id="${t}hexInput" class="color-input hex" value="FFFFFF" maxlength="6">`;const r=l.getElementsByClassName("color-input");for(let e=0;e<r.length;e++)r[e].disabled=a.disabled;a._localizeLabels()}_containerClickHandler(e){const a=this;if(a.disabled||a.readonly||!e.target)return;if(e.target.classList.contains("color-sample"))return void a._handleSampleClick(e);const t=e.target.closest("smart-button");if(t!==a.$.buttonCancel)return t===a.$.buttonCustom?(a.$container.addClass("custom-color-selection"),a._createApplyValueButtons(!0),a._createColorControls(!0),a._applyValueInPaletteMode(),a._customColorSelection=!0,1===a._RGBA.a&&a.$.alphaChannelThumb&&(a.$.alphaChannelThumb.style[a.rightToLeft?"left":"right"]="",a.$.alphaChannelThumb.style[a.rightToLeft?"right":"left"]=0,a.$.alphaChannelThumb.a=a._RGBA.a,a.$.alphaChannelScale.setAttribute("aria-valuenow",a._RGBA.a)),void a.$.fireEvent("customColorSelection",{value:!0})):void(t!==a.$.buttonOk?e.target!==(a.shadowRoot||a).querySelector(".preview-container-top")||"useButtons"!==a.applyValueMode||a.disableUndo||a._applyValue(a.value):a._handleOkButtonClick(!0));a._handleCancelButtonClick(!0)}_reset(e=this.value){const a=this;a._RGBA={r:255,g:255,b:255,a:1},a._HSV={h:0,s:0,v:1},a.$.hueScaleThumb.h=0,a.$.colorPaletteThumb.s=0,a.$.colorPaletteThumb.v=1,a.$.colorPaletteRadialThumb.h=0,a.$.colorPaletteRadialThumb.s=0,a.$.brightnessScaleThumb.v=1,a.$.brightnessScaleThumb.s=0,"hexagonal"!==a.displayMode&&"radial"!==a.displayMode&&"palette"!==a.displayMode?(a.value=null,a._selectedItem&&a._selectedItem.classList.contains("selected")&&(a._selectedItem.classList.remove("selected"),a._selectedItem.removeAttribute("aria-current"),a._selectedItem.style.stroke=null)):a.value=a._getValue(a.valueFormat),a._applyValue(a.value),a.$.fireEvent("change",{oldValue:e,value:a.value})}_handleColorPaletteDown(e){const a=this,t=a._getXYcoordinates(e);if(!t)return;const l="palette"===a.displayMode||"grid"===a.displayMode?a.$.colorPaletteThumb:a.$.colorPaletteRadialThumb;if(a._activeComponent=t.container,"palette"===a.displayMode||a.$.container.className.indexOf("custom-color-selection")>-1){if(l.s=a._HSV.s=t.x/t.container.offsetWidth,l.v=a._HSV.v=1-t.y/t.container.offsetHeight,"grid"===a.displayMode)return a._moveThumbHandler(e,!0),void a._applyValueInPaletteMode(e)}else if("radial"===a.displayMode){const e=a.$.colorPaletteRadial.offsetWidth,r=t.x-e/2,o=t.y-e/2;l.h=a._HSV.h=a._calcHueAngle(r,o)<0?360+a._calcHueAngle(r,o):a._calcHueAngle(r,o);const n=a.$.brightnessScaleThumb,s=a.$.brightnessScale,i=a._validateInRange(2*a._calcSatDistance(r,o)/e,0,1),d=s.offsetHeight-n.offsetHeight,c=a._validateInRange(n.offsetTop,0,d)/d;a.inverted?(l.v=a._HSV.v=i,l.s=a._HSV.s=1-c):(l.s=a._HSV.s=i,l.v=a._HSV.v=1-c)}a._applyValue(a._HSVtoRGBA(a._HSV),e),a._instantUpdate()}_handleScalesDown(e){const a=this,t=a._getXYcoordinates(e);t&&(a._activeComponent=t.container,t.container===a.$.hueScale?a._updateHueScale(t):t.container===a.$.brightnessScale?(a._updateBrightnessScale(t),"hexagonal"===a.displayMode&&a._generateHoneycomb(a.columnCount,a._HSV)):a.$.alphaChannelScale&&(a.$.alphaChannelThumb.a=a._RGBA.a=parseFloat(((t.container.offsetWidth-t.x)/t.container.offsetWidth).toFixed(2)),a.rightToLeft&&(a.$.alphaChannelThumb.a=a._RGBA.a=(1-a._RGBA.a).toFixed(2)),a._applyAlphaValue(a._RGBA.a,"alphaScale")),a._applyValue(a._HSVtoRGBA(a._HSV),e),a._instantUpdate())}_updateBrightnessScale(e){const a=this,t=e.y-a.$.brightnessScaleThumb.offsetHeight/2,l=a.$.brightnessScale.offsetHeight-a.$.brightnessScaleThumb.offsetHeight,r=Math.min(Math.max(parseFloat(t),0),parseFloat(l))/l;a.inverted?a.$.brightnessScaleThumb.s=a._HSV.s=1-r:a.$.brightnessScaleThumb.v=a._HSV.v=1-r,a.$.brightnessScale.setAttribute("aria-valuenow",a._HSV.v),a.$.brightnessScaleThumb.style.top=l*r+"px",a.$.colorPaletteRadial.style.setProperty("--smart-color-panel-brightness",r)}_updateHueScale(e){const a=this,t=e.y-a.$.hueScaleThumb.offsetHeight/2,l=a.$.hueScale.offsetHeight,r=l-a.$.hueScaleThumb.offsetHeight;a.$.hueScaleThumb.h=a._HSV.h=360*(l-e.y)/l,a.$.hueScale.setAttribute("aria-valuenow",a.$.hueScaleThumb.h),a.$.hueScaleThumb.style.top=r*Math.min(Math.max(parseFloat(t),0),parseFloat(r))/r+"px"}_paletteModeContainerMoveHandler(e){Smart.Utilities.Core.isMobile||e.stopPropagation(),"touchmove"===e.originalEvent.type&&this._dragDetails&&e.originalEvent.preventDefault()}_moveThumbHandler(e,a){const t=this,l=e.pageX-window.pageXOffset,r=e.pageY-window.pageYOffset;if(t.disabled||t.readonly||!t._activeComponent||!t._dragDetails||t._dragDetails.x===l&&t._dragDetails.y===r&&!a)return;const o=t._getXYcoordinates(e);if(!o)return;const n=t._activeComponent.offsetWidth,s=t._activeComponent.offsetHeight;switch(t._activeComponent){case t.$.colorPalette:t.$.colorPaletteThumb.style.left=100*o.x/n+"%",t.$.colorPaletteThumb.style.top=100*o.y/s+"%",t.$.colorPaletteThumb.s=t._HSV.s=o.x/n,t.$.colorPaletteThumb.v=t._HSV.v=1-o.y/s;break;case t.$.colorPaletteRadial:{const e=n,a=o.x-e/2,l=o.y-e/2;t.$.colorPaletteRadialThumb.h=t._HSV.h=t._calcHueAngle(a,l)<0?360+t._calcHueAngle(a,l):t._calcHueAngle(a,l),t.inverted?t.$.colorPaletteRadialThumb.v=t._HSV.v=t._validateInRange(2*t._calcSatDistance(a,l)/e,0,1):t.$.colorPaletteRadialThumb.s=t._HSV.s=t._validateInRange(2*t._calcSatDistance(a,l)/e,0,1);const r=(t.shadowRoot||t).querySelector(".preview-container-bottom");r&&(r.style.backgroundColor=t._HSVtoRGBA());break}case t.$.hueScale:t._updateHueScale(o);break;case t.$.brightnessScale:t._updateBrightnessScale(o),"hexagonal"===t.displayMode&&t._generateHoneycomb(t.columnCount,t.inverted?{s:t._HSV.s}:{v:t._HSV.v});break;case t.$.alphaChannelScale:t.$.alphaChannelThumb.a=t._RGBA.a=parseFloat(((n-o.x)/n).toFixed(2)),t.rightToLeft&&(t.$.alphaChannelThumb.a=t._RGBA.a=(1-t._RGBA.a).toFixed(2))}t._applyValue(t._HSVtoRGBA(t._HSV),e),t._instantUpdate()}_releaseThumbUpHandler(){const e=this,a=!!e._activeComponent;e._activeComponent=null,e.disabled||e.readonly||!a||e._dragDetails&&e._dragDetails.isPalettePressed||e._instantUpdate()}_handleCancelButtonClick(e){const a=this,t=a.value;switch("palette"!==a.displayMode&&"radial"!==a.displayMode&&"hexagonal"!==a.displayMode?(a.value=t,a._HSV=a._getValue("hsv",a.value)||{h:1,s:0,v:1},a._RGBA=a._getValue("HSVtoRGBAarray",a.value)):(a._HSV=a._getValue("hsv",a.value)||{h:1,s:0,v:1},a._RGBA=a._getValue("HSVtoRGBAarray",a.value),a.value=a._getValue(a.valueFormat)),a._applyValue(a.value),a.displayMode){case"radial":a._generateRadialCanvas();break;case"hexagonal":a._generateHoneycomb(a.columnCount,a._HSV)}if(null===a.value&&a._selectedItem&&a._selectedItem.classList.contains("selected")&&(a._selectedItem.classList.remove("selected"),a._selectedItem.removeAttribute("aria-current")),t!==a.value&&a.$.fireEvent("change",{oldValue:t,value:a.value}),a.$.container.className.indexOf("custom-color-selection")>-1&&a._applyValueInPaletteMode(),e&&a.$.fireEvent("cancelButtonClick"),!1===a._customColorSelection){a._updatePreviewContainerValues(a.value);let e=("hexagonal"===a.displayMode?a.$.colorPaletteHexagonal:a.$.gridModeContainer).getElementsByClassName("selected");for(let t=0;t<e.length;t++)!e[t]||a.value&&a._equalValues(e[t].colorCode,a.value)||(e[t].style.stroke=null,e[t].classList.remove("selected"),e[t].removeAttribute("aria-current"))}else a.$container.removeClass("custom-color-selection"),a.$.fireEvent("customColorSelection",{value:!1});if(a._customColorSelection=!1,a._customTempColor=void 0,"palette"===a.displayMode||"radial"===a.displayMode){const e=(a.shadowRoot||a).querySelector(".preview-container-top");e&&(e.style.backgroundColor=a.value)}}_handleOkButtonClick(e){const a=this,t=a.value;if(!1!==a._customColorSelection&&void 0!==a._customColorSelection){const l=a._getValue(a.valueFormat);return"useButtons"!==a.applyValueMode&&(a.value=l),a._userPalette.unshift(l),a._generatePaletteUserColorGrid(),a._customColorSelection=!1,t!==a.value&&a.$.fireEvent("change",{oldValue:t,value:a.value}),e&&a.$.fireEvent("okButtonClick",{}),void a.$container.removeClass("custom-color-selection")}if(a._customTempColor&&(a._userPalette.unshift(a._customTempColor),a._generatePaletteUserColorGrid(),a._generateNewPalette=!1,a._customTempColor=""),"palette"===a.displayMode||"radial"===a.displayMode||"hexagonal"===a.displayMode||a._selectedItem&&a._selectedItem.classList.contains("selected")?a.value=a._getValue(a.valueFormat):a.value=null,null===a.value)if("palette"===a.displayMode)a._applyValue(a._HSVtoRGBA(a._HSV),event);else{let e=a.$.gridModeContainer.getElementsByClassName("selected");for(let a=0;a<e.length;a++)e[a]&&(e[a].classList.remove("selected"),e[a].removeAttribute("aria-current"))}t!==a.value&&a.$.fireEvent("change",{oldValue:t,value:a.value}),e&&a.$.fireEvent("okButtonClick",{}),a._customColorSelection=!1,"useButtons"!==a.applyValueMode||a._equalValues(a.value,a._HSVtoRGBA())||a._updatePreviewContainerValues(a._getValue("rgba"),!0)}_handleInputChange(e){const a=this,t=a.value,l=e.target;if(a.disabled||a.readonly)return;e.preventDefault(),e.stopPropagation();const r=["r-channel","g-channel","b-channel"].find((e=>l.className.indexOf(e)>-1)),o=l.classList.contains("a-channel");if(r||o)l.value=r?Math.min(255,Math.max(0,l.value)):Math.min(1,Math.max(0,parseFloat(l.value)||0)),a._RGBA=a._getRGBAFromInputs(),a._HSV=a._getValue("hsv","rgba("+a._RGBA.r+", "+a._RGBA.g+", "+a._RGBA.b+", "+a._RGBA.a+")");else if(l.classList.contains("hex")){const e=a.value?a._getValue("hex"):null,t="#"+l.value;a._isHEX(t)?(a._RGBA.a=1,a._applyValue(a.editAlphaChannel?a._toRGBA(t):a._toHEX(t))):l.value=e?e.substring(1):"ffffff"}a._applyValue(a.editAlphaChannel?a._getValue("rgba"):a._getValue("hex")),"useButtons"===a.applyValueMode||a.$.container.className.indexOf("custom-color-selection")>-1||(a.value=a._getValue(a.valueFormat),a.$.fireEvent("change",{oldValue:t,value:a.value}))}_applyValue(e,a){const t=this;if(!e||null===e||"rgba(NaN, NaN, NaN, 1)"===e)return t._RGBA={r:255,g:255,b:255,a:1},void(t.$.hiddenInput.value=t.value);t._HSVRGBArefresh(e.trim()),"palette"===t.displayMode||t.$.container.className.indexOf("custom-color-selection")>-1?t._applyValueInPaletteMode(a):"radial"===t.displayMode?t._applyValueInRadialMode(a):"hexagonal"===t.displayMode?t._applyValueInHexagonalMode(a):t._applyValueInAnyGridMode(e.trim()),t._applyAlphaValue(t._RGBA.a),t.$.hiddenInput.value=t.value}_applyAlphaValue(e,a){const t=this;if(e=parseFloat(e),t.$.alphaChannelScale){if("alphaScale"!==a){const a=t.$.alphaChannelThumb.offsetWidth,l=t.$.alphaChannelScale.offsetWidth,r=(1-e)*l>a?(1-e)*a:0;t.$.alphaChannelThumb.style[t.rightToLeft?"left":"right"]="",t.$.alphaChannelThumb.style[t.rightToLeft?"right":"left"]=(1-e)*l-r+"px"}"alphaInput"!==a&&(t.$.alphaChannelContainer.querySelector("input.a-channel").value=e),t.$.alphaChannelScale.setAttribute("aria-valuenow",e)}t._RGBA.a=e,t._updatePreviewContainerValues(t._getValue("rgba"))}_applyValueInPaletteMode(e){const a=this,t=a._getValue("hex"),l=a.$.hueScale.offsetHeight,r=a.$.hueScaleThumb.offsetHeight,o=a._HSV.h?l*((360-a._HSV.h)/360):0,n=(a.shadowRoot||a).querySelector("input.hex");if(a._setRGBAToInputs(),n&&(n.value=t.substring(1)),a.$.alphaChannelContainer.style.setProperty("--smart-color-panel-alpha-channel-color",a._rgbArrayToHEX([a._RGBA.r,a._RGBA.g,a._RGBA.b,1])),!a._activeComponent){if(a.$.alphaChannelThumb){const e=a.$.alphaChannelThumb.offsetWidth,t=a.$.alphaChannelScale.offsetWidth,l=(1-a._RGBA.a)*t>e?(1-a._RGBA.a)*e:0;a.$.alphaChannelThumb.style[a.rightToLeft?"left":"right"]="",a.$.alphaChannelThumb.style[a.rightToLeft?"right":"left"]=(1-a._RGBA.a)*t-l+"px",a.$.alphaChannelScale.setAttribute("aria-valuenow",a._RGBA.a)}a.$.hueScaleThumb.style.top=Math.max(0,Math.min(l-r,o-r/2))+"px",a._setPalettePointerXYPosition()}a._activeComponent===a.$.hueScale&&(a.$.colorPalette.style.backgroundColor=a._rgbaToRGB(a._HSVtoRGBA({h:a.$.hueScaleThumb.h,s:1,v:1}))),a._activeComponent&&a._activeComponent!==a.$.colorPalette||a._setPalettePointerXYPosition(e),a.event?a._HSV.h=a.$.hueScaleThumb.h:(a.$.hueScaleThumb.h=a._HSV.h,a.$.colorPalette.style.backgroundColor=a._rgbaToRGB(a._HSVtoRGBA({h:a._HSV.h,s:1,v:1}))),a._updatePreviewContainerValues(a._getValue("rgba")),a.$.hueScale.setAttribute("aria-valuenow",a.$.hueScaleThumb.h)}_applyValueInRadialMode(e){const a=this,t=a._getValue("hex"),l=(a.shadowRoot||a).querySelector("input.hex");if(a._setRGBAToInputs(),l&&(l.value=t.substring(1)),a.$.alphaChannelContainer.style.setProperty("--smart-color-panel-alpha-channel-color",a._rgbArrayToHEX([a._RGBA.r,a._RGBA.g,a._RGBA.b,1])),!a._activeComponent){const e=a.$.brightnessScale.offsetHeight-a.$.brightnessScaleThumb.offsetHeight;if(a.$.alphaChannelThumb){const e=a.$.alphaChannelThumb.offsetWidth,t=a.$.alphaChannelScale.offsetWidth,l=(1-a._RGBA.a)*t>e?(1-a._RGBA.a)*e:0;a.$.alphaChannelThumb.style[a.rightToLeft?"left":"right"]="",a.$.alphaChannelThumb.style[a.rightToLeft?"right":"left"]=(1-a._RGBA.a)*t-l+"px",a.$.alphaChannelScale.setAttribute("aria-valuenow",a._RGBA.a)}const t=a.inverted?a._HSV.v:1-a._HSV.v;a.$.brightnessScale.setAttribute("aria-valuenow",a._HSV.v),a.$.brightnessScaleThumb.style.top=e*t+"px",a.$.colorPaletteRadial.style.setProperty("--smart-color-panel-brightness",t)}if(a._activeComponent&&a._activeComponent!==a.$.colorPaletteRadial||a._setPalettePointerXYPosition(e),a._updatePreviewContainerValues(a._getValue("rgba")),a.inverted){const e=null===a.value?"black":a._HSVtoRGBA({h:a._HSV.h,s:1,v:a._HSV.v});a.$.brightnessScale.style.backgroundImage="linear-gradient("+e+", white)"}else{const e=null===a.value?"white":a._HSVtoRGBA({h:a._HSV.h,s:a._HSV.s,v:1});a.$.brightnessScale.style.backgroundImage="linear-gradient("+e+", black)"}}_applyValueInHexagonalMode(){const e=this,a=e._getValue("hex"),t=(e.shadowRoot||e).querySelector("input.hex");if(e._setRGBAToInputs(),t&&(t.value=a?a.substring(1):null),e.$.alphaChannelContainer.style.setProperty("--smart-color-panel-alpha-channel-color",e._rgbArrayToHEX([e._RGBA.r,e._RGBA.g,e._RGBA.b,1])),!e._activeComponent&&!e._targetItem){const a=e.$.brightnessScale.offsetHeight-e.$.brightnessScaleThumb.offsetHeight;if(e.$.alphaChannelThumb){const a=e.$.alphaChannelThumb.offsetWidth,t=e.$.alphaChannelScale.offsetWidth,l=(1-e._RGBA.a)*t>a?(1-e._RGBA.a)*a:0;e.$.alphaChannelThumb.style[e.rightToLeft?"left":"right"]="",e.$.alphaChannelThumb.style[e.rightToLeft?"right":"left"]=(1-e._RGBA.a)*t-l+"px",e.$.alphaChannelScale.setAttribute("aria-valuenow",e._RGBA.a)}const t=e.inverted?e._HSV.v:1-e._HSV.v;e.$.brightnessScale.setAttribute("aria-valuenow",e._HSV.v),e.$.brightnessScaleThumb.style.top=a*t+"px"}const l=e._getValue("rgba");if(e._updatePreviewContainerValues(l||e._getValue("hex")),e.inverted){const a=e._HSVtoRGBA({h:e._HSV.h,s:1,v:e._HSV.v},1);e.$.brightnessScale.style.backgroundImage="linear-gradient("+a+", white)"}else{const a=e._HSVtoRGBA({h:e._HSV.h,s:e._HSV.s,v:1},1);e.$.brightnessScale.style.backgroundImage="linear-gradient("+a+", black)"}e._applyValueInAnyGridMode(a,e.$.colorPaletteHexagonal)}_radialThumbPoint(e,a,t,l){return{x:Math.round(Math.cos(t*Math.PI/180)*l*e+e),y:Math.round(Math.sin(t*Math.PI/180)*l*e+a)}}_updatePreviewContainerValues(e,a){const t=this,l=(t.shadowRoot||t).querySelector(".preview-container");l&&(("instantly"===t.applyValueMode||a)&&(l.firstElementChild.style.backgroundColor=e),l.lastElementChild.style.backgroundColor=e)}_applyValueInAnyGridMode(e,a){const t=this;if(!e&&null!==e)return;if(!a)switch(t.displayMode){case"default":a=t.$.defaultSamplesContainer;break;case"grid":a=t.$.gridSamplesContainer;break;case"materialGrid":a=t.$.materialGridSamplesContainer;break;case"spectrumGrid":a=t.$.spectrumGridSamplesContainer;break;default:a=t.$.gridModeContainer}if(!a)return;const l=Array.from(a.getElementsByClassName("color-sample"));let r=t._targetItem;if(null==r)for(let a=0;a<l.length;a++){const o=l[a];if(t._equalValues(o.colorCode,e)){r=l[a];break}}t.$.container.className.indexOf("custom-color-selection")>-1&&t._HSV.h&&t._applyValueInPaletteMode(),t._changeSampleSelection(r)}_generatePaletteGrid(){const e=this;if(!e.$.gridSamplesContainer)return;const a=e["_"+e.palette+"Palette"];let t=document.createDocumentFragment();for(let l=0;l<a.length;l++){const r=document.createElement("span"),o=a[l];r.setAttribute("role","menuitem"),r.setAttribute("aria-label",o),r.className="color-sample",r.colorCode=o,r.style.backgroundColor=o,"rgba(255, 255, 255, 0)"===e._toRGBA(o)||"#FFFFFF00"===e._toHEX(e._toRGBA(o))||"transparent"===o?r.setAttribute("transparent",""):r.removeAttribute("transparent"),t.appendChild(r)}e.$.gridSamplesContainer.setAttribute("role","menu"),e.$.gridSamplesContainer.innerHTML="",e.$.gridSamplesContainer.appendChild(t)}_generatePaletteUserColorGrid(e){const a=this;if(!a.$.userSamplesContainer)return;if(!a._userPalette||!a._userPalette.length)return void(a.$.userSamplesContainer.innerHTML="");let t,l=a._userPalette.filter((e=>""!==e)).slice(0,a.columnCount||1),r=document.createDocumentFragment();l=[...new Set(l)];for(let e=0;e<l.length;e++)if(l[e]){const o=a._createColorSample(l[e],"user-color");r.appendChild(o),t||(t=o)}a.$.userSamplesContainer.innerHTML="",a.$.userSamplesContainer.appendChild(r),a.$.userSamplesContainer.setAttribute("role","menu"),!e&&t&&t.colorCode&&a._changeSampleSelection(t),a.paletteCustomColors=a._userPalette.slice(0)}_initializeBaseVars(){const e=this;void 0===e._RGBA&&(e._RGBA={r:255,g:255,b:255,a:1},e._HSV={h:0,s:0,v:1},e.$.hueScaleThumb.h=0,e.$.colorPaletteThumb.s=0,e.$.colorPaletteThumb.v=1,e.$.colorPaletteRadialThumb.h=0,e.$.colorPaletteRadialThumb.s=0,e._defaultPalette=["rgba(255, 255, 255, 0)","rgb(0, 0, 0)","rgb(153, 51, 0)","rgb(51, 51, 0)","rgb(0, 51, 0)","rgb(0, 51, 102)","rgb(0, 0, 128)","rgb(51, 51, 153)","rgb(51, 51, 51)","rgb(128, 0, 0)","rgb(255, 102, 0)","rgb(128, 128, 0)","rgb(0, 128, 0)","rgb(0, 128, 128)","rgb(0, 0, 255)","rgb(102, 102, 153)","rgb(128, 128, 128)","rgb(255, 0, 0)","rgb(255, 153, 0)","rgb(153, 204, 0)","rgb(51, 153, 102)","rgb(51, 204, 204)","rgb(51, 102, 255)","rgb(128, 0, 128)","rgb(153, 153, 153)","rgb(255, 0, 255)","rgb(255, 204, 0)","rgb(255, 255, 0)","rgb(0, 255, 0)","rgb(0, 255, 255)","rgb(0, 204, 255)","rgb(153, 51, 102)","rgb(192, 192, 192)","rgb(255, 153, 204)","rgb(255, 204, 153)","rgb(255, 255, 153)","rgb(204, 255, 204)","rgb(204, 255, 255)","rgb(153, 204, 255)","rgb(204, 153, 255)","rgb(255, 255, 255)"],e._grayPalette=e._generateShades(40,"gray"),e._redPalette=e._generateShades(40,"red"),e._greenPalette=e._generateShades(40,"green"),e._bluePalette=e._generateShades(40,"blue"),e._customPalette=e._mapDataSourceToPalette(),e._userPalette=e.paletteCustomColors||[],e._colorPalette={},e._cssColorNamesHEX={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",green:"#008000",greenyellow:"#adff2f",honeydew:"#f0fff0",hotpink:"#ff69b4","indianred ":"#cd5c