@swisspost/internet-header 1.16.5 → 10.1.0

package/dist/cjs/post-accordion_4.cjs.entry.js

@@ -0,0 +1,403 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var _package = require('./package-MGiZpKVI.js');
+var required = require('./required-_r1rzbps.js');
+var oneOf = require('./one-of-7TSi182P.js');
+var eventFrom = require('./event-from-CwMw19f8.js');
+var nanoid = require('./nanoid-CmjyF1Cm.js');
+var type = require('./type-CAeEC3oM.js');
+var getRoot = require('./get-root-B1FnQ50K.js');
+require('./create-validator-decorator-CJK3Xf77.js');
+
+function isMotionReduced() {
+    return globalThis.matchMedia
+        ? globalThis.matchMedia('(prefers-reduced-motion: reduce)').matches
+        : true;
+}
+
+const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
+
+const postAccordionCss = () => `:host{display:block;-webkit-border-before:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke);border-block-start:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}`;
+
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PostAccordion = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.expandedItems = new Set();
+        /**
+         * If `true`, multiple `post-accordion-item` can be open at the same time.
+         */
+        this.multiple = false;
+    }
+    syncHeadingLevel() {
+        this.accordionItems.forEach(item => {
+            item.setAttribute('heading-level', String(this.headingLevel));
+        });
+    }
+    componentWillLoad() {
+        this.registerAccordionItems();
+    }
+    componentDidLoad() {
+        this.syncHeadingLevel();
+    }
+    collapseToggleHandler(event) {
+        const toggledAccordionItem = event.target;
+        const isClosing = this.expandedItems.has(toggledAccordionItem);
+        if (isClosing) {
+            this.expandedItems.delete(toggledAccordionItem);
+        }
+        else {
+            this.expandedItems.add(toggledAccordionItem);
+        }
+        if (this.multiple || isClosing)
+            return;
+        // Close other open accordion items to ensure only one is open at a time
+        Array.from(this.expandedItems.values())
+            .filter(item => item !== toggledAccordionItem)
+            .forEach(item => {
+            item.toggle(false);
+        });
+    }
+    /**
+     * Toggles the `post-accordion-item` with the given id.
+     */
+    async toggle(id) {
+        const itemToToggle = this.accordionItems.find(item => item.id === id);
+        if (!itemToToggle)
+            throw new Error(`No post-accordion-item found with id #${id}.`);
+        await itemToToggle.toggle();
+    }
+    /**
+     * Expands all `post-accordion-item`.
+     *
+     * If `multiple="true"` is not set and all items are closed, it will open the first one.
+     * Otherwise, it will keep the opened one.
+     */
+    async expandAll() {
+        if (this.multiple) {
+            await Promise.all(this.accordionItems.map(item => item.toggle(true)));
+        }
+        else if (this.expandedItems.size === 0) {
+            await this.accordionItems[0].toggle(true);
+        }
+    }
+    /**
+     * Collapses all `post-accordion-item`.
+     */
+    async collapseAll() {
+        await Promise.all(this.accordionItems.map(item => item.toggle(false)));
+    }
+    registerAccordionItems() {
+        this.accordionItems = Array.from(this.host.querySelectorAll('post-accordion-item'));
+        this.accordionItems
+            .filter(item => {
+            return !item.collapsed || this.expandedItems.has(item);
+        })
+            .forEach((item, index) => {
+            if (!this.multiple && index !== 0) {
+                item.setAttribute('collapsed', '');
+                return;
+            }
+            this.expandedItems.add(item);
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: '4e3df581ac99aa14dfaaab836c90cee788607a76', "data-version": _package.version }, index.h("div", { key: '425615868542199dc79439d04b9ca9ba815b05f3', class: "accordion" }, index.h("slot", { key: 'ba7c05b69377101275cd76ecffb476516ca52c83', onSlotchange: () => this.registerAccordionItems() }))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "headingLevel": [{
+                "syncHeadingLevel": 0
+            }]
+    }; }
+};
+__decorate$3([
+    required.Required(),
+    oneOf.OneOf(HEADING_LEVELS)
+], PostAccordion.prototype, "headingLevel", void 0);
+__decorate$3([
+    eventFrom.EventFrom('post-accordion-item')
+], PostAccordion.prototype, "collapseToggleHandler", null);
+PostAccordion.style = postAccordionCss();
+
+const postAccordionItemCss = () => `:host{display:block;-webkit-border-after:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke);border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke)}:host:has(.accordion-button:hover){border-block-end-color:var(--post-scheme-color-interactive-primary-hover-stroke)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host:has(.accordion-button:hover){border-block-end-color:Highlight}}:host([collapsed]) .accordion-button post-icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.accordion-header{color:var(--post-scheme-color-interactive-primary-enabled-fg1);font-size:var(--post-device-font-size-5);margin:0;line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-extra-black)}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;display:-ms-flexbox;display:flex;position:relative;width:100%;-ms-flex-align:center;align-items:center;text-align:start;gap:var(--post-device-spacing-gap-7);padding-block:var(--post-device-spacing-padding-19);padding-inline:var(--post-device-spacing-padding-5);-webkit-border-after:var(--post-device-border-width-default) var(--post-core-border-style-solid) rgba(0,0,0,0);border-block-end:var(--post-device-border-width-default) var(--post-core-border-style-solid) rgba(0,0,0,0);cursor:pointer;outline:none !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button{background-color:ButtonFace !important}.accordion-button:hover{background-color:Highlight !important}}.accordion-button::before{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{outline-style:var(--post-core-border-style-solid) !important;display:block;content:"";position:absolute;inset:calc(var(--post-device-border-width-default)*-1) 0 calc(var(--post-device-border-width-default)*-1);border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-style:var(--post-core-border-style-solid) !important;display:block;content:"";position:absolute;inset:calc(var(--post-device-border-width-default)*-1) 0 calc(var(--post-device-border-width-default)*-1);border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-color:Highlight !important}}}.accordion-button slot::slotted(span[slot=header]){-ms-flex-positive:1;flex-grow:1}.accordion-button post-icon{-ms-flex:none;flex:none;width:var(--post-core-dimension-24);aspect-ratio:1;-webkit-transition:-webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:var(--post-accordion-icon-initial-transform, none);transform:var(--post-accordion-icon-initial-transform, none)}.accordion-button.collapsed{-webkit-padding-before:var(--post-device-spacing-padding-19);padding-block-start:var(--post-device-spacing-padding-19);-webkit-padding-after:var(--post-device-spacing-padding-19);padding-block-end:var(--post-device-spacing-padding-19)}.accordion-button.collapsed post-icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.accordion-button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.accordion-button>::slotted(.text-truncate){display:block}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.accordion-button:hover,.accordion-button:focus-visible{color:Highlight}}post-collapsible{-webkit-margin-after:calc(var(--post-device-border-width-default)*-1);margin-block-end:calc(var(--post-device-border-width-default)*-1)}.accordion-body{-webkit-padding-before:var(--post-device-spacing-padding-15);padding-block-start:var(--post-device-spacing-padding-15);-webkit-padding-after:var(--post-device-spacing-padding-block-25);padding-block-end:var(--post-device-spacing-padding-block-25);padding-inline:var(--post-device-spacing-padding-5)}.logo-container{display:none;width:var(--post-device-sizing-logo-1);aspect-ratio:1}.logo-container.has-image{display:block}.logo-container slot::slotted(img){display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.accordion-button>::slotted(:first-child),.accordion-body>::slotted(:first-child){-webkit-margin-before:0 !important;margin-block-start:0 !important}.accordion-button>::slotted(:last-child),.accordion-body>::slotted(:last-child){-webkit-margin-after:0 !important;margin-block-end:0 !important}`;
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PostAccordionItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * If `true`, the element is collapsed otherwise it is displayed.
+         */
+        this.collapsed = false;
+    }
+    // Capture to make sure the "collapsed" property is updated before the event is consumed
+    onCollapseToggle(event) {
+        this.collapsed = !event.detail;
+    }
+    /**
+     * Triggers the collapse programmatically.
+     */
+    async toggle(force) {
+        return this.collapsible.toggle(force);
+    }
+    onSlotLogoChange() {
+        this.slottedLogo = this.host.querySelector('img[slot="logo"]');
+    }
+    componentWillRender() {
+        this.slottedLogo = this.host.querySelector('img[slot="logo"]');
+    }
+    render() {
+        const collapsibleId = `c${nanoid.nanoid(6)}`;
+        const headingLevel = this.host.closest('post-accordion')?.getAttribute('heading-level');
+        const HeadingTag = `h${headingLevel ?? 2}`;
+        return (index.h(index.Host, { key: 'b9699596d57887d99214c6f163355535c68eae1a', "data-version": _package.version }, index.h("post-collapsible-trigger", { key: 'ebd7c9d6bf2bc35d548867edc8766e31125d8509', for: collapsibleId }, index.h(HeadingTag, { key: '93806261d7dba93569b09d37dff0c01b4f29268b', class: "accordion-header" }, index.h("button", { key: '785a4bcff2c6705aade9b045e1176d43a2ef202b', type: "button", class: `accordion-button${this.collapsed ? ' collapsed' : ''}`, part: "post-accordion-button" }, index.h("span", { key: '87f8ba7f7ebe2ba851b6dc134656296820c467d0', class: {
+                'logo-container': true,
+                'has-image': !!this.slottedLogo,
+            } }, index.h("slot", { key: '146256cb174f5895b25fd8f44464ca32fba6b6ee', name: "logo", onSlotchange: this.onSlotLogoChange.bind(this) })), index.h("slot", { key: 'd742ef89a88280f85c7da697536d4ad2ff825f0b', name: "header" }), index.h("post-icon", { key: 'f83e438c9d504ebaa0066df81b6f74ec14dcb08a', name: "chevronup" })))), index.h("post-collapsible", { key: '179f36eab7ebdb9faa909a70eb43e1d78503e6e1', id: collapsibleId, collapsed: this.collapsed, ref: el => (this.collapsible = el) }, index.h("div", { key: 'e93c3570cf76c971b49bf28d3d5540ac289b2469', class: "accordion-body", part: "post-accordion-body" }, index.h("slot", { key: 'db26c35edb371cb855141b6f7552d96ea10e06a4' })))));
+    }
+    get host() { return index.getElement(this); }
+};
+__decorate$2([
+    eventFrom.EventFrom('post-accordion-item')
+], PostAccordionItem.prototype, "onCollapseToggle", null);
+PostAccordionItem.style = postAccordionItemCss();
+
+const collapseDuration = 350;
+const collapseEasing = 'ease';
+const collapsedKeyframe = { height: '0', overflow: 'hidden' };
+const animationOptions = {
+    duration: isMotionReduced() ? 0 : collapseDuration,
+    easing: collapseEasing,
+    fill: 'forwards',
+};
+function collapse(el) {
+    const elHeight = globalThis.getComputedStyle(el).height
+        ;
+    const expandedKeyframe = { height: elHeight };
+    return el.animate([expandedKeyframe, collapsedKeyframe], animationOptions);
+}
+function expand(el) {
+    const expandedKeyframe = {
+        height: `${el.scrollHeight}px`,
+        offset: 1,
+        overflow: 'hidden', // <- keep overflow hidden, until the final keyframe to prevent content from overflowing during the animation
+    };
+    const finalKeyframe = { height: 'auto', overflow: 'visible' };
+    return el.animate([collapsedKeyframe, expandedKeyframe, finalKeyframe], animationOptions);
+}
+
+const postCollapsibleCss = () => `:host{display:block;position:relative;overflow:var(--post-collapsible-initial-overflow, hidden);height:var(--post-collapsible-initial-height, auto)}`;
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PostCollapsible = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.postToggle = index.createEvent(this, "postToggle");
+        /**
+         * If `true`, the element is collapsed otherwise it is displayed.
+         */
+        this.collapsed = false;
+    }
+    get isExpanded() {
+        return !this.collapsed;
+    }
+    componentDidLoad() {
+        this.updateTriggers();
+    }
+    /**
+     * Triggers the collapse programmatically.
+     * If there is a collapsing transition running already, it will be reversed.
+     * If no parameter is provided, the current state (this.isExpanded) will be toggled.
+     */
+    async toggle(shouldExpand = !this.isExpanded) {
+        // if the parameter (shouldExpand) is set during the call (e.g. `document.querySelector('post-collapsible').toggle(true)`)
+        // and it matches the current state, the current state is returned and the function exits early
+        if (shouldExpand === this.isExpanded)
+            return this.isExpanded;
+        // applying the new state to this.collapsed will also indirectly update this.isExpanded,
+        // due to its implementation with the getter, which returns !this.collapsed
+        this.collapsed = !shouldExpand;
+        const isExpanded = this.isExpanded;
+        {
+            const animation = isExpanded ? expand(this.host) : collapse(this.host);
+            this.postToggle.emit(isExpanded);
+            await animation.finished;
+            animation.commitStyles();
+            this.updateTriggers();
+        }
+        return isExpanded;
+    }
+    /**
+     * Update all post-collapsible-trigger elements referring to or wrapping the collapsible
+     */
+    updateTriggers() {
+        const triggers = this.host.id
+            ? Array.from(document.querySelectorAll(`post-collapsible-trigger[for="${this.host.id}"]`))
+            : [];
+        // also update an ancestor trigger when the collapsible is nested inside one
+        const nestedTrigger = this.host.closest('post-collapsible-trigger');
+        if (nestedTrigger && !triggers.includes(nestedTrigger)) {
+            triggers.push(nestedTrigger);
+        }
+        triggers.forEach(trigger => trigger.update());
+    }
+    render() {
+        return (index.h(index.Host, { key: 'd4fef8eff9b716e9dff0e570f5993221ca631ed5', "data-version": _package.version, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, index.h("slot", { key: 'ee957da050187c1cfd752e0dcb6b5f86505f5089' })));
+    }
+    get host() { return index.getElement(this); }
+};
+__decorate$1([
+    type.Type('boolean')
+], PostCollapsible.prototype, "collapsed", void 0);
+PostCollapsible.style = postCollapsibleCss();
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PostCollapsibleTrigger = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.observer = new MutationObserver(() => this.setTrigger());
+        this.handlePostToggle = this.handlePostToggle.bind(this);
+    }
+    /**
+     * Initiate a mutation observer that updates the trigger whenever necessary
+     */
+    connectedCallback() {
+        this.root = getRoot.getRoot(this.host);
+        this.root.addEventListener('postToggle', this.handlePostToggle);
+        this.observer.observe(this.host, { childList: true, subtree: true });
+    }
+    componentDidLoad() {
+        this.setTrigger();
+        if (!this.trigger)
+            console.warn('The post-collapsible-trigger must contain a button.');
+        if (!this.collapsible) {
+            const target = this.for
+                ? `with id "${this.for}"`
+                : 'nested inside <post-collapsible-trigger>';
+            console.warn(`No post-collapsible found ${target}. Either nest a post-collapsible inside the trigger or set the "for" attribute to the id of the collapsible.`);
+        }
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+        this.root?.removeEventListener('postToggle', this.handlePostToggle);
+    }
+    /**
+     * Update the "aria-controls" and "aria-expanded" attributes on the trigger button
+     */
+    async update() {
+        this.updateAriaAttributes();
+    }
+    /**
+     * Private handler for the 'postToggle' event.
+     * This updates the trigger's "aria-expanded" attribute based on the event detail.
+     */
+    handlePostToggle(e) {
+        if (this.trigger) {
+            this.trigger.setAttribute('aria-expanded', `${e.detail}`);
+        }
+    }
+    updateAriaAttributes() {
+        const collapsible = this.collapsible;
+        if (!this.trigger || !collapsible)
+            return;
+        // a nested collapsible may have no id, but aria-controls needs one to reference
+        collapsible.id || (collapsible.id = `collapsible-${crypto.randomUUID()}`);
+        const collapsibleId = collapsible.id;
+        // add the controlled collapsible's id to the aria-controls list
+        const ariaControls = this.trigger.getAttribute('aria-controls');
+        const tokens = ariaControls ? ariaControls.split(/\s+/) : [];
+        if (!tokens.includes(collapsibleId)) {
+            tokens.push(collapsibleId);
+            this.trigger.setAttribute('aria-controls', tokens.join(' '));
+        }
+        // set aria-expanded to `true` if expanded, `false` if collapsed (collapsed defaults to false)
+        this.trigger.setAttribute('aria-expanded', `${!collapsible.collapsed}`);
+    }
+    /**
+     * Toggle the post-collapsible controlled by the trigger
+     */
+    async toggleCollapsible() {
+        await this.collapsible?.toggle();
+    }
+    /**
+     * Retrieve the post-collapsible controlled by the trigger
+     */
+    get collapsible() {
+        // prefer a nested post-collapsible, fall back to an id reference via `for`
+        const ref = this.host.querySelector('post-collapsible') ??
+            (this.for ? (this.root?.getElementById(this.for) ?? null) : null);
+        if (ref && ref.localName === 'post-collapsible') {
+            return ref;
+        }
+        return null;
+    }
+    /**
+     * Find the button and add the proper event listener and ARIA attributes to it
+     */
+    setTrigger() {
+        // skip buttons that belong to a nested collapsible's content
+        const trigger = Array.from(this.host.querySelectorAll('button')).find(button => {
+            const collapsible = button.closest('post-collapsible');
+            const isInsidePanel = !!collapsible && this.host.contains(collapsible);
+            return !isInsidePanel;
+        });
+        if (!trigger || (this.trigger && trigger.isEqualNode(this.trigger)))
+            return;
+        this.trigger = trigger;
+        this.trigger.addEventListener('click', () => this.toggleCollapsible());
+        this.updateAriaAttributes();
+    }
+    render() {
+        return (index.h(index.Host, { key: '64dde42136274194be6c3c4f94fb87ded8a3a079', "data-version": _package.version }, index.h("slot", { key: 'f43727ec2f7692793178ad6c162bb56f0f2d842b' })));
+    }
+    get host() { return index.getElement(this); }
+};
+__decorate([
+    type.Type('string')
+], PostCollapsibleTrigger.prototype, "for", void 0);
+__decorate([
+    eventFrom.EventFrom('post-collapsible')
+], PostCollapsibleTrigger.prototype, "handlePostToggle", null);
+
+exports.post_accordion = PostAccordion;
+exports.post_accordion_item = PostAccordionItem;
+exports.post_collapsible = PostCollapsible;
+exports.post_collapsible_trigger = PostCollapsibleTrigger;

