@xplortech/apollo-core 2.7.0 → 2.7.1

package/dist/components/xpl-select2.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as i,Host as l,Fragment as o,transformTag as n}from"@stencil/core/internal/client";import{t as a}from"./index3.js";import{d}from"./xpl-dropdown2.js";import{d as h}from"./xpl-dropdown-group2.js";import{d as c}from"./xpl-dropdown-heading2.js";import{d as r}from"./xpl-dropdown-option2.js";import{d as p}from"./xpl-icon2.js";import{d as u}from"./xpl-tag2.js";import{v}from"./v4.js";function m(e){return e.label||e.value}function b(e){return e.reduce(((e,t)=>[...e,...t.groupName?t.options:[t]]),[])}const g=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.selectChange=s(this,"selectChange",7),this.changeEvent=s(this,"changeEvent",7),this.dropdownStateChange=s(this,"dropdownStateChange",7),this.triggerDropdown=s(this,"triggerDropdown",7),this.choices=[],this.selectIcon="chevron-down",this.mode="single",this.truncate=!0,this.active=!1,this.id=v(),this.keepFocus=!1,this.visibleChoices=1/0,this.choicesState=[],this.value=this.calculateValue(),this.dropdownOpenState=!1,this.container=null,this.dropdown=null,this.handleResizeThrottled=a((()=>{this.maybeTruncateChoices()}),250),this.handleTabKeyDown=e=>{"Tab"===e.key&&(this.keepFocus=!0)},this.handleTagRemove=e=>{const t=t=>(null==e?void 0:e.value)&&t.value===e.value||(null==e?void 0:e.label)&&t.label===e.label;this.choicesState=this.choicesState.map((e=>{var s;return Object.assign(Object.assign({},e),{isSelected:!t(e)&&e.isSelected,options:null===(s=e.options)||void 0===s?void 0:s.map((e=>Object.assign(Object.assign({},e),{isSelected:!t(e)&&e.isSelected})))})}))},this.handleDropdownScroll=e=>{const{scrollTop:t,scrollHeight:s,clientHeight:i}=this.dropdown.querySelector(".xpl-dropdown-list");(0===t&&e.deltaY<0||t+i>=s&&e.deltaY>0)&&e.preventDefault()}}onChoicesPropChanged(e){this.choicesState=this.initializeChoicesState()}onSelectedValuesPropChanged(){this.choicesState=this.initializeChoicesState()}onChoicesStateChanged(){this.update()}handleValueStateChange(e){this.selectChange.emit(e),this.changeEvent.emit("single"===this.mode?e:(null==e?void 0:e.length)?e.split("|"):[]),this.customDisplayValue&&null!==this.container&&(this.container.querySelectorAll(".custom-display-value").forEach((t=>{t.classList.toggle("display-active",e.length>0),t.classList.toggle("display-inactive",0===e.length)})),this.container.querySelectorAll(".placeholder").forEach((t=>{t.classList.toggle("placeholder-hidden",e.length>0)})))}onDropdownOpenStateChanged(e){this.dropdownStateChange.emit(e)}initializeChoicesState(){return this.choices.map((e=>{var t;const s="string"==typeof this.selectedValues?[this.selectedValues]:this.selectedValues;return Object.assign(Object.assign({},e),{isSelected:e.isSelected||(null==s?void 0:s.includes(e.value||e.label)),options:null===(t=e.options)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{isSelected:e.isSelected||(null==s?void 0:s.includes(e.value||e.label))})))})}))}maybeTruncateChoices(){var e,t;if("single"===this.mode||!this.truncate)return;const s=null===(e=this.container)||void 0===e?void 0:e.getBoundingClientRect().width;let i=0,l=0;const o=null===(t=b(this.choicesState))||void 0===t?void 0:t.filter((e=>e.isSelected));if(!o.length)return;const n=o.length;o.forEach(((e,t)=>(l+=function(e){const t=document.createElement("canvas").getContext("2d");return t.font="14px apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",t.measureText(e).width+44}(m(o[t])),l>s-140||(i+=1),null))),i>=n&&(i=1/0),i<1&&(i=1),this.visibleChoices=i}closeDropdown(){var e;(null===(e=this.dropdown)||void 0===e?void 0:e.isOpen)&&(this.dropdown.isOpen=!1,this.active=!1)}calculateValue(){const e=b(this.choicesState).filter((e=>e.isSelected));return e.length?"single"===this.mode?e[0].value||e[0].label:e.map((e=>e.value||e.label)).join("|"):""}update(){this.value=this.calculateValue(),this.maybeTruncateChoices()}renderLabel(){return this.label||this.description?i("label",{class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},this.label,this.description&&i("small",{class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)):null}renderSelectedTags(){let e=0;const t=b(this.choicesState).filter((e=>e.isSelected));return t.length?t.map(((s,l)=>e>=this.visibleChoices?null:(e+=1,i("xpl-tag",{onClose:()=>this.handleTagRemove(t[l])},m(t[l]))))):null}renderError(){return this.error?i("label",{class:"xpl-input-error",htmlFor:this.id},i("xpl-icon",{icon:"alert-circle"}),this.error):null}componentWillLoad(){this.choicesState=this.initializeChoicesState()}handleClickEvent(e){const t=e.target.closest(".xpl-select");null!==t&&t===this.container||this.closeDropdown()}handleKeyDown(e){var t;"Escape"===e.key&&(this.active||(null===(t=this.container)||void 0===t?void 0:t.contains(document.activeElement)))&&this.closeDropdown()}handleResize(){this.handleResizeThrottled()}componentDidLoad(){requestAnimationFrame((()=>{this.maybeTruncateChoices()}))}disconnectedCallback(){var e;null===(e=this.handleResizeThrottled)||void 0===e||e.cancel()}handleDropdownTrigger(){var e;const t=null!==(e=this.dropdown.isOpen)&&void 0!==e&&e,s=!t;this.triggerDropdown.emit({prevState:t,nextState:s}).defaultPrevented||this.disabled||(this.dropdownOpenState=s,this.dropdown.isOpen=s)}async reset(){this.closeDropdown(),this.choicesState=this.choicesState.map((e=>{var t;return Object.assign(Object.assign({},e),{isSelected:!1,options:null===(t=e.options)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{isSelected:!1})))})}))}render(){var e,t,s,n;const a=b(this.choicesState).filter((e=>e.isSelected)),d=(null===(e=a[0])||void 0===e?void 0:e.label)||(null===(t=a[0])||void 0===t?void 0:t.value),h=a.length>1&&this.visibleChoices<1/0&&this.truncate&&!this.customDisplayValue,c=`+ ${Math.abs(this.choicesState.filter((e=>e.isSelected)).length-this.visibleChoices)} more`;return i(l,{key:"c02b59988eee5073103958a24061c46aa286ea50",class:{"xpl-select":!0,"xpl-select--disabled":this.disabled,"xpl-select--no-truncate":!this.truncate,[null!==(s=this.classNames)&&void 0!==s?s:""]:!!this.classNames},onKeyDown:this.handleTabKeyDown,ref:e=>{this.container=e}},this.renderLabel(),i("div",{key:"189c9d2e3370876b6289ee16ee1b8927e5bfc0ee",class:{"xpl-input":!0,"xpl-input--disabled":this.disabled,"xpl-input--error":(null===(n=this.error)||void 0===n?void 0:n.length)>=0}},i("div",{key:"a8df7de958be97becd2a9f6a2db761702e2066c3",class:"xpl-input-wrapper"},i("button",{key:"f00119d930d49b241d5160bfe7a70ee56ac598d8",class:"xpl-select__trigger",disabled:this.disabled,id:this.id,onKeyDown:this.handleTabKeyDown,onClick:e=>{e.preventDefault(),this.handleDropdownTrigger()},type:"button"},i("div",{key:"141643ae007e8f5827d4aeb8fdd2a95b14b003ff",class:{"xpl-select-value":!0,"xpl-select-value--active":"multi"===this.mode&&this.value.length>0,"has-value":this.value.length>0}},(()=>this.customDisplayValue?i(o,null,i("div",{class:{"custom-display-value":!0,"custom-display-value--inactive":0===this.value.length}},i("slot",{name:"custom-display-value"})),i("span",{class:{"xpl-placeholder--hidden":this.value.length>0}},this.placeholder)):"single"===this.mode?d||this.placeholder:this.value.length>0?this.renderSelectedTags():this.placeholder)(),h&&c),i("xpl-icon",{key:"05f6ba660e21584017715d3afc14d7bd8b8d536a",class:"xpl-select__chevron-down",icon:this.selectIcon}))),!this.disabled&&i("xpl-dropdown",{key:"9a452cf4c62cca5ba4279ddd8da09c9d24797dcf",ref:e=>{this.dropdown=e},isOpen:this.dropdownOpenState,options:this.choicesState,selectedValues:this.selectedValues,mode:this.mode,triggerId:this.id,update:(e,{component:t})=>{const{options:s}=t;s&&s.length>0&&(this.choicesState=s)},onIsOpenChange:e=>{this.dropdownOpenState=e.detail},onWheel:this.handleDropdownScroll,anchorToTrigger:!0}),this.renderError()),i("input",{key:"d9d6cbc69fc5fc688b2dda6ea1ef99435d90fc94",type:"hidden",name:this.name,value:this.value}))}static get watchers(){return{choices:[{onChoicesPropChanged:0}],selectedValues:[{onSelectedValuesPropChanged:0}],choicesState:[{onChoicesStateChanged:0}],value:[{handleValueStateChange:0}],dropdownOpenState:[{onDropdownOpenStateChanged:0}]}}},[260,"xpl-select",{choices:[16],selectIcon:[1,"select-icon"],description:[1],disabled:[4],error:[1],label:[1],mode:[1],name:[1],placeholder:[1],truncate:[4],customDisplayValue:[4,"custom-display-value"],selectedValues:[1,"selected-values"],classNames:[1,"class-names"],active:[32],id:[32],keepFocus:[32],visibleChoices:[32],choicesState:[32],value:[32],dropdownOpenState:[32],reset:[64]},[[8,"click","handleClickEvent"],[8,"keydown","handleKeyDown"],[9,"resize","handleResize"]],{choices:[{onChoicesPropChanged:0}],selectedValues:[{onSelectedValuesPropChanged:0}],choicesState:[{onChoicesStateChanged:0}],value:[{handleValueStateChange:0}],dropdownOpenState:[{onDropdownOpenStateChanged:0}]}]);function x(){"undefined"!=typeof customElements&&["xpl-select","xpl-dropdown","xpl-dropdown-group","xpl-dropdown-heading","xpl-dropdown-option","xpl-icon","xpl-tag"].forEach((e=>{switch(e){case"xpl-select":customElements.get(n(e))||customElements.define(n(e),g);break;case"xpl-dropdown":customElements.get(n(e))||d();break;case"xpl-dropdown-group":customElements.get(n(e))||h();break;case"xpl-dropdown-heading":customElements.get(n(e))||c();break;case"xpl-dropdown-option":customElements.get(n(e))||r();break;case"xpl-icon":customElements.get(n(e))||p();break;case"xpl-tag":customElements.get(n(e))||u()}}))}export{g as S,x as d}
+import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as i,Host as l,Fragment as o,transformTag as n}from"@stencil/core/internal/client";import{t as a}from"./index3.js";import{d}from"./xpl-dropdown2.js";import{d as h}from"./xpl-dropdown-group2.js";import{d as c}from"./xpl-dropdown-heading2.js";import{d as r}from"./xpl-dropdown-option2.js";import{d as p}from"./xpl-icon2.js";import{d as u}from"./xpl-tag2.js";import{v as m}from"./v4.js";function v(e){return e.label||e.value}function b(e){return e.reduce(((e,t)=>[...e,...t.groupName?t.options:[t]]),[])}const g=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.selectChange=s(this,"selectChange",7),this.changeEvent=s(this,"changeEvent",7),this.dropdownStateChange=s(this,"dropdownStateChange",7),this.triggerDropdown=s(this,"triggerDropdown",7),this.choices=[],this.selectIcon="chevron-down",this.dropdownPlacement="bottom-start",this.mode="single",this.truncate=!0,this.active=!1,this.id=m(),this.keepFocus=!1,this.visibleChoices=1/0,this.choicesState=[],this.value=this.calculateValue(),this.dropdownOpenState=!1,this.container=null,this.dropdown=null,this.handleResizeThrottled=a((()=>{this.maybeTruncateChoices()}),250),this.handleTabKeyDown=e=>{"Tab"===e.key&&(this.keepFocus=!0)},this.handleTagRemove=e=>{const t=t=>(null==e?void 0:e.value)&&t.value===e.value||(null==e?void 0:e.label)&&t.label===e.label;this.choicesState=this.choicesState.map((e=>{var s;return Object.assign(Object.assign({},e),{isSelected:!t(e)&&e.isSelected,options:null===(s=e.options)||void 0===s?void 0:s.map((e=>Object.assign(Object.assign({},e),{isSelected:!t(e)&&e.isSelected})))})}))},this.handleDropdownScroll=e=>{const{scrollTop:t,scrollHeight:s,clientHeight:i}=this.dropdown.querySelector(".xpl-dropdown-list");(0===t&&e.deltaY<0||t+i>=s&&e.deltaY>0)&&e.preventDefault()}}onChoicesPropChanged(e){this.choicesState=this.initializeChoicesState()}onSelectedValuesPropChanged(){this.choicesState=this.initializeChoicesState()}onChoicesStateChanged(){this.update()}handleValueStateChange(e){this.selectChange.emit(e),this.changeEvent.emit("single"===this.mode?e:(null==e?void 0:e.length)?e.split("|"):[]),this.customDisplayValue&&null!==this.container&&(this.container.querySelectorAll(".custom-display-value").forEach((t=>{t.classList.toggle("display-active",e.length>0),t.classList.toggle("display-inactive",0===e.length)})),this.container.querySelectorAll(".placeholder").forEach((t=>{t.classList.toggle("placeholder-hidden",e.length>0)})))}onDropdownOpenStateChanged(e){this.dropdownStateChange.emit(e)}initializeChoicesState(){return this.choices.map((e=>{var t;const s="string"==typeof this.selectedValues?[this.selectedValues]:this.selectedValues;return Object.assign(Object.assign({},e),{isSelected:e.isSelected||(null==s?void 0:s.includes(e.value||e.label)),options:null===(t=e.options)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{isSelected:e.isSelected||(null==s?void 0:s.includes(e.value||e.label))})))})}))}maybeTruncateChoices(){var e,t;if("single"===this.mode||!this.truncate)return;const s=null===(e=this.container)||void 0===e?void 0:e.getBoundingClientRect().width;let i=0,l=0;const o=null===(t=b(this.choicesState))||void 0===t?void 0:t.filter((e=>e.isSelected));if(!o.length)return;const n=o.length;o.forEach(((e,t)=>(l+=function(e){const t=document.createElement("canvas").getContext("2d");return t.font="14px apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif",t.measureText(e).width+44}(v(o[t])),l>s-140||(i+=1),null))),i>=n&&(i=1/0),i<1&&(i=1),this.visibleChoices=i}closeDropdown(){var e;(null===(e=this.dropdown)||void 0===e?void 0:e.isOpen)&&(this.dropdown.isOpen=!1,this.active=!1)}calculateValue(){const e=b(this.choicesState).filter((e=>e.isSelected));return e.length?"single"===this.mode?e[0].value||e[0].label:e.map((e=>e.value||e.label)).join("|"):""}update(){this.value=this.calculateValue(),this.maybeTruncateChoices()}renderLabel(){return this.label||this.description?i("label",{class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},this.label,this.description&&i("small",{class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)):null}renderSelectedTags(){let e=0;const t=b(this.choicesState).filter((e=>e.isSelected));return t.length?t.map(((s,l)=>e>=this.visibleChoices?null:(e+=1,i("xpl-tag",{onClose:()=>this.handleTagRemove(t[l])},v(t[l]))))):null}renderError(){return this.error?i("label",{class:"xpl-input-error",htmlFor:this.id},i("xpl-icon",{icon:"alert-circle"}),this.error):null}componentWillLoad(){this.choicesState=this.initializeChoicesState()}handleClickEvent(e){const t=e.target.closest(".xpl-select");null!==t&&t===this.container||this.closeDropdown()}handleKeyDown(e){var t;"Escape"===e.key&&(this.active||(null===(t=this.container)||void 0===t?void 0:t.contains(document.activeElement)))&&this.closeDropdown()}handleResize(){this.handleResizeThrottled()}componentDidLoad(){requestAnimationFrame((()=>{this.maybeTruncateChoices()}))}disconnectedCallback(){var e;null===(e=this.handleResizeThrottled)||void 0===e||e.cancel()}handleDropdownTrigger(){var e;const t=null!==(e=this.dropdown.isOpen)&&void 0!==e&&e,s=!t;this.triggerDropdown.emit({prevState:t,nextState:s}).defaultPrevented||this.disabled||(this.dropdownOpenState=s,this.dropdown.isOpen=s)}async reset(){this.closeDropdown(),this.choicesState=this.choicesState.map((e=>{var t;return Object.assign(Object.assign({},e),{isSelected:!1,options:null===(t=e.options)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{isSelected:!1})))})}))}render(){var e,t,s,n;const a=b(this.choicesState).filter((e=>e.isSelected)),d=(null===(e=a[0])||void 0===e?void 0:e.label)||(null===(t=a[0])||void 0===t?void 0:t.value),h=a.length>1&&this.visibleChoices<1/0&&this.truncate&&!this.customDisplayValue,c=`+ ${Math.abs(this.choicesState.filter((e=>e.isSelected)).length-this.visibleChoices)} more`;return i(l,{key:"09d3587fa268cb0621ea293d246e23cde93d75df",class:{"xpl-select":!0,"xpl-select--disabled":this.disabled,"xpl-select--no-truncate":!this.truncate,[null!==(s=this.classNames)&&void 0!==s?s:""]:!!this.classNames},onKeyDown:this.handleTabKeyDown,ref:e=>{this.container=e}},this.renderLabel(),i("div",{key:"007a61cc60c948d0691d6983cb197652084e417d",class:{"xpl-input":!0,"xpl-input--disabled":this.disabled,"xpl-input--error":(null===(n=this.error)||void 0===n?void 0:n.length)>=0}},i("div",{key:"e1edfe6e4b205bd6332f07031ee51ef7f9f6ac91",class:"xpl-input-wrapper"},i("button",{key:"53d079f28b8a1bcdd5498287dfd88bb7a3ba7b50",class:"xpl-select__trigger",disabled:this.disabled,id:this.id,onKeyDown:this.handleTabKeyDown,onClick:e=>{e.preventDefault(),this.handleDropdownTrigger()},type:"button"},i("div",{key:"5cfec98b2e829ea48e96b373e09e740d5bf02ef6",class:{"xpl-select-value":!0,"xpl-select-value--active":"multi"===this.mode&&this.value.length>0,"has-value":this.value.length>0}},(()=>this.customDisplayValue?i(o,null,i("div",{class:{"custom-display-value":!0,"custom-display-value--inactive":0===this.value.length}},i("slot",{name:"custom-display-value"})),i("span",{class:{"xpl-placeholder--hidden":this.value.length>0}},this.placeholder)):"single"===this.mode?d||this.placeholder:this.value.length>0?this.renderSelectedTags():this.placeholder)(),h&&c),i("xpl-icon",{key:"8bb01d1e8b206fb3c1963cdebcd293eeb2277e05",class:"xpl-select__chevron-down",icon:this.selectIcon}))),!this.disabled&&i("xpl-dropdown",{key:"f5e770c4b26449f3025d172d768d6df69bd0ae03",ref:e=>{this.dropdown=e},isOpen:this.dropdownOpenState,options:this.choicesState,selectedValues:this.selectedValues,mode:this.mode,triggerId:this.id,update:(e,{component:t})=>{const{options:s}=t;s&&s.length>0&&(this.choicesState=s)},onIsOpenChange:e=>{this.dropdownOpenState=e.detail},onWheel:this.handleDropdownScroll,anchorToTrigger:!0,flipFallbackPlacements:this.dropdownFlipFallbackPlacements,placement:this.dropdownPlacement}),this.renderError()),i("input",{key:"fe84c16780622e730100a58a948fc4fe27f6ddb5",type:"hidden",name:this.name,value:this.value}))}static get watchers(){return{choices:[{onChoicesPropChanged:0}],selectedValues:[{onSelectedValuesPropChanged:0}],choicesState:[{onChoicesStateChanged:0}],value:[{handleValueStateChange:0}],dropdownOpenState:[{onDropdownOpenStateChanged:0}]}}},[260,"xpl-select",{choices:[16],selectIcon:[1,"select-icon"],description:[1],disabled:[4],dropdownFlipFallbackPlacements:[16],dropdownPlacement:[1,"dropdown-placement"],error:[1],label:[1],mode:[1],name:[1],placeholder:[1],truncate:[4],customDisplayValue:[4,"custom-display-value"],selectedValues:[1,"selected-values"],classNames:[1,"class-names"],active:[32],id:[32],keepFocus:[32],visibleChoices:[32],choicesState:[32],value:[32],dropdownOpenState:[32],reset:[64]},[[8,"click","handleClickEvent"],[8,"keydown","handleKeyDown"],[9,"resize","handleResize"]],{choices:[{onChoicesPropChanged:0}],selectedValues:[{onSelectedValuesPropChanged:0}],choicesState:[{onChoicesStateChanged:0}],value:[{handleValueStateChange:0}],dropdownOpenState:[{onDropdownOpenStateChanged:0}]}]);function x(){"undefined"!=typeof customElements&&["xpl-select","xpl-dropdown","xpl-dropdown-group","xpl-dropdown-heading","xpl-dropdown-option","xpl-icon","xpl-tag"].forEach((e=>{switch(e){case"xpl-select":customElements.get(n(e))||customElements.define(n(e),g);break;case"xpl-dropdown":customElements.get(n(e))||d();break;case"xpl-dropdown-group":customElements.get(n(e))||h();break;case"xpl-dropdown-heading":customElements.get(n(e))||c();break;case"xpl-dropdown-option":customElements.get(n(e))||r();break;case"xpl-icon":customElements.get(n(e))||p();break;case"xpl-tag":customElements.get(n(e))||u()}}))}export{g as S,x as d}

