@swisspost/design-system-components 9.0.0-next.9 → 10.0.0-next.37

package/dist/types/home/runner/work/design-system/design-system/packages/components/.stencil/.config/bindings.angular.d.ts

@@ -0,0 +1,2 @@
+import { ValueAccessorConfig } from '@stencil/angular-output-target';
+export declare const angularValueAccessorBindings: ValueAccessorConfig[];

package/dist/types/index.d.ts

@@ -1,20 +1,21 @@
-export { Components, JSX } from './components';
+export { Components, JSX, PostHeaderCustomEvent } from './components';
 export { PostAccordion } from './components/post-accordion/post-accordion';
 export { PostAccordionItem } from './components/post-accordion-item/post-accordion-item';
 export { PostAvatar } from './components/post-avatar/post-avatar';
 export { PostBackToTop } from './components/post-back-to-top/post-back-to-top';
 export { PostBanner } from './components/post-banner/post-banner';
-export { PostBreadcrumb } from './components/post-breadcrumb/post-breadcrumb';
+export { PostBreadcrumbs } from './components/post-breadcrumbs/post-breadcrumbs';
 export { PostBreadcrumbItem } from './components/post-breadcrumb-item/post-breadcrumb-item';
 export { PostCardControl } from './components/post-card-control/post-card-control';
 export { PostClosebutton } from './components/post-closebutton/post-closebutton';
 export { PostCollapsible } from './components/post-collapsible/post-collapsible';
 export { PostCollapsibleTrigger } from './components/post-collapsible-trigger/post-collapsible-trigger';
 export { PostFooter } from './components/post-footer/post-footer';
-export { PostHeader } from './components/post-header/post-header';
+export { PostHeader, DEVICE_SIZE } from './components/post-header/post-header';
 export { PostIcon } from './components/post-icon/post-icon';
 export { PostLanguageOption } from './components/post-language-option/post-language-option';
 export { PostLanguageSwitch } from './components/post-language-switch/post-language-switch';
+export { PostLinkarea } from './components/post-linkarea/post-linkarea';
 export { PostList } from './components/post-list/post-list';
 export { PostListItem } from './components/post-list-item/post-list-item';
 export { PostLogo } from './components/post-logo/post-logo';
@@ -33,3 +34,4 @@ export { PostTabPanel } from './components/post-tab-panel/post-tab-panel';
 export { PostTag } from './components/post-tag/post-tag';
 export { PostTogglebutton } from './components/post-togglebutton/post-togglebutton';
 export { PostTooltip } from './components/post-tooltip/post-tooltip';
+export { PostTooltipTrigger } from './components/post-tooltip-trigger/post-tooltip-trigger';

package/dist/types/popover-fn.d.ts

@@ -0,0 +1,11 @@
+// It seems like the package '@oddbird/popover-polyfill does not properly declare it's types.
+// This file fixes that issue so typescript does not complain about it on the import line
+
+declare module '@oddbird/popover-polyfill/dist/popover-fn.js' {
+  export {
+    apply,
+    injectStyles,
+    isPolyfilled,
+    isSupported,
+  } from '../node_modules/@oddbird/popover-polyfill/dist/popover-fn.js';
+}

package/dist/types/utils/attribute-observer.d.ts

@@ -1 +1 @@
-export declare const getAttributeObserver: (attribute: string, handler: (element: HTMLElement, mutation?: MutationRecord) => void) => MutationObserver;
+export declare function getAttributeObserver(attribute: string, handler: (element: HTMLElement, mutation?: MutationRecord) => void): MutationObserver;

package/dist/types/utils/breakpoints.d.ts

