@swisspost/design-system-components 1.6.2 → 1.7.0

package/dist/cjs/post-collapsible-0b8dce97.js.map

@@ -0,0 +1 @@
+{"file":"post-collapsible-0b8dce97.js","mappings":"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","names":["checkEmptyOrType","checkEmptyOrOneOf","h","Host","version"],"sources":["src/utils/is-motion-reduced.ts","src/animations/collapse.ts","src/components/post-collapsible/heading-levels.ts","src/components/post-collapsible/post-collapsible.scss?tag=post-collapsible&encapsulation=shadow","src/components/post-collapsible/post-collapsible.tsx"],"sourcesContent":["export function isMotionReduced(): boolean {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","const collapseDuration = 350;\nconst collapseEasing = 'ease';\nconst collapsedKeyframe: Keyframe = { height: '0', overflow: 'hidden' };\n\nexport const collapse = (el: HTMLElement): Animation => {\n  const { height } = window.getComputedStyle(el);\n  const expandedKeyframe: Keyframe = { height };\n\n  return el.animate(\n    [expandedKeyframe, collapsedKeyframe],\n    { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' },\n  );\n};\n\nexport const expand = (el: HTMLElement): Animation => {\n  const expandedKeyframe: Keyframe = { height: `${el.scrollHeight}px` };\n\n  return el.animate(\n    [collapsedKeyframe, expandedKeyframe],\n    { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' },\n  );\n};\n","export const HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;\n\nexport type HeadingLevel = typeof HEADING_LEVELS[number];\n","@use '@swisspost/design-system-styles/components/accordion';\n\n:host {\n  display: block;\n}\n\n.accordion-button {\n  cursor: pointer;\n\n  > ::slotted(.text-truncate) {\n    display: block;\n  }\n}\n\npost-collapsible + post-collapsible::part(accordion-item) {\n  border-block-start: 0!important;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { collapse, expand } from '../../animations/collapse';\nimport { checkEmptyOrOneOf, checkEmptyOrType, isMotionReduced } from '../../utils';\nimport { HEADING_LEVELS, HeadingLevel } from './heading-levels';\n\n@Component({\n  tag: 'post-collapsible',\n  styleUrl: 'post-collapsible.scss',\n  shadow: true,\n})\nexport class PostCollapsible {\n  private isLoaded = false;\n  private collapsible: HTMLElement;\n\n  @Element() host: HTMLPostCollapsibleElement;\n\n  @State() id: string;\n  @State() isOpen = true;\n  @State() hasHeader: boolean;\n  @State() headingTag: string;\n\n  /**\n   * If `true`, the element is initially collapsed otherwise it is displayed.\n   */\n  @Prop() readonly collapsed?: boolean = false;\n\n  @Watch('collapsed')\n  validateCollapsed(newValue = this.collapsed) {\n    checkEmptyOrType(\n      newValue,\n      'boolean',\n      'The `collapsed` property of the `post-collapsible` must be a boolean.',\n    );\n  }\n\n  /**\n   * Defines the hierarchical level of the collapsible header within the headings structure.\n   */\n  @Prop() readonly headingLevel?: HeadingLevel = 2;\n\n  @Watch('headingLevel')\n  validateHeadingLevel(newValue = this.headingLevel) {\n    checkEmptyOrOneOf(\n      newValue,\n      HEADING_LEVELS,\n      'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.',\n    );\n  }\n\n  /**\n   * An event emitted when the collapse element is shown or hidden, before the transition. It has no payload.\n   */\n  @Event() collapseChange: EventEmitter<void>;\n\n  connectedCallback() {\n    this.validateCollapsed();\n    this.validateHeadingLevel();\n  }\n\n  componentWillRender() {\n    this.id = this.host.id || `c${crypto.randomUUID()}`;\n    this.hasHeader = this.host.querySelectorAll('[slot=\"header\"]').length > 0;\n    this.headingTag = `h${this.headingLevel ?? 2}`;\n  }\n\n  componentDidLoad() {\n    if (this.collapsed) void this.toggle(false);\n    this.isLoaded = true;\n  }\n\n  /**\n   * Triggers the collapse programmatically.\n   *\n   * If there is a collapsing transition running already, it will be reversed.\n   */\n  @Method()\n  async toggle(open = !this.isOpen): Promise<boolean> {\n    if (open === this.isOpen) return open;\n\n    this.isOpen = !this.isOpen;\n    if (this.isLoaded) this.collapseChange.emit();\n\n    const animation = open ? expand(this.collapsible) : collapse(this.collapsible);\n\n    if (!this.isLoaded || isMotionReduced()) animation.finish();\n\n    await animation.finished;\n\n    animation.commitStyles();\n\n    return this.isOpen;\n  }\n\n  render() {\n    const collapse = (\n      <div\n        aria-labelledby={this.hasHeader ? `${this.id}--header` : undefined}\n        class={`collapse${this.hasHeader ? ' accordion-collapse' : ''}`}\n        id={`${this.id}--collapse`}\n        ref={el => (this.collapsible = el)}\n      >\n        {this.hasHeader ? (\n          <div class=\"accordion-body\">\n            <slot />\n          </div>\n        ) : (\n          <slot />\n        )}\n      </div>\n    );\n\n    return (\n      <Host id={this.id} data-version={version}>\n        {this.hasHeader ? (\n          <div part=\"accordion-item\" class=\"accordion-item\">\n            <this.headingTag class=\"accordion-header\" id={`${this.id}--header`}>\n              <button\n                aria-controls={`${this.id}--collapse`}\n                aria-expanded={`${this.isOpen}`}\n                class={`accordion-button${this.isOpen ? '' : ' collapsed'}`}\n                onClick={() => this.toggle()}\n                type=\"button\"\n              >\n                <slot name=\"header\" />\n              </button>\n            </this.headingTag>\n\n            {collapse}\n          </div>\n        ) : (\n          collapse\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,12 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postCollapsible = require('./post-collapsible-e46002bb.js');
-require('./index-e7618bb3.js');
-require('./package-041a8597.js');
-require('./index-b38a23e0.js');
+const postCollapsible = require('./post-collapsible-0b8dce97.js');
+require('./index-c07c0cdb.js');
+require('./package-cd0e9960.js');
+require('./index-8c288b1a.js');
 require('./constants-238701d3.js');
-require('./check-one-of-27ad3154.js');
 
 
 

package/dist/cjs/post-collapsible.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"post-collapsible.entry.cjs.js","mappings":";;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"post-collapsible.entry.cjs.js","mappings":";;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/post-components.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e7618bb3.js');
+const index = require('./index-c07c0cdb.js');
 
 /*
- Stencil Client Patch Browser v4.7.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.9.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('post-components.cjs.js', document.baseURI).href));
@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["post-alert.cjs",[[1,"post-alert",{"dismissible":[4],"dismissLabel":[1,"dismiss-label"],"fixed":[4],"icon":[1],"type":[1],"alertId":[32],"classes":[32],"hasActions":[32],"hasHeading":[32],"onDismissButtonClick":[32],"dismiss":[64]},null,{"dismissible":["validateDismissible"],"dismissLabel":["validateDismissLabel"],"fixed":["validateFixed"],"icon":["validateIcon"],"type":["validateType"]}]]],["post-accordion.cjs",[[1,"post-accordion",{"multiple":[4],"toggle":[64],"expandAll":[64],"collapseAll":[64]},[[0,"collapseChange","collapseChangeHandler"]]]]],["post-collapsible.cjs",[[1,"post-collapsible",{"collapsed":[4],"headingLevel":[2,"heading-level"],"id":[32],"isOpen":[32],"hasHeader":[32],"headingTag":[32],"toggle":[64]},null,{"collapsed":["validateCollapsed"],"headingLevel":["validateHeadingLevel"]}]]],["post-tab-header.cjs",[[1,"post-tab-header",{"panel":[1],"tabId":[32]},null,{"panel":["validateFor"]}]]],["post-tab-panel.cjs",[[1,"post-tab-panel",{"name":[1],"panelId":[32]}]]],["post-tabs.cjs",[[1,"post-tabs",{"activePanel":[1,"active-panel"],"show":[64]}]]],["post-tooltip.cjs",[[1,"post-tooltip",{"backgroundColor":[1,"background-color"],"placement":[1],"tooltipClasses":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"backgroundColor":["validateBackgroundColor"]}]]],["post-icon.cjs",[[1,"post-icon",{"animation":[1],"base":[1],"flipH":[4,"flip-h"],"flipV":[4,"flip-v"],"name":[1],"rotate":[2],"scale":[2],"svgStyles":[32],"svgOutput":[32]},null,{"animation":["validateAnimation"],"base":["validateBase"],"flipH":["validateFlipH"],"flipV":["validateFlipV"],"name":["validateName"],"rotate":["validateRotate"],"scale":["validateScale"]}]]]], options);
+  return index.bootstrapLazy([["post-alert.cjs",[[1,"post-alert",{"dismissible":[4],"dismissLabel":[1,"dismiss-label"],"fixed":[4],"icon":[1],"type":[1],"alertId":[32],"classes":[32],"hasActions":[32],"hasHeading":[32],"onDismissButtonClick":[32],"dismiss":[64]},null,{"dismissible":["validateDismissible"],"dismissLabel":["validateDismissLabel"],"fixed":["validateFixed"],"icon":["validateIcon"],"type":["validateType"]}]]],["post-popover.cjs",[[1,"post-popover",{"placement":[1],"closeButtonCaption":[1,"close-button-caption"],"arrow":[4],"show":[64],"hide":[64],"toggle":[64]}]]],["post-tooltip.cjs",[[1,"post-tooltip",{"placement":[1],"show":[64],"hide":[64],"toggle":[64]}]]],["post-accordion.cjs",[[1,"post-accordion",{"multiple":[4],"toggle":[64],"expandAll":[64],"collapseAll":[64]},[[0,"collapseChange","collapseChangeHandler"]]]]],["post-collapsible.cjs",[[1,"post-collapsible",{"collapsed":[4],"headingLevel":[2,"heading-level"],"id":[32],"isOpen":[32],"hasHeader":[32],"headingTag":[32],"toggle":[64]},null,{"collapsed":["validateCollapsed"],"headingLevel":["validateHeadingLevel"]}]]],["post-tab-header.cjs",[[1,"post-tab-header",{"panel":[1],"tabId":[32]},null,{"panel":["validateFor"]}]]],["post-tab-panel.cjs",[[1,"post-tab-panel",{"name":[1],"panelId":[32]}]]],["post-tabs.cjs",[[1,"post-tabs",{"activePanel":[1,"active-panel"],"show":[64]}]]],["post-icon.cjs",[[1,"post-icon",{"animation":[1],"base":[1],"flipH":[4,"flip-h"],"flipV":[4,"flip-v"],"name":[1],"rotate":[2],"scale":[2],"svgStyles":[32],"svgOutput":[32]},null,{"animation":["validateAnimation"],"base":["validateBase"],"flipH":["validateFlipH"],"flipV":["validateFlipV"],"name":["validateName"],"rotate":["validateRotate"],"scale":["validateScale"]}]]],["post-popovercontainer.cjs",[[1,"post-popovercontainer",{"placement":[1],"arrow":[4],"show":[64],"hide":[64],"toggle":[64]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/post-components.cjs.js.map

@@ -1 +1 @@
-{"file":"post-components.cjs.js","mappings":";;;;;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAa3B,IAAI,MAAM,UAAU,GAAG,iNAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACpBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","bootstrapLazy"],"sources":["../../node_modules/.pnpm/@stencil+core@4.7.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.7.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    const scriptElm = BUILD.scriptDataOpts\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    if (importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
+{"file":"post-components.cjs.js","mappings":";;;;;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAa3B,IAAI,MAAM,UAAU,GAAG,iNAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACpBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","bootstrapLazy"],"sources":["../../node_modules/.pnpm/@stencil+core@4.9.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.9.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    const scriptElm = BUILD.scriptDataOpts\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    if (importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}

package/dist/cjs/post-icon-3dbb7728.js

@@ -0,0 +1,105 @@
+'use strict';
+
+const index = require('./index-c07c0cdb.js');
+const index$1 = require('./index-8c288b1a.js');
+const _package = require('./package-cd0e9960.js');
+const checkNonEmpty = require('./check-non-empty-eeaa8f77.js');
+
+const postIconCss = ":host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
+
+const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
+const ANIMATION_NAMES = [
+    'cylon',
+    'cylon-vertical',
+    'spin',
+    'spin-reverse',
+    'fade',
+    'throb',
+];
+const ANIMATION_KEYS = [...ANIMATION_NAMES];
+const PostIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.svgStyles = undefined;
+        this.svgOutput = undefined;
+        this.animation = null;
+        this.base = null;
+        this.flipH = false;
+        this.flipV = false;
+        this.name = undefined;
+        this.rotate = null;
+        this.scale = null;
+    }
+    validateAnimation(newValue = this.animation) {
+        if (newValue !== undefined)
+            index$1.checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon "animation" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);
+    }
+    validateBase(newValue = this.base) {
+        index$1.checkEmptyOrType(newValue, 'string', 'The post-icon "base" prop should be a string.');
+    }
+    validateFlipH(newValue = this.flipH) {
+        index$1.checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipH" prop should be a boolean.');
+    }
+    validateFlipV(newValue = this.flipV) {
+        index$1.checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
+    }
+    validateName(newValue = this.name) {
+        checkNonEmpty.checkNonEmpty(newValue, 'The post-icon "name" prop is required!.');
+        index$1.checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
+    }
+    validateRotate(newValue = this.rotate) {
+        index$1.checkEmptyOrType(newValue, 'number', 'The post-icon "rotate" prop should be a number.');
+    }
+    validateScale(newValue = this.scale) {
+        index$1.checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
+    }
+    componentWillLoad() {
+        this.validateBase();
+        this.validateName();
+        this.validateFlipH();
+        this.validateFlipV();
+        this.validateScale();
+        this.validateRotate();
+        this.validateAnimation();
+    }
+    componentWillRender() {
+        this.setPath();
+    }
+    setPath() {
+        var _a, _b, _c, _d;
+        // Construct icon path from different possible sources
+        const metaBase = (_b = (_a = document.head
+            .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base')) !== null && _b !== void 0 ? _b : null;
+        const fileBase = `${(_d = (_c = this.base) !== null && _c !== void 0 ? _c : metaBase) !== null && _d !== void 0 ? _d : CDN_URL}/`.replace(/\/\/$/, '/');
+        const fileName = `${this.name}.svg#icon`;
+        const filePath = `${fileBase}${fileName}`;
+        this.path = new URL(filePath, window.location.origin).toString();
+    }
+    render() {
+        // create inline styles for some properties
+        const svgStyles = Object.entries({
+            '-webkit-mask-image': `url('${this.path}')`,
+            'mask-image': `url('${this.path}')`,
+            'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
+                (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
+        })
+            .filter(([_key, value]) => value !== null)
+            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
+        return (index.h(index.Host, { "data-version": _package.version }, index.h("span", { style: svgStyles })));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "animation": ["validateAnimation"],
+        "base": ["validateBase"],
+        "flipH": ["validateFlipH"],
+        "flipV": ["validateFlipV"],
+        "name": ["validateName"],
+        "rotate": ["validateRotate"],
+        "scale": ["validateScale"]
+    }; }
+};
+PostIcon.style = postIconCss;
+
+exports.PostIcon = PostIcon;
+
+//# sourceMappingURL=post-icon-3dbb7728.js.map

package/dist/cjs/post-icon-3dbb7728.js.map

@@ -0,0 +1 @@
+{"file":"post-icon-3dbb7728.js","mappings":"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","names":["checkEmptyOrOneOf","checkEmptyOrType","checkNonEmpty","checkType","h","Host","version"],"sources":["src/components/post-icon/post-icon.scss?tag=post-icon&encapsulation=shadow","src/components/post-icon/post-icon.tsx"],"sourcesContent":["@use 'sass:map';\n\n$post-icon-animations: (\n  'cylon': icon-animation-cylon 0.75s ease-in-out infinite alternate,\n  'cylon-vertical': icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate,\n  'spin': icon-animation-spin 2s linear infinite normal,\n  'spin-reverse': icon-animation-spin 2s linear infinite reverse,\n  'fade': icon-animation-fade 0.75s ease-in-out infinite alternate,\n  'throb': icon-animation-throb 0.75s ease-in-out infinite alternate,\n);\n\n:host {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  vertical-align: -0.15em;\n}\n\nspan {\n  display: block;\n  width: 100%;\n  height: 100%;\n  fill: currentColor;\n  background-color: currentColor;\n  -webkit-mask-position: center center;\n  mask-position: center center;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: 100%;\n  mask-size: 100%;\n}\n\n// flip\n\n:host([flip-h]:not([flip-h='false'])) {\n  scale: -1 1;\n}\n\n:host([flip-v]:not([flip-v='false'])) {\n  scale: 1 -1;\n}\n\n:host([flip-h][flip-v]:not([flip-h='false'], [flip-v='false'])) {\n  scale: -1;\n}\n\n// scale\n// done with inline styling\n\n// rotate\n// done with inline styling\n\n// animation\n\n:host([animation]) {\n  transform-origin: center;\n}\n\n@each $key, $value in $post-icon-animations {\n  :host([animation='#{$key}']) {\n    animation: $value;\n  }\n}\n\n@keyframes icon-animation-cylon {\n  from {\n    transform: translateX(-25%);\n  }\n  to {\n    transform: translateX(25%);\n  }\n}\n\n@keyframes icon-animation-cylon-vertical {\n  from {\n    transform: translateY(25%);\n  }\n  to {\n    transform: translateY(-25%);\n  }\n}\n\n@keyframes icon-animation-fade {\n  from {\n    opacity: 0.1;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes icon-animation-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n\n@keyframes icon-animation-throb {\n  from {\n    opacity: 0.5;\n    transform: scale(0.5);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n","import { Component, Element, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';\nimport { version } from '../../../package.json';\n\nconst CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';\nconst ANIMATION_NAMES = [\n  'cylon',\n  'cylon-vertical',\n  'spin',\n  'spin-reverse',\n  'fade',\n  'throb',\n] as const;\nconst ANIMATION_KEYS = [...ANIMATION_NAMES];\n\ntype Animation = (typeof ANIMATION_NAMES)[number];\n\n/**\n * @class PostIcon - representing a stencil component\n */\n@Component({\n  tag: 'post-icon',\n  styleUrl: 'post-icon.scss',\n  shadow: true,\n})\nexport class PostIcon {\n  private path: string;\n\n  @Element() host: HTMLPostIconElement;\n\n  @State() svgStyles: string;\n  @State() svgOutput: string;\n\n  /**\n   * The name of the animation.\n   */\n  @Prop() readonly animation?: Animation | null = null;\n\n  @Watch('animation')\n  validateAnimation(newValue = this.animation) {\n    if (newValue !== undefined)\n      checkEmptyOrOneOf(\n        newValue,\n        ANIMATION_KEYS,\n        `The post-icon \"animation\" prop requires one of the following values: ${ANIMATION_KEYS.join(\n          ', ',\n        )}.`,\n      );\n  }\n\n  /**\n   * The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url.\n   */\n  @Prop() readonly base?: string | null = null;\n\n  @Watch('base')\n  validateBase(newValue = this.base) {\n    checkEmptyOrType(newValue, 'string', 'The post-icon \"base\" prop should be a string.');\n  }\n\n  /**\n   * When set to `true`, the icon will be flipped horizontally.\n   */\n  @Prop() readonly flipH?: boolean = false;\n\n  @Watch('flipH')\n  validateFlipH(newValue = this.flipH) {\n    checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipH\" prop should be a boolean.');\n  }\n\n  /**\n   * When set to `true`, the icon will be flipped vertically.\n   */\n  @Prop() readonly flipV?: boolean = false;\n\n  @Watch('flipV')\n  validateFlipV(newValue = this.flipV) {\n    checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipV\" prop should be a boolean.');\n  }\n\n  /**\n   * The name/id of the icon (e.g. 1000, 1001, ...).\n   */\n  @Prop() readonly name!: string;\n\n  @Watch('name')\n  validateName(newValue = this.name) {\n    checkNonEmpty(newValue, 'The post-icon \"name\" prop is required!.');\n    checkType(newValue, 'string', 'The post-icon \"name\" prop should be a string.');\n  }\n\n  /**\n   * The number of degree for the css rotate transformation.\n   */\n  @Prop() readonly rotate?: number | null = null;\n\n  @Watch('rotate')\n  validateRotate(newValue = this.rotate) {\n    checkEmptyOrType(newValue, 'number', 'The post-icon \"rotate\" prop should be a number.');\n  }\n\n  /**\n   * The number for the css scale transformation.\n   */\n  @Prop() readonly scale?: number | null = null;\n\n  @Watch('scale')\n  validateScale(newValue = this.scale) {\n    checkEmptyOrType(newValue, 'number', 'The post-icon \"scale\" prop should be a number.');\n  }\n\n  componentWillLoad() {\n    this.validateBase();\n    this.validateName();\n    this.validateFlipH();\n    this.validateFlipV();\n    this.validateScale();\n    this.validateRotate();\n    this.validateAnimation();\n  }\n\n  componentWillRender() {\n    this.setPath();\n  }\n\n  private setPath() {\n    // Construct icon path from different possible sources\n    const metaBase =\n      document.head\n        .querySelector('meta[name=\"design-system-settings\"][data-post-icon-base]')\n        ?.getAttribute('data-post-icon-base') ?? null;\n\n    const fileBase = `${this.base ?? metaBase ?? CDN_URL}/`.replace(/\\/\\/$/, '/');\n    const fileName = `${this.name}.svg#icon`;\n    const filePath = `${fileBase}${fileName}`;\n\n    this.path = new URL(filePath, window.location.origin).toString();\n  }\n\n  render() {\n    // create inline styles for some properties\n    const svgStyles = Object.entries({\n      '-webkit-mask-image': `url('${this.path}')`,\n      'mask-image': `url('${this.path}')`,\n      'transform':\n        (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +\n        (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),\n    })\n      .filter(([_key, value]) => value !== null)\n      .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});\n    return (\n      <Host data-version={version}>\n        <span style={svgStyles}></span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,13 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postIcon = require('./post-icon-91f6603a.js');
-require('./index-e7618bb3.js');
-require('./index-b38a23e0.js');
+const postIcon = require('./post-icon-3dbb7728.js');
+require('./index-c07c0cdb.js');
+require('./index-8c288b1a.js');
 require('./constants-238701d3.js');
-require('./check-one-of-27ad3154.js');
-require('./package-041a8597.js');
-require('./check-non-empty-ae713942.js');
+require('./package-cd0e9960.js');
+require('./check-non-empty-eeaa8f77.js');
 
 
 

package/dist/cjs/post-icon.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"post-icon.entry.cjs.js","mappings":";;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"post-icon.entry.cjs.js","mappings":";;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/post-popover-ea22d235.js

@@ -0,0 +1,118 @@
+'use strict';
+
+const index = require('./index-c07c0cdb.js');
+const _package = require('./package-cd0e9960.js');
+
+const postPopoverCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.btn-close{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;-webkit-appearance:button;appearance:button;outline:none;outline-offset:2px;border-radius:4px;color:var(--post-gray-80);transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color)}.btn-close::before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/g%3E%3C/svg%3E\");background-color:currentColor;content:\"\";display:block;height:1.5rem;width:1.5rem}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:var(--post-contrast-color)}.btn-close:disabled{color:var(--post-gray-40)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}*{box-sizing:border-box}:host{--post-contrast-color:#fff;--post-bg-rgb:51, 51, 51;display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{display:flex;align-items:self-start;padding:.5em;max-width:min(66vw,60rem)}@media (max-width: 599.98px){.popover-container{max-width:100%}}.popover-content{padding:.5em}";
+
+const PostPopover = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.placement = 'top';
+        this.closeButtonCaption = undefined;
+        this.arrow = true;
+        this.localTogglePopover = e => this.toggle(e.target);
+        this.localEnterTogglePopover = e => {
+            if (e.key === 'Enter')
+                this.toggle(e.target);
+        };
+        this.localTouchTogglePopover = e => {
+            e.preventDefault();
+            this.toggle(e.target);
+        };
+    }
+    connectedCallback() {
+        if (!this.triggers) {
+            throw new Error(`No trigger found for <post-popover popover-id="${this.host.id}`);
+        }
+        // As long as cross-shadow-boundary [popovertarget] and button.popoverTargetElement are not working
+        // we're left with listening to trigger events ourselves
+        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/popoverTargetElement
+        // https://github.com/whatwg/html/issues/9109#issuecomment-1494030465 (does not seem to work for now)
+        // https://stackoverflow.com/questions/77324143/popovertargetelement-does-not-cross-shadow-boundaries?noredirect=1#comment136318281_77324143
+        this.triggers.forEach(trigger => {
+            // See this.onToggle for one time mouse event listener
+            trigger.addEventListener('mouseup', this.localTogglePopover, { once: true });
+            trigger.addEventListener('keypress', this.localEnterTogglePopover);
+            trigger.addEventListener('touch', this.localTouchTogglePopover, { once: true });
+            trigger.setAttribute('aria-expanded', 'false');
+        });
+    }
+    disconnectedCallback() {
+        this.triggers.forEach(trigger => {
+            trigger.removeEventListener('mouseup', this.localTogglePopover);
+            trigger.removeEventListener('keypress', this.localEnterTogglePopover);
+            trigger.removeEventListener('touch', this.localTouchTogglePopover);
+            trigger.removeAttribute('aria-expanded');
+        });
+    }
+    /**
+     * Programmatically display the popover
+     * @param target An element with [data-popover-target="id"] where the popover should be shown
+     */
+    async show(target) {
+        this.currentTarget = target;
+        this.popoverRef.show(target);
+        target.setAttribute('aria-expanded', 'true');
+    }
+    /**
+     * Programmatically hide this popover
+     */
+    async hide() {
+        this.popoverRef.hide();
+        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
+    }
+    /**
+     * Toggle popover display
+     * @param target An element with [data-popover-target="id"] where the popover should be anchored to
+     * @param force Pass true to always show or false to always hide
+     */
+    async toggle(target, force) {
+        this.currentTarget = target;
+        const newState = await this.popoverRef.toggle(target, force);
+        target.setAttribute('aria-expanded', `${newState}`);
+    }
+    get triggers() {
+        return document.querySelectorAll(`[data-popover-target="${this.host.id}"]`);
+    }
+    /**
+     * One time event handler for click events
+     * A permanent event listener would prevent a toggle button from working properly:
+     * A click opens the popover, a second click first closes it (due to light dismiss), then directly
+     * opens it again because of the click listener on the button. Registering a new
+     * one time listener after a small timeout solves this issue.
+     * @param e toggle event from post-popovercontainer
+     */
+    onToggle(e) {
+        if (this.currentTarget) {
+            this.currentTarget.setAttribute('aria-expanded', `${e.detail}`);
+        }
+        if (!e.detail) {
+            window.requestAnimationFrame(() => {
+                this.triggers.forEach(trigger => {
+                    trigger.addEventListener('mouseup', this.localTogglePopover, { once: true });
+                    trigger.addEventListener('touch', this.localTouchTogglePopover, { once: true });
+                });
+            });
+            // Handle missing re-focusing logic after close. Can be removed as soon as popovertarget works correctly
+            if (this.currentTarget) {
+                this.currentTarget.focus();
+                this.currentTarget = null;
+            }
+        }
+    }
+    // Fix for firefox to prevent the following lines from triggering
+    // https://github.com/oddbird/popover-polyfill/blob/main/src/popover.ts#L338
+    stopImmediatePropagation(e) {
+        e.stopImmediatePropagation();
+    }
+    render() {
+        return (index.h(index.Host, { "data-version": _package.version }, index.h("post-popovercontainer", { arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e), onPostPopoverToggled: e => this.onToggle(e) }, index.h("div", { class: "popover-container", onPointerDown: e => this.stopImmediatePropagation(e), onPointerUp: e => this.stopImmediatePropagation(e) }, index.h("div", { class: "popover-content" }, index.h("slot", null)), index.h("button", { class: "btn-close", onClick: () => this.hide() }, index.h("span", { class: "visually-hidden" }, this.closeButtonCaption))))));
+    }
+    get host() { return index.getElement(this); }
+};
+PostPopover.style = postPopoverCss;
+
+exports.PostPopover = PostPopover;
+
+//# sourceMappingURL=post-popover-ea22d235.js.map

