@ethlete/cdk 4.66.0 → 4.67.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ethlete/cdk
 
+## 4.67.0
+
+### Minor Changes
+
+- [#2791](https://github.com/ethlete-io/ethdk/pull/2791) [`6751442`](https://github.com/ethlete-io/ethdk/commit/67514421accd23d9abffdf6ef1974c04f9a0e862) Thanks [@nicks-passiert](https://github.com/nicks-passiert)! - Add loading state for breadcrumb items and adjust structure of breadcrumb
+
 ## 4.66.0
 
 ### Minor Changes

package/fesm2022/ethlete-cdk.mjs

@@ -6924,12 +6924,55 @@ const MenuImports = [
     MenuSearchTemplateDirective,
 ];
 
+class SkeletonComponent {
+    constructor() {
+        this.loadingAllyText = 'Loading...';
+        this.animated = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.2.2", type: SkeletonComponent, isStandalone: true, selector: "et-skeleton", inputs: { loadingAllyText: "loadingAllyText", animated: ["animated", "animated", booleanAttribute] }, host: { properties: { "class.et-skeleton--animated": "this.animated" }, classAttribute: "et-skeleton" }, ngImport: i0, template: ` <span class="cdk-visually-hidden"> {{ loadingAllyText }} </span> <ng-content />`, isInline: true, styles: [":where(.et-skeleton){--et-skeleton-gradient: linear-gradient( 90deg, rgba(190, 190, 190, 0) 15%, rgba(129, 129, 129, .5) 37%, rgba(190, 190, 190, 0) 63% );--et-skeleton-animation-duration: 3s;--et-skeleton-animation-timing-function: var(--ease-3);display:block;cursor:progress}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-skeleton', template: ` <span class="cdk-visually-hidden"> {{ loadingAllyText }} </span> <ng-content />`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'et-skeleton',
+                    }, styles: [":where(.et-skeleton){--et-skeleton-gradient: linear-gradient( 90deg, rgba(190, 190, 190, 0) 15%, rgba(129, 129, 129, .5) 37%, rgba(190, 190, 190, 0) 63% );--et-skeleton-animation-duration: 3s;--et-skeleton-animation-timing-function: var(--ease-3);display:block;cursor:progress}\n"] }]
+        }], propDecorators: { loadingAllyText: [{
+                type: Input
+            }], animated: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }, {
+                type: HostBinding,
+                args: ['class.et-skeleton--animated']
+            }] } });
+
+class SkeletonItemComponent {
+    constructor() {
+        this.ariaHidden = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SkeletonItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.2", type: SkeletonItemComponent, isStandalone: true, selector: "et-skeleton-item", host: { properties: { "attr.aria-hidden": "this.ariaHidden" }, classAttribute: "et-skeleton-item" }, ngImport: i0, template: ``, isInline: true, styles: [".et-skeleton-item{display:block;overflow:hidden;position:relative}.et-skeleton--animated .et-skeleton-item:before{content:\"\";height:100%;left:0;position:absolute;right:0;top:0;transform:translate(-100%);z-index:1;background:var(--et-skeleton-gradient)}@media (prefers-reduced-motion: no-preference){.et-skeleton--animated .et-skeleton-item:before{animation:skeleton-loading var(--et-skeleton-animation-duration) infinite var(--et-skeleton-animation-timing-function)}}@keyframes skeleton-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SkeletonItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-skeleton-item', template: ``, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'et-skeleton-item',
+                    }, styles: [".et-skeleton-item{display:block;overflow:hidden;position:relative}.et-skeleton--animated .et-skeleton-item:before{content:\"\";height:100%;left:0;position:absolute;right:0;top:0;transform:translate(-100%);z-index:1;background:var(--et-skeleton-gradient)}@media (prefers-reduced-motion: no-preference){.et-skeleton--animated .et-skeleton-item:before{animation:skeleton-loading var(--et-skeleton-animation-duration) infinite var(--et-skeleton-animation-timing-function)}}@keyframes skeleton-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"] }]
+        }], propDecorators: { ariaHidden: [{
+                type: HostBinding,
+                args: ['attr.aria-hidden']
+            }] } });
+
+const SkeletonImports = [SkeletonComponent, SkeletonItemComponent];
+
 class BreadcrumbItemTemplateDirective {
     constructor() {
         this.templateRef = injectTemplateRef();
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: BreadcrumbItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.2", type: BreadcrumbItemTemplateDirective, isStandalone: true, selector: "[etBreadcrumbItemTemplate]", host: { classAttribute: "et-breadcrumb-item" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.2", type: BreadcrumbItemTemplateDirective, isStandalone: true, selector: "[etBreadcrumbItemTemplate]", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-breadcrumb-item" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: BreadcrumbItemTemplateDirective, decorators: [{
             type: Directive,
@@ -7000,7 +7043,13 @@ class BreadcrumbComponent {
       @for (itemTemplate of itemsToRender; track $index) {
         @if (itemTemplate.type === 'breadcrumb') {
           @if (itemTemplate.item) {
-            <ng-container *ngTemplateOutlet="itemTemplate.item.templateRef" />
+            @if (itemTemplate.item.loading()) {
+              <et-skeleton class="et-breadcrumb-item">
+                <et-skeleton-item />
+              </et-skeleton>
+            } @else {
+              <ng-container *ngTemplateOutlet="itemTemplate.item.templateRef" />
+            }
           }
         } @else {
           <button
@@ -7018,7 +7067,15 @@ class BreadcrumbComponent {
             <et-menu class="et-breadcrumb-menu">
               @for (item of itemTemplate.items; track $index) {
                 <et-menu-item>
-                  <ng-container *ngTemplateOutlet="item.templateRef" />
+                  @if (item) {
+                    @if (item.loading()) {
+                      <et-skeleton class="et-breadcrumb-item">
+                        <et-skeleton-item />
+                      </et-skeleton>
+                    } @else {
+                      <ng-container *ngTemplateOutlet="item.templateRef" />
+                    }
+                  }
                 </et-menu-item>
               }
             </et-menu>
@@ -7029,16 +7086,22 @@ class BreadcrumbComponent {
         }
       }
     }
-  `, isInline: true, styles: [":where(.et-breadcrumb){--_breadcrumb-gap: .2rem;--_breadcrumb-margin-block: 1.6rem;--_breadcrumb-margin-inline: unset;--_breadcrumb-divider-inline-size: .75rem;--_breadcrumb-divider-color: #494949;--_breadcrumb-item-color: #000;--_breadcrumb-item-last-child-color: #575454;--_breadcrumb-item-last-child-font-weight: bold;--_breadcrumb-menu-trigger-padding-block: .2rem;--_breadcrumb-menu-trigger-padding-inline: .4rem;--_breadcrumb-menu-trigger-border-radius: .2rem;--_breadcrumb-menu-trigger-background-color: transparent;--_breadcrumb-menu-trigger-color: #000}.et-breadcrumb{display:flex;align-items:center;gap:var(--_breadcrumb-gap);overflow-y:auto;margin-block:var(--_breadcrumb-margin-block);margin-inline:var(--_breadcrumb-margin-inline)}.et-breadcrumb-item{position:relative;text-decoration:none;color:rgb(var(--_breadcrumb-item-color));white-space:nowrap}.et-breadcrumb-item:last-child{font-weight:var(--_breadcrumb-item-last-child-font-weight);color:rgb(var(--_breadcrumb-item-last-child-color))}.et-breadcrumb-item.et-menu-trigger{padding-block:var(--_breadcrumb-menu-trigger-padding-block);padding-inline:var(--_breadcrumb-menu-trigger-padding-inline);border-radius:var(--_breadcrumb-menu-trigger-border-radius);background-color:rgb(var(--_breadcrumb-menu-trigger-background-color));color:rgb(var(--_breadcrumb-menu-trigger-color))}.et-breadcrumb-chevron{transform:rotate(90deg);inline-size:var(--_breadcrumb-divider-inline-size);color:rgb(var(--_breadcrumb-divider-color));flex:0 0 auto}:where(.et-breadcrumb-menu){--_breadcrumb-menu-padding-block: .4rem;--_breadcrumb-menu-item-padding-block: var(--_breadcrumb-menu-padding-block);--_breadcrumb-menu-item-padding-inline: .6rem;--_breadcrumb-item-last-child-color: #000;--_breadcrumb-item-last-child-font-weight: normal}.et-breadcrumb-menu{padding-block:var(--_breadcrumb-menu-padding-block)}.et-breadcrumb-menu .et-breadcrumb-item{display:block;padding-block:var(--_breadcrumb-menu-item-padding-block);padding-inline:var(--_breadcrumb-menu-item-padding-inline)}.et-breadcrumb-menu .et-breadcrumb-item:last-child{font-weight:var(--_breadcrumb-item-last-child-font-weight);color:rgb(var(--_breadcrumb-item-last-child-color))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MenuItemDirective, selector: "et-menu-item, [et-menu-item], [etMenuItem]", inputs: ["etMenuItemDisabled"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[etMenuTrigger]", inputs: ["etMenuTrigger", "mirrorWidth"] }, { kind: "component", type: MenuComponent, selector: "et-menu", inputs: ["id", "renderScrollableMasks", "renderScrollableButtons", "scrollableClass", "orientation"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [":where(.et-breadcrumb){--_breadcrumb-gap: .2rem;--_breadcrumb-margin-block: 1.6rem;--_breadcrumb-margin-inline: unset;--_breadcrumb-divider-inline-size: .75rem;--_breadcrumb-divider-color: #494949;--_breadcrumb-item-color: #000;--_breadcrumb-item-last-child-color: #575454;--_breadcrumb-item-last-child-font-weight: bold;--_breadcrumb-menu-trigger-padding-block: .2rem;--_breadcrumb-menu-trigger-padding-inline: .4rem;--_breadcrumb-menu-trigger-border-radius: .2rem;--_breadcrumb-menu-trigger-background-color: transparent;--_breadcrumb-menu-trigger-color: #000;--_breadcrumb-item-skeleton-bg-color: transparent;--_breadcrumb-item-skeleton-item-width: 6.4rem;--_breadcrumb-item-skeleton-item-height: 1.6rem;--_breadcrumb-item-skeleton-item-border-radius: 0}.et-breadcrumb{display:flex;align-items:center;gap:var(--_breadcrumb-gap);overflow-y:auto;margin-block:var(--_breadcrumb-margin-block);margin-inline:var(--_breadcrumb-margin-inline)}.et-breadcrumb-item{position:relative;text-decoration:none;color:rgb(var(--_breadcrumb-item-color));white-space:nowrap}.et-breadcrumb-item:last-child{font-weight:var(--_breadcrumb-item-last-child-font-weight);color:rgb(var(--_breadcrumb-item-last-child-color))}.et-breadcrumb-item.et-menu-trigger{padding-block:var(--_breadcrumb-menu-trigger-padding-block);padding-inline:var(--_breadcrumb-menu-trigger-padding-inline);border-radius:var(--_breadcrumb-menu-trigger-border-radius);background-color:rgb(var(--_breadcrumb-menu-trigger-background-color));color:rgb(var(--_breadcrumb-menu-trigger-color))}.et-breadcrumb-item.et-skeleton{background-color:var(--_breadcrumb-item-skeleton-bg-color)}.et-breadcrumb-item .et-skeleton-item{width:var(--_breadcrumb-item-skeleton-item-width);height:var(--_breadcrumb-item-skeleton-item-height);border-radius:var(--_breadcrumb-item-skeleton-item-border-radius)}.et-breadcrumb-chevron{transform:rotate(90deg);inline-size:var(--_breadcrumb-divider-inline-size);color:rgb(var(--_breadcrumb-divider-color));flex:0 0 auto}:where(.et-breadcrumb-menu){--_breadcrumb-menu-padding-block: .4rem;--_breadcrumb-menu-item-padding-block: var(--_breadcrumb-menu-padding-block);--_breadcrumb-menu-item-padding-inline: .6rem;--_breadcrumb-item-last-child-color: #000;--_breadcrumb-item-last-child-font-weight: normal;--_breadcrumb-item-skeleton-bg-color: transparent;--_breadcrumb-item-skeleton-item-width: 6.4rem;--_breadcrumb-item-skeleton-item-height: 1.6rem;--_breadcrumb-item-skeleton-item-border-radius: 0}.et-breadcrumb-menu{padding-block:var(--_breadcrumb-menu-padding-block)}.et-breadcrumb-menu .et-breadcrumb-item{display:block;padding-block:var(--_breadcrumb-menu-item-padding-block);padding-inline:var(--_breadcrumb-menu-item-padding-inline)}.et-breadcrumb-menu .et-breadcrumb-item:last-child{font-weight:var(--_breadcrumb-item-last-child-font-weight);color:rgb(var(--_breadcrumb-item-last-child-color))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MenuItemDirective, selector: "et-menu-item, [et-menu-item], [etMenuItem]", inputs: ["etMenuItemDisabled"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[etMenuTrigger]", inputs: ["etMenuTrigger", "mirrorWidth"] }, { kind: "component", type: MenuComponent, selector: "et-menu", inputs: ["id", "renderScrollableMasks", "renderScrollableButtons", "scrollableClass", "orientation"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }, { kind: "component", type: SkeletonComponent, selector: "et-skeleton", inputs: ["loadingAllyText", "animated"] }, { kind: "component", type: SkeletonItemComponent, selector: "et-skeleton-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-breadcrumb', imports: [NgTemplateOutlet, MenuImports, IconDirective], providers: [provideIcons(CHEVRON_ICON)], template: `
+            args: [{ selector: 'et-breadcrumb', imports: [NgTemplateOutlet, MenuImports, IconDirective, SkeletonImports], providers: [provideIcons(CHEVRON_ICON)], template: `
     @if (itemsToRender(); as itemsToRender) {
       @for (itemTemplate of itemsToRender; track $index) {
         @if (itemTemplate.type === 'breadcrumb') {
           @if (itemTemplate.item) {
-            <ng-container *ngTemplateOutlet="itemTemplate.item.templateRef" />
+            @if (itemTemplate.item.loading()) {
+              <et-skeleton class="et-breadcrumb-item">
+                <et-skeleton-item />
+              </et-skeleton>
+            } @else {
+              <ng-container *ngTemplateOutlet="itemTemplate.item.templateRef" />
+            }
           }
         } @else {
           <button
@@ -7056,7 +7119,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImpor
             <et-menu class="et-breadcrumb-menu">
               @for (item of itemTemplate.items; track $index) {
                 <et-menu-item>
-                  <ng-container *ngTemplateOutlet="item.templateRef" />
+                  @if (item) {
+                    @if (item.loading()) {
+                      <et-skeleton class="et-breadcrumb-item">
+                        <et-skeleton-item />
+                      </et-skeleton>
+                    } @else {
+                      <ng-container *ngTemplateOutlet="item.templateRef" />
+                    }
+                  }
                 </et-menu-item>
               }
             </et-menu>
@@ -7069,7 +7140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImpor
     }
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'et-breadcrumb',
-                    }, styles: [":where(.et-breadcrumb){--_breadcrumb-gap: .2rem;--_breadcrumb-margin-block: 1.6rem;--_breadcrumb-margin-inline: unset;--_breadcrumb-divider-inline-size: .75rem;--_breadcrumb-divider-color: #494949;--_breadcrumb-item-color: #000;--_breadcrumb-item-last-child-color: #575454;--_breadcrumb-item-last-child-font-weight: bold;--_breadcrumb-menu-trigger-padding-block: .2rem;--_breadcrumb-menu-trigger-padding-inline: .4rem;--_breadcrumb-menu-trigger-border-radius: .2rem;--_breadcrumb-menu-trigger-background-color: transparent;--_breadcrumb-menu-trigger-color: #000}.et-breadcrumb{display:flex;align-items:center;gap:var(--_breadcrumb-gap);overflow-y:auto;margin-block:var(--_breadcrumb-margin-block);margin-inline:var(--_breadcrumb-margin-inline)}.et-breadcrumb-item{position:relative;text-decoration:none;color:rgb(var(--_breadcrumb-item-color));white-space:nowrap}.et-breadcrumb-item:last-child{font-weight:var(--_breadcrumb-item-last-child-font-weight);color:rgb(var(--_breadcrumb-item-last-child-color))}.et-breadcrumb-item.et-menu-trigger{padding-block:var(--_breadcrumb-menu-trigger-padding-block);padding-inline:var(--_breadcrumb-menu-trigger-padding-inline);border-radius:var(--_breadcrumb-menu-trigger-border-radius);background-color:rgb(var(--_breadcrumb-menu-trigger-background-color));color:rgb(var(--_breadcrumb-menu-trigger-color))}.et-breadcrumb-chevron{transform:rotate(90deg);inline-size:var(--_breadcrumb-divider-inline-size);color:rgb(var(--_breadcrumb-divider-color));flex:0 0 auto}:where(.et-breadcrumb-menu){--_breadcrumb-menu-padding-block: .4rem;--_breadcrumb-menu-item-padding-block: var(--_breadcrumb-menu-padding-block);--_breadcrumb-menu-item-padding-inline: .6rem;--_breadcrumb-item-last-child-color: #000;--_breadcrumb-item-last-child-font-weight: normal}.et-breadcrumb-menu{padding-block:var(--_breadcrumb-menu-padding-block)}.et-breadcrumb-menu .et-breadcrumb-item{display:block;padding-block:var(--_breadcrumb-menu-item-padding-block);padding-inline:var(--_breadcrumb-menu-item-padding-inline)}.et-breadcrumb-menu .et-breadcrumb-item:last-child{font-weight:var(--_breadcrumb-item-last-child-font-weight);color:rgb(var(--_breadcrumb-item-last-child-color))}\n"] }]
+                    }, styles: [":where(.et-breadcrumb){--_breadcrumb-gap: .2rem;--_breadcrumb-margin-block: 1.6rem;--_breadcrumb-margin-inline: unset;--_breadcrumb-divider-inline-size: .75rem;--_breadcrumb-divider-color: #494949;--_breadcrumb-item-color: #000;--_breadcrumb-item-last-child-color: #575454;--_breadcrumb-item-last-child-font-weight: bold;--_breadcrumb-menu-trigger-padding-block: .2rem;--_breadcrumb-menu-trigger-padding-inline: .4rem;--_breadcrumb-menu-trigger-border-radius: .2rem;--_breadcrumb-menu-trigger-background-color: transparent;--_breadcrumb-menu-trigger-color: #000;--_breadcrumb-item-skeleton-bg-color: transparent;--_breadcrumb-item-skeleton-item-width: 6.4rem;--_breadcrumb-item-skeleton-item-height: 1.6rem;--_breadcrumb-item-skeleton-item-border-radius: 0}.et-breadcrumb{display:flex;align-items:center;gap:var(--_breadcrumb-gap);overflow-y:auto;margin-block:var(--_breadcrumb-margin-block);margin-inline:var(--_breadcrumb-margin-inline)}.et-breadcrumb-item{position:relative;text-decoration:none;color:rgb(var(--_breadcrumb-item-color));white-space:nowrap}.et-breadcrumb-item:last-child{font-weight:var(--_breadcrumb-item-last-child-font-weight);color:rgb(var(--_breadcrumb-item-last-child-color))}.et-breadcrumb-item.et-menu-trigger{padding-block:var(--_breadcrumb-menu-trigger-padding-block);padding-inline:var(--_breadcrumb-menu-trigger-padding-inline);border-radius:var(--_breadcrumb-menu-trigger-border-radius);background-color:rgb(var(--_breadcrumb-menu-trigger-background-color));color:rgb(var(--_breadcrumb-menu-trigger-color))}.et-breadcrumb-item.et-skeleton{background-color:var(--_breadcrumb-item-skeleton-bg-color)}.et-breadcrumb-item .et-skeleton-item{width:var(--_breadcrumb-item-skeleton-item-width);height:var(--_breadcrumb-item-skeleton-item-height);border-radius:var(--_breadcrumb-item-skeleton-item-border-radius)}.et-breadcrumb-chevron{transform:rotate(90deg);inline-size:var(--_breadcrumb-divider-inline-size);color:rgb(var(--_breadcrumb-divider-color));flex:0 0 auto}:where(.et-breadcrumb-menu){--_breadcrumb-menu-padding-block: .4rem;--_breadcrumb-menu-item-padding-block: var(--_breadcrumb-menu-padding-block);--_breadcrumb-menu-item-padding-inline: .6rem;--_breadcrumb-item-last-child-color: #000;--_breadcrumb-item-last-child-font-weight: normal;--_breadcrumb-item-skeleton-bg-color: transparent;--_breadcrumb-item-skeleton-item-width: 6.4rem;--_breadcrumb-item-skeleton-item-height: 1.6rem;--_breadcrumb-item-skeleton-item-border-radius: 0}.et-breadcrumb-menu{padding-block:var(--_breadcrumb-menu-padding-block)}.et-breadcrumb-menu .et-breadcrumb-item{display:block;padding-block:var(--_breadcrumb-menu-item-padding-block);padding-inline:var(--_breadcrumb-menu-item-padding-inline)}.et-breadcrumb-menu .et-breadcrumb-item:last-child{font-weight:var(--_breadcrumb-item-last-child-font-weight);color:rgb(var(--_breadcrumb-item-last-child-color))}\n"] }]
         }], ctorParameters: () => [] });
 
 const createProvider = (factory, options) => {
@@ -18729,48 +18800,6 @@ const ScrollableImports = [
     ScrollablePlaceholderComponent,
 ];
 
-class SkeletonComponent {
-    constructor() {
-        this.loadingAllyText = 'Loading...';
-        this.animated = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.2.2", type: SkeletonComponent, isStandalone: true, selector: "et-skeleton", inputs: { loadingAllyText: "loadingAllyText", animated: ["animated", "animated", booleanAttribute] }, host: { properties: { "class.et-skeleton--animated": "this.animated" }, classAttribute: "et-skeleton" }, ngImport: i0, template: ` <span class="cdk-visually-hidden"> {{ loadingAllyText }} </span> <ng-content />`, isInline: true, styles: [":where(.et-skeleton){--et-skeleton-gradient: linear-gradient( 90deg, rgba(190, 190, 190, 0) 15%, rgba(129, 129, 129, .5) 37%, rgba(190, 190, 190, 0) 63% );--et-skeleton-animation-duration: 3s;--et-skeleton-animation-timing-function: var(--ease-3);display:block;cursor:progress}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SkeletonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'et-skeleton', template: ` <span class="cdk-visually-hidden"> {{ loadingAllyText }} </span> <ng-content />`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'et-skeleton',
-                    }, styles: [":where(.et-skeleton){--et-skeleton-gradient: linear-gradient( 90deg, rgba(190, 190, 190, 0) 15%, rgba(129, 129, 129, .5) 37%, rgba(190, 190, 190, 0) 63% );--et-skeleton-animation-duration: 3s;--et-skeleton-animation-timing-function: var(--ease-3);display:block;cursor:progress}\n"] }]
-        }], propDecorators: { loadingAllyText: [{
-                type: Input
-            }], animated: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }, {
-                type: HostBinding,
-                args: ['class.et-skeleton--animated']
-            }] } });
-
-class SkeletonItemComponent {
-    constructor() {
-        this.ariaHidden = true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SkeletonItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.2", type: SkeletonItemComponent, isStandalone: true, selector: "et-skeleton-item", host: { properties: { "attr.aria-hidden": "this.ariaHidden" }, classAttribute: "et-skeleton-item" }, ngImport: i0, template: ``, isInline: true, styles: [".et-skeleton-item{display:block;overflow:hidden;position:relative}.et-skeleton--animated .et-skeleton-item:before{content:\"\";height:100%;left:0;position:absolute;right:0;top:0;transform:translate(-100%);z-index:1;background:var(--et-skeleton-gradient)}@media (prefers-reduced-motion: no-preference){.et-skeleton--animated .et-skeleton-item:before{animation:skeleton-loading var(--et-skeleton-animation-duration) infinite var(--et-skeleton-animation-timing-function)}}@keyframes skeleton-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SkeletonItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'et-skeleton-item', template: ``, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'et-skeleton-item',
-                    }, styles: [".et-skeleton-item{display:block;overflow:hidden;position:relative}.et-skeleton--animated .et-skeleton-item:before{content:\"\";height:100%;left:0;position:absolute;right:0;top:0;transform:translate(-100%);z-index:1;background:var(--et-skeleton-gradient)}@media (prefers-reduced-motion: no-preference){.et-skeleton--animated .et-skeleton-item:before{animation:skeleton-loading var(--et-skeleton-animation-duration) infinite var(--et-skeleton-animation-timing-function)}}@keyframes skeleton-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"] }]
-        }], propDecorators: { ariaHidden: [{
-                type: HostBinding,
-                args: ['attr.aria-hidden']
-            }] } });
-
-const SkeletonImports = [SkeletonComponent, SkeletonItemComponent];
-
 const SORT_HEADER_COLUMN_DEF = new InjectionToken('SortHeaderColumnDef');
 class ColumnDefDirective extends CdkColumnDef {
     get name() {