@swisspost/design-system-components 9.0.0-next.3 → 9.0.0-next.30

package/dist/cjs/post-icon-1f71aa0f.js

@@ -1,104 +0,0 @@
-'use strict';
-
-const index = require('./index-e1f32cce.js');
-const index$1 = require('./index-01f30442.js');
-const _package = require('./package-ef26e62c.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;forced-color-adjust:preserve-parent-color;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 PostIconStyle0 = postIconCss;
-
-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.');
-    }
-    componentDidLoad() {
-        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`;
-        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, { key: '5def9850dfccafe1ed1499fa042d7c1358256f38', "data-version": _package.version }, index.h("span", { key: '663ec6e0079669d23be3bad4890cdd580145c05b', 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 = PostIconStyle0;
-
-exports.PostIcon = PostIcon;

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

@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const postIcon = require('./post-icon-1f71aa0f.js');
-require('./index-e1f32cce.js');
-require('./index-01f30442.js');
-require('./constants-238701d3.js');
-require('./check-one-of-f4f5d0c0.js');
-require('./package-ef26e62c.js');
-require('./check-non-empty-eeaa8f77.js');
-
-
-
-exports.post_icon = postIcon.PostIcon;

package/dist/cjs/post-language-option-4a3ecaeb.js

@@ -1,67 +0,0 @@
-'use strict';
-
-const index = require('./index-e1f32cce.js');
-const index$1 = require('./index-01f30442.js');
-const _package = require('./package-ef26e62c.js');
-
-const postLanguageOptionCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:inline-block;width:fit-content}button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}a{color:inherit;text-decoration:none}:is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:var(--post-language-option-padding)}";
-const PostLanguageOptionStyle0 = postLanguageOptionCss;
-
-const PostLanguageOption = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.postChange = index.createEvent(this, "postChange", 7);
-        this.code = undefined;
-        this.active = undefined;
-        this.name = undefined;
-        this.url = undefined;
-    }
-    validateCode(value = this.code) {
-        index$1.checkType(value, 'string', 'The "code" property of the post-language-option component must be a string.');
-    }
-    validateActiveProp(value = this.active) {
-        index$1.checkEmptyOrType(value, 'boolean', 'The "active" property of the post-language-option component must be a boolean value.');
-    }
-    validateName(value = this.name) {
-        index$1.checkEmptyOrType(value, 'string', 'The "name" property of the post-language-option component must be a string.');
-    }
-    validateUrl(value = this.url) {
-        index$1.checkEmptyOrType(value, 'string', 'The "url" property of the post-language-option component must be a valid URL.');
-    }
-    componentDidLoad() {
-        this.validateCode();
-        this.validateActiveProp();
-        this.validateName();
-        this.validateUrl();
-        if (!this.name && this.isNameRequired()) {
-            throw new Error('The "name" property of the post-language-option component is required when the full language name is not displayed.');
-        }
-    }
-    /**
-     * Selects the language option programmatically.
-     */
-    async select() {
-        this.active = true;
-        this.emitChange();
-    }
-    emitChange() {
-        this.postChange.emit(this.code);
-    }
-    isNameRequired() {
-        return this.host.textContent.toLowerCase() === this.code.toLowerCase();
-    }
-    render() {
-        const lang = this.code.toLowerCase();
-        return (index.h(index.Host, { key: '2ee12b880402e7bd994185d86931aec2d7421bd8', "data-version": _package.version, role: "listitem" }, this.url ? (index.h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange() }, index.h("slot", null))) : (index.h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange() }, index.h("slot", null)))));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "code": ["validateCode"],
-        "active": ["validateActiveProp"],
-        "name": ["validateName"],
-        "url": ["validateUrl"]
-    }; }
-};
-PostLanguageOption.style = PostLanguageOptionStyle0;
-
-exports.PostLanguageOption = PostLanguageOption;

package/dist/cjs/post-language-option.cjs.entry.js

@@ -1,14 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const postLanguageOption = require('./post-language-option-4a3ecaeb.js');
-require('./index-e1f32cce.js');
-require('./index-01f30442.js');
-require('./constants-238701d3.js');
-require('./check-one-of-f4f5d0c0.js');
-require('./package-ef26e62c.js');
-
-
-
-exports.post_language_option = postLanguageOption.PostLanguageOption;

package/dist/cjs/post-logo-7070d727.js

@@ -1,39 +0,0 @@
-'use strict';
-
-const index = require('./index-e1f32cce.js');
-const _package = require('./package-ef26e62c.js');
-const index$1 = require('./index-01f30442.js');
-
-const postLogoCss = ":host,.logo{display:inline-block}:host,:host .logo>svg,.logo,.logo .logo>svg{height:100%}.description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
-const PostLogoStyle0 = postLogoCss;
-
-const PostLogo = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.url = undefined;
-    }
-    validateUrl() {
-        index$1.checkEmptyOrUrl(this.url, 'The "url" property of the post-logo is invalid');
-    }
-    componentDidLoad() {
-        this.validateUrl();
-        this.checkDescription();
-    }
-    checkDescription() {
-        if (!this.host.textContent) {
-            console.warn('Be sure to add descriptive text in the post-logo to ensure good accessibility of the component.');
-        }
-    }
-    render() {
-        const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
-        const LogoTag = logoLink ? 'a' : 'span';
-        return (index.h(index.Host, { key: '484cc83fcf8886fb627ac047717bc9ef8f0dbcba', "data-version": _package.version }, index.h(LogoTag, Object.assign({ key: '3c9eb2f917cf4d1c6492cc8956e3d82bb946eff6', class: "logo" }, (logoLink ? { href: logoLink } : {})), index.h("span", { key: '2c588b6a52942c5b450162884754050d87f0f316', class: "description" }, index.h("slot", { key: '145e9f0ae716f854a5ece73d5948d7f9dc6864f3', onSlotchange: () => this.checkDescription() })), index.h("svg", { key: 'd92dcb207c5a3e9b46b54bd0a7a3ca56677cf57f', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { key: 'e3101e8162385d4087feb1d6d5b7f7095fa7d625', id: "Logo" }, index.h("rect", { key: '742a55467004c6cb01f16d10594a8ab29d1c6df9', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.h("polygon", { key: '9ace2708a4f7bf72bda2b8cb1760bcd9ed74b9e6', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), index.h("path", { key: '2b9e87466faf9457b093e4a76d8a68bec66bb729', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
-    }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "url": ["validateUrl"]
-    }; }
-};
-PostLogo.style = PostLogoStyle0;
-
-exports.PostLogo = PostLogo;

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

@@ -1,14 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const postLogo = require('./post-logo-7070d727.js');
-require('./index-e1f32cce.js');
-require('./package-ef26e62c.js');
-require('./index-01f30442.js');
-require('./constants-238701d3.js');
-require('./check-one-of-f4f5d0c0.js');
-
-
-
-exports.post_logo = postLogo.PostLogo;

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

@@ -1,104 +0,0 @@
-'use strict';
-
-const index = require('./index-e1f32cce.js');
-const _package = require('./package-ef26e62c.js');
-const attributeObserver = require('./attribute-observer-10f08c04.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;appearance:button;border-radius:4px;color:var(--post-gray-80);transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.btn-close{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.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%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/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%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/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:\"\";display:block;height:1.5rem;width:1.5rem}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-close{color:var(--post-contrast-color)}.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:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.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;min-width:160px;max-width:280px}@media (max-width: 599.98px){.popover-container{max-width:100%}}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:inherit}";
-const PostPopoverStyle0 = postPopoverCss;
-
-/**
- * @slot default - Slot for placing content inside the popover.
- */
-let popoverInstances = 0;
-const popoverTargetAttribute = 'data-popover-target';
-const globalToggleHandler = (e) => {
-    const target = e.target;
-    if (!target || !('getAttribute' in target))
-        return;
-    const popoverTarget = target.getAttribute(popoverTargetAttribute);
-    if (!popoverTarget || ('key' in e && e.key !== 'Enter'))
-        return;
-    const popover = document.getElementById(popoverTarget);
-    popover === null || popover === void 0 ? void 0 : popover.toggle(target);
-};
-// Initialize a mutation observer for patching accessibility features
-const triggerObserver = attributeObserver.getAttributeObserver(popoverTargetAttribute, trigger => {
-    const force = trigger.hasAttribute(popoverTargetAttribute);
-    trigger.setAttribute('aria-expanded', force ? 'false' : null);
-});
-const PostPopover = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.placement = 'top';
-        this.closeButtonCaption = undefined;
-        this.arrow = true;
-        this.localBeforeToggleHandler = this.beforeToggleHandler.bind(this);
-    }
-    connectedCallback() {
-        // Set up accessibility patcher and event listeners for the first component
-        if (popoverInstances === 0) {
-            window.addEventListener('pointerup', globalToggleHandler);
-            window.addEventListener('keydown', globalToggleHandler);
-            triggerObserver.observe(document.body, {
-                subtree: true,
-                childList: true,
-                attributeFilter: [popoverTargetAttribute],
-            });
-        }
-        popoverInstances++;
-        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
-    }
-    componentDidLoad() {
-        this.popoverRef.addEventListener('beforetoggle', this.localBeforeToggleHandler);
-    }
-    disconnectedCallback() {
-        popoverInstances--;
-        // Remove listeners and observer after the last popover has been destructed
-        if (popoverInstances === 0) {
-            window.removeEventListener('click', globalToggleHandler);
-            window.removeEventListener('keydown', globalToggleHandler);
-            triggerObserver.disconnect();
-        }
-        this.popoverRef.removeEventListener('beforetoggle', this.localBeforeToggleHandler);
-        this.triggers.forEach(trigger => 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.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) {
-        const newState = await this.popoverRef.toggle(target, force);
-        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
-        target.setAttribute('aria-expanded', `${newState}`);
-    }
-    get triggers() {
-        return document.querySelectorAll(`[${popoverTargetAttribute}="${this.host.id}"]`);
-    }
-    beforeToggleHandler() {
-        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
-    }
-    render() {
-        return (index.h(index.Host, { key: '6b67868c1156eef8a56185282a3a7deb0244134e', "data-version": _package.version }, index.h("post-popovercontainer", { key: 'ece27b60be001b3c22c92d060ed5f173141d9ab3', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: 'bd6ed5b021f6e5b6704009c8b97a77797603a2b2', class: "popover-container" }, index.h("div", { key: '352f7c368bbf0c3f8835a93478fd93228a1f95d9', class: "popover-content" }, index.h("slot", { key: 'dcc97fac19ab3dcdaa00c59ab2de6eb17662a5cf' })), index.h("button", { key: '0e1d2f250d3519181459638957eb6056535325e6', class: "btn-close", onClick: () => this.hide() }, index.h("span", { key: '55dc6800e309eede4adb8705b41bc1a23e824e11', class: "visually-hidden" }, this.closeButtonCaption))))));
-    }
-    get host() { return index.getElement(this); }
-};
-PostPopover.style = PostPopoverStyle0;
-
-exports.PostPopover = PostPopover;