package/dist/components/xpl-side-nav-item.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as s,createEvent as e,h as t,Host as n,transformTag as l}from"@stencil/core/internal/client";import{d as h}from"./xpl-icon2.js";const a=i(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.expandedChange=e(this,"expandedChange",7),this.navClick=e(this,"navClick",7),this.disabled=!1,this.expanded=!1,this.hasChildren=!1,this.hidden=!1,this.link=!1,this.selected=!1,this.handleClick=()=>{this.disabled||(this.hasChildren?(this.expanded=!this.expanded,this.expandedChange.emit(this.expanded)):this.navClick.emit())}}syncLinkHasChildrenExclusivity(){this.enforceLinkExcludesHasChildren()}componentWillLoad(){this.syncLinkHasChildrenExclusivity()}componentWillRender(){this.syncLinkHasChildrenExclusivity()}enforceLinkExcludesHasChildren(){this.link&&(this.hasChildren&&(this.hasChildren=!1),this.el.hasAttribute("has-children")&&this.el.removeAttribute("has-children"))}render(){var i;const s={"xpl-side-nav-item__link":!0,expanded:this.expanded,selected:this.selected};return t(n,{key:"10318a2c26c650f5c5e2143c2fe1bde6a372f933",class:{"xpl-side-nav-item":!0,"xpl-side-nav-item--link-disabled":this.link&&this.disabled}},this.link?t("slot",null):t("button",{type:"button",class:s,"aria-current":this.selected?"page":void 0,"aria-expanded":this.hasChildren?this.expanded?"true":"false":void 0,onClick:this.handleClick,disabled:this.disabled},this.hasChildren&&t("span",{class:"xpl-side-nav-item__arrow "+(this.expanded?"expanded":"")},t("xpl-icon",{icon:"chevron-down",size:16})),!this.hasChildren&&t("span",{class:"xpl-side-nav-item__icon"},t("slot",{name:"icon"},this.icon?t("xpl-icon",{icon:this.icon,size:16}):null)),t("span",{class:"xpl-side-nav-item__label"},null!==(i=this.label)&&void 0!==i?i:"")),this.hasChildren&&!this.link&&t("div",{key:"ea6e431300ffe641e970c8cc49e7935858986685",class:"xpl-side-nav-item__children "+(this.expanded?"expanded":""),inert:!this.expanded||void 0},t("div",{key:"378a00e24a61911ce69ef6a50e69d47b496b5557",class:"xpl-side-nav-item__children-inner"},t("slot",{key:"b3ece8c8ddbf58693a370824c40fe3811828889a"}))))}get el(){return this}static get watchers(){return{hasChildren:[{syncLinkHasChildrenExclusivity:0}],link:[{syncLinkHasChildrenExclusivity:0}]}}},[260,"xpl-side-nav-item",{disabled:[516],expanded:[1540],hasChildren:[1540,"has-children"],hidden:[516],icon:[1],label:[1],link:[516],selected:[516]},void 0,{hasChildren:[{syncLinkHasChildrenExclusivity:0}],link:[{syncLinkHasChildrenExclusivity:0}]}]),c=a,d=function(){"undefined"!=typeof customElements&&["xpl-side-nav-item","xpl-icon"].forEach((i=>{switch(i){case"xpl-side-nav-item":customElements.get(l(i))||customElements.define(l(i),a);break;case"xpl-icon":customElements.get(l(i))||h()}}))};export{c as XplSideNavItem,d as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as s,createEvent as e,h as t,Host as n,transformTag as l}from"@stencil/core/internal/client";import{d}from"./xpl-icon2.js";const a=i(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.expandedChange=e(this,"expandedChange",7),this.navClick=e(this,"navClick",7),this.disabled=!1,this.expanded=!1,this.hasChildren=!1,this.hidden=!1,this.link=!1,this.selected=!1,this.handleClick=()=>{this.disabled||(this.hasChildren?(this.expanded=!this.expanded,this.expandedChange.emit(this.expanded)):this.navClick.emit())}}syncLinkHasChildrenExclusivity(){this.enforceLinkExcludesHasChildren()}componentWillLoad(){this.syncLinkHasChildrenExclusivity()}componentWillRender(){this.syncLinkHasChildrenExclusivity()}enforceLinkExcludesHasChildren(){this.link&&(this.hasChildren&&(this.hasChildren=!1),this.el.hasAttribute("has-children")&&this.el.removeAttribute("has-children"))}render(){var i;const s={"xpl-side-nav-item__link":!0,expanded:this.expanded,selected:this.selected};return t(n,{key:"a621f4f9c04d79de708a34a4f4eab06e523a299a",class:{"xpl-side-nav-item":!0,"xpl-side-nav-item--link-disabled":this.link&&this.disabled}},this.link?t("slot",null):t("button",{type:"button",class:s,"aria-current":this.selected?"page":void 0,"aria-expanded":this.hasChildren?this.expanded?"true":"false":void 0,onClick:this.handleClick,disabled:this.disabled},this.hasChildren&&t("span",{class:"xpl-side-nav-item__arrow "+(this.expanded?"expanded":"")},t("xpl-icon",{icon:"chevron-down",size:16})),!this.hasChildren&&t("span",{class:"xpl-side-nav-item__icon"},t("slot",{name:"icon"},this.icon?t("xpl-icon",{icon:this.icon,size:16}):null)),t("span",{class:"xpl-side-nav-item__label"},null!==(i=this.label)&&void 0!==i?i:"")),this.hasChildren&&!this.link&&t("div",{key:"3e22894c0bd9427f568b86bba00cdab822921997",class:"xpl-side-nav-item__children "+(this.expanded?"expanded":""),inert:!this.expanded||void 0},t("div",{key:"41486a4241e4402232531d140e972b39d863ffd9",class:"xpl-side-nav-item__children-inner"},t("slot",{key:"d334c6ecac7dd1dd12602a461db444cd1ccefc86"}))))}get el(){return this}static get watchers(){return{hasChildren:[{syncLinkHasChildrenExclusivity:0}],link:[{syncLinkHasChildrenExclusivity:0}]}}},[260,"xpl-side-nav-item",{disabled:[516],expanded:[1540],hasChildren:[1540,"has-children"],hidden:[516],icon:[1],label:[1],link:[516],selected:[516]},void 0,{hasChildren:[{syncLinkHasChildrenExclusivity:0}],link:[{syncLinkHasChildrenExclusivity:0}]}]),h=a,c=function(){"undefined"!=typeof customElements&&["xpl-side-nav-item","xpl-icon"].forEach((i=>{switch(i){case"xpl-side-nav-item":customElements.get(l(i))||customElements.define(l(i),a);break;case"xpl-icon":customElements.get(l(i))||d()}}))};export{h as XplSideNavItem,c as defineCustomElement}

package/dist/components/xpl-side-nav.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as a,h as s,Host as c,transformTag as n}from"@stencil/core/internal/client";const t=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost()}render(){return s(c,{key:"bfa4c94a1718583020da6a8b1e9104788ce78ef1",class:{"xpl-side-nav":!0}},s("div",{key:"1788f206ed3bea01be9cfa74fbc54a54e664945c",class:"xpl-side-nav__wrapper"},s("nav",{key:"ccbcbc45566a77a9134279b486148f3444bdb0ea",class:"xpl-side-nav__content","aria-label":this.label},s("div",{key:"6aef4d3f8e0c037aeedfc45d8471978c635b3293",class:"xpl-side-nav__section"},s("slot",{key:"e4384164f138cae0135472428079b62924afbcdf",name:"section"})),s("div",{key:"9794ea9a4b566713d0adb0787ae2ab1ae171fa6e",class:"xpl-side-nav__footer"},s("slot",{key:"e20ff6d3795784ea11470b7287550c29c0984a65",name:"nav-footer"})))))}},[260,"xpl-side-nav",{label:[1]}]),l=t,d=function(){"undefined"!=typeof customElements&&["xpl-side-nav"].forEach((e=>{"xpl-side-nav"===e&&(customElements.get(n(e))||customElements.define(n(e),t))}))};export{l as XplSideNav,d as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as a,h as c,Host as s,transformTag as d}from"@stencil/core/internal/client";const n=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost()}render(){return c(s,{key:"d01e8e27671eabc92613a803818b4351334011ac",class:{"xpl-side-nav":!0}},c("div",{key:"92c9f31fa0d9d564164cde99d17e30562c30abb7",class:"xpl-side-nav__wrapper"},c("nav",{key:"5ddd8b18d4f74bb752b747ec4e1c48780a0738de",class:"xpl-side-nav__content","aria-label":this.label},c("div",{key:"8b830945bf6ec1da8ab2e2c955c10a1077652590",class:"xpl-side-nav__section"},c("slot",{key:"66e5cd33c23bdc8963d661e0741d34f80a0640fb",name:"section"})),c("div",{key:"f0da4e3c25822453efcbfb3c6f8ea7ec328e717d",class:"xpl-side-nav__footer"},c("slot",{key:"76b829e978361be9fd62bd412489ea4559852c3f",name:"nav-footer"})))))}},[260,"xpl-side-nav",{label:[1]}]),t=n,l=function(){"undefined"!=typeof customElements&&["xpl-side-nav"].forEach((e=>{"xpl-side-nav"===e&&(customElements.get(d(e))||customElements.define(d(e),n))}))};export{t as XplSideNav,l as defineCustomElement}

package/dist/components/xpl-skeleton.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,h as s,Host as l,transformTag as i}from"@stencil/core/internal/client";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.shape="rectangle",this.size="custom"}render(){return s(l,{key:"4c0962c3339b49f2f89d07e4827e826089419c70",class:{"xpl-skeleton":!0,["xpl-skeleton--shape-"+this.shape]:!0,["xpl-skeleton--size-"+this.size]:!0,[this.classNames]:!!this.classNames,"xpl-skeleton--full-width":this.fullWidth},style:{width:this.width||void 0,height:this.height||void 0,margin:this.margin||void 0}})}},[0,"xpl-skeleton",{classNames:[1,"class-names"],fullWidth:[4,"full-width"],height:[1],width:[1],margin:[1],shape:[1],size:[1]}]),o=n,h=function(){"undefined"!=typeof customElements&&["xpl-skeleton"].forEach((e=>{"xpl-skeleton"===e&&(customElements.get(i(e))||customElements.define(i(e),n))}))};export{o as XplSkeleton,h as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,h as s,Host as l,transformTag as i}from"@stencil/core/internal/client";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.shape="rectangle",this.size="custom"}render(){return s(l,{key:"0ac86ae7bf109ea51bca36ac502d506ac7d0b66e",class:{"xpl-skeleton":!0,["xpl-skeleton--shape-"+this.shape]:!0,["xpl-skeleton--size-"+this.size]:!0,[this.classNames]:!!this.classNames,"xpl-skeleton--full-width":this.fullWidth},style:{width:this.width||void 0,height:this.height||void 0,margin:this.margin||void 0}})}},[0,"xpl-skeleton",{classNames:[1,"class-names"],fullWidth:[4,"full-width"],height:[1],width:[1],margin:[1],shape:[1],size:[1]}]),o=n,h=function(){"undefined"!=typeof customElements&&["xpl-skeleton"].forEach((e=>{"xpl-skeleton"===e&&(customElements.get(i(e))||customElements.define(i(e),n))}))};export{o as XplSkeleton,h as defineCustomElement}

package/dist/components/xpl-slideout.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as a,createEvent as c,h as t,Host as s,transformTag as d}from"@stencil/core/internal/client";import{d as o}from"./xpl-backdrop2.js";import{d as i}from"./xpl-button2.js";import{d as l}from"./xpl-divider2.js";import{d as r}from"./xpl-icon2.js";const b=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.isOpenChange=c(this,"isOpenChange",7),this.isOpen=!1,this.backdrop=!1,this.variant="default",this.showFooter=!0,this.handleClose=()=>{this.isOpen=!1}}watchPropHandler(e){this.isOpen=e,this.isOpenChange.emit(e)}handleScroll(){const e=this.el.querySelector(".content");e.scrollHeight>e.clientHeight?e.classList.add("has-shadow"):e.classList.remove("has-shadow")}componentDidLoad(){this.handleScroll()}render(){return t(s,{key:"01e702ef959cc596ae8fb140275d733c93c3b399",class:"xpl-slideout"},this.backdrop&&this.isOpen&&t("xpl-backdrop",{key:"4e82ee44b68eae102a4c4ef65e797ce23659d330",onClick:this.handleClose}),t("aside",{key:"1c718a30611bb6699f231a9e736c0521c248d65a",class:"slideout slideout--"+(!this.isOpen&&"closed")},t("header",{key:"c53419926fbe8ccc6616af39d021248b46f138a3",class:"header"},t("div",{key:"36e02fe5b7ff8d6920759ab793ead2be0f0811ac",class:"title"},t("slot",{key:"7932fd5e77edb89570ebd3fedc0346929582ec7b",name:"title"}),t("xpl-button",{key:"9772e880c9b132ba84ccf45c4793e0af70548866",class:"close-button","icon-only":!0,size:"sm",variant:"tertiary",onClick:this.handleClose},t("xpl-icon",{key:"91922e8aa02c30aa73ae1ea3d2b47daffd954616",icon:"x"}))),t("div",{key:"2f7065ba1da7f0ad805e16b69f4a316d5a1f9285",class:"subtitle"},t("slot",{key:"8edb8bdbdecd01abd2b7899d5c9897c91e625326",name:"subtitle"})),t("div",{key:"5945128002bb2103daac40d1f7457ebb97521002",class:"search"},t("slot",{key:"c4df975581beb16547a439a86f2a532c10fa4fa7",name:"search"}))),t("xpl-divider",{key:"3be4c74de14ca2380179798fe4ec0c9a758739af",tier:0,class:"divider top"}),t("article",{key:"2012ae1197acc41f530af8920b19752a248e2b40",class:"content",tabIndex:0},t("slot",{key:"e8a1cedda6cd48bb62dc42f00c9bdc8510d4f603",name:"content"})),this.showFooter&&t("footer",{key:"cfa5a41846485b879126a90f3a7346d6eb680776"},t("xpl-divider",{key:"bf05c9d85471b55dee25da790afb3cb642f1a86b",tier:0,class:"divider bottom"}),t("div",{key:"d109314ca745947f3337b06df73183ff277c89bb",class:"footer"},t("slot",{key:"cad183e788d3555a5366b19b4e01c3c90f7d9ae0",name:"tertiary"}),t("slot",{key:"c12294440fe8544e51197dfddbc01aaea506575a",name:"secondary"}),t("slot",{key:"7accdf8dc3cc9b6a416cf784ec081d70c1d0f1e9",name:"primary"})))))}get el(){return this}static get watchers(){return{isOpen:[{watchPropHandler:0}]}}},[260,"xpl-slideout",{isOpen:[1540,"is-open"],backdrop:[4],variant:[1],showFooter:[4,"show-footer"]},[[9,"scroll","handleScroll"]],{isOpen:[{watchPropHandler:0}]}]),n=b,f=function(){"undefined"!=typeof customElements&&["xpl-slideout","xpl-backdrop","xpl-button","xpl-divider","xpl-icon"].forEach((e=>{switch(e){case"xpl-slideout":customElements.get(d(e))||customElements.define(d(e),b);break;case"xpl-backdrop":customElements.get(d(e))||o();break;case"xpl-button":customElements.get(d(e))||i();break;case"xpl-divider":customElements.get(d(e))||l();break;case"xpl-icon":customElements.get(d(e))||r()}}))};export{n as XplSlideout,f as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as a,createEvent as t,h as s,Host as c,transformTag as d}from"@stencil/core/internal/client";import{d as o}from"./xpl-backdrop2.js";import{d as i}from"./xpl-button2.js";import{d as l}from"./xpl-divider2.js";import{d as b}from"./xpl-icon2.js";const f=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.isOpenChange=t(this,"isOpenChange",7),this.isOpen=!1,this.backdrop=!1,this.variant="default",this.showFooter=!0,this.handleClose=()=>{this.isOpen=!1}}watchPropHandler(e){this.isOpen=e,this.isOpenChange.emit(e)}handleScroll(){const e=this.el.querySelector(".content");e.scrollHeight>e.clientHeight?e.classList.add("has-shadow"):e.classList.remove("has-shadow")}componentDidLoad(){this.handleScroll()}render(){return s(c,{key:"8a3f7af854b35469bf4a383cc4cb1fcfcaa15748",class:"xpl-slideout"},this.backdrop&&this.isOpen&&s("xpl-backdrop",{key:"7033d78efa9ac2642a99d2b2dca278a3e9a44368",onClick:this.handleClose}),s("aside",{key:"2999e4119a0dbaac5125c7a1ef5f03761f445a0e",class:"slideout slideout--"+(!this.isOpen&&"closed")},s("header",{key:"5e6bcf1284c2b2a4fbc05dd8e5100a33fa7597b4",class:"header"},s("div",{key:"88172efe113b56a533761b975605a44ef52c5174",class:"title"},s("slot",{key:"c8f13168f62f96374250b11814ace756fa680503",name:"title"}),s("xpl-button",{key:"8e0e29a8ad2a5f45b250f9d563886fe7ad2a7cb8",class:"close-button","icon-only":!0,size:"sm",variant:"tertiary",onClick:this.handleClose},s("xpl-icon",{key:"110cbd50e31b51319745d6fed61188c1c885b8b3",icon:"x"}))),s("div",{key:"96e6cddf4b078736201116f220f27ddf34b90b44",class:"subtitle"},s("slot",{key:"eb02b4fce6ff5e658ec51c83819a5257f452d3a1",name:"subtitle"})),s("div",{key:"ac8dfe1f99428cdf728027aa5a04d58d497f34f0",class:"search"},s("slot",{key:"28deb70ef99f4880fba55beb2d2b4b1d3136a240",name:"search"}))),s("xpl-divider",{key:"928d20ef8e74eed4e06351c5dab0c0af9934d2b8",tier:0,class:"divider top"}),s("article",{key:"d6460cb29abb33f6676d2e4f517c1f2befa57148",class:"content",tabIndex:0},s("slot",{key:"b415af9cadedc61407623773fd6b2b1130caf5df",name:"content"})),this.showFooter&&s("footer",{key:"db6a58277112f134dc150266446cc67c79bc6bc5"},s("xpl-divider",{key:"129a61ba1a8a588e94d710b7e7fb1059c4b7f5e6",tier:0,class:"divider bottom"}),s("div",{key:"6c81348acf8ee2bb4c12c2f3207daae564e78aa2",class:"footer"},s("slot",{key:"8c9a6d4c215154bb2e66d62aa462b3b085ef0f5b",name:"tertiary"}),s("slot",{key:"e66e45e2d090f45305f818c6496541b737c96aeb",name:"secondary"}),s("slot",{key:"8892bdf075a38237a5c858bfd951e1203fc3c892",name:"primary"})))))}get el(){return this}static get watchers(){return{isOpen:[{watchPropHandler:0}]}}},[260,"xpl-slideout",{isOpen:[1540,"is-open"],backdrop:[4],variant:[1],showFooter:[4,"show-footer"]},[[9,"scroll","handleScroll"]],{isOpen:[{watchPropHandler:0}]}]),r=f,n=function(){"undefined"!=typeof customElements&&["xpl-slideout","xpl-backdrop","xpl-button","xpl-divider","xpl-icon"].forEach((e=>{switch(e){case"xpl-slideout":customElements.get(d(e))||customElements.define(d(e),f);break;case"xpl-backdrop":customElements.get(d(e))||o();break;case"xpl-button":customElements.get(d(e))||i();break;case"xpl-divider":customElements.get(d(e))||l();break;case"xpl-icon":customElements.get(d(e))||b()}}))};export{r as XplSlideout,n as defineCustomElement}

package/dist/components/xpl-tab-panel.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,h as a,Host as s,transformTag as l}from"@stencil/core/internal/client";import{g as n,a as r,t as c}from"./tab-a11y-ids.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.selected=!1}render(){var e;const t=n(this.el),l=null!==(e=this.target)&&void 0!==e?e:"",o=r(t,l),b=c(t,l);return a(s,{key:"4491f3466d26e462432843c382b0d0b5ab64e68b","aria-labelledby":b,class:{"xpl-tab-panel":!0,"xpl-tab-panel--selected":this.selected},id:o,role:"tabpanel"},a("slot",{key:"75b3da77cddb6e0a83b7cf41aa5e0aa30259b728"}))}get el(){return this}},[260,"xpl-tab-panel",{selected:[4],target:[1]}]),b=o,i=function(){"undefined"!=typeof customElements&&["xpl-tab-panel"].forEach((e=>{"xpl-tab-panel"===e&&(customElements.get(l(e))||customElements.define(l(e),o))}))};export{b as XplTabPanel,i as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,h as a,Host as s,transformTag as l}from"@stencil/core/internal/client";import{g as n,a as c,t as r}from"./tab-a11y-ids.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.selected=!1}render(){var e;const t=n(this.el),l=null!==(e=this.target)&&void 0!==e?e:"",o=c(t,l),d=r(t,l);return a(s,{key:"4c4a86dda347872ea6b1c4569f8424bd6cac7bd9","aria-labelledby":d,class:{"xpl-tab-panel":!0,"xpl-tab-panel--selected":this.selected},id:o,role:"tabpanel"},a("slot",{key:"30c9ae6f3748dc02a73da7535443266b1043d61b"}))}get el(){return this}},[260,"xpl-tab-panel",{selected:[4],target:[1]}]),d=o,i=function(){"undefined"!=typeof customElements&&["xpl-tab-panel"].forEach((e=>{"xpl-tab-panel"===e&&(customElements.get(l(e))||customElements.define(l(e),o))}))};export{d as XplTabPanel,i as defineCustomElement}

package/dist/components/xpl-table-header-cell.js

@@ -1 +1 @@
-import{T as e,d as a}from"./xpl-table-header-cell2.js";const l=e,o=a;export{l as XplTableHeaderCell,o as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as s,createEvent as t,h as c,Host as o,transformTag as n}from"@stencil/core/internal/client";import{d as r}from"./xpl-checkbox2.js";import{d as i}from"./xpl-icon2.js";const l=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.sortChanged=t(this,"sortChanged",7),this.sortable=!1,this.label="",this.type="label",this.sortDirection="none"}toggleSort(){this.sortDirection="asc"===this.sortDirection?"desc":"desc"===this.sortDirection?"none":"asc",this.sortChanged.emit(this.sortDirection)}render(){const e=Array.from(this.el.parentElement.children).indexOf(this.el)+1,s=()=>{switch(this.type){case"label":return c("span",null,this.label);case"checkbox":return c("xpl-checkbox",null);case"icon":return c("xpl-icon",{icon:this.icon,size:20});default:return""}};return c(o,{role:"columnheader","aria-colindex":e,class:"xpl-table-header-cell "+(this.sortable?"sortable":"non-sortable"),style:{width:this.width+"px"}},this.sortable?c("button",{onClick:()=>this.toggleSort()},s(),(()=>{switch(this.sortDirection){case"none":return c("xpl-icon",{class:"sort-icon",icon:"arrow-down",size:16});case"asc":return c("xpl-icon",{class:"sort-icon sort-icon--sorted",icon:"arrow-up",size:16});case"desc":return c("xpl-icon",{class:"sort-icon sort-icon--sorted",icon:"arrow-down",size:16});default:return""}})()):s())}get el(){return this}},[0,"xpl-table-header-cell",{icon:[1],sortable:[4],label:[1],type:[1],width:[2],sortDirection:[32]}]),a=l,h=function(){"undefined"!=typeof customElements&&["xpl-table-header-cell","xpl-checkbox","xpl-icon"].forEach((e=>{switch(e){case"xpl-table-header-cell":customElements.get(n(e))||customElements.define(n(e),l);break;case"xpl-checkbox":customElements.get(n(e))||r();break;case"xpl-icon":customElements.get(n(e))||i()}}))};export{a as XplTableHeaderCell,h as defineCustomElement}

package/dist/components/xpl-table-header.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,h as c,Host as r,transformTag as l}from"@stencil/core/internal/client";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost()}render(){return c(r,{key:"70eac99819cc3acbbfb54607fc657fb27bd26b4b",role:"rowgroup",class:"xpl-table-header"},c("slot",{key:"9c46b25d247603f8c87a3994615bd45c617d9bb9"}))}},[260,"xpl-table-header"]),n=s,o=function(){"undefined"!=typeof customElements&&["xpl-table-header"].forEach((e=>{"xpl-table-header"===e&&(customElements.get(l(e))||customElements.define(l(e),s))}))};export{n as XplTableHeader,o as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,h as l,Host as r,transformTag as s}from"@stencil/core/internal/client";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost()}render(){return l(r,{key:"7b36c9e640bd43ac38ea2625e7600e8699a13c5f",role:"row",class:"xpl-table-header"},l("slot",{key:"d03fe894a829477b6bf25dbd6dfa724b224b8d42"}))}},[260,"xpl-table-header"]),n=a,c=function(){"undefined"!=typeof customElements&&["xpl-table-header"].forEach((e=>{"xpl-table-header"===e&&(customElements.get(s(e))||customElements.define(s(e),a))}))};export{n as XplTableHeader,c as defineCustomElement}

