@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/components/pds-table-row.js

@@ -1,95 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as closest } from './closest.js';
-import { d as defineCustomElement$3 } from './pds-checkbox2.js';
-import { d as defineCustomElement$2 } from './pds-table-cell2.js';
-
-const pdsTableRowCss = ":host{--color-background-fixed:var(--pine-color-white);--color-background-interactive:var(--pine-color-grey-200);border-color:inherit;display:table-row;vertical-align:inherit}:host::part(checkbox-cell){background-color:var(--color-background-fixed);left:0;position:-webkit-sticky;position:sticky;z-index:1}:host(:hover),:host(:hover)::part(checkbox-cell),:host(:hover) ::slotted(pds-table-cell),:host(.is-selected),:host(.is-selected)::part(checkbox-cell),:host(.is-selected) ::slotted(pds-table-cell){background:var(--color-background-interactive)}";
-const PdsTableRowStyle0 = pdsTableRowCss;
-
-const PdsTableRow$1 = /*@__PURE__*/ proxyCustomElement(class PdsTableRow extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.pdsTableRowSelected = createEvent(this, "pdsTableRowSelected", 7);
-        this.handleClick = () => {
-            this.isSelected = !this.isSelected; // Toggle the selected state
-            this.handleSelect(this.isSelected);
-        };
-        this.handleSelect = (isSelected) => {
-            this.indeterminate = false;
-            if (!closest('pds-table-head', this.hostElement)) {
-                const rowIndex = Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement);
-                this.pdsTableRowSelected.emit({
-                    rowIndex,
-                    isSelected,
-                });
-            }
-        };
-        this.generateUniqueId = () => {
-            const randomString = Math.random().toString(36).substring(2, 8);
-            const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-            const uniqueId = `${randomString}-${timestamp}`;
-            return uniqueId;
-        };
-        this.indeterminate = undefined;
-        this.isSelected = undefined;
-    }
-    classNames() {
-        const classNames = [];
-        if (this.isSelected) {
-            classNames.push("is-selected");
-        }
-        return classNames.join('  ');
-    }
-    componentWillRender() {
-        this.tableRef = this.hostElement.closest('pds-table');
-        if (this.tableRef && this.tableRef.fixedColumn) {
-            const tableCell = this.hostElement.querySelector('pds-table-cell');
-            tableCell === null || tableCell === void 0 ? void 0 : tableCell.classList.add("is-fixed");
-        }
-    }
-    componentWillLoad() {
-        if (this.isSelected) {
-            this.handleSelect(this.isSelected);
-        }
-    }
-    render() {
-        return (h(Host, { key: 'dbfba35e818a96281f5df7e51e60f0bbaf4d5527', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: 'a0d9118e63db0829f4352875cbacf76c11978fff', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '60ebde7bb2e745af55e3713b952f963d50396485', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", labelHidden: true, checked: this.isSelected }))), h("slot", { key: '97f90a8d36781f3b278f83b16c778d5e2b6e9bce' })));
-    }
-    get hostElement() { return this; }
-    static get style() { return PdsTableRowStyle0; }
-}, [1, "pds-table-row", {
-        "indeterminate": [1028],
-        "isSelected": [1028, "is-selected"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-table-row", "pds-checkbox", "pds-table-cell"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-table-row":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsTableRow$1);
-            }
-            break;
-        case "pds-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "pds-table-cell":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PdsTableRow = PdsTableRow$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsTableRow, defineCustomElement };
-
-//# sourceMappingURL=pds-table-row.js.map
+import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as o,transformTag as r}from"@stencil/core/internal/client";import{c as l}from"./closest.js";import{d as a}from"./pds-checkbox2.js";import{d as c}from"./pds-icon2.js";import{d}from"./pds-table-cell2.js";const h=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.pdsTableRowSelected=s(this,"pdsTableRowSelected",7),this.observer=null,this.bodyObserver=null,this.hasDivider=!1,this.isLastRow=!1,this.handleCheckboxChange=t=>{this.isSelected=t.detail.checked,this.handleSelect(this.isSelected)},this.handleSelect=t=>{if(this.indeterminate=!1,!l("pds-table-head",this.hostElement)){const e=Array.from(this.hostElement.parentNode.children).indexOf(this.hostElement);this.pdsTableRowSelected.emit({rowIndex:e,isSelected:t})}},this.generateUniqueId=()=>`${Math.random().toString(36).substring(2,8)}-${(new Date).toISOString().replace(/[:.]/g,"-")}`}classNames(){const t=[];return this.isSelected&&t.push("is-selected"),this.hasDivider&&t.push("has-divider"),this.isLastRow&&t.push("is-last-row"),t.join(" ")}componentWillRender(){if(this.tableRef=this.hostElement.closest("pds-table"),this.tableRef&&this.tableRef.fixedColumn){const t=this.hostElement.querySelector("pds-table-cell");null==t||t.classList.add("is-fixed")}}componentWillLoad(){this.isSelected&&this.handleSelect(this.isSelected)}connectedCallback(){this.tableRef=this.hostElement.closest("pds-table"),this.setupObservers(),this.updateDividerState()}disconnectedCallback(){this.cleanupObservers()}cleanupObservers(){this.observer&&(this.observer.disconnect(),this.observer=null),this.bodyObserver&&(this.bodyObserver.disconnect(),this.bodyObserver=null)}setupObservers(){this.cleanupObservers(),this.tableRef&&"undefined"!=typeof MutationObserver&&(this.observer=new MutationObserver((()=>{this.updateDividerState()})),this.observer.observe(this.tableRef,{attributes:!0,attributeFilter:["row-dividers"]}));const t=this.hostElement.closest("pds-table-body");t&&"undefined"!=typeof MutationObserver&&(this.bodyObserver=new MutationObserver((()=>{this.updateLastRowState()})),this.bodyObserver.observe(t,{childList:!0}))}shouldHaveDivider(){return this.tableRef||(this.tableRef=this.hostElement.closest("pds-table")),!(!this.tableRef||!this.tableRef.rowDividers)}updateDividerState(){this.hasDivider=this.shouldHaveDivider(),this.updateLastRowState()}updateLastRowState(){if(!this.hasDivider)return void(this.isLastRow=!1);const t=this.hostElement.closest("pds-table-body");if(t){const e=Array.from(t.querySelectorAll("pds-table-row"));this.isLastRow=e[e.length-1]===this.hostElement}else this.isLastRow=!1}render(){return i(o,{key:"3bf8a5bf5f0ccb4a933a756d3ba52aaa2e35d4f0",class:this.classNames(),role:"row",part:"row"},this.tableRef&&this.tableRef.selectable&&i("pds-table-cell",{key:"5dfb53c4c7c550abbe445753828aa5a40cf53a7f",part:"checkbox-cell",class:this.tableRef.selectable?"has-checkbox":""},i("pds-checkbox",{key:"a53b603e4e9a09705263341ecacd3b77d96fd75f",componentId:this.generateUniqueId(),onPdsCheckboxChange:this.handleCheckboxChange,indeterminate:this.indeterminate,label:"Select Row",hideLabel:!0,checked:this.isSelected,part:"row-checkbox"})),i("slot",{key:"4ae4007c867694a25b2ca0df6d69635bc0fa7cd0"}))}get hostElement(){return this}static get style(){return":host{--color-background-interactive:var(--pine-color-background-subtle);border-color:inherit;display:table-row;vertical-align:inherit}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host(:hover),:host(:hover)::part(checkbox-cell),:host(:hover) ::slotted(pds-table-cell),:host(.is-selected),:host(.is-selected)::part(checkbox-cell),:host(.is-selected) ::slotted(pds-table-cell){background:var(--color-background-interactive)}:host(.has-divider) ::slotted(pds-table-cell),:host(.has-divider) pds-table-cell{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host(.has-divider.is-last-row) ::slotted(pds-table-cell),:host(.has-divider.is-last-row) pds-table-cell{-webkit-border-after:0;border-block-end:0}"}},[257,"pds-table-row",{indeterminate:[1028],isSelected:[1028,"is-selected"],hasDivider:[32],isLastRow:[32]}]),n=h,b=function(){"undefined"!=typeof customElements&&["pds-table-row","pds-checkbox","pds-icon","pds-table-cell"].forEach((t=>{switch(t){case"pds-table-row":customElements.get(r(t))||customElements.define(r(t),h);break;case"pds-checkbox":customElements.get(r(t))||a();break;case"pds-icon":customElements.get(r(t))||c();break;case"pds-table-cell":customElements.get(r(t))||d()}}))};export{n as PdsTableRow,b as defineCustomElement}

