@tedi-design-system/angular 8.1.0-rc.6 → 8.1.0-rc.8

package/fesm2022/tedi-design-system-angular-tedi.mjs

@@ -4988,6 +4988,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     }, template: "<ng-content></ng-content>\n", styles: ["@charset \"UTF-8\";.tedi-card-header--background--accent{background-color:var(--card-background-accent)}.tedi-card-header--background--brand-primary{background-color:var(--card-background-brand-primary)}.tedi-card-header--background--brand-secondary{background-color:var(--card-background-brand-secondary)}.tedi-card-header--background--brand-tertiary{background-color:var(--card-background-brand-tertiary)}.tedi-card-header--background--brand-quaternary{background-color:var(--card-background-brand-quaternary)}.tedi-card-header--background--primary{background-color:var(--card-background-primary)}.tedi-card-header--background--secondary{background-color:var(--card-background-secondary)}.tedi-card-header--background--tertiary{background-color:var(--card-background-tertiary)}.tedi-card-header--background--info-primary{background-color:var(--general-status-info-background-light)}.tedi-card-header--background--info-secondary{background-color:var(--general-status-info-background-dark)}.tedi-card-header--background--neutral-primary{background-color:var(--general-status-neutral-background-light)}.tedi-card-header--background--neutral-secondary{background-color:var(--general-status-neutral-background-dark)}.tedi-card-header--background--success-primary{background-color:var(--card-background-success)}.tedi-card-header--background--success-secondary{background-color:var(--general-status-success-background-secondary)}.tedi-card-header--background--danger-primary{background-color:var(--general-status-danger-background-primary)}.tedi-card-header--background--danger-secondary{background-color:var(--general-status-danger-background-secondary)}.tedi-card-header--background--warning-primary{background-color:var(--general-status-warning-background-light)}.tedi-card-header--background--warning-secondary{background-color:var(--general-status-warning-background-dark)}.tedi-card-header--background--brand-primary,.tedi-card-header--background--brand-secondary{color:var(--general-text-white)}.tedi-card-header{display:block;flex:0 0 auto;padding:var(--card-content-padding-top) var(--card-content-padding-right) var(--card-content-padding-bottom) var(--card-content-padding-left)}@media print{.tedi-card-header{color:var(--general-text-primary);background:var(--card-background-primary);border-bottom:1px solid var(--card-border-primary)}}\n"] }]
         }] });
 
