@koobiq/components 20.4.2 → 21.0.0

package/fesm2022/koobiq-components-skeleton.mjs

@@ -1,76 +1,850 @@
 import * as i0 from '@angular/core';
-import { ViewEncapsulation, Component, inject, input, booleanAttribute, afterRenderEffect, Directive, NgModule } from '@angular/core';
+import { ViewEncapsulation, ChangeDetectionStrategy, Component, inject, NgZone, Injectable, input, booleanAttribute, afterRenderEffect, Directive, InjectionToken, numberAttribute, computed, NgModule } from '@angular/core';
 import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
-import { kbqInjectNativeElement, KBQ_WINDOW } from '@koobiq/components/core';
+import { KBQ_WINDOW, kbqInjectNativeElement, kbqAnimationsDisabled } from '@koobiq/components/core';
 
-/** Timestamp of the first skeleton instance — used as animation start time for sync */
-let animationStartTime = null;
-/** Count of active skeleton instances */
-let count = 0;
+const WAVE_ANIMATION_NAME = 'kbq-skeleton-wave';
+const OFFSCREEN_SELECTOR = 'kbq-skeleton_offscreen';
+const findWave = (host) => host
+    .getAnimations()
+    .find((animation) => 'animationName' in animation && animation.animationName === WAVE_ANIMATION_NAME);
 /**
- * Component used to load the `.kbq-skeleton` styles.
+ * Component used to load the styles of `.kbq-skeleton` and of the presets, each of which renders a `.kbq-skeleton`.
  */
 class SkeletonStyleLoader {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: SkeletonStyleLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.30", type: SkeletonStyleLoader, isStandalone: true, selector: "skeleton-style-loader", ngImport: i0, template: '', isInline: true, styles: ["@keyframes wave{0%{transform:translate(calc(var(--kbq-skeleton-wave-width) * -1))}to{transform:translate(100vw)}}.kbq-skeleton:not(.kbq-skeleton_disabled){--kbq-skeleton-min-height: var(--kbq-size-l);--kbq-skeleton-animation-duration: 1.2s;--kbq-skeleton-animation-delay: 0ms;--kbq-skeleton-border-radius: var(--kbq-size-xxs);--kbq-skeleton-wave-width: 100px;--kbq-skeleton-z-index: 1}.kbq-skeleton:not(.kbq-skeleton_disabled):is(kbq-skeleton){display:flex;min-height:var(--kbq-skeleton-min-height);border-radius:var(--kbq-skeleton-border-radius)}.kbq-skeleton:not(.kbq-skeleton_disabled){position:relative;overflow:hidden;clip-path:inset(0);-webkit-user-select:none;user-select:none;pointer-events:none;border-color:transparent;outline-color:transparent}.kbq-skeleton:not(.kbq-skeleton_disabled):before{content:\"\";position:absolute;inset:0;background-color:var(--kbq-skeleton-background);z-index:var(--kbq-skeleton-z-index)}.kbq-skeleton:not(.kbq-skeleton_disabled):after{content:\"\";position:fixed;inset-block:0;left:calc(var(--kbq-skeleton-wave-width) * -1);width:var(--kbq-skeleton-wave-width);z-index:var(--kbq-skeleton-z-index);background:linear-gradient(90deg,var(--kbq-skeleton-animation-wave-start) 0%,var(--kbq-skeleton-animation-wave-center) 50%,var(--kbq-skeleton-animation-wave-end) 100%);animation:wave var(--kbq-skeleton-animation-duration) ease-in var(--kbq-skeleton-animation-delay) infinite}@media(prefers-reduced-motion:reduce){.kbq-skeleton:not(.kbq-skeleton_disabled):after{animation:none}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SkeletonStyleLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: SkeletonStyleLoader, isStandalone: true, selector: "skeleton-style-loader", ngImport: i0, template: '', isInline: true, styles: ["@charset \"UTF-8\";@keyframes kbq-skeleton-wave{0%{-webkit-mask-position:calc(var(--kbq-skeleton-wave-width) * -2 - var(--kbq-skeleton-offset, 0px)) 0,0 0;mask-position:calc(var(--kbq-skeleton-wave-width) * -2 - var(--kbq-skeleton-offset, 0px)) 0,0 0}to{-webkit-mask-position:calc(100vw - var(--kbq-skeleton-wave-width) - var(--kbq-skeleton-offset, 0px)) 0,0 0;mask-position:calc(100vw - var(--kbq-skeleton-wave-width) - var(--kbq-skeleton-offset, 0px)) 0,0 0}}:where(.kbq-skeleton:not(.kbq-skeleton_disabled)){border-radius:var(--kbq-skeleton-border-radius)}:where(kbq-skeleton:not(.kbq-skeleton_disabled)){display:flex;min-height:var(--kbq-skeleton-min-height)}.kbq-skeleton:not(.kbq-skeleton_disabled){color:transparent!important;background:var(--kbq-background-bg)!important;box-shadow:none!important;-webkit-box-decoration-break:clone;box-decoration-break:clone;filter:var(--kbq-skeleton-filter);-webkit-mask-image:linear-gradient(90deg,var(--kbq-skeleton-animation-wave-start),var(--kbq-skeleton-animation-wave-center),var(--kbq-skeleton-animation-wave-end)),linear-gradient(var(--kbq-skeleton-fill),var(--kbq-skeleton-fill));mask-image:linear-gradient(90deg,var(--kbq-skeleton-animation-wave-start),var(--kbq-skeleton-animation-wave-center),var(--kbq-skeleton-animation-wave-end)),linear-gradient(var(--kbq-skeleton-fill),var(--kbq-skeleton-fill));-webkit-mask-size:var(--kbq-skeleton-wave-width) 100%,100% 100%;mask-size:var(--kbq-skeleton-wave-width) 100%,100% 100%;-webkit-mask-position:calc(var(--kbq-skeleton-wave-width) * -1) 0,0 0;mask-position:calc(var(--kbq-skeleton-wave-width) * -1) 0,0 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:kbq-skeleton-wave var(--kbq-skeleton-animation-duration) ease-in infinite;-webkit-user-select:none;user-select:none;pointer-events:none}.kbq-skeleton:not(.kbq-skeleton_disabled).kbq-skeleton_offscreen{animation:none}.kbq-skeleton:not(.kbq-skeleton_disabled).kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-skeleton:not(.kbq-skeleton_disabled){animation:none;transition:none}}\n", ":where(.kbq-skeleton-button,.kbq-skeleton-badge,.kbq-skeleton-tag,.kbq-skeleton-icon,.kbq-skeleton-link){display:inline-flex;flex-shrink:0;vertical-align:middle}:where(.kbq-skeleton-button){width:72px;height:var(--kbq-size-3xl)}:where(.kbq-skeleton-badge,.kbq-skeleton-tag){width:var(--kbq-size-6xl);height:var(--kbq-size-xxl)}:where(.kbq-skeleton-icon){width:var(--kbq-size-xxl);height:var(--kbq-size-xxl)}:where(.kbq-skeleton-link){width:var(--kbq-size-3xl);height:var(--kbq-size-xl)}:where(.kbq-skeleton-typography){display:flex;flex-direction:column;width:100%}:where(.kbq-skeleton-typography__line){height:calc(1lh - var(--kbq-skeleton-typography-gap));margin-block:calc(var(--kbq-skeleton-typography-gap) / 2)}:where(.kbq-skeleton-typography__line:nth-child(3n+1)){width:var(--kbq-skeleton-typography-line-width-1)}:where(.kbq-skeleton-typography__line:nth-child(3n+2)){width:var(--kbq-skeleton-typography-line-width-2)}:where(.kbq-skeleton-typography__line:nth-child(3n)){width:var(--kbq-skeleton-typography-line-width-3)}:where(.kbq-skeleton-typography__line:only-child){width:var(--kbq-skeleton-typography-single-line-width)}:where(.kbq-skeleton-dl){display:grid;grid-template-columns:var(--kbq-skeleton-dl-term-width) minmax(0,1fr);grid-auto-rows:var(--kbq-skeleton-dl-row-height);align-items:center;gap:var(--kbq-skeleton-dl-row-gap) var(--kbq-skeleton-dl-column-gap);width:100%}:where(.kbq-skeleton-dl__term,.kbq-skeleton-dl__description){height:var(--kbq-skeleton-dl-line-height)}:where(.kbq-skeleton-dl__description:nth-child(6n+2)){width:var(--kbq-skeleton-dl-line-width-1)}:where(.kbq-skeleton-dl__description:nth-child(6n+4)){width:var(--kbq-skeleton-dl-line-width-2)}:where(.kbq-skeleton-dl__description:nth-child(6n)){width:var(--kbq-skeleton-dl-line-width-3)}:where(.kbq-skeleton-table){display:grid;width:100%}:where(.kbq-skeleton-table__cell){display:flex;align-items:center;min-width:0;height:var(--kbq-skeleton-table-row-height);padding-inline:var(--kbq-skeleton-table-cell-padding-horizontal)}:where(.kbq-skeleton-table__cell_header){border-bottom:var(--kbq-skeleton-table-border-width) solid var(--kbq-skeleton-table-border-color)}:where(.kbq-skeleton-table__cell_pinned-edge){border-inline-end:var(--kbq-skeleton-table-border-width) solid var(--kbq-skeleton-table-border-color)}:where(.kbq-skeleton-table__cell>.kbq-skeleton){flex:1;height:var(--kbq-skeleton-table-line-height)}:where(.kbq-skeleton-table__cell_selection>.kbq-skeleton){flex:none;width:var(--kbq-skeleton-table-selection-size);height:var(--kbq-skeleton-table-selection-size)}:where(.kbq-skeleton-group){display:flex;flex-wrap:wrap;align-items:center;gap:var(--kbq-skeleton-group-gap)}:where(.kbq-skeleton-form-field){display:flex;flex-direction:column;width:100%}:where(.kbq-skeleton-form-field_horizontal){flex-direction:row;align-items:flex-start}:where(.kbq-skeleton-form-field__label){box-sizing:border-box;display:flex;margin-bottom:var(--kbq-skeleton-form-field-gap)}:where(.kbq-skeleton-form-field_horizontal>.kbq-skeleton-form-field__label){margin-bottom:0;padding:var(--kbq-size-xs) var(--kbq-size-l) 0 0}:where(.kbq-skeleton-form-field__label>.kbq-skeleton){width:var(--kbq-skeleton-form-field-label-width);height:var(--kbq-skeleton-form-field-line-height);margin-block:calc((var(--kbq-skeleton-form-field-label-height) - var(--kbq-skeleton-form-field-line-height)) / 2)}:where(.kbq-skeleton-form-field__content){display:flex;flex-direction:column;flex:1;min-width:0}:where(.kbq-skeleton-form-field__control){height:var(--kbq-skeleton-form-field-control-height)}:where(.kbq-skeleton-form-field_textarea .kbq-skeleton-form-field__control){height:var(--kbq-skeleton-form-field-textarea-height)}:where(.kbq-skeleton-form-field__hint){width:var(--kbq-skeleton-form-field-hint-width);height:var(--kbq-skeleton-form-field-hint-height);margin-top:var(--kbq-skeleton-form-field-gap)}:where(.kbq-skeleton-accordion){display:flex;flex-direction:column;width:100%}:where(.kbq-skeleton-accordion__item){display:flex;align-items:center;box-sizing:border-box;height:calc(var(--kbq-skeleton-accordion-header-height) + var(--kbq-skeleton-accordion-border-width) * 2);border:var(--kbq-skeleton-accordion-border-width) solid transparent;padding:var(--kbq-skeleton-accordion-padding)}:where(.kbq-skeleton-accordion__icon){flex:none;align-self:flex-start;width:var(--kbq-skeleton-accordion-icon-size);height:var(--kbq-skeleton-accordion-icon-size);margin:var(--kbq-skeleton-accordion-icon-padding)}:where(.kbq-skeleton-accordion__title){flex:1;height:var(--kbq-skeleton-accordion-line-height)}:where(.kbq-skeleton-checkable){display:flex;flex-direction:column;gap:var(--kbq-skeleton-checkable-gap)}:where(.kbq-skeleton-checkable__row){display:flex;align-items:flex-start;gap:var(--kbq-skeleton-checkable-control-gap)}:where(.kbq-skeleton-checkable__control){flex:none;width:var(--kbq-skeleton-checkable-control-width);height:var(--kbq-skeleton-checkable-control-height);margin-top:calc((var(--kbq-skeleton-checkable-label-line-height) - var(--kbq-skeleton-checkable-control-height)) / 2)}:where(.kbq-skeleton-checkable__text){display:flex;flex-direction:column}:where(.kbq-skeleton-checkable__label){height:var(--kbq-skeleton-checkable-line-height);margin-block:calc((var(--kbq-skeleton-checkable-label-line-height) - var(--kbq-skeleton-checkable-line-height)) / 2)}:where(.kbq-skeleton-checkable__row:nth-child(3n+1) .kbq-skeleton-checkable__label){width:var(--kbq-skeleton-checkable-label-width-1)}:where(.kbq-skeleton-checkable__row:nth-child(3n+2) .kbq-skeleton-checkable__label){width:var(--kbq-skeleton-checkable-label-width-2)}:where(.kbq-skeleton-checkable__row:nth-child(3n) .kbq-skeleton-checkable__label){width:var(--kbq-skeleton-checkable-label-width-3)}:where(.kbq-skeleton-checkable__hint){width:var(--kbq-skeleton-checkable-hint-width);height:var(--kbq-skeleton-checkable-hint-height);margin-top:var(--kbq-skeleton-checkable-hint-gap)}:where(.kbq-skeleton-tabs){display:flex;flex-direction:column;gap:var(--kbq-skeleton-tabs-content-gap);width:100%}:where(.kbq-skeleton-tabs_vertical){flex-direction:row}:where(.kbq-skeleton-tabs__header){display:flex;gap:var(--kbq-skeleton-tabs-gap)}:where(.kbq-skeleton-tabs_vertical>.kbq-skeleton-tabs__header){flex-direction:column;flex:none;width:var(--kbq-skeleton-tabs-vertical-width)}:where(.kbq-skeleton-tabs__tab){display:flex;align-items:center;height:var(--kbq-skeleton-tabs-tab-height)}:where(.kbq-skeleton-tabs__tab>.kbq-skeleton){width:var(--kbq-skeleton-tabs-tab-width);height:var(--kbq-skeleton-tabs-line-height)}:where(.kbq-skeleton-tabs__tab_selected>.kbq-skeleton){height:var(--kbq-skeleton-tabs-tab-height)}:where(.kbq-skeleton-tabs_vertical .kbq-skeleton-tabs__tab>.kbq-skeleton){width:100%}:where(.kbq-skeleton-tabs_vertical .kbq-skeleton-tabs__tab:not(.kbq-skeleton-tabs__tab_selected)){padding-inline:var(--kbq-skeleton-tabs-tab-padding)}:where(.kbq-skeleton-tabs__content){min-width:0}:where(.kbq-skeleton-tabs_vertical>.kbq-skeleton-tabs__content){flex:1}:where(.kbq-skeleton-tree){display:flex;flex-direction:column;width:100%}:where(.kbq-skeleton-tree__node){display:flex;align-items:center;gap:var(--kbq-skeleton-tree-gap);height:var(--kbq-skeleton-tree-node-height);padding-inline-start:var(--kbq-skeleton-tree-padding)}:where(.kbq-skeleton-tree__node_nested){padding-inline-start:calc(var(--kbq-skeleton-tree-padding) + var(--kbq-skeleton-tree-indent))}:where(.kbq-skeleton-tree__toggle){flex:none;width:var(--kbq-skeleton-tree-toggle-size);height:var(--kbq-skeleton-tree-toggle-size)}:where(.kbq-skeleton-tree__label){height:var(--kbq-skeleton-tree-line-height)}:where(.kbq-skeleton-tree__node_1>.kbq-skeleton-tree__label){width:var(--kbq-skeleton-tree-label-width-1)}:where(.kbq-skeleton-tree__node_2>.kbq-skeleton-tree__label){width:var(--kbq-skeleton-tree-label-width-2)}:where(.kbq-skeleton-tree__node_3>.kbq-skeleton-tree__label){width:var(--kbq-skeleton-tree-label-width-3)}\n", ":where(.kbq-skeleton){--kbq-skeleton-min-height: var(--kbq-size-l);--kbq-skeleton-border-radius: var(--kbq-size-xxs);--kbq-skeleton-animation-duration: 1.2s;--kbq-skeleton-wave-width: 100px}:where(.kbq-skeleton-typography){--kbq-skeleton-typography-gap: var(--kbq-size-xxs);--kbq-skeleton-typography-line-width-1: 80%;--kbq-skeleton-typography-line-width-2: 100%;--kbq-skeleton-typography-line-width-3: 60%;--kbq-skeleton-typography-single-line-width: 50%}:where(.kbq-skeleton-dl){--kbq-skeleton-dl-term-width: 120px;--kbq-skeleton-dl-line-height: var(--kbq-size-l);--kbq-skeleton-dl-row-height: var(--kbq-size-xl);--kbq-skeleton-dl-column-gap: var(--kbq-size-l);--kbq-skeleton-dl-row-gap: var(--kbq-size-l);--kbq-skeleton-dl-line-width-1: 80%;--kbq-skeleton-dl-line-width-2: 100%;--kbq-skeleton-dl-line-width-3: 60%}:where(.kbq-skeleton-table){--kbq-skeleton-table-row-height: var(--kbq-size-4xl);--kbq-skeleton-table-line-height: var(--kbq-size-l);--kbq-skeleton-table-cell-padding-horizontal: var(--kbq-size-s);--kbq-skeleton-table-border-width: var(--kbq-size-border-width);--kbq-skeleton-table-border-color: var(--kbq-line-contrast-less);--kbq-skeleton-table-selection-width: var(--kbq-size-4xl);--kbq-skeleton-table-selection-size: var(--kbq-size-l)}:where(.kbq-skeleton-group){--kbq-skeleton-group-gap: var(--kbq-size-xxs)}:where(.kbq-skeleton-group_button){--kbq-skeleton-group-gap: var(--kbq-size-s)}:where(.kbq-skeleton-form-field){--kbq-skeleton-form-field-label-width: 120px;--kbq-skeleton-form-field-label-height: var(--kbq-size-xl);--kbq-skeleton-form-field-line-height: var(--kbq-size-l);--kbq-skeleton-form-field-control-height: var(--kbq-size-3xl);--kbq-skeleton-form-field-textarea-height: 72px;--kbq-skeleton-form-field-hint-width: 60%;--kbq-skeleton-form-field-hint-height: var(--kbq-size-l);--kbq-skeleton-form-field-gap: var(--kbq-size-xs)}:where(.kbq-skeleton-accordion){--kbq-skeleton-accordion-header-height: 36px;--kbq-skeleton-accordion-border-width: 2px;--kbq-skeleton-accordion-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-skeleton-accordion-icon-size: var(--kbq-size-l);--kbq-skeleton-accordion-icon-padding: var(--kbq-size-xxs);--kbq-skeleton-accordion-line-height: var(--kbq-size-l)}:where(.kbq-skeleton-checkable){--kbq-skeleton-checkable-gap: var(--kbq-size-s);--kbq-skeleton-checkable-control-gap: var(--kbq-size-s);--kbq-skeleton-checkable-control-width: var(--kbq-size-l);--kbq-skeleton-checkable-control-height: var(--kbq-size-l);--kbq-skeleton-checkable-label-line-height: var(--kbq-size-xl);--kbq-skeleton-checkable-line-height: var(--kbq-size-l);--kbq-skeleton-checkable-label-width-1: 120px;--kbq-skeleton-checkable-label-width-2: 140px;--kbq-skeleton-checkable-label-width-3: 80px;--kbq-skeleton-checkable-hint-width: 60%;--kbq-skeleton-checkable-hint-height: var(--kbq-size-l);--kbq-skeleton-checkable-hint-gap: var(--kbq-size-3xs)}:where(.kbq-skeleton-checkable_toggle){--kbq-skeleton-checkable-control-width: 28px}:where(.kbq-skeleton-tabs){--kbq-skeleton-tabs-tab-height: var(--kbq-size-3xl);--kbq-skeleton-tabs-tab-width: var(--kbq-size-6xl);--kbq-skeleton-tabs-tab-padding: var(--kbq-size-m);--kbq-skeleton-tabs-line-height: var(--kbq-size-l);--kbq-skeleton-tabs-gap: var(--kbq-size-s);--kbq-skeleton-tabs-content-gap: var(--kbq-size-s);--kbq-skeleton-tabs-vertical-width: 160px}:where(.kbq-skeleton-tree){--kbq-skeleton-tree-node-height: var(--kbq-size-3xl);--kbq-skeleton-tree-padding: var(--kbq-size-m);--kbq-skeleton-tree-indent: 14px;--kbq-skeleton-tree-gap: var(--kbq-size-s);--kbq-skeleton-tree-toggle-size: var(--kbq-size-l);--kbq-skeleton-tree-line-height: var(--kbq-size-l);--kbq-skeleton-tree-label-width-1: 120px;--kbq-skeleton-tree-label-width-2: 100px;--kbq-skeleton-tree-label-width-3: 80px}:where(:root,.kbq-light){--kbq-skeleton-filter: contrast(0) brightness(0);--kbq-skeleton-fill: var(--kbq-semantic-contrast-a1)}:where(.kbq-dark){--kbq-skeleton-filter: contrast(0) brightness(0) invert(1);--kbq-skeleton-fill: var(--kbq-semantic-dark-contrast-a2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: SkeletonStyleLoader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SkeletonStyleLoader, decorators: [{
             type: Component,
-            args: [{ selector: 'skeleton-style-loader', template: '', encapsulation: ViewEncapsulation.None, styles: ["@keyframes wave{0%{transform:translate(calc(var(--kbq-skeleton-wave-width) * -1))}to{transform:translate(100vw)}}.kbq-skeleton:not(.kbq-skeleton_disabled){--kbq-skeleton-min-height: var(--kbq-size-l);--kbq-skeleton-animation-duration: 1.2s;--kbq-skeleton-animation-delay: 0ms;--kbq-skeleton-border-radius: var(--kbq-size-xxs);--kbq-skeleton-wave-width: 100px;--kbq-skeleton-z-index: 1}.kbq-skeleton:not(.kbq-skeleton_disabled):is(kbq-skeleton){display:flex;min-height:var(--kbq-skeleton-min-height);border-radius:var(--kbq-skeleton-border-radius)}.kbq-skeleton:not(.kbq-skeleton_disabled){position:relative;overflow:hidden;clip-path:inset(0);-webkit-user-select:none;user-select:none;pointer-events:none;border-color:transparent;outline-color:transparent}.kbq-skeleton:not(.kbq-skeleton_disabled):before{content:\"\";position:absolute;inset:0;background-color:var(--kbq-skeleton-background);z-index:var(--kbq-skeleton-z-index)}.kbq-skeleton:not(.kbq-skeleton_disabled):after{content:\"\";position:fixed;inset-block:0;left:calc(var(--kbq-skeleton-wave-width) * -1);width:var(--kbq-skeleton-wave-width);z-index:var(--kbq-skeleton-z-index);background:linear-gradient(90deg,var(--kbq-skeleton-animation-wave-start) 0%,var(--kbq-skeleton-animation-wave-center) 50%,var(--kbq-skeleton-animation-wave-end) 100%);animation:wave var(--kbq-skeleton-animation-duration) ease-in var(--kbq-skeleton-animation-delay) infinite}@media(prefers-reduced-motion:reduce){.kbq-skeleton:not(.kbq-skeleton_disabled):after{animation:none}}\n"] }]
+            args: [{ selector: 'skeleton-style-loader', template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["@charset \"UTF-8\";@keyframes kbq-skeleton-wave{0%{-webkit-mask-position:calc(var(--kbq-skeleton-wave-width) * -2 - var(--kbq-skeleton-offset, 0px)) 0,0 0;mask-position:calc(var(--kbq-skeleton-wave-width) * -2 - var(--kbq-skeleton-offset, 0px)) 0,0 0}to{-webkit-mask-position:calc(100vw - var(--kbq-skeleton-wave-width) - var(--kbq-skeleton-offset, 0px)) 0,0 0;mask-position:calc(100vw - var(--kbq-skeleton-wave-width) - var(--kbq-skeleton-offset, 0px)) 0,0 0}}:where(.kbq-skeleton:not(.kbq-skeleton_disabled)){border-radius:var(--kbq-skeleton-border-radius)}:where(kbq-skeleton:not(.kbq-skeleton_disabled)){display:flex;min-height:var(--kbq-skeleton-min-height)}.kbq-skeleton:not(.kbq-skeleton_disabled){color:transparent!important;background:var(--kbq-background-bg)!important;box-shadow:none!important;-webkit-box-decoration-break:clone;box-decoration-break:clone;filter:var(--kbq-skeleton-filter);-webkit-mask-image:linear-gradient(90deg,var(--kbq-skeleton-animation-wave-start),var(--kbq-skeleton-animation-wave-center),var(--kbq-skeleton-animation-wave-end)),linear-gradient(var(--kbq-skeleton-fill),var(--kbq-skeleton-fill));mask-image:linear-gradient(90deg,var(--kbq-skeleton-animation-wave-start),var(--kbq-skeleton-animation-wave-center),var(--kbq-skeleton-animation-wave-end)),linear-gradient(var(--kbq-skeleton-fill),var(--kbq-skeleton-fill));-webkit-mask-size:var(--kbq-skeleton-wave-width) 100%,100% 100%;mask-size:var(--kbq-skeleton-wave-width) 100%,100% 100%;-webkit-mask-position:calc(var(--kbq-skeleton-wave-width) * -1) 0,0 0;mask-position:calc(var(--kbq-skeleton-wave-width) * -1) 0,0 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:kbq-skeleton-wave var(--kbq-skeleton-animation-duration) ease-in infinite;-webkit-user-select:none;user-select:none;pointer-events:none}.kbq-skeleton:not(.kbq-skeleton_disabled).kbq-skeleton_offscreen{animation:none}.kbq-skeleton:not(.kbq-skeleton_disabled).kbq-animations-disabled{animation:none;transition:none}@media(prefers-reduced-motion:reduce){.kbq-skeleton:not(.kbq-skeleton_disabled){animation:none;transition:none}}\n", ":where(.kbq-skeleton-button,.kbq-skeleton-badge,.kbq-skeleton-tag,.kbq-skeleton-icon,.kbq-skeleton-link){display:inline-flex;flex-shrink:0;vertical-align:middle}:where(.kbq-skeleton-button){width:72px;height:var(--kbq-size-3xl)}:where(.kbq-skeleton-badge,.kbq-skeleton-tag){width:var(--kbq-size-6xl);height:var(--kbq-size-xxl)}:where(.kbq-skeleton-icon){width:var(--kbq-size-xxl);height:var(--kbq-size-xxl)}:where(.kbq-skeleton-link){width:var(--kbq-size-3xl);height:var(--kbq-size-xl)}:where(.kbq-skeleton-typography){display:flex;flex-direction:column;width:100%}:where(.kbq-skeleton-typography__line){height:calc(1lh - var(--kbq-skeleton-typography-gap));margin-block:calc(var(--kbq-skeleton-typography-gap) / 2)}:where(.kbq-skeleton-typography__line:nth-child(3n+1)){width:var(--kbq-skeleton-typography-line-width-1)}:where(.kbq-skeleton-typography__line:nth-child(3n+2)){width:var(--kbq-skeleton-typography-line-width-2)}:where(.kbq-skeleton-typography__line:nth-child(3n)){width:var(--kbq-skeleton-typography-line-width-3)}:where(.kbq-skeleton-typography__line:only-child){width:var(--kbq-skeleton-typography-single-line-width)}:where(.kbq-skeleton-dl){display:grid;grid-template-columns:var(--kbq-skeleton-dl-term-width) minmax(0,1fr);grid-auto-rows:var(--kbq-skeleton-dl-row-height);align-items:center;gap:var(--kbq-skeleton-dl-row-gap) var(--kbq-skeleton-dl-column-gap);width:100%}:where(.kbq-skeleton-dl__term,.kbq-skeleton-dl__description){height:var(--kbq-skeleton-dl-line-height)}:where(.kbq-skeleton-dl__description:nth-child(6n+2)){width:var(--kbq-skeleton-dl-line-width-1)}:where(.kbq-skeleton-dl__description:nth-child(6n+4)){width:var(--kbq-skeleton-dl-line-width-2)}:where(.kbq-skeleton-dl__description:nth-child(6n)){width:var(--kbq-skeleton-dl-line-width-3)}:where(.kbq-skeleton-table){display:grid;width:100%}:where(.kbq-skeleton-table__cell){display:flex;align-items:center;min-width:0;height:var(--kbq-skeleton-table-row-height);padding-inline:var(--kbq-skeleton-table-cell-padding-horizontal)}:where(.kbq-skeleton-table__cell_header){border-bottom:var(--kbq-skeleton-table-border-width) solid var(--kbq-skeleton-table-border-color)}:where(.kbq-skeleton-table__cell_pinned-edge){border-inline-end:var(--kbq-skeleton-table-border-width) solid var(--kbq-skeleton-table-border-color)}:where(.kbq-skeleton-table__cell>.kbq-skeleton){flex:1;height:var(--kbq-skeleton-table-line-height)}:where(.kbq-skeleton-table__cell_selection>.kbq-skeleton){flex:none;width:var(--kbq-skeleton-table-selection-size);height:var(--kbq-skeleton-table-selection-size)}:where(.kbq-skeleton-group){display:flex;flex-wrap:wrap;align-items:center;gap:var(--kbq-skeleton-group-gap)}:where(.kbq-skeleton-form-field){display:flex;flex-direction:column;width:100%}:where(.kbq-skeleton-form-field_horizontal){flex-direction:row;align-items:flex-start}:where(.kbq-skeleton-form-field__label){box-sizing:border-box;display:flex;margin-bottom:var(--kbq-skeleton-form-field-gap)}:where(.kbq-skeleton-form-field_horizontal>.kbq-skeleton-form-field__label){margin-bottom:0;padding:var(--kbq-size-xs) var(--kbq-size-l) 0 0}:where(.kbq-skeleton-form-field__label>.kbq-skeleton){width:var(--kbq-skeleton-form-field-label-width);height:var(--kbq-skeleton-form-field-line-height);margin-block:calc((var(--kbq-skeleton-form-field-label-height) - var(--kbq-skeleton-form-field-line-height)) / 2)}:where(.kbq-skeleton-form-field__content){display:flex;flex-direction:column;flex:1;min-width:0}:where(.kbq-skeleton-form-field__control){height:var(--kbq-skeleton-form-field-control-height)}:where(.kbq-skeleton-form-field_textarea .kbq-skeleton-form-field__control){height:var(--kbq-skeleton-form-field-textarea-height)}:where(.kbq-skeleton-form-field__hint){width:var(--kbq-skeleton-form-field-hint-width);height:var(--kbq-skeleton-form-field-hint-height);margin-top:var(--kbq-skeleton-form-field-gap)}:where(.kbq-skeleton-accordion){display:flex;flex-direction:column;width:100%}:where(.kbq-skeleton-accordion__item){display:flex;align-items:center;box-sizing:border-box;height:calc(var(--kbq-skeleton-accordion-header-height) + var(--kbq-skeleton-accordion-border-width) * 2);border:var(--kbq-skeleton-accordion-border-width) solid transparent;padding:var(--kbq-skeleton-accordion-padding)}:where(.kbq-skeleton-accordion__icon){flex:none;align-self:flex-start;width:var(--kbq-skeleton-accordion-icon-size);height:var(--kbq-skeleton-accordion-icon-size);margin:var(--kbq-skeleton-accordion-icon-padding)}:where(.kbq-skeleton-accordion__title){flex:1;height:var(--kbq-skeleton-accordion-line-height)}:where(.kbq-skeleton-checkable){display:flex;flex-direction:column;gap:var(--kbq-skeleton-checkable-gap)}:where(.kbq-skeleton-checkable__row){display:flex;align-items:flex-start;gap:var(--kbq-skeleton-checkable-control-gap)}:where(.kbq-skeleton-checkable__control){flex:none;width:var(--kbq-skeleton-checkable-control-width);height:var(--kbq-skeleton-checkable-control-height);margin-top:calc((var(--kbq-skeleton-checkable-label-line-height) - var(--kbq-skeleton-checkable-control-height)) / 2)}:where(.kbq-skeleton-checkable__text){display:flex;flex-direction:column}:where(.kbq-skeleton-checkable__label){height:var(--kbq-skeleton-checkable-line-height);margin-block:calc((var(--kbq-skeleton-checkable-label-line-height) - var(--kbq-skeleton-checkable-line-height)) / 2)}:where(.kbq-skeleton-checkable__row:nth-child(3n+1) .kbq-skeleton-checkable__label){width:var(--kbq-skeleton-checkable-label-width-1)}:where(.kbq-skeleton-checkable__row:nth-child(3n+2) .kbq-skeleton-checkable__label){width:var(--kbq-skeleton-checkable-label-width-2)}:where(.kbq-skeleton-checkable__row:nth-child(3n) .kbq-skeleton-checkable__label){width:var(--kbq-skeleton-checkable-label-width-3)}:where(.kbq-skeleton-checkable__hint){width:var(--kbq-skeleton-checkable-hint-width);height:var(--kbq-skeleton-checkable-hint-height);margin-top:var(--kbq-skeleton-checkable-hint-gap)}:where(.kbq-skeleton-tabs){display:flex;flex-direction:column;gap:var(--kbq-skeleton-tabs-content-gap);width:100%}:where(.kbq-skeleton-tabs_vertical){flex-direction:row}:where(.kbq-skeleton-tabs__header){display:flex;gap:var(--kbq-skeleton-tabs-gap)}:where(.kbq-skeleton-tabs_vertical>.kbq-skeleton-tabs__header){flex-direction:column;flex:none;width:var(--kbq-skeleton-tabs-vertical-width)}:where(.kbq-skeleton-tabs__tab){display:flex;align-items:center;height:var(--kbq-skeleton-tabs-tab-height)}:where(.kbq-skeleton-tabs__tab>.kbq-skeleton){width:var(--kbq-skeleton-tabs-tab-width);height:var(--kbq-skeleton-tabs-line-height)}:where(.kbq-skeleton-tabs__tab_selected>.kbq-skeleton){height:var(--kbq-skeleton-tabs-tab-height)}:where(.kbq-skeleton-tabs_vertical .kbq-skeleton-tabs__tab>.kbq-skeleton){width:100%}:where(.kbq-skeleton-tabs_vertical .kbq-skeleton-tabs__tab:not(.kbq-skeleton-tabs__tab_selected)){padding-inline:var(--kbq-skeleton-tabs-tab-padding)}:where(.kbq-skeleton-tabs__content){min-width:0}:where(.kbq-skeleton-tabs_vertical>.kbq-skeleton-tabs__content){flex:1}:where(.kbq-skeleton-tree){display:flex;flex-direction:column;width:100%}:where(.kbq-skeleton-tree__node){display:flex;align-items:center;gap:var(--kbq-skeleton-tree-gap);height:var(--kbq-skeleton-tree-node-height);padding-inline-start:var(--kbq-skeleton-tree-padding)}:where(.kbq-skeleton-tree__node_nested){padding-inline-start:calc(var(--kbq-skeleton-tree-padding) + var(--kbq-skeleton-tree-indent))}:where(.kbq-skeleton-tree__toggle){flex:none;width:var(--kbq-skeleton-tree-toggle-size);height:var(--kbq-skeleton-tree-toggle-size)}:where(.kbq-skeleton-tree__label){height:var(--kbq-skeleton-tree-line-height)}:where(.kbq-skeleton-tree__node_1>.kbq-skeleton-tree__label){width:var(--kbq-skeleton-tree-label-width-1)}:where(.kbq-skeleton-tree__node_2>.kbq-skeleton-tree__label){width:var(--kbq-skeleton-tree-label-width-2)}:where(.kbq-skeleton-tree__node_3>.kbq-skeleton-tree__label){width:var(--kbq-skeleton-tree-label-width-3)}\n", ":where(.kbq-skeleton){--kbq-skeleton-min-height: var(--kbq-size-l);--kbq-skeleton-border-radius: var(--kbq-size-xxs);--kbq-skeleton-animation-duration: 1.2s;--kbq-skeleton-wave-width: 100px}:where(.kbq-skeleton-typography){--kbq-skeleton-typography-gap: var(--kbq-size-xxs);--kbq-skeleton-typography-line-width-1: 80%;--kbq-skeleton-typography-line-width-2: 100%;--kbq-skeleton-typography-line-width-3: 60%;--kbq-skeleton-typography-single-line-width: 50%}:where(.kbq-skeleton-dl){--kbq-skeleton-dl-term-width: 120px;--kbq-skeleton-dl-line-height: var(--kbq-size-l);--kbq-skeleton-dl-row-height: var(--kbq-size-xl);--kbq-skeleton-dl-column-gap: var(--kbq-size-l);--kbq-skeleton-dl-row-gap: var(--kbq-size-l);--kbq-skeleton-dl-line-width-1: 80%;--kbq-skeleton-dl-line-width-2: 100%;--kbq-skeleton-dl-line-width-3: 60%}:where(.kbq-skeleton-table){--kbq-skeleton-table-row-height: var(--kbq-size-4xl);--kbq-skeleton-table-line-height: var(--kbq-size-l);--kbq-skeleton-table-cell-padding-horizontal: var(--kbq-size-s);--kbq-skeleton-table-border-width: var(--kbq-size-border-width);--kbq-skeleton-table-border-color: var(--kbq-line-contrast-less);--kbq-skeleton-table-selection-width: var(--kbq-size-4xl);--kbq-skeleton-table-selection-size: var(--kbq-size-l)}:where(.kbq-skeleton-group){--kbq-skeleton-group-gap: var(--kbq-size-xxs)}:where(.kbq-skeleton-group_button){--kbq-skeleton-group-gap: var(--kbq-size-s)}:where(.kbq-skeleton-form-field){--kbq-skeleton-form-field-label-width: 120px;--kbq-skeleton-form-field-label-height: var(--kbq-size-xl);--kbq-skeleton-form-field-line-height: var(--kbq-size-l);--kbq-skeleton-form-field-control-height: var(--kbq-size-3xl);--kbq-skeleton-form-field-textarea-height: 72px;--kbq-skeleton-form-field-hint-width: 60%;--kbq-skeleton-form-field-hint-height: var(--kbq-size-l);--kbq-skeleton-form-field-gap: var(--kbq-size-xs)}:where(.kbq-skeleton-accordion){--kbq-skeleton-accordion-header-height: 36px;--kbq-skeleton-accordion-border-width: 2px;--kbq-skeleton-accordion-padding: var(--kbq-size-xs) var(--kbq-size-s);--kbq-skeleton-accordion-icon-size: var(--kbq-size-l);--kbq-skeleton-accordion-icon-padding: var(--kbq-size-xxs);--kbq-skeleton-accordion-line-height: var(--kbq-size-l)}:where(.kbq-skeleton-checkable){--kbq-skeleton-checkable-gap: var(--kbq-size-s);--kbq-skeleton-checkable-control-gap: var(--kbq-size-s);--kbq-skeleton-checkable-control-width: var(--kbq-size-l);--kbq-skeleton-checkable-control-height: var(--kbq-size-l);--kbq-skeleton-checkable-label-line-height: var(--kbq-size-xl);--kbq-skeleton-checkable-line-height: var(--kbq-size-l);--kbq-skeleton-checkable-label-width-1: 120px;--kbq-skeleton-checkable-label-width-2: 140px;--kbq-skeleton-checkable-label-width-3: 80px;--kbq-skeleton-checkable-hint-width: 60%;--kbq-skeleton-checkable-hint-height: var(--kbq-size-l);--kbq-skeleton-checkable-hint-gap: var(--kbq-size-3xs)}:where(.kbq-skeleton-checkable_toggle){--kbq-skeleton-checkable-control-width: 28px}:where(.kbq-skeleton-tabs){--kbq-skeleton-tabs-tab-height: var(--kbq-size-3xl);--kbq-skeleton-tabs-tab-width: var(--kbq-size-6xl);--kbq-skeleton-tabs-tab-padding: var(--kbq-size-m);--kbq-skeleton-tabs-line-height: var(--kbq-size-l);--kbq-skeleton-tabs-gap: var(--kbq-size-s);--kbq-skeleton-tabs-content-gap: var(--kbq-size-s);--kbq-skeleton-tabs-vertical-width: 160px}:where(.kbq-skeleton-tree){--kbq-skeleton-tree-node-height: var(--kbq-size-3xl);--kbq-skeleton-tree-padding: var(--kbq-size-m);--kbq-skeleton-tree-indent: 14px;--kbq-skeleton-tree-gap: var(--kbq-size-s);--kbq-skeleton-tree-toggle-size: var(--kbq-size-l);--kbq-skeleton-tree-line-height: var(--kbq-size-l);--kbq-skeleton-tree-label-width-1: 120px;--kbq-skeleton-tree-label-width-2: 100px;--kbq-skeleton-tree-label-width-3: 80px}:where(:root,.kbq-light){--kbq-skeleton-filter: contrast(0) brightness(0);--kbq-skeleton-fill: var(--kbq-semantic-contrast-a1)}:where(.kbq-dark){--kbq-skeleton-filter: contrast(0) brightness(0) invert(1);--kbq-skeleton-fill: var(--kbq-semantic-dark-contrast-a2)}\n"] }]
+        }] });
+/**
+ * The single wave shared by every skeleton on the page. Hosts outside the viewport stop animating, the ones that
+ * animate are pinned to one start time, and their offsets are measured in one batch per frame.
+ *
+ * Everything here runs outside Angular: none of it changes a binding, and a wave pass must not start change
+ * detection once per skeleton.
+ */
+class SkeletonWave {
+    constructor() {
+        // Widened because TypeScript declares the observer constructors on `globalThis` rather than on `Window`.
+        this.window = inject(KBQ_WINDOW);
+        this.ngZone = inject(NgZone);
+        this.observer = this.createObserver();
+        this.hosts = new Set();
+        /** Hosts waiting to be measured, with whether their wave has just started and needs to be pinned. */
+        this.pending = new Map();
+        this.frame = null;
+        this.startTime = null;
+    }
+    /** Adds a host to the wave and returns the function that removes it. */
+    add(host) {
+        const onAnimationEvent = ({ target, type, animationName }) => {
+            if (target === host && animationName === WAVE_ANIMATION_NAME)
+                this.schedule(host, type === 'animationstart');
+        };
+        this.hosts.add(host);
+        this.ngZone.runOutsideAngular(() => {
+            host.addEventListener('animationstart', onAnimationEvent);
+            host.addEventListener('animationiteration', onAnimationEvent);
+        });
+        this.observer?.observe(host);
+        return () => {
+            this.hosts.delete(host);
+            host.removeEventListener('animationstart', onAnimationEvent);
+            host.removeEventListener('animationiteration', onAnimationEvent);
+            this.observer?.unobserve(host);
+            host.classList.remove(OFFSCREEN_SELECTOR);
+            host.style.removeProperty('--kbq-skeleton-offset');
+            this.pending.delete(host);
+            if (!this.hosts.size) {
+                this.startTime = null;
+            }
+        };
+    }
+    createObserver() {
+        const view = this.window;
+        // Missing on the server and in jsdom: the wave then simply runs on every host.
+        if (typeof view.IntersectionObserver !== 'function')
+            return null;
+        // The margin starts the wave just before a host scrolls in.
+        return this.ngZone.runOutsideAngular(() => new view.IntersectionObserver((entries) => {
+            for (const { target, isIntersecting } of entries) {
+                // Entries queued before `unobserve` are still delivered, for hosts that have left.
+                if (this.hosts.has(target)) {
+                    target.classList.toggle(OFFSCREEN_SELECTOR, !isIntersecting);
+                }
+            }
+        }, { rootMargin: '100px' }));
+    }
+    schedule(host, sync) {
+        this.pending.set(host, sync || !!this.pending.get(host));
+        this.frame ??= this.window.requestAnimationFrame(() => this.flush());
+    }
+    // Every host is read before any is written: a whole row of skeletons then costs one style and layout flush
+    // instead of one per host.
+    flush() {
+        const hosts = [...this.pending].map(([host, sync]) => ({
+            host,
+            offset: `${host.getBoundingClientRect().left}px`,
+            wave: sync ? findWave(host) : undefined
+        }));
+        this.pending.clear();
+        this.frame = null;
+        for (const { host, offset, wave } of hosts) {
+            if (wave) {
+                this.startTime ??= wave.startTime;
+                // Still unresolved on a wave that has not started yet: setting it would pause the wave.
+                if (this.startTime !== null) {
+                    wave.startTime = this.startTime;
+                }
+            }
+            // Writing an unchanged offset back would invalidate the host's style for nothing.
+            if (host.style.getPropertyValue('--kbq-skeleton-offset') !== offset) {
+                host.style.setProperty('--kbq-skeleton-offset', offset);
+            }
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SkeletonWave, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SkeletonWave, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SkeletonWave, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 /**
  * Directive representing a skeleton placeholder.
+ *
+ * Paints the host, children included, as one flat shape of the host's own outline with a wave running across it,
+ * and makes the host inert: it leaves the tab order and the accessibility tree until the skeleton is disabled.
  */
 class KbqSkeleton {
     constructor() {
         this.styleLoader = inject(_CdkPrivateStyleLoader);
         this.element = kbqInjectNativeElement();
-        this.window = inject(KBQ_WINDOW);
+        this.wave = inject(SkeletonWave);
         /** Whether the skeleton is enabled. */
-        this.enabled = input(true, ...(ngDevMode ? [{ debugName: "enabled", transform: booleanAttribute, alias: 'kbqSkeleton' }] : [{ transform: booleanAttribute, alias: 'kbqSkeleton' }]));
-        count++;
+        this.enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'kbqSkeleton' });
+        /**
+         * Whether the fill stands still, without the wave.
+         *
+         * @docs-private
+         */
+        this.animationsDisabled = kbqAnimationsDisabled();
         this.styleLoader.load(SkeletonStyleLoader);
-        afterRenderEffect(() => {
-            if (!this.enabled())
-                return;
-            const enabledAt = Date.now();
-            animationStartTime ??= enabledAt;
-            this.syncAnimation(enabledAt);
+        afterRenderEffect((onCleanup) => {
+            if (this.enabled()) {
+                onCleanup(this.wave.add(this.element));
+            }
         });
     }
-    ngOnDestroy() {
-        if (--count === 0) {
-            animationStartTime = null;
-        }
-    }
-    syncAnimation(enabledAt) {
-        const elapsed = enabledAt - (animationStartTime ?? 0);
-        const durationMs = parseFloat(this.window.getComputedStyle(this.element).getPropertyValue('--kbq-skeleton-animation-duration'));
-        const delay = -(elapsed % durationMs);
-        this.element.style.setProperty('--kbq-skeleton-animation-delay', `${delay}ms`);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqSkeleton, isStandalone: true, selector: "kbq-skeleton, [kbqSkeleton]", inputs: { enabled: { classPropertyName: "enabled", publicName: "kbqSkeleton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-skeleton_disabled": "!enabled()" }, classAttribute: "kbq-skeleton" }, exportAs: ["kbqSkeleton"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqSkeleton, isStandalone: true, selector: "kbq-skeleton, [kbqSkeleton]", inputs: { enabled: { classPropertyName: "enabled", publicName: "kbqSkeleton", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-skeleton_disabled": "!enabled()", "class.kbq-animations-disabled": "animationsDisabled", "attr.inert": "enabled() || null" }, classAttribute: "kbq-skeleton" }, exportAs: ["kbqSkeleton"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSkeleton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeleton, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-skeleton, [kbqSkeleton]',
                     host: {
                         class: 'kbq-skeleton',
-                        '[class.kbq-skeleton_disabled]': '!enabled()'
+                        '[class.kbq-skeleton_disabled]': '!enabled()',
+                        '[class.kbq-animations-disabled]': 'animationsDisabled',
+                        '[attr.inert]': 'enabled() || null'
                     },
                     exportAs: 'kbqSkeleton'
                 }]
         }], ctorParameters: () => [], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqSkeleton", required: false }] }] } });
 
-const COMPONENTS = [KbqSkeleton];
+const KBQ_SKELETON_PRESETS_DEFAULT_CONFIGURATION = {
+    typographyLines: 1,
+    dlRows: 3,
+    tableRows: 3,
+    tableColumns: 3,
+    groupCount: 3,
+    accordionRows: 3,
+    checkableRows: 1,
+    tabsCount: 3,
+    tabsContentLines: 3,
+    treeRows: 3,
+    treeChildren: 3
+};
+/** Numbers of items of the skeleton presets. */
+const KBQ_SKELETON_PRESETS_CONFIGURATION = new InjectionToken('KBQ_SKELETON_PRESETS_CONFIGURATION', { factory: () => KBQ_SKELETON_PRESETS_DEFAULT_CONFIGURATION });
+/**
+ * Utility provider for `KBQ_SKELETON_PRESETS_CONFIGURATION`, for an application or a part of it. The keys it leaves
+ * out keep the values of the closest provider above.
+ */
+const kbqSkeletonPresetsConfigurationProvider = (configuration) => ({
+    provide: KBQ_SKELETON_PRESETS_CONFIGURATION,
+    useFactory: () => ({
+        ...KBQ_SKELETON_PRESETS_DEFAULT_CONFIGURATION,
+        ...inject(KBQ_SKELETON_PRESETS_CONFIGURATION, { skipSelf: true, optional: true }),
+        ...configuration
+    })
+});
+/** Indexes of `count` items, for a `@for` that repeats a placeholder; a single one for a count that is not a number. */
+const range = (count) => Array.from({ length: Number.isFinite(count) ? count : 1 }, (_, index) => index);
+/** Placeholder of a button whose data has not loaded yet. */
+class KbqSkeletonButton {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqSkeletonButton, isStandalone: true, selector: "kbq-skeleton-button", host: { classAttribute: "kbq-skeleton-button" }, hostDirectives: [{ directive: KbqSkeleton }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-skeleton-button',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'kbq-skeleton-button' },
+                    hostDirectives: [KbqSkeleton]
+                }]
+        }] });
+/** Placeholder of a badge whose data has not loaded yet. */
+class KbqSkeletonBadge {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqSkeletonBadge, isStandalone: true, selector: "kbq-skeleton-badge", host: { classAttribute: "kbq-skeleton-badge" }, hostDirectives: [{ directive: KbqSkeleton }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonBadge, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-skeleton-badge',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'kbq-skeleton-badge' },
+                    hostDirectives: [KbqSkeleton]
+                }]
+        }] });
+/** Placeholder of a tag whose data has not loaded yet. */
+class KbqSkeletonTag {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqSkeletonTag, isStandalone: true, selector: "kbq-skeleton-tag", host: { classAttribute: "kbq-skeleton-tag" }, hostDirectives: [{ directive: KbqSkeleton }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonTag, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-skeleton-tag',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'kbq-skeleton-tag' },
+                    hostDirectives: [KbqSkeleton]
+                }]
+        }] });
+/** Placeholder of an icon or an icon button whose data has not loaded yet. */
+class KbqSkeletonIcon {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqSkeletonIcon, isStandalone: true, selector: "kbq-skeleton-icon", host: { classAttribute: "kbq-skeleton-icon" }, hostDirectives: [{ directive: KbqSkeleton }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonIcon, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-skeleton-icon',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'kbq-skeleton-icon' },
+                    hostDirectives: [KbqSkeleton]
+                }]
+        }] });
+/** Placeholder of a link whose data has not loaded yet. */
+class KbqSkeletonLink {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.25", type: KbqSkeletonLink, isStandalone: true, selector: "kbq-skeleton-link", host: { classAttribute: "kbq-skeleton-link" }, hostDirectives: [{ directive: KbqSkeleton }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonLink, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-skeleton-link',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'kbq-skeleton-link' },
+                    hostDirectives: [KbqSkeleton]
+                }]
+        }] });
+/**
+ * Placeholder of text that has not loaded yet: lines as tall as the lines of its typography level, a line of body text
+ * by default. A single line, such as a heading, is shorter than the lines of a paragraph, which differ in length.
+ */
+class KbqSkeletonTypography {
+    constructor() {
+        this.configuration = inject(KBQ_SKELETON_PRESETS_CONFIGURATION);
+        /** Typography level of the text, the name of its class without `kbq-`, such as `title` or `caps-compact`. */
+        this.level = input('text-normal', ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+        /** Number of lines, `typographyLines` of `KBQ_SKELETON_PRESETS_CONFIGURATION` by default. */
+        this.lines = input(this.configuration.typographyLines, { ...(ngDevMode ? { debugName: "lines" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.lineList = computed(() => range(this.lines()), ...(ngDevMode ? [{ debugName: "lineList" }] : /* istanbul ignore next */ []));
+        this.levelClass = computed(() => `kbq-${this.level()}`, ...(ngDevMode ? [{ debugName: "levelClass" }] : /* istanbul ignore next */ []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonTypography, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSkeletonTypography, isStandalone: true, selector: "kbq-skeleton-typography", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "levelClass()" }, classAttribute: "kbq-skeleton-typography" }, ngImport: i0, template: `
+        @for (line of lineList(); track line) {
+            <div kbqSkeleton class="kbq-skeleton-typography__line"></div>
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: KbqSkeleton, selector: "kbq-skeleton, [kbqSkeleton]", inputs: ["kbqSkeleton"], exportAs: ["kbqSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonTypography, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-skeleton-typography',
+                    imports: [KbqSkeleton],
+                    template: `
+        @for (line of lineList(); track line) {
+            <div kbqSkeleton class="kbq-skeleton-typography__line"></div>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'kbq-skeleton-typography',
+                        '[class]': 'levelClass()'
+                    }
+                }]
+        }], propDecorators: { level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }] } });
+/** Placeholder of a description list whose data has not loaded yet. */
+class KbqSkeletonDl {
+    constructor() {
+        this.configuration = inject(KBQ_SKELETON_PRESETS_CONFIGURATION);
+        /** Number of terms with their descriptions, `dlRows` of `KBQ_SKELETON_PRESETS_CONFIGURATION` by default. */
+        this.rows = input(this.configuration.dlRows, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.rowList = computed(() => range(this.rows()), ...(ngDevMode ? [{ debugName: "rowList" }] : /* istanbul ignore next */ []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonDl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSkeletonDl, isStandalone: true, selector: "kbq-skeleton-dl", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kbq-skeleton-dl" }, ngImport: i0, template: `
+        @for (row of rowList(); track row) {
+            <div kbqSkeleton class="kbq-skeleton-dl__term"></div>
+            <div kbqSkeleton class="kbq-skeleton-dl__description"></div>
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: KbqSkeleton, selector: "kbq-skeleton, [kbqSkeleton]", inputs: ["kbqSkeleton"], exportAs: ["kbqSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonDl, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-skeleton-dl',
+                    imports: [KbqSkeleton],
+                    template: `
+        @for (row of rowList(); track row) {
+            <div kbqSkeleton class="kbq-skeleton-dl__term"></div>
+            <div kbqSkeleton class="kbq-skeleton-dl__description"></div>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'kbq-skeleton-dl' }
+                }]
+        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
+const equalColumns = (count) => range(count).map(() => 'minmax(0, 1fr)');
+const toColumns = (value) => typeof value === 'object' ? value : equalColumns(numberAttribute(value));
+/** Placeholder of a table whose data has not loaded yet. */
+class KbqSkeletonTable {
+    constructor() {
+        this.configuration = inject(KBQ_SKELETON_PRESETS_CONFIGURATION);
+        /** Number of rows below the header, `tableRows` of `KBQ_SKELETON_PRESETS_CONFIGURATION` by default. */
+        this.rows = input(this.configuration.tableRows, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * Number of columns of equal width, `tableColumns` of `KBQ_SKELETON_PRESETS_CONFIGURATION` by default, or the
+         * width of every column as a CSS grid track, such as `160px`, `1fr` or `auto`, for a table whose columns are known.
+         */
+        this.columns = input(equalColumns(this.configuration.tableColumns), { ...(ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {}), transform: toColumns });
+        /** Whether the table has a header row. */
+        this.header = input(true, { ...(ngDevMode ? { debugName: "header" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether every row starts with a checkbox, as in a grid whose rows can be selected. */
+        this.selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Number of columns pinned to the start and set apart from the rest by a line, as in a grid. */
+        this.pinnedColumns = input(0, { ...(ngDevMode ? { debugName: "pinnedColumns" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.rowList = computed(() => range(this.rows()), ...(ngDevMode ? [{ debugName: "rowList" }] : /* istanbul ignore next */ []));
+        this.gridTemplateColumns = computed(() => [...(this.selectable() ? ['var(--kbq-skeleton-table-selection-width)'] : []), ...this.columns()].join(' '), ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : /* istanbul ignore next */ []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSkeletonTable, isStandalone: true, selector: "kbq-skeleton-table", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, pinnedColumns: { classPropertyName: "pinnedColumns", publicName: "pinnedColumns", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.grid-template-columns": "gridTemplateColumns()" }, classAttribute: "kbq-skeleton-table" }, ngImport: i0, template: `
+        @if (header()) {
+            @if (selectable()) {
+                <div
+                    class="kbq-skeleton-table__cell kbq-skeleton-table__cell_header kbq-skeleton-table__cell_selection"
+                >
+                    <div kbqSkeleton></div>
+                </div>
+            }
+            @for (column of columns(); track $index) {
+                <div
+                    class="kbq-skeleton-table__cell kbq-skeleton-table__cell_header"
+                    [class.kbq-skeleton-table__cell_pinned-edge]="$index === pinnedColumns() - 1"
+                >
+                    <div kbqSkeleton></div>
+                </div>
+            }
+        }
+        @for (row of rowList(); track row) {
+            @if (selectable()) {
+                <div class="kbq-skeleton-table__cell kbq-skeleton-table__cell_selection">
+                    <div kbqSkeleton></div>
+                </div>
+            }
+            @for (column of columns(); track $index) {
+                <div
+                    class="kbq-skeleton-table__cell"
+                    [class.kbq-skeleton-table__cell_pinned-edge]="$index === pinnedColumns() - 1"
+                >
+                    <div kbqSkeleton></div>
+                </div>
+            }
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: KbqSkeleton, selector: "kbq-skeleton, [kbqSkeleton]", inputs: ["kbqSkeleton"], exportAs: ["kbqSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonTable, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-skeleton-table',
+                    imports: [KbqSkeleton],
+                    template: `
+        @if (header()) {
+            @if (selectable()) {
+                <div
+                    class="kbq-skeleton-table__cell kbq-skeleton-table__cell_header kbq-skeleton-table__cell_selection"
+                >
+                    <div kbqSkeleton></div>
+                </div>
+            }
+            @for (column of columns(); track $index) {
+                <div
+                    class="kbq-skeleton-table__cell kbq-skeleton-table__cell_header"
+                    [class.kbq-skeleton-table__cell_pinned-edge]="$index === pinnedColumns() - 1"
+                >
+                    <div kbqSkeleton></div>
+                </div>
+            }
+        }
+        @for (row of rowList(); track row) {
+            @if (selectable()) {
+                <div class="kbq-skeleton-table__cell kbq-skeleton-table__cell_selection">
+                    <div kbqSkeleton></div>
+                </div>
+            }
+            @for (column of columns(); track $index) {
+                <div
+                    class="kbq-skeleton-table__cell"
+                    [class.kbq-skeleton-table__cell_pinned-edge]="$index === pinnedColumns() - 1"
+                >
+                    <div kbqSkeleton></div>
+                </div>
+            }
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'kbq-skeleton-table',
+                        '[style.grid-template-columns]': 'gridTemplateColumns()'
+                    }
+                }]
+        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], pinnedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedColumns", required: false }] }] } });
+/** Row of placeholders of one kind, such as the tags of a tag list. */
+class KbqSkeletonGroup {
+    constructor() {
+        this.configuration = inject(KBQ_SKELETON_PRESETS_CONFIGURATION);
+        /** Placeholder of every item of the row. */
+        this.preset = input.required(...(ngDevMode ? [{ debugName: "preset" }] : /* istanbul ignore next */ []));
+        /** Number of placeholders, `groupCount` of `KBQ_SKELETON_PRESETS_CONFIGURATION` by default. */
+        this.count = input(this.configuration.groupCount, { ...(ngDevMode ? { debugName: "count" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.itemList = computed(() => range(this.count()), ...(ngDevMode ? [{ debugName: "itemList" }] : /* istanbul ignore next */ []));
+        this.presetClass = computed(() => `kbq-skeleton-group_${this.preset()}`, ...(ngDevMode ? [{ debugName: "presetClass" }] : /* istanbul ignore next */ []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSkeletonGroup, isStandalone: true, selector: "kbq-skeleton-group", inputs: { preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: true, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "presetClass()" }, classAttribute: "kbq-skeleton-group" }, ngImport: i0, template: `
+        @for (item of itemList(); track item) {
+            @switch (preset()) {
+                @case ('button') {
+                    <kbq-skeleton-button />
+                }
+                @case ('badge') {
+                    <kbq-skeleton-badge />
+                }
+                @case ('tag') {
+                    <kbq-skeleton-tag />
+                }
+                @case ('icon') {
+                    <kbq-skeleton-icon />
+                }
+                @case ('link') {
+                    <kbq-skeleton-link />
+                }
+            }
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: KbqSkeletonButton, selector: "kbq-skeleton-button" }, { kind: "component", type: KbqSkeletonBadge, selector: "kbq-skeleton-badge" }, { kind: "component", type: KbqSkeletonTag, selector: "kbq-skeleton-tag" }, { kind: "component", type: KbqSkeletonIcon, selector: "kbq-skeleton-icon" }, { kind: "component", type: KbqSkeletonLink, selector: "kbq-skeleton-link" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-skeleton-group',
+                    imports: [KbqSkeletonButton, KbqSkeletonBadge, KbqSkeletonTag, KbqSkeletonIcon, KbqSkeletonLink],
+                    template: `
+        @for (item of itemList(); track item) {
+            @switch (preset()) {
+                @case ('button') {
+                    <kbq-skeleton-button />
+                }
+                @case ('badge') {
+                    <kbq-skeleton-badge />
+                }
+                @case ('tag') {
+                    <kbq-skeleton-tag />
+                }
+                @case ('icon') {
+                    <kbq-skeleton-icon />
+                }
+                @case ('link') {
+                    <kbq-skeleton-link />
+                }
+            }
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'kbq-skeleton-group',
+                        '[class]': 'presetClass()'
+                    }
+                }]
+        }], propDecorators: { preset: [{ type: i0.Input, args: [{ isSignal: true, alias: "preset", required: true }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }] } });
+/** Placeholder of a form field whose value has not loaded yet: its label, control and hint. */
+class KbqSkeletonFormField {
+    constructor() {
+        /** Whether the label is to the left of the control, as in a horizontal `kbq-form-field`. */
+        this.horizontal = input(false, { ...(ngDevMode ? { debugName: "horizontal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Control of the form field. */
+        this.control = input('input', ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+        /** Whether the form field has a label, as a `kbq-form-field` with `kbq-label`. */
+        this.label = input(true, { ...(ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether the form field has a hint below the control. */
+        this.hint = input(false, { ...(ngDevMode ? { debugName: "hint" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Classes of the label, such as the `labelClass` of the `kbq-form-field` the placeholder stands in for. */
+        this.labelClass = input(...(ngDevMode ? [undefined, { debugName: "labelClass" }] : /* istanbul ignore next */ []));
+        /** Classes of the control and the hint, such as the `contentClass` of the `kbq-form-field`. */
+        this.contentClass = input(...(ngDevMode ? [undefined, { debugName: "contentClass" }] : /* istanbul ignore next */ []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSkeletonFormField, isStandalone: true, selector: "kbq-skeleton-form-field", inputs: { horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, contentClass: { classPropertyName: "contentClass", publicName: "contentClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-skeleton-form-field_horizontal": "horizontal()", "class.kbq-skeleton-form-field_textarea": "control() === \"textarea\"" }, classAttribute: "kbq-skeleton-form-field" }, ngImport: i0, template: `
+        @if (label()) {
+            <div class="kbq-skeleton-form-field__label" [class]="labelClass()">
+                <div kbqSkeleton></div>
+            </div>
+        }
+        <div class="kbq-skeleton-form-field__content" [class]="contentClass()">
+            <div kbqSkeleton class="kbq-skeleton-form-field__control"></div>
+            @if (hint()) {
+                <div kbqSkeleton class="kbq-skeleton-form-field__hint"></div>
+            }
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: KbqSkeleton, selector: "kbq-skeleton, [kbqSkeleton]", inputs: ["kbqSkeleton"], exportAs: ["kbqSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonFormField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-skeleton-form-field',
+                    imports: [KbqSkeleton],
+                    template: `
+        @if (label()) {
+            <div class="kbq-skeleton-form-field__label" [class]="labelClass()">
+                <div kbqSkeleton></div>
+            </div>
+        }
+        <div class="kbq-skeleton-form-field__content" [class]="contentClass()">
+            <div kbqSkeleton class="kbq-skeleton-form-field__control"></div>
+            @if (hint()) {
+                <div kbqSkeleton class="kbq-skeleton-form-field__hint"></div>
+            }
+        </div>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'kbq-skeleton-form-field',
+                        '[class.kbq-skeleton-form-field_horizontal]': 'horizontal()',
+                        '[class.kbq-skeleton-form-field_textarea]': 'control() === "textarea"'
+                    }
+                }]
+        }], propDecorators: { horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }] } });
+/** Placeholder of an accordion whose items have not loaded yet: collapsed items with their icon and title. */
+class KbqSkeletonAccordion {
+    constructor() {
+        this.configuration = inject(KBQ_SKELETON_PRESETS_CONFIGURATION);
+        /** Number of collapsed items, `accordionRows` of `KBQ_SKELETON_PRESETS_CONFIGURATION` by default. */
+        this.rows = input(this.configuration.accordionRows, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.rowList = computed(() => range(this.rows()), ...(ngDevMode ? [{ debugName: "rowList" }] : /* istanbul ignore next */ []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSkeletonAccordion, isStandalone: true, selector: "kbq-skeleton-accordion", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kbq-skeleton-accordion" }, ngImport: i0, template: `
+        @for (row of rowList(); track row) {
+            <div class="kbq-skeleton-accordion__item">
+                <div kbqSkeleton class="kbq-skeleton-accordion__icon"></div>
+                <div kbqSkeleton class="kbq-skeleton-accordion__title"></div>
+            </div>
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: KbqSkeleton, selector: "kbq-skeleton, [kbqSkeleton]", inputs: ["kbqSkeleton"], exportAs: ["kbqSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonAccordion, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-skeleton-accordion',
+                    imports: [KbqSkeleton],
+                    template: `
+        @for (row of rowList(); track row) {
+            <div class="kbq-skeleton-accordion__item">
+                <div kbqSkeleton class="kbq-skeleton-accordion__icon"></div>
+                <div kbqSkeleton class="kbq-skeleton-accordion__title"></div>
+            </div>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'kbq-skeleton-accordion' }
+                }]
+        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
+/**
+ * Placeholder of checkboxes, radio buttons or toggles whose data has not loaded yet: the control, and the label with
+ * its hint on demand.
+ */
+class KbqSkeletonCheckable {
+    constructor() {
+        this.configuration = inject(KBQ_SKELETON_PRESETS_CONFIGURATION);
+        /** Control the placeholder stands in for. */
+        this.control = input('checkbox', ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+        /** Number of controls, `checkableRows` of `KBQ_SKELETON_PRESETS_CONFIGURATION` by default. */
+        this.rows = input(this.configuration.checkableRows, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Whether a control has a label. */
+        this.label = input(true, { ...(ngDevMode ? { debugName: "label" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether the label has a hint below it. */
+        this.hint = input(false, { ...(ngDevMode ? { debugName: "hint" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.rowList = computed(() => range(this.rows()), ...(ngDevMode ? [{ debugName: "rowList" }] : /* istanbul ignore next */ []));
+        this.controlClass = computed(() => `kbq-skeleton-checkable_${this.control()}`, ...(ngDevMode ? [{ debugName: "controlClass" }] : /* istanbul ignore next */ []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonCheckable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSkeletonCheckable, isStandalone: true, selector: "kbq-skeleton-checkable", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "controlClass()" }, classAttribute: "kbq-skeleton-checkable" }, ngImport: i0, template: `
+        @for (row of rowList(); track row) {
+            <div class="kbq-skeleton-checkable__row">
+                <div kbqSkeleton class="kbq-skeleton-checkable__control"></div>
+                @if (label()) {
+                    <div class="kbq-skeleton-checkable__text">
+                        <div kbqSkeleton class="kbq-skeleton-checkable__label"></div>
+                        @if (hint()) {
+                            <div kbqSkeleton class="kbq-skeleton-checkable__hint"></div>
+                        }
+                    </div>
+                }
+            </div>
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: KbqSkeleton, selector: "kbq-skeleton, [kbqSkeleton]", inputs: ["kbqSkeleton"], exportAs: ["kbqSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonCheckable, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-skeleton-checkable',
+                    imports: [KbqSkeleton],
+                    template: `
+        @for (row of rowList(); track row) {
+            <div class="kbq-skeleton-checkable__row">
+                <div kbqSkeleton class="kbq-skeleton-checkable__control"></div>
+                @if (label()) {
+                    <div class="kbq-skeleton-checkable__text">
+                        <div kbqSkeleton class="kbq-skeleton-checkable__label"></div>
+                        @if (hint()) {
+                            <div kbqSkeleton class="kbq-skeleton-checkable__hint"></div>
+                        }
+                    </div>
+                }
+            </div>
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'kbq-skeleton-checkable',
+                        '[class]': 'controlClass()'
+                    }
+                }]
+        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
+/**
+ * Placeholder of tabs whose data has not loaded yet: the first tab stands out as the selected one. The content below
+ * or beside them is text, or the placeholders projected into the component.
+ */
+class KbqSkeletonTabs {
+    constructor() {
+        this.configuration = inject(KBQ_SKELETON_PRESETS_CONFIGURATION);
+        /** Whether the tabs are stacked beside the content, as in a vertical `kbq-tab-group`. */
+        this.vertical = input(false, { ...(ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Number of tabs, `tabsCount` of `KBQ_SKELETON_PRESETS_CONFIGURATION` by default. */
+        this.count = input(this.configuration.tabsCount, { ...(ngDevMode ? { debugName: "count" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * Number of lines of the text that stands for the content when nothing is projected, `tabsContentLines` of
+         * `KBQ_SKELETON_PRESETS_CONFIGURATION` by default.
+         */
+        this.contentLines = input(this.configuration.tabsContentLines, { ...(ngDevMode ? { debugName: "contentLines" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.tabList = computed(() => range(this.count()), ...(ngDevMode ? [{ debugName: "tabList" }] : /* istanbul ignore next */ []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSkeletonTabs, isStandalone: true, selector: "kbq-skeleton-tabs", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, contentLines: { classPropertyName: "contentLines", publicName: "contentLines", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kbq-skeleton-tabs_vertical": "vertical()" }, classAttribute: "kbq-skeleton-tabs" }, ngImport: i0, template: `
+        <div class="kbq-skeleton-tabs__header">
+            @for (tab of tabList(); track tab) {
+                <div class="kbq-skeleton-tabs__tab" [class.kbq-skeleton-tabs__tab_selected]="tab === 0">
+                    <div kbqSkeleton></div>
+                </div>
+            }
+        </div>
+        <div class="kbq-skeleton-tabs__content">
+            <ng-content>
+                <kbq-skeleton-typography [lines]="contentLines()" />
+            </ng-content>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: KbqSkeleton, selector: "kbq-skeleton, [kbqSkeleton]", inputs: ["kbqSkeleton"], exportAs: ["kbqSkeleton"] }, { kind: "component", type: KbqSkeletonTypography, selector: "kbq-skeleton-typography", inputs: ["level", "lines"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonTabs, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-skeleton-tabs',
+                    imports: [KbqSkeleton, KbqSkeletonTypography],
+                    template: `
+        <div class="kbq-skeleton-tabs__header">
+            @for (tab of tabList(); track tab) {
+                <div class="kbq-skeleton-tabs__tab" [class.kbq-skeleton-tabs__tab_selected]="tab === 0">
+                    <div kbqSkeleton></div>
+                </div>
+            }
+        </div>
+        <div class="kbq-skeleton-tabs__content">
+            <ng-content>
+                <kbq-skeleton-typography [lines]="contentLines()" />
+            </ng-content>
+        </div>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'kbq-skeleton-tabs',
+                        '[class.kbq-skeleton-tabs_vertical]': 'vertical()'
+                    }
+                }]
+        }], propDecorators: { vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], contentLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentLines", required: false }] }] } });
+/** Placeholder of a tree whose nodes have not loaded yet, with the second node expanded. */
+class KbqSkeletonTree {
+    constructor() {
+        this.configuration = inject(KBQ_SKELETON_PRESETS_CONFIGURATION);
+        /** Number of top-level nodes, `treeRows` of `KBQ_SKELETON_PRESETS_CONFIGURATION` by default. */
+        this.rows = input(this.configuration.treeRows, { ...(ngDevMode ? { debugName: "rows" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * Number of children of the expanded second node, `treeChildren` of `KBQ_SKELETON_PRESETS_CONFIGURATION` by
+         * default.
+         */
+        this.children = input(this.configuration.treeChildren, { ...(ngDevMode ? { debugName: "children" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.rowList = computed(() => range(this.rows()), ...(ngDevMode ? [{ debugName: "rowList" }] : /* istanbul ignore next */ []));
+        this.childList = computed(() => range(this.children()), ...(ngDevMode ? [{ debugName: "childList" }] : /* istanbul ignore next */ []));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonTree, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqSkeletonTree, isStandalone: true, selector: "kbq-skeleton-tree", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "kbq-skeleton-tree" }, ngImport: i0, template: `
+        @for (row of rowList(); track row) {
+            <div class="kbq-skeleton-tree__node kbq-skeleton-tree__node_{{ (row % 3) + 1 }}">
+                <div kbqSkeleton class="kbq-skeleton-tree__toggle"></div>
+                <div kbqSkeleton class="kbq-skeleton-tree__label"></div>
+            </div>
+            @if (row === 1) {
+                @for (child of childList(); track child) {
+                    <div
+                        class="kbq-skeleton-tree__node kbq-skeleton-tree__node_nested kbq-skeleton-tree__node_{{
+                            (child % 3) + 1
+                        }}"
+                    >
+                        <div kbqSkeleton class="kbq-skeleton-tree__toggle"></div>
+                        <div kbqSkeleton class="kbq-skeleton-tree__label"></div>
+                    </div>
+                }
+            }
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: KbqSkeleton, selector: "kbq-skeleton, [kbqSkeleton]", inputs: ["kbqSkeleton"], exportAs: ["kbqSkeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonTree, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kbq-skeleton-tree',
+                    imports: [KbqSkeleton],
+                    template: `
+        @for (row of rowList(); track row) {
+            <div class="kbq-skeleton-tree__node kbq-skeleton-tree__node_{{ (row % 3) + 1 }}">
+                <div kbqSkeleton class="kbq-skeleton-tree__toggle"></div>
+                <div kbqSkeleton class="kbq-skeleton-tree__label"></div>
+            </div>
+            @if (row === 1) {
+                @for (child of childList(); track child) {
+                    <div
+                        class="kbq-skeleton-tree__node kbq-skeleton-tree__node_nested kbq-skeleton-tree__node_{{
+                            (child % 3) + 1
+                        }}"
+                    >
+                        <div kbqSkeleton class="kbq-skeleton-tree__toggle"></div>
+                        <div kbqSkeleton class="kbq-skeleton-tree__label"></div>
+                    </div>
+                }
+            }
+        }
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'kbq-skeleton-tree' }
+                }]
+        }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], children: [{ type: i0.Input, args: [{ isSignal: true, alias: "children", required: false }] }] } });
+
+const COMPONENTS = [
+    KbqSkeleton,
+    KbqSkeletonButton,
+    KbqSkeletonBadge,
+    KbqSkeletonTag,
+    KbqSkeletonIcon,
+    KbqSkeletonLink,
+    KbqSkeletonTypography,
+    KbqSkeletonDl,
+    KbqSkeletonTable,
+    KbqSkeletonGroup,
+    KbqSkeletonFormField,
+    KbqSkeletonAccordion,
+    KbqSkeletonCheckable,
+    KbqSkeletonTabs,
+    KbqSkeletonTree
+];
 class KbqSkeletonModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqSkeletonModule, imports: [KbqSkeleton], exports: [KbqSkeleton] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSkeletonModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonModule, imports: [KbqSkeleton,
+            KbqSkeletonButton,
+            KbqSkeletonBadge,
+            KbqSkeletonTag,
+            KbqSkeletonIcon,
+            KbqSkeletonLink,
+            KbqSkeletonTypography,
+            KbqSkeletonDl,
+            KbqSkeletonTable,
+            KbqSkeletonGroup,
+            KbqSkeletonFormField,
+            KbqSkeletonAccordion,
+            KbqSkeletonCheckable,
+            KbqSkeletonTabs,
+            KbqSkeletonTree], exports: [KbqSkeleton,
+            KbqSkeletonButton,
+            KbqSkeletonBadge,
+            KbqSkeletonTag,
+            KbqSkeletonIcon,
+            KbqSkeletonLink,
+            KbqSkeletonTypography,
+            KbqSkeletonDl,
+            KbqSkeletonTable,
+            KbqSkeletonGroup,
+            KbqSkeletonFormField,
+            KbqSkeletonAccordion,
+            KbqSkeletonCheckable,
+            KbqSkeletonTabs,
+            KbqSkeletonTree] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqSkeletonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqSkeletonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,
@@ -82,5 +856,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KbqSkeleton, KbqSkeletonModule };
+export { KBQ_SKELETON_PRESETS_CONFIGURATION, KbqSkeleton, KbqSkeletonAccordion, KbqSkeletonBadge, KbqSkeletonButton, KbqSkeletonCheckable, KbqSkeletonDl, KbqSkeletonFormField, KbqSkeletonGroup, KbqSkeletonIcon, KbqSkeletonLink, KbqSkeletonModule, KbqSkeletonTable, KbqSkeletonTabs, KbqSkeletonTag, KbqSkeletonTree, KbqSkeletonTypography, kbqSkeletonPresetsConfigurationProvider };
 //# sourceMappingURL=koobiq-components-skeleton.mjs.map