package/dist/components/xpl-table.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as l,h as r,Host as i,transformTag as s}from"@stencil/core/internal/client";import{T as o}from"./lifecycle.js";import{R as n,S as a,c as h,g as c,a as d,d as u}from"./xpl-table-header-cell2.js";import{d as p}from"./xpl-checkbox2.js";import{d as b}from"./xpl-icon2.js";import{d as x}from"./xpl-table-cell2.js";import{d as f}from"./xpl-table-footer-cell2.js";function w(t){const e=t.parentElement;if(!e)return null;const l=Array.from(e.children),r=l.indexOf(t);if(-1===r)return null;for(let t=r+1;t<l.length;t+=1){const e=l[t];if("xpl-table-row"===e.tagName.toLowerCase()&&!e.hasAttribute("hidden"))return e}return null}function v(t){return function(t){const e=t instanceof HTMLElement?t:null;if(!e)return null;const l=e.closest("xpl-table-row");return null!=l?l:null}(t)}function y(t){const l=("function"==typeof t.composedPath?t.composedPath():[]).find((t=>t instanceof e&&"xpl-table-row"===t.tagName.toLowerCase()));return null!=l?l:v(t.target)}const g=t(class t extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.rowOrderChange=l(this,"rowOrderChange",3),this.rowSelectionChange=l(this,"rowSelectionChange",3),this.sortChanged=l(this,"sortChanged",3),this.tableSelect=l(this,"tableSelect",7),this.columnWidthsToken="",this.lastEmittedRowSelectionKey="",this.selectAllValue=Math.random().toString(36).slice(2),this.draggedRow=null,this.pendingDragRow=null,this.pointerUpClearPending=null,this.reorderKeyboardTimers=new o,this.onReorderHandleKeydown=t=>{this.handleReorderHandleKeyDown(t)},this.areAllSelected=!1,this.colCount=0,this.hasScrolled=!1,this.keyboardReorderRowId=null,this.reorderLiveMessage="",this.rowData=[],this.rowFooterData=[],this.selected=[],this.selectedRowIds=[],this.sortTypeArray=[],this.isSortable=!1,this.selectedValues=[],this.sortableColumns=[],this.onGridScroll=t=>{this.hasScrolled=t.target.scrollLeft>0},this.selectAll=t=>{const{target:e}=t;if(!(e instanceof HTMLInputElement))return;const{checked:l}=e;this.areAllSelected=l,this.selected=this.selectedValues.length>0?Array.from(this.el.querySelectorAll("tbody td:first-child input")).map((t=>l?null==t?void 0:t.value:l)):this.selected.map((()=>l)),this.onSelectionChange()},this.selectOne=(t,e)=>{const{target:l}=t;if(!(l instanceof HTMLInputElement))return;const{checked:r,value:i}=l;this.areAllSelected=!1,this.selected=this.selected.map(((t,l)=>l!==e?t:this.selectedValues.length>0&&r?i:r)),this.onSelectionChange()},this.onSelectionChange=()=>{this.tableSelect.emit({selected:this.selected,areAllSelected:this.areAllSelected})},this.onLegacyScroll=()=>{this.hasScrolled=this.container.scrollLeft>0},this.sortBy=(t,e)=>{const l=(e,l)=>e[t].toLocaleLowerCase()<l[t].toLocaleLowerCase()?-1:e[t].toLocaleLowerCase()>l[t].toLocaleLowerCase()?1:0;switch(e[t]){case"asc":this.rowData.sort(((t,e)=>l(t,e)));break;case"desc":this.rowData.sort(((t,e)=>l(e,t)));break;default:this.rowData=this.data,this.sortTypeArray[t]=null}this.rowData=Array.from(this.rowData)},this.setData=()=>{this.rowData=void 0!==this.data?Array.from(this.data):[]},this.setFooterData=()=>{this.rowFooterData=void 0!==this.footer?Array.from(this.footer):[]}}watchColumns(){this.sortTypeArray=this.columns?this.columns.map((()=>null)):[]}watchData(){this.setData()}watchFooterData(){this.setFooterData()}watchReorderHandleIcon(){!this.isLegacyMode&&this.rowReorderable&&this.syncInjectedReorderHandleIcons()}watchReorderHandleIconKeyboard(){!this.isLegacyMode&&this.rowReorderable&&this.syncInjectedReorderHandleIcons()}watchRowReorderable(t){this.isLegacyMode||t||(this.keyboardReorderRowId=null,this.syncReorderHandleKeyboardA11y(null),this.removeManagedReorderCells(),this.draggedRow=null,this.pendingDragRow=null,this.clearPendingDragListeners(),this.reorderLiveMessage="",this.queryBodyRows().forEach((t=>{var e;t.removeAttribute("draggable"),null===(e=t.querySelector(".xpl-table__row-drag-handle"))||void 0===e||e.removeAttribute("draggable"),t.classList.remove("xpl-table-row--dragging","xpl-table-row--drag-over")})),this.colCount=0,this.columnWidthsToken="")}watchSelectable(t){this.isLegacyMode||t||(this.selectedRowIds=[],this.lastEmittedRowSelectionKey="",this.colCount=0,this.columnWidthsToken="",this.syncRowSelectedProps())}componentWillLoad(){this.isLegacyMode&&(this.areAllSelected=!1,this.setData(),this.setFooterData(),this.selected=Array(this.rowData.length).fill(!1),this.sortTypeArray=this.columns?this.columns.map((()=>null)):[])}componentDidLoad(){this.isLegacyMode||this.syncCompositionalLayout()}componentDidUpdate(){this.isLegacyMode||this.syncCompositionalLayout()}disconnectedCallback(){this.clearPendingDragListeners(),this.detachReorderHandleKeydownListeners(),this.reorderKeyboardTimers.dispose(),void 0!==this.reorderAnnounceRaf&&(cancelAnimationFrame(this.reorderAnnounceRaf),this.reorderAnnounceRaf=void 0)}handleHeaderCellColumnWidthsChange(t){if(this.isLegacyMode)return;const e=t.target;e instanceof Node&&this.el.contains(e)&&this.updateColumnWidths()}handleCompositionalCheckboxChange(l){var r,i;if(this.isLegacyMode||!this.selectable)return;if(!this.isEventFromThisTable(l.target))return;const s=null!==(i=null===(r=l.composedPath)||void 0===r?void 0:r.call(l))&&void 0!==i?i:[];let o=(s.length>0?s:[l.target].filter((t=>null!=t))).find((t=>t instanceof e&&"xpl-checkbox"===t.tagName.toLowerCase()));if(!o&&l.target&&"function"==typeof l.target.closest&&(o=l.target.closest("xpl-checkbox")),!o||!this.el.contains(o))return;const n=o.closest("xpl-table-row");if(!n||!this.isDirectChildBodyRow(n))return;const a=o.closest("xpl-table-cell");if(!a)return;const h=this.getSelectionColumnIndex();if(null===h)return;if(t.getBodyRowCells(n).indexOf(a)!==h)return;l.stopPropagation();const c=t.getRowIdForRow(n);if(!c||n.disabled)return;const d=o.querySelector('input[type="checkbox"]');if(!d)return;const{checked:u}=d;u?this.selectedRowIds.includes(c)||(this.selectedRowIds=[...this.selectedRowIds,c]):this.selectedRowIds=this.selectedRowIds.filter((t=>t!==c)),this.applyHeaderCheckboxState(),this.syncRowSelectedProps(),this.emitCompositionalSelection()}handleCompositionalHeaderCheckboxChange(l){var r,i;if(this.isLegacyMode||!this.selectable)return;if(!this.isEventFromThisTable(l.target))return;const s=null!==(i=null===(r=l.composedPath)||void 0===r?void 0:r.call(l))&&void 0!==i?i:[];let o=(s.length>0?s:[l.target].filter((t=>null!=t))).find((t=>t instanceof e&&"xpl-table-header-cell"===t.tagName.toLowerCase()&&"checkbox"===t.getAttribute("type")));if(!o&&l.target&&"function"==typeof l.target.closest&&(o=l.target.closest('xpl-table-header-cell[type="checkbox"]')),!o||!this.el.contains(o))return;if(!this.isCellInOurCompositionalHeader(o))return;if(!this.getCompositionalHeaderCells().includes(o))return;const n=!!l.detail,a=this.querySelectableBodyRows().map((e=>t.getRowIdForRow(e))).filter((t=>!!t));this.selectedRowIds=n?[...a]:[],this.applyBodyCheckboxStates(),this.syncRowSelectedProps(),this.emitCompositionalSelection()}handlePointerDownExitKeyboardReorder(t){if(this.isLegacyMode||!this.rowReorderable||null===this.keyboardReorderRowId)return;const e=t.target;if(!(e instanceof Node&&this.el.contains(e)))return;const l=e instanceof Element?e.closest("xpl-table-row"):null;l&&this.isDirectChildBodyRow(l)&&(this.keyboardReorderRowId=null,this.syncReorderHandleKeyboardA11y(null))}handleReorderHandleKeyDown(l){var r;if(this.isLegacyMode||!this.rowReorderable)return;const i="function"==typeof l.composedPath?l.composedPath():[];let s=(i.length>0?i:l.target?[l.target]:[]).find((t=>t instanceof e&&t.classList.contains("xpl-table__row-drag-handle")));if(!s&&l.target instanceof e&&l.target.classList.contains("xpl-table__row-drag-handle")&&(s=l.target),!s||!this.el.contains(s))return;const o=s.closest("xpl-table-row");if(!o||!this.isDirectChildBodyRow(o))return;const n=null!==(r=t.getRowIdForRow(o))&&void 0!==r?r:"";if(!n)return;const a=this.keyboardReorderRowId===n,h="Escape"===l.key||"Esc"===l.key||"Escape"===l.code||27===l.keyCode;o.disabled?h&&a&&(l.preventDefault(),this.keyboardReorderRowId=null,this.syncReorderHandleKeyboardA11y(null)):h?a&&(l.preventDefault(),this.keyboardReorderRowId=null,this.syncReorderHandleKeyboardA11y(null)):a?"ArrowUp"!==l.key&&"ArrowDown"!==l.key||(l.preventDefault(),this.performKeyboardRowReorder(n,"ArrowUp"===l.key?"up":"down")):"Enter"!==l.key&&" "!==l.key||(l.preventDefault(),this.keyboardReorderRowId=n,this.syncReorderHandleKeyboardA11y(n))}handleRowReorderPointerDown(t){if(this.isLegacyMode||!this.rowReorderable)return;const l=function(t){const l=("function"==typeof t.composedPath?t.composedPath():[]).find((t=>t instanceof e&&t.classList.contains("xpl-table__row-drag-handle")));return null!=l?l:null}(t);if(!l)return;if(l.closest("xpl-table")!==this.el)return;const r=v(l);if(!r||r.disabled)return;const i=this.getDirectChildTableSection("xpl-table-body");if(!i||r.parentElement!==i)return;this.clearPendingDragListeners(),this.pendingDragRow=r;const s=()=>{this.clearPendingDragListeners(),this.pendingDragRow=null};document.addEventListener("pointerup",s,!0),document.addEventListener("pointercancel",s,!0),this.pointerUpClearPending=()=>{document.removeEventListener("pointerup",s,!0),document.removeEventListener("pointercancel",s,!0)}}handleRowReorderDragStart(e){var l;if(this.isLegacyMode||!this.rowReorderable)return;const r=y(e);if(!r)return;if(r.closest("xpl-table")!==this.el)return;const i=this.getDirectChildTableSection("xpl-table-body");i&&r.parentElement===i&&(r.disabled||this.pendingDragRow!==r?e.preventDefault():(this.keyboardReorderRowId=null,this.syncReorderHandleKeyboardA11y(null),this.clearPendingDragListeners(),this.pendingDragRow=null,this.draggedRow=r,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",null!==(l=t.getRowIdForRow(r))&&void 0!==l?l:"")),r.classList.add("xpl-table-row--dragging")))}handleRowReorderDragEnd(t){if(this.isLegacyMode||!this.rowReorderable)return;const e=y(t);e&&e.closest("xpl-table")===this.el&&(e.classList.remove("xpl-table-row--dragging"),this.clearReorderDragOverClasses(),this.draggedRow=null)}handleRowReorderDragOver(t){if(this.isLegacyMode||!this.rowReorderable)return;const e=y(t);if(!e||e.closest("xpl-table")!==this.el)return;const l=this.getDirectChildTableSection("xpl-table-body");l&&e.parentElement===l&&!e.disabled&&(t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"))}handleRowReorderDragEnter(t){if(this.isLegacyMode||!this.rowReorderable)return;const e=y(t);if(!e||e.closest("xpl-table")!==this.el)return;const l=this.getDirectChildTableSection("xpl-table-body");l&&e.parentElement===l&&!e.disabled&&(t.preventDefault(),e.classList.add("xpl-table-row--drag-over"))}handleRowReorderDragLeave(t){if(this.isLegacyMode||!this.rowReorderable)return;const e=y(t);if(!e||e.closest("xpl-table")!==this.el)return;const l=t.relatedTarget;l&&e.contains(l)||e.classList.remove("xpl-table-row--drag-over")}handleRowReorderDrop(e){var l;if(this.isLegacyMode||!this.rowReorderable)return;e.preventDefault();const r=y(e);if(!r||r.closest("xpl-table")!==this.el)return;const i=this.getDirectChildTableSection("xpl-table-body");if(!i||r.parentElement!==i||r.disabled)return;const s=this.draggedRow;if(!s||s.disabled)return this.draggedRow=null,void this.clearReorderDragOverClasses();if(s===r)return void this.clearReorderDragOverClasses();const o=this.getVisibleBodyRowsForReorder(),n=o.indexOf(s),a=o.indexOf(r);if(-1===n||-1===a)return void this.clearReorderDragOverClasses();const h=n>a?"up":"down",c=null!==(l=t.getRowIdForRow(s))&&void 0!==l?l:"";!function(t,e,l){if(e===l||e.parentElement!==t)return;if(l.parentElement!==t)return;const r=Array.from(t.children).filter((t=>"xpl-table-row"===t.tagName.toLowerCase()&&!t.hasAttribute("hidden"))),i=r.indexOf(e),s=r.indexOf(l);if(-1!==i&&-1!==s&&i!==s)if(i<s){const r=w(l);t.insertBefore(e,r||null)}else t.insertBefore(e,l)}(i,s,r);const d=this.getVisibleBodyRowsForReorder().map((e=>{var l;return null!==(l=t.getRowIdForRow(e))&&void 0!==l?l:""}));this.rowOrderChange.emit({rowId:c,direction:h,orderedRowIds:d,fromIndex:n,toIndex:a}),this.announceRowReorder(c,d),this.clearReorderDragOverClasses(),this.selectable&&(this.applyBodyCheckboxStates(),this.applyHeaderCheckboxState(),this.syncRowSelectedProps()),this.updateColumnWidths()}get isLegacyMode(){return void 0!==this.columns||void 0!==this.data||void 0!==this.footer}ensureTableInstanceId(){this.tableInstanceId||(this.tableInstanceId="undefined"!=typeof crypto&&crypto.randomUUID?crypto.randomUUID():Math.random().toString(36).slice(2))}generateRowId(){return this.ensureTableInstanceId(),"undefined"!=typeof crypto&&crypto.randomUUID?`${this.tableInstanceId}-${crypto.randomUUID()}`:`${this.tableInstanceId}-${Math.random().toString(36).slice(2)}`}syncCompositionalLayout(){this.isLegacyMode||(this.rowReorderable?this.syncReorderColumn():this.removeManagedReorderCells(),this.selectable&&(this.ensureTableInstanceId(),this.pruneStaleSelectedRowIds(),this.ensureBodyRowIds(),this.applyBodyCheckboxStates(),this.applyHeaderCheckboxState(),this.syncRowSelectedProps()),this.rowReorderable&&this.selectable&&this.normalizeManagedColumnsOrder(),this.updateColumnWidths())}getDirectChildTableSection(t){var e;return null!==(e=Array.from(this.el.children).find((e=>e.tagName.toLowerCase()===t)))&&void 0!==e?e:null}isDirectChildBodyRow(t){const e=this.getDirectChildTableSection("xpl-table-body");return null!==e&&t.parentElement===e}isCellInOurCompositionalHeader(t){const e=t.closest("xpl-table-header");return null!==e&&e.parentElement===this.el}getSelectionColumnIndex(){const t=this.getCompositionalHeaderCells().findIndex((t=>"checkbox"===t.getAttribute("type")));return t>=0?t:null}static getBodyRowCells(t){return Array.from(t.children).filter((t=>"xpl-table-cell"===t.tagName.toLowerCase()))}queryBodyRows(){const t=this.getDirectChildTableSection("xpl-table-body");return t?Array.from(t.children).filter((t=>"xpl-table-row"===t.tagName.toLowerCase())):[]}querySelectableBodyRows(){return this.queryBodyRows().filter((t=>!t.disabled))}static getRowIdForRow(t){var e;return(null===(e=t.getAttribute("row-id"))||void 0===e?void 0:e.trim())||null}ensureBodyRowIds(){this.queryBodyRows().forEach((e=>{t.getRowIdForRow(e)||e.setAttribute("row-id",this.generateRowId())}))}removeManagedReorderCells(){this.el.querySelectorAll(`[${n}]`).forEach((t=>{var e;t instanceof Element&&t.closest("xpl-table")===this.el&&(null===(e=t.parentElement)||void 0===e||e.removeChild(t))}))}getSelectionSlotCellForReorderOrder(t){const e=this.getSelectionColumnIndex();if(null===e)return null;const l=Array.from(t.children)[e];if(!l)return null;const r=l.tagName.toLowerCase();return"xpl-table-header-cell"===r?"checkbox"===l.getAttribute("type")?l:null:"xpl-table-cell"===r?l.hasAttribute(a)||l.querySelector("xpl-checkbox")?l:null:"xpl-table-footer-cell"===r?l:null}normalizeManagedColumnsOrder(){var t;const e=t=>{const e=t.querySelector(`:scope > [${n}]`),l=this.getSelectionSlotCellForReorderOrder(t);if(!e||!l)return;const r=Array.from(t.children);r.indexOf(e)>r.indexOf(l)&&t.insertBefore(e,l)},l=null!==(t=Array.from(this.el.children).find((t=>"xpl-table-header"===t.tagName.toLowerCase())))&&void 0!==t?t:null;if(l){const t=Array.from(l.children).find((t=>"xpl-table-row"===t.tagName.toLowerCase()));e(null!=t?t:l)}this.queryBodyRows().forEach((t=>e(t)));const r=this.getDirectChildTableSection("xpl-table-footer");r&&Array.from(r.children).filter((t=>"xpl-table-row"===t.tagName.toLowerCase())).forEach((t=>e(t)))}syncReorderColumn(){this.rowReorderable&&!this.isLegacyMode&&(this.ensureBodyRowIds(),this.ensureHeaderReorderCell(),this.ensureBodyReorderCells(),this.ensureFooterReorderCells(),this.applyReorderRowDraggableState())}ensureHeaderReorderCell(){var t;const e=null!==(t=Array.from(this.el.children).find((t=>"xpl-table-header"===t.tagName.toLowerCase())))&&void 0!==t?t:null;if(!e)return;const l=Array.from(e.children).find((t=>"xpl-table-row"===t.tagName.toLowerCase())),r=null!=l?l:e;if(Array.from(r.children).some((t=>"xpl-table-header-cell"===t.tagName.toLowerCase()&&t.hasAttribute(n))))return;const i=document.createElement("xpl-table-header-cell");i.setAttribute(n,""),i.setAttribute("type","empty"),i.setAttribute("width","48"),i.setAttribute("align","center"),r.insertBefore(i,r.firstChild)}ensureBodyReorderCells(){this.queryBodyRows().forEach((e=>{var l;const r=Array.from(e.children).filter((t=>"xpl-table-cell"===t.tagName.toLowerCase()&&t.hasAttribute(n)));if(r.length>1)for(let t=1;t<r.length;t+=1)r[t].remove();let i=r[0];if(i)i.setAttribute("align","center");else{const r=document.createElement("xpl-table-cell");r.setAttribute(n,""),r.setAttribute("width","48"),r.setAttribute("align","center");const s=document.createElement("button");s.type="button",s.className="xpl-table__row-drag-handle",s.setAttribute("aria-label","Reorder row"),s.setAttribute("aria-pressed","false");const o=this.getResolvedIconForRow(null!==(l=t.getRowIdForRow(e))&&void 0!==l?l:"");if(o){const t=document.createElement("xpl-icon");t.setAttribute("icon",o),t.setAttribute("size","16"),s.appendChild(t)}r.appendChild(s),e.insertBefore(r,e.firstChild),i=r}const s=i.querySelector(".xpl-table__row-drag-handle");s&&(s.disabled=e.disabled)})),this.syncInjectedReorderHandleIcons(),this.attachReorderHandleKeydownListeners()}getResolvedIconForRow(t){var e,l;return null!==this.keyboardReorderRowId&&""!==t&&t===this.keyboardReorderRowId?""===this.reorderHandleIconKeyboard?null:null!==(e=this.reorderHandleIconKeyboard)&&void 0!==e?e:"caret-expand-y":""===this.reorderHandleIcon?null:null!==(l=this.reorderHandleIcon)&&void 0!==l?l:"grip-dots-vertical"}syncInjectedReorderHandleIcons(){this.queryBodyRows().forEach((e=>{var l;const r=e.querySelector(".xpl-table__row-drag-handle");if(!r)return;const i=null!==(l=t.getRowIdForRow(e))&&void 0!==l?l:"",s=this.getResolvedIconForRow(i);if(r.querySelectorAll("xpl-icon").forEach((t=>t.remove())),s){const t=document.createElement("xpl-icon");t.setAttribute("icon",s),t.setAttribute("size","16"),r.appendChild(t)}}))}syncReorderHandleKeyboardA11y(e){!this.isLegacyMode&&this.rowReorderable&&(this.queryBodyRows().forEach((l=>{var r;const i=l.querySelector(".xpl-table__row-drag-handle");if(!i)return;const s=null!==(r=t.getRowIdForRow(l))&&void 0!==r?r:"",o=null!==e&&s===e;i.classList.toggle("xpl-table__row-drag-handle--keyboard-mode",o),i.setAttribute("aria-pressed",o?"true":"false"),i.setAttribute("aria-label",o?"Press arrow up or down to reorder, Escape to exit":"Press Enter or Space to activate keyboard reorder mode, or drag to reorder")})),this.syncInjectedReorderHandleIcons())}attachReorderHandleKeydownListeners(){!this.isLegacyMode&&this.rowReorderable&&this.queryBodyRows().forEach((t=>{const e=t.querySelector(".xpl-table__row-drag-handle");e&&"true"!==e.dataset.xplReorderKbdBound&&(e.dataset.xplReorderKbdBound="true",e.addEventListener("keydown",this.onReorderHandleKeydown))}))}detachReorderHandleKeydownListeners(){this.el&&this.el.querySelectorAll('.xpl-table__row-drag-handle[data-xpl-reorder-kbd-bound="true"]').forEach((t=>{t.removeEventListener("keydown",this.onReorderHandleKeydown),delete t.dataset.xplReorderKbdBound}))}performKeyboardRowReorder(e,l){const r=this.getDirectChildTableSection("xpl-table-body");if(!r)return!1;const i=this.getVisibleBodyRowsForReorder(),s=i.findIndex((l=>t.getRowIdForRow(l)===e));if(-1===s)return!1;const o="up"===l?s-1:s+1;if(o<0||o>=i.length)return!1;const n=s,a=i[s],h=i[o];if("up"===l)r.insertBefore(a,h);else{const t=w(h);t?r.insertBefore(a,t):r.appendChild(a)}const c=this.getVisibleBodyRowsForReorder().map((e=>{var l;return null!==(l=t.getRowIdForRow(e))&&void 0!==l?l:""})),d=c.indexOf(e);return this.rowOrderChange.emit({rowId:e,direction:l,orderedRowIds:c,fromIndex:n,toIndex:d}),this.announceRowReorder(e,c),this.clearReorderDragOverClasses(),this.selectable&&(this.applyBodyCheckboxStates(),this.applyHeaderCheckboxState(),this.syncRowSelectedProps()),this.updateColumnWidths(),this.reorderKeyboardTimers.requestAnimationFrame((()=>{if(!this.el.isConnected)return;const l=this.getVisibleBodyRowsForReorder().find((l=>t.getRowIdForRow(l)===e)),r=null==l?void 0:l.querySelector(".xpl-table__row-drag-handle");null==r||r.focus()})),!0}ensureFooterReorderCells(){const t=this.getDirectChildTableSection("xpl-table-footer");t&&Array.from(t.children).filter((t=>"xpl-table-row"===t.tagName.toLowerCase())).forEach((t=>{if(Array.from(t.children).some((t=>"xpl-table-footer-cell"===t.tagName.toLowerCase()&&t.hasAttribute(n))))return;const e=document.createElement("xpl-table-footer-cell");e.setAttribute(n,""),e.setAttribute("width","48"),e.setAttribute("align","center"),t.insertBefore(e,t.firstChild)}))}static supportsSubgridBodyRow(){return"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("grid-template-columns","subgrid")}applyReorderRowDraggableState(){const e=t.supportsSubgridBodyRow();this.queryBodyRows().forEach((t=>{const l=t.querySelector(".xpl-table__row-drag-handle");null==l||l.removeAttribute("draggable"),t.removeAttribute("draggable"),this.rowReorderable&&!t.disabled&&l&&(e?t.setAttribute("draggable","true"):l.setAttribute("draggable","true"))}))}getVisibleBodyRowsForReorder(){return this.queryBodyRows().filter((t=>!t.hasAttribute("hidden")))}clearReorderDragOverClasses(){this.queryBodyRows().forEach((t=>t.classList.remove("xpl-table-row--drag-over")))}clearPendingDragListeners(){this.pointerUpClearPending&&(this.pointerUpClearPending(),this.pointerUpClearPending=null)}announceRowReorder(t,e){if(!this.rowReorderable||!t)return;const l=e.indexOf(t);l<0||(this.reorderLiveMessage="",void 0!==this.reorderAnnounceRaf&&cancelAnimationFrame(this.reorderAnnounceRaf),this.reorderAnnounceRaf=requestAnimationFrame((()=>{this.reorderAnnounceRaf=void 0,this.el.isConnected&&(this.reorderLiveMessage=`Row ${t}, now position ${l+1} of ${e.length}`)})))}pruneStaleSelectedRowIds(){const e=new Set(this.queryBodyRows().map((e=>t.getRowIdForRow(e))).filter((t=>!!t))),l=this.selectedRowIds.filter((t=>e.has(t)));l.length!==this.selectedRowIds.length&&(this.selectedRowIds=l,this.applyBodyCheckboxStates(),this.applyHeaderCheckboxState(),this.syncRowSelectedProps(),this.emitCompositionalSelection())}static getBodyRowCheckboxAriaLabel(e,l){var r,i;const s=t.getBodyRowCells(e),o=s.find(((t,e)=>(null===l||e!==l)&&!t.hasAttribute(n))),a=null!=o?o:s[0];if(!a)return"Select row";const h=null!==(i=null===(r=a.textContent)||void 0===r?void 0:r.replace(/\s+/g," ").trim())&&void 0!==i?i:"";return h?"Select row, "+(h.length>100?h.slice(0,100)+"…":h):"Select row"}applyBodyCheckboxStates(){const e=this.getSelectionColumnIndex();null!==e&&this.queryBodyRows().forEach((l=>{const r=t.getRowIdForRow(l),i=t.getBodyRowCells(l)[e],s=null==i?void 0:i.querySelector("xpl-checkbox");s&&r&&(s.checked=this.selectedRowIds.includes(r),s.disabled=l.disabled,s.value=r,s.setAttribute("aria-label",t.getBodyRowCheckboxAriaLabel(l,e)))}))}getHeaderCheckboxCell(){const t=this.getSelectionColumnIndex();if(null===t)return null;const e=this.getCompositionalHeaderCells()[t];return e&&"checkbox"===e.getAttribute("type")?e:null}applyHeaderCheckboxState(){const e=this.getHeaderCheckboxCell();if(!e)return;const l=this.querySelectableBodyRows().map((e=>t.getRowIdForRow(e))).filter((t=>!!t)),r=l.filter((t=>this.selectedRowIds.includes(t))).length,i=l.length>0&&r===l.length,s=r>0&&!i;e.checked=i,e.indeterminate=s}syncRowSelectedProps(){this.queryBodyRows().forEach((e=>{const l=t.getRowIdForRow(e),r=!!l&&this.selectedRowIds.includes(l);e.selected=r}))}emitCompositionalSelection(){const t=this.selectedRowIds,e=t.join("
");e!==this.lastEmittedRowSelectionKey&&(this.lastEmittedRowSelectionKey=e,this.rowSelectionChange.emit({selectedRowIds:[...t]}))}isEventFromThisTable(t){if(null==t||"object"!=typeof t)return!1;const e="closest"in t&&"function"==typeof t.closest?t:"parentElement"in t?t.parentElement:null;return!!e&&e.closest("xpl-table")===this.el}static sortKeyFromHeaderCell(t,e){var l,r;const i=(null!==(r=null!==(l=t.sortKey)&&void 0!==l?l:t.label)&&void 0!==r?r:"").trim();return i.length>0?i.replace(/ /g,"-").toLowerCase():"column-"+e}handleCompositionalHeaderSort(e){var l;if(this.isLegacyMode)return;if(!this.isEventFromThisTable(e.target))return;const r=e.target,i=null!==(l=r.closest("xpl-table-header xpl-table-row"))&&void 0!==l?l:r.closest("xpl-table-row");if(!i||!this.el.contains(i))return;const s=Array.from(i.querySelectorAll("xpl-table-header-cell")),{columnIndex:o}=e.detail,n=s[o];if(!(null==n?void 0:n.sortable))return;const a=h(n.sortDirection);s.forEach(((t,e)=>{t.sortable&&(t.sortDirection=e===o?a:null)}));const c={};s.forEach(((e,l)=>{var r;const i=e;i.sortable&&(c[t.sortKeyFromHeaderCell(i,l)]=null!==(r=i.sortDirection)&&void 0!==r?r:null)}));const d=s.map((t=>{var e;return t.sortable&&null!==(e=t.sortDirection)&&void 0!==e?e:null})),u=t.sortKeyFromHeaderCell(s[o],o),p=Object.assign(Object.assign({},c),{colNum:o,colName:u,sortTypeArr:d});this.sortChanged.emit(p)}legacySortStatePayload(){var t;const e={};return(null===(t=this.columns)||void 0===t?void 0:t.length)?(this.columns.forEach(((t,l)=>{var r;const i=t.replace(/ /g,"-").toLowerCase();e[i]=null!==(r=this.sortTypeArray[l])&&void 0!==r?r:null})),e):e}legacySortChangedDetail(t){var e,l;const r=this.legacySortStatePayload(),i=(null!==(l=null===(e=this.columns)||void 0===e?void 0:e[t])&&void 0!==l?l:"").replace(/ /g,"-").toLowerCase();return Object.assign(Object.assign({},r),{colNum:t,colName:i,sortTypeArr:[...this.sortTypeArray]})}getCompositionalHeaderCells(){var t;const e=null!==(t=Array.from(this.el.children).find((t=>"xpl-table-header"===t.tagName.toLowerCase())))&&void 0!==t?t:null;if(!e)return[];const l=Array.from(e.children).find((t=>"xpl-table-row"===t.tagName.toLowerCase()));return Array.from((null!=l?l:e).children).filter((t=>"xpl-table-header-cell"===t.tagName.toLowerCase()))}updateColumnWidths(){const t=this.getCompositionalHeaderCells(),e=t.map((t=>c(t))).join(" "),l=t.length;l===this.colCount&&this.colCount>0&&this.columnWidthsToken===e||(this.el.style.setProperty("--column-widths",e),this.colCount=l,this.columnWidthsToken=e)}handleSort(t,e,l){t.preventDefault(),t.stopPropagation(),e&&(this.sortTypeArray=this.sortTypeArray.map(((t,e)=>{if(e!==l)return null;switch(t){case"asc":return"desc";case"desc":return null;default:return"asc"}})),this.sortChanged.emit(this.legacySortChangedDetail(l)).defaultPrevented||this.sortBy(l,this.sortTypeArray))}renderLegacy(){var t;return!this.columns||this.sortTypeArray&&this.sortTypeArray.length===this.columns.length||(this.sortTypeArray=this.columns.map((()=>null))),r(i,null,r("div",{class:"xpl-table-container",onScroll:this.onLegacyScroll,ref:t=>{this.container=t}},r("table",{class:{"xpl-table":!0,"xpl-table--legacy":!0,"xpl-table--striped":this.striped,"xpl-table--freeze":this.freeze,"xpl-table--has-scrolled":this.hasScrolled}},this.columns&&r("thead",null,this.columns.map(((t,e)=>{var l,i;const s=d(null!==(i=null===(l=this.sortTypeArray)||void 0===l?void 0:l[e])&&void 0!==i?i:null),o=!(!this.isSortable||!this.sortableColumns[e]);return r("th",null,r("label",{onClick:t=>this.handleSort(t,o,e),class:o?"cursor-pointer":""},this.multiselect&&0===e&&r("input",{checked:this.areAllSelected,id:"__xpl-table-th",indeterminate:!this.areAllSelected&&this.selected.some((t=>t)),onClick:t=>{t.stopPropagation(),this.selectAll(t)},type:"checkbox",value:"select-all-"+this.selectAllValue}),t,o&&!!this.sortTypeArray[e]&&r("xpl-icon",{icon:s,size:16})))}))),r("tbody",null,this.rowData.map(((t,e)=>r("tr",{class:this.selected&&this.selected[e]?"xpl-table-row-selected":""},t.map(((t,l)=>r("td",null,this.multiselect&&0===l?r("label",{htmlFor:"__xpl-table-row-"+e},r("input",{id:"__xpl-table-row-"+e,checked:!!this.selected[e],type:"checkbox",onChange:t=>this.selectOne(t,e),value:this.selectedValues.length>0?this.selectedValues[e]:"xpl-table-checkbox-"+e}),r("div",{innerHTML:t})):r("div",{innerHTML:t})))))))),(null===(t=this.rowFooterData)||void 0===t?void 0:t.length)>0&&r("tfoot",null,this.rowFooterData.map((t=>r("tr",null,t.map((t=>r("td",null,r("div",{innerHTML:t})))))))))))}renderCompositional(){const t=this.selectedRowIds.length;return r(i,{role:"grid","aria-label":this.label,"aria-colcount":this.colCount>0?this.colCount:void 0,class:{"xpl-table":!0,"xpl-table--striped":this.striped,"xpl-table--freeze":this.freeze,"xpl-table--has-scrolled":this.hasScrolled,"xpl-table--selectable":!!this.selectable,"xpl-table--selection-active":!!this.selectable&&this.selectedRowIds.length>0,"xpl-table--row-reorderable":!!this.rowReorderable},onScroll:this.onGridScroll},this.rowReorderable&&r("div",{class:"xpl-table__reorder-live","aria-live":"assertive","aria-atomic":"true"},this.reorderLiveMessage),this.selectable&&r("div",{class:{"xpl-toolbar":!0,hidden:0===t,"xpl-table__toolbar":!0}},r("div",{class:"toolbar"},r("p",{class:"selected-item-count"},t," Selected"),r("div",{class:"actions"},r("slot",{name:"toolbar-actions-left"}),r("slot",{name:"toolbar-actions-right"})))),r("slot",null))}render(){return this.isLegacyMode?this.renderLegacy():this.renderCompositional()}get el(){return this}static get watchers(){return{columns:[{watchColumns:0}],data:[{watchData:0}],footer:[{watchFooterData:0}],reorderHandleIcon:[{watchReorderHandleIcon:0}],reorderHandleIconKeyboard:[{watchReorderHandleIconKeyboard:0}],rowReorderable:[{watchRowReorderable:0}],selectable:[{watchSelectable:0}]}}},[260,"xpl-table",{columns:[16],data:[16],footer:[16],freeze:[4],isSortable:[4,"is-sortable"],label:[1],multiselect:[4],reorderHandleIcon:[1,"reorder-handle-icon"],reorderHandleIconKeyboard:[1,"reorder-handle-icon-keyboard"],rowReorderable:[4,"row-reorderable"],selectable:[4],selectedValues:[16],sortableColumns:[16],striped:[4],areAllSelected:[32],colCount:[32],hasScrolled:[32],keyboardReorderRowId:[32],reorderLiveMessage:[32],rowData:[32],rowFooterData:[32],selected:[32],selectedRowIds:[32],sortTypeArray:[32]},[[0,"xplTableColumnWidthsChange","handleHeaderCellColumnWidthsChange"],[0,"checkboxChange","handleCompositionalCheckboxChange"],[0,"headerCheckboxChange","handleCompositionalHeaderCheckboxChange"],[3,"pointerdown","handlePointerDownExitKeyboardReorder"],[3,"pointerdown","handleRowReorderPointerDown"],[3,"dragstart","handleRowReorderDragStart"],[3,"dragend","handleRowReorderDragEnd"],[2,"dragover","handleRowReorderDragOver"],[2,"dragenter","handleRowReorderDragEnter"],[3,"dragleave","handleRowReorderDragLeave"],[2,"drop","handleRowReorderDrop"],[0,"headerSortChange","handleCompositionalHeaderSort"]],{columns:[{watchColumns:0}],data:[{watchData:0}],footer:[{watchFooterData:0}],reorderHandleIcon:[{watchReorderHandleIcon:0}],reorderHandleIconKeyboard:[{watchReorderHandleIconKeyboard:0}],rowReorderable:[{watchRowReorderable:0}],selectable:[{watchSelectable:0}]}]),m=g,R=function(){"undefined"!=typeof customElements&&["xpl-table","xpl-checkbox","xpl-icon","xpl-table-cell","xpl-table-footer-cell","xpl-table-header-cell"].forEach((t=>{switch(t){case"xpl-table":customElements.get(s(t))||customElements.define(s(t),g);break;case"xpl-checkbox":customElements.get(s(t))||p();break;case"xpl-icon":customElements.get(s(t))||b();break;case"xpl-table-cell":customElements.get(s(t))||x();break;case"xpl-table-footer-cell":customElements.get(s(t))||f();break;case"xpl-table-header-cell":customElements.get(s(t))||u()}}))};export{m as XplTable,R as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as s,createEvent as e,h as i,Host as h,transformTag as a}from"@stencil/core/internal/client";import{d as l}from"./xpl-icon2.js";const c=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.tableSelect=e(this,"tableSelect",7),this.sortChanged=e(this,"sortChanged",3),this.selectedValues=[],this.isSortable=!1,this.sortableColumns=[],this.areAllSelected=!1,this.hasScrolled=!1,this.sortTypeArray=[],this.selectAllValue=Math.random().toString(36).slice(2),this.selectAll=t=>{const{target:s}=t;if(!(s instanceof HTMLInputElement))return;const{checked:e}=s;this.areAllSelected=e,this.selected=this.selectedValues.length>0?Array.from(this.el.querySelectorAll("tbody td:first-child input")).map((t=>e?null==t?void 0:t.value:e)):this.selected.map((()=>e)),this.onChange()},this.selectOne=(t,s)=>{const{target:e}=t;if(!(e instanceof HTMLInputElement))return;const{checked:i,value:h}=e;this.areAllSelected=!1,this.selected=this.selected.map(((t,e)=>e!==s?t:this.selectedValues.length>0&&i?h:i)),this.onChange()},this.onChange=()=>{this.tableSelect.emit({selected:this.selected,areAllSelected:this.areAllSelected})},this.onScroll=()=>{this.hasScrolled=this.container.scrollLeft>0},this.sortBy=(t,s)=>{const e=(s,e)=>s[t].toLocaleLowerCase()<e[t].toLocaleLowerCase()?-1:s[t].toLocaleLowerCase()>e[t].toLocaleLowerCase()?1:0;switch(s[t]){case"asc":this.rowData.sort(((t,s)=>e(t,s)));break;case"desc":this.rowData.sort(((t,s)=>e(s,t)));break;default:this.rowData=this.data,this.sortTypeArray[t]=null}this.rowData=Array.from(this.rowData),this.render()},this.setData=()=>{this.rowData=void 0!==this.data?Array.from(this.data):[]},this.setFooterData=()=>{this.rowFooterData=void 0!==this.footer?Array.from(this.footer):[]}}handleSort(t,s,e,i){t.preventDefault(),t.stopPropagation(),s&&(this.sortTypeArray=this.sortTypeArray.map(((t,s)=>{if(s!==e)return null;switch(t){case"asc":return"desc";case"desc":return null;default:return"asc"}})),this.sortChanged.emit({colNum:e,colName:i,sortTypeArr:this.sortTypeArray}).defaultPrevented||this.sortBy(e,this.sortTypeArray))}watchData(){this.setData()}watchFooterData(){this.setFooterData()}watchColumns(){this.sortTypeArray=this.columns?this.columns.map((()=>null)):[]}componentWillLoad(){this.areAllSelected=!1,this.setData(),this.setFooterData(),this.selected=Array(this.rowData.length).fill(!1),this.sortTypeArray=this.columns?this.columns.map((()=>null)):[]}render(){var t;return!this.columns||this.sortTypeArray&&this.sortTypeArray.length===this.columns.length||(this.sortTypeArray=this.columns.map((()=>null))),i(h,{key:"10b0bfd08e28fada9a2c8509d405c5314cce1689"},i("div",{key:"8e5b4fe928618b175a58f858f6cfd65f4bd29c53",class:"xpl-table-container",onScroll:this.onScroll,ref:t=>{this.container=t}},i("table",{key:"a6df646737b9a1d5e67cebe9eaad41911ab606ca",class:{"xpl-table":!0,"xpl-table--striped":this.striped,"xpl-table--freeze":this.freeze,"xpl-table--has-scrolled":this.hasScrolled}},this.columns&&i("thead",{key:"5f14766107d69f26b865f63c323d417f43260267"},this.columns.map(((t,s)=>{var e;const h=(t=>{switch(t){case"asc":return"arrow-up";case"desc":return"arrow-down";default:return"dash"}})(null===(e=this.sortTypeArray)||void 0===e?void 0:e[s]),a=!(!this.isSortable||!this.sortableColumns[s]);return i("th",null,i("label",{onClick:e=>this.handleSort(e,a,s,t.replace(/ /g,"-").toLowerCase()),class:a?"cursor-pointer":""},this.multiselect&&0===s&&i("input",{checked:this.areAllSelected,id:"__xpl-table-th",indeterminate:!this.areAllSelected&&this.selected.some((t=>t)),onClick:t=>{t.stopPropagation(),this.selectAll(t)},type:"checkbox",value:"select-all-"+this.selectAllValue}),t,a&&!!this.sortTypeArray[s]&&i("xpl-icon",{icon:h,size:16})))}))),i("tbody",{key:"b13ca1d1a738de189d4f040dfd309187671b341d"},this.rowData.map(((t,s)=>i("tr",{class:this.selected&&this.selected[s]?"xpl-table-row-selected":""},t.map(((t,e)=>i("td",null,this.multiselect&&0===e?i("label",{htmlFor:"__xpl-table-row-"+s},i("input",{id:"__xpl-table-row-"+s,checked:!!this.selected[s],type:"checkbox",onChange:t=>this.selectOne(t,s),value:this.selectedValues.length>0?this.selectedValues[s]:"xpl-table-checkbox-"+s}),i("div",{innerHTML:t})):i("div",{innerHTML:t})))))))),(null===(t=this.rowFooterData)||void 0===t?void 0:t.length)>0&&i("tfoot",{key:"5d45854ba21aa7e0bfaaf3b8a537e0c121538ac9"},this.rowFooterData.map((t=>i("tr",null,t.map((t=>i("td",null,i("div",{innerHTML:t})))))))))))}get el(){return this}static get watchers(){return{data:[{watchData:0}],footer:[{watchFooterData:0}],columns:[{watchColumns:0}]}}},[0,"xpl-table",{columns:[16],data:[16],footer:[16],freeze:[4],multiselect:[4],striped:[4],selectedValues:[16],isSortable:[4,"is-sortable"],sortableColumns:[16],areAllSelected:[32],rowData:[32],rowFooterData:[32],hasScrolled:[32],selected:[32],sortTypeArray:[32]},void 0,{data:[{watchData:0}],footer:[{watchFooterData:0}],columns:[{watchColumns:0}]}]),r=c,o=function(){"undefined"!=typeof customElements&&["xpl-table","xpl-icon"].forEach((t=>{switch(t){case"xpl-table":customElements.get(a(t))||customElements.define(a(t),c);break;case"xpl-icon":customElements.get(a(t))||l()}}))};export{r as XplTable,o as defineCustomElement}

package/dist/components/xpl-tabs.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as s,createEvent as e,h as i,Host as n,transformTag as a}from"@stencil/core/internal/client";import{d as o}from"./xpl-dropdown2.js";import{d as l}from"./xpl-dropdown-group2.js";import{d as h}from"./xpl-dropdown-heading2.js";import{d}from"./xpl-dropdown-option2.js";import{d as r}from"./xpl-icon2.js";import{d as c}from"./xpl-select2.js";import{d as p}from"./xpl-tag2.js";let u=0;function b(t){var e,i;const n=t.querySelector("xpl-button button");if(n){const t=n.cloneNode(!0);if(t instanceof s){t.querySelectorAll(".xpl-button__icon, xpl-icon").forEach((t=>t.remove()));const s=null===(e=t.textContent)||void 0===e?void 0:e.replace(/\s+/g," ").trim();if(s)return s}}const a=t.querySelector(".xpl-tab__button");return a?Array.from(a.childNodes).filter((t=>t.nodeType===Node.TEXT_NODE)).map((t=>{var s;return(null!==(s=t.textContent)&&void 0!==s?s:"").trim()})).join(" "):null!==(i=t.getAttribute("target"))&&void 0!==i?i:""}const m=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.tabChange=e(this,"tabChange",7),this.tabHeadings=[],this.tabPanels=[],this.tablistKeydownBound=!1,this.activeBarPosition={left:0,width:0},this.choicesTick=1,this.isMobileSelectChange=!1,this.selectedValue="",this.disabled=!1,this.fullWidth=!1,this.type="tabs",this.handleTabChange=t=>{this.applySelection(t)},this.onTablistKeydown=async t=>{var s,e;if(this.disabled)return;const i=null===(e=null===(s=t.target)||void 0===s?void 0:s.closest)||void 0===e?void 0:e.call(s,"xpl-tab");if(!i||!this.tabHeadings.includes(i))return;const{key:n}=t;let a=!1,o=!1;this.isTablistRtl()?"ArrowLeft"===n||"ArrowDown"===n?a=!0:"ArrowRight"!==n&&"ArrowUp"!==n||(o=!0):"ArrowRight"===n||"ArrowDown"===n?a=!0:"ArrowLeft"!==n&&"ArrowUp"!==n||(o=!0);const l=a||o,h="Home"===n;if(!l&&!h&&"End"!==n)return;const d=this.getEnabledTabHeadingsSync();if(0===d.length)return;const r=d.indexOf(i);if(-1===r)return;let c;c=l?a?(r+1)%d.length:(r-1+d.length)%d.length:h?0:d.length-1;const p=d[c],u=null==p?void 0:p.getAttribute("target");if(!u)return;const b=i.getAttribute("target");t.preventDefault(),u!==b&&(this.applySelection(u),await p.focusTrigger(),this.tabChange.emit(u))}}onDisabledChanged(){this.syncGroupDisabledOnTabs(),this.disabled||this.syncRovingTabindex()}onFullWidthChanged(){this.syncFullWidthOnTabs()}onTypeChanged(){this.syncVariantOnTabs()}onValueChanged(t){this.applySelection(t)}connectedCallback(){this.el.hasAttribute("data-tabs-instance-id")||(u+=1,this.el.setAttribute("data-tabs-instance-id","xpl-tg-"+u)),"undefined"!=typeof MutationObserver&&(this.observer=new MutationObserver((()=>{this.collectTabs(!0)})),this.observer.observe(this.el,{childList:!0,subtree:!0}))}disconnectedCallback(){var t;null===(t=this.observer)||void 0===t||t.disconnect(),this.headingsContainerRef&&this.tablistKeydownBound&&(this.headingsContainerRef.removeEventListener("keydown",this.onTablistKeydown),this.tablistKeydownBound=!1),void 0!==this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=void 0)}componentWillLoad(){this.selectedValue=this.getDefaultValue()}componentDidLoad(){this.collectTabs(!1),this.attachTablistKeydown()}componentDidUpdate(){this.updateActiveBarPosition(),this.syncRovingTabindex()}componentDidRender(){!this.tablistKeydownBound&&this.headingsContainerRef&&this.attachTablistKeydown()}onWindowResize(){this.updateActiveBarPosition()}syncGroupDisabledOnTabs(){this.tabHeadings.forEach((t=>{this.disabled?t.setAttribute("data-group-disabled",""):t.removeAttribute("data-group-disabled")}))}applySelection(t){this.tabHeadings.forEach((s=>{t===s.getAttribute("target")?s.setAttribute("selected",""):s.removeAttribute("selected")})),this.tabPanels.forEach((s=>{t===s.getAttribute("target")?s.setAttribute("selected",""):s.removeAttribute("selected")})),this.syncGroupDisabledOnTabs(),void 0!==this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame((()=>{this.rafId=void 0,this.selectedValue=t,this.updateActiveBarPosition(),this.syncRovingTabindex()}))}isOwnedTabOrPanel(t){return t.closest("xpl-tabs")===this.el}collectTabs(t){this.tabHeadings=Array.from(this.el.querySelectorAll("xpl-tab")).filter((t=>this.isOwnedTabOrPanel(t))),this.tabPanels=Array.from(this.el.querySelectorAll("xpl-tab-panel")).filter((t=>this.isOwnedTabOrPanel(t))),this.syncVariantOnTabs(),this.syncFullWidthOnTabs(),this.applySelection(this.getDefaultValue()),t&&(this.choicesTick+=1)}syncVariantOnTabs(){this.tabHeadings.forEach((t=>{t.variant=this.type}))}syncFullWidthOnTabs(){this.tabHeadings.forEach((t=>{t.fullWidth=this.fullWidth}))}getDefaultValue(){var t,s;return this.value||(null===(s=null===(t=this.tabHeadings)||void 0===t?void 0:t[0])||void 0===s?void 0:s.getAttribute("target"))||""}async syncRovingTabindex(){this.disabled||await Promise.all(this.tabHeadings.map((async t=>{var s;const e=(null!==(s=t.getAttribute("target"))&&void 0!==s?s:"")===this.selectedValue;await t.setTabIndex(e?0:-1)})))}getEnabledTabHeadingsSync(){return this.tabHeadings.filter((t=>{if(this.disabled||t.hasAttribute("disabled"))return!1;const s=t.querySelector("segment"===t.variant?"xpl-button button":".xpl-tab__button");return!(!s||s.disabled)}))}attachTablistKeydown(){const t=this.headingsContainerRef;t&&!this.tablistKeydownBound&&(t.addEventListener("keydown",this.onTablistKeydown),this.tablistKeydownBound=!0)}isTablistRtl(){const t=this.headingsContainerRef;return!!t&&"rtl"===getComputedStyle(t).direction}renderChoices(){return this.tabHeadings.map((t=>{var s;const e=null!==(s=t.getAttribute("target"))&&void 0!==s?s:"",i=this.disabled||t.hasAttribute("disabled"),n="segment"===this.type&&t.getAttribute("icon")||void 0;return Object.assign({label:b(t),value:e,isDisabled:i},n?{icon:n}:{})}))}updateActiveBarPosition(){if("segment"===this.type)return;const t=this.tabHeadings.find((t=>t.getAttribute("target")===this.selectedValue));if(!this.headingsContainerRef||!t)return;const s=t.getBoundingClientRect(),e=this.headingsContainerRef.getBoundingClientRect(),i=s.left-e.left,n=s.width;this.activeBarPosition.left===i&&this.activeBarPosition.width===n||(this.activeBarPosition={left:i,width:n})}mobileSelectClassNames(){const t="xpl-tabs__mobile-select";return"segment"===this.type?t+" xpl-tabs__mobile-select--segment":t}render(){const t="segment"===this.type;return i(n,{key:"56e4284e5a8fd492ebedcc963ddc2218f75c58c6",class:{"xpl-tabs":!0,"xpl-tabs--full-width":this.fullWidth,"xpl-tabs--segment":t},"data-choices-tick":this.choicesTick},i("xpl-select",{key:"bd22e0a513a068915a206d48f8011cb779abdf44",classNames:this.mobileSelectClassNames(),choices:this.renderChoices(),disabled:this.disabled,selectedValues:this.selectedValue,onDropdownStateChange:t=>{t.detail&&(this.isMobileSelectChange=!0)},onChangeEvent:t=>{if(this.isMobileSelectChange){const s=""+t.detail;this.handleTabChange(s),this.tabChange.emit(s),this.isMobileSelectChange=!1}}}),i("nav",{key:"b56a5a8435cbba117f7b66711a4bad4a0df1b808","aria-orientation":"horizontal",class:"xpl-tabs__headings",role:"tablist",ref:t=>{this.headingsContainerRef=t},onTabChange:t=>{t.stopPropagation(),this.isMobileSelectChange=!1,this.handleTabChange(t.detail),this.tabChange.emit(t.detail)}},!t&&i("div",{key:"77c1c13e85a172da519e5081364808f8a873eb54",class:"xpl-tabs__active-bar",style:{transform:`translateX(${this.activeBarPosition.left}px)`,width:this.activeBarPosition.width+"px"}}),i("slot",{key:"24e4b6409fbfa26f859d64d4d37493a711006368",name:"heading"})),i("div",{key:"2a364d45d6377131c2809d25373bc90512f11307",class:"xpl-tabs__panels"},i("slot",{key:"59335370a20458fc36bfa33a2a117744ce4434fc",name:"panel"})))}get el(){return this}static get watchers(){return{disabled:[{onDisabledChanged:0}],fullWidth:[{onFullWidthChanged:0}],type:[{onTypeChanged:0}],value:[{onValueChanged:0}]}}},[260,"xpl-tabs",{disabled:[4],fullWidth:[4,"full-width"],type:[513],value:[1],activeBarPosition:[32],choicesTick:[32],isMobileSelectChange:[32],selectedValue:[32]},[[9,"resize","onWindowResize"]],{disabled:[{onDisabledChanged:0}],fullWidth:[{onFullWidthChanged:0}],type:[{onTypeChanged:0}],value:[{onValueChanged:0}]}]),g=m,f=function(){"undefined"!=typeof customElements&&["xpl-tabs","xpl-dropdown","xpl-dropdown-group","xpl-dropdown-heading","xpl-dropdown-option","xpl-icon","xpl-select","xpl-tag"].forEach((t=>{switch(t){case"xpl-tabs":customElements.get(a(t))||customElements.define(a(t),m);break;case"xpl-dropdown":customElements.get(a(t))||o();break;case"xpl-dropdown-group":customElements.get(a(t))||l();break;case"xpl-dropdown-heading":customElements.get(a(t))||h();break;case"xpl-dropdown-option":customElements.get(a(t))||d();break;case"xpl-icon":customElements.get(a(t))||r();break;case"xpl-select":customElements.get(a(t))||c();break;case"xpl-tag":customElements.get(a(t))||p()}}))};export{g as XplTabs,f as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as n,transformTag as a}from"@stencil/core/internal/client";import{d as o}from"./xpl-dropdown2.js";import{d as l}from"./xpl-dropdown-group2.js";import{d as h}from"./xpl-dropdown-heading2.js";import{d as r}from"./xpl-dropdown-option2.js";import{d}from"./xpl-icon2.js";import{d as c}from"./xpl-select2.js";import{d as p}from"./xpl-tag2.js";let u=0;function b(t){var s,i;const n=t.querySelector("xpl-button button");if(n){const t=n.cloneNode(!0);if(t instanceof e){t.querySelectorAll(".xpl-button__icon, xpl-icon").forEach((t=>t.remove()));const e=null===(s=t.textContent)||void 0===s?void 0:s.replace(/\s+/g," ").trim();if(e)return e}}const a=t.querySelector(".xpl-tab__button");return a?Array.from(a.childNodes).filter((t=>t.nodeType===Node.TEXT_NODE)).map((t=>{var e;return(null!==(e=t.textContent)&&void 0!==e?e:"").trim()})).join(" "):null!==(i=t.getAttribute("target"))&&void 0!==i?i:""}const m=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.tabChange=s(this,"tabChange",7),this.tabHeadings=[],this.tabPanels=[],this.tablistKeydownBound=!1,this.activeBarPosition={left:0,width:0},this.choicesTick=1,this.isMobileSelectChange=!1,this.selectedValue="",this.disabled=!1,this.fullWidth=!1,this.type="tabs",this.handleTabChange=t=>{this.applySelection(t)},this.onTablistKeydown=async t=>{var e,s;if(this.disabled)return;const i=null===(s=null===(e=t.target)||void 0===e?void 0:e.closest)||void 0===s?void 0:s.call(e,"xpl-tab");if(!i||!this.tabHeadings.includes(i))return;const{key:n}=t;let a=!1,o=!1;this.isTablistRtl()?"ArrowLeft"===n||"ArrowDown"===n?a=!0:"ArrowRight"!==n&&"ArrowUp"!==n||(o=!0):"ArrowRight"===n||"ArrowDown"===n?a=!0:"ArrowLeft"!==n&&"ArrowUp"!==n||(o=!0);const l=a||o,h="Home"===n;if(!l&&!h&&"End"!==n)return;const r=this.getEnabledTabHeadingsSync();if(0===r.length)return;const d=r.indexOf(i);if(-1===d)return;let c;c=l?a?(d+1)%r.length:(d-1+r.length)%r.length:h?0:r.length-1;const p=r[c],u=null==p?void 0:p.getAttribute("target");if(!u)return;const b=i.getAttribute("target");t.preventDefault(),u!==b&&(this.applySelection(u),await p.focusTrigger(),this.tabChange.emit(u))}}onDisabledChanged(){this.syncGroupDisabledOnTabs(),this.disabled||this.syncRovingTabindex()}onFullWidthChanged(){this.syncFullWidthOnTabs()}onTypeChanged(){this.syncVariantOnTabs()}onValueChanged(t){this.applySelection(t)}connectedCallback(){this.el.hasAttribute("data-tabs-instance-id")||(u+=1,this.el.setAttribute("data-tabs-instance-id","xpl-tg-"+u)),"undefined"!=typeof MutationObserver&&(this.observer=new MutationObserver((()=>{this.collectTabs(!0)})),this.observer.observe(this.el,{childList:!0,subtree:!0}))}disconnectedCallback(){var t;null===(t=this.observer)||void 0===t||t.disconnect(),this.headingsContainerRef&&this.tablistKeydownBound&&(this.headingsContainerRef.removeEventListener("keydown",this.onTablistKeydown),this.tablistKeydownBound=!1),void 0!==this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=void 0)}componentWillLoad(){this.selectedValue=this.getDefaultValue()}componentDidLoad(){this.collectTabs(!1),this.attachTablistKeydown()}componentDidUpdate(){this.updateActiveBarPosition(),this.syncRovingTabindex()}componentDidRender(){!this.tablistKeydownBound&&this.headingsContainerRef&&this.attachTablistKeydown()}onWindowResize(){this.updateActiveBarPosition()}syncGroupDisabledOnTabs(){this.tabHeadings.forEach((t=>{this.disabled?t.setAttribute("data-group-disabled",""):t.removeAttribute("data-group-disabled")}))}applySelection(t){this.tabHeadings.forEach((e=>{t===e.getAttribute("target")?e.setAttribute("selected",""):e.removeAttribute("selected")})),this.tabPanels.forEach((e=>{t===e.getAttribute("target")?e.setAttribute("selected",""):e.removeAttribute("selected")})),this.syncGroupDisabledOnTabs(),void 0!==this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame((()=>{this.rafId=void 0,this.selectedValue=t,this.updateActiveBarPosition(),this.syncRovingTabindex()}))}isOwnedTabOrPanel(t){return t.closest("xpl-tabs")===this.el}collectTabs(t){this.tabHeadings=Array.from(this.el.querySelectorAll("xpl-tab")).filter((t=>this.isOwnedTabOrPanel(t))),this.tabPanels=Array.from(this.el.querySelectorAll("xpl-tab-panel")).filter((t=>this.isOwnedTabOrPanel(t))),this.syncVariantOnTabs(),this.syncFullWidthOnTabs(),this.applySelection(this.getDefaultValue()),t&&(this.choicesTick+=1)}syncVariantOnTabs(){this.tabHeadings.forEach((t=>{t.variant=this.type}))}syncFullWidthOnTabs(){this.tabHeadings.forEach((t=>{t.fullWidth=this.fullWidth}))}getDefaultValue(){var t,e;return this.value||(null===(e=null===(t=this.tabHeadings)||void 0===t?void 0:t[0])||void 0===e?void 0:e.getAttribute("target"))||""}async syncRovingTabindex(){this.disabled||await Promise.all(this.tabHeadings.map((async t=>{var e;const s=(null!==(e=t.getAttribute("target"))&&void 0!==e?e:"")===this.selectedValue;await t.setTabIndex(s?0:-1)})))}getEnabledTabHeadingsSync(){return this.tabHeadings.filter((t=>{if(this.disabled||t.hasAttribute("disabled"))return!1;const e=t.querySelector("segment"===t.variant?"xpl-button button":".xpl-tab__button");return!(!e||e.disabled)}))}attachTablistKeydown(){const t=this.headingsContainerRef;t&&!this.tablistKeydownBound&&(t.addEventListener("keydown",this.onTablistKeydown),this.tablistKeydownBound=!0)}isTablistRtl(){const t=this.headingsContainerRef;return!!t&&"rtl"===getComputedStyle(t).direction}renderChoices(){return this.tabHeadings.map((t=>{var e;const s=null!==(e=t.getAttribute("target"))&&void 0!==e?e:"",i=this.disabled||t.hasAttribute("disabled"),n="segment"===this.type&&t.getAttribute("icon")||void 0;return Object.assign({label:b(t),value:s,isDisabled:i},n?{icon:n}:{})}))}updateActiveBarPosition(){if("segment"===this.type)return;const t=this.tabHeadings.find((t=>t.getAttribute("target")===this.selectedValue));if(!this.headingsContainerRef||!t)return;const e=t.getBoundingClientRect(),s=this.headingsContainerRef.getBoundingClientRect(),i=e.left-s.left,n=e.width;this.activeBarPosition.left===i&&this.activeBarPosition.width===n||(this.activeBarPosition={left:i,width:n})}mobileSelectClassNames(){const t="xpl-tabs__mobile-select";return"segment"===this.type?t+" xpl-tabs__mobile-select--segment":t}render(){const t="segment"===this.type;return i(n,{key:"9998ae067e13e7c08338ae29bfe05bc3adacaa87",class:{"xpl-tabs":!0,"xpl-tabs--full-width":this.fullWidth,"xpl-tabs--segment":t},"data-choices-tick":this.choicesTick},i("xpl-select",{key:"18209c354e77267a13ce0c7380df0e419595cca7",classNames:this.mobileSelectClassNames(),choices:this.renderChoices(),disabled:this.disabled,selectedValues:this.selectedValue,onDropdownStateChange:t=>{t.detail&&(this.isMobileSelectChange=!0)},onChangeEvent:t=>{if(this.isMobileSelectChange){const e=""+t.detail;this.handleTabChange(e),this.tabChange.emit(e),this.isMobileSelectChange=!1}}}),i("nav",{key:"cf1bf2ec95fbbe7f0a6b8774cc5ce26928c7d6ca","aria-orientation":"horizontal",class:"xpl-tabs__headings",role:"tablist",ref:t=>{this.headingsContainerRef=t},onTabChange:t=>{t.stopPropagation(),this.isMobileSelectChange=!1,this.handleTabChange(t.detail),this.tabChange.emit(t.detail)}},!t&&i("div",{key:"5bfd13566a17723ec166a934bc72e59307eacb8c",class:"xpl-tabs__active-bar",style:{transform:`translateX(${this.activeBarPosition.left}px)`,width:this.activeBarPosition.width+"px"}}),i("slot",{key:"52baf508a46759fe908f8721b3089d3db0189383",name:"heading"})),i("div",{key:"363fe87f244eace0dc0af0903e0b8c25da3a613f",class:"xpl-tabs__panels"},i("slot",{key:"f3872844f486cf831bca26a228eba88fa18b42c3",name:"panel"})))}get el(){return this}static get watchers(){return{disabled:[{onDisabledChanged:0}],fullWidth:[{onFullWidthChanged:0}],type:[{onTypeChanged:0}],value:[{onValueChanged:0}]}}},[260,"xpl-tabs",{disabled:[4],fullWidth:[4,"full-width"],type:[513],value:[1],activeBarPosition:[32],choicesTick:[32],isMobileSelectChange:[32],selectedValue:[32]},[[9,"resize","onWindowResize"]],{disabled:[{onDisabledChanged:0}],fullWidth:[{onFullWidthChanged:0}],type:[{onTypeChanged:0}],value:[{onValueChanged:0}]}]),f=m,g=function(){"undefined"!=typeof customElements&&["xpl-tabs","xpl-dropdown","xpl-dropdown-group","xpl-dropdown-heading","xpl-dropdown-option","xpl-icon","xpl-select","xpl-tag"].forEach((t=>{switch(t){case"xpl-tabs":customElements.get(a(t))||customElements.define(a(t),m);break;case"xpl-dropdown":customElements.get(a(t))||o();break;case"xpl-dropdown-group":customElements.get(a(t))||l();break;case"xpl-dropdown-heading":customElements.get(a(t))||h();break;case"xpl-dropdown-option":customElements.get(a(t))||r();break;case"xpl-icon":customElements.get(a(t))||d();break;case"xpl-select":customElements.get(a(t))||c();break;case"xpl-tag":customElements.get(a(t))||p()}}))};export{f as XplTabs,g as defineCustomElement}