package/components/pds-table.js

@@ -1,124 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const pdsTableCss = ":host{--color-background-default:var(--pine-color-white);background:var(--color-background-default);border-collapse:separate;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;width:100%}:host(:focus-visible){--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.is-responsive){background-attachment:local, local, scroll, scroll;background-image:-webkit-gradient(linear, left top, right top, from(var(--color-background-default)), to(var(--color-background-default))), -webkit-gradient(linear, left top, right top, from(var(--color-background-default)), to(var(--color-background-default))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0)));background-image:linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));background-position:left center, right center, left center, right center;background-repeat:no-repeat;background-size:4px 100%, 4px 100%, 4px 100%, 4px 100%;display:block;margin:0 auto;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;overflow-x:auto;white-space:nowrap}";
-const PdsTableStyle0 = pdsTableCss;
-
-const PdsTable$1 = /*@__PURE__*/ proxyCustomElement(class PdsTable extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.pdsTableSelect = createEvent(this, "pdsTableSelect", 7);
-        this.pdsTableSelectAll = createEvent(this, "pdsTableSelectAll", 7);
-        this.compact = undefined;
-        this.componentId = undefined;
-        this.responsive = undefined;
-        this.fixedColumn = undefined;
-        this.selectable = undefined;
-        this.sortingColumn = null;
-        this.sortingDirection = 'asc';
-    }
-    componentWillLoad() {
-        this.sortingColumn = null;
-    }
-    classNames() {
-        const classNames = ['pds-table'];
-        if (this.compact) {
-            classNames.push('is-compact');
-        }
-        if (this.responsive) {
-            classNames.push('is-responsive');
-        }
-        return classNames.join('  ');
-    }
-    sortTable(column, direction) {
-        const tableBody = this.el.querySelector('pds-table-body');
-        // Get the rows in the table body
-        const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));
-        // Find the column index based on the column name
-        const columnHeaderCells = Array.from(this.el.querySelectorAll('pds-table-head-cell[sortable]'));
-        const columnHeaderCell = columnHeaderCells.find((cell) => cell.innerText.trim() === column);
-        if (!columnHeaderCell) {
-            console.warn(`Column "${column}" not found.`);
-            return;
-        }
-        const columnIndex = columnHeaderCells.indexOf(columnHeaderCell);
-        // Sort the rows based on the content of the specified column
-        tableRows.sort((a, b) => {
-            const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();
-            const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();
-            if (direction === 'asc') {
-                return valueA.localeCompare(valueB);
-            }
-            else {
-                return valueB.localeCompare(valueA);
-            }
-        });
-        // Clear and append the sorted rows back to the table body
-        tableBody.innerHTML = '';
-        tableRows.forEach((row) => {
-            tableBody.appendChild(row);
-        });
-    }
-    handleTableSort(event) {
-        const { direction } = event.detail;
-        this.sortTable(event.detail.column, direction);
-        this.sortingColumn = event.detail.column;
-        this.sortingDirection = direction;
-    }
-    handleTableSelectAll(event) {
-        if (event.defaultPrevented)
-            return;
-        const pdsTableBody = this.el.querySelector('pds-table-body');
-        const tableRows = Array.from(pdsTableBody.querySelectorAll('pds-table-row'));
-        tableRows.forEach((row) => {
-            row.isSelected = event.detail.isSelected;
-        });
-    }
-    async handleTableSelect(event) {
-        if (event.defaultPrevented)
-            return;
-        const allTableRows = this.el.querySelectorAll('pds-table-row');
-        const allSelectedRows = Array.from(allTableRows).every((row) => row.isSelected);
-        const noneSelectedRows = Array.from(allTableRows).every((row) => !row.isSelected);
-        const pdsTableHead = this.el.querySelector('pds-table-head');
-        if (!pdsTableHead)
-            return;
-        const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');
-        headerCheckbox.checked = allSelectedRows;
-        headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
-    }
-    render() {
-        return (h(Host, { key: '95cc4db296681faa0fc046c9b1d6807d640b7730', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: 'ecc9bc0761409d5a2819a05d72290c294e27454f' })));
-    }
-    get el() { return this; }
-    static get style() { return PdsTableStyle0; }
-}, [1, "pds-table", {
-        "compact": [4],
-        "componentId": [1, "component-id"],
-        "responsive": [4],
-        "fixedColumn": [4, "fixed-column"],
-        "selectable": [4],
-        "sortingColumn": [32],
-        "sortingDirection": [32]
-    }, [[0, "pdsTableSort", "handleTableSort"], [0, "pdsTableSelectAll", "handleTableSelectAll"], [0, "pdsTableRowSelected", "handleTableSelect"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-table"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-table":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsTable$1);
-            }
-            break;
-    } });
-}
-
-const PdsTable = PdsTable$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsTable, defineCustomElement };
-
-//# sourceMappingURL=pds-table.js.map
+import{proxyCustomElement as t,HTMLElement as i,createEvent as e,forceUpdate as s,h as o,Host as r,transformTag as l}from"@stencil/core/internal/client";import{g as a}from"./scroll.js";const n=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.pdsTableSelectAll=e(this,"pdsTableSelectAll",7),this.scrollContainer=null,this._responsiveHandleScroll=null,this._responsiveHandleResize=null,this._responsiveResizeObserver=null,this._teardownResponsive=null,this._fixedLayoutResizeObserver=null,this._fixedLayoutHandleResize=null,this._fixedLayoutMutationObserver=null,this._pendingColumnWidthsRecalc=!1,this.hasLoaded=!1,this.disableSelectAll=!1,this.rowDividers=!1,this.tableLayout="auto",this.defaultSortDirection="asc",this.sortingColumn=null,this.sortingDirection="asc",this._pendingFixedLayoutInputsSync=!1,this.recalcAutoColumnWidths=()=>{var t,i,e,s,o,r;if("fixed"!==this.tableLayout||!this.responsive)return;const l=Array.from(this.el.querySelectorAll("pds-table-head-cell")),a=[];let n=0;for(const t of l)t.getAttribute("width")?n+=t.getBoundingClientRect().width:a.push(t);if(0===a.length)return;if(this.selectable){const s=null===(i=null===(t=this.el.querySelector("pds-table-head"))||void 0===t?void 0:t.shadowRoot)||void 0===i?void 0:i.querySelector("pds-table-head-cell");n+=null!==(e=null==s?void 0:s.getBoundingClientRect().width)&&void 0!==e?e:0}const d=null===(s=this.el.shadowRoot)||void 0===s?void 0:s.querySelector(".pds-table-responsive-container"),h=((null!==(o=null==d?void 0:d.clientWidth)&&void 0!==o?o:0)-n)/a.length<120;a.forEach((t=>{h?t.style.setProperty("--pds-table-head-cell-auto-floor-width","120px"):t.style.removeProperty("--pds-table-head-cell-auto-floor-width")})),null===(r=this._responsiveHandleScroll)||void 0===r||r.call(this)},this.scheduleColumnWidthsRecalc=()=>{this._pendingColumnWidthsRecalc||(this._pendingColumnWidthsRecalc=!0,requestAnimationFrame((()=>{this._pendingColumnWidthsRecalc&&(this._pendingColumnWidthsRecalc=!1,this.el.isConnected&&this.recalcAutoColumnWidths())})))}}componentDidLoad(){this.hasLoaded=!0,this.attachLifecycleBoundSetup(),this.defaultSortColumn&&requestAnimationFrame((()=>{this.applyDefaultSort().catch((t=>{console.warn("Failed to apply default sort.",t)}))}))}async applyDefaultSort(){var t;const i="desc"===this.defaultSortDirection?"desc":"asc",e=Array.from(this.el.querySelectorAll("pds-table-head-cell[sortable]")).find((t=>{var i;return(null!==(i=t.textContent)&&void 0!==i?i:"").trim()===this.defaultSortColumn}));if(e){const s=(null!==(t=e.textContent)&&void 0!==t?t:"").trim();this.sortTable(s,i),this.sortingColumn=s,this.sortingDirection=i,await e.setActiveSort(i)}else console.warn(`Default sort column "${this.defaultSortColumn}" not found.`)}connectedCallback(){this.hasLoaded&&this.attachLifecycleBoundSetup()}attachLifecycleBoundSetup(){this.responsive&&this.setupResponsiveScrolling(),"fixed"===this.tableLayout&&this.responsive&&this.setupFixedLayoutWidths()}disconnectedCallback(){this._teardownResponsive&&(this._teardownResponsive(),this._teardownResponsive=null),this.teardownFixedLayoutWidths(),this._pendingFixedLayoutInputsSync&&queueMicrotask((()=>{this.el.isConnected||(this._pendingFixedLayoutInputsSync=!1)}))}handleFixedLayoutInputsChange(){this._pendingFixedLayoutInputsSync=!0}componentDidRender(){this._pendingFixedLayoutInputsSync&&(this._pendingFixedLayoutInputsSync=!1,this.syncFixedLayoutInputs())}syncFixedLayoutInputs(){this._teardownResponsive&&(this._teardownResponsive(),this._teardownResponsive=null),this.responsive&&this.setupResponsiveScrolling(),this.teardownFixedLayoutWidths();const t="fixed"===this.tableLayout&&this.responsive;t&&this.setupFixedLayoutWidths(),this.allHeadCells().forEach((i=>{t||i.style.removeProperty("--pds-table-head-cell-auto-floor-width"),s(i),i.rebindScrollListener()})),this.allBodyCells().forEach((t=>{t.rebindScrollListener()}));const i=this.el.querySelector("pds-table-head");i&&s(i),t&&this.scheduleColumnWidthsRecalc()}allHeadCells(){var t;const i=Array.from(this.el.querySelectorAll("pds-table-head-cell")),e=this.el.querySelector("pds-table-head"),s=null===(t=null==e?void 0:e.shadowRoot)||void 0===t?void 0:t.querySelector("pds-table-head-cell");return s?[...i,s]:i}allBodyCells(){return[...Array.from(this.el.querySelectorAll("pds-table-cell")),...Array.from(this.el.querySelectorAll("pds-table-row")).map((t=>{var i;return null===(i=t.shadowRoot)||void 0===i?void 0:i.querySelector("pds-table-cell")})).filter((t=>null!==t))]}setupFixedLayoutWidths(){if(this.recalcAutoColumnWidths(),"undefined"!=typeof window){if(this._fixedLayoutHandleResize=()=>this.recalcAutoColumnWidths(),window.ResizeObserver)try{this._fixedLayoutResizeObserver=new ResizeObserver(this._fixedLayoutHandleResize),this._fixedLayoutResizeObserver.observe(this.el)}catch(t){}window.addEventListener("resize",this._fixedLayoutHandleResize),"undefined"!=typeof MutationObserver&&(this._fixedLayoutMutationObserver=new MutationObserver(this.scheduleColumnWidthsRecalc),this._fixedLayoutMutationObserver.observe(this.el,{childList:!0,subtree:!0,attributeFilter:["width"]}))}}teardownFixedLayoutWidths(){this._fixedLayoutResizeObserver&&(this._fixedLayoutResizeObserver.disconnect(),this._fixedLayoutResizeObserver=null),this._fixedLayoutMutationObserver&&(this._fixedLayoutMutationObserver.disconnect(),this._fixedLayoutMutationObserver=null),"undefined"!=typeof window&&this._fixedLayoutHandleResize&&window.removeEventListener("resize",this._fixedLayoutHandleResize),this._fixedLayoutHandleResize=null,this._pendingColumnWidthsRecalc=!1}setupResponsiveScrolling(){var t,i,e;const s=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector(".pds-table-responsive-container"),o=null===(i=this.el.shadowRoot)||void 0===i?void 0:i.querySelector(".scroll-shadow-left"),r=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.querySelector(".scroll-shadow-right");if(s&&o&&r){if(this.scrollContainer=s,this._responsiveHandleScroll=()=>{if(!this.scrollContainer)return;const{scrollWidth:t,clientWidth:i}=this.scrollContainer,e=t-i,s=a(this.scrollContainer);o.style.opacity=s>0&&!this.fixedColumn?"1":"0",r.style.opacity=e>0&&s<e-1?"1":"0"},this.scrollContainer.addEventListener("scroll",this._responsiveHandleScroll,{passive:!0}),"undefined"!=typeof window&&window.ResizeObserver)try{this._responsiveResizeObserver=new ResizeObserver((()=>{var t;null===(t=this._responsiveHandleScroll)||void 0===t||t.call(this)})),this._responsiveResizeObserver.observe(this.scrollContainer)}catch(t){}"undefined"!=typeof window&&(this._responsiveHandleResize=()=>{var t;null===(t=this._responsiveHandleScroll)||void 0===t||t.call(this)},window.addEventListener("resize",this._responsiveHandleResize)),this._teardownResponsive=()=>{this.scrollContainer&&this._responsiveHandleScroll&&(this.scrollContainer.removeEventListener("scroll",this._responsiveHandleScroll),this.scrollContainer=null),this._responsiveResizeObserver&&(this._responsiveResizeObserver.disconnect(),this._responsiveResizeObserver=null),"undefined"!=typeof window&&this._responsiveHandleResize&&(window.removeEventListener("resize",this._responsiveHandleResize),this._responsiveHandleResize=null),this._responsiveHandleScroll=null},this._responsiveHandleScroll()}}classNames(){const t=["pds-table"];return this.compact&&t.push("is-compact"),this.responsive&&t.push("is-responsive"),"fixed"===this.tableLayout&&t.push("is-fixed-layout"),t.join("  ")}sortTable(t,i){const e=this.el.querySelector("pds-table-body");if(!e)return;const s=Array.from(e.querySelectorAll("pds-table-row")),o=Array.from(this.el.querySelectorAll("pds-table-head-cell[sortable]")),r=o.find((i=>i.innerText.trim()===t));if(!r)return void console.warn(`Column "${t}" not found.`);const l=o.indexOf(r);s.sort(((t,e)=>{const s=t.querySelector(`pds-table-cell:nth-child(${l+1})`).textContent.trim(),o=e.querySelector(`pds-table-cell:nth-child(${l+1})`).textContent.trim();return"asc"===i?s.localeCompare(o,void 0,{sensitivity:"base"}):o.localeCompare(s,void 0,{sensitivity:"base"})})),e.innerHTML="",s.forEach((t=>{e.appendChild(t)}))}handleTableSort(t){if(t.defaultPrevented)return;const{direction:i}=t.detail;this.sortTable(t.detail.column,i),this.sortingColumn=t.detail.column,this.sortingDirection=i}handleTableSelectAll(t){if(t.defaultPrevented)return;const i=this.el.querySelector("pds-table-body");Array.from(i.querySelectorAll("pds-table-row")).forEach((i=>{i.isSelected=t.detail.isSelected}))}async handleTableSelect(t){if(t.defaultPrevented)return;const i=this.el.querySelectorAll("pds-table-row"),e=Array.from(i).every((t=>t.isSelected)),s=Array.from(i).every((t=>!t.isSelected)),o=this.el.querySelector("pds-table-head");if(!o)return;const r=o.shadowRoot.querySelector("pds-checkbox");r&&(r.checked=e,r.indeterminate=!e&&!s)}render(){return this.responsive?o(r,{class:this.classNames()+" pds-table-responsive-host",role:"grid",selectable:this.selectable,tabindex:"0",part:"table responsive-table"},o("div",{class:"scroll-shadow-left",part:"scroll-shadow-left"}),o("div",{class:"scroll-shadow-right",part:"scroll-shadow-right"}),o("div",{class:"pds-table-responsive-container",part:"responsive-container"},o("div",{class:"pds-table-responsive-wrapper",part:"responsive-wrapper"},o("div",{class:this.classNames(),part:"table-inner"},o("slot",null))))):o(r,{class:this.classNames(),role:"grid",selectable:this.selectable,tabindex:"0",part:"table"},o("slot",null))}get el(){return this}static get watchers(){return{tableLayout:[{handleFixedLayoutInputsChange:0}],responsive:[{handleFixedLayoutInputsChange:0}]}}static get style(){return'@charset "UTF-8";:host{--color-background-default:var(--pine-color-background-container);background:var(--color-background-default);border-collapse:separate;border-radius:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;isolation:isolate;width:100%}:host(:focus-visible){outline:var(--pine-outline-focus)}:host(.is-fixed-layout){table-layout:fixed}:host(.pds-table-responsive-host){border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;display:block !important;max-width:100% !important;overflow:hidden !important;position:relative !important;width:100% !important}.pds-table-responsive-container{border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;overflow-x:auto !important;overflow-y:visible !important;position:relative !important;width:100% !important}.pds-table-responsive-wrapper{border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;display:block !important;position:relative !important;width:100% !important}.pds-table-responsive-wrapper .pds-table{display:table !important;min-width:-webkit-max-content !important;min-width:-moz-max-content !important;min-width:max-content !important;table-layout:auto !important;white-space:nowrap !important;width:100% !important}.pds-table-responsive-wrapper .pds-table.is-fixed-layout{table-layout:fixed !important}.scroll-shadow-left,.scroll-shadow-right{height:100%;opacity:0;pointer-events:none;position:absolute;top:0;-webkit-transition:opacity 0.1s ease;transition:opacity 0.1s ease;width:4px;z-index:var(--pine-z-index)}.scroll-shadow-left{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);border-end-start-radius:inherit;border-start-start-radius:inherit;inset-inline-start:0}:host-context([dir=rtl]) .scroll-shadow-left{background:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent)}.scroll-shadow-right{background:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);border-end-end-radius:inherit;border-start-end-radius:inherit;inset-inline-end:0}:host-context([dir=rtl]) .scroll-shadow-right{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent)}'}},[257,"pds-table",{compact:[4],componentId:[1,"component-id"],responsive:[4],fixedColumn:[4,"fixed-column"],selectable:[4],disableSelectAll:[4,"disable-select-all"],rowDividers:[516,"row-dividers"],tableLayout:[1,"table-layout"],defaultSortColumn:[1,"default-sort-column"],defaultSortDirection:[1,"default-sort-direction"],sortingColumn:[32],sortingDirection:[32]},[[0,"pdsTableSort","handleTableSort"],[0,"pdsTableSelectAll","handleTableSelectAll"],[0,"pdsTableRowSelected","handleTableSelect"]],{tableLayout:[{handleFixedLayoutInputsChange:0}],responsive:[{handleFixedLayoutInputsChange:0}]}]),d=n,h=function(){"undefined"!=typeof customElements&&["pds-table"].forEach((t=>{"pds-table"===t&&(customElements.get(l(t))||customElements.define(l(t),n))}))};export{d as PdsTable,h as defineCustomElement}

