@pine-ds/core 4.9.1 → 4.10.0

package/components/pds-checkbox2.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as i,createEvent as r,h as o,Host as t,transformTag as a}from"@stencil/core/internal/client";import{e as n,i as s,a as d,m as l}from"./form.js";import{h as c}from"./index2.js";import{H as b,i as h}from"./attributes.js";import{d as p}from"./pds-icon2.js";const v=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.hostKeeper=new b,this.hasLabelSlot=!1,this.checked=!1,this.variant="default",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"),"pill"===this.variant&&e.push("pds-checkbox--pill"),e.join("  ")}connectedCallback(){this.hostKeeper.connect(this.el),this.el.attachInternals&&!this.internals&&(this.internals=this.el.attachInternals()),n(this.el,(()=>this._type))}disconnectedCallback(){this.hostKeeper.disconnect()}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"))}formDisabledCallback(e){e&&!this.el.closest("fieldset[disabled]")||(this.disabled=e)}componentWillLoad(){this.inheritedAttributes=Object.assign({},h(this.el)),this.updateHasLabelSlot()}render(){const e=this.classNames();return this.hostKeeper.record(e),o(t,{key:"8e9185653796f250ad425350b9adc1f65fd047c1",class:e},o("label",{key:"e17bab4b96b4ffc716e311ecea488a3025e1551c",htmlFor:this.componentId},o("input",Object.assign({key:"8af9bbc3dbe18409532e95b4b490eab4aabc8762",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,class:"pill"===this.variant?"visually-hidden":void 0},this.inheritedAttributes)),o("span",{key:"1e4d9a826b6b5ec429ae47096d4aede3af43d110",class:this.hideLabel&&"pill"!==this.variant?"visually-hidden":""},o("slot",{key:"7b10c7d1e018be4afe019cb56e82a5ec7a638de8",name:"label",onSlotchange:this.updateHasLabelSlot}),!this.hasLabelSlot&&this.label)),this.helperMessage&&o("div",{key:"c5455322eb07bf73805a17c28bf6acc1b5384337",class:"pds-checkbox__message",id:l(this.componentId,"helper")},this.helperMessage),this.errorMessage&&o("div",{key:"0f7c8ec00362c31b1c5bd11c185c6e7bfc177f22",class:"pds-checkbox__message pds-checkbox__message--error",id:l(this.componentId,"error"),"aria-live":"assertive"},o("pds-icon",{key:"f6eccfaac90505903aee379f2fc28b5735d8c4a9","aria-hidden":"true",icon:c,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) label,:host(.has-label-slot) label>span{min-width:0}: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)}:host(.pds-checkbox--pill){position:relative}:host(.pds-checkbox--pill) label{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);cursor:pointer;font:var(--pine-typography-body);min-block-size:var(--pine-dimension-xl);padding:0 var(--pine-dimension-sm);-webkit-transition:border-color var(--pine-motion-duration-fast) ease;transition:border-color var(--pine-motion-duration-fast) ease}:host(.pds-checkbox--pill) label span{min-width:0;overflow-wrap:anywhere}:host(.pds-checkbox--pill) label:hover{border-color:var(--pine-color-text)}:host(.pds-checkbox--pill) label:has(input:checked){border-color:var(--pine-color-text-active);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active)}:host(.pds-checkbox--pill) label:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}:host(.pds-checkbox--pill) label:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:var(--pine-color-text-disabled);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled)}@media (forced-colors: active){:host(.pds-checkbox--pill) label:has(input:disabled){border-color:GrayText}:host(.pds-checkbox--pill) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:GrayText;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}:host(.pds-checkbox--pill) .pds-checkbox__message{-webkit-margin-start:0;margin-inline-start:0}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label{border-color:var(--pine-color-border-danger);color:var(--pine-color-text-active)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:var(--pine-color-border-danger);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:focus-visible){outline:var(--pine-outline-focus-danger)}@media (forced-colors: active){:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}'}},[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],variant:[1],hasLabelSlot:[32]},void 0,{checked:[{updateIndeterminate:0},{checkedChanged:0}]}]);function k(){"undefined"!=typeof customElements&&["pds-checkbox","pds-icon"].forEach((e=>{switch(e){case"pds-checkbox":customElements.get(a(e))||customElements.define(a(e),v);break;case"pds-icon":customElements.get(a(e))||p()}}))}export{v as P,k as d}
+import{proxyCustomElement as e,HTMLElement as i,createEvent as r,h as o,Host as t,transformTag as a}from"@stencil/core/internal/client";import{e as n,i as s,a as d,m as l}from"./form.js";import{h as c}from"./index2.js";import{H as b,i as h}from"./attributes.js";import{d as p}from"./pds-icon2.js";const v=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.hostKeeper=new b,this.hasLabelSlot=!1,this.checked=!1,this.variant="default",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"),"pill"===this.variant&&e.push("pds-checkbox--pill"),e.join("  ")}connectedCallback(){this.hostKeeper.connect(this.el),this.el.attachInternals&&!this.internals&&(this.internals=this.el.attachInternals()),n(this.el,(()=>this._type))}disconnectedCallback(){this.hostKeeper.disconnect()}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"))}formDisabledCallback(e){e&&!this.el.closest("fieldset[disabled]")||(this.disabled=e)}componentWillLoad(){this.inheritedAttributes=Object.assign({},h(this.el)),this.updateHasLabelSlot()}render(){const e=this.classNames();return this.hostKeeper.record(e),o(t,{key:"8e9185653796f250ad425350b9adc1f65fd047c1",class:e},o("label",{key:"e17bab4b96b4ffc716e311ecea488a3025e1551c",htmlFor:this.componentId},o("input",Object.assign({key:"8af9bbc3dbe18409532e95b4b490eab4aabc8762",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,class:"pill"===this.variant?"visually-hidden":void 0},this.inheritedAttributes)),o("span",{key:"1e4d9a826b6b5ec429ae47096d4aede3af43d110",class:this.hideLabel&&"pill"!==this.variant?"visually-hidden":""},o("slot",{key:"7b10c7d1e018be4afe019cb56e82a5ec7a638de8",name:"label",onSlotchange:this.updateHasLabelSlot}),!this.hasLabelSlot&&this.label)),this.helperMessage&&o("div",{key:"c5455322eb07bf73805a17c28bf6acc1b5384337",class:"pds-checkbox__message",id:l(this.componentId,"helper")},this.helperMessage),this.errorMessage&&o("div",{key:"0f7c8ec00362c31b1c5bd11c185c6e7bfc177f22",class:"pds-checkbox__message pds-checkbox__message--error",id:l(this.componentId,"error"),"aria-live":"assertive"},o("pds-icon",{key:"f6eccfaac90505903aee379f2fc28b5735d8c4a9","aria-hidden":"true",icon:c,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:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}:host(.is-indeterminate) input:disabled::after{border-color:var(--pine-color-border)}:host(.is-indeterminate) input::after{border:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width) solid var(--pine-color-text-primary);border-block-start:var(--pine-border-width) solid var(--pine-color-text-primary);content:"";display:block;height:0;inset:0;margin:auto;position:absolute;-webkit-transform:none;transform:none;width:8px}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:var(--pine-border-width) 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:0;margin-inline:auto;position:absolute;-webkit-transform:translateY(-60%) rotate(43deg);transform:translateY(-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(:not(.is-indeterminate)) input:checked:dir(rtl)::after{-webkit-transform:translateY(-60%) rotate(-43deg);transform:translateY(-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) label,:host(.has-label-slot) label>span{min-width:0}: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)}:host(.pds-checkbox--pill){position:relative}:host(.pds-checkbox--pill) label{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);cursor:pointer;font:var(--pine-typography-body);min-block-size:var(--pine-dimension-xl);padding:0 var(--pine-dimension-sm);-webkit-transition:border-color var(--pine-motion-duration-fast) ease;transition:border-color var(--pine-motion-duration-fast) ease}:host(.pds-checkbox--pill) label span{min-width:0;overflow-wrap:anywhere}:host(.pds-checkbox--pill) label:hover{border-color:var(--pine-color-text)}:host(.pds-checkbox--pill) label:has(input:checked){border-color:var(--pine-color-text-active);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active)}:host(.pds-checkbox--pill) label:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}:host(.pds-checkbox--pill) label:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:var(--pine-color-text-disabled);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled)}@media (forced-colors: active){:host(.pds-checkbox--pill) label:has(input:disabled){border-color:GrayText}:host(.pds-checkbox--pill) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:GrayText;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}:host(.pds-checkbox--pill) .pds-checkbox__message{-webkit-margin-start:0;margin-inline-start:0}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label{border-color:var(--pine-color-border-danger);color:var(--pine-color-text-active)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:var(--pine-color-border-danger);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:focus-visible){outline:var(--pine-outline-focus-danger)}@media (forced-colors: active){:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}'}},[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],variant:[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),v);break;case"pds-icon":customElements.get(a(e))||p()}}))}export{v as P,m as d}