package/dist/components/xpl-tag2.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as a,Host as e,transformTag as h}from"@stencil/core/internal/client";import{d as n}from"./xpl-icon2.js";const l=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.close=i(this,"close",7),this.tagDragEnd=i(this,"tagDragEnd",7),this.tagDragStart=i(this,"tagDragStart",7),this.tagRemove=i(this,"tagRemove",7),this.dismissAriaLabelSuffix="tag",this.isDragging=!1,this.disabled=!1,this.dismissible=!0,this.isDraggable=!1,this.size="default",this.handleTagClick=()=>{this.disabled||this.isDraggable||this.close.emit()},this.setDragPreviewToHost=t=>{if(t.dataTransfer)try{const s=this.el.getBoundingClientRect(),i=Math.max(0,t.clientX-s.left),a=Math.max(0,t.clientY-s.top);t.dataTransfer.setDragImage(this.el,i,a)}catch(t){}},this.handleContentKeyDown=t=>{this.disabled||"Enter"!==t.key&&" "!==t.key||t.preventDefault()},this.handleDismissClick=t=>{t.stopPropagation(),this.disabled||(this.close.emit(),this.tagRemove.emit())},this.handleDragStart=t=>{this.isDragging=!0,t.dataTransfer&&(t.dataTransfer.effectAllowed="move",this.setDragPreviewToHost(t),this.tagId&&t.dataTransfer.setData("application/x-tag-id",this.tagId),t.dataTransfer.setData("text/plain",this.getContentLabelText())),this.tagDragStart.emit({tagId:this.tagId,content:this.getContentLabelText(),originalEvent:t})},this.handleDragEnd=t=>{var s;this.isDragging=!1;const i="move"===(null===(s=t.dataTransfer)||void 0===s?void 0:s.dropEffect);this.tagDragEnd.emit({tagId:this.tagId,dropped:i,originalEvent:t})},this.handleDragOver=t=>{!this.disabled&&this.isDraggable&&(t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"))},this.handleDragEnter=t=>{!this.disabled&&this.isDraggable&&t.preventDefault()},this.handleHostDragStart=t=>{t.target===this.el&&this.isDraggable&&t.preventDefault()}}onDisabledChange(t){t&&this.isDragging&&(this.isDragging=!1)}onIsDraggableChange(t){!t&&this.isDragging&&(this.isDragging=!1)}componentDidRender(){queueMicrotask((()=>this.syncDismissAriaLabelSuffix()))}getContentLabelText(){var t,s;return(null!==(s=null===(t=this.el.querySelector(".xpl-tag__content"))||void 0===t?void 0:t.textContent)&&void 0!==s?s:"").trim()}syncDismissAriaLabelSuffix(){if(!this.el.isConnected)return;const t=this.getContentLabelText(),s=""===t?"tag":t;s!==this.dismissAriaLabelSuffix&&(this.dismissAriaLabelSuffix=s)}render(){const t=this.isDraggable&&!this.disabled;return a(e,{key:"117319681b3edca99c97361353fd1775a0b9b32f",class:{"xpl-tag":!0,"xpl-tag-container":!0,"xpl-tag--disabled":this.disabled,"xpl-tag--dismissible":this.dismissible,"xpl-tag--dragging":this.isDragging,"xpl-tag--draggable":t,"xpl-tag--sm":"sm"===this.size},onDragOver:t?this.handleDragOver:void 0,onDragEnter:t?this.handleDragEnter:void 0,onDragStart:this.isDraggable?this.handleHostDragStart:void 0},t?a("div",{class:"xpl-tag__content xpl-tag",role:"button",tabIndex:0,draggable:!0,"aria-grabbed":String(this.isDragging),onClick:this.handleTagClick,onKeyDown:this.handleContentKeyDown,onDragStart:this.handleDragStart,onDragEnd:this.handleDragEnd},a("slot",null)):a("button",{class:"xpl-tag__content xpl-tag",type:"button",disabled:this.disabled,onClick:this.handleTagClick},a("slot",null)),this.dismissible&&a("button",{key:"b1040693b482270dec9403a908bf3cacd5db49b8",class:"xpl-tag__dismiss xpl-tag__close",type:"button",draggable:!1,disabled:this.disabled,"aria-label":`Dismiss ${this.dismissAriaLabelSuffix}`,onClick:this.handleDismissClick},a("xpl-icon",{key:"ed0419c92f526424bb1b9cd43e93ba119348da07",icon:"xmark",size:10})))}get el(){return this}static get watchers(){return{disabled:[{onDisabledChange:0}],isDraggable:[{onIsDraggableChange:0}]}}},[260,"xpl-tag",{disabled:[4],dismissible:[4],isDraggable:[4,"is-draggable"],size:[1],tagId:[1,"tag-id"],dismissAriaLabelSuffix:[32],isDragging:[32]},void 0,{disabled:[{onDisabledChange:0}],isDraggable:[{onIsDraggableChange:0}]}]);function o(){"undefined"!=typeof customElements&&["xpl-tag","xpl-icon"].forEach((t=>{switch(t){case"xpl-tag":customElements.get(h(t))||customElements.define(h(t),l);break;case"xpl-icon":customElements.get(h(t))||n()}}))}export{l as T,o as d}
+import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as a,Host as e,transformTag as h}from"@stencil/core/internal/client";import{d as n}from"./xpl-icon2.js";const l=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.close=i(this,"close",7),this.tagDragEnd=i(this,"tagDragEnd",7),this.tagDragStart=i(this,"tagDragStart",7),this.tagRemove=i(this,"tagRemove",7),this.dismissAriaLabelSuffix="tag",this.isDragging=!1,this.disabled=!1,this.dismissible=!0,this.isDraggable=!1,this.size="default",this.handleTagClick=()=>{this.disabled||this.isDraggable||this.close.emit()},this.setDragPreviewToHost=t=>{if(t.dataTransfer)try{const s=this.el.getBoundingClientRect(),i=Math.max(0,t.clientX-s.left),a=Math.max(0,t.clientY-s.top);t.dataTransfer.setDragImage(this.el,i,a)}catch(t){}},this.handleContentKeyDown=t=>{this.disabled||"Enter"!==t.key&&" "!==t.key||t.preventDefault()},this.handleDismissClick=t=>{t.stopPropagation(),this.disabled||(this.close.emit(),this.tagRemove.emit())},this.handleDragStart=t=>{this.isDragging=!0,t.dataTransfer&&(t.dataTransfer.effectAllowed="move",this.setDragPreviewToHost(t),this.tagId&&t.dataTransfer.setData("application/x-tag-id",this.tagId),t.dataTransfer.setData("text/plain",this.getContentLabelText())),this.tagDragStart.emit({tagId:this.tagId,content:this.getContentLabelText(),originalEvent:t})},this.handleDragEnd=t=>{var s;this.isDragging=!1;const i="move"===(null===(s=t.dataTransfer)||void 0===s?void 0:s.dropEffect);this.tagDragEnd.emit({tagId:this.tagId,dropped:i,originalEvent:t})},this.handleDragOver=t=>{!this.disabled&&this.isDraggable&&(t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"))},this.handleDragEnter=t=>{!this.disabled&&this.isDraggable&&t.preventDefault()},this.handleHostDragStart=t=>{t.target===this.el&&this.isDraggable&&t.preventDefault()}}onDisabledChange(t){t&&this.isDragging&&(this.isDragging=!1)}onIsDraggableChange(t){!t&&this.isDragging&&(this.isDragging=!1)}componentDidRender(){queueMicrotask((()=>this.syncDismissAriaLabelSuffix()))}getContentLabelText(){var t,s;return(null!==(s=null===(t=this.el.querySelector(".xpl-tag__content"))||void 0===t?void 0:t.textContent)&&void 0!==s?s:"").trim()}syncDismissAriaLabelSuffix(){if(!this.el.isConnected)return;const t=this.getContentLabelText(),s=""===t?"tag":t;s!==this.dismissAriaLabelSuffix&&(this.dismissAriaLabelSuffix=s)}render(){const t=this.isDraggable&&!this.disabled;return a(e,{key:"7e85098bb9f5e8c0fceee3e7947337e0799c4de8",class:{"xpl-tag":!0,"xpl-tag-container":!0,"xpl-tag--disabled":this.disabled,"xpl-tag--dismissible":this.dismissible,"xpl-tag--dragging":this.isDragging,"xpl-tag--draggable":t,"xpl-tag--sm":"sm"===this.size},onDragOver:t?this.handleDragOver:void 0,onDragEnter:t?this.handleDragEnter:void 0,onDragStart:this.isDraggable?this.handleHostDragStart:void 0},t?a("div",{class:"xpl-tag__content xpl-tag",role:"button",tabIndex:0,draggable:!0,"aria-grabbed":String(this.isDragging),onClick:this.handleTagClick,onKeyDown:this.handleContentKeyDown,onDragStart:this.handleDragStart,onDragEnd:this.handleDragEnd},a("slot",null)):a("button",{class:"xpl-tag__content xpl-tag",type:"button",disabled:this.disabled,onClick:this.handleTagClick},a("slot",null)),this.dismissible&&a("button",{key:"cb875506819a0a58d42add85a1a09e95e4786eba",class:"xpl-tag__dismiss xpl-tag__close",type:"button",draggable:!1,disabled:this.disabled,"aria-label":`Dismiss ${this.dismissAriaLabelSuffix}`,onClick:this.handleDismissClick},a("xpl-icon",{key:"431f061a4c96dacb9dc76a753c9d2de01491b2be",icon:"xmark",size:10})))}get el(){return this}static get watchers(){return{disabled:[{onDisabledChange:0}],isDraggable:[{onIsDraggableChange:0}]}}},[260,"xpl-tag",{disabled:[4],dismissible:[4],isDraggable:[4,"is-draggable"],size:[1],tagId:[1,"tag-id"],dismissAriaLabelSuffix:[32],isDragging:[32]},void 0,{disabled:[{onDisabledChange:0}],isDraggable:[{onIsDraggableChange:0}]}]);function o(){"undefined"!=typeof customElements&&["xpl-tag","xpl-icon"].forEach((t=>{switch(t){case"xpl-tag":customElements.get(h(t))||customElements.define(h(t),l);break;case"xpl-icon":customElements.get(h(t))||n()}}))}export{l as T,o as d}

package/dist/components/xpl-toast.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as s,h as e,Host as a,transformTag as i}from"@stencil/core/internal/client";import{d as c}from"./xpl-icon2.js";const o=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.variant="neutral",this.showIcon=!0,this.dismissable=!0,this.timeout=8e3,this.handleAnimationEnd=()=>{var t,s;(null===(t=this.el)||void 0===t?void 0:t.classList.contains("xpl-toast--dismissed"))&&(null===(s=this.el)||void 0===s||s.remove())},this.getIcon=()=>{switch(this.variant){case"warning":return e("xpl-icon",{size:24,icon:"alert-hex"});case"success":return e("xpl-icon",{size:24,icon:"check-circle"});default:return e("xpl-icon",{size:24,icon:"comment-alt"})}},this.dismiss=()=>{var t;null===(t=this.el)||void 0===t||t.classList.add("xpl-toast--dismissed")}}componentDidLoad(){this.actionSlot.children.length<1&&setTimeout((()=>{this.dismiss()}),this.timeout)}render(){var t;return e(a,{key:"c9abdb6db66a9dad0d6ed3d2e6d178ea34852c86",class:"xpl-toast xpl-toast--"+this.variant,onAnimationEnd:this.handleAnimationEnd},e("div",{key:"7057e31e0f25dab1ba8b093f1dca15e6f08c44e4",class:"xpl-toast__left"},this.showIcon&&e("div",{key:"7875c518753729ae39a7bb9f2051751924a0d558",class:"xpl-toast__icon xpl-toast__icon--"+this.variant},this.getIcon()),e("div",{key:"e38c7d0593c16f3dfa83bc4e521f89ee644b46d4",class:"xpl-toast__notification"},e("p",{key:"8186437158381780554d2509a806704c52450f8c",class:"xpl-toast__title"},e("slot",{key:"0aa8df0520c33b4576acfb1ad4750a72928b94d5",name:"title"})),""!==this.caption&&e("p",{key:"3a4ce8f73e498373344b8b692e624f177212a70a",class:"xpl-toast__caption"},null===(t=this.caption)||void 0===t?void 0:t.substring(0,85)))),e("div",{key:"636ff5b9476cea09d21b97f3e1b78860a6f10669",class:"xpl-toast__action",ref:t=>{this.actionSlot=t}},e("slot",{key:"733bc27fba998cdbb97cc1124d8449b539a0fc21",name:"action"})),this.dismissable&&e("div",{key:"8f555e8a02c8aed5095ab659a792e19c242dae98",class:"xpl-toast__close"},e("button",{key:"ca64c6cb98c4cda5d2dab208afef54db4832e103",tabIndex:0,onClick:this.dismiss},e("xpl-icon",{key:"bf00f852ecffd16504a8ec95f3f6630b1aa569c9",icon:"x"}))))}get el(){return this}},[260,"xpl-toast",{variant:[1],showIcon:[4,"show-icon"],caption:[1],dismissable:[4],timeout:[2]}]),n=o,l=function(){"undefined"!=typeof customElements&&["xpl-toast","xpl-icon"].forEach((t=>{switch(t){case"xpl-toast":customElements.get(i(t))||customElements.define(i(t),o);break;case"xpl-icon":customElements.get(i(t))||c()}}))};export{n as XplToast,l as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as s,h as e,Host as a,transformTag as i}from"@stencil/core/internal/client";import{d as c}from"./xpl-icon2.js";const o=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.variant="neutral",this.showIcon=!0,this.dismissable=!0,this.timeout=8e3,this.handleAnimationEnd=()=>{var t,s;(null===(t=this.el)||void 0===t?void 0:t.classList.contains("xpl-toast--dismissed"))&&(null===(s=this.el)||void 0===s||s.remove())},this.getIcon=()=>{switch(this.variant){case"warning":return e("xpl-icon",{size:24,icon:"alert-hex"});case"success":return e("xpl-icon",{size:24,icon:"check-circle"});default:return e("xpl-icon",{size:24,icon:"comment-alt"})}},this.dismiss=()=>{var t;null===(t=this.el)||void 0===t||t.classList.add("xpl-toast--dismissed")}}componentDidLoad(){this.actionSlot.children.length<1&&setTimeout((()=>{this.dismiss()}),this.timeout)}render(){var t;return e(a,{key:"4f470ceb525c35a86ddbf65365fac1674ebe7033",class:"xpl-toast xpl-toast--"+this.variant,onAnimationEnd:this.handleAnimationEnd},e("div",{key:"04da6ca2777ceb222da2f4fd831d8aef5101a667",class:"xpl-toast__left"},this.showIcon&&e("div",{key:"0e5e75aa05e96361700c0c7b9eccbc4c5b75a00c",class:"xpl-toast__icon xpl-toast__icon--"+this.variant},this.getIcon()),e("div",{key:"f1ccc651318b6d7128255918bdd68ef36a249e9f",class:"xpl-toast__notification"},e("p",{key:"1ae879d8a670a0f1a4928bfa2a0692581040dca1",class:"xpl-toast__title"},e("slot",{key:"b819a773c11b88cb00f8638db8a960de55ce6508",name:"title"})),""!==this.caption&&e("p",{key:"8f6eb8dd769e4aaf5b16b3caafd9e9ec5408a7e1",class:"xpl-toast__caption"},null===(t=this.caption)||void 0===t?void 0:t.substring(0,85)))),e("div",{key:"46ae2f04fa38b50d2a07082b6972590f6bd28005",class:"xpl-toast__action",ref:t=>{this.actionSlot=t}},e("slot",{key:"69512a9b482bb54252527d798dfa2884a19b7d8c",name:"action"})),this.dismissable&&e("div",{key:"818a5f9dde1a9c9b7ab3cd62cd807200e3687af6",class:"xpl-toast__close"},e("button",{key:"3a617189f8f031e119a125efce0ab35a7f5cf31f",tabIndex:0,onClick:this.dismiss},e("xpl-icon",{key:"d86187aed0665da278f953be5ab92f7051f44438",icon:"x"}))))}get el(){return this}},[260,"xpl-toast",{variant:[1],showIcon:[4,"show-icon"],caption:[1],dismissable:[4],timeout:[2]}]),n=o,l=function(){"undefined"!=typeof customElements&&["xpl-toast","xpl-icon"].forEach((t=>{switch(t){case"xpl-toast":customElements.get(i(t))||customElements.define(i(t),o);break;case"xpl-icon":customElements.get(i(t))||c()}}))};export{n as XplToast,l as defineCustomElement}