package/components/pds-tabpanel.js

@@ -1,45 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const pdsTabpanelCss = ":host{display:block}.pds-tabpanel{display:none;margin-top:var(--spacing-panel-margin-top);padding:var(--spacing-panel-padding)}.pds-tabpanel.is-active{display:block}";
-const PdsTabpanelStyle0 = pdsTabpanelCss;
-
-const PdsTabpanel$1 = /*@__PURE__*/ proxyCustomElement(class PdsTabpanel extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.name = undefined;
-        this.parentComponentId = undefined;
-        this.variant = undefined;
-        this.selected = false;
-    }
-    render() {
-        return (h(Host, { key: 'b071d63a6211e70b09f11a18609d15728eb485c6', slot: "tabpanels" }, h("div", { key: 'ab8de65d7142136888c853170b7b8b190f21abcc', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: '0cac8366d5502be7033d1b71b681bf564aa557e8' }))));
-    }
-    get el() { return this; }
-    static get style() { return PdsTabpanelStyle0; }
-}, [4, "pds-tabpanel", {
-        "name": [1],
-        "parentComponentId": [1, "parent-component-id"],
-        "variant": [1],
-        "selected": [1028]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-tabpanel"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-tabpanel":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsTabpanel$1);
-            }
-            break;
-    } });
-}
-
-const PdsTabpanel = PdsTabpanel$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsTabpanel, defineCustomElement };
-
-//# sourceMappingURL=pds-tabpanel.js.map
+import{proxyCustomElement as t,HTMLElement as e,h as s,Host as a,transformTag as n}from"@stencil/core/internal/client";import{H as i}from"./attributes.js";import{u as l}from"./reconnected-content.js";const p=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.hostKeeper=new i,this.selected=!1,this.stretch=!1}connectedCallback(){this.hostKeeper.connect(this.el)}disconnectedCallback(){this.hostKeeper.disconnect()}componentDidRender(){l(this.el.querySelector(".pds-tabpanel"),".pds-tabpanel")}render(){const t=this.stretch&&this.selected?"pds-tabpanel--stretch-active":"";return this.hostKeeper.record(t,{},{slot:"tabpanels"}),s(a,{key:"b649c0f9e0c103a2d7dad43b7db0a092194b4ba0",slot:"tabpanels",class:t||void 0},s("div",{key:"a578722d33f7d04726185e393771838870833984",role:"tabpanel",id:this.parentComponentId+"__"+this.name+"-panel",tabindex:"0","aria-labelledby":this.parentComponentId+"__"+this.name,class:this.selected?"pds-tabpanel is-active":"pds-tabpanel"},s("slot",{key:"2ebe5745c444563333ee175bb3a1f7401ba77ec1"})))}get el(){return this}static get style(){return":host{display:block}:host(.pds-tabpanel--stretch-active){-ms-flex:1 1 auto;flex:1 1 auto;min-block-size:0}:host(.pds-tabpanel--stretch-active) .pds-tabpanel.is-active{block-size:100%}.pds-tabpanel{display:none;margin-top:var(--tabs-dimension-panel-margin-top);padding:var(--tabs-dimension-panel-padding)}.pds-tabpanel:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabpanel.is-active{display:block}"}},[260,"pds-tabpanel",{name:[1],parentComponentId:[1,"parent-component-id"],variant:[1],selected:[1028],stretch:[4]}]),o=p,d=function(){"undefined"!=typeof customElements&&["pds-tabpanel"].forEach((t=>{"pds-tabpanel"===t&&(customElements.get(n(t))||customElements.define(n(t),p))}))};export{o as PdsTabpanel,d as defineCustomElement}

