@scania/tegel 1.47.2 → 1.48.0

package/dist/components/tds-modal.js

@@ -1,262 +1 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { h as hasSlot } from './p-ae110fc2.js';
-import { g as generateUniqueId } from './p-11648030.js';
-import { d as defineCustomElement$2 } from './p-f086ba26.js';
-
-const modalCss = ":host,:root{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}.tds-modal{box-sizing:border-box;box-shadow:var(--tds-modal-box-shadow);background-color:var(--background-elevation-layer-02);margin:auto;position:relative;border-radius:var(--radius-narrow);max-height:85vh;overflow-y:auto;pointer-events:auto}.tds-modal *{box-sizing:border-box}.tds-modal:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background-clip:padding-box}.tds-modal::-webkit-scrollbar{width:var(--tds-scrollbar-width)}.tds-modal::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}.tds-modal::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}.tds-modal::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){.tds-modal{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}.tds-modal__actions-sticky{overflow:hidden;display:flex;flex-direction:column}.tds-modal__actions-sticky .body{font-family:var(--body-01-font-family);font-size:var(--body-01-font-size);line-height:var(--body-01-line-height);font-weight:var(--body-01-font-weight);letter-spacing:var(--body-01-letter-spacing);text-transform:var(--body-01-text-transform);max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky slot[name=actions]{bottom:-1px;left:0;right:0;background-color:var(--background-elevation-layer-02);padding:24px 16px 16px;display:flex;gap:16px}.tds-modal__actions-static slot[name=actions]{background-color:var(--background-elevation-layer-02);display:flex;gap:16px;padding:24px 16px 16px}@media (min-width: 320px){.tds-modal-xs{width:100%}.tds-modal-sm{width:100%}.tds-modal-md{width:100%}.tds-modal-lg{width:100%}}@media (min-width: 672px){.tds-modal-xs{width:50%}.tds-modal-sm{width:62.5%}.tds-modal-md{width:75%}.tds-modal-lg{width:100%}}@media (min-width: 1056px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:43.75%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1312px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1584px){.tds-modal-xs{width:25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:50%}.tds-modal-lg{width:75%}}@media (max-width: 320px){.tds-modal-md,.tds-modal-lg,.tds-modal-sm{height:100%}.tds-modal-md slot[name=actions]::slotted(*),.tds-modal-lg slot[name=actions]::slotted(*),.tds-modal-sm slot[name=actions]::slotted(*){display:flex}}.header{display:flex;padding:16px;position:sticky;top:0;background-color:var(--background-elevation-layer-02);z-index:1}.header,slot[name=header]::slotted(*){font-family:var(--headline-05-font-family);font-size:var(--headline-05-font-size);line-height:var(--headline-05-line-height);font-weight:var(--headline-05-font-weight);letter-spacing:var(--headline-05-letter-spacing);text-transform:var(--headline-05-text-transform);color:var(--foreground-text-strong);margin:0;flex:1}.body{font-family:var(--body-01-font-family);font-size:var(--body-01-font-size);line-height:var(--body-01-line-height);font-weight:var(--body-01-font-weight);letter-spacing:var(--body-01-letter-spacing);text-transform:var(--body-01-text-transform);color:var(--foreground-text-strong);overflow-y:visible;padding:0 16px 16px}.body:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background-clip:padding-box}.body::-webkit-scrollbar{width:var(--tds-scrollbar-width)}.body::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}.body::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}.body::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){.body{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}.tds-modal-backdrop{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--tds-modal-backdrop-background);pointer-events:auto}.tds-modal-backdrop *{box-sizing:border-box}button.tds-modal-close{margin:0 0 auto auto;background-color:transparent;border:0;padding:0;appearance:unset}.tds-modal-close{display:inline-block;height:auto;color:var(--foreground-text-strong);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}@media (min-width: 320px){.tds-modal-close{margin-left:16px}}@media (min-width: 1056px){.tds-modal-close{margin-left:48px}}.tds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.tds-modal-close-btn{margin-left:16px}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:48px}}.tds-modal-close-btn svg{fill:var(--foreground-text-strong)}.tds-modal-overflow{overflow:hidden}:host{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;padding:0 16px;z-index:700;pointer-events:none}:host *{box-sizing:border-box}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host(.show){display:flex}:host(.hide){display:none}";
-const TdsModalStyle0 = modalCss;
-
-const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.tdsClose = createEvent(this, "tdsClose", 7);
-        this.tdsOpen = createEvent(this, "tdsOpen", 7);
-        this.handleClose = (event) => {
-            const closeEvent = this.tdsClose.emit(event);
-            this.returnFocusOnClose();
-            if (closeEvent.defaultPrevented) {
-                return;
-            }
-            this.isShown = false;
-        };
-        this.handleShow = () => {
-            const showEvent = this.tdsOpen.emit();
-            if (showEvent.defaultPrevented) {
-                return;
-            }
-            this.isShown = true;
-        };
-        /** Checks if click on Modal is on overlay, if so it closes the Modal if prevent is not true. */
-        this.handleOverlayClick = (event) => {
-            const targetList = event.composedPath();
-            const target = targetList[0];
-            if (target.classList[0] === 'tds-modal-close' ||
-                (target.classList[0] === 'tds-modal-backdrop' && this.prevent === false)) {
-                this.handleClose(event);
-            }
-        };
-        this.handleReferenceElementClick = (event) => {
-            if (this.isShown) {
-                this.handleClose(event);
-            }
-            else {
-                this.handleShow();
-            }
-        };
-        /** Check if there is a referenceElement or selector and adds event listener to them if so. */
-        this.setShowButton = () => {
-            var _a;
-            if (this.selector || this.referenceEl) {
-                const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : (this.selector ? document.querySelector(this.selector) : null);
-                if (referenceEl) {
-                    this.initializeReferenceElement(referenceEl);
-                }
-            }
-        };
-        /** Adds an event listener to the reference element that shows/closes the Modal. */
-        this.initializeReferenceElement = (referenceEl) => {
-            if (referenceEl) {
-                referenceEl.addEventListener('click', this.handleReferenceElementClick);
-            }
-        };
-        this.header = undefined;
-        this.prevent = false;
-        this.size = 'md';
-        this.actionsPosition = 'static';
-        this.selector = undefined;
-        this.referenceEl = undefined;
-        this.show = undefined;
-        this.closable = true;
-        this.tdsAlertDialog = 'dialog';
-        this.isShown = false;
-        this.activeElementIndex = 0;
-    }
-    /** Shows the Modal.  */
-    async showModal() {
-        this.isShown = true;
-        // Set focus on first element when opened
-        requestAnimationFrame(() => {
-            const focusableElements = this.getFocusableElements();
-            if (focusableElements.length > 0) {
-                focusableElements[0].focus();
-                this.activeElementIndex = 0;
-            }
-        });
-    }
-    /** Closes the Modal. */
-    async closeModal() {
-        this.isShown = false;
-        this.returnFocusOnClose();
-    }
-    /** Returns the current open state of the Modal. */
-    async isOpen() {
-        return this.isShown;
-    }
-    connectedCallback() {
-        if (this.closable === undefined) {
-            this.closable = true;
-        }
-        if (this.show !== undefined) {
-            this.isShown = this.show;
-        }
-        this.initializeModal();
-        if (this.header && hasSlot('header', this.host)) {
-            console.warn("Tegel Modal component: Using both header prop and header slot might break modal's design. Please use just one of them. ");
-        }
-        if (!this.selector && !this.referenceEl) {
-            console.warn('Tegel Modal: Missing focus origin. Please provide either a "referenceEl" or a "selector" to ensure focus returns to the element that opened the modal. If the modal is opened programmatically, this message can be ignored.');
-        }
-    }
-    componentWillLoad() {
-        this.initializeModal();
-    }
-    disconnectedCallback() {
-        this.cleanupModal();
-    }
-    /** Initializes or re-initializes the modal, setting up event listeners. */
-    async initializeModal() {
-        this.setDismissButtons();
-        this.setShowButton();
-    }
-    /** Cleans up event listeners and other resources. */
-    async cleanupModal() {
-        var _a;
-        if (this.selector || this.referenceEl) {
-            const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : (this.selector ? document.querySelector(this.selector) : null);
-            if (referenceEl) {
-                referenceEl.removeEventListener('click', this.handleReferenceElementClick);
-            }
-        }
-        this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {
-            dismissButton.removeEventListener('click', this.handleClose);
-        });
-    }
-    returnFocusOnClose() {
-        var _a;
-        const referenceElement = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : (this.selector ? document.querySelector(this.selector) : null);
-        if (!referenceElement) {
-            return; // no element to return focus to
-        }
-        const potentialReferenceElements = ['BUTTON', 'A', 'INPUT'];
-        const isNativeFocusable = potentialReferenceElements.includes(referenceElement.tagName);
-        if (isNativeFocusable) {
-            referenceElement.focus();
-        }
-        else {
-            // If referenced element is a custom element eg: tds-button we find the interactive element inside:
-            const interactiveElement = referenceElement.querySelector(potentialReferenceElements.join(','));
-            if (interactiveElement) {
-                interactiveElement.focus();
-            }
-        }
-    }
-    getFocusableElements() {
-        var _a, _b;
-        const focusableSelectors = [
-            'a[href]',
-            'button:not([disabled])',
-            'textarea:not([disabled])',
-            'input:not([disabled])',
-            'select:not([disabled])',
-            '[tabindex]:not([tabindex="-1"])',
-        ].join(',');
-        const focusableInShadowRoot = Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(focusableSelectors)) !== null && _b !== void 0 ? _b : []);
-        const focusableInSlots = Array.from(this.host.querySelectorAll(focusableSelectors));
-        /** Focusable elements */
-        return [...focusableInShadowRoot, ...focusableInSlots];
-    }
-    handleFocusTrap(event) {
-        if (event.key === 'Escape' && this.isShown && !this.prevent) {
-            this.handleClose(event);
-            return;
-        }
-        // Only trap focus if the modal is open
-        if (!this.isShown)
-            return;
-        // We care only about the Tab key
-        if (event.key !== 'Tab')
-            return;
-        const focusableElements = this.getFocusableElements();
-        // If there are no focusable elements
-        if (focusableElements.length === 0)
-            return;
-        event.preventDefault();
-        // Going backwards (Shift + Tab) on the first element => move to last
-        if (event.shiftKey) {
-            this.activeElementIndex -= 1;
-            if (this.activeElementIndex === -1) {
-                this.activeElementIndex = focusableElements.length - 1;
-            }
-        }
-        // // Going forwards (Tab) on the last element => move to first
-        if (!event.shiftKey) {
-            this.activeElementIndex += 1;
-            if (this.activeElementIndex === focusableElements.length) {
-                this.activeElementIndex = 0;
-            }
-        }
-        const nextElement = focusableElements[this.activeElementIndex];
-        nextElement.focus();
-    }
-    /** Adds an event listener to the dismiss buttons that closes the Modal. */
-    setDismissButtons() {
-        this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {
-            dismissButton.addEventListener('click', this.handleClose);
-        });
-    }
-    render() {
-        const usesHeaderSlot = hasSlot('header', this.host);
-        const usesActionsSlot = hasSlot('actions', this.host);
-        const headerId = this.header ? `tds-modal-header-${generateUniqueId()}` : undefined;
-        const bodyId = `tds-modal-body-${generateUniqueId()}`;
-        return (h(Host, { key: '64ec0269ed6369f5a298997f432095abf16cfe8e', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
-                show: this.isShown,
-                hide: !this.isShown,
-            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: 'ff7163da4e0d417f0b9e2d2669b65b4c3d980cb1', class: "tds-modal-backdrop" }), h("div", { key: '594ac64c3d54280f0654516429c934919beaeb5f', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '942924e09b8f95e2891471363fe8391d2488fae3', id: headerId, class: "header" }, this.header && h("div", { key: '85864122df840ff8fb2c42bc0cca02180a8e3b2f', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: '2c4b6bddbf1daf0afa33a5cf2dd34e3be175a1d8', name: "header" }), this.closable && (h("button", { key: 'de4e7e2461a10597fabf198a8431fbeb584daa99', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '628d4a4c906a7ed62cc52cb406229d8ef338beec', name: "cross", size: "20px" })))), h("div", { key: 'efd264c203b4c2a6cb745db03c0a023584521fa2', id: bodyId, class: "body" }, h("slot", { key: '83499fa7bf5719b88cdad06f51b7791a9fb2ec22', name: "body" })), usesActionsSlot && h("slot", { key: 'ef14e74d647f3c8483abd24205d476b16626d697', name: "actions" }))));
-    }
-    get host() { return this; }
-    static get style() { return TdsModalStyle0; }
-}, [1, "tds-modal", {
-        "header": [1],
-        "prevent": [4],
-        "size": [1],
-        "actionsPosition": [1, "actions-position"],
-        "selector": [1],
-        "referenceEl": [16],
-        "show": [4],
-        "closable": [4],
-        "tdsAlertDialog": [1, "tds-alert-dialog"],
-        "isShown": [32],
-        "activeElementIndex": [32],
-        "showModal": [64],
-        "closeModal": [64],
-        "isOpen": [64],
-        "initializeModal": [64],
-        "cleanupModal": [64]
-    }, [[10, "keydown", "handleFocusTrap"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["tds-modal", "tds-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "tds-modal":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, TdsModal$1);
-            }
-            break;
-        case "tds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const TdsModal = TdsModal$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { TdsModal, defineCustomElement };
+import{t,p as o,H as s,c as d,h as a,a as i}from"./index.js";import{h as e}from"./p-DDX6uFcm.js";import{g as r}from"./p-Cn4f8w1e.js";import{d as l}from"./p-C0fx1H4h.js";const n=o(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tdsClose=d(this,"tdsClose",7),this.tdsOpen=d(this,"tdsOpen",7),this.prevent=!1,this.size="md",this.actionsPosition="static",this.closable=!0,this.tdsAlertDialog="dialog",this.isShown=!1,this.activeElementIndex=0,this.handleClose=t=>{this.tdsClose.emit(t).defaultPrevented||(this.isShown=!1,this.returnFocusOnClose())},this.handleShow=()=>{this.tdsOpen.emit().defaultPrevented||(this.isShown=!0,this.onOpen())},this.handleOverlayClick=t=>{const o=t.composedPath()[0];("tds-modal-close"===o.classList[0]||"tds-modal-backdrop"===o.classList[0]&&!1===this.prevent)&&this.handleClose(t)},this.handleReferenceElementClick=t=>{this.isShown?this.handleClose(t):this.handleShow()},this.setShowButton=()=>{var t;if(this.selector||this.referenceEl){const o=null!==(t=this.referenceEl)&&void 0!==t?t:this.selector?document.querySelector(this.selector):null;o&&this.initializeReferenceElement(o)}},this.initializeReferenceElement=t=>{t&&t.addEventListener("click",this.handleReferenceElementClick)}}async showModal(){this.isShown=!0,this.onOpen()}async closeModal(){this.isShown=!1,this.returnFocusOnClose()}async isOpen(){return this.isShown}handleShowPropChange(t,o){t!==o&&void 0!==t&&(this.isShown=t,t?this.onOpen():this.returnFocusOnClose())}connectedCallback(){void 0===this.closable&&(this.closable=!0),void 0!==this.show&&(this.isShown=this.show),this.initializeModal(),this.header&&e("header",this.host)&&console.warn("Tegel Modal component: Using both header prop and header slot might break modal's design. Please use just one of them. "),this.selector||this.referenceEl||console.warn('Tegel Modal: Missing focus origin. Please provide either a "referenceEl" or a "selector" to ensure focus returns to the element that opened the modal. If the modal is opened programmatically, this message can be ignored.')}componentWillLoad(){this.initializeModal()}disconnectedCallback(){this.cleanupModal()}async initializeModal(){this.setDismissButtons(),this.setShowButton()}async cleanupModal(){var t;if(this.selector||this.referenceEl){const o=null!==(t=this.referenceEl)&&void 0!==t?t:this.selector?document.querySelector(this.selector):null;o&&o.removeEventListener("click",this.handleReferenceElementClick)}this.host.querySelectorAll("[data-dismiss-modal]").forEach((t=>{t.removeEventListener("click",this.handleClose)}))}returnFocusOnClose(){var t;const o=null!==(t=this.referenceEl)&&void 0!==t?t:this.selector?document.querySelector(this.selector):null;if(!o)return;const s=["BUTTON","A","INPUT"],d=s.includes(o.tagName)?o:o.querySelector(s.join(","));d&&(d.classList.remove("active"),d.focus())}getFocusableElements(){var t,o;const s='a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';return[...Array.from(null!==(o=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelectorAll(s))&&void 0!==o?o:[]),...Array.from(this.host.querySelectorAll(s))]}resetScrollPosition(){var t;const o=this.host.shadowRoot,s=null!==(t=null==o?void 0:o.querySelector(".tds-modal__actions-sticky .body"))&&void 0!==t?t:null==o?void 0:o.querySelector(".tds-modal");null==s||s.scrollTo(0,0)}focusFirstElement(){var t,o;const s='a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])',d=Array.from(this.host.querySelectorAll(s));if(d.length>0)d[0].focus(),this.activeElementIndex=this.getFocusableElements().indexOf(d[0]);else{const d=Array.from(null!==(o=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelectorAll(s))&&void 0!==o?o:[]);d.length>0&&(d[0].focus(),this.activeElementIndex=0)}}onOpen(){this.focusFirstElement(),requestAnimationFrame((()=>{this.resetScrollPosition()}))}handleFocusTrap(t){if("Escape"===t.key&&this.isShown&&!this.prevent)return void this.handleClose(t);if(!this.isShown)return;if("Tab"!==t.key)return;const o=this.getFocusableElements();0!==o.length&&(t.preventDefault(),t.shiftKey&&(this.activeElementIndex-=1,-1===this.activeElementIndex&&(this.activeElementIndex=o.length-1)),t.shiftKey||(this.activeElementIndex+=1,this.activeElementIndex===o.length&&(this.activeElementIndex=0)),o[this.activeElementIndex].focus())}setDismissButtons(){this.host.querySelectorAll("[data-dismiss-modal]").forEach((t=>{t.addEventListener("click",this.handleClose)}))}render(){const t=e("header",this.host),o=e("actions",this.host),s=this.header?"tds-modal-header-"+r():void 0,d="tds-modal-body-"+r();return a(i,{key:"38bd184949cbc0e6d7547bf9bc7cf3b3c82cabee",role:this.tdsAlertDialog,"aria-modal":"true","aria-describedby":d,"aria-labelledby":s,class:{show:this.isShown,hide:!this.isShown},onClick:t=>this.handleOverlayClick(t)},a("div",{key:"40bb9e834a44e0664958ff6ea3dd4ec404b75044",class:"tds-modal-backdrop"}),a("div",{key:"ef8dfcde8981a5242f552db28eeaf1099c2a5f26",class:`tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}`,tabindex:"-1"},a("div",{key:"4295710b96f997295e5ae5b4f16e7b696b8dd7b6",id:s,class:"header"},this.header&&a("div",{key:"b381c7f0dcdd04220badff60d5b48ecf8d9b57da",class:"header-text"},this.header),t&&a("slot",{key:"18f82e6222e91db9e4a2b299b1ee3d3db071a691",name:"header"}),this.closable&&a("button",{key:"fc729f3da82fe8ec4faa46973399508cca4c1bdd",class:"tds-modal-close","aria-label":"close",onClick:t=>this.handleClose(t)},a("tds-icon",{key:"51b5332510518499e947ac45d62c60be2fffac3a",name:"cross",size:"20px"}))),a("div",{key:"25ad7f69e11fdcb61150103f48be124d9a537167",id:d,class:"body"},a("slot",{key:"e7be6f3ac849df52546fc97581b7b23a8e69e1d1",name:"body"})),o&&a("slot",{key:"ac896cffd413b46d488c9466a5ed7db1a8049ff8",name:"actions"})))}get host(){return this}static get watchers(){return{show:[{handleShowPropChange:0}]}}static get style(){return":host,:root{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}.tds-modal{box-sizing:border-box;box-shadow:var(--tds-modal-box-shadow);background-color:var(--background-elevation-layer-02);margin:auto;position:relative;border-radius:var(--radius-narrow);max-height:85vh;overflow-y:auto;pointer-events:auto}.tds-modal *{box-sizing:border-box}.tds-modal:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background-clip:padding-box}.tds-modal::-webkit-scrollbar{width:var(--tds-scrollbar-width)}.tds-modal::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}.tds-modal::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}.tds-modal::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){.tds-modal{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}.tds-modal__actions-sticky{overflow:hidden;display:flex;flex-direction:column}.tds-modal__actions-sticky .body{font-family:var(--body-01-font-family);font-size:var(--body-01-font-size);line-height:var(--body-01-line-height);font-weight:var(--body-01-font-weight);letter-spacing:var(--body-01-letter-spacing);text-transform:var(--body-01-text-transform);max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky slot[name=actions]{bottom:-1px;left:0;right:0;background-color:var(--background-elevation-layer-02);padding:24px 16px 16px;display:flex;gap:16px}.tds-modal__actions-static slot[name=actions]{background-color:var(--background-elevation-layer-02);display:flex;gap:16px;padding:24px 16px 16px}@media (min-width: 320px){.tds-modal-xs{width:100%}.tds-modal-sm{width:100%}.tds-modal-md{width:100%}.tds-modal-lg{width:100%}}@media (min-width: 672px){.tds-modal-xs{width:50%}.tds-modal-sm{width:62.5%}.tds-modal-md{width:75%}.tds-modal-lg{width:100%}}@media (min-width: 1056px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:43.75%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1312px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1584px){.tds-modal-xs{width:25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:50%}.tds-modal-lg{width:75%}}@media (max-width: 320px){.tds-modal-md,.tds-modal-lg,.tds-modal-sm{height:100%}.tds-modal-md slot[name=actions]::slotted(*),.tds-modal-lg slot[name=actions]::slotted(*),.tds-modal-sm slot[name=actions]::slotted(*){display:flex}}.header{display:flex;padding:16px;position:sticky;top:0;background-color:var(--background-elevation-layer-02);z-index:1}.header,slot[name=header]::slotted(*){font-family:var(--headline-05-font-family);font-size:var(--headline-05-font-size);line-height:var(--headline-05-line-height);font-weight:var(--headline-05-font-weight);letter-spacing:var(--headline-05-letter-spacing);text-transform:var(--headline-05-text-transform);color:var(--foreground-text-strong);margin:0;flex:1}.body{font-family:var(--body-01-font-family);font-size:var(--body-01-font-size);line-height:var(--body-01-line-height);font-weight:var(--body-01-font-weight);letter-spacing:var(--body-01-letter-spacing);text-transform:var(--body-01-text-transform);color:var(--foreground-text-strong);overflow-y:visible;padding:0 16px 16px}.body:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background-clip:padding-box}.body::-webkit-scrollbar{width:var(--tds-scrollbar-width)}.body::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}.body::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}.body::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){.body{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}.tds-modal-backdrop{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--tds-modal-backdrop-background);pointer-events:auto}.tds-modal-backdrop *{box-sizing:border-box}button.tds-modal-close{margin:0 0 auto auto;background-color:transparent;border:0;padding:0;appearance:unset}.tds-modal-close{display:inline-block;height:auto;color:var(--foreground-text-strong);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}@media (min-width: 320px){.tds-modal-close{margin-left:16px}}@media (min-width: 1056px){.tds-modal-close{margin-left:48px}}.tds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.tds-modal-close-btn{margin-left:16px}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:48px}}.tds-modal-close-btn svg{fill:var(--foreground-text-strong)}.tds-modal-overflow{overflow:hidden}:host{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;padding:0 16px;z-index:700;pointer-events:none}:host *{box-sizing:border-box}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host(.show){display:flex}:host(.hide){display:none}"}},[257,"tds-modal",{header:[1],prevent:[4],size:[1],actionsPosition:[1,"actions-position"],selector:[1],referenceEl:[16],show:[4],closable:[4],tdsAlertDialog:[1,"tds-alert-dialog"],isShown:[32],activeElementIndex:[32],showModal:[64],closeModal:[64],isOpen:[64],initializeModal:[64],cleanupModal:[64]},[[10,"keydown","handleFocusTrap"]],{show:[{handleShowPropChange:0}]}]);function h(){"undefined"!=typeof customElements&&["tds-modal","tds-icon"].forEach((o=>{switch(o){case"tds-modal":customElements.get(t(o))||customElements.define(t(o),n);break;case"tds-icon":customElements.get(t(o))||l()}}))}h();const c=n,b=h;export{c as TdsModal,b as defineCustomElement}

package/dist/components/tds-navigation-tab.js

@@ -1,65 +1 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-
-const navigationTabCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;padding:26px 0}:host ::slotted(*:focus-visible)::before{content:\"\";position:absolute;left:0;right:0;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .navigation-tab-item:not(.selected)::after{width:0%;transition:width 0.15s ease-in-out 0s}:host .navigation-tab-item{position:relative}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover ::slotted(*){color:var(--tds-navigation-tabs-tab-color-hover)}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-navigation-tabs-tab-indicator-background-hover);z-index:1}:host .navigation-tab-item:hover:focus-within::after{bottom:3px}:host .selected ::slotted(*){color:var(--tds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-navigation-tabs-tab-indicator-background-active)}:host .disabled ::slotted(*){color:var(--tds-navigation-tabs-tab-color-disabled)}:host .disabled::after{content:none}:host .disabled ::slotted(*:hover){cursor:not-allowed;color:var(--tds-navigation-tabs-tab-color-disabled)}:host .disabled ::slotted(*:focus-visible){outline:none}:host(.last){margin-right:32px}";
-const TdsNavigationTabStyle0 = navigationTabCss;
-
-const TdsNavigationTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationTab extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.disabled = false;
-        this.selected = false;
-    }
-    /** @internal Method to set the Tab as selected. Used by the <tds-navigation-tabs> */
-    async setSelected(selected) {
-        this.selected = selected;
-    }
-    connectedCallback() {
-        const elements = this.host.querySelectorAll('button, a');
-        for (let index = 0; index < elements.length; index++) {
-            const element = elements[index];
-            if (!element.getAttribute('aria-controls')) {
-                console.warn('Tegel navigation-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel');
-            }
-            if (element.getAttribute('role') !== 'tab') {
-                console.warn('Tegel navigation-tab component: Interactive elements should have attribute role="tab"');
-            }
-            if (this.disabled) {
-                element.setAttribute('aria-disabled', 'true');
-            }
-            else {
-                element.removeAttribute('aria-disabled');
-            }
-        }
-    }
-    render() {
-        return (h(Host, { key: 'c0efa8fbffa68b4c81b7f337d260ed3e8023f7bc' }, h("div", { key: '759dbcb91ef4b320918bcc0dae18aa9f292f2bf5', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '9eaa20e00dc625bc96723cb937e45aaa58516aa8' }))));
-    }
-    get host() { return this; }
-    static get style() { return TdsNavigationTabStyle0; }
-}, [1, "tds-navigation-tab", {
-        "disabled": [4],
-        "selected": [32],
-        "setSelected": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["tds-navigation-tab"];
-    components.forEach(tagName => { switch (tagName) {
-        case "tds-navigation-tab":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, TdsNavigationTab$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const TdsNavigationTab = TdsNavigationTab$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { TdsNavigationTab, defineCustomElement };
+import{t,p as o,H as e,h as a,a as i}from"./index.js";const s=o(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.disabled=!1,this.selected=!1}async setSelected(t){this.selected=t}connectedCallback(){const t=this.host.querySelectorAll("button, a");for(let o=0;o<t.length;o++){const e=t[o];e.getAttribute("aria-controls")||console.warn("Tegel navigation-tab component: Interactive elements should have aria-controls attribute to link the tab to its corresponding panel"),"tab"!==e.getAttribute("role")&&console.warn('Tegel navigation-tab component: Interactive elements should have attribute role="tab"'),this.disabled?e.setAttribute("aria-disabled","true"):e.removeAttribute("aria-disabled")}}render(){return a(i,{key:"c0efa8fbffa68b4c81b7f337d260ed3e8023f7bc"},a("div",{key:"759dbcb91ef4b320918bcc0dae18aa9f292f2bf5",class:`navigation-tab-item  ${this.selected?"selected":""}\n           ${this.disabled?"disabled":""}`},a("slot",{key:"9eaa20e00dc625bc96723cb937e45aaa58516aa8"})))}get host(){return this}static get style(){return':host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;padding:26px 0}:host ::slotted(*:focus-visible)::before{content:"";position:absolute;left:0;right:0;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .navigation-tab-item:not(.selected)::after{width:0%;transition:width 0.15s ease-in-out 0s}:host .navigation-tab-item{position:relative}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover ::slotted(*){color:var(--tds-navigation-tabs-tab-color-hover)}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:" ";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-navigation-tabs-tab-indicator-background-hover);z-index:1}:host .navigation-tab-item:hover:focus-within::after{bottom:3px}:host .selected ::slotted(*){color:var(--tds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-navigation-tabs-tab-indicator-background-active)}:host .disabled ::slotted(*){color:var(--tds-navigation-tabs-tab-color-disabled)}:host .disabled::after{content:none}:host .disabled ::slotted(*:hover){cursor:not-allowed;color:var(--tds-navigation-tabs-tab-color-disabled)}:host .disabled ::slotted(*:focus-visible){outline:none}:host(.last){margin-right:32px}'}},[257,"tds-navigation-tab",{disabled:[4],selected:[32],setSelected:[64]}]);function n(){"undefined"!=typeof customElements&&["tds-navigation-tab"].forEach((o=>{"tds-navigation-tab"===o&&(customElements.get(t(o))||customElements.define(t(o),s))}))}n();const r=s,d=n;export{r as TdsNavigationTab,d as defineCustomElement}

package/dist/components/tds-navigation-tabs.js

@@ -1,240 +1 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-f086ba26.js';
-
-const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-navigation-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-navigation-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus::before,:host .scroll-left-button:focus::before{content:\"\";position:absolute;left:3px;right:3px;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
-const TdsNavigationTabsStyle0 = navigationTabsCss;
-
-const TdsNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationTabs extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.tdsChange = createEvent(this, "tdsChange", 7);
-        this.navWrapperElement = null; // reference to container with nav buttons
-        this.componentWidth = 0; // visible width of this component
-        this.buttonsWidth = 0; // total width of all nav items combined
-        this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
-        this.children = [];
-        this.clickHandlers = new WeakMap();
-        this.addResizeObserver = () => {
-            const resizeObserver = new ResizeObserver((entries) => {
-                entries.forEach((entry) => {
-                    const componentWidth = entry.contentRect.width;
-                    let buttonsWidth = 0;
-                    const navButtons = Array.from(this.host.children);
-                    navButtons.forEach((navButton) => {
-                        const style = window.getComputedStyle(navButton);
-                        buttonsWidth +=
-                            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-                    });
-                    this.componentWidth = componentWidth;
-                    this.buttonsWidth = buttonsWidth;
-                    this.scrollWidth = buttonsWidth - componentWidth;
-                    this.updateScrollButtons();
-                });
-            });
-            if (this.navWrapperElement)
-                resizeObserver.observe(this.navWrapperElement);
-        };
-        this.addEventListenerToTabs = () => {
-            this.children = Array.from(this.host.children);
-            this.children.map((item, index) => {
-                const clickHandler = () => {
-                    if (!item.disabled) {
-                        const tdsChangeEvent = this.tdsChange.emit({
-                            selectedTabIndex: this.children.indexOf(item),
-                        });
-                        if (!tdsChangeEvent.defaultPrevented) {
-                            this.children.forEach((element) => element.setSelected(false));
-                            item.setSelected(true);
-                            this.selectedIndex = index;
-                        }
-                    }
-                };
-                item.addEventListener('click', clickHandler);
-                this.clickHandlers.set(item, clickHandler); // Store the handler in WeakMap
-                return item;
-            });
-        };
-        this.removeEventListenerFromTabs = () => {
-            this.children.forEach((item) => {
-                const clickHandler = this.clickHandlers.get(item);
-                if (clickHandler) {
-                    item.removeEventListener('click', clickHandler);
-                    this.clickHandlers.delete(item);
-                }
-            });
-        };
-        this.modeVariant = 'primary';
-        this.defaultSelectedIndex = 0;
-        this.selectedIndex = undefined;
-        this.leftPadding = 32;
-        this.tdsScrollLeftAriaLabel = 'Scroll left';
-        this.tdsScrollRightAriaLabel = 'Scroll right';
-        this.showLeftScroll = false;
-        this.showRightScroll = false;
-    }
-    /** Sets the passed tabindex as the selected Tab. */
-    async selectTab(tabIndex) {
-        if (!this.children[tabIndex].disabled) {
-            this.children.forEach((element) => element.setSelected(false));
-            this.children = this.children.map((element, index) => {
-                if (index === tabIndex) {
-                    element.setSelected(true);
-                    this.selectedIndex = tabIndex;
-                }
-                return element;
-            });
-        }
-        return {
-            selectedTabIndex: this.selectedIndex,
-        };
-    }
-    /** Reinitializes the component. */
-    async reinitialize() {
-        this.handleSlotChange();
-    }
-    handleSelectedIndexUpdate() {
-        this.children = Array.from(this.host.children).map((tabElement) => {
-            tabElement.setSelected(false);
-            return tabElement;
-        });
-        if (this.selectedIndex) {
-            this.children[this.selectedIndex].setSelected(true);
-        }
-    }
-    scrollRight() {
-        if (!this.navWrapperElement)
-            return;
-        const scroll = this.navWrapperElement.scrollLeft;
-        this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
-        this.evaluateScrollButtons();
-    }
-    scrollLeft() {
-        if (!this.navWrapperElement)
-            return;
-        const scroll = this.navWrapperElement.scrollLeft;
-        this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
-        this.evaluateScrollButtons();
-    }
-    evaluateScrollButtons() {
-        if (!this.navWrapperElement)
-            return;
-        const scroll = this.navWrapperElement.scrollLeft;
-        this.showRightScroll = scroll <= this.scrollWidth;
-        this.showLeftScroll = scroll > 0;
-    }
-    initializeTabs() {
-        this.children = Array.from(this.host.children);
-        // remove first and last class from other tabs in case of initialization
-        this.children.forEach((child) => {
-            child.classList.remove('last');
-            child.classList.remove('first');
-        });
-        if (this.children.length > 0) {
-            this.children[0].classList.add('first');
-            this.children[this.children.length - 1].classList.add('last');
-        }
-    }
-    initializeSelectedTab() {
-        if (this.selectedIndex === undefined) {
-            this.addEventListenerToTabs();
-            this.children[this.defaultSelectedIndex].setSelected(true);
-            this.selectedIndex = this.defaultSelectedIndex;
-        }
-        else {
-            this.children[this.selectedIndex].setSelected(true);
-        }
-        this.tdsChange.emit({
-            selectedTabIndex: this.selectedIndex,
-        });
-    }
-    updateScrollButtons() {
-        if (this.buttonsWidth > this.componentWidth) {
-            this.evaluateScrollButtons();
-        }
-        else {
-            this.showLeftScroll = false;
-            this.showRightScroll = false;
-        }
-    }
-    applyCustomLeftPadding() {
-        if (this.navWrapperElement) {
-            this.navWrapperElement.style.paddingLeft = `${this.leftPadding}px`;
-        }
-    }
-    handleSlotChange() {
-        this.initializeTabs();
-        this.addEventListenerToTabs();
-        this.initializeSelectedTab();
-        this.updateScrollButtons();
-        this.addResizeObserver();
-        this.applyCustomLeftPadding(); // Apply custom left padding to the wrapper
-    }
-    connectedCallback() {
-        this.initializeTabs();
-    }
-    componentDidLoad() {
-        this.initializeSelectedTab();
-    }
-    componentDidRender() {
-        this.updateScrollButtons();
-        this.addResizeObserver();
-    }
-    disconnectedCallback() {
-        this.removeEventListenerFromTabs();
-    }
-    render() {
-        return (h(Host, { key: 'c7888b2f78e9aeb8fb6ca1041787785fe7d7c840', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '177a79f69514e597d2795b4d60f335b485195eb0', class: "wrapper", ref: (el) => {
-                this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '7455ad87dc61ba3c4fa28aa4e9462e9fe91dbcca', "aria-label": this.tdsScrollLeftAriaLabel, class: {
-                'scroll-left-button': true,
-                'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'f4b9a3b4d0eeed6c6b9035a9a33f9868fbb93bab', name: "chevron_left", size: "20px" })), h("slot", { key: '9757ef20e30a223f4dec3bf5a41da912821a46de', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '215c0a386b22f44bb891c4685c4f5b3b991982c8', "aria-label": this.tdsScrollRightAriaLabel, class: {
-                'scroll-right-button': true,
-                'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '21782c8e407746676988fb00324e10ba94379b78', name: "chevron_right", size: "20px" })))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "selectedIndex": ["handleSelectedIndexUpdate"]
-    }; }
-    static get style() { return TdsNavigationTabsStyle0; }
-}, [1, "tds-navigation-tabs", {
-        "modeVariant": [1, "mode-variant"],
-        "defaultSelectedIndex": [2, "default-selected-index"],
-        "selectedIndex": [514, "selected-index"],
-        "leftPadding": [514, "left-padding"],
-        "tdsScrollLeftAriaLabel": [1, "tds-scroll-left-aria-label"],
-        "tdsScrollRightAriaLabel": [1, "tds-scroll-right-aria-label"],
-        "showLeftScroll": [32],
-        "showRightScroll": [32],
-        "selectTab": [64],
-        "reinitialize": [64]
-    }, undefined, {
-        "selectedIndex": ["handleSelectedIndexUpdate"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["tds-navigation-tabs", "tds-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "tds-navigation-tabs":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, TdsNavigationTabs$1);
-            }
-            break;
-        case "tds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const TdsNavigationTabs = TdsNavigationTabs$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { TdsNavigationTabs, defineCustomElement };
+import{t,p as s,H as i,c as e,h as o,a as l}from"./index.js";import{d as h}from"./p-C0fx1H4h.js";const a=s(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tdsChange=e(this,"tdsChange",7),this.modeVariant="primary",this.defaultSelectedIndex=0,this.leftPadding=32,this.tdsScrollLeftAriaLabel="Scroll left",this.tdsScrollRightAriaLabel="Scroll right",this.showLeftScroll=!1,this.showRightScroll=!1,this.navWrapperElement=null,this.componentWidth=0,this.buttonsWidth=0,this.scrollableWidth=0,this.tabElements=[],this.clickHandlers=new WeakMap,this.addResizeObserver=()=>{const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let i=0;Array.from(this.host.children).forEach((t=>{const s=window.getComputedStyle(t);i+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight)})),this.componentWidth=s,this.buttonsWidth=i,this.scrollableWidth=i-s,this.updateScrollButtons()}))}));this.navWrapperElement&&t.observe(this.navWrapperElement)},this.addEventListenerToTabs=()=>{this.tabElements=Array.from(this.host.children),this.tabElements.map(((t,s)=>{const i=()=>{t.disabled||this.tdsChange.emit({selectedTabIndex:this.tabElements.indexOf(t)}).defaultPrevented||(this.tabElements.forEach((t=>t.setSelected(!1))),t.setSelected(!0),this.selectedIndex=s)};return t.addEventListener("click",i),this.clickHandlers.set(t,i),t}))},this.removeEventListenerFromTabs=()=>{this.tabElements.forEach((t=>{const s=this.clickHandlers.get(t);s&&(t.removeEventListener("click",s),this.clickHandlers.delete(t))}))}}async selectTab(t){return this.tabElements[t].disabled||(this.tabElements.forEach((t=>t.setSelected(!1))),this.tabElements=this.tabElements.map(((s,i)=>(i===t&&(s.setSelected(!0),this.selectedIndex=t),s)))),{selectedTabIndex:this.selectedIndex}}async reinitialize(){this.handleSlotChange()}handleSelectedIndexUpdate(){this.tabElements=Array.from(this.host.children).map((t=>(t.setSelected(!1),t))),this.selectedIndex&&this.tabElements[this.selectedIndex].setSelected(!0)}scrollRight(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft+this.buttonsWidth,this.evaluateScrollButtons())}scrollLeft(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft-this.buttonsWidth,this.evaluateScrollButtons())}evaluateScrollButtons(){if(!this.navWrapperElement)return;const t=this.navWrapperElement.scrollLeft;this.showRightScroll=t<=this.scrollableWidth,this.showLeftScroll=t>0}initializeTabs(){this.tabElements=Array.from(this.host.children),this.tabElements.forEach((t=>{t.classList.remove("last"),t.classList.remove("first")})),this.tabElements.length>0&&(this.tabElements[0].classList.add("first"),this.tabElements[this.tabElements.length-1].classList.add("last"))}initializeSelectedTab(){void 0===this.selectedIndex?(this.addEventListenerToTabs(),this.tabElements[this.defaultSelectedIndex].setSelected(!0),this.selectedIndex=this.defaultSelectedIndex):this.tabElements[this.selectedIndex].setSelected(!0),this.tdsChange.emit({selectedTabIndex:this.selectedIndex})}updateScrollButtons(){this.buttonsWidth>this.componentWidth?this.evaluateScrollButtons():(this.showLeftScroll=!1,this.showRightScroll=!1)}applyCustomLeftPadding(){this.navWrapperElement&&(this.navWrapperElement.style.paddingLeft=this.leftPadding+"px")}handleSlotChange(){this.initializeTabs(),this.addEventListenerToTabs(),this.initializeSelectedTab(),this.updateScrollButtons(),this.addResizeObserver(),this.applyCustomLeftPadding()}connectedCallback(){this.initializeTabs()}componentDidLoad(){this.initializeSelectedTab()}componentDidRender(){this.updateScrollButtons(),this.addResizeObserver()}disconnectedCallback(){this.removeEventListenerFromTabs()}render(){return o(l,{key:"6bab3db3c82f13794cbd793f78d08823cc904c4e",role:"tablist",class:{["tds-mode-variant-"+this.modeVariant]:null!==this.modeVariant}},o("div",{key:"6893ee0cb1c40fad60b19494d800de2d5b87f8c0",class:"wrapper",ref:t=>{this.navWrapperElement=t},style:{paddingLeft:this.leftPadding+"px"}},o("button",{key:"9e5142bec5991cd80b3799fe96491adb9c2ead64","aria-label":this.tdsScrollLeftAriaLabel,class:{"scroll-left-button":!0,show:this.showLeftScroll},onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},o("tds-icon",{key:"cd510de885b8471dfa27c2c68d95e2163e594eaf",name:"chevron_left",size:"20px"})),o("slot",{key:"a9406234d70203824c538c9fdc2c0caef31e2660",onSlotchange:()=>this.handleSlotChange()}),o("button",{key:"9fe74d05a6b2e3d3a4cc229e25af3977df9a7d48","aria-label":this.tdsScrollRightAriaLabel,class:{"scroll-right-button":!0,show:this.showRightScroll},onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},o("tds-icon",{key:"82905af610ba5791b9ba021bcd124d912ad2b599",name:"chevron_right",size:"20px"}))))}get host(){return this}static get watchers(){return{selectedIndex:[{handleSelectedIndexUpdate:0}]}}static get style(){return':host{box-sizing:border-box;display:flex;background-color:var(--tds-navigation-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:" ";display:block;border-bottom:1px solid var(--tds-navigation-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus::before,:host .scroll-left-button:focus::before{content:"";position:absolute;left:3px;right:3px;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}'}},[257,"tds-navigation-tabs",{modeVariant:[1,"mode-variant"],defaultSelectedIndex:[2,"default-selected-index"],selectedIndex:[514,"selected-index"],leftPadding:[514,"left-padding"],tdsScrollLeftAriaLabel:[1,"tds-scroll-left-aria-label"],tdsScrollRightAriaLabel:[1,"tds-scroll-right-aria-label"],showLeftScroll:[32],showRightScroll:[32],selectTab:[64],reinitialize:[64]},void 0,{selectedIndex:[{handleSelectedIndexUpdate:0}]}]);function r(){"undefined"!=typeof customElements&&["tds-navigation-tabs","tds-icon"].forEach((s=>{switch(s){case"tds-navigation-tabs":customElements.get(t(s))||customElements.define(t(s),a);break;case"tds-icon":customElements.get(t(s))||h()}}))}r();const n=a,c=r;export{n as TdsNavigationTabs,c as defineCustomElement}

package/dist/components/tds-popover-canvas.js

@@ -1,6 +1 @@
-import { T as TdsPopoverCanvas$1, d as defineCustomElement$1 } from './p-49b20476.js';
-
-const TdsPopoverCanvas = TdsPopoverCanvas$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { TdsPopoverCanvas, defineCustomElement };
+import{T as o,d as s}from"./p-CWEJdWOg.js";const p=o,r=s;export{p as TdsPopoverCanvas,r as defineCustomElement}

package/dist/components/tds-popover-core.js

@@ -1,6 +1 @@
-import { T as TdsPopoverCore$1, d as defineCustomElement$1 } from './p-e62ed985.js';
-
-const TdsPopoverCore = TdsPopoverCore$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { TdsPopoverCore, defineCustomElement };
+import{T as o,d as r}from"./p-BrDlXJ4P.js";const s=o,p=r;export{s as TdsPopoverCore,p as defineCustomElement}