package/dist/components/xpl-toggle.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,h as l,Host as s,transformTag as i}from"@stencil/core/internal/client";import{v as a}from"./v4.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.variant="default",this.id=a()}render(){let e="xpl-toggle-container";this.disabled&&(e+=" xpl-toggle-container--disabled");let t="xpl-toggle";return"small"===this.variant&&(t+=" xpl-toggle--small"),l(s,{key:"b501bb268b9fbc2756544b17481ae78ee3144960",class:e},(this.heading||this.description)&&l("label",{key:"34d2bb6e6c4538a863f333e8124fbde9ec2544cb",class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},this.heading,this.description&&l("small",{key:"f9f5ff29d428e776566d0a12e62ab7efe311feb5",class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)),l("input",{key:"f9b1baf90d9336711ce1354a66770c7423551af8",class:t,type:"checkbox",checked:this.checked,disabled:this.disabled,id:this.id,name:this.name}),this.label&&l("label",{key:"49f803372904b5b87394a55c67f428401cd14379",htmlFor:this.id},this.label))}},[0,"xpl-toggle",{checked:[4],description:[1],disabled:[4],heading:[1],label:[1],name:[1],variant:[1],id:[32]}]),d=c,o=function(){"undefined"!=typeof customElements&&["xpl-toggle"].forEach((e=>{"xpl-toggle"===e&&(customElements.get(i(e))||customElements.define(i(e),c))}))};export{d as XplToggle,o as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,h as l,Host as s,transformTag as i}from"@stencil/core/internal/client";import{v as a}from"./v4.js";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.variant="default",this.id=a()}render(){let e="xpl-toggle-container";this.disabled&&(e+=" xpl-toggle-container--disabled");let t="xpl-toggle";return"small"===this.variant&&(t+=" xpl-toggle--small"),l(s,{key:"0cf2e99934bbe447559fbe88cc61989bbfabbdea",class:e},(this.heading||this.description)&&l("label",{key:"7ab6e5535b8d88a5aabb5ced76faca68b2a8abcd",class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},this.heading,this.description&&l("small",{key:"0b8157e097f3890d6c521c399cf1f9c25514e341",class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)),l("input",{key:"3bcfe674974e16e50a38d17836da0aa1c49fd6dc",class:t,type:"checkbox",checked:this.checked,disabled:this.disabled,id:this.id,name:this.name}),this.label&&l("label",{key:"cc91cdb86fb6bb4c7bfbabb6d47edf03adb53857",htmlFor:this.id},this.label))}},[0,"xpl-toggle",{checked:[4],description:[1],disabled:[4],heading:[1],label:[1],name:[1],variant:[1],id:[32]}]),d=c,b=function(){"undefined"!=typeof customElements&&["xpl-toggle"].forEach((e=>{"xpl-toggle"===e&&(customElements.get(i(e))||customElements.define(i(e),c))}))};export{d as XplToggle,b as defineCustomElement}

