@pine-ds/core 4.4.0 → 4.4.2

package/components/pds-checkbox2.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as i,createEvent as r,h as t,Host as o,transformTag as a}from"@stencil/core/internal/client";import{e as n,i as s,a as d,m as c}from"./form.js";import{h as l}from"./index2.js";import{i as h}from"./attributes.js";import{d as p}from"./pds-icon2.js";const b=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.pdsCheckboxChange=r(this,"pdsCheckboxChange",7),this.pdsCheckboxInput=r(this,"pdsCheckboxInput",7),this.inheritedAttributes={},this._type="checkbox",this.hasLabelSlot=!1,this.checked=!1,this.handleCheckboxChange=e=>{if(this.disabled)return;const i=e.target;this.checked=i.checked,this.updateFormValue(),this.pdsCheckboxChange.emit({checked:i.checked,value:this.value})},this.handleInput=()=>{this.pdsCheckboxInput.emit({checked:this.checked,value:this.value})},this.updateHasLabelSlot=()=>{this.hasLabelSlot=Array.from(this.el.children).some((e=>"label"===e.getAttribute("slot")))}}updateIndeterminate(){this.indeterminate=void 0}classNames(){const e=[];return this.invalid&&e.push("is-invalid"),this.indeterminate&&e.push("is-indeterminate"),this.disabled&&e.push("is-disabled"),this.hasLabelSlot&&e.push("has-label-slot"),e.join("  ")}connectedCallback(){this.el.attachInternals&&!this.internals&&(this.internals=this.el.attachInternals()),n(this.el,(()=>this._type))}componentDidLoad(){this.updateFormValue()}checkedChanged(){this.updateFormValue()}updateFormValue(){s()||(this.internals&&this.internals.setFormValue&&this.internals.setFormValue(this.checked?this.value||"on":null),this.internals&&this.internals.setValidity&&this.internals.setValidity({}))}formStateRestoreCallback(e){if(e instanceof FormData){const i=this.value||"on";this.checked=e.get(this.name)===i}else"string"==typeof e&&(this.checked=e===(this.value||"on"))}componentWillLoad(){this.inheritedAttributes=Object.assign({},h(this.el)),this.updateHasLabelSlot()}render(){return t(o,{key:"aef1cece81ef5b59ee50d31f8542ffe627230734",class:this.classNames()},t("label",{key:"ad41c1039f2d11ff52e362e5e45d4c25e1d71b71",htmlFor:this.componentId},t("input",Object.assign({key:"180959e7154129ecbfe6a9151e13610d4799ece2",type:"checkbox","aria-describedby":d(this.componentId,this.invalid,this.helperMessage,this.errorMessage),"aria-invalid":this.invalid?"true":void 0,id:this.componentId,indeterminate:this.indeterminate,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleCheckboxChange,onInput:this.handleInput},this.inheritedAttributes)),t("span",{key:"37917f2d69bc0927d38fd8400f48201a451e1d4f",class:this.hideLabel?"visually-hidden":""},t("slot",{key:"b406e52494565eec642ebc3449a95319cf772398",name:"label",onSlotchange:this.updateHasLabelSlot},this.label))),this.helperMessage&&t("div",{key:"3fb5410f4c504da78c64511e9bf0058b4a7aa23b",class:"pds-checkbox__message",id:c(this.componentId,"helper")},this.helperMessage),this.errorMessage&&t("div",{key:"af9a7771b1b5444fc3e994e7c7904557a2507e3a",class:"pds-checkbox__message pds-checkbox__message--error",id:c(this.componentId,"error"),"aria-live":"assertive"},t("pds-icon",{key:"13f8ba65484f33df384dcff6179e756321c3238d",icon:l,size:"small"}),this.errorMessage))}static get formAssociated(){return!0}get el(){return this}static get watchers(){return{checked:[{updateIndeterminate:0},{checkedChanged:0}]}}static get style(){return':host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-text-primary);-webkit-border-after:var(--pine-border-width-none);border-block-end:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-text-primary);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -60%) rotate(43deg);transform:translate(-50%, -60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host-context([dir=rtl]) input:checked::after{-webkit-transform:translate(-50%, -60%) rotate(-43deg);transform:translate(-50%, -60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}:host(.has-label-slot) label{-ms-flex-align:center;align-items:center}:host(.has-label-slot) input{-webkit-margin-before:0;margin-block-start:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}'}},[321,"pds-checkbox",{checked:[1028],componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],indeterminate:[1028],invalid:[4],label:[1],hideLabel:[4,"hide-label"],name:[1],required:[4],value:[1],hasLabelSlot:[32]},void 0,{checked:[{updateIndeterminate:0},{checkedChanged:0}]}]);function m(){"undefined"!=typeof customElements&&["pds-checkbox","pds-icon"].forEach((e=>{switch(e){case"pds-checkbox":customElements.get(a(e))||customElements.define(a(e),b);break;case"pds-icon":customElements.get(a(e))||p()}}))}export{b as P,m as d}
+import{proxyCustomElement as e,HTMLElement as i,createEvent as r,h as t,Host as o,transformTag as a}from"@stencil/core/internal/client";import{e as n,i as s,a as d,m as c}from"./form.js";import{h as l}from"./index2.js";import{i as h}from"./attributes.js";import{d as b}from"./pds-icon2.js";const p=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.pdsCheckboxChange=r(this,"pdsCheckboxChange",7),this.pdsCheckboxInput=r(this,"pdsCheckboxInput",7),this.inheritedAttributes={},this._type="checkbox",this.hasLabelSlot=!1,this.checked=!1,this.handleCheckboxChange=e=>{if(this.disabled)return;const i=e.target;this.checked=i.checked,this.updateFormValue(),this.pdsCheckboxChange.emit({checked:i.checked,value:this.value})},this.handleInput=()=>{this.pdsCheckboxInput.emit({checked:this.checked,value:this.value})},this.updateHasLabelSlot=()=>{this.hasLabelSlot=Array.from(this.el.children).some((e=>"label"===e.getAttribute("slot")))}}updateIndeterminate(){this.indeterminate=void 0}classNames(){const e=[];return this.invalid&&e.push("is-invalid"),this.indeterminate&&e.push("is-indeterminate"),this.disabled&&e.push("is-disabled"),this.hasLabelSlot&&e.push("has-label-slot"),e.join("  ")}connectedCallback(){this.el.attachInternals&&!this.internals&&(this.internals=this.el.attachInternals()),n(this.el,(()=>this._type))}componentDidLoad(){this.updateFormValue()}checkedChanged(){this.updateFormValue()}updateFormValue(){s()||(this.internals&&this.internals.setFormValue&&this.internals.setFormValue(this.checked?this.value||"on":null),this.internals&&this.internals.setValidity&&this.internals.setValidity({}))}formStateRestoreCallback(e){if(e instanceof FormData){const i=this.value||"on";this.checked=e.get(this.name)===i}else"string"==typeof e&&(this.checked=e===(this.value||"on"))}componentWillLoad(){this.inheritedAttributes=Object.assign({},h(this.el)),this.updateHasLabelSlot()}render(){return t(o,{key:"aef1cece81ef5b59ee50d31f8542ffe627230734",class:this.classNames()},t("label",{key:"ad41c1039f2d11ff52e362e5e45d4c25e1d71b71",htmlFor:this.componentId},t("input",Object.assign({key:"180959e7154129ecbfe6a9151e13610d4799ece2",type:"checkbox","aria-describedby":d(this.componentId,this.invalid,this.helperMessage,this.errorMessage),"aria-invalid":this.invalid?"true":void 0,id:this.componentId,indeterminate:this.indeterminate,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleCheckboxChange,onInput:this.handleInput},this.inheritedAttributes)),t("span",{key:"37917f2d69bc0927d38fd8400f48201a451e1d4f",class:this.hideLabel?"visually-hidden":""},t("slot",{key:"14067135aafbb1c472c4b7cb47c807655ea17d4f",name:"label",onSlotchange:this.updateHasLabelSlot}),!this.hasLabelSlot&&this.label)),this.helperMessage&&t("div",{key:"6939b70ba6e83bbb3c97547038230f466f0b28e2",class:"pds-checkbox__message",id:c(this.componentId,"helper")},this.helperMessage),this.errorMessage&&t("div",{key:"3a8c7c163c5343f77c543abaa45e516a80b261ac",class:"pds-checkbox__message pds-checkbox__message--error",id:c(this.componentId,"error"),"aria-live":"assertive"},t("pds-icon",{key:"6db80f38537e2817c2f14934dd190a5902ba608e",icon:l,size:"small"}),this.errorMessage))}static get formAssociated(){return!0}get el(){return this}static get watchers(){return{checked:[{updateIndeterminate:0},{checkedChanged:0}]}}static get style(){return':host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--pine-color-text-primary);-webkit-border-after:var(--pine-border-width-none);border-block-end:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:1px solid var(--pine-color-text-primary);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate(-50%, -60%) rotate(43deg);transform:translate(-50%, -60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host-context([dir=rtl]) input:checked::after{-webkit-transform:translate(-50%, -60%) rotate(-43deg);transform:translate(-50%, -60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}:host(.has-label-slot) label{-ms-flex-align:center;align-items:center}:host(.has-label-slot) input{-webkit-margin-before:0;margin-block-start:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}'}},[321,"pds-checkbox",{checked:[1028],componentId:[1,"component-id"],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],indeterminate:[1028],invalid:[4],label:[1],hideLabel:[4,"hide-label"],name:[1],required:[4],value:[1],hasLabelSlot:[32]},void 0,{checked:[{updateIndeterminate:0},{checkedChanged:0}]}]);function m(){"undefined"!=typeof customElements&&["pds-checkbox","pds-icon"].forEach((e=>{switch(e){case"pds-checkbox":customElements.get(a(e))||customElements.define(a(e),p);break;case"pds-icon":customElements.get(a(e))||b()}}))}export{p as P,m as d}