package/dist/cjs/post-popover-ea22d235.js.map

@@ -0,0 +1 @@
+{"file":"post-popover-ea22d235.js","mappings":"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","names":["h","Host","version"],"sources":["src/components/post-popover/post-popover.scss?tag=post-popover&encapsulation=shadow","src/components/post-popover/post-popover.tsx"],"sourcesContent":["@use '@swisspost/design-system-styles/core' as post;\n@use '@swisspost/design-system-styles/components/close';\n\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  --post-contrast-color: #{post.$white};\n  --post-bg-rgb: #{post.rgb-values(post.$gray-80)};\n\n  display: block;\n}\n\n.visually-hidden {\n  @include post.visuallyhidden();\n}\n\n.popover-container {\n  display: flex;\n  align-items: self-start;\n  padding: 0.5em;\n\n  // Max 2/3 of the column width\n  max-width: min(66vw, 60rem);\n\n  // Max available width on mobile, popovercontainer will handle offsets\n  @include post.media-breakpoint-down(rg) {\n    max-width: 100%;\n  }\n}\n\n.popover-content {\n  padding: 0.5em;\n}\n","import { Component, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { Placement } from '@floating-ui/dom';\n\nimport { version } from '../../../package.json';\n@Component({\n  tag: 'post-popover',\n  styleUrl: 'post-popover.scss',\n  shadow: true,\n})\nexport class PostPopover {\n  private popoverRef: HTMLPostPopovercontainerElement;\n  private localTogglePopover: (e: Event) => Promise<void>;\n  private localEnterTogglePopover: (e: KeyboardEvent) => void;\n  private localTouchTogglePopover: (e: TouchEvent) => void;\n  private currentTarget: HTMLElement;\n\n  @Element() host: HTMLPostPopoverElement;\n\n  /**\n   * Defines the placement of the popover according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\n   * Popoverss are automatically flipped to the opposite side if there is not enough available space and are shifted\n   * towards the viewport if they would overlap edge boundaries.\n   */\n  @Prop() readonly placement?: Placement = 'top';\n\n  /**\n   * Define the caption of the close button for assistive technology\n   */\n  @Prop() readonly closeButtonCaption!: string;\n  /**\n   * Show a little indicator arrow\n   */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() readonly arrow?: boolean = true;\n\n  constructor() {\n    this.localTogglePopover = e => this.toggle(e.target as HTMLElement);\n    this.localEnterTogglePopover = e => {\n      if (e.key === 'Enter') this.toggle(e.target as HTMLElement);\n    };\n    this.localTouchTogglePopover = e => {\n      e.preventDefault();\n      this.toggle(e.target as HTMLElement);\n    };\n  }\n\n  connectedCallback() {\n    if (!this.triggers) {\n      throw new Error(`No trigger found for <post-popover popover-id=\"${this.host.id}`);\n    }\n\n    // As long as cross-shadow-boundary [popovertarget] and button.popoverTargetElement are not working\n    // we're left with listening to trigger events ourselves\n    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/popoverTargetElement\n    // https://github.com/whatwg/html/issues/9109#issuecomment-1494030465 (does not seem to work for now)\n    // https://stackoverflow.com/questions/77324143/popovertargetelement-does-not-cross-shadow-boundaries?noredirect=1#comment136318281_77324143\n    this.triggers.forEach(trigger => {\n      // See this.onToggle for one time mouse event listener\n      trigger.addEventListener('mouseup', this.localTogglePopover, { once: true });\n      trigger.addEventListener('keypress', this.localEnterTogglePopover);\n      trigger.addEventListener('touch', this.localTouchTogglePopover, { once: true });\n      trigger.setAttribute('aria-expanded', 'false');\n    });\n  }\n\n  disconnectedCallback() {\n    this.triggers.forEach(trigger => {\n      trigger.removeEventListener('mouseup', this.localTogglePopover);\n      trigger.removeEventListener('keypress', this.localEnterTogglePopover);\n      trigger.removeEventListener('touch', this.localTouchTogglePopover);\n      trigger.removeAttribute('aria-expanded');\n    });\n  }\n\n  /**\n   * Programmatically display the popover\n   * @param target An element with [data-popover-target=\"id\"] where the popover should be shown\n   */\n  @Method()\n  async show(target: HTMLElement) {\n    this.currentTarget = target;\n    this.popoverRef.show(target);\n    target.setAttribute('aria-expanded', 'true');\n  }\n\n  /**\n   * Programmatically hide this popover\n   */\n  @Method()\n  async hide() {\n    this.popoverRef.hide();\n    this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));\n  }\n\n  /**\n   * Toggle popover display\n   * @param target An element with [data-popover-target=\"id\"] where the popover should be anchored to\n   * @param force Pass true to always show or false to always hide\n   */\n  @Method()\n  async toggle(target: HTMLElement, force?: boolean) {\n    this.currentTarget = target;\n    const newState = await this.popoverRef.toggle(target, force);\n    target.setAttribute('aria-expanded', `${newState}`);\n  }\n\n  private get triggers() {\n    return document.querySelectorAll(`[data-popover-target=\"${this.host.id}\"]`);\n  }\n\n  /**\n   * One time event handler for click events\n   * A permanent event listener would prevent a toggle button from working properly:\n   * A click opens the popover, a second click first closes it (due to light dismiss), then directly\n   * opens it again because of the click listener on the button. Registering a new\n   * one time listener after a small timeout solves this issue.\n   * @param e toggle event from post-popovercontainer\n   */\n  private onToggle(e: CustomEvent<boolean>) {\n    if (this.currentTarget) {\n      this.currentTarget.setAttribute('aria-expanded', `${e.detail}`);\n    }\n    if (!e.detail) {\n      window.requestAnimationFrame(() => {\n        this.triggers.forEach(trigger => {\n          trigger.addEventListener('mouseup', this.localTogglePopover, { once: true });\n          trigger.addEventListener('touch', this.localTouchTogglePopover, { once: true });\n        });\n      });\n\n      // Handle missing re-focusing logic after close. Can be removed as soon as popovertarget works correctly\n      if (this.currentTarget) {\n        this.currentTarget.focus();\n        this.currentTarget = null;\n      }\n    }\n  }\n\n  // Fix for firefox to prevent the following lines from triggering\n  // https://github.com/oddbird/popover-polyfill/blob/main/src/popover.ts#L338\n  private stopImmediatePropagation(e: PointerEvent) {\n    e.stopImmediatePropagation();\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <post-popovercontainer\n          arrow={this.arrow}\n          placement={this.placement}\n          ref={e => (this.popoverRef = e)}\n          onPostPopoverToggled={e => this.onToggle(e)}\n        >\n          <div\n            class=\"popover-container\"\n            onPointerDown={e => this.stopImmediatePropagation(e)}\n            onPointerUp={e => this.stopImmediatePropagation(e)}\n          >\n            <div class=\"popover-content\">\n              <slot></slot>\n            </div>\n            <button class=\"btn-close\" onClick={() => this.hide()}>\n              <span class=\"visually-hidden\">{this.closeButtonCaption}</span>\n            </button>\n          </div>\n        </post-popovercontainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const postPopover = require('./post-popover-ea22d235.js');
+require('./index-c07c0cdb.js');
+require('./package-cd0e9960.js');
+
+
+
+exports.post_popover = postPopover.PostPopover;
+
+//# sourceMappingURL=post-popover.cjs.entry.js.map

package/dist/cjs/post-popover.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"post-popover.entry.cjs.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}