package/dist/components/xpl-toolbar.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,h as o,Host as s,transformTag as a}from"@stencil/core/internal/client";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.selectedItemCount=0}componentDidLoad(){const e=this.el.querySelector('[slot="actions-right"]');null!==e&&(e.style.marginLeft="auto")}listenToSelectedItemCountChange(e){this.selectedItemCount=e.detail.length}render(){return o(s,{key:"eda1f57ef1a207b82f622f090dd30f21d60bbc61",class:{"xpl-toolbar":!0,dark:!0,hidden:0===this.selectedItemCount}},o("div",{key:"fe703bf7fb49ebe27f4eee7973ea1e24c5ed50a4",class:"toolbar"},o("p",{key:"d0d9cb84b4828688aabbabb3395ff3c18c4d2a78",class:"selected-item-count"},this.selectedItemCount," Selected"),o("div",{key:"c1259be179d245e4c18a3690f800eb493f491ba9",class:"actions"},o("slot",{key:"40000dda8efbfd0aa7175e0e5db1c1c9f4e7e89f",name:"actions-left"}),o("slot",{key:"255e21ebb1af8fde1bb76a1a1243eeadc4146d3d",name:"actions-right"}))))}get el(){return this}},[260,"xpl-toolbar",{selectedItemCount:[2,"selected-item-count"]},[[8,"selectedItemCountChange","listenToSelectedItemCountChange"]]]),n=c,l=function(){"undefined"!=typeof customElements&&["xpl-toolbar"].forEach((e=>{"xpl-toolbar"===e&&(customElements.get(a(e))||customElements.define(a(e),c))}))};export{n as XplToolbar,l as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,h as a,Host as o,transformTag as s}from"@stencil/core/internal/client";const c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.selectedItemCount=0}componentDidLoad(){const e=this.el.querySelector('[slot="actions-right"]');null!==e&&(e.style.marginLeft="auto")}listenToSelectedItemCountChange(e){this.selectedItemCount=e.detail.length}render(){return a(o,{key:"156bc52063283c17215e1d3a90c25939ae92685b",class:{"xpl-toolbar":!0,dark:!0,hidden:0===this.selectedItemCount}},a("div",{key:"184e28d57a16d8ba6e10f29a95c931a036f44515",class:"toolbar"},a("p",{key:"ff6a7137db216c71859eac4398bbaf8bc6fe18f9",class:"selected-item-count"},this.selectedItemCount," Selected"),a("div",{key:"a610539a08383a3d1d3dad8d95a8b75f43eaf1a3",class:"actions"},a("slot",{key:"dd8ea3150b40926ab40f36d38770daaa969a6fff",name:"actions-left"}),a("slot",{key:"b51f8940fb52dd6880841a917574f782e0d0c72c",name:"actions-right"}))))}get el(){return this}},[260,"xpl-toolbar",{selectedItemCount:[2,"selected-item-count"]},[[8,"selectedItemCountChange","listenToSelectedItemCountChange"]]]),n=c,l=function(){"undefined"!=typeof customElements&&["xpl-toolbar"].forEach((e=>{"xpl-toolbar"===e&&(customElements.get(s(e))||customElements.define(s(e),c))}))};export{n as XplToolbar,l as defineCustomElement}

package/dist/components/xpl-tooltip2.js

@@ -1 +1 @@
-import{h as e,proxyCustomElement as t,HTMLElement as o,Host as i,transformTag as l}from"@stencil/core/internal/client";const d=()=>e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"17",height:"14"},e("g",{filter:"url(#a)"},e("path",{d:"M0 5h15l-7.5 7.5L0 5Z"})),e("defs",null,e("filter",{id:"a",width:"20",height:"8.171",x:".5",y:"5","color-interpolation-filters":"sRGB",filterUnits:"userSpaceOnUse"},e("feFlood",{"flood-opacity":"0",result:"BackgroundImageFix"}),e("feColorMatrix",{in:"SourceAlpha",result:"hardAlpha",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}),e("feOffset",{dy:"1"}),e("feComposite",{in2:"hardAlpha",operator:"out"}),e("feColorMatrix",{values:"0 0 0 0 0.882353 0 0 0 0 0.886275 0 0 0 0 0.909804 0 0 0 1 0"}),e("feBlend",{in2:"BackgroundImageFix",result:"effect1_dropShadow_20073_3067"}),e("feBlend",{in:"SourceGraphic",in2:"effect1_dropShadow_20073_3067",result:"shape"})))),r=t(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.position="top-middle",this.hideArrow=!1}render(){return e(i,{key:"9890dea245d2fbd24c67fea6e39ce3430ffc8d81"},e("div",{key:"0930c7ee1f0e1f6a625f41e34f31d2432fdff7eb",class:"xpl-tooltip-container"},e("slot",{key:"3b9a8aebce020a13f3d7ef624b59c06e55398907"}),e("div",{key:"50fe33b8bef96df08899b449065558ea8f2ed820",class:`xpl-tooltip xpl-tooltip--${this.position}`},this.text),!this.hideArrow&&e("div",{key:"eddf77e8e8093eff29c5c22fdc3d2b882de4a0ca",class:"xpl-tooltip-arrow"},e(d,{key:"fad3bccade4af1d9734d288c32d7951527398853"}))))}},[260,"xpl-tooltip",{text:[1],position:[1],hideArrow:[4,"hide-arrow"]}]);function s(){"undefined"!=typeof customElements&&["xpl-tooltip"].forEach((e=>{"xpl-tooltip"===e&&(customElements.get(l(e))||customElements.define(l(e),r))}))}export{r as T,s as d}
+import{h as e,proxyCustomElement as t,HTMLElement as o,Host as a,transformTag as i}from"@stencil/core/internal/client";const l=()=>e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"17",height:"14"},e("g",{filter:"url(#a)"},e("path",{d:"M0 5h15l-7.5 7.5L0 5Z"})),e("defs",null,e("filter",{id:"a",width:"20",height:"8.171",x:".5",y:"5","color-interpolation-filters":"sRGB",filterUnits:"userSpaceOnUse"},e("feFlood",{"flood-opacity":"0",result:"BackgroundImageFix"}),e("feColorMatrix",{in:"SourceAlpha",result:"hardAlpha",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}),e("feOffset",{dy:"1"}),e("feComposite",{in2:"hardAlpha",operator:"out"}),e("feColorMatrix",{values:"0 0 0 0 0.882353 0 0 0 0 0.886275 0 0 0 0 0.909804 0 0 0 1 0"}),e("feBlend",{in2:"BackgroundImageFix",result:"effect1_dropShadow_20073_3067"}),e("feBlend",{in:"SourceGraphic",in2:"effect1_dropShadow_20073_3067",result:"shape"})))),r=t(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.position="top-middle",this.hideArrow=!1}render(){return e(a,{key:"a118d629923a433680360f746e063ca94d5f1c6a"},e("div",{key:"cfd9742ee2cebd56994480bd2a601cb4e93b12a9",class:"xpl-tooltip-container"},e("slot",{key:"8aae99e1a187f8f737e896ccfd00d67f1cfeb3b3"}),e("div",{key:"4b418074b2ac7f8760f09e3af033ea93f7a0012e",class:`xpl-tooltip xpl-tooltip--${this.position}`},this.text),!this.hideArrow&&e("div",{key:"ef6a166f78250f1f98eae41661fd7020b36eeaae",class:"xpl-tooltip-arrow"},e(l,{key:"7baecae00ab178f715c89443d250b068861afe5f"}))))}},[260,"xpl-tooltip",{text:[1],position:[1],hideArrow:[4,"hide-arrow"]}]);function s(){"undefined"!=typeof customElements&&["xpl-tooltip"].forEach((e=>{"xpl-tooltip"===e&&(customElements.get(i(e))||customElements.define(i(e),r))}))}export{r as T,s as d}