package/components/pds-chip2.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as o,createEvent as e,h as n,Host as r,transformTag as p}from"@stencil/core/internal/client";import{d as c,r as s}from"./index2.js";import{H as t}from"./attributes.js";import{F as d,s as h}from"./truncation-tooltip.js";import{n as a}from"./utils.js";import{d as l}from"./pds-icon2.js";const v={accent:"var(--pine-chip-color-accent-dot)",danger:"var(--pine-chip-color-danger-dot)",info:"var(--pine-chip-color-info-dot)",neutral:"var(--pine-chip-color-neutral-dot)",solid:"var(--pine-chip-color-solid-dot)",subtle:"var(--pine-chip-color-subtle-dot)",success:"var(--pine-chip-color-success-dot)",warning:"var(--pine-chip-color-warning-dot)"},u=i(class extends o{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.pdsTagCloseClick=e(this,"pdsTagCloseClick",7),this.hostKeeper=new t,this.truncationCleanup=null,this.dot=!1,this.sentiment="neutral",this.variant="text",this.dismissLabel="Remove",this.handleCloseClick=()=>{this.pdsTagCloseClick.emit()}}connectedCallback(){this.hostKeeper.connect(this.el),this.maxWidth&&this.labelTextEl&&this.initTruncationTooltip()}componentDidRender(){this.maxWidth&&this.labelTextEl?this.labelTextEl!==this.tooltipBoundEl&&this.initTruncationTooltip():this.tooltipBoundEl&&this.destroyTruncationTooltip()}disconnectedCallback(){this.hostKeeper.disconnect(),this.destroyTruncationTooltip()}initTruncationTooltip(){if(this.destroyTruncationTooltip(),this.labelTextEl){const i=this.el.closest(d);this.truncationCleanup=h(Object.assign({hostEl:this.el,contentEl:this.labelTextEl,getTooltipText:()=>this.el.textContent||"",manageTabIndex:"dropdown"!==this.effectiveVariant&&!i,focusEl:null!=i?i:this.el},function(i){const o=(null==i?void 0:i.matches('[role="option"]'))?i:null,e=null==o?void 0:o.closest('[role="listbox"]');return o&&e?{placement:"right",reference:{getBoundingClientRect:()=>{const{top:i,bottom:n,height:r}=o.getBoundingClientRect(),{left:p,right:c,width:s}=e.getBoundingClientRect();return{x:p,y:i,top:i,left:p,bottom:n,right:c,width:s,height:r}}}}:{}}(i))),this.tooltipBoundEl=this.labelTextEl}}destroyTruncationTooltip(){this.truncationCleanup&&(this.truncationCleanup(),this.truncationCleanup=null),this.tooltipBoundEl=null}get effectiveSize(){var i;return null!==(i=this.size)&&void 0!==i?i:"md"}classNames(){const i=["pds-chip"],o=this.effectiveSize;o&&"md"!==o&&i.push("pds-chip--"+o);const e="brand"===this.sentiment?"text":this.variant;return e&&i.push("pds-chip--"+e),this.sentiment&&i.push("pds-chip--"+this.sentiment),i.join(" ")}get effectiveVariant(){return"brand"===this.sentiment?"text":this.variant}get iconSize(){switch(this.effectiveSize){case"sm":return"10px";case"lg":return"14px";default:return"12px"}}setChipContent(){const i="brand"!==this.sentiment&&this.dot;return"dropdown"===this.effectiveVariant?n("button",{class:"pds-chip__button",type:"button",part:"button"},this.icon&&n("pds-icon",{class:"pds-chip__icon",part:"icon",icon:this.icon,size:this.iconSize,"aria-hidden":"true"}),i&&n("i",{class:"pds-chip__dot",part:"dot","aria-hidden":"true"}),n("span",{class:"pds-chip__label-text",ref:i=>this.labelTextEl=i},n("slot",null)),n("pds-icon",{icon:c,size:this.iconSize,"aria-hidden":"true"})):n("span",{class:"pds-chip__label"},this.icon&&n("pds-icon",{class:"pds-chip__icon",part:"icon",icon:this.icon,size:this.iconSize,"aria-hidden":"true"}),i&&n("i",{class:"pds-chip__dot",part:"dot","aria-hidden":"true"}),n("span",{class:"pds-chip__label-text",ref:i=>this.labelTextEl=i},n("slot",null)))}get hostStyles(){const i={};this.maxWidth&&(i["--pds-chip-max-width"]=this.maxWidth);const o=a(this.dotColor,{semanticMap:v});void 0!==o&&(i["--pds-chip-dot-color"]=o);const e=a(this.iconColor,{semanticMap:v});return void 0!==e&&(i["--pds-chip-icon-color"]=e),i}renderCloseButton(){return n(this.removeUrl?"a":"button",Object.assign({},(()=>{if(this.removeUrl){const i={class:"pds-chip__close",href:this.removeUrl,"aria-label":this.dismissLabel};this.removeTarget&&(i.target=this.removeTarget),this.removeHttpMethod&&(i["data-method"]=this.removeHttpMethod,i["data-turbo-method"]=this.removeHttpMethod);const o=[];return"_blank"===this.removeTarget&&o.push("noopener","noreferrer"),this.removeHttpMethod&&"get"!==this.removeHttpMethod&&o.push("nofollow"),o.length>0&&(i.rel=o.join(" ")),i}return{class:"pds-chip__close",type:"button","aria-label":this.dismissLabel}})(),{onClick:this.handleCloseClick}),n("pds-icon",{icon:s,size:this.iconSize,"aria-hidden":"true"}))}render(){const i=this.classNames(),o=this.hostStyles;return this.hostKeeper.record(i,o),n(r,{key:"b5afded680c3fa09523a7928d13c2a566a8a504c",class:i,id:this.componentId,style:o},this.setChipContent(),"tag"===this.effectiveVariant&&this.renderCloseButton())}get el(){return this}static get style(){return":host{--pine-chip-color-accent:var(--pine-color-purple-100);--pine-chip-color-accent-hover:var(--pine-color-purple-300);--pine-chip-color-accent-dot:var(--pine-color-purple-600);--pine-chip-color-accent-text:var(--pine-color-purple-950);--pine-chip-color-danger:var(--pine-color-red-100);--pine-chip-color-danger-hover:var(--pine-color-red-300);--pine-chip-color-danger-dot:var(--pine-color-red-600);--pine-chip-color-danger-text:var(--pine-color-red-950);--pine-chip-color-info:var(--pine-color-blue-100);--pine-chip-color-info-hover:var(--pine-color-blue-300);--pine-chip-color-info-dot:var(--pine-color-blue-600);--pine-chip-color-info-text:var(--pine-color-blue-950);--pine-chip-color-neutral:var(--pine-color-grey-100);--pine-chip-color-neutral-hover:var(--pine-color-grey-300);--pine-chip-color-neutral-dot:var(--pine-color-grey-600);--pine-chip-color-neutral-text:var(--pine-color-grey-950);--pine-chip-color-solid:var(--pine-color-grey-900);--pine-chip-color-solid-hover:var(--pine-color-grey-950);--pine-chip-color-solid-dot:var(--pine-color-white);--pine-chip-color-solid-text:var(--pine-color-white);--pine-chip-color-subtle:var(--pine-color-white);--pine-chip-color-subtle-hover:var(--pine-color-grey-300);--pine-chip-color-subtle-dot:var(--pine-color-grey-900);--pine-chip-color-subtle-text:var(--pine-color-grey-900);--pine-chip-color-success:var(--pine-color-green-100);--pine-chip-color-success-hover:var(--pine-color-green-300);--pine-chip-color-success-dot:var(--pine-color-green-600);--pine-chip-color-success-text:var(--pine-color-green-950);--pine-chip-color-warning:var(--pine-color-yellow-100);--pine-chip-color-warning-hover:var(--pine-color-yellow-300);--pine-chip-color-warning-dot:var(--pine-color-yellow-600);--pine-chip-color-warning-text:var(--pine-color-yellow-950)}:host-context([data-theme=dark]){--pine-chip-color-accent:var(--pine-color-purple-900);--pine-chip-color-accent-hover:var(--pine-color-purple-800);--pine-chip-color-accent-dot:var(--pine-color-purple-400);--pine-chip-color-accent-text:var(--pine-color-purple-100);--pine-chip-color-danger:var(--pine-color-red-900);--pine-chip-color-danger-hover:var(--pine-color-red-800);--pine-chip-color-danger-dot:var(--pine-color-red-400);--pine-chip-color-danger-text:var(--pine-color-red-100);--pine-chip-color-info:var(--pine-color-blue-900);--pine-chip-color-info-hover:var(--pine-color-blue-800);--pine-chip-color-info-dot:var(--pine-color-blue-400);--pine-chip-color-info-text:var(--pine-color-blue-100);--pine-chip-color-neutral:var(--pine-color-grey-800);--pine-chip-color-neutral-hover:var(--pine-color-grey-600);--pine-chip-color-neutral-dot:var(--pine-color-grey-300);--pine-chip-color-neutral-text:var(--pine-color-grey-100);--pine-chip-color-solid:var(--pine-color-white);--pine-chip-color-solid-hover:var(--pine-color-grey-100);--pine-chip-color-solid-dot:var(--pine-color-grey-900);--pine-chip-color-solid-text:var(--pine-color-grey-900);--pine-chip-color-subtle:var(--pine-color-grey-900);--pine-chip-color-subtle-hover:var(--pine-color-grey-500);--pine-chip-color-subtle-dot:var(--pine-color-white);--pine-chip-color-subtle-text:var(--pine-color-white);--pine-chip-color-success:var(--pine-color-green-900);--pine-chip-color-success-hover:var(--pine-color-green-800);--pine-chip-color-success-dot:var(--pine-color-green-400);--pine-chip-color-success-text:var(--pine-color-green-100);--pine-chip-color-warning:var(--pine-color-yellow-900);--pine-chip-color-warning-hover:var(--pine-color-yellow-800);--pine-chip-color-warning-dot:var(--pine-color-yellow-400);--pine-chip-color-warning-text:var(--pine-color-yellow-100)}:host{--sizing-close:var(--pine-dimension-125);-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);display:-ms-inline-flexbox;display:inline-flex;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--accent){background:var(--pine-chip-color-accent);border:var(--pine-border-width) solid var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-accent-dot))}:host(.pds-chip--accent) .pds-chip__label,:host(.pds-chip--accent) .pds-chip__button,:host(.pds-chip--accent) .pds-chip__close{color:var(--pine-chip-color-accent-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--danger){background:var(--pine-chip-color-danger);border:var(--pine-border-width) solid var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-danger-dot))}:host(.pds-chip--danger) .pds-chip__label,:host(.pds-chip--danger) .pds-chip__button,:host(.pds-chip--danger) .pds-chip__close{color:var(--pine-chip-color-danger-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--info){background:var(--pine-chip-color-info);border:var(--pine-border-width) solid var(--pine-chip-color-info-hover)}:host(.pds-chip--info) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-info-dot))}:host(.pds-chip--info) .pds-chip__label,:host(.pds-chip--info) .pds-chip__button,:host(.pds-chip--info) .pds-chip__close{color:var(--pine-chip-color-info-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--pine-chip-color-info-hover)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--pine-chip-color-info-hover)}:host(.pds-chip--neutral){background:var(--pine-chip-color-neutral);border:var(--pine-border-width) solid var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-neutral-dot))}:host(.pds-chip--neutral) .pds-chip__label,:host(.pds-chip--neutral) .pds-chip__button,:host(.pds-chip--neutral) .pds-chip__close{color:var(--pine-chip-color-neutral-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--solid){background:var(--pine-chip-color-solid);border:var(--pine-border-width) solid var(--pine-chip-color-solid-hover)}:host(.pds-chip--solid) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-solid-dot))}:host(.pds-chip--solid) .pds-chip__label,:host(.pds-chip--solid) .pds-chip__button,:host(.pds-chip--solid) .pds-chip__close{color:var(--pine-chip-color-solid-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--solid) .pds-chip__close:hover{background:var(--pine-chip-color-solid-hover)}:host(.pds-chip--solid.pds-chip--dropdown:hover){background:var(--pine-chip-color-solid-hover)}:host(.pds-chip--subtle){background:var(--pine-chip-color-subtle);border:var(--pine-border-width) solid var(--pine-chip-color-subtle-hover)}:host(.pds-chip--subtle) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-subtle-dot))}:host(.pds-chip--subtle) .pds-chip__label,:host(.pds-chip--subtle) .pds-chip__button,:host(.pds-chip--subtle) .pds-chip__close{color:var(--pine-chip-color-subtle-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--subtle) .pds-chip__close:hover{background:var(--pine-chip-color-subtle-hover)}:host(.pds-chip--subtle.pds-chip--dropdown:hover){background:var(--pine-chip-color-subtle-hover)}:host(.pds-chip--success){background:var(--pine-chip-color-success);border:var(--pine-border-width) solid var(--pine-chip-color-success-hover)}:host(.pds-chip--success) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-success-dot))}:host(.pds-chip--success) .pds-chip__label,:host(.pds-chip--success) .pds-chip__button,:host(.pds-chip--success) .pds-chip__close{color:var(--pine-chip-color-success-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--pine-chip-color-success-hover)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--pine-chip-color-success-hover)}:host(.pds-chip--warning){background:var(--pine-chip-color-warning);border:var(--pine-border-width) solid var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-warning-dot))}:host(.pds-chip--warning) .pds-chip__label,:host(.pds-chip--warning) .pds-chip__button,:host(.pds-chip--warning) .pds-chip__close{color:var(--pine-chip-color-warning-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--solid){border-color:transparent}.pds-chip__dot{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);display:inline-block;-ms-flex-negative:0;flex-shrink:0;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}.pds-chip__icon{color:var(--pds-chip-icon-color, currentColor)}.pds-chip__label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host([max-width]){-webkit-box-sizing:border-box;box-sizing:border-box;max-width:var(--pds-chip-max-width);min-width:0}:host([max-width]) .pds-chip__label,:host([max-width]) .pds-chip__button{min-width:0}:host([max-width]) .pds-chip__label-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-chip__label,.pds-chip__button{font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--dropdown){padding:var(--pine-dimension-none)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-dimension-sm);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-025) var(--pine-dimension-100)}.pds-chip__button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__button pds-icon:last-child{-webkit-margin-end:calc(var(--pine-dimension-025) * -1);margin-inline-end:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--sizing-close);-webkit-margin-end:calc(var(--pine-dimension-xs) * -1);margin-inline-end:calc(var(--pine-dimension-xs) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{outline:var(--pine-outline-focus)}:host(.pds-chip--sm){--sizing-close:var(--pine-dimension-100);padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--sm) .pds-chip__label,:host(.pds-chip--sm) .pds-chip__button{font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--sm.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--sm.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--sm.pds-chip--brand) .pds-chip__label{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--lg){padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--lg) .pds-chip__label,:host(.pds-chip--lg) .pds-chip__button{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}:host(.pds-chip--lg.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--lg.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-150)}:host(.pds-chip--brand){background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;padding:1px;position:relative}:host(.pds-chip--brand) .pds-chip__label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-100);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__button,:host(.pds-chip--brand) .pds-chip__close{color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__close:hover{background:rgba(255, 255, 255, 0.8)}"}},[257,"pds-chip",{componentId:[1,"component-id"],dot:[4],dotColor:[1,"dot-color"],icon:[1],iconColor:[1,"icon-color"],size:[1],sentiment:[1],variant:[1],removeUrl:[1,"remove-url"],removeHttpMethod:[1,"remove-http-method"],removeTarget:[1,"remove-target"],dismissLabel:[1,"dismiss-label"],maxWidth:[513,"max-width"]}]);function g(){"undefined"!=typeof customElements&&["pds-chip","pds-icon"].forEach((i=>{switch(i){case"pds-chip":customElements.get(p(i))||customElements.define(p(i),u);break;case"pds-icon":customElements.get(p(i))||l()}}))}export{u as P,g as d}
+import{proxyCustomElement as i,HTMLElement as o,createEvent as e,h as n,Host as r,transformTag as p}from"@stencil/core/internal/client";import{d as c,r as s}from"./index2.js";import{H as t}from"./attributes.js";import{F as d,s as h}from"./truncation-tooltip.js";import{n as a}from"./utils.js";import{d as l}from"./pds-icon2.js";const v={accent:"var(--pine-chip-color-accent-dot)",danger:"var(--pine-chip-color-danger-dot)",info:"var(--pine-chip-color-info-dot)",neutral:"var(--pine-chip-color-neutral-dot)",solid:"var(--pine-chip-color-solid-dot)",subtle:"var(--pine-chip-color-subtle-dot)",success:"var(--pine-chip-color-success-dot)",warning:"var(--pine-chip-color-warning-dot)"},u=i(class extends o{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.pdsTagCloseClick=e(this,"pdsTagCloseClick",7),this.hostKeeper=new t,this.truncationCleanup=null,this.dot=!1,this.sentiment="neutral",this.variant="text",this.dismissLabel="Remove",this.handleCloseClick=()=>{this.pdsTagCloseClick.emit()}}connectedCallback(){this.hostKeeper.connect(this.el),this.maxWidth&&this.labelTextEl&&this.initTruncationTooltip()}componentDidRender(){this.maxWidth&&this.labelTextEl?this.labelTextEl!==this.tooltipBoundEl&&this.initTruncationTooltip():this.tooltipBoundEl&&this.destroyTruncationTooltip()}disconnectedCallback(){this.hostKeeper.disconnect(),this.destroyTruncationTooltip()}initTruncationTooltip(){if(this.destroyTruncationTooltip(),this.labelTextEl){const i=this.el.closest(d),o=null!==this.el.closest('[aria-hidden="true"]');this.truncationCleanup=h(Object.assign({hostEl:this.el,contentEl:this.labelTextEl,getTooltipText:()=>this.el.textContent||"",manageTabIndex:"dropdown"!==this.effectiveVariant&&!i&&!o,focusEl:null!=i?i:this.el},function(i){const o=(null==i?void 0:i.matches('[role="option"]'))?i:null,e=null==o?void 0:o.closest('[role="listbox"]');return o&&e?{placement:"right",reference:{getBoundingClientRect:()=>{const{top:i,bottom:n,height:r}=o.getBoundingClientRect(),{left:p,right:c,width:s}=e.getBoundingClientRect();return{x:p,y:i,top:i,left:p,bottom:n,right:c,width:s,height:r}}}}:{}}(i))),this.tooltipBoundEl=this.labelTextEl}}destroyTruncationTooltip(){this.truncationCleanup&&(this.truncationCleanup(),this.truncationCleanup=null),this.tooltipBoundEl=null}get effectiveSize(){var i;return null!==(i=this.size)&&void 0!==i?i:"md"}classNames(){const i=["pds-chip"],o=this.effectiveSize;o&&"md"!==o&&i.push("pds-chip--"+o);const e="brand"===this.sentiment?"text":this.variant;return e&&i.push("pds-chip--"+e),this.sentiment&&i.push("pds-chip--"+this.sentiment),i.join(" ")}get effectiveVariant(){return"brand"===this.sentiment?"text":this.variant}get iconSize(){switch(this.effectiveSize){case"sm":return"10px";case"lg":return"14px";default:return"12px"}}setChipContent(){const i="brand"!==this.sentiment&&this.dot;return"dropdown"===this.effectiveVariant?n("button",{class:"pds-chip__button",type:"button",part:"button"},this.icon&&n("pds-icon",{class:"pds-chip__icon",part:"icon",icon:this.icon,size:this.iconSize,"aria-hidden":"true"}),i&&n("i",{class:"pds-chip__dot",part:"dot","aria-hidden":"true"}),n("span",{class:"pds-chip__label-text",ref:i=>this.labelTextEl=i},n("slot",null)),n("pds-icon",{icon:c,size:this.iconSize,"aria-hidden":"true"})):n("span",{class:"pds-chip__label"},this.icon&&n("pds-icon",{class:"pds-chip__icon",part:"icon",icon:this.icon,size:this.iconSize,"aria-hidden":"true"}),i&&n("i",{class:"pds-chip__dot",part:"dot","aria-hidden":"true"}),n("span",{class:"pds-chip__label-text",ref:i=>this.labelTextEl=i},n("slot",null)))}get hostStyles(){const i={};this.maxWidth&&(i["--pds-chip-max-width"]=this.maxWidth);const o=a(this.dotColor,{semanticMap:v});void 0!==o&&(i["--pds-chip-dot-color"]=o);const e=a(this.iconColor,{semanticMap:v});return void 0!==e&&(i["--pds-chip-icon-color"]=e),i}renderCloseButton(){return n(this.removeUrl?"a":"button",Object.assign({},(()=>{if(this.removeUrl){const i={class:"pds-chip__close",href:this.removeUrl,"aria-label":this.dismissLabel};this.removeTarget&&(i.target=this.removeTarget),this.removeHttpMethod&&(i["data-method"]=this.removeHttpMethod,i["data-turbo-method"]=this.removeHttpMethod);const o=[];return"_blank"===this.removeTarget&&o.push("noopener","noreferrer"),this.removeHttpMethod&&"get"!==this.removeHttpMethod&&o.push("nofollow"),o.length>0&&(i.rel=o.join(" ")),i}return{class:"pds-chip__close",type:"button","aria-label":this.dismissLabel}})(),{onClick:this.handleCloseClick}),n("pds-icon",{icon:s,size:this.iconSize,"aria-hidden":"true"}))}render(){const i=this.classNames(),o=this.hostStyles;return this.hostKeeper.record(i,o),n(r,{key:"0e6b05bfeae1d3b7d5cc23e71aaad2fa00fc7ddf",class:i,id:this.componentId,style:o},this.setChipContent(),"tag"===this.effectiveVariant&&this.renderCloseButton())}get el(){return this}static get style(){return":host{--pine-chip-color-accent:var(--pine-color-purple-100);--pine-chip-color-accent-hover:var(--pine-color-purple-300);--pine-chip-color-accent-dot:var(--pine-color-purple-600);--pine-chip-color-accent-text:var(--pine-color-purple-950);--pine-chip-color-danger:var(--pine-color-red-100);--pine-chip-color-danger-hover:var(--pine-color-red-300);--pine-chip-color-danger-dot:var(--pine-color-red-600);--pine-chip-color-danger-text:var(--pine-color-red-950);--pine-chip-color-info:var(--pine-color-blue-100);--pine-chip-color-info-hover:var(--pine-color-blue-300);--pine-chip-color-info-dot:var(--pine-color-blue-600);--pine-chip-color-info-text:var(--pine-color-blue-950);--pine-chip-color-neutral:var(--pine-color-grey-100);--pine-chip-color-neutral-hover:var(--pine-color-grey-300);--pine-chip-color-neutral-dot:var(--pine-color-grey-600);--pine-chip-color-neutral-text:var(--pine-color-grey-950);--pine-chip-color-solid:var(--pine-color-grey-900);--pine-chip-color-solid-hover:var(--pine-color-grey-950);--pine-chip-color-solid-dot:var(--pine-color-white);--pine-chip-color-solid-text:var(--pine-color-white);--pine-chip-color-subtle:var(--pine-color-white);--pine-chip-color-subtle-hover:var(--pine-color-grey-300);--pine-chip-color-subtle-dot:var(--pine-color-grey-900);--pine-chip-color-subtle-text:var(--pine-color-grey-900);--pine-chip-color-success:var(--pine-color-green-100);--pine-chip-color-success-hover:var(--pine-color-green-300);--pine-chip-color-success-dot:var(--pine-color-green-600);--pine-chip-color-success-text:var(--pine-color-green-950);--pine-chip-color-warning:var(--pine-color-yellow-100);--pine-chip-color-warning-hover:var(--pine-color-yellow-300);--pine-chip-color-warning-dot:var(--pine-color-yellow-600);--pine-chip-color-warning-text:var(--pine-color-yellow-950)}:host-context([data-theme=dark]){--pine-chip-color-accent:var(--pine-color-purple-900);--pine-chip-color-accent-hover:var(--pine-color-purple-800);--pine-chip-color-accent-dot:var(--pine-color-purple-400);--pine-chip-color-accent-text:var(--pine-color-purple-100);--pine-chip-color-danger:var(--pine-color-red-900);--pine-chip-color-danger-hover:var(--pine-color-red-800);--pine-chip-color-danger-dot:var(--pine-color-red-400);--pine-chip-color-danger-text:var(--pine-color-red-100);--pine-chip-color-info:var(--pine-color-blue-900);--pine-chip-color-info-hover:var(--pine-color-blue-800);--pine-chip-color-info-dot:var(--pine-color-blue-400);--pine-chip-color-info-text:var(--pine-color-blue-100);--pine-chip-color-neutral:var(--pine-color-grey-800);--pine-chip-color-neutral-hover:var(--pine-color-grey-600);--pine-chip-color-neutral-dot:var(--pine-color-grey-300);--pine-chip-color-neutral-text:var(--pine-color-grey-100);--pine-chip-color-solid:var(--pine-color-white);--pine-chip-color-solid-hover:var(--pine-color-grey-100);--pine-chip-color-solid-dot:var(--pine-color-grey-900);--pine-chip-color-solid-text:var(--pine-color-grey-900);--pine-chip-color-subtle:var(--pine-color-grey-900);--pine-chip-color-subtle-hover:var(--pine-color-grey-500);--pine-chip-color-subtle-dot:var(--pine-color-white);--pine-chip-color-subtle-text:var(--pine-color-white);--pine-chip-color-success:var(--pine-color-green-900);--pine-chip-color-success-hover:var(--pine-color-green-800);--pine-chip-color-success-dot:var(--pine-color-green-400);--pine-chip-color-success-text:var(--pine-color-green-100);--pine-chip-color-warning:var(--pine-color-yellow-900);--pine-chip-color-warning-hover:var(--pine-color-yellow-800);--pine-chip-color-warning-dot:var(--pine-color-yellow-400);--pine-chip-color-warning-text:var(--pine-color-yellow-100)}:host{--sizing-close:var(--pine-dimension-125);-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);display:-ms-inline-flexbox;display:inline-flex;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--accent){background:var(--pine-chip-color-accent);border:var(--pine-border-width) solid var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-accent-dot))}:host(.pds-chip--accent) .pds-chip__label,:host(.pds-chip--accent) .pds-chip__button,:host(.pds-chip--accent) .pds-chip__close{color:var(--pine-chip-color-accent-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--danger){background:var(--pine-chip-color-danger);border:var(--pine-border-width) solid var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-danger-dot))}:host(.pds-chip--danger) .pds-chip__label,:host(.pds-chip--danger) .pds-chip__button,:host(.pds-chip--danger) .pds-chip__close{color:var(--pine-chip-color-danger-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--info){background:var(--pine-chip-color-info);border:var(--pine-border-width) solid var(--pine-chip-color-info-hover)}:host(.pds-chip--info) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-info-dot))}:host(.pds-chip--info) .pds-chip__label,:host(.pds-chip--info) .pds-chip__button,:host(.pds-chip--info) .pds-chip__close{color:var(--pine-chip-color-info-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--pine-chip-color-info-hover)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--pine-chip-color-info-hover)}:host(.pds-chip--neutral){background:var(--pine-chip-color-neutral);border:var(--pine-border-width) solid var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-neutral-dot))}:host(.pds-chip--neutral) .pds-chip__label,:host(.pds-chip--neutral) .pds-chip__button,:host(.pds-chip--neutral) .pds-chip__close{color:var(--pine-chip-color-neutral-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--solid){background:var(--pine-chip-color-solid);border:var(--pine-border-width) solid var(--pine-chip-color-solid-hover)}:host(.pds-chip--solid) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-solid-dot))}:host(.pds-chip--solid) .pds-chip__label,:host(.pds-chip--solid) .pds-chip__button,:host(.pds-chip--solid) .pds-chip__close{color:var(--pine-chip-color-solid-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--solid) .pds-chip__close:hover{background:var(--pine-chip-color-solid-hover)}:host(.pds-chip--solid.pds-chip--dropdown:hover){background:var(--pine-chip-color-solid-hover)}:host(.pds-chip--subtle){background:var(--pine-chip-color-subtle);border:var(--pine-border-width) solid var(--pine-chip-color-subtle-hover)}:host(.pds-chip--subtle) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-subtle-dot))}:host(.pds-chip--subtle) .pds-chip__label,:host(.pds-chip--subtle) .pds-chip__button,:host(.pds-chip--subtle) .pds-chip__close{color:var(--pine-chip-color-subtle-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--subtle) .pds-chip__close:hover{background:var(--pine-chip-color-subtle-hover)}:host(.pds-chip--subtle.pds-chip--dropdown:hover){background:var(--pine-chip-color-subtle-hover)}:host(.pds-chip--success){background:var(--pine-chip-color-success);border:var(--pine-border-width) solid var(--pine-chip-color-success-hover)}:host(.pds-chip--success) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-success-dot))}:host(.pds-chip--success) .pds-chip__label,:host(.pds-chip--success) .pds-chip__button,:host(.pds-chip--success) .pds-chip__close{color:var(--pine-chip-color-success-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--pine-chip-color-success-hover)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--pine-chip-color-success-hover)}:host(.pds-chip--warning){background:var(--pine-chip-color-warning);border:var(--pine-border-width) solid var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--pds-chip-dot-color, var(--pine-chip-color-warning-dot))}:host(.pds-chip--warning) .pds-chip__label,:host(.pds-chip--warning) .pds-chip__button,:host(.pds-chip--warning) .pds-chip__close{color:var(--pine-chip-color-warning-text);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--solid){border-color:transparent}.pds-chip__dot{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);display:inline-block;-ms-flex-negative:0;flex-shrink:0;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}.pds-chip__icon{color:var(--pds-chip-icon-color, currentColor)}.pds-chip__label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host([max-width]){-webkit-box-sizing:border-box;box-sizing:border-box;max-width:var(--pds-chip-max-width);min-width:0}:host([max-width]) .pds-chip__label,:host([max-width]) .pds-chip__button{min-width:0}:host([max-width]) .pds-chip__label-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-chip__label,.pds-chip__button{font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--dropdown){padding:var(--pine-dimension-none)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-dimension-sm);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-025) var(--pine-dimension-100)}.pds-chip__button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__button pds-icon:last-child{-webkit-margin-end:calc(var(--pine-dimension-025) * -1);margin-inline-end:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--sizing-close);-webkit-margin-end:calc(var(--pine-dimension-xs) * -1);margin-inline-end:calc(var(--pine-dimension-xs) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{outline:var(--pine-outline-focus)}:host(.pds-chip--sm){--sizing-close:var(--pine-dimension-100);padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--sm) .pds-chip__label,:host(.pds-chip--sm) .pds-chip__button{font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--sm.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--sm.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--sm.pds-chip--brand) .pds-chip__label{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--lg){padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--lg) .pds-chip__label,:host(.pds-chip--lg) .pds-chip__button{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}:host(.pds-chip--lg.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--lg.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-150)}:host(.pds-chip--brand){background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;padding:1px;position:relative}:host(.pds-chip--brand) .pds-chip__label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-100);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__button,:host(.pds-chip--brand) .pds-chip__close{color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__close:hover{background:rgba(255, 255, 255, 0.8)}"}},[257,"pds-chip",{componentId:[1,"component-id"],dot:[4],dotColor:[1,"dot-color"],icon:[1],iconColor:[1,"icon-color"],size:[1],sentiment:[1],variant:[1],removeUrl:[1,"remove-url"],removeHttpMethod:[1,"remove-http-method"],removeTarget:[1,"remove-target"],dismissLabel:[1,"dismiss-label"],maxWidth:[513,"max-width"]}]);function g(){"undefined"!=typeof customElements&&["pds-chip","pds-icon"].forEach((i=>{switch(i){case"pds-chip":customElements.get(p(i))||customElements.define(p(i),u);break;case"pds-icon":customElements.get(p(i))||l()}}))}export{u as P,g as d}