package/dist/cjs/post-autocomplete.cjs.entry.js

@@ -0,0 +1,219 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var _package = require('./package-MGiZpKVI.js');
+var debounce = require('./debounce-BsIBi_-2.js');
+var required = require('./required-_r1rzbps.js');
+var type = require('./type-CAeEC3oM.js');
+require('./create-validator-decorator-CJK3Xf77.js');
+
+const postAutocompleteCss = () => `:host{position:relative;display:block}.autocomplete-icon,.autocomplete-clear{position:absolute;inset-block-start:16px}@media screen and (min-width: 780px){.autocomplete-icon,.autocomplete-clear{inset-block-start:20px}}.autocomplete-icon{inset-inline-end:16px;width:24px;height:24px;pointer-events:none;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out, -webkit-transform .2s ease-in-out}:host([open]) .autocomplete-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.autocomplete-clear{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;inset-inline-end:42px;background:none;border:none;cursor:pointer}.autocomplete-clear>post-icon{width:20px;height:20px}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}`;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PostAutocomplete = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.postFilteringEvent = index.createEvent(this, "postFilteringEvent");
+        this.debouncedHandleInput = debounce.debounce((event) => {
+            void this.handleInput(event);
+        }, 250);
+        /** Number of characters to type before filtering methods are called */
+        this.filterThreshold = 0;
+        /** Show or hide the clear button */
+        this.clearable = false;
+        this.inputValue = '';
+        this.handleOnBlur = () => {
+            this.inputElement.value = this.inputValue;
+            this.listBoxElement.filter('');
+            this.hideListBox();
+        };
+        this.handleInput = async (event) => {
+            if (!this.listBoxElement)
+                return;
+            const value = event.target.value.trim();
+            const query = value.length >= this.filterThreshold ? value : '';
+            // Allow for consuming parent to handle filtering (e.g. for async data) and prevent default filtering behavior
+            const { defaultPrevented } = this.postFilteringEvent.emit(query && query.length >= this.filterThreshold ? query : '');
+            if (defaultPrevented)
+                return;
+            await this.listBoxElement.filter(query);
+            if (query) {
+                this.showListBox();
+                this.announceCount();
+            }
+            else {
+                this.inputValue = '';
+                this.clearAnnouncement();
+            }
+        };
+        this.handleKeyDown = (event) => {
+            const { key, altKey } = event;
+            switch (key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.showListBox();
+                    if (!altKey) {
+                        this.listBoxElement.navigate('down');
+                    }
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.listBoxElement.navigate('up');
+                    break;
+                case 'Enter':
+                    if (this.listBoxElement.hidden)
+                        return;
+                    event.preventDefault();
+                    this.listBoxElement.selectActive();
+                    this.hideListBox();
+                    break;
+                case 'Escape':
+                    this.hideListBox();
+                    break;
+                case 'Tab':
+                    this.listBoxElement.selectActive();
+                    this.hideListBox();
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    this.listBoxElement.navigate('first');
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this.listBoxElement.navigate('last');
+                    break;
+            }
+        };
+        this.handleOptionSelected = (e) => {
+            const value = e.detail;
+            this.inputElement.value = value;
+            this.inputValue = value;
+            this.hideListBox();
+        };
+        this.handleOptionActive = (e) => {
+            const value = e.detail;
+            if (value) {
+                this.inputElement.setAttribute('aria-activedescendant', value);
+            }
+            else {
+                this.inputElement.removeAttribute('aria-activedescendant');
+            }
+        };
+        this.hideListBox = () => {
+            this.clearAnnouncement();
+            this.listBoxElement.hide();
+            this.inputElement.ariaExpanded = 'false';
+            this.host.removeAttribute('open');
+            this.inputElement.removeAttribute('aria-activedescendant');
+        };
+        this.showListBox = async () => {
+            await this.listBoxElement.show();
+            this.inputElement.ariaExpanded = 'true';
+            this.host.setAttribute('open', '');
+            this.announceCount();
+        };
+        this.clearInput = () => {
+            if (this.inputElement) {
+                this.inputElement.value = '';
+                this.inputValue = '';
+                this.listBoxElement.clearSelection();
+                this.hideListBox();
+            }
+        };
+    }
+    get inputElement() {
+        return this.host.querySelector('input');
+    }
+    get listBoxElement() {
+        if (this.listbox) {
+            return document.getElementById(this.listbox);
+        }
+        else {
+            return this.host.querySelector('post-listbox');
+        }
+    }
+    componentWillLoad() {
+        if (!this.inputElement)
+            return;
+        this.inputElement.role = 'combobox';
+        this.inputElement.ariaAutoComplete = 'list';
+        if (!this.listBoxElement)
+            return;
+        if (!this.listBoxElement.id)
+            this.listBoxElement.id = crypto.randomUUID();
+        this.inputElement.setAttribute('aria-controls', this.listBoxElement.id);
+        this.inputElement.setAttribute('aria-expanded', 'false');
+        const inputLabel = this.inputElement.labels?.[0];
+        if (inputLabel) {
+            if (!inputLabel.id)
+                inputLabel.id = crypto.randomUUID();
+            this.listBoxElement.setAttribute('aria-labelledby', inputLabel.id);
+        }
+        // Because we're handling that and the browser would show a duplicate native autocomplete dropdown
+        this.inputElement.autocomplete = 'off';
+        this.attachInputListeners();
+        this.attachListboxListeners();
+    }
+    disconnectedCallback() {
+        this.detachInputListeners();
+        this.detachListboxListeners();
+    }
+    attachInputListeners() {
+        if (this.inputElement) {
+            this.inputElement.addEventListener('input', this.debouncedHandleInput);
+            this.inputElement.addEventListener('keydown', this.handleKeyDown);
+            this.inputElement.addEventListener('blur', this.handleOnBlur);
+            this.inputElement.addEventListener('click', this.showListBox);
+        }
+    }
+    detachInputListeners() {
+        if (this.inputElement) {
+            this.inputElement.removeEventListener('input', this.debouncedHandleInput);
+            this.inputElement.removeEventListener('keydown', this.handleKeyDown);
+            this.inputElement.removeEventListener('blur', this.handleOnBlur);
+            this.inputElement.removeEventListener('click', this.showListBox);
+        }
+    }
+    attachListboxListeners() {
+        if (this.listBoxElement) {
+            this.listBoxElement.addEventListener('postOptionSelected', this.handleOptionSelected);
+            this.listBoxElement.addEventListener('postOptionActive', this.handleOptionActive);
+        }
+    }
+    detachListboxListeners() {
+        if (this.listBoxElement) {
+            this.listBoxElement.removeEventListener('postOptionSelected', this.handleOptionSelected);
+            this.listBoxElement.removeEventListener('postOptionActive', this.handleOptionActive);
+        }
+    }
+    clearAnnouncement() {
+        if (this.outputElement)
+            this.outputElement.textContent = '';
+    }
+    announceCount() {
+        if (!this.outputElement || !this.listBoxElement)
+            return;
+        const count = this.listBoxElement.querySelectorAll('post-listbox-option:not([hidden])').length;
+        this.outputElement.textContent = this.textAvailableSuggestions.replace('{count}', String(count));
+    }
+    render() {
+        return (index.h(index.Host, { key: 'a88d1a65adcbe0603dc2c7ccf5900ae49dbe8edc', "data-version": _package.version }, index.h("slot", { key: 'ff4724e2e298a38020c4eb93b2b9a38d811274b8' }), this.clearable && this.inputValue && (index.h("button", { key: '6a5f67d5376bdb0d261fd687ad29dd32d4f3be36', type: "button", class: "autocomplete-clear", onClick: this.clearInput }, index.h("post-icon", { key: '5b123fa4dbd581ebbba96f820b30d9d266b69b7d', "aria-hidden": "true", name: "closex" }))), index.h("post-icon", { key: '9d3fcaf73cfff3e17d440e7add858482e48a12a7', "aria-hidden": "true", class: "autocomplete-icon", name: "chevronDown" }), index.h("output", { key: '9c894f8ea34ffcc8b8c741216679ffbbd7b866bf', class: "visually-hidden", ref: el => (this.outputElement = el) })));
+    }
+    get host() { return index.getElement(this); }
+};
+__decorate([
+    required.Required(),
+    type.Type('string')
+], PostAutocomplete.prototype, "textAvailableSuggestions", void 0);
+PostAutocomplete.style = postAutocompleteCss();
+
+exports.post_autocomplete = PostAutocomplete;