package/dist/components/xpl-top-nav-item2.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as i,createEvent as s,h as e,Host as o,transformTag as n}from"@stencil/core/internal/client";import{d as l}from"./xpl-icon2.js";const r=t(class t extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.navItemClick=s(this,"navItemClick",7),this.hasDropdown=!1,this.hostListitemRole=!1,this.open=!1,this.active=!1,this.icon="",this.selected=!1,this.onDocClickCapture=t=>{if(!this.hasDropdown||!this.open)return;const i=t.target;i&&!this.el.contains(i)&&(this.open=!1)},this.onDocKeyDownCapture=t=>{this.hasDropdown&&this.open&&"Escape"===t.key&&(t.preventDefault(),t.stopPropagation(),this.open=!1)},this.handleClick=t=>{if(this.hasDropdown)return t.preventDefault(),t.stopPropagation(),this.broadcastCloseOtherDropdownHosts(),void(this.open=!this.open);this.navItemClick.emit(t)},this.handleKeyDown=t=>{if(null!=this.href&&!this.hasDropdown){if("Enter"===t.key)return;if(" "===t.key){t.preventDefault();const i=this.el.querySelector(".xpl-top-nav-item__inner");return void(null==i||i.click())}}"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleClick(this.syntheticActivationClickFromKeyboard(t)))}}onHasDropdownChanged(){this.hasDropdown||(this.open=!1),this.syncDropdownDocListeners()}connectedCallback(){this.syncHostListitemRole(),this.syncHasDropdownFromDom(),this.syncDropdownDocListeners(),this.connectDropdownSlotObserver()}disconnectedCallback(){void 0!==this.deferredHasDropdownObserverSyncTimeoutId&&(clearTimeout(this.deferredHasDropdownObserverSyncTimeoutId),this.deferredHasDropdownObserverSyncTimeoutId=void 0),void 0!==this.deferredPostRenderTopNavItemTimeoutId&&(clearTimeout(this.deferredPostRenderTopNavItemTimeoutId),this.deferredPostRenderTopNavItemTimeoutId=void 0),this.disconnectDropdownSlotObserver(),this.disconnectListitemContextObservers();const t=this.el.ownerDocument;t.removeEventListener("click",this.onDocClickCapture,!0),t.removeEventListener("keydown",this.onDocKeyDownCapture,!0)}componentWillLoad(){this.syncHostListitemRole(),this.syncHasDropdownFromDom(),this.syncDropdownDocListeners()}componentWillRender(){this.disconnectDropdownSlotObserver(),this.disconnectListitemContextObservers()}componentDidRender(){this.schedulePostRenderTopNavItemWork()}handleCloseNavDropdownRequest(){this.hasDropdown&&this.open&&(this.open=!1)}scheduleHasDropdownSyncFromObserver(){void 0!==this.deferredHasDropdownObserverSyncTimeoutId&&clearTimeout(this.deferredHasDropdownObserverSyncTimeoutId),this.deferredHasDropdownObserverSyncTimeoutId=setTimeout((()=>{this.deferredHasDropdownObserverSyncTimeoutId=void 0,this.el.isConnected&&this.syncHasDropdownFromDom()}),0)}connectDropdownSlotObserver(){this.disconnectDropdownSlotObserver(),"undefined"!=typeof MutationObserver&&(this.dropdownSlotObserver=new MutationObserver((()=>{this.scheduleHasDropdownSyncFromObserver()})),this.dropdownSlotObserver.observe(this.el,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot"]}))}disconnectDropdownSlotObserver(){var t;null===(t=this.dropdownSlotObserver)||void 0===t||t.disconnect(),this.dropdownSlotObserver=void 0}disconnectListitemContextObservers(){var t,i;null===(t=this.parentListitemContextObserver)||void 0===t||t.disconnect(),this.parentListitemContextObserver=void 0,null===(i=this.selfListitemContextObserver)||void 0===i||i.disconnect(),this.selfListitemContextObserver=void 0}connectListitemContextObservers(){if(this.disconnectListitemContextObservers(),"undefined"==typeof MutationObserver||!this.el.isConnected)return;this.selfListitemContextObserver=new MutationObserver((()=>{this.schedulePostRenderTopNavItemWork()})),this.selfListitemContextObserver.observe(this.el,{attributes:!0,attributeFilter:["class","slot"]});const t=this.el.parentElement;if(t){this.parentListitemContextObserver=new MutationObserver((()=>{this.schedulePostRenderTopNavItemWork()}));const i="xpl-top-nav"===t.tagName.toLowerCase()&&"left-aside"===this.el.getAttribute("slot")?t.querySelector(".xpl-top-nav__left-primary"):null;this.parentListitemContextObserver.observe(null!=i?i:t,{attributes:!0,attributeFilter:["role"],subtree:!1})}}schedulePostRenderTopNavItemWork(){void 0!==this.deferredPostRenderTopNavItemTimeoutId&&clearTimeout(this.deferredPostRenderTopNavItemTimeoutId),this.deferredPostRenderTopNavItemTimeoutId=setTimeout((()=>{this.deferredPostRenderTopNavItemTimeoutId=void 0,this.el.isConnected&&(this.syncHostListitemRole(),this.connectListitemContextObservers(),this.connectDropdownSlotObserver())}),0)}syncDropdownDocListeners(){const t=this.el.ownerDocument;t.removeEventListener("click",this.onDocClickCapture,!0),t.removeEventListener("keydown",this.onDocKeyDownCapture,!0),this.hasDropdown&&(t.addEventListener("click",this.onDocClickCapture,!0),t.addEventListener("keydown",this.onDocKeyDownCapture,!0))}syncHasDropdownFromDom(){this.hasDropdown=!!this.el.querySelector('[slot="dropdown"]')}getNavDropdownBroadcastRoot(){var t,i;return null!==(i=null!==(t=this.el.closest("xpl-top-nav"))&&void 0!==t?t:this.el.closest("xpl-nav-header-menu"))&&void 0!==i?i:this.el.ownerDocument}broadcastCloseOtherDropdownHosts(){this.getNavDropdownBroadcastRoot().querySelectorAll("xpl-top-nav-item").forEach((t=>{t!==this.el&&t.dispatchEvent(new CustomEvent("_xplCloseNavDropdown",{bubbles:!1}))}))}syntheticActivationClickFromKeyboard(t){var i;const s=this.el.querySelector(".xpl-top-nav-item__inner"),e=null==s?void 0:s.getBoundingClientRect();return new MouseEvent("click",{bubbles:!0,cancelable:!0,button:0,clientX:e?e.left+e.width/2:0,clientY:e?e.top+e.height/2:0,view:null!==(i=t.view)&&void 0!==i?i:void 0})}static isInternalRenderedHostChild(t){return t.classList.contains("xpl-top-nav-item__inner")||t.classList.contains("xpl-top-nav-item__dropdown")}hasNonDropdownLightDomChild(){return Array.from(this.el.childNodes).some((i=>{var s;if(i.nodeType===Node.TEXT_NODE)return Boolean(null===(s=i.textContent)||void 0===s?void 0:s.trim());if(i.nodeType===Node.ELEMENT_NODE){const s=i;return!t.isInternalRenderedHostChild(s)&&"dropdown"!==s.getAttribute("slot")}return!1}))}getInnerAriaLabel(){var t,i,s;if(null===(t=this.label)||void 0===t?void 0:t.trim())return;if(this.hasNonDropdownLightDomChild())return;return(null===(i=this.itemAriaLabel)||void 0===i?void 0:i.trim())||((null===(s=this.icon)||void 0===s?void 0:s.trim())?"Navigation item":void 0)}computeHostListitemRole(){const{el:t}=this;if(t.classList.contains("xpl-top-nav__brand"))return!1;if("right-aside-mobile"===t.getAttribute("slot"))return!1;const i=t.parentElement;return"list"===(null==i?void 0:i.getAttribute("role"))||null!=i&&"xpl-nav-header-menu"===i.tagName.toLowerCase()||"left-aside"===t.getAttribute("slot")&&"xpl-top-nav"===(null==i?void 0:i.tagName.toLowerCase())&&null!=i.querySelector('.xpl-top-nav__left-primary[role="list"]')}syncHostListitemRole(){const t=this.computeHostListitemRole();this.hostListitemRole!==t&&(this.hostListitemRole=t)}renderInner(){const t=this.selected?"page":void 0,i=this.hasDropdown?this.open?"true":"false":void 0,s=this.getInnerAriaLabel(),o=Object.assign(Object.assign({class:"xpl-top-nav-item__inner",tabIndex:0,"aria-current":t,"aria-expanded":i},s?{"aria-label":s}:{}),{onClick:this.handleClick,onKeyDown:this.handleKeyDown});return null==this.href||this.hasDropdown?e("div",Object.assign({},o,{role:"button"}),this.icon&&e("xpl-icon",{size:16,icon:this.icon}),this.label?e("span",{class:"xpl-top-nav-item__label",title:this.label},this.label):e("slot",null),this.hasDropdown&&e("xpl-icon",{icon:"chevron-down"})):e("a",Object.assign({},o,{href:this.href}),this.icon&&e("xpl-icon",{size:16,icon:this.icon}),this.label?e("span",{class:"xpl-top-nav-item__label",title:this.label},this.label):e("slot",null))}render(){return e(o,Object.assign({key:"391dd693aabff902ffd5de50d710d3fab06573e2",class:{"xpl-top-nav-item":!0,"xpl-top-nav-item--active":this.active,"xpl-top-nav-item--dropdown-open":this.open,"xpl-top-nav-item--has-dropdown":this.hasDropdown,"xpl-top-nav-item--selected":this.selected,dark:!0}},this.hostListitemRole?{role:"listitem"}:{}),this.renderInner(),this.hasDropdown&&e("div",{key:"c5d5239d0279722d5a78bc7436a3ebb9247f904d",class:"xpl-top-nav-item__dropdown"},e("slot",{key:"f0a735798a09218822fd14174d0c845014c5e557",name:"dropdown"})))}get el(){return this}static get watchers(){return{hasDropdown:[{onHasDropdownChanged:0}]}}},[260,"xpl-top-nav-item",{active:[516],href:[1],icon:[1],itemAriaLabel:[1,"item-aria-label"],label:[1],selected:[516],hasDropdown:[32],hostListitemRole:[32],open:[32]},[[0,"_xplCloseNavDropdown","handleCloseNavDropdownRequest"]],{hasDropdown:[{onHasDropdownChanged:0}]}]);function h(){"undefined"!=typeof customElements&&["xpl-top-nav-item","xpl-icon"].forEach((t=>{switch(t){case"xpl-top-nav-item":customElements.get(n(t))||customElements.define(n(t),r);break;case"xpl-icon":customElements.get(n(t))||l()}}))}export{r as T,h as d}
+import{proxyCustomElement as t,HTMLElement as i,createEvent as s,h as e,Host as o,transformTag as n}from"@stencil/core/internal/client";import{d as l}from"./xpl-icon2.js";const r=t(class t extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.navItemClick=s(this,"navItemClick",7),this.hasDropdown=!1,this.hostListitemRole=!1,this.open=!1,this.active=!1,this.icon="",this.selected=!1,this.onDocClickCapture=t=>{if(!this.hasDropdown||!this.open)return;const i=t.target;i&&!this.el.contains(i)&&(this.open=!1)},this.onDocKeyDownCapture=t=>{this.hasDropdown&&this.open&&"Escape"===t.key&&(t.preventDefault(),t.stopPropagation(),this.open=!1)},this.handleClick=t=>{if(this.hasDropdown)return t.preventDefault(),t.stopPropagation(),this.broadcastCloseOtherDropdownHosts(),void(this.open=!this.open);this.navItemClick.emit(t)},this.handleKeyDown=t=>{if(null!=this.href&&!this.hasDropdown){if("Enter"===t.key)return;if(" "===t.key){t.preventDefault();const i=this.el.querySelector(".xpl-top-nav-item__inner");return void(null==i||i.click())}}"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleClick(this.syntheticActivationClickFromKeyboard(t)))}}onHasDropdownChanged(){this.hasDropdown||(this.open=!1),this.syncDropdownDocListeners()}connectedCallback(){this.syncHostListitemRole(),this.syncHasDropdownFromDom(),this.syncDropdownDocListeners(),this.connectDropdownSlotObserver()}disconnectedCallback(){void 0!==this.deferredHasDropdownObserverSyncTimeoutId&&(clearTimeout(this.deferredHasDropdownObserverSyncTimeoutId),this.deferredHasDropdownObserverSyncTimeoutId=void 0),void 0!==this.deferredPostRenderTopNavItemTimeoutId&&(clearTimeout(this.deferredPostRenderTopNavItemTimeoutId),this.deferredPostRenderTopNavItemTimeoutId=void 0),this.disconnectDropdownSlotObserver(),this.disconnectListitemContextObservers();const t=this.el.ownerDocument;t.removeEventListener("click",this.onDocClickCapture,!0),t.removeEventListener("keydown",this.onDocKeyDownCapture,!0)}componentWillLoad(){this.syncHostListitemRole(),this.syncHasDropdownFromDom(),this.syncDropdownDocListeners()}componentWillRender(){this.disconnectDropdownSlotObserver(),this.disconnectListitemContextObservers()}componentDidRender(){this.schedulePostRenderTopNavItemWork()}handleCloseNavDropdownRequest(){this.hasDropdown&&this.open&&(this.open=!1)}scheduleHasDropdownSyncFromObserver(){void 0!==this.deferredHasDropdownObserverSyncTimeoutId&&clearTimeout(this.deferredHasDropdownObserverSyncTimeoutId),this.deferredHasDropdownObserverSyncTimeoutId=setTimeout((()=>{this.deferredHasDropdownObserverSyncTimeoutId=void 0,this.el.isConnected&&this.syncHasDropdownFromDom()}),0)}connectDropdownSlotObserver(){this.disconnectDropdownSlotObserver(),"undefined"!=typeof MutationObserver&&(this.dropdownSlotObserver=new MutationObserver((()=>{this.scheduleHasDropdownSyncFromObserver()})),this.dropdownSlotObserver.observe(this.el,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot"]}))}disconnectDropdownSlotObserver(){var t;null===(t=this.dropdownSlotObserver)||void 0===t||t.disconnect(),this.dropdownSlotObserver=void 0}disconnectListitemContextObservers(){var t,i;null===(t=this.parentListitemContextObserver)||void 0===t||t.disconnect(),this.parentListitemContextObserver=void 0,null===(i=this.selfListitemContextObserver)||void 0===i||i.disconnect(),this.selfListitemContextObserver=void 0}connectListitemContextObservers(){if(this.disconnectListitemContextObservers(),"undefined"==typeof MutationObserver||!this.el.isConnected)return;this.selfListitemContextObserver=new MutationObserver((()=>{this.schedulePostRenderTopNavItemWork()})),this.selfListitemContextObserver.observe(this.el,{attributes:!0,attributeFilter:["class","slot"]});const t=this.el.parentElement;if(t){this.parentListitemContextObserver=new MutationObserver((()=>{this.schedulePostRenderTopNavItemWork()}));const i="xpl-top-nav"===t.tagName.toLowerCase()&&"left-aside"===this.el.getAttribute("slot")?t.querySelector(".xpl-top-nav__left-primary"):null;this.parentListitemContextObserver.observe(null!=i?i:t,{attributes:!0,attributeFilter:["role"],subtree:!1})}}schedulePostRenderTopNavItemWork(){void 0!==this.deferredPostRenderTopNavItemTimeoutId&&clearTimeout(this.deferredPostRenderTopNavItemTimeoutId),this.deferredPostRenderTopNavItemTimeoutId=setTimeout((()=>{this.deferredPostRenderTopNavItemTimeoutId=void 0,this.el.isConnected&&(this.syncHostListitemRole(),this.connectListitemContextObservers(),this.connectDropdownSlotObserver())}),0)}syncDropdownDocListeners(){const t=this.el.ownerDocument;t.removeEventListener("click",this.onDocClickCapture,!0),t.removeEventListener("keydown",this.onDocKeyDownCapture,!0),this.hasDropdown&&(t.addEventListener("click",this.onDocClickCapture,!0),t.addEventListener("keydown",this.onDocKeyDownCapture,!0))}syncHasDropdownFromDom(){this.hasDropdown=!!this.el.querySelector('[slot="dropdown"]')}getNavDropdownBroadcastRoot(){var t,i;return null!==(i=null!==(t=this.el.closest("xpl-top-nav"))&&void 0!==t?t:this.el.closest("xpl-nav-header-menu"))&&void 0!==i?i:this.el.ownerDocument}broadcastCloseOtherDropdownHosts(){this.getNavDropdownBroadcastRoot().querySelectorAll("xpl-top-nav-item").forEach((t=>{t!==this.el&&t.dispatchEvent(new CustomEvent("_xplCloseNavDropdown",{bubbles:!1}))}))}syntheticActivationClickFromKeyboard(t){var i;const s=this.el.querySelector(".xpl-top-nav-item__inner"),e=null==s?void 0:s.getBoundingClientRect();return new MouseEvent("click",{bubbles:!0,cancelable:!0,button:0,clientX:e?e.left+e.width/2:0,clientY:e?e.top+e.height/2:0,view:null!==(i=t.view)&&void 0!==i?i:void 0})}static isInternalRenderedHostChild(t){return t.classList.contains("xpl-top-nav-item__inner")||t.classList.contains("xpl-top-nav-item__dropdown")}hasNonDropdownLightDomChild(){return Array.from(this.el.childNodes).some((i=>{var s;if(i.nodeType===Node.TEXT_NODE)return Boolean(null===(s=i.textContent)||void 0===s?void 0:s.trim());if(i.nodeType===Node.ELEMENT_NODE){const s=i;return!t.isInternalRenderedHostChild(s)&&"dropdown"!==s.getAttribute("slot")}return!1}))}getInnerAriaLabel(){var t,i,s;if(null===(t=this.label)||void 0===t?void 0:t.trim())return;if(this.hasNonDropdownLightDomChild())return;return(null===(i=this.itemAriaLabel)||void 0===i?void 0:i.trim())||((null===(s=this.icon)||void 0===s?void 0:s.trim())?"Navigation item":void 0)}computeHostListitemRole(){const{el:t}=this;if(t.classList.contains("xpl-top-nav__brand"))return!1;if("right-aside-mobile"===t.getAttribute("slot"))return!1;const i=t.parentElement;return"list"===(null==i?void 0:i.getAttribute("role"))||null!=i&&"xpl-nav-header-menu"===i.tagName.toLowerCase()||"left-aside"===t.getAttribute("slot")&&"xpl-top-nav"===(null==i?void 0:i.tagName.toLowerCase())&&null!=i.querySelector('.xpl-top-nav__left-primary[role="list"]')}syncHostListitemRole(){const t=this.computeHostListitemRole();this.hostListitemRole!==t&&(this.hostListitemRole=t)}renderInner(){const t=this.selected?"page":void 0,i=this.hasDropdown?this.open?"true":"false":void 0,s=this.getInnerAriaLabel(),o=Object.assign(Object.assign({class:"xpl-top-nav-item__inner",tabIndex:0,"aria-current":t,"aria-expanded":i},s?{"aria-label":s}:{}),{onClick:this.handleClick,onKeyDown:this.handleKeyDown});return null==this.href||this.hasDropdown?e("div",Object.assign({},o,{role:"button"}),this.icon&&e("xpl-icon",{size:16,icon:this.icon}),this.label?e("span",{class:"xpl-top-nav-item__label",title:this.label},this.label):e("slot",null),this.hasDropdown&&e("xpl-icon",{icon:"chevron-down"})):e("a",Object.assign({},o,{href:this.href}),this.icon&&e("xpl-icon",{size:16,icon:this.icon}),this.label?e("span",{class:"xpl-top-nav-item__label",title:this.label},this.label):e("slot",null))}render(){return e(o,Object.assign({key:"4758b54726318591f140bcfea8d4db22c70c96ff",class:{"xpl-top-nav-item":!0,"xpl-top-nav-item--active":this.active,"xpl-top-nav-item--dropdown-open":this.open,"xpl-top-nav-item--has-dropdown":this.hasDropdown,"xpl-top-nav-item--selected":this.selected,dark:!0}},this.hostListitemRole?{role:"listitem"}:{}),this.renderInner(),this.hasDropdown&&e("div",{key:"65f53889e4815fb974d7abe12d13dd8be19c1943",class:"xpl-top-nav-item__dropdown"},e("slot",{key:"2f4f164deaec561be73a13e2303cc13e037699bb",name:"dropdown"})))}get el(){return this}static get watchers(){return{hasDropdown:[{onHasDropdownChanged:0}]}}},[260,"xpl-top-nav-item",{active:[516],href:[1],icon:[1],itemAriaLabel:[1,"item-aria-label"],label:[1],selected:[516],hasDropdown:[32],hostListitemRole:[32],open:[32]},[[0,"_xplCloseNavDropdown","handleCloseNavDropdownRequest"]],{hasDropdown:[{onHasDropdownChanged:0}]}]);function h(){"undefined"!=typeof customElements&&["xpl-top-nav-item","xpl-icon"].forEach((t=>{switch(t){case"xpl-top-nav-item":customElements.get(n(t))||customElements.define(n(t),r);break;case"xpl-icon":customElements.get(n(t))||l()}}))}export{r as T,h as d}