@@ -3,6 +3,7 @@ export declare class Breakpoint {
     private readonly breakpointMap;
     private readonly current;
     constructor();
+    private getStyles;
     private updateHandler;
     private dispatchEvent;
     get(type: ListenerType): string;

package/dist/types/utils/component-on-ready.d.ts

@@ -3,4 +3,4 @@ import { HostElement } from '../stencil-public-runtime';
  * Invoke the `componentOnReady` method if it is available, simulate it otherwise
  * @see https://stenciljs.com/docs/api#componentonready
  */
-export declare const componentOnReady: <T extends HostElement>(el: T) => Promise<T>;
+export declare function componentOnReady<T extends HostElement>(el: T): Promise<T>;

package/dist/types/utils/environment.d.ts

@@ -0,0 +1,2 @@
+export declare const IS_SERVER: boolean;
+export declare const IS_BROWSER: boolean;

package/dist/types/utils/event-guard.d.ts

@@ -0,0 +1,4 @@
+export declare function eventGuard(host: HTMLElement, event: CustomEvent, options: {
+    targetLocalName: string;
+    delegatorSelector?: string;
+}, callback: () => void): void;

package/dist/types/utils/get-focusable-children.d.ts

@@ -0,0 +1 @@
+export declare function getFocusableChildren(element: Element): HTMLElement[];

package/dist/types/utils/get-root.d.ts

@@ -1 +1,5 @@
-export declare function getRoot(element: HTMLElement): Document | ShadowRoot;
+/**
+ * getRootNode() can only be used after the element has been attached to the document!
+ * So use it for example in the componentDidLoad lifecycle hook.
+ */
+export declare function getRoot(element: Element): Document | ShadowRoot;

package/dist/types/utils/index.d.ts

@@ -1,7 +1,12 @@
+export * from './get-focusable-children';
+export * from './attribute-observer';
 export * from './component-on-ready';
 export * from './property-checkers';
+export * from './breakpoints';
 export * from './debounce';
+export * from './event-guard';
 export * from './get-root';
 export * from './is-motion-reduced';
 export * from './sass-export';
 export * from './timeout';
+export * from './environment';

package/dist/types/utils/property-checkers/check-non-empty.d.ts

@@ -1 +1,3 @@
-export declare function checkNonEmpty(value: unknown, error: string): void;
+export declare function checkNonEmpty<T extends {
+    host: HTMLElement;
+}>(component: T, prop: keyof T, customMessage?: string): void;

package/dist/types/utils/property-checkers/check-one-of.d.ts

@@ -1 +1,3 @@
-export declare function checkOneOf<T>(value: T, possibleValues: readonly T[], error: string): void;
+export declare function checkOneOf<T extends {
+    host: HTMLElement;
+}>(component: T, prop: keyof T, possibleValues: readonly unknown[], customMessage?: string): void;

package/dist/types/utils/property-checkers/check-pattern.d.ts

@@ -1 +1,3 @@
-export declare function checkPattern(value: unknown, pattern: RegExp, errorMessage: string): void;
+export declare function checkPattern<T extends {
+    host: HTMLElement;
+}>(component: T, prop: keyof T, pattern: RegExp, customMessage: string): void;

package/dist/types/utils/property-checkers/check-type.d.ts

@@ -1,2 +1,4 @@
 export type PropertyType = 'boolean' | 'number' | 'string' | 'array' | 'object' | 'function';
-export declare function checkType(value: unknown, type: PropertyType, error: string): void;
+export declare function checkType<T extends {
+    host: HTMLElement;
+}>(component: T, prop: keyof T, type: PropertyType, customMessage?: string): void;

package/dist/types/utils/property-checkers/check-url.d.ts

@@ -1 +1,3 @@
-export declare function checkUrl(value: unknown, error: string): void;
+export declare function checkUrl<T extends {
+    host: HTMLElement;
+}>(component: T, prop: keyof T, customMessage?: string): void;

package/dist/types/utils/property-checkers/index.d.ts

@@ -1,7 +1,15 @@
-export declare const checkEmptyOrOneOf: <T>(value: T, possibleValues: readonly T[], error: string) => void;
-export declare const checkEmptyOrPattern: (value: unknown, pattern: RegExp, errorMessage: string) => void;
-export declare const checkEmptyOrType: (value: unknown, type: import("./check-type").PropertyType, error: string) => void;
-export declare const checkEmptyOrUrl: (value: unknown, error: string) => void;
+export declare const checkEmptyOrOneOf: <T extends {
+    host: HTMLElement;
+}>(component: T, prop: keyof T, possibleValues: readonly unknown[], customMessage?: string) => void;
+export declare const checkEmptyOrPattern: <T extends {
+    host: HTMLElement;
+}>(component: T, prop: keyof T, pattern: RegExp, customMessage: string) => void;
+export declare const checkEmptyOrType: <T extends {
+    host: HTMLElement;
+}>(component: T, prop: keyof T, type: import("./check-type").PropertyType, customMessage?: string) => void;
+export declare const checkEmptyOrUrl: <T extends {
+    host: HTMLElement;
+}>(component: T, prop: keyof T, customMessage?: string) => void;
 export * from './check-non-empty';
 export * from './check-one-of';
 export * from './check-pattern';

package/dist/types/utils/sass-export.d.ts

@@ -1,2 +1,6 @@
-export declare function parse(scss: object): {};
+type Scss = {
+    [key: string]: string;
+};
+export declare function parse(scss: Scss): {};
 export declare function formatAsMap(obj: object): string;
+export {};

package/loaders/breakpoints.js

@@ -0,0 +1,56 @@
+const IS_SERVER = typeof window === 'undefined';
+const IS_BROWSER = !IS_SERVER;
+
+class Breakpoint {
+    constructor() {
+        this.current = {
+            key: '',
+            name: '',
+        };
+        if (IS_BROWSER && !this.breakpointMap) {
+            const keys = this.getStyles('--post-breakpoint-keys');
+            const names = this.getStyles('--post-breakpoint-names');
+            const widths = this.getStyles('--post-breakpoint-widths');
+            this.breakpointMap = widths
+                .map((width, i) => ({
+                minWidth: Number(width),
+                key: keys[i],
+                name: names[i],
+            }))
+                .reverse();
+            window.addEventListener('resize', () => this.updateHandler(), { passive: true });
+        }
+    }
+    getStyles(propertyName) {
+        const styles = getComputedStyle(document.documentElement);
+        return (styles
+            .getPropertyValue(propertyName)
+            ?.split(',')
+            .map(w => w.trim()) ?? []);
+    }
+    updateHandler(emitEvents = true) {
+        const calculated = this.breakpointMap.find(({ minWidth }) => innerWidth >= minWidth);
+        if (this.current.key !== calculated.key) {
+            this.current.key = calculated.key;
+            if (emitEvents)
+                this.dispatchEvent('key');
+        }
+        if (this.current.name !== calculated.name) {
+            this.current.name = calculated.name;
+            if (emitEvents)
+                this.dispatchEvent('name');
+        }
+    }
+    dispatchEvent(type) {
+        if (IS_BROWSER) {
+            window.dispatchEvent(new CustomEvent(`postBreakpoint:${type}`, { detail: this.current[type] }));
+        }
+    }
+    get(type) {
+        this.updateHandler(false);
+        return this.current[type];
+    }
+}
+const breakpoint = new Breakpoint();
+
+export { IS_BROWSER as I, breakpoint as b };

package/loaders/check-non-empty.js

@@ -1,8 +1,12 @@
 import { E as EMPTY_VALUES } from './constants.js';
 
-function checkNonEmpty(value, error) {
+function checkNonEmpty(component, prop, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component is required.`;
+    const message = customMessage || defaultMessage;
     if (EMPTY_VALUES.some(v => v === value)) {
-        throw new Error(error);
+        throw new Error(message);
     }
 }
 

package/loaders/check-one-of.js

@@ -1,6 +1,11 @@
-function checkOneOf(value, possibleValues, error) {
-    if (!possibleValues.includes(value))
-        throw new Error(error);
+function checkOneOf(component, prop, possibleValues, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be one of the following values: ${possibleValues.join(', ')}.`;
+    const message = customMessage || defaultMessage;
+    if (!possibleValues.includes(value)) {
+        throw new Error(message);
+    }
 }
 
 export { checkOneOf as c };

package/loaders/check-type.js

@@ -1,13 +1,18 @@
-function checkType(value, type, error) {
+function checkType(component, prop, type, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
     const typeIsArray = type === 'array';
     const valueIsArray = Array.isArray(value);
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be of type \`
+    ${type}\`.`;
+    const message = customMessage || defaultMessage;
     if (typeIsArray || valueIsArray) {
-        if (valueIsArray !== typeIsArray)
-            throw new Error(error);
+        if (valueIsArray !== typeIsArray) {
+            throw new Error(message);
+        }
     }
-    else {
-        if (typeof value !== type)
-            throw new Error(error);
+    else if (typeof value !== type) {
+        throw new Error(message);
     }
 }
 

package/loaders/event-guard.js

@@ -0,0 +1,45 @@
+function eventGuard(host, event, options, callback) {
+    const target = event.target;
+    if (!target)
+        return;
+    if (target.localName === options.targetLocalName) {
+        if (!options.delegatorSelector || shadowClosest(target, options.delegatorSelector) === host) {
+            callback();
+        }
+    }
+}
+/**
+ * Traverses up the DOM (including crossing shadow DOM boundaries) starting from the given element
+ * to find and return the closest ancestor that matches the specified CSS selector.
+ * If no matching element is found, returns null.
+ *
+ * @param element - The starting element from which the search begins.
+ * @param selector - The CSS selector used to test each ancestor element.
+ * @returns The closest matching ancestor element or null if none is found.
+ */
+function shadowClosest(element, selector) {
+    let currentElement = element;
+    while (currentElement) {
+        if (currentElement.matches(selector)) {
+            return currentElement;
+        }
+        const parent = currentElement.parentElement;
+        if (parent) {
+            currentElement = parent;
+        }
+        else {
+            const parentNode = currentElement.parentNode;
+            // When no parentElement exists, check if the current element is inside a shadow DOM.
+            // If so, move up to the shadow host to continue the search outside the shadow boundary.
+            if (parentNode instanceof ShadowRoot) {
+                currentElement = parentNode.host;
+            }
+            else {
+                currentElement = null;
+            }
+        }
+    }
+    return null;
+}
+
+export { eventGuard as e };

package/loaders/fade.js

@@ -1,7 +1,11 @@
 const fadeDuration = 200;
 const fadedOutKeyframe = { opacity: '0' };
 const fadedInKeyframe = { opacity: '1' };
-const fadeIn = (el) => el.animate([fadedOutKeyframe, fadedInKeyframe], { duration: fadeDuration });
-const fadeOut = (el) => el.animate([fadedInKeyframe, fadedOutKeyframe], { duration: fadeDuration });
+function fadeIn(el) {
+    return el.animate([fadedOutKeyframe, fadedInKeyframe], { duration: fadeDuration });
+}
+function fadeOut(el) {
+    return el.animate([fadedInKeyframe, fadedOutKeyframe], { duration: fadeDuration });
+}
 
 export { fadeIn as a, fadeOut as f };

package/loaders/get-focusable-children.js

@@ -0,0 +1,35 @@
+const focusableSelector = `:where(${[
+    'button',
+    'input:not([type="hidden"])',
+    '[tabindex]',
+    'select',
+    'textarea',
+    '[contenteditable]',
+    'a[href]',
+    'iframe',
+    'audio[controls]',
+    'video[controls]',
+    'area[href]',
+    'details > summary:first-of-type',
+].join(',')})`;
+const focusDisablingSelector = `:where(${[
+    '[inert]',
+    '[inert] *',
+    ':disabled',
+    'dialog:not([open]) *',
+    '[popover]:not(:popover-open) *',
+    'details:not([open]) > *:not(details > summary:first-of-type)',
+    'details:not([open]) > *:not(details > summary:first-of-type) *',
+    '[tabindex^="-"]',
+    '[hidden]:not([hidden="false"])',
+].join(',')})`;
+function getFocusableChildren(element) {
+    const focusableChildren = element.querySelectorAll(`${focusableSelector}:not(${focusDisablingSelector})`);
+    const visibleFocusableChildren = Array.from(focusableChildren).filter(child => {
+        const style = window.getComputedStyle(child.parentElement);
+        return style.display !== 'none' && style.visibility !== 'hidden';
+    });
+    return visibleFocusableChildren;
+}
+
+export { getFocusableChildren as g };

package/loaders/get-root.js

@@ -1,5 +1,11 @@
+import { I as IS_BROWSER } from './breakpoints.js';
+
+/**
+ * getRootNode() can only be used after the element has been attached to the document!
+ * So use it for example in the componentDidLoad lifecycle hook.
+ */
 function getRoot(element) {
-    const root = element.getRootNode();
+    const root = IS_BROWSER ? element.getRootNode() : element;
     if (root instanceof Document || root instanceof ShadowRoot) {
         return root;
     }

package/loaders/index.browser.js

@@ -0,0 +1,14 @@
+const urlAlphabet =
+  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+
+/* @ts-self-types="./index.d.ts" */
+let nanoid = (size = 21) => {
+  let id = '';
+  let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)));
+  while (size--) {
+    id += urlAlphabet[bytes[size] & 63];
+  }
+  return id
+};
+
+export { nanoid as n };

package/loaders/index.d.ts

@@ -9,10 +9,10 @@ export { PostBackToTop as PostBackToTop } from '../dist/types/components/post-ba
 export { defineCustomElement as defineCustomElementPostBackToTop } from './post-back-to-top';
 export { PostBanner as PostBanner } from '../dist/types/components/post-banner/post-banner';
 export { defineCustomElement as defineCustomElementPostBanner } from './post-banner';
-export { PostBreadcrumb as PostBreadcrumb } from '../dist/types/components/post-breadcrumb/post-breadcrumb';
-export { defineCustomElement as defineCustomElementPostBreadcrumb } from './post-breadcrumb';
 export { PostBreadcrumbItem as PostBreadcrumbItem } from '../dist/types/components/post-breadcrumb-item/post-breadcrumb-item';
 export { defineCustomElement as defineCustomElementPostBreadcrumbItem } from './post-breadcrumb-item';
+export { PostBreadcrumbs as PostBreadcrumbs } from '../dist/types/components/post-breadcrumbs/post-breadcrumbs';
+export { defineCustomElement as defineCustomElementPostBreadcrumbs } from './post-breadcrumbs';
 export { PostCardControl as PostCardControl } from '../dist/types/components/post-card-control/post-card-control';
 export { defineCustomElement as defineCustomElementPostCardControl } from './post-card-control';
 export { PostClosebutton as PostClosebutton } from '../dist/types/components/post-closebutton/post-closebutton';
@@ -31,6 +31,8 @@ export { PostLanguageOption as PostLanguageOption } from '../dist/types/componen
 export { defineCustomElement as defineCustomElementPostLanguageOption } from './post-language-option';
 export { PostLanguageSwitch as PostLanguageSwitch } from '../dist/types/components/post-language-switch/post-language-switch';
 export { defineCustomElement as defineCustomElementPostLanguageSwitch } from './post-language-switch';
+export { PostLinkarea as PostLinkarea } from '../dist/types/components/post-linkarea/post-linkarea';
+export { defineCustomElement as defineCustomElementPostLinkarea } from './post-linkarea';
 export { PostList as PostList } from '../dist/types/components/post-list/post-list';
 export { defineCustomElement as defineCustomElementPostList } from './post-list';
 export { PostListItem as PostListItem } from '../dist/types/components/post-list-item/post-list-item';
@@ -67,6 +69,8 @@ export { PostTogglebutton as PostTogglebutton } from '../dist/types/components/p
 export { defineCustomElement as defineCustomElementPostTogglebutton } from './post-togglebutton';
 export { PostTooltip as PostTooltip } from '../dist/types/components/post-tooltip/post-tooltip';
 export { defineCustomElement as defineCustomElementPostTooltip } from './post-tooltip';
+export { PostTooltipTrigger as PostTooltipTrigger } from '../dist/types/components/post-tooltip-trigger/post-tooltip-trigger';
+export { defineCustomElement as defineCustomElementPostTooltipTrigger } from './post-tooltip-trigger';
 
 /**
  * Get the base path to where the assets can be found. Use "setAssetPath(path)"

package/loaders/index.js

@@ -1,32 +1,34 @@
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+import './breakpoints.js';
 export { PostAvatar, defineCustomElement as defineCustomElementPostAvatar } from './post-avatar.js';
 import './post-popovercontainer2.js';
-export { PostFooter, defineCustomElement as defineCustomElementPostFooter } from './post-footer.js';
-export { PostPopover, defineCustomElement as defineCustomElementPostPopover } from './post-popover.js';
-export { PostTooltip, defineCustomElement as defineCustomElementPostTooltip } from './post-tooltip.js';
+export { PostMegadropdown, defineCustomElement as defineCustomElementPostMegadropdown } from './post-megadropdown.js';
+export { PostTooltipTrigger, defineCustomElement as defineCustomElementPostTooltipTrigger } from './post-tooltip-trigger.js';
 export { PostAccordion, defineCustomElement as defineCustomElementPostAccordion } from './post-accordion.js';
 export { PostAccordionItem, defineCustomElement as defineCustomElementPostAccordionItem } from './post-accordion-item.js';
 export { PostBackToTop, defineCustomElement as defineCustomElementPostBackToTop } from './post-back-to-top.js';
 export { PostBanner, defineCustomElement as defineCustomElementPostBanner } from './post-banner.js';
-export { PostBreadcrumb, defineCustomElement as defineCustomElementPostBreadcrumb } from './post-breadcrumb.js';
 export { PostBreadcrumbItem, defineCustomElement as defineCustomElementPostBreadcrumbItem } from './post-breadcrumb-item.js';
+export { PostBreadcrumbs, defineCustomElement as defineCustomElementPostBreadcrumbs } from './post-breadcrumbs.js';
 export { PostCardControl, defineCustomElement as defineCustomElementPostCardControl } from './post-card-control.js';
 export { PostClosebutton, defineCustomElement as defineCustomElementPostClosebutton } from './post-closebutton.js';
 export { PostCollapsible, defineCustomElement as defineCustomElementPostCollapsible } from './post-collapsible.js';
 export { PostCollapsibleTrigger, defineCustomElement as defineCustomElementPostCollapsibleTrigger } from './post-collapsible-trigger.js';
+export { PostFooter, defineCustomElement as defineCustomElementPostFooter } from './post-footer.js';
 export { PostHeader, defineCustomElement as defineCustomElementPostHeader } from './post-header.js';
 export { PostIcon, defineCustomElement as defineCustomElementPostIcon } from './post-icon.js';
 export { PostLanguageOption, defineCustomElement as defineCustomElementPostLanguageOption } from './post-language-option.js';
 export { PostLanguageSwitch, defineCustomElement as defineCustomElementPostLanguageSwitch } from './post-language-switch.js';
+export { PostLinkarea, defineCustomElement as defineCustomElementPostLinkarea } from './post-linkarea.js';
 export { PostList, defineCustomElement as defineCustomElementPostList } from './post-list.js';
 export { PostListItem, defineCustomElement as defineCustomElementPostListItem } from './post-list-item.js';
 export { PostLogo, defineCustomElement as defineCustomElementPostLogo } from './post-logo.js';
 export { PostMainnavigation, defineCustomElement as defineCustomElementPostMainnavigation } from './post-mainnavigation.js';
-export { PostMegadropdown, defineCustomElement as defineCustomElementPostMegadropdown } from './post-megadropdown.js';
 export { PostMegadropdownTrigger, defineCustomElement as defineCustomElementPostMegadropdownTrigger } from './post-megadropdown-trigger.js';
 export { PostMenu, defineCustomElement as defineCustomElementPostMenu } from './post-menu.js';
 export { PostMenuItem, defineCustomElement as defineCustomElementPostMenuItem } from './post-menu-item.js';
 export { PostMenuTrigger, defineCustomElement as defineCustomElementPostMenuTrigger } from './post-menu-trigger.js';
+export { PostPopover, defineCustomElement as defineCustomElementPostPopover } from './post-popover.js';
 export { PostPopovercontainer, defineCustomElement as defineCustomElementPostPopovercontainer } from './post-popovercontainer.js';
 export { PostRating, defineCustomElement as defineCustomElementPostRating } from './post-rating.js';
 export { PostTabHeader, defineCustomElement as defineCustomElementPostTabHeader } from './post-tab-header.js';
@@ -34,3 +36,4 @@ export { PostTabPanel, defineCustomElement as defineCustomElementPostTabPanel }
 export { PostTabs, defineCustomElement as defineCustomElementPostTabs } from './post-tabs.js';
 export { PostTag, defineCustomElement as defineCustomElementPostTag } from './post-tag.js';
 export { PostTogglebutton, defineCustomElement as defineCustomElementPostTogglebutton } from './post-togglebutton.js';
+export { PostTooltip, defineCustomElement as defineCustomElementPostTooltip } from './post-tooltip.js';

package/loaders/index2.js

@@ -4,25 +4,38 @@ import { c as checkType } from './check-type.js';
 
 function emptyOr(check) {
     return (...args) => {
-        const value = args[0];
-        if (!EMPTY_VALUES.some(v => v === value))
+        const component = args[0];
+        const prop = args[1];
+        const value = component[prop];
+        if (!EMPTY_VALUES.some(v => v === value)) {
             check(...args);
+        }
     };
 }
 
-function checkPattern(value, pattern, errorMessage) {
-    if (typeof value !== 'string' || !pattern.test(value))
-        throw new Error(errorMessage);
+function checkPattern(component, prop, pattern, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be follow the format \`${pattern}\`.`;
+    const message = customMessage || defaultMessage;
+    if (typeof value !== 'string' || !pattern.test(value)) {
+        throw new Error(message);
+    }
 }
 
-function checkUrl(value, error) {
-    if (typeof value !== 'string' && !(value instanceof URL))
-        throw new Error(error);
+function checkUrl(component, prop, customMessage) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const defaultMessage = `The prop \`${String(prop)}\` of the \`${componentName}\` component is invalid.`;
+    const message = customMessage || defaultMessage;
+    if (typeof value !== 'string' && !(value instanceof URL)) {
+        throw new Error(message);
+    }
     try {
-        new URL(value);
+        new URL(value, 'https://www.post.ch');
     }
-    catch (e) {
-        throw new Error(error);
+    catch {
+        throw new Error(message);
     }
 }
 
@@ -31,4 +44,4 @@ const checkEmptyOrPattern = emptyOr(checkPattern);
 const checkEmptyOrType = emptyOr(checkType);
 const checkEmptyOrUrl = emptyOr(checkUrl);
 
-export { checkEmptyOrPattern as a, checkEmptyOrOneOf as b, checkEmptyOrType as c, checkUrl as d, checkEmptyOrUrl as e };
+export { checkEmptyOrOneOf as a, checkUrl as b, checkEmptyOrPattern as c, checkEmptyOrType as d, checkEmptyOrUrl as e };