+const isHeadingModifier = (modifier) => /^h[1-6]$/.test(modifier);
+class HeadingWithIconComponent {
+    /**
+     * Name of the Material Icon
+     * https://fonts.google.com/icons
+     *
+     * Rendered as decorative and hidden from assistive technology — the
+     * projected text is the accessible heading name.
+     */
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
+    /**
+     * Semantic heading tag. Also sets the typography unless a heading modifier
+     * overrides it, so pick the tag that fits the surrounding document outline.
+     * @default h4
+     */
+    element = input("h4", ...(ngDevMode ? [{ debugName: "element" }] : []));
+    /**
+     * Single or multiple modifiers to change the heading behavior. A heading
+     * modifier here styles the heading as that level while `element` keeps the
+     * semantics — e.g. an `h2` that looks like an `h4`.
+     */
+    modifiers = input(...(ngDevMode ? [undefined, { debugName: "modifiers" }] : []));
+    /**
+     * Heading text color.
+     * @default primary
+     */
+    headingColor = input("primary", ...(ngDevMode ? [{ debugName: "headingColor" }] : []));
+    /**
+     * Color of the icon.
+     * @default primary
+     */
+    iconColor = input("primary", ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
+    /**
+     * Size of the icon in pixels.
+     * @default 24
+     */
+    iconSize = input(24, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    /**
+     * Whether the icon should be filled or outlined.
+     * @default outlined
+     */
+    iconVariant = input("outlined", ...(ngDevMode ? [{ debugName: "iconVariant" }] : []));
+    // A heading modifier wins on specificity over the `element` tag in core's CSS,
+    // so `element="h2" modifiers="h4"` renders at h4's line height — which is what
+    // the icon has to be centered against.
+    visualLevel = computed(() => {
+        const modifiers = this.modifiers();
+        const modifierList = Array.isArray(modifiers)
+            ? modifiers
+            : modifiers
+                ? [modifiers]
+                : [];
+        return modifierList.find(isHeadingModifier) ?? this.element();
+    }, ...(ngDevMode ? [{ debugName: "visualLevel" }] : []));
+    lineHeightVar = computed(() => `var(--heading-${this.visualLevel()}-line-height)`, ...(ngDevMode ? [{ debugName: "lineHeightVar" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeadingWithIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: HeadingWithIconComponent, isStandalone: true, selector: "tedi-heading-with-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null }, headingColor: { classPropertyName: "headingColor", publicName: "headingColor", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--_tedi-heading-with-icon-line-height": "lineHeightVar()" }, classAttribute: "tedi-heading-with-icon" }, ngImport: i0, template: "<tedi-icon\n  class=\"tedi-heading-with-icon__icon\"\n  [name]=\"icon()\"\n  [color]=\"iconColor()\"\n  [size]=\"iconSize()\"\n  [variant]=\"iconVariant()\"\n/>\n\n@switch (element()) {\n  @case (\"h1\") {\n    <h1\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h1>\n  }\n  @case (\"h2\") {\n    <h2\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h2>\n  }\n  @case (\"h3\") {\n    <h3\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h3>\n  }\n  @case (\"h4\") {\n    <h4\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h4>\n  }\n  @case (\"h5\") {\n    <h5\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h5>\n  }\n  @case (\"h6\") {\n    <h6\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h6>\n  }\n}\n\n<ng-template #heading><ng-content></ng-content></ng-template>\n", styles: [".tedi-heading-with-icon{display:flex;gap:var(--content-heading-inner-spacing-x);align-items:flex-start}.tedi-heading-with-icon__icon{height:var(--_tedi-heading-with-icon-line-height)}.tedi-heading-with-icon__heading{flex:1;min-width:0;overflow-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: HeadingWithIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "tedi-heading-with-icon", standalone: true, imports: [NgTemplateOutlet, IconComponent, TextComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: "tedi-heading-with-icon",
+                        "[style.--_tedi-heading-with-icon-line-height]": "lineHeightVar()",
+                    }, template: "<tedi-icon\n  class=\"tedi-heading-with-icon__icon\"\n  [name]=\"icon()\"\n  [color]=\"iconColor()\"\n  [size]=\"iconSize()\"\n  [variant]=\"iconVariant()\"\n/>\n\n@switch (element()) {\n  @case (\"h1\") {\n    <h1\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h1>\n  }\n  @case (\"h2\") {\n    <h2\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h2>\n  }\n  @case (\"h3\") {\n    <h3\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h3>\n  }\n  @case (\"h4\") {\n    <h4\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h4>\n  }\n  @case (\"h5\") {\n    <h5\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h5>\n  }\n  @case (\"h6\") {\n    <h6\n      tedi-text\n      class=\"tedi-heading-with-icon__heading\"\n      [color]=\"headingColor()\"\n      [modifiers]=\"modifiers()\"\n    >\n      <ng-container *ngTemplateOutlet=\"heading\"></ng-container>\n    </h6>\n  }\n}\n\n<ng-template #heading><ng-content></ng-content></ng-template>\n", styles: [".tedi-heading-with-icon{display:flex;gap:var(--content-heading-inner-spacing-x);align-items:flex-start}.tedi-heading-with-icon__icon{height:var(--_tedi-heading-with-icon-line-height)}.tedi-heading-with-icon__heading{flex:1;min-width:0;overflow-wrap:break-word}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], headingColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingColor", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconVariant", required: false }] }] } });
+
 class ListComponent {
     /**
      * Is list styled?
@@ -21068,6 +21134,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                 args: ["click"]
             }] } });
 
+class SkeletonComponent {
+    liveAnnouncer = inject(LiveAnnouncer);
+    translationService = inject(TediTranslationService);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /**
+     * Announced by the skeleton's `role="status"` live region once the skeleton
+     * has been on screen for `labelDelay`. Say what is loading: "Loading search
+     * results" carries more than the generic fallback.
+     * @default the translated `skeleton.loading` label
+     */
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    /**
+     * Announced when the skeleton is removed. The skeleton's own live region goes
+     * with it, so this one goes through a page-level announcer. Only announced if
+     * `label` was announced first, so content that arrives faster than
+     * `labelDelay` stays silent.
+     * @default the translated `skeleton.loading-completed` label
+     */
+    completedLabel = input(...(ngDevMode ? [undefined, { debugName: "completedLabel" }] : []));
+    /**
+     * Delay in ms before `label` is announced, so brief loads do not interrupt
+     * the screen reader.
+     * @default 200
+     */
+    labelDelay = input(200, ...(ngDevMode ? [{ debugName: "labelDelay" }] : []));
+    /**
+     * Text of the `role="status"` live region. Empty until `labelDelay` has
+     * passed, so the region is in the DOM before it gains text: screen readers
+     * only announce a live region they were already tracking.
+     */
+    announcement = signal("", ...(ngDevMode ? [{ debugName: "announcement" }] : []));
+    announceTimer;
+    ngOnInit() {
+        if (!this.isBrowser) {
+            return;
+        }
+        this.announceTimer = setTimeout(() => {
+            this.announcement.set(this.label() ?? this.translationService.translate("skeleton.loading"));
+        }, this.labelDelay());
+    }
+    ngOnDestroy() {
+        clearTimeout(this.announceTimer);
+        if (!this.announcement()) {
+            return;
+        }
+        this.liveAnnouncer.announce(this.completedLabel() ??
+            this.translationService.translate("skeleton.loading-completed"));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: SkeletonComponent, isStandalone: true, selector: "tedi-skeleton", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, completedLabel: { classPropertyName: "completedLabel", publicName: "completedLabel", isSignal: true, isRequired: false, transformFunction: null }, labelDelay: { classPropertyName: "labelDelay", publicName: "labelDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-busy": "true" }, classAttribute: "tedi-skeleton" }, ngImport: i0, template: "<span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{{\n  announcement()\n}}</span>\n<ng-content />\n", styles: [".tedi-skeleton{display:flex;flex-direction:column;gap:var(--loader-skeleton-inner-spacing-y);pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "tedi-skeleton", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: "tedi-skeleton",
+                        "aria-busy": "true",
+                    }, template: "<span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">{{\n  announcement()\n}}</span>\n<ng-content />\n", styles: [".tedi-skeleton{display:flex;flex-direction:column;gap:var(--loader-skeleton-inner-spacing-y);pointer-events:none}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], completedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "completedLabel", required: false }] }], labelDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelDelay", required: false }] }] } });
+
+/**
+ * Angular hands an attribute binding through as a string, so `width="50"` and
+ * `height="100"` arrive as `"50"` / `"100"`. Both are read as the numeric form.
+ */
+const NUMERIC = /^\d+(\.\d+)?$/;
+class SkeletonBlockComponent {
+    /**
+     * Width of the block. A number is a percentage of the container, a `px`
+     * string is an absolute width, and `auto` fills the container.
+     * @default auto
+     */
+    width = input("auto", ...(ngDevMode ? [{ debugName: "width" }] : []));
+    /**
+     * Height of the block. A text style (`p`, `h1`–`h6`) takes the line height of
+     * the text the block stands in for and follows it across breakpoints, so the
+     * real content drops in without shifting the layout. Pass a number instead
+     * for a height in px, for blocks that stand in for something other than text.
+     * @default p
+     */
+    height = input("p", ...(ngDevMode ? [{ debugName: "height" }] : []));
+    /*
+     * Per-breakpoint overrides. The base inputs describe the smallest viewport;
+     * each breakpoint input layers a partial `SkeletonBlockInputs` on top from
+     * that breakpoint and up, so larger breakpoints inherit from smaller ones
+     * until overridden.
+     */
+    /** Overrides applied from the `xs` breakpoint (≥ 0px) and up. */
+    xs = input(...(ngDevMode ? [undefined, { debugName: "xs" }] : []));
+    /** Overrides applied from the `sm` breakpoint (≥ 576px) and up. */
+    sm = input(...(ngDevMode ? [undefined, { debugName: "sm" }] : []));
+    /** Overrides applied from the `md` breakpoint (≥ 768px) and up. */
+    md = input(...(ngDevMode ? [undefined, { debugName: "md" }] : []));
+    /** Overrides applied from the `lg` breakpoint (≥ 992px) and up. */
+    lg = input(...(ngDevMode ? [undefined, { debugName: "lg" }] : []));
+    /** Overrides applied from the `xl` breakpoint (≥ 1200px) and up. */
+    xl = input(...(ngDevMode ? [undefined, { debugName: "xl" }] : []));
+    /** Overrides applied from the `xxl` breakpoint (≥ 1400px) and up. */
+    xxl = input(...(ngDevMode ? [undefined, { debugName: "xxl" }] : []));
+    breakpointService = inject(BreakpointService);
+    currentProps = computed(() => this.breakpointService.getBreakpointInputs({
+        width: this.width(),
+        height: this.height(),
+        xs: this.xs(),
+        sm: this.sm(),
+        md: this.md(),
+        lg: this.lg(),
+        xl: this.xl(),
+        xxl: this.xxl(),
+    }), ...(ngDevMode ? [{ debugName: "currentProps" }] : []));
+    classes = computed(() => {
+        const height = this.currentProps().height;
+        const classList = ["tedi-skeleton-block"];
+        if (typeof height === "string" && !NUMERIC.test(height)) {
+            classList.push(`tedi-skeleton-block--${height}`);
+        }
+        return classList.join(" ");
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    resolvedWidth = computed(() => {
+        const width = this.currentProps().width;
+        if (width === undefined || width === "auto") {
+            return null;
+        }
+        return typeof width === "number" || NUMERIC.test(width)
+            ? `${width}%`
+            : width;
+    }, ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : []));
+    resolvedHeight = computed(() => {
+        const height = this.currentProps().height;
+        if (typeof height === "number") {
+            return `${height}px`;
+        }
+        return height && NUMERIC.test(height) ? `${height}px` : null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SkeletonBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: SkeletonBlockComponent, isStandalone: true, selector: "tedi-skeleton-block", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "classes()", "style.width": "resolvedWidth()", "style.height": "resolvedHeight()" } }, ngImport: i0, template: "", isInline: true, styles: [".tedi-skeleton-block{display:block;width:100%;background:linear-gradient(to right,color-mix(in srgb,var(--loader-skeleton-color) 70%,var(--tedi-neutral-100)) 8%,var(--loader-skeleton-color) 18%,color-mix(in srgb,var(--loader-skeleton-color) 70%,var(--tedi-neutral-100)) 33%);background-size:1000px 100px;border-radius:var(--loader-skeleton-radius);animation:tedi-skeleton-block-wave 2s infinite ease-in-out}.tedi-skeleton-block--p{height:var(--body-regular-line-height)}.tedi-skeleton-block--h1{height:var(--heading-h1-line-height)}.tedi-skeleton-block--h2{height:var(--heading-h2-line-height)}.tedi-skeleton-block--h3{height:var(--heading-h3-line-height)}.tedi-skeleton-block--h4{height:var(--heading-h4-line-height)}.tedi-skeleton-block--h5{height:var(--heading-h5-line-height)}.tedi-skeleton-block--h6{height:var(--heading-h6-line-height)}@media(prefers-reduced-motion:reduce){.tedi-skeleton-block{animation:none}}@keyframes tedi-skeleton-block-wave{0%{background-position:-400px 0}to{background-position:600px 0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SkeletonBlockComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: "tedi-skeleton-block", template: "", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        "[class]": "classes()",
+                        "[style.width]": "resolvedWidth()",
+                        "[style.height]": "resolvedHeight()",
+                        "aria-hidden": "true",
+                    }, styles: [".tedi-skeleton-block{display:block;width:100%;background:linear-gradient(to right,color-mix(in srgb,var(--loader-skeleton-color) 70%,var(--tedi-neutral-100)) 8%,var(--loader-skeleton-color) 18%,color-mix(in srgb,var(--loader-skeleton-color) 70%,var(--tedi-neutral-100)) 33%);background-size:1000px 100px;border-radius:var(--loader-skeleton-radius);animation:tedi-skeleton-block-wave 2s infinite ease-in-out}.tedi-skeleton-block--p{height:var(--body-regular-line-height)}.tedi-skeleton-block--h1{height:var(--heading-h1-line-height)}.tedi-skeleton-block--h2{height:var(--heading-h2-line-height)}.tedi-skeleton-block--h3{height:var(--heading-h3-line-height)}.tedi-skeleton-block--h4{height:var(--heading-h4-line-height)}.tedi-skeleton-block--h5{height:var(--heading-h5-line-height)}.tedi-skeleton-block--h6{height:var(--heading-h6-line-height)}@media(prefers-reduced-motion:reduce){.tedi-skeleton-block{animation:none}}@keyframes tedi-skeleton-block-wave{0%{background-position:-400px 0}to{background-position:600px 0}}\n"] }]
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
+
 /**
  * Marks a projected element as a single breadcrumb. Apply as a structural
  * directive on the crumb element; `tedi-breadcrumbs` collects each one and
@@ -21765,5 +21976,5 @@ function provideTedi(config = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreadcrumbItemDirective, BreadcrumbSeparatorDirective, BreadcrumbsComponent, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, FormFieldExtraDirective, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, InfoTooltipComponent, InputGroupComponent, InputGroupPrefixDirective, InputGroupSuffixDirective, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LabelRowComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SearchComponent, SelectComponent, SelectOptionTemplateDirective, SelectTooltipTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FIELD_CONTEXT, TEDI_FORM_FIELD_CONTROL, TEDI_INPUT_GROUP, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, TextareaComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, TruncateComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, controlDescribedBy, cookieSignal, createTablePersistence, deriveControlState, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination };
+export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreadcrumbItemDirective, BreadcrumbSeparatorDirective, BreadcrumbsComponent, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, FormFieldExtraDirective, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HeadingWithIconComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, InfoTooltipComponent, InputGroupComponent, InputGroupPrefixDirective, InputGroupSuffixDirective, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LabelRowComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SearchComponent, SelectComponent, SelectOptionTemplateDirective, SelectTooltipTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SkeletonBlockComponent, SkeletonComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FIELD_CONTEXT, TEDI_FORM_FIELD_CONTROL, TEDI_INPUT_GROUP, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, TextareaComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, TruncateComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, controlDescribedBy, cookieSignal, createTablePersistence, deriveControlState, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination };
 //# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map