package/dist/components/xpl-top-nav.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as n,transformTag as o}from"@stencil/core/internal/client";import{d as a}from"./xpl-button2.js";import{d as l}from"./xpl-icon2.js";import{d as r}from"./xpl-popover2.js";import{d as h}from"./xpl-top-nav-item2.js";const c=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.brandClick=s(this,"brandClick",7),this.navOpen=s(this,"navOpen",7),this.userPopoverDrawerSyncHost=null,this.brandLogoSlotPresent=!1,this.open=!1,this.userMenuSlotPresent=!1,this.userMenuTriggerSlotPresent=!1,this.focusNavControlAfterClose=()=>{void 0!==this.navControlFocusTimeoutId&&clearTimeout(this.navControlFocusTimeoutId),this.navControlFocusTimeoutId=setTimeout((()=>{var t;this.navControlFocusTimeoutId=void 0,null===(t=this.el.querySelector(".xpl-top-nav__nav-control"))||void 0===t||t.focus()}),0)},this.handleUserPopoverIsOpenChange=t=>{const{detail:e}=t;!0===e&&this.closeMobileDrawerWhenAccountMenuOpens()},this.onBrandNavItemClick=t=>{null==this.brandHref&&this.brandClick.emit(t.detail)},this.onDocKeyDownEscape=t=>{this.navControl&&this.open&&"Escape"===t.key&&(this.anyDescendantPopoverIsOpen()||this.el.querySelector("xpl-top-nav-item.xpl-top-nav-item--dropdown-open")||(t.preventDefault(),t.stopPropagation(),this.open=!1,this.navOpen.emit(!1),this.focusNavControlAfterClose()))},this.onNavToggle=()=>{const t=this.open;this.open=!this.open,this.navOpen.emit(this.open),t&&!this.open&&this.focusNavControlAfterClose()},this.onUserPopoverInnerOpenClassChange=()=>{const t=this.userPopoverDrawerSyncHost;if(!t)return;const e=t.querySelector(".xpl-popover");(null==e?void 0:e.classList.contains("xpl-popover--is-open"))&&this.closeMobileDrawerWhenAccountMenuOpens()},this.syncBrandLogoSlot=()=>{const t=null!=this.el.querySelector('[slot="brand-logo"]');t!==this.brandLogoSlotPresent&&(this.brandLogoSlotPresent=t)},this.syncUserMenuSlots=()=>{const t=null!=this.el.querySelector('[slot="user-menu"]'),e=null!=this.el.querySelector('[slot="user-menu-trigger"]');t!==this.userMenuSlotPresent&&(this.userMenuSlotPresent=t),e!==this.userMenuTriggerSlotPresent&&(this.userMenuTriggerSlotPresent=e)}}onNavControlChanged(){this.syncOpenFromNavControl(),this.syncDocEscapeListener()}connectedCallback(){this.syncOpenFromNavControl(),this.syncDocEscapeListener(),this.syncBrandLogoSlot(),this.syncUserMenuSlots(),this.connectSlotContentObserver()}disconnectedCallback(){void 0!==this.navControlFocusTimeoutId&&(clearTimeout(this.navControlFocusTimeoutId),this.navControlFocusTimeoutId=void 0),void 0!==this.deferredSlotContentObserverSyncTimeoutId&&(clearTimeout(this.deferredSlotContentObserverSyncTimeoutId),this.deferredSlotContentObserverSyncTimeoutId=void 0),this.removeDocEscapeListener(),this.disconnectSlotContentObserver(),this.disconnectUserPopoverDrawerSync()}componentWillLoad(){this.syncOpenFromNavControl(),this.syncBrandLogoSlot(),this.syncUserMenuSlots()}componentWillRender(){this.disconnectSlotContentObserver()}componentDidRender(){this.connectSlotContentObserver(),this.connectUserPopoverDrawerSync()}get childAccountLabelText(){var t,e;return null!==(e=null===(t=this.childAccountLabel)||void 0===t?void 0:t.trim())&&void 0!==e?e:""}get hasBrand(){var t,e,s,i;const n=null!==(e=null===(t=this.brandName)||void 0===t?void 0:t.trim())&&void 0!==e?e:"",o=null!==(i=null===(s=this.brandLogo)||void 0===s?void 0:s.trim())&&void 0!==i?i:"";return n.length>0||o.length>0||this.brandLogoSlotPresent}get hasUserMenu(){return this.userMenuSlotPresent}get needsUserMenuSlotStash(){return!this.userMenuSlotPresent&&this.userMenuTriggerSlotPresent}get usesBuiltInChildAccountTrigger(){return this.hasUserMenu&&!this.userMenuTriggerSlotPresent}anyDescendantPopoverIsOpen(){const t=this.el.querySelectorAll("xpl-popover");for(let e=0;e<t.length;e+=1){const s=t[e].querySelector(".xpl-popover");if(null==s?void 0:s.classList.contains("xpl-popover--is-open"))return!0}return!1}closeMobileDrawerWhenAccountMenuOpens(){this.navControl&&this.open&&(this.open=!1,this.navOpen.emit(!1))}connectSlotContentObserver(){this.disconnectSlotContentObserver(),"undefined"!=typeof MutationObserver&&(this.slotContentObserver=new MutationObserver((()=>{this.scheduleSlotContentSyncFromObserver()})),this.slotContentObserver.observe(this.el,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot"]}))}connectUserPopoverDrawerSync(){const t=this.hasUserMenu?this.el.querySelector("xpl-popover.xpl-top-nav__user-popover"):null;if(t===this.userPopoverDrawerSyncHost)return;if(this.disconnectUserPopoverDrawerSync(),!t)return;this.userPopoverDrawerSyncHost=t,t.addEventListener("isOpenChange",this.handleUserPopoverIsOpenChange);const e=t.querySelector(".xpl-popover");e&&"undefined"!=typeof MutationObserver&&(this.userPopoverDrawerOpenObserver=new MutationObserver((()=>{this.onUserPopoverInnerOpenClassChange()})),this.userPopoverDrawerOpenObserver.observe(e,{attributes:!0,attributeFilter:["class"]}),this.onUserPopoverInnerOpenClassChange())}disconnectSlotContentObserver(){var t;null===(t=this.slotContentObserver)||void 0===t||t.disconnect(),this.slotContentObserver=void 0}disconnectUserPopoverDrawerSync(){var t;this.userPopoverDrawerSyncHost&&(this.userPopoverDrawerSyncHost.removeEventListener("isOpenChange",this.handleUserPopoverIsOpenChange),this.userPopoverDrawerSyncHost=null),null===(t=this.userPopoverDrawerOpenObserver)||void 0===t||t.disconnect(),this.userPopoverDrawerOpenObserver=void 0}removeDocEscapeListener(){this.el.ownerDocument.removeEventListener("keydown",this.onDocKeyDownEscape,!1)}scheduleSlotContentSyncFromObserver(){void 0!==this.deferredSlotContentObserverSyncTimeoutId&&clearTimeout(this.deferredSlotContentObserverSyncTimeoutId),this.deferredSlotContentObserverSyncTimeoutId=setTimeout((()=>{this.deferredSlotContentObserverSyncTimeoutId=void 0,this.el.isConnected&&(this.syncBrandLogoSlot(),this.syncUserMenuSlots())}),0)}syncDocEscapeListener(){this.removeDocEscapeListener(),this.navControl&&this.el.ownerDocument.addEventListener("keydown",this.onDocKeyDownEscape,!1)}syncOpenFromNavControl(){const t=this.open;this.open=!1,t&&!this.navControl&&this.navOpen.emit(!1)}render(){var t,e,s,o;return i(n,{key:"7b9229d9aaa6e462102694f2af4cac513c0a897d",class:{"xpl-top-nav":!0,"xpl-top-nav--nav-control":!!this.navControl,"xpl-top-nav--open":this.open,"xpl-top-nav--has-child-account-label":this.childAccountLabelText.length>0,"xpl-top-nav--has-brand":this.hasBrand,"xpl-top-nav--has-user-menu":this.hasUserMenu,dark:!0}},i("nav",{key:"15e65c606ec67d5dcb3de7e14dbbb2983d23f097","aria-label":null!==(t=this.label)&&void 0!==t?t:"top-navigation-bar",class:"xpl-top-nav__bar"},i("div",{key:"4dcd01744fac5acfd8370da93d3343fc9be1762c",class:"xpl-top-nav__inner-left"},this.navControl&&i("button",{key:"07bd342a80a412922a6d22a789694e2457312e1d",type:"button",class:"xpl-top-nav__nav-control","aria-expanded":this.open?"true":"false","aria-label":this.open?"Close navigation menu":"Open navigation menu",onClick:this.onNavToggle},i("xpl-icon",{key:"1a69e0dac8d98b1331676e9e69fa76cac7a55de5",class:"xpl-top-nav__control-icon",icon:"menu",size:20})),this.hasBrand&&i("div",{key:"5af668cb6533a3f1e91101a1179c614215e3f431",class:"xpl-top-nav__brand-bar"},i("xpl-top-nav-item",{key:"f77e07635deb49f7db37fd965b389f5a3d379864",class:"xpl-top-nav__brand",href:this.brandHref,onNavItemClick:this.onBrandNavItemClick},(null===(e=this.brandLogo)||void 0===e?void 0:e.trim())?i("img",{class:"xpl-top-nav__brand-logo",src:this.brandLogo,alt:(null===(s=this.brandName)||void 0===s?void 0:s.trim())?this.brandName.trim():"Brand"}):this.brandLogoSlotPresent?i("span",{class:"xpl-top-nav__brand-logo-slot"},i("slot",{name:"brand-logo"})):null,(null===(o=this.brandName)||void 0===o?void 0:o.trim())?i("span",{class:"xpl-top-nav__brand-name"},this.brandName.trim()):null)),i("div",{key:"f349c1fa2021e705602eed288e83db9a5dade455",class:{"xpl-top-nav__aside":!0,"xpl-nav-left":!0}},i("div",{key:"718718595ec839e0aef4f703f766d1bedfd65c6b",class:"xpl-top-nav__left-primary",role:"list"},i("slot",{key:"ebcb856dc7c6bc247877a1306350073f9990ff18",name:"left-aside"})))),i("div",{key:"e582c5e3799d471b358c48c34d5c629a5b6db44d",class:{"xpl-top-nav__aside":!0,"xpl-nav-right":!0}},i("div",{key:"eda8ef4e6252b5c7362f1e30e15f9f60df2e77d6",class:"xpl-nav-right__list"},i("div",{key:"f99115361d8ec8e8c964f434b1c713488ece962a",class:"xpl-top-nav__right-rail"},i("div",{key:"0eeea604e76f47ee71c7e2310f7a4764aa47bf39",class:"xpl-top-nav__right-lead"},i("slot",{key:"d4fd4fa67af3bc6dbdb4b641e24603fcfc14e920",name:"right-aside"})),this.hasUserMenu?i("div",{class:"xpl-top-nav__right-user"},i("xpl-popover",{class:"xpl-top-nav__user-popover dark",position:"bottom-end",display:"menu"},this.userMenuTriggerSlotPresent?i("slot",{name:"user-menu-trigger",slot:"trigger"}):this.usesBuiltInChildAccountTrigger?i("xpl-button",{slot:"trigger",class:"xpl-top-nav__child-account-trigger",type:"button",variant:"tertiary",icon:"chevron-down",iconPosition:"end",iconOnly:0===this.childAccountLabelText.length,"aria-haspopup":"dialog","aria-label":this.childAccountLabelText.length>0?void 0:"Open account menu"},this.childAccountLabelText.length>0?this.childAccountLabelText:null):null,i("div",{class:"xpl-top-nav__user-menu-panel"},i("slot",{name:"user-menu"})))):null,this.needsUserMenuSlotStash?i("div",{class:"xpl-top-nav__user-menu-stash",hidden:!0,"aria-hidden":"true"},i("slot",{name:"user-menu-trigger"}),i("slot",{name:"user-menu"})):null)))))}get el(){return this}static get watchers(){return{navControl:[{onNavControlChanged:0}]}}},[260,"xpl-top-nav",{brandHref:[1,"brand-href"],brandLogo:[1,"brand-logo"],brandName:[1,"brand-name"],childAccountLabel:[1,"child-account-label"],label:[1],navControl:[516,"nav-control"],brandLogoSlotPresent:[32],open:[32],userMenuSlotPresent:[32],userMenuTriggerSlotPresent:[32]},void 0,{navControl:[{onNavControlChanged:0}]}]),p=c,d=function(){"undefined"!=typeof customElements&&["xpl-top-nav","xpl-button","xpl-icon","xpl-popover","xpl-top-nav-item"].forEach((t=>{switch(t){case"xpl-top-nav":customElements.get(o(t))||customElements.define(o(t),c);break;case"xpl-button":customElements.get(o(t))||a();break;case"xpl-icon":customElements.get(o(t))||l();break;case"xpl-popover":customElements.get(o(t))||r();break;case"xpl-top-nav-item":customElements.get(o(t))||h()}}))};export{p as XplTopNav,d as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as s,createEvent as e,h as i,Host as n,transformTag as o}from"@stencil/core/internal/client";import{d as a}from"./xpl-button2.js";import{d as l}from"./xpl-icon2.js";import{d as r}from"./xpl-popover2.js";import{d as h}from"./xpl-top-nav-item2.js";const c=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.brandClick=e(this,"brandClick",7),this.navOpen=e(this,"navOpen",7),this.userPopoverDrawerSyncHost=null,this.brandLogoSlotPresent=!1,this.open=!1,this.userMenuSlotPresent=!1,this.userMenuTriggerSlotPresent=!1,this.focusNavControlAfterClose=()=>{void 0!==this.navControlFocusTimeoutId&&clearTimeout(this.navControlFocusTimeoutId),this.navControlFocusTimeoutId=setTimeout((()=>{var t;this.navControlFocusTimeoutId=void 0,null===(t=this.el.querySelector(".xpl-top-nav__nav-control"))||void 0===t||t.focus()}),0)},this.handleUserPopoverIsOpenChange=t=>{const{detail:s}=t;!0===s&&this.closeMobileDrawerWhenAccountMenuOpens()},this.onBrandNavItemClick=t=>{null==this.brandHref&&this.brandClick.emit(t.detail)},this.onDocKeyDownEscape=t=>{this.navControl&&this.open&&"Escape"===t.key&&(this.anyDescendantPopoverIsOpen()||this.el.querySelector("xpl-top-nav-item.xpl-top-nav-item--dropdown-open")||(t.preventDefault(),t.stopPropagation(),this.open=!1,this.navOpen.emit(!1),this.focusNavControlAfterClose()))},this.onNavToggle=()=>{const t=this.open;this.open=!this.open,this.navOpen.emit(this.open),t&&!this.open&&this.focusNavControlAfterClose()},this.onUserPopoverInnerOpenClassChange=()=>{const t=this.userPopoverDrawerSyncHost;if(!t)return;const s=t.querySelector(".xpl-popover");(null==s?void 0:s.classList.contains("xpl-popover--is-open"))&&this.closeMobileDrawerWhenAccountMenuOpens()},this.syncBrandLogoSlot=()=>{const t=null!=this.el.querySelector('[slot="brand-logo"]');t!==this.brandLogoSlotPresent&&(this.brandLogoSlotPresent=t)},this.syncUserMenuSlots=()=>{const t=null!=this.el.querySelector('[slot="user-menu"]'),s=null!=this.el.querySelector('[slot="user-menu-trigger"]');t!==this.userMenuSlotPresent&&(this.userMenuSlotPresent=t),s!==this.userMenuTriggerSlotPresent&&(this.userMenuTriggerSlotPresent=s)}}onNavControlChanged(){this.syncOpenFromNavControl(),this.syncDocEscapeListener()}connectedCallback(){this.syncOpenFromNavControl(),this.syncDocEscapeListener(),this.syncBrandLogoSlot(),this.syncUserMenuSlots(),this.connectSlotContentObserver()}disconnectedCallback(){void 0!==this.navControlFocusTimeoutId&&(clearTimeout(this.navControlFocusTimeoutId),this.navControlFocusTimeoutId=void 0),void 0!==this.deferredSlotContentObserverSyncTimeoutId&&(clearTimeout(this.deferredSlotContentObserverSyncTimeoutId),this.deferredSlotContentObserverSyncTimeoutId=void 0),this.removeDocEscapeListener(),this.disconnectSlotContentObserver(),this.disconnectUserPopoverDrawerSync()}componentWillLoad(){this.syncOpenFromNavControl(),this.syncBrandLogoSlot(),this.syncUserMenuSlots()}componentWillRender(){this.disconnectSlotContentObserver()}componentDidRender(){this.connectSlotContentObserver(),this.connectUserPopoverDrawerSync()}get childAccountLabelText(){var t,s;return null!==(s=null===(t=this.childAccountLabel)||void 0===t?void 0:t.trim())&&void 0!==s?s:""}get hasBrand(){var t,s,e,i;const n=null!==(s=null===(t=this.brandName)||void 0===t?void 0:t.trim())&&void 0!==s?s:"",o=null!==(i=null===(e=this.brandLogo)||void 0===e?void 0:e.trim())&&void 0!==i?i:"";return n.length>0||o.length>0||this.brandLogoSlotPresent}get hasUserMenu(){return this.userMenuSlotPresent}get needsUserMenuSlotStash(){return!this.userMenuSlotPresent&&this.userMenuTriggerSlotPresent}get usesBuiltInChildAccountTrigger(){return this.hasUserMenu&&!this.userMenuTriggerSlotPresent}anyDescendantPopoverIsOpen(){const t=this.el.querySelectorAll("xpl-popover");for(let s=0;s<t.length;s+=1){const e=t[s].querySelector(".xpl-popover");if(null==e?void 0:e.classList.contains("xpl-popover--is-open"))return!0}return!1}closeMobileDrawerWhenAccountMenuOpens(){this.navControl&&this.open&&(this.open=!1,this.navOpen.emit(!1))}connectSlotContentObserver(){this.disconnectSlotContentObserver(),"undefined"!=typeof MutationObserver&&(this.slotContentObserver=new MutationObserver((()=>{this.scheduleSlotContentSyncFromObserver()})),this.slotContentObserver.observe(this.el,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot"]}))}connectUserPopoverDrawerSync(){const t=this.hasUserMenu?this.el.querySelector("xpl-popover.xpl-top-nav__user-popover"):null;if(t===this.userPopoverDrawerSyncHost)return;if(this.disconnectUserPopoverDrawerSync(),!t)return;this.userPopoverDrawerSyncHost=t,t.addEventListener("isOpenChange",this.handleUserPopoverIsOpenChange);const s=t.querySelector(".xpl-popover");s&&"undefined"!=typeof MutationObserver&&(this.userPopoverDrawerOpenObserver=new MutationObserver((()=>{this.onUserPopoverInnerOpenClassChange()})),this.userPopoverDrawerOpenObserver.observe(s,{attributes:!0,attributeFilter:["class"]}),this.onUserPopoverInnerOpenClassChange())}disconnectSlotContentObserver(){var t;null===(t=this.slotContentObserver)||void 0===t||t.disconnect(),this.slotContentObserver=void 0}disconnectUserPopoverDrawerSync(){var t;this.userPopoverDrawerSyncHost&&(this.userPopoverDrawerSyncHost.removeEventListener("isOpenChange",this.handleUserPopoverIsOpenChange),this.userPopoverDrawerSyncHost=null),null===(t=this.userPopoverDrawerOpenObserver)||void 0===t||t.disconnect(),this.userPopoverDrawerOpenObserver=void 0}removeDocEscapeListener(){this.el.ownerDocument.removeEventListener("keydown",this.onDocKeyDownEscape,!1)}scheduleSlotContentSyncFromObserver(){void 0!==this.deferredSlotContentObserverSyncTimeoutId&&clearTimeout(this.deferredSlotContentObserverSyncTimeoutId),this.deferredSlotContentObserverSyncTimeoutId=setTimeout((()=>{this.deferredSlotContentObserverSyncTimeoutId=void 0,this.el.isConnected&&(this.syncBrandLogoSlot(),this.syncUserMenuSlots())}),0)}syncDocEscapeListener(){this.removeDocEscapeListener(),this.navControl&&this.el.ownerDocument.addEventListener("keydown",this.onDocKeyDownEscape,!1)}syncOpenFromNavControl(){const t=this.open;this.open=!1,t&&!this.navControl&&this.navOpen.emit(!1)}render(){var t,s,e,o;return i(n,{key:"9f65d609c6b4cf08b2899216fe8bc70fe0e12db9",class:{"xpl-top-nav":!0,"xpl-top-nav--nav-control":!!this.navControl,"xpl-top-nav--open":this.open,"xpl-top-nav--has-child-account-label":this.childAccountLabelText.length>0,"xpl-top-nav--has-brand":this.hasBrand,"xpl-top-nav--has-user-menu":this.hasUserMenu,dark:!0}},i("nav",{key:"a3d613acbe13866886bca363372127e8e869ec2c","aria-label":null!==(t=this.label)&&void 0!==t?t:"top-navigation-bar",class:"xpl-top-nav__bar"},i("div",{key:"b7057ef80f36e98def53bbfc2a39bd30bacd9b4c",class:"xpl-top-nav__inner-left"},this.navControl&&i("button",{key:"3c4091842c7e4c1a62fea5446f6e29486617b11a",type:"button",class:"xpl-top-nav__nav-control","aria-expanded":this.open?"true":"false","aria-label":this.open?"Close navigation menu":"Open navigation menu",onClick:this.onNavToggle},i("xpl-icon",{key:"cd5fd2cd1cf1dae5c765b63678e14cb87588c3b2",class:"xpl-top-nav__control-icon",icon:"menu",size:20})),this.hasBrand&&i("div",{key:"3cabfe3ce8ff58d9aed0ed9b4adccd896f6cad08",class:"xpl-top-nav__brand-bar"},i("xpl-top-nav-item",{key:"bca3924f36affd16b6c17d0d8cc1ccc57c488ef6",class:"xpl-top-nav__brand",href:this.brandHref,onNavItemClick:this.onBrandNavItemClick},(null===(s=this.brandLogo)||void 0===s?void 0:s.trim())?i("img",{class:"xpl-top-nav__brand-logo",src:this.brandLogo,alt:(null===(e=this.brandName)||void 0===e?void 0:e.trim())?this.brandName.trim():"Brand"}):this.brandLogoSlotPresent?i("span",{class:"xpl-top-nav__brand-logo-slot"},i("slot",{name:"brand-logo"})):null,(null===(o=this.brandName)||void 0===o?void 0:o.trim())?i("span",{class:"xpl-top-nav__brand-name"},this.brandName.trim()):null)),i("div",{key:"1e9a1af5fbeca22c0f440556c121c38b8528d9ba",class:{"xpl-top-nav__aside":!0,"xpl-nav-left":!0}},i("div",{key:"b5d67e1adf5bc6a751be3d8bfa448bdb682039bc",class:"xpl-top-nav__left-primary",role:"list"},i("slot",{key:"c738eb6fbda41c8320fa2645fb88f43ef11731b6",name:"left-aside"})))),i("div",{key:"8573832a3922746b2301f9bc8b4fa6ab7e1ac441",class:{"xpl-top-nav__aside":!0,"xpl-nav-right":!0}},i("div",{key:"a21b318496a47000cde7a0346d3376999e7893ea",class:"xpl-nav-right__list"},i("div",{key:"5934e7d3976b13abba77b4361b4fe1c6f49bcc2e",class:"xpl-top-nav__right-rail"},i("div",{key:"49b44ea3d59eec32d6859978754e81ce6acc1bec",class:"xpl-top-nav__right-lead"},i("slot",{key:"054671b75354700b873a85f08998a14d7fc7073b",name:"right-aside"})),this.hasUserMenu?i("div",{class:"xpl-top-nav__right-user"},i("xpl-popover",{class:"xpl-top-nav__user-popover dark",position:"bottom-end",display:"menu"},this.userMenuTriggerSlotPresent?i("slot",{name:"user-menu-trigger",slot:"trigger"}):this.usesBuiltInChildAccountTrigger?i("xpl-button",{slot:"trigger",class:"xpl-top-nav__child-account-trigger",type:"button",variant:"tertiary",icon:"chevron-down",iconPosition:"end",iconOnly:0===this.childAccountLabelText.length,"aria-haspopup":"dialog","aria-label":this.childAccountLabelText.length>0?void 0:"Open account menu"},this.childAccountLabelText.length>0?this.childAccountLabelText:null):null,i("div",{class:"xpl-top-nav__user-menu-panel"},i("slot",{name:"user-menu"})))):null,this.needsUserMenuSlotStash?i("div",{class:"xpl-top-nav__user-menu-stash",hidden:!0,"aria-hidden":"true"},i("slot",{name:"user-menu-trigger"}),i("slot",{name:"user-menu"})):null)))))}get el(){return this}static get watchers(){return{navControl:[{onNavControlChanged:0}]}}},[260,"xpl-top-nav",{brandHref:[1,"brand-href"],brandLogo:[1,"brand-logo"],brandName:[1,"brand-name"],childAccountLabel:[1,"child-account-label"],label:[1],navControl:[516,"nav-control"],brandLogoSlotPresent:[32],open:[32],userMenuSlotPresent:[32],userMenuTriggerSlotPresent:[32]},void 0,{navControl:[{onNavControlChanged:0}]}]),p=c,d=function(){"undefined"!=typeof customElements&&["xpl-top-nav","xpl-button","xpl-icon","xpl-popover","xpl-top-nav-item"].forEach((t=>{switch(t){case"xpl-top-nav":customElements.get(o(t))||customElements.define(o(t),c);break;case"xpl-button":customElements.get(o(t))||a();break;case"xpl-icon":customElements.get(o(t))||l();break;case"xpl-popover":customElements.get(o(t))||r();break;case"xpl-top-nav-item":customElements.get(o(t))||h()}}))};export{p as XplTopNav,d as defineCustomElement}

package/dist/components/xpl-utility-bar.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as n,transformTag as a}from"@stencil/core/internal/client";import{d as l}from"./xpl-icon2.js";const o=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.navOpen=e(this,"navOpen",7),this.open=!0}onNavToggle(){this.open=!this.open,this.navOpen.emit(this.open)}componentWillLoad(){this.open=void 0!==this.isNavOpenAtStartup?this.isNavOpenAtStartup:this.open}render(){return s(n,{key:"ace824cff0305860bce4dd4da2be0b2f8cf59672"},s("nav",{key:"0617af3b292b4459900c7e352c9486d666fc501e","aria-label":"utility navigation bar",class:"xpl-utility-bar"},this.navControl?s("div",null,s("button",{class:"xpl-utility-bar__nav-control",onClick:()=>this.onNavToggle()},s("xpl-icon",{class:"xpl-utility-nav__bars",icon:"three-bars"})),s("slot",{name:"aside"})):s("slot",{name:"aside"}),s("slot",{key:"e060a576b15089bc70d030a6c692124294b7eb4e",name:"main"})))}},[260,"xpl-utility-bar",{navControl:[4,"nav-control"],isNavOpenAtStartup:[4,"is-nav-open-at-startup"],open:[32]}]),c=o,r=function(){"undefined"!=typeof customElements&&["xpl-utility-bar","xpl-icon"].forEach((t=>{switch(t){case"xpl-utility-bar":customElements.get(a(t))||customElements.define(a(t),o);break;case"xpl-icon":customElements.get(a(t))||l()}}))};export{c as XplUtilityBar,r as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as i,createEvent as s,h as a,Host as n,transformTag as e}from"@stencil/core/internal/client";import{d as l}from"./xpl-icon2.js";const o=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.navOpen=s(this,"navOpen",7),this.open=!0}onNavToggle(){this.open=!this.open,this.navOpen.emit(this.open)}componentWillLoad(){this.open=void 0!==this.isNavOpenAtStartup?this.isNavOpenAtStartup:this.open}render(){return a(n,{key:"2af96247c611b67255b7f285dfb2b8b1dada47cc"},a("nav",{key:"135186097dd0d8f308a1a08b5fbf4a5537c10f25","aria-label":"utility navigation bar",class:"xpl-utility-bar"},this.navControl?a("div",null,a("button",{class:"xpl-utility-bar__nav-control",onClick:()=>this.onNavToggle()},a("xpl-icon",{class:"xpl-utility-nav__bars",icon:"three-bars"})),a("slot",{name:"aside"})):a("slot",{name:"aside"}),a("slot",{key:"3346444f9813b20d8c4ed13b5a0784205dcfbbb1",name:"main"})))}},[260,"xpl-utility-bar",{navControl:[4,"nav-control"],isNavOpenAtStartup:[4,"is-nav-open-at-startup"],open:[32]}]),c=o,r=function(){"undefined"!=typeof customElements&&["xpl-utility-bar","xpl-icon"].forEach((t=>{switch(t){case"xpl-utility-bar":customElements.get(e(t))||customElements.define(e(t),o);break;case"xpl-icon":customElements.get(e(t))||l()}}))};export{c as XplUtilityBar,r as defineCustomElement}

package/dist/docs/xpl-checkbox/readme.md

@@ -1,9 +1,7 @@
-# xpl-checkbox
-
-Checkboxes allow users to make selections or choices. Checkboxes can be multi-select, and also act as controls.
-
-Provide visible label text in the default slot, or set `aria-label` when the checkbox has no adjacent label (for example, icon-only toolbars or table selection cells).
-
+# xpl-checkbox
+
+Checkboxes allow users to make selections or choices. Checkboxes can be multi-select, and also act as controls.
+
 <!-- Auto Generated Below -->
 
 
@@ -36,7 +34,7 @@ Provide visible label text in the default slot, or set `aria-label` when the che
 
  - [xpl-choicelist](../xpl-choicelist)
  - [xpl-header-accordion](../xpl-header-accordion)
- - [xpl-table-header-cell](../xpl-table/xpl-table-header-cell)
+ - [xpl-table-header-cell](../xpl-table-header-cell)
 
 ### Graph
 ```mermaid

package/dist/docs/xpl-dropdown/readme.md

@@ -10,17 +10,19 @@ A selection within a dropdown does not change the parent trigger.
 
 ## Properties
 
-| Property          | Attribute           | Description                                                                         | Type                                                        | Default     |
-| ----------------- | ------------------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------- |
-| `anchorToTrigger` | `anchor-to-trigger` | whether to anchor the dropdown to the trigger element, requires triggerId to be set | `boolean`                                                   | `false`     |
-| `closeOnSelect`   | `close-on-select`   | options that are listed                                                             | `boolean`                                                   | `true`      |
-| `isOpen`          | `open`              | text to display as heading                                                          | `boolean`                                                   | `false`     |
-| `mode`            | `mode`              | constant representing number of options that can be selected                        | `"multi" \| "single"`                                       | `'single'`  |
-| `options`         | --                  | options that are listed                                                             | `Partial<DropdownOption & DropdownOptionGroup>[]`           | `undefined` |
-| `selectOnFocus`   | `select-on-focus`   | whether selection should be made when focusing on interactive element               | `boolean`                                                   | `false`     |
-| `selectedValues`  | `selected-values`   | The currently selected value(s) in the dropdown.                                    | `string \| string[]`                                        | `undefined` |
-| `triggerId`       | `trigger-id`        | the id for the element that triggers the open state                                 | `string`                                                    | `undefined` |
-| `update`          | --                  | call back function invoked when a selection is made                                 | `(e: any, { component }: { component: Dropdown; }) => void` | `undefined` |
+| Property                 | Attribute           | Description                                                                                                                            | Type                                                                                                                                                                 | Default          |
+| ------------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- |
+| `anchorToTrigger`        | `anchor-to-trigger` | whether to anchor the dropdown to the trigger element, requires triggerId to be set                                                    | `boolean`                                                                                                                                                            | `false`          |
+| `closeOnSelect`          | `close-on-select`   | options that are listed                                                                                                                | `boolean`                                                                                                                                                            | `true`           |
+| `flipFallbackPlacements` | --                  | When `anchorToTrigger` is true, additional placements to try when the default `placement` does not fit (passed to Floating UI `flip`). | `Placement[]`                                                                                                                                                        | `undefined`      |
+| `isOpen`                 | `open`              | text to display as heading                                                                                                             | `boolean`                                                                                                                                                            | `false`          |
+| `mode`                   | `mode`              | constant representing number of options that can be selected                                                                           | `"multi" \| "single"`                                                                                                                                                | `'single'`       |
+| `options`                | --                  | options that are listed                                                                                                                | `Partial<DropdownOption & DropdownOptionGroup>[]`                                                                                                                    | `undefined`      |
+| `placement`              | `placement`         | Floating UI placement when `anchorToTrigger` is true (e.g. `bottom-start`, `top-start`).                                               | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom-start'` |
+| `selectOnFocus`          | `select-on-focus`   | whether selection should be made when focusing on interactive element                                                                  | `boolean`                                                                                                                                                            | `false`          |
+| `selectedValues`         | `selected-values`   | The currently selected value(s) in the dropdown.                                                                                       | `string \| string[]`                                                                                                                                                 | `undefined`      |
+| `triggerId`              | `trigger-id`        | the id for the element that triggers the open state                                                                                    | `string`                                                                                                                                                             | `undefined`      |
+| `update`                 | --                  | call back function invoked when a selection is made                                                                                    | `(e: any, { component }: { component: Dropdown; }) => void`                                                                                                          | `undefined`      |
 
 
 ## Events