package/components/pds-tabs.js

@@ -1,119 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const pdsTabsCss = ":host{--spacing-panel-margin-top:0;--spacing-panel-padding:0;--outline:2px solid var(--pine-color-blue-200);--spacing-gap-availability:var(--pine-spacing-100);--spacing-gap-default:var(--pine-spacing-300);--spacing-gap-filter:var(--pine-spacing-200);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-gap-default)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--spacing-gap-availability)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--spacing-gap-filter)}";
-const PdsTabsStyle0 = pdsTabsCss;
-
-const PdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class PdsTabs extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.tablistLabel = undefined;
-        this.componentId = undefined;
-        this.variant = undefined;
-        this.activeTabName = undefined;
-        this.activeTabIndex = undefined;
-    }
-    tabClickHandler(event) {
-        if (this.componentId === event.detail[1]) {
-            this.activeTabIndex = event.detail[0];
-            this.activeTabName = this.tabs[this.activeTabIndex].name;
-        }
-    }
-    handleKeyDown(ev) {
-        const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
-        if (keySet.includes(ev.key)) {
-            ev.preventDefault();
-            this.moveActiveTab(ev.key);
-        }
-    }
-    moveActiveTab(key) {
-        const firstTabNumber = 0;
-        const lastTabNumber = this.tabs.length - 1;
-        let moveFocusTo = null;
-        switch (key) {
-            case 'ArrowLeft':
-                moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));
-                break;
-            case 'ArrowRight':
-                moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);
-                break;
-            case 'Home':
-                moveFocusTo = firstTabNumber;
-                break;
-            case 'End':
-                moveFocusTo = lastTabNumber;
-                break;
-        }
-        // Move focus to the button element within `pds-tab`
-        this.tabs[moveFocusTo].children[0].focus();
-        this.activeTabName = this.tabs[moveFocusTo].name;
-        this.activeTabIndex = moveFocusTo;
-    }
-    findAllChildren() {
-        this.tabs = this.el.querySelectorAll('pds-tab');
-        this.tabPanels = this.el.querySelectorAll('pds-tabpanel');
-    }
-    propGeneration(child, index = 0) {
-        child.parentComponentId = this.componentId.toString();
-        child.variant = this.variant.toString();
-        child.selected = (this.activeTabName === child.name) ? true : false;
-        child['index'] = index;
-    }
-    passPropsToChildren() {
-        this.tabs.forEach((child, index) => {
-            if (this.activeTabName === child.name)
-                this.activeTabIndex = index;
-            this.propGeneration(child, index);
-        });
-        this.tabPanels.forEach((child) => {
-            this.propGeneration(child);
-        });
-    }
-    classNames() {
-        let className = `pds-tabs`;
-        if (this.variant && this.variant != 'primary') {
-            const variantClassName = `pds-tabs--${this.variant}`;
-            className += ' ' + variantClassName;
-        }
-        return className;
-    }
-    ;
-    componentWillLoad() {
-        this.findAllChildren();
-    }
-    componentWillRender() {
-        this.passPropsToChildren();
-    }
-    render() {
-        return (h(Host, { key: 'a36e242d5e746954f80778cf515879ca82258978', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: 'd6d89fd90a9a534f249c549e34308ed245773f60', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: '9b5e5268c27ecf2a5331cec64d2c7121cef366a1', name: "tabs" })), h("slot", { key: 'b835cf1befe68f54b1751a976846d271ce97634e', name: "tabpanels" })));
-    }
-    get el() { return this; }
-    static get style() { return PdsTabsStyle0; }
-}, [1, "pds-tabs", {
-        "tablistLabel": [1, "tablist-label"],
-        "componentId": [1, "component-id"],
-        "variant": [1],
-        "activeTabName": [1025, "active-tab-name"],
-        "activeTabIndex": [1026, "active-tab-index"]
-    }, [[16, "pdsTabClick", "tabClickHandler"], [0, "keydown", "handleKeyDown"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-tabs"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-tabs":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsTabs$1);
-            }
-            break;
-    } });
-}
-
-const PdsTabs = PdsTabs$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsTabs, defineCustomElement };
-
-//# sourceMappingURL=pds-tabs.js.map
+import{proxyCustomElement as t,HTMLElement as s,h as i,Host as e,transformTag as a}from"@stencil/core/internal/client";import{H as n}from"./attributes.js";const l=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.hostKeeper=new n,this.slotChangeScheduled=!1,this.lastFocusedTab=null,this.handleFocusIn=t=>{var s;const i=null===(s=t.target)||void 0===s?void 0:s.closest("pds-tab");i&&i.closest("pds-tabs")===this.el&&(this.lastFocusedTab=i)},this.handleFocusOut=t=>{const s=this.lastFocusedTab;t.relatedTarget?this.lastFocusedTab=null:queueMicrotask((()=>{this.lastFocusedTab===s&&(null==s?void 0:s.isConnected)&&(this.lastFocusedTab=null)}))},this.divider=!1,this.stretch=!1,this.nav=!1,this.handleSlotChange=()=>{this.slotChangeScheduled||(this.slotChangeScheduled=!0,this.activeTabNameBeforeSlotChange=this.activeTabName,queueMicrotask((()=>{this.slotChangeScheduled=!1,this.recollectAfterSlotChange()})))}}connectedCallback(){this.hostKeeper.connect(this.el),this.el.addEventListener("focusin",this.handleFocusIn),this.el.addEventListener("focusout",this.handleFocusOut);const t=null!=this.tabsSlot;this.setupSlotChangeListeners(),t&&this.handleSlotChange()}disconnectedCallback(){var t,s;this.hostKeeper.disconnect(),this.el.removeEventListener("focusin",this.handleFocusIn),this.el.removeEventListener("focusout",this.handleFocusOut),null===(t=this.tabsSlot)||void 0===t||t.removeEventListener("slotchange",this.handleSlotChange),null===(s=this.tabPanelsSlot)||void 0===s||s.removeEventListener("slotchange",this.handleSlotChange)}componentDidLoad(){this.setupSlotChangeListeners()}tabClickHandler(t){this.componentId===t.detail[1]&&(this.activeTabIndex=t.detail[0],this.activeTabName=this.tabs[this.activeTabIndex].name)}handleKeyDown(t){if(this.isNav)return;const s=t.target.closest("pds-tab"),i=s&&s.closest("pds-tabs")===this.el;["ArrowLeft","ArrowRight","Home","End"].includes(t.key)&&i&&(t.preventDefault(),this.moveActiveTab(t.key))}get isNav(){return!!this.nav}warnOnNavConfig(){var t;if(!(null===(t=this.tabs)||void 0===t?void 0:t.length))return;const s=this.tabs.filter((t=>{const s=t.getAttribute("href");return null!=s&&""!==s})).length;this.nav&&s<this.tabs.length?console.warn("pds-tabs: `nav` is set, so every pds-tab needs an `href`."):!this.nav&&s>0&&console.warn("pds-tabs: a pds-tab has an `href` but `nav` is not set — add `nav` to pds-tabs for navigation mode; the href is ignored in panel mode.")}moveActiveTab(t){const s=this.tabs.length-1;let i=null;switch(t){case"ArrowLeft":i=0===this.activeTabIndex?s:this.activeTabIndex+-1;break;case"ArrowRight":i=this.activeTabIndex===s?0:this.activeTabIndex+1;break;case"Home":i=0;break;case"End":i=s}this.tabs[i].children[0].focus(),this.activeTabName=this.tabs[i].name,this.activeTabIndex=i}findAllChildren(){const t=Array.from(this.el.querySelectorAll("pds-tab")),s=Array.from(this.el.querySelectorAll("pds-tabpanel"));this.tabs=t.filter((t=>t.closest("pds-tabs")===this.el)),this.tabPanels=s.filter((t=>t.closest("pds-tabs")===this.el))}setupSlotChangeListeners(){var t,s,i,e;this.tabsSlot=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector('slot[name="tabs"]'),this.tabPanelsSlot=null===(s=this.el.shadowRoot)||void 0===s?void 0:s.querySelector('slot[name="tabpanels"]'),null===(i=this.tabsSlot)||void 0===i||i.addEventListener("slotchange",this.handleSlotChange),null===(e=this.tabPanelsSlot)||void 0===e||e.addEventListener("slotchange",this.handleSlotChange)}recollectAfterSlotChange(){const t=this.activeTabNameBeforeSlotChange,s=!this.isNav&&null!=this.lastFocusedTab&&!this.lastFocusedTab.isConnected;this.findAllChildren(),this.warnOnNavConfig(),null==t||this.tabs.some((s=>s.name===t))||(this.activeTabName=void 0),this.passPropsToChildren(),s&&(this.lastFocusedTab=null,requestAnimationFrame((()=>{var t;const s=document.activeElement;if(s&&s!==document.body)return;const i=this.tabs.find((t=>t.name===this.activeTabName));null===(t=null==i?void 0:i.querySelector("button"))||void 0===t||t.focus()})))}propGeneration(t,s=0){t.parentComponentId=""+this.componentId,t.variant=this.variant,t.selected=this.activeTabName===t.name,t.index=s}passPropsToChildren(){var t;if(!this.nav&&null==this.activeTabName&&this.tabs.length){const s=null!==(t=this.tabs.find((t=>!t.disabled)))&&void 0!==t?t:this.tabs[0];this.activeTabName=s.name}this.tabs.forEach(((t,s)=>{this.activeTabName===t.name&&(this.activeTabIndex=s),this.propGeneration(t,s),t.navMode=this.nav})),this.tabPanels.forEach((t=>{this.propGeneration(t),t.stretch=this.stretch}))}classNames(){let t="pds-tabs";return this.variant&&"primary"!=this.variant&&(t+=" pds-tabs--"+this.variant),this.divider&&(t+=" pds-tabs--divider"),this.stretch&&(t+=" pds-tabs--stretch"),t}componentWillLoad(){this.findAllChildren(),this.warnOnNavConfig()}componentWillRender(){this.passPropsToChildren()}render(){const t=this.isNav?i("nav",{class:"pds-tabs__tablist","aria-label":this.tablistLabel||void 0,part:"tab-list"},i("slot",{name:"tabs"})):i("div",{class:"pds-tabs__tablist",role:"tablist","aria-label":this.tablistLabel,part:"tab-list"},i("slot",{name:"tabs"})),s=this.classNames();return this.hostKeeper.record(s),i(e,{key:"6ededb588230706dc0848164e991694490436bf1","active-tab-name":this.activeTabName,class:s},t,i("slot",{key:"68d090b7b6a3bae74ceb66e1487ce96666a38c6e",name:"tabpanels"}))}get el(){return this}static get style(){return":host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--divider) .pds-tabs__tablist{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host(.pds-tabs--stretch){block-size:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.pds-tabs--stretch) .pds-tabs__tablist{-ms-flex:0 0 auto;flex:0 0 auto}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--pine-dimension-sm)}:host(.pds-tabs--pill) .pds-tabs__tablist{background-color:var(--pine-color-background-app);border:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-radius:var(--pine-dimension-100);display:-ms-inline-flexbox;display:inline-flex;display:-ms-flexbox;display:flex;gap:0;height:var(--pine-dimension-450)}"}},[257,"pds-tabs",{tablistLabel:[1,"tablist-label"],componentId:[1,"component-id"],variant:[1],divider:[4],stretch:[4],nav:[4],activeTabName:[1025,"active-tab-name"],activeTabIndex:[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]),o=l,h=function(){"undefined"!=typeof customElements&&["pds-tabs"].forEach((t=>{"pds-tabs"===t&&(customElements.get(a(t))||customElements.define(a(t),l))}))};export{o as PdsTabs,h as defineCustomElement}

package/components/pds-text.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface PdsText extends Components.PdsText, HTMLElement {}
+export const PdsText: {
+    prototype: PdsText;
+    new (): PdsText;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pds-text.js

@@ -0,0 +1 @@
+import{P as s,d as t}from"./pds-text2.js";const o=s,p=t;export{o as PdsText,p as defineCustomElement}

package/components/pds-text2.js

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as e,h as i,transformTag as n}from"@stencil/core/internal/client";import{s}from"./utils.js";import{F as a,s as o,f as r}from"./truncation-tooltip.js";const d=["2xl","xl","lg","md","sm","xs","2xs","h1","h2","h3","h4","h5","h6"],l=new WeakMap,p=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.truncationCleanup=null,this.tag="p"}handleTruncateChange(t){t?this.initTruncationTooltip():this.destroyTruncationTooltip()}validateSize(t){if(null!=t&&""!==t&&!d.includes(t)){const e=t.length>80?`${t.slice(0,80)}…`:t;console.warn(`pds-text: invalid size "${e}". Valid values are: ${d.join(", ")}.`)}}componentWillLoad(){this.validateSize(this.size)}connectedCallback(){this.truncate&&this.contentEl&&this.initTruncationTooltip()}componentDidLoad(){this.truncate&&this.initTruncationTooltip()}disconnectedCallback(){this.destroyTruncationTooltip()}initTruncationTooltip(){var t;if(this.destroyTruncationTooltip(),this.contentEl){const e=this.el.closest(a),i=null===e?[]:e.querySelectorAll("pds-text, pds-chip");let n=!1;for(let e=0;e<i.length;e++){const s=i[e];s!==this.el&&(s.truncate||s.maxWidth||s.hasAttribute("truncate")||s.hasAttribute("max-width"))&&(n=!0,null===(t=l.get(s))||void 0===t||t())}const s=null!==e&&!n;this.truncationCleanup=o({hostEl:this.el,contentEl:this.contentEl,getTooltipText:()=>r(this.el),manageTabIndex:!s,focusEl:s?e:this.el}),s&&l.set(this.el,(()=>this.initTruncationTooltip()))}}destroyTruncationTooltip(){l.delete(this.el),this.truncationCleanup&&(this.truncationCleanup(),this.truncationCleanup=null)}render(){const t=this.tag,e=`\n      pds-text\n      ${null!=this.align&&""!==this.align.trim()?`pds-text--align-${this.align}`:""}\n      ${null!=this.gutter&&""!==this.gutter.trim()?`pds-text--gutter-${this.gutter}`:""}\n      ${null!=this.size&&""!==this.size.trim()?`pds-text--size-${this.size}`:""}\n      ${null!=this.weight&&""!==this.weight.trim()?`pds-text--weight-${this.weight}`:""}\n      ${null!=this.decoration&&""!==this.decoration.trim()?`pds-text--decoration-${this.decoration}`:""}\n    `;return i(t,{key:"3b9efbad7872410a7e07438801ec17382282ab16",ref:t=>this.contentEl=t,style:this.color&&s(this.color),class:e,part:"content"},i("slot",{key:"0784e6aee6ce23f93f0e3c077da5fa3ca944aebb"}))}get el(){return this}static get watchers(){return{truncate:[{handleTruncateChange:0}],size:[{validateSize:0}]}}static get style(){return":host{display:inline}:host([decoration=underline-dotted])>*{-webkit-text-decoration-color:var(--pine-color-text-tertiary);text-decoration-color:var(--pine-color-text-tertiary);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-decoration-thickness:12%;text-underline-offset:0.3rem;text-underline-position:under}:host([decoration=strikethrough])>*{text-decoration:line-through}h1{font:var(--pine-typography-heading-1);letter-spacing:var(--pine-letter-spacing-heading-1)}h2{font:var(--pine-typography-heading-2);letter-spacing:var(--pine-letter-spacing-heading-2)}h3{font:var(--pine-typography-heading-3);letter-spacing:var(--pine-letter-spacing-heading-3)}h4{font:var(--pine-typography-heading-4);letter-spacing:var(--pine-letter-spacing-heading-4)}h5{font:var(--pine-typography-heading-5);letter-spacing:var(--pine-letter-spacing-heading-5)}h6{font:var(--pine-typography-heading-6);letter-spacing:var(--pine-letter-spacing-heading-6)}code,em,p,pre,strong{font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing)}code,pre{font-family:monospace;letter-spacing:0;line-height:1}em{font-style:normal}strong{font-weight:bolder}:host([truncate]){display:block;min-width:0}:host([truncate])>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([italic])>*{font-style:italic}.pds-text{color:var(--color, var(--pine-color-text));margin:var(--pine-dimension-none)}.pds-text--size-2xl{font-size:var(--pine-font-size-body-2xl)}.pds-text--size-xl{font-size:var(--pine-font-size-body-xl)}.pds-text--size-lg{font-size:var(--pine-font-size-body-lg)}.pds-text--size-md{font-size:var(--pine-font-size-body-md)}.pds-text--size-sm{font-size:var(--pine-font-size-body-sm)}.pds-text--size-xs{font-size:var(--pine-font-size-body-xs)}.pds-text--size-2xs{font-size:var(--pine-font-size-body-2xs)}.pds-text--size-h1{font-size:var(--pine-font-size-heading-1)}.pds-text--size-h2{font-size:var(--pine-font-size-heading-2)}.pds-text--size-h3{font-size:var(--pine-font-size-heading-3)}.pds-text--size-h4{font-size:var(--pine-font-size-heading-4)}.pds-text--size-h5{font-size:var(--pine-font-size-heading-5)}.pds-text--size-h6{font-size:var(--pine-font-size-heading-6)}.pds-text--weight-extra-light{font-weight:var(--pine-font-weight-extra-light)}.pds-text--weight-light{font-weight:var(--pine-font-weight-light)}.pds-text--weight-regular{font-weight:var(--pine-font-weight-regular)}.pds-text--weight-medium{font-weight:var(--pine-font-weight-medium)}.pds-text--weight-semibold{font-weight:var(--pine-font-weight-semi-bold)}.pds-text--weight-bold{font-weight:var(--pine-font-weight-bold)}.pds-text--gutter-2xl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}.pds-text--gutter-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-text--gutter-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-text--gutter-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-text--gutter-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-text--gutter-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-text--gutter-2xs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-text--align-start{text-align:start}.pds-text--align-center{text-align:center}.pds-text--align-end{text-align:end}.pds-text--align-justify{text-align:justify}"}},[257,"pds-text",{align:[1],color:[1],decoration:[1],gutter:[1],italic:[4],size:[1],weight:[1],tag:[1],truncate:[516]},void 0,{truncate:[{handleTruncateChange:0}],size:[{validateSize:0}]}]);function h(){"undefined"!=typeof customElements&&["pds-text"].forEach((t=>{"pds-text"===t&&(customElements.get(n(t))||customElements.define(n(t),p))}))}export{p as P,d as T,h as d}

package/components/pds-textarea.js

@@ -1,82 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { i as isRequired, P as PdsLabel, a as assignDescription, m as messageId } from './pds-label.js';
-
-const pdsTextareaCss = ":host{--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--box-shadow-focus:0 0 0 2px var(--color-focus-visible-outline);--box-shadow-focus-error:0 0 0 2px var(--color-focus-visible-outline-error);--color:var(--pine-color-charcoal-400);--color-background:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-200);--color-border-default:var(--pine-color-grey-400);--color-border-error:var(--pine-color-red-300);--color-border-focus-visible:var(--pine-color-grey-300);--color-border-hover:var(--pine-color-grey-500);--color-disabled-default:var(--pine-color-charcoal-200);--color-error-default:var(--pine-color-red-300);--color-focus-visible-outline:var(--pine-color-blue-200);--color-focus-visible-outline-error:var(--pine-color-red-200);--color-placeholder-default:var(--pine-color-charcoal-200);--font-size-field:var(--pine-font-size-100);--font-size-helper-message:var(--pine-font-size-075);--font-size-label:var(--pine-font-size-100);--font-weight-field:var(--pine-font-weight-normal);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-field:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-label:var(--pine-line-height-150);--spacing-margin-block-end-label:var(--pine-spacing-100);--spacing-margin-block-start-helper-message:var(--pine-spacing-100);--spacing-padding-block-field:var(--pine-spacing-100);--spacing-padding-inline-field:var(--pine-spacing-200);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-margin-block-end-label);margin-block-end:var(--spacing-margin-block-end-label)}.pds-textarea__field{background-color:var(--color-background);border:var(--pine-border-interactive-default);border-radius:var(--pine-border-radius-md);font-family:inherit;font-size:var(--font-size-field);font-weight:var(--font-weight-field);line-height:var(--line-height-field);padding:var(--spacing-padding-block-field) var(--spacing-padding-inline-field)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border-color:var(--color-border-hover)}.pds-textarea__field:disabled{background-color:var(--color-background-disabled);color:var(--color-disabled-default);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-moz-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::placeholder{color:var(--color-placeholder-default)}.pds-textarea__field.is-invalid{border-color:var(--color-border-error)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__helper-message{font-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-before:var(--spacing-margin-block-start-helper-message);margin-block-start:var(--spacing-margin-block-start-helper-message)}.pds-textarea__error-message{color:var(--color-error-default)}";
-const PdsTextareaStyle0 = pdsTextareaCss;
-
-const PdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class PdsTextarea extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.pdsTextareaChange = createEvent(this, "pdsTextareaChange", 7);
-        this.onTextareaChange = (ev) => {
-            const textarea = ev.target;
-            isRequired(textarea, this);
-            if (textarea) {
-                this.value = textarea.innerHTML;
-            }
-            this.pdsTextareaChange.emit({ value: this.value, event: ev });
-        };
-        this.componentId = undefined;
-        this.disabled = false;
-        this.errorMessage = undefined;
-        this.helperMessage = undefined;
-        this.invalid = false;
-        this.label = undefined;
-        this.name = this.componentId;
-        this.placeholder = undefined;
-        this.readonly = false;
-        this.required = false;
-        this.rows = undefined;
-        this.value = undefined;
-    }
-    textareaClassNames() {
-        const classNames = ['pds-textarea__field'];
-        if (this.invalid && this.invalid === true) {
-            classNames.push('is-invalid');
-        }
-        return classNames.join('  ');
-    }
-    render() {
-        return (h(Host, { key: 'f58ccd5b20fc30c6e6153e04e98b27fe265040af', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '480b51012d0f7a05d83fb8cb359d2bc3a4e82189', class: "pds-textarea" }, this.label &&
-            h(PdsLabel, { key: '0b34ee6ee8eec6891c00596f840d028ab6ac36bb', htmlFor: this.componentId, text: this.label }), h("textarea", { key: '6f066ce38aaec3257bddd69715118aa5740723c1', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onChange: this.onTextareaChange }, this.value), this.helperMessage &&
-            h("p", { key: '91c66558978cdbb3191c0af31c34c2647749c01a', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'da8320d10ace733c7181ab3c6827da99d94d7ebd', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, this.errorMessage))));
-    }
-    get el() { return this; }
-    static get style() { return PdsTextareaStyle0; }
-}, [1, "pds-textarea", {
-        "componentId": [1, "component-id"],
-        "disabled": [4],
-        "errorMessage": [1, "error-message"],
-        "helperMessage": [1, "helper-message"],
-        "invalid": [1028],
-        "label": [1],
-        "name": [1],
-        "placeholder": [1],
-        "readonly": [4],
-        "required": [4],
-        "rows": [2],
-        "value": [1025]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-textarea"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-textarea":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsTextarea$1);
-            }
-            break;
-    } });
-}
-
-const PdsTextarea = PdsTextarea$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsTextarea, defineCustomElement };
-
-//# sourceMappingURL=pds-textarea.js.map
+import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as a,Host as s,transformTag as r}from"@stencil/core/internal/client";import{i as o,b as n,e as l,a as d,m as c}from"./form.js";import{d as h,f as p,c as u}from"./utils.js";import{i as b,a as m}from"./attributes.js";import{h as x}from"./index2.js";import{f as v}from"./i18n-format.js";import{d as g}from"./pds-icon2.js";const f=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.pdsBlur=i(this,"pdsBlur",7),this.pdsFocus=i(this,"pdsFocus",7),this.pdsInput=i(this,"pdsInput",7),this.pdsTextareaChange=i(this,"pdsTextareaChange",7),this.pdsKeyDown=i(this,"pdsKeyDown",7),this.inheritedAttributes={},this._type="textarea",this.disabled=!1,this.invalid=!1,this.name=this.componentId,this.readonly=!1,this.required=!1,this.value="",this.hasFocus=!1,this.hasAction=!1,this.characterCountLabel="{current} of {max} characters",this.onBlur=e=>{this.hasFocus=!1,this.focusedValue!==this.value&&this.emitValueChange(e),this.pdsBlur.emit(e)},this.onFocus=e=>{this.hasFocus=!0,this.focusedValue=this.value,this.pdsFocus.emit(e)},this.onInput=e=>{const t=e.target;t&&(this.maxLength&&t.value.length>this.maxLength&&(t.value=t.value.substring(0,this.maxLength)),this.value=t.value||""),this.emitInputChange(e),this.maxLength&&"undefined"!=typeof ResizeObserver&&requestAnimationFrame((()=>{this.updateCharacterCounterPosition()}))},this.onTextareaChange=e=>{this.emitValueChange(e)},this.onKeyDown=e=>{this.pdsKeyDown.emit(e)}}async setFocus(){this.nativeTextarea&&this.nativeTextarea.focus()}debounceChanged(){const{pdsInput:e,debounce:t,originalPdsInput:i}=this;this.pdsInput=void 0===t?null!=i?i:e:h(e,t),p(e)}valueChanged(){const e=this.nativeTextarea,t=this.getValue();e&&e.value!==t&&(e.value=t),this.updateFormValue(),this.maxLength&&"undefined"!=typeof ResizeObserver&&this.updateCharacterCounterPosition()}maxLengthChanged(){if(this.resizeObserver&&this.resizeObserver.disconnect(),this.maxLength&&this.nativeTextarea&&this.setupResizeObserver(),!o()&&this.internals&&this.internals.setValidity&&this.nativeTextarea){const e=this.nativeTextarea.value.length>(this.maxLength||0);this.internals.setValidity({tooLong:e},e?"Value exceeds maxLength":"",this.nativeTextarea)}}emitInputChange(e){const{value:t}=this;this.pdsInput.emit({value:t,event:e})}emitValueChange(e){const t=e.target;n(t,this);const{value:i}=t,a=null==i?i:""+i;this.focusedValue=a,this.pdsTextareaChange.emit({value:a,event:e})}getValue(){return this.value||""}textareaClassNames(){const e=["pds-textarea__field"];return this.invalid&&!0===this.invalid&&e.push("is-invalid"),e.join("  ")}connectedCallback(){var e;null!==(e=this.originalPdsInput)&&void 0!==e||(this.originalPdsInput=this.pdsInput),this.debounceChanged(),this.el.attachInternals&&!this.internals&&(this.internals=this.el.attachInternals())}disconnectedCallback(){u(this.pdsInput),this.resizeObserver&&this.resizeObserver.disconnect()}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},b(this.el)),m(this.el)),this.hasAction=null!==this.el.querySelector('[slot="action"]')}componentDidLoad(){this.updateFormValue(),this.setupResizeObserver(),l(this.el,(()=>this._type))}setupResizeObserver(){this.maxLength&&this.nativeTextarea&&"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>{requestAnimationFrame((()=>{this.updateCharacterCounterPosition()}))})),this.resizeObserver.observe(this.nativeTextarea),requestAnimationFrame((()=>{this.updateCharacterCounterPosition()})))}updateCharacterCounterPosition(){if(!this.characterCounter||!this.nativeTextarea)return;if("undefined"==typeof ResizeObserver)return;if(0===this.characterCounter.offsetWidth||0===this.characterCounter.offsetHeight)return;const e=this.nativeTextarea.offsetWidth,t=this.nativeTextarea.offsetHeight,i=this.characterCounter.offsetWidth,a=this.characterCounter.offsetHeight,s=t-a-8,r=Math.max(8,Math.min(e-i-8,e-i-8)),o=Math.max(8,Math.min(s,t-a-8));this.characterCounter.style.position="absolute",this.characterCounter.style.left=r+"px",this.characterCounter.style.top=o+"px",this.characterCounter.style.right="auto",this.characterCounter.style.bottom="auto"}renderCharacterCounter(){if(!this.maxLength)return null;const e=this.getValue().length;return a("div",{class:"pds-textarea__character-counter",ref:e=>this.characterCounter=e,role:"status","aria-live":"polite","aria-label":v(this.characterCountLabel,{current:e,max:this.maxLength})},e," / ",this.maxLength)}renderAction(){return null!==this.el.querySelector('[slot="action"]')?a("div",{class:"pds-textarea__action",part:"action"},a("slot",{name:"action"})):null}updateFormValue(){if(!o()&&this.internals&&this.internals.setFormValue){const e=this.getValue();this.internals.setFormValue(e||null),this.nativeTextarea&&this.internals&&this.internals.setValidity&&this.internals.setValidity(this.nativeTextarea.validity,this.nativeTextarea.validationMessage,this.nativeTextarea)}}formResetCallback(){this.value="",this.updateFormValue()}formDisabledCallback(e){this.disabled=e}formStateRestoreCallback(e){if("string"==typeof e)this.value=e;else if(e instanceof FormData&&this.name){const t=e.get(this.name);"string"==typeof t&&(this.value=t)}}render(){const e=this.getValue();return a(s,{key:"96f8863a39579b421057fa9b2857753785d4c585","aria-disabled":this.disabled?"true":null,"aria-readonly":this.readonly?"true":null,"has-action":this.hasAction&&!this.hideLabel?"true":null},a("div",{key:"89ae283a1674af03795c0443ee7fea2bac658c9e",class:"pds-textarea"},this.label&&a("div",{key:"7da482f50cfbf7361c457d79e9185bdf204d728d",class:"pds-textarea__label-wrapper"},a("label",{key:"3c1a24beae7a190e11a686c4f15dbc175221db0b",htmlFor:this.componentId},a("span",{key:"7d2f5618fe0893bca5926237adfc610adfaf7cc7",class:this.hideLabel?"visually-hidden":""},this.label)),!this.hideLabel&&this.renderAction()),a("div",{key:"371d16fe7e0446658316d4f2047776ef4429346c",class:"pds-textarea__field-wrapper"},a("textarea",Object.assign({key:"6e433b544a20b82d16ce8522196c41ca8b22411f",ref:e=>this.nativeTextarea=e,"aria-describedby":d(this.componentId,this.invalid,this.helperMessage,this.errorMessage),"aria-invalid":this.invalid?"true":void 0,autocomplete:this.autocomplete,class:this.textareaClassNames(),disabled:this.disabled,id:this.componentId,maxlength:this.maxLength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,rows:this.rows,onBlur:this.onBlur,onChange:this.onTextareaChange,onFocus:this.onFocus,onInput:this.onInput,onKeyDown:this.onKeyDown},this.inheritedAttributes),e),this.renderCharacterCounter()),this.helperMessage&&a("p",{key:"7b7117493340f25be2c4d18b48e00add775155d3",class:"pds-textarea__helper-message",id:c(this.componentId,"helper")},this.helperMessage),this.invalid&&a("p",{key:"79a604af17aa9a6735d44aa52a858881e053de43","aria-live":"assertive",class:"pds-textarea__error-message",id:c(this.componentId,"error")},a("pds-icon",{key:"765e5df4a34b583183f1ceeb92fb596067d4a212","aria-hidden":"true",icon:x,size:"small"}),this.errorMessage)))}static get formAssociated(){return!0}get el(){return this}static get watchers(){return{debounce:[{debounceChanged:0}],value:[{valueChanged:0}],maxLength:[{maxLengthChanged:0}]}}static get style(){return":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host{--pine-input-color-background-danger:var(--pine-color-red-050)}:host{display:inline-block;width:100%}:host([aria-readonly=true]) textarea{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([aria-readonly=true])) .pds-textarea__field:not(.is-invalid){background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-accent);color:var(--pine-color-text-accent)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([aria-readonly=true])) .pds-textarea__field:not(.is-invalid):hover{border-color:var(--pine-color-accent-hover)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([aria-readonly=true])) .pds-textarea__field:not(.is-invalid):focus-visible{outline-color:var(--pine-color-focus-ring)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([aria-readonly=true])) .pds-textarea__field:not(.is-invalid)~.pds-textarea__character-counter{background:color-mix(in srgb, var(--pine-color-accent-disabled) 80%, transparent);color:var(--pine-color-text-accent)}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-textarea__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.pds-textarea__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}label{display:block;-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}.pds-textarea__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-textarea__error-message{color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-textarea__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-textarea__field-wrapper{display:inline-block;position:relative;width:100%}.pds-textarea__field{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:calc(var(--pine-dimension-xl) * 2);min-width:calc(var(--pine-dimension-xl) * 2);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);resize:both;width:100%}:host([max-length]) .pds-textarea__field{padding-bottom:calc(var(--pine-dimension-xs) + var(--pine-dimension-md))}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-textarea__field:disabled{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-textarea__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-textarea__field.is-invalid{background-color:var(--pine-color-red-950)}.pds-textarea__field.is-invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-textarea__character-counter{background:color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);border-radius:calc(var(--pine-dimension-2xs) * 0.5);color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);padding:calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;z-index:var(--pine-z-index)}:host([aria-disabled=true]) .pds-textarea__character-counter{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled)}:host([aria-readonly=true]) .pds-textarea__character-counter{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea__field.is-invalid~.pds-textarea__character-counter{background-color:var(--pine-input-color-background-danger)}:host-context([data-theme=dark]) .pds-textarea__field.is-invalid~.pds-textarea__character-counter{background-color:var(--pine-color-red-950)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}"}},[321,"pds-textarea",{autocomplete:[1],componentId:[1,"component-id"],disabled:[4],debounce:[2],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[1028],label:[1],hideLabel:[4,"hide-label"],name:[1],placeholder:[1],readonly:[4],required:[4],rows:[2],maxLength:[514,"max-length"],highlight:[516],value:[1025],characterCountLabel:[1,"character-count-label"],hasFocus:[32],hasAction:[32],setFocus:[64]},void 0,{debounce:[{debounceChanged:0}],value:[{valueChanged:0}],maxLength:[{maxLengthChanged:0}]}]),_=f,y=function(){"undefined"!=typeof customElements&&["pds-textarea","pds-icon"].forEach((e=>{switch(e){case"pds-textarea":customElements.get(r(e))||customElements.define(r(e),f);break;case"pds-icon":customElements.get(r(e))||g()}}))};export{_ as PdsTextarea,y as defineCustomElement}

package/components/pds-toast.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface PdsToast extends Components.PdsToast, HTMLElement {}
+export const PdsToast: {
+    prototype: PdsToast;
+    new (): PdsToast;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;