{"version":3,"sources":["jsdelivr-header.js","/npm/native-html-tabs@0.1.6/html-tabs.js"],"names":[],"mappings":"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","file":"/npm/native-html-tabs@0.1.6/html-tabs.js","sourceRoot":"","sourcesContent":["/**\n * Minified by jsDelivr using Terser v5.39.0.\n * Original file: /npm/native-html-tabs@0.1.6/html-tabs.js\n *\n * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files\n */\n","class TabTitle extends HTMLElement {\n    constructor() {\n        super()\n\n        this.addEventListener('click', () => this.click() )\n    }\n\n    connectedCallback() {\n        this.setAttribute('slot', 'title')\n        this.setAttribute('role', 'tab')\n        this.setAttribute('aria-selected', this.hasAttribute('active') )\n        this.setAttribute('aria-disabled', this.hasAttribute('disabled') )\n    }\n\n    click() {\n        if( this.hasAttribute('disabled') )\n            return\n\n        const position = this.position()\n        const contents = this.parentElement?.parentElement?.querySelector(':scope > tab-content-list')?.children\n        const tabs     = this.parentElement?.children\n        const eventOptions = { bubbles: true, composed: true, cancelable: true }\n\n        if( ! contents || ! tabs )\n            return\n\n        // remove old active attributes and set the new ones: it's important to do this in a way that generates the minimum set of mutations for a mutation observer\n        Array.from(contents).forEach( (content, index) => {\n            if( index == position || ! content.hasAttribute('active') )\n                return\n            content.removeAttribute('active')\n            content.dispatchEvent( new CustomEvent('activechange', eventOptions ))\n        })\n        Array.from(tabs).forEach( (tab, index) => {\n            if( index == position || ! tab.hasAttribute('active') )\n                return\n            tab.removeAttribute('active');\n            tab.setAttribute('aria-selected', 'false')\n            tab.dispatchEvent( new CustomEvent('activechange', eventOptions ))\n        })\n        if( ! contents[position]?.hasAttribute('active') ) {\n            contents[position]?.setAttribute('active', '')\n            contents[position]?.dispatchEvent( new CustomEvent('activechange', eventOptions ))\n        }\n        if( ! this.hasAttribute('active') ) {\n            this.setAttribute('active', '')\n            this.setAttribute('aria-selected', 'true');\n            this.dispatchEvent( new CustomEvent('activechange', eventOptions ) )\n        }\n    }\n\n    position() {\n        return Array.from(this.parentElement?.children).indexOf(this)\n    }\n}\n\nclass TabContent extends HTMLElement {\n    constructor() { super() }\n\n    connectedCallback() {\n        this.setAttribute('slot', 'content')\n        this.setAttribute('role', 'tabpanel');\n    }\n\n    position() {\n        return Array.from(this.parentElement?.children).indexOf(this)\n    }\n}\n\nclass TabTitleList extends HTMLElement {\n    constructor() {\n        super()\n\n        const template = document.createElement('template')\n        template.innerHTML = `\n            <style>\n                ::slotted(tab-title) {\n                    cursor: pointer;\n                    padding: 2px 13px;\n                    border: 1px solid black;\n                    background: #bfe5ff;\n                    display: flex;\n                    align-items: center;\n                }\n                ::slotted(tab-title[active]) {\n                    background: #ffffff;\n                    z-index: 1;\n                    cursor:default;\n                }\n                ::slotted(tab-title[disabled]) {\n                    background: #828282;\n                    color: #404040;\n                    cursor: default;\n                }\n\n                ::slotted(tab-title[position=\"top\"]) {\n                    margin-left: 5px;\n                    border-bottom: 0;\n                    border-radius: 5px 5px 0 0;\n                }\n                ::slotted(tab-title[position=\"top\"]:first-child) {\n                    margin-left: 0\n                }\n                ::slotted(tab-title[position=\"top\"][active]) {\n                    margin-bottom: -1px;\n                }\n\n                ::slotted(tab-title[position=\"bottom\"]) {\n                    margin-left: 5px;\n                    border-top: 0;\n                    border-radius: 0 0 5px 5px;\n                }\n                ::slotted(tab-title[position=\"bottom\"]:first-child) {\n                    margin-left: 0\n                }\n                ::slotted(tab-title[position=\"bottom\"][active]) {\n                    margin-top: -1px;\n                }\n\n                ::slotted(tab-title[position=\"left\"]) {\n                    margin-top: 5px;\n                    border-right: 0;\n                    border-radius: 5px 0 0 5px;\n                }\n                ::slotted(tab-title[position=\"left\"]:first-child) {\n                    margin-top: 0\n                }\n                ::slotted(tab-title[position=\"left\"][active]) {\n                    margin-right: -1px;\n                }\n\n                ::slotted(tab-title[position=\"right\"]) {\n                    margin-top: 5px;\n                    border-left: 0;\n                    border-radius: 0 5px 5px 0;\n                }\n                ::slotted(tab-title[position=\"right\"]:first-child) {\n                    margin-top: 0\n                }\n                ::slotted(tab-title[position=\"right\"][active]) {\n                    margin-left: -1px;\n                }\n\n            </style>\n            <slot name='title'></slot>\n        `\n\n        this.attachShadow({ mode: 'open' })\n        this.shadowRoot.appendChild( template.content.cloneNode(true) )\n    }\n\n    connectedCallback() {\n        this.setAttribute('slot', 'title-list')\n        this.setAttribute('role', 'tablist');\n    }\n}\n\nclass TabContentList extends HTMLElement {\n    constructor() {\n        super()\n\n        const template = document.createElement('template')\n        template.innerHTML = `\n            <style>\n                ::slotted(tab-content) {\n                    padding: 10px;\n                    background: #ffffff;\n                    flex-grow: 1\n                }\n\n                ::slotted(tab-content[active]) {\n                    display: block\n                }\n\n                ::slotted(:not(tab-content[active])) {\n                    display: none !important\n                }\n            </style>\n            <slot name='content'></slot>\n        `\n\n        this.attachShadow({ mode: 'open' })\n        this.shadowRoot.appendChild( template.content.cloneNode(true) )\n    }\n\n    connectedCallback() { this.setAttribute('slot', 'content-list') }\n}\n\nclass TabGroup extends HTMLElement {\n\n    static get observedAttributes() { return ['tabs-position'] }\n\n    constructor() {\n        super()\n\n        const template = document.createElement('template')\n        template.innerHTML = `\n            <style>\n                :host(tab-group) {\n                    display: flex;\n                    flex-direction: column;\n                }\n\n                :host(tab-group[tabs-position=\"left\"]), :host(tab-group[tabs-position=\"right\"]) {\n                    flex-direction: row;\n                }\n\n                ::slotted(tab-title-list) {\n                    display: inline-flex\n                }\n\n                ::slotted(tab-title-list[tabs-position=\"left\"]), ::slotted(tab-title-list[tabs-position=\"right\"]) {\n                    flex-direction: column\n                }\n\n                ::slotted(tab-title-list[tabs-position=\"right\"]), ::slotted(tab-title-list[tabs-position=\"bottom\"]) {\n                    order: 2\n                }\n\n                ::slotted(tab-content-list) {\n                    border:1px solid black;\n                    display:flex;\n                    align-items: stretch;\n                }\n            </style>\n            <slot name='title-list'></slot>\n            <slot name='content-list'></slot>\n        `\n\n        this.attachShadow({ mode: 'open' })\n        this.shadowRoot.appendChild( template.content.cloneNode(true) )\n\n        const observer = new MutationObserver( mutations => this.update(mutations) )\n        observer.observe(this, { childList:true, subtree: true, attributes:true, attributeFilter: ['active', 'disabled'] })\n\n        this.current_active_tab = null\n    }\n\n    attributeChangedCallback( attribute, old_value, new_value ) {\n        if( attribute == 'tabs-position')\n            this.setPosition(new_value)\n    }\n\n    update(mutations = []) {\n        this.setPosition()\n\n        let last_new_active = null\n        mutations.forEach( mutation => {\n            if( mutation.target.parentElement?.parentElement != this )\n                return\n            if( mutation.type == 'attributes' && mutation.attributeName == 'disabled' && mutation.target.getAttribute('role') == 'tab' )\n                return mutation.target.setAttribute('aria-disabled', mutation.target.hasAttribute('disabled') )\n            if( mutation.type != 'attributes' || mutation.attributeName != 'active' || ! mutation.target.hasAttribute('active') )\n                return\n            last_new_active = mutation.target?.position?.()\n            }\n        )\n\n        this.setActive( last_new_active )\n    }\n\n    setPosition( position = null ) {\n        const current_position = this.getAttribute('tabs-position')\n        position = position || current_position\n        position = ['top', 'bottom', 'left', 'right'].indexOf(position) === -1 ? 'top' : position\n        for( const title of this.querySelectorAll(':scope > tab-title-list > tab-title') ) {\n            title.setAttribute('position', position)\n        }\n\n        this.querySelector(':scope > tab-title-list')?.setAttribute('tabs-position', position)\n\n        if( current_position != position )\n            this.setAttribute('tabs-position', position)\n    }\n\n    setActive( index = null) {\n        const titles = this.querySelectorAll(':scope > tab-title-list > tab-title')\n\n        if( index !== null )\n            return titles[index]?.click()\n\n        const last_node = list => list[list.length - 1]\n        const last_active_index = last_node.call(null, this.querySelectorAll(':scope > tab-title-list > tab-title[active], :scope > tab-content-list > tab-content[active]'))?.position()\n\n        titles[last_active_index || 0]?.click()\n    }\n\n    getTabTitleList( create_if_not_present = false ) {\n        let tab_title_list = this.querySelector(':scope > tab-title-list')\n        if( ! tab_title_list && create_if_not_present )\n            this.appendChild( tab_title_list = document.createElement('tab-title-list') )\n        return tab_title_list\n    }\n\n    getTabContentList( create_if_not_present = false ) {\n        let tab_content_list = this.querySelector(':scope > tab-content-list')\n        if( ! tab_content_list && create_if_not_present )\n            this.appendChild( tab_content_list = document.createElement('tab-content-list') )\n        return tab_content_list\n    }\n\n    appendTab( title, content ) {\n        const tab_title_list = this.getTabTitleList( true )\n        const tab_content_list = this.getTabContentList( true )\n\n        let tab_title = typeof title == 'string' ? document.createElement('tab-title') : title\n        let tab_content = typeof content == 'string' ? document.createElement('tab-content') : content\n\n        if( typeof title === 'string' )\n            tab_title.innerHTML = title\n\n        if( typeof content === 'string' )\n            tab_content.innerHTML = content\n\n        tab_title_list.appendChild( tab_title )\n        tab_content_list.appendChild( tab_content )\n\n        return [ tab_title, tab_content ]\n    }\n}\n\ncustomElements.define('tab-title', TabTitle)\ncustomElements.define('tab-content', TabContent)\ncustomElements.define('tab-title-list', TabTitleList)\ncustomElements.define('tab-content-list', TabContentList)\ncustomElements.define('tab-group', TabGroup)\n"]}