https://www.palomacoffee.pl/application/assets/storefront/chunk-phoenix_components_color.BLjZVQO.js

1import{_ as s,a as l}from"./chunk-vendor-di.Bh23gdA.js";import{P as p,s as A,e as r,U as n,A as k,$ as y}from"./chunk-vendor-lit.NvY0u02.js";import{p as g}from"./chunk-phoenix_custom_element.-3oJuZO.js";import{K as w}from"./chunk-keystrokes_controller.BSiCZ0Y.js";import{c as x}from"./chunk-index.D5AUA1V.js";import{I as T}from"./chunk-input_constants.Bz3yUrY.js";import{a as u,C as L}from"./chunk-color_swatches_control_constants.Goty5zR.js";import"./chunk-vendor-lodash.CWHFt7Z.js";const b="color-swatches",O="h-color-item",S={colorSwatches:b,colorSwatchesItem:`${b}__color-item`},f={change:"change"},C="color-item",v={s:"s",xs:"xs"},E={colorItem:C,[v.s]:`${C}_s`,[v.xs]:`${C}_xs`},d="selected";let i=class extends p{constructor(){super(...arguments),this.disabled=!1,this.selected=!1,this.unclickable=!1,this._$colorSwatches=null,this._setupAriaAttributes=()=>{var e;this._$colorSwatches=this.closest("h-color-swatches"),this.setAttribute("role",!((e=this._$colorSwatches)===null||e===void 0)&&e.multiple?"checkbox":"radio"),this.setAttribute("aria-label",this.label?this.label:this.color)},this._setupClasses=()=>{this.classList.add(E.colorItem),this.size&&this.classList.add(E[this.size])}}connectedCallback(){super.connectedCallback(),this._setupAriaAttributes(),this._setupClasses(),this.style.backgroundColor=this.setBgColor(this.disabled),this.unclickable?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0"),this.value||(this.value=this.color)}setBgColor(e){return e?A.hexToRgba(this.color,.5):this.color}};s([r({type:String}),l("design:type",String)],i.prototype,"color",void 0);s([r({type:String}),l("design:type",String)],i.prototype,"value",void 0);s([r({type:String}),l("design:type",String)],i.prototype,"label",void 0);s([r({type:Boolean,reflect:!0}),l("design:type",Boolean)],i.prototype,"disabled",void 0);s([r({type:Boolean,reflect:!0}),l("design:type",Boolean)],i.prototype,"selected",void 0);s([r({type:String}),l("design:type",String)],i.prototype,"size",void 0);s([r({type:Boolean}),l("design:type",Boolean)],i.prototype,"unclickable",void 0);i=s([g("h-color-item")],i);let h=class extends p{constructor(){super(...arguments),this.multiple=!1,this.selectedColors=[],this.showMoreBtnText="Pokaż wszystkie kolory",this._setupEvents=()=>{this.getAttribute("role")==="group"?this._setupCheckboxGroupEvents():this._setupRadioGroupEvents()},this._setupCheckboxGroupEvents=()=>{this._setupColorClickEvents()},this._setupRadioGroupEvents=()=>{document.body.addEventListener("keydown",this._focusOnSelectedColor),this.addEventListener("keydown",this._handleTabNavigation),this.addEventListener("keyup",this._handleRadioNavigation),this._setupColorClickEvents()},this._setupColorClickEvents=()=>{this._$colorSwatchesChildren&&this._$colorSwatchesChildren.forEach(e=>{e.addEventListener("click",this._handleColorClicked),new w({host:this,keys:[" "],callback:this._handleColorClicked,target:e})})},this._handleColorClicked=e=>{e.preventDefault();const t=e.target;t.unclickable||!(t instanceof i)||(this._toggleColorItem(t),this._dispatchColorChangeEvent(t))},this._handleTabNavigation=e=>{if(e.key!=="Tab")return;if(e.preventDefault(),e.shiftKey){const o=n.getFocusableElement(this);n.getPreviousFocusableElement(o).focus();return}const t=n.getLastFocusableElement(this);n.getNextFocusableElement(t).focus()},this._handleRadioNavigation=e=>{const t=["ArrowDown","ArrowRight"],o=["ArrowUp","ArrowLeft"];!t.includes(e.key)&&!o.includes(e.key)||(e.preventDefault(),t.includes(e.key)&&this._handleChangeToNextColorItem(e),o.includes(e.key)&&this._handleChangeToPreviousColorItem(e))},this._focusOnSelectedColor=e=>{if(e.key!=="Tab"||this.multiple)return;if(e.shiftKey){const o=n.getPreviousFocusableElement(document.activeElement);this.contains(o)&&this.selectedColors.length>0&&(e.preventDefault(),this.selectedColors[0].focus());return}const t=n.getNextFocusableElement(document.activeElement);this.contains(t)&&this.selectedColors.length>0&&(e.preventDefault(),this.selectedColors[0].focus())},this._handleColorChange=e=>{this._toggleColorItem(e),this._dispatchColorChangeEvent(e)},this._dispatchColorChangeEvent=e=>{const t=this.selectedColors.reduce(({colors:o,values:a},m)=>({colors:[...o,m.color],values:[...o,m.value]}),{colors:[],values:[]});this.emitCustomEvent(f.change,{detail:{...t,$colorItem:e}})}}selectColors(e){const t=k.makeAsArray(e);if(!t.length){this.clearAllColors();return}t.forEach(o=>this._toggleColorItem(o))}

1clearAllColors(){[...this.selectedColors].forEach(e=>{this._toggleColorItem(e)})}connectedCallback(){super.connectedCallback(),this.setAttribute("role",this.multiple?"group":"radiogroup"),this._$colorSwatchesChildren=[...this.children],this._setupEvents(),this._addCssClasses(),this.selectedColors=[...this.querySelectorAll("h-color-item[selected]")],this._$colors=[...this.querySelectorAll("h-color-item")]}_addCssClasses(){this.querySelectorAll(O).forEach(e=>e.classList.add(S.colorSwatchesItem)),this.classList.add(S.colorSwatches)}_handleChangeToNextColorItem({target:e}){const t=e,o=n.getNextFocusableElement(t);let a;this.contains(o)?a=o:a=n.getFocusableElement(this),a.focus(),a instanceof i&&this._handleColorChange(a)}_handleChangeToPreviousColorItem({target:e}){const t=e,o=n.getPreviousFocusableElement(t);let a;this.contains(o)?a=o:a=n.getLastFocusableElement(this),a.focus(),a instanceof i&&this._handleColorChange(a)}_toggleColorItem(e){this.multiple?this._handleColorClickedForMultipleMode(e):this._handleColorChangeForSingleMode(e)}_handleColorClickedForMultipleMode(e){this._isColorAlreadyExistInArray(e)?this._removeExistingColorFromArray(e):this.selectedColors=[...this.selectedColors,e],this._toggleSelectedAttribute(e)}_handleColorChangeForSingleMode(e){const t=this.selectedColors[0];this._toggleSelectedAttribute(e),t&&t!==e&&(t.removeAttribute(d),t.setAttribute("aria-checked","false")),this.selectedColors=t===e?[]:[e]}_toggleSelectedAttribute(e){e.hasAttribute(d)?e.removeAttribute(d):e.setAttribute(d,""),e.setAttribute("aria-checked","true")}_isColorAlreadyExistInArray(e){return this.selectedColors.includes(e)}_removeExistingColorFromArray(e){const t=this.selectedColors.indexOf(e);this.selectedColors.splice(t,1)}disconnectedCallback(){super.disconnectedCallback(),document.body.removeEventListener("keydown",this._focusOnSelectedColor)}};s([r({type:Boolean}),l("design:type",Boolean)],h.prototype,"multiple",void 0);s([r({type:Number,attribute:"number-of-visible-colors"}),l("design:type",Number)],h.prototype,"numberOfVisibleColors",void 0);s([r(),l("design:type",Array)],h.prototype,"selectedColors",void 0);s([r({type:String,attribute:"show-more-btn-text"}),l("design:type",Object)],h.prototype,"showMoreBtnText",void 0);h=s([g("h-color-swatches")],h);let c=class extends p{constructor(){super(...arguments),this.multiple=!1,this.selectedColors=[]}get name(){return this.controlName}get id(){return this.controlId}selectColors(e){if(!this._$colorSwatches)return;const t=e?.map(o=>this.querySelector(`h-color-item[value="${o}"]`)).filter(o=>o);this._$colorSwatches.selectColors(t),this.requestUpdate()}clearAllColors(){var e;(e=this._$colorSwatches)===null||e===void 0||e.clearAllColors(),this.requestUpdate()}connectedCallback(){super.connectedCallback(),this._setupEvents(),this.classList.add(u.colorSwatchesControl);const e=x({[u.colorSwatchesControlDisabled]:this.disabled,[u.colorSwatchesControlError]:this.error});this._$colorSwatches=this.querySelector("h-color-swatches"),e&&this.classList.add(e),this._getSelectedColors()}_getSelectedColors(){this.selectedColors=this._getSelectedColorItems().map(e=>{const t=e.hasAttribute("value")?e.getAttribute("value"):e.getAttribute("color");if(!t)throw new Error("color item does not hava any value");return t})}_getAllColorItems(){return[...this.querySelectorAll("h-color-item[selected]")]}_getSelectedColorItems(){return this._getAllColorItems().filter(e=>e.hasAttribute("selected"))}_setupEvents(){this.addEventListener(f.change,e=>{e.preventDefault();const{detail:t}=e;!t.values||!t.colors||!t.$colorItem||(this.selectedColors=t.values,this.emitCustomEvent(L.change,{detail:t}))})}render(){if(this.selectedColors.length)return y`
2            ${this.selectedColors.map(e=>y` <input name="${this.controlName}" type="${T.hidden}" value="${e}" /> `)}
3        `}};s([r({type:String,attribute:"control-id"}),l("design:type",String)],c.prototype,"controlId",void 0);s([r({type:String,attribute:"control-name"}),l("design:type",String)],c.prototype,"controlName",void 0);s([r({type:Boolean}),l("design:type",Boolean)],c.prototype,"disabled",void 0);s([r({type:Boolean}),l("design:type",Boolean)],c.prototype,"required",void 0);s([r({type:Boolean}),l("design:type",Boolean)],c.prototype,"error",void 0);s([r({type:Boolean}),l("design:type",Boolean)],c.prototype,"multiple",void 0);s([r(),l("design:type",Array)],c.prototype,"selectedColors",void 0);c=s([g("h-color-swatches-control")],c);requestAnimationFrame(()=>{});

3globalThis.__phoenix_wc__=[i,h,c];