@ethlete/cdk 4.65.0 → 4.67.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/fesm2022/ethlete-cdk.mjs +97 -56
  3. package/fesm2022/ethlete-cdk.mjs.map +1 -1
  4. package/index.d.ts +8 -5
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @ethlete/cdk
2
2
 
3
+ ## 4.67.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#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
8
+
9
+ ## 4.66.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`798686e`](https://github.com/ethlete-io/ethdk/commit/798686e8e36209438be073f0a7b7116e7394f263) Thanks [@TomTomB](https://github.com/TomTomB)! - Add userInteraction output to select and combobox
14
+
3
15
  ## 4.65.0
4
16
 
5
17
  ### Minor Changes
package/fesm2022/ethlete-cdk.mjs CHANGED
@@ -6924,12 +6924,55 @@ const MenuImports = [
6924
6924
  MenuSearchTemplateDirective,
6925
6925
  ];
6926
6926
 
6927
+ class SkeletonComponent {
6928
+ constructor() {
6929
+ this.loadingAllyText = 'Loading...';
6930
+ this.animated = true;
6931
+ }
6932
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6933
+ 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 }); }
6934
+ }
6935
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SkeletonComponent, decorators: [{
6936
+ type: Component,
6937
+ args: [{ selector: 'et-skeleton', template: ` <span class="cdk-visually-hidden"> {{ loadingAllyText }} </span> <ng-content />`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
6938
+ class: 'et-skeleton',
6939
+ }, 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"] }]
6940
+ }], propDecorators: { loadingAllyText: [{
6941
+ type: Input
6942
+ }], animated: [{
6943
+ type: Input,
6944
+ args: [{ transform: booleanAttribute }]
6945
+ }, {
6946
+ type: HostBinding,
6947
+ args: ['class.et-skeleton--animated']
6948
+ }] } });
6949
+
6950
+ class SkeletonItemComponent {
6951
+ constructor() {
6952
+ this.ariaHidden = true;
6953
+ }
6954
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SkeletonItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6955
+ 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 }); }
6956
+ }
6957
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SkeletonItemComponent, decorators: [{
6958
+ type: Component,
6959
+ args: [{ selector: 'et-skeleton-item', template: ``, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
6960
+ class: 'et-skeleton-item',
6961
+ }, 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"] }]
6962
+ }], propDecorators: { ariaHidden: [{
6963
+ type: HostBinding,
6964
+ args: ['attr.aria-hidden']
6965
+ }] } });
6966
+
6967
+ const SkeletonImports = [SkeletonComponent, SkeletonItemComponent];
6968
+
6927
6969
  class BreadcrumbItemTemplateDirective {
6928
6970
  constructor() {
6929
6971
  this.templateRef = injectTemplateRef();
6972
+ this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
6930
6973
  }
6931
6974
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: BreadcrumbItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
6932
- 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 }); }
6975
+ 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 }); }
6933
6976
  }
6934
6977
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: BreadcrumbItemTemplateDirective, decorators: [{
6935
6978
  type: Directive,
@@ -7000,7 +7043,13 @@ class BreadcrumbComponent {
7000
7043
  @for (itemTemplate of itemsToRender; track $index) {
7001
7044
  @if (itemTemplate.type === 'breadcrumb') {
7002
7045
  @if (itemTemplate.item) {
7003
- <ng-container *ngTemplateOutlet="itemTemplate.item.templateRef" />
7046
+ @if (itemTemplate.item.loading()) {
7047
+ <et-skeleton class="et-breadcrumb-item">
7048
+ <et-skeleton-item />
7049
+ </et-skeleton>
7050
+ } @else {
7051
+ <ng-container *ngTemplateOutlet="itemTemplate.item.templateRef" />
7052
+ }
7004
7053
  }
7005
7054
  } @else {
7006
7055
  <button
@@ -7018,7 +7067,15 @@ class BreadcrumbComponent {
7018
7067
  <et-menu class="et-breadcrumb-menu">
7019
7068
  @for (item of itemTemplate.items; track $index) {
7020
7069
  <et-menu-item>
7021
- <ng-container *ngTemplateOutlet="item.templateRef" />
7070
+ @if (item) {
7071
+ @if (item.loading()) {
7072
+ <et-skeleton class="et-breadcrumb-item">
7073
+ <et-skeleton-item />
7074
+ </et-skeleton>
7075
+ } @else {
7076
+ <ng-container *ngTemplateOutlet="item.templateRef" />
7077
+ }
7078
+ }
7022
7079
  </et-menu-item>
7023
7080
  }
7024
7081
  </et-menu>
@@ -7029,16 +7086,22 @@ class BreadcrumbComponent {
7029
7086
  }
7030
7087
  }
7031
7088
  }
7032
- `, 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 }); }
7089
+ `, 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 }); }
7033
7090
  }
7034
7091
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: BreadcrumbComponent, decorators: [{
7035
7092
  type: Component,
7036
- args: [{ selector: 'et-breadcrumb', imports: [NgTemplateOutlet, MenuImports, IconDirective], providers: [provideIcons(CHEVRON_ICON)], template: `
7093
+ args: [{ selector: 'et-breadcrumb', imports: [NgTemplateOutlet, MenuImports, IconDirective, SkeletonImports], providers: [provideIcons(CHEVRON_ICON)], template: `
7037
7094
  @if (itemsToRender(); as itemsToRender) {
7038
7095
  @for (itemTemplate of itemsToRender; track $index) {
7039
7096
  @if (itemTemplate.type === 'breadcrumb') {
7040
7097
  @if (itemTemplate.item) {
7041
- <ng-container *ngTemplateOutlet="itemTemplate.item.templateRef" />
7098
+ @if (itemTemplate.item.loading()) {
7099
+ <et-skeleton class="et-breadcrumb-item">
7100
+ <et-skeleton-item />
7101
+ </et-skeleton>
7102
+ } @else {
7103
+ <ng-container *ngTemplateOutlet="itemTemplate.item.templateRef" />
7104
+ }
7042
7105
  }
7043
7106
  } @else {
7044
7107
  <button
@@ -7056,7 +7119,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImpor
7056
7119
  <et-menu class="et-breadcrumb-menu">
7057
7120
  @for (item of itemTemplate.items; track $index) {
7058
7121
  <et-menu-item>
7059
- <ng-container *ngTemplateOutlet="item.templateRef" />
7122
+ @if (item) {
7123
+ @if (item.loading()) {
7124
+ <et-skeleton class="et-breadcrumb-item">
7125
+ <et-skeleton-item />
7126
+ </et-skeleton>
7127
+ } @else {
7128
+ <ng-container *ngTemplateOutlet="item.templateRef" />
7129
+ }
7130
+ }
7060
7131
  </et-menu-item>
7061
7132
  }
7062
7133
  </et-menu>
@@ -7069,7 +7140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImpor
7069
7140
  }
7070
7141
  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
7071
7142
  class: 'et-breadcrumb',
7072
- }, 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"] }]
7143
+ }, 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"] }]
7073
7144
  }], ctorParameters: () => [] });
7074
7145
 
7075
7146
  const createProvider = (factory, options) => {
@@ -10047,6 +10118,7 @@ class ComboboxDirective {
10047
10118
  //#region Outputs
10048
10119
  this.filterChange = new EventEmitter();
10049
10120
  this.optionClick = new EventEmitter();
10121
+ this.userInteraction = new EventEmitter();
10050
10122
  //#endregion
10051
10123
  //#region Members
10052
10124
  this._shouldIgnoreNextBlurEvent = false;
@@ -10397,7 +10469,9 @@ class ComboboxDirective {
10397
10469
  if (type === 'toggle') {
10398
10470
  this._selectionModel.toggleSelectedOption(option);
10399
10471
  }
10472
+ this.optionClick.emit(option);
10400
10473
  }
10474
+ this.userInteraction.emit();
10401
10475
  }
10402
10476
  }
10403
10477
  _initDispatchFilterChanges() {
@@ -10475,7 +10549,7 @@ class ComboboxDirective {
10475
10549
  .subscribe();
10476
10550
  }
10477
10551
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: ComboboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
10478
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.2", type: ComboboxDirective, isStandalone: true, inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: false, isRequired: false, transformFunction: null }, filterInternal: { classPropertyName: "filterInternal", publicName: "filterInternal", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, bodyEmptyText: { classPropertyName: "bodyEmptyText", publicName: "bodyEmptyText", isSignal: false, isRequired: false, transformFunction: null }, bodyMoreItemsHintText: { classPropertyName: "bodyMoreItemsHintText", publicName: "bodyMoreItemsHintText", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: false, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: false, isRequired: false, transformFunction: null }, bindKey: { classPropertyName: "bindKey", publicName: "bindKey", isSignal: false, isRequired: false, transformFunction: null }, bindDisabled: { classPropertyName: "bindDisabled", publicName: "bindDisabled", isSignal: false, isRequired: false, transformFunction: null }, allowCustomValues: { classPropertyName: "allowCustomValues", publicName: "allowCustomValues", isSignal: false, isRequired: false, transformFunction: null }, showBodyMoreItemsHint: { classPropertyName: "showBodyMoreItemsHint", publicName: "showBodyMoreItemsHint", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, optionComponent: { classPropertyName: "optionComponent", publicName: "optionComponent", isSignal: true, isRequired: false, transformFunction: null }, optionComponentInputs: { classPropertyName: "optionComponentInputs", publicName: "optionComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionComponent: { classPropertyName: "selectedOptionComponent", publicName: "selectedOptionComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyErrorComponentInputs: { classPropertyName: "bodyErrorComponentInputs", publicName: "bodyErrorComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyErrorComponent: { classPropertyName: "bodyErrorComponent", publicName: "bodyErrorComponent", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionComponentInputs: { classPropertyName: "selectedOptionComponentInputs", publicName: "selectedOptionComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyLoadingComponent: { classPropertyName: "bodyLoadingComponent", publicName: "bodyLoadingComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyLoadingComponentInputs: { classPropertyName: "bodyLoadingComponentInputs", publicName: "bodyLoadingComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyEmptyComponent: { classPropertyName: "bodyEmptyComponent", publicName: "bodyEmptyComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyEmptyComponentInputs: { classPropertyName: "bodyEmptyComponentInputs", publicName: "bodyEmptyComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyMoreItemsHintComponent: { classPropertyName: "bodyMoreItemsHintComponent", publicName: "bodyMoreItemsHintComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyMoreItemsHintComponentInputs: { classPropertyName: "bodyMoreItemsHintComponentInputs", publicName: "bodyMoreItemsHintComponentInputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", optionClick: "optionClick" }, providers: [
10552
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.2", type: ComboboxDirective, isStandalone: true, inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: true, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: false, isRequired: false, transformFunction: null }, filterInternal: { classPropertyName: "filterInternal", publicName: "filterInternal", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, bodyEmptyText: { classPropertyName: "bodyEmptyText", publicName: "bodyEmptyText", isSignal: false, isRequired: false, transformFunction: null }, bodyMoreItemsHintText: { classPropertyName: "bodyMoreItemsHintText", publicName: "bodyMoreItemsHintText", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: false, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: false, isRequired: false, transformFunction: null }, bindKey: { classPropertyName: "bindKey", publicName: "bindKey", isSignal: false, isRequired: false, transformFunction: null }, bindDisabled: { classPropertyName: "bindDisabled", publicName: "bindDisabled", isSignal: false, isRequired: false, transformFunction: null }, allowCustomValues: { classPropertyName: "allowCustomValues", publicName: "allowCustomValues", isSignal: false, isRequired: false, transformFunction: null }, showBodyMoreItemsHint: { classPropertyName: "showBodyMoreItemsHint", publicName: "showBodyMoreItemsHint", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, optionComponent: { classPropertyName: "optionComponent", publicName: "optionComponent", isSignal: true, isRequired: false, transformFunction: null }, optionComponentInputs: { classPropertyName: "optionComponentInputs", publicName: "optionComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionComponent: { classPropertyName: "selectedOptionComponent", publicName: "selectedOptionComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyErrorComponentInputs: { classPropertyName: "bodyErrorComponentInputs", publicName: "bodyErrorComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyErrorComponent: { classPropertyName: "bodyErrorComponent", publicName: "bodyErrorComponent", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionComponentInputs: { classPropertyName: "selectedOptionComponentInputs", publicName: "selectedOptionComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyLoadingComponent: { classPropertyName: "bodyLoadingComponent", publicName: "bodyLoadingComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyLoadingComponentInputs: { classPropertyName: "bodyLoadingComponentInputs", publicName: "bodyLoadingComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyEmptyComponent: { classPropertyName: "bodyEmptyComponent", publicName: "bodyEmptyComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyEmptyComponentInputs: { classPropertyName: "bodyEmptyComponentInputs", publicName: "bodyEmptyComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyMoreItemsHintComponent: { classPropertyName: "bodyMoreItemsHintComponent", publicName: "bodyMoreItemsHintComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyMoreItemsHintComponentInputs: { classPropertyName: "bodyMoreItemsHintComponentInputs", publicName: "bodyMoreItemsHintComponentInputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", optionClick: "optionClick", userInteraction: "userInteraction" }, providers: [
10479
10553
  {
10480
10554
  provide: COMBOBOX_TOKEN,
10481
10555
  useExisting: ComboboxDirective,
@@ -10531,6 +10605,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImpor
10531
10605
  type: Output
10532
10606
  }], optionClick: [{
10533
10607
  type: Output
10608
+ }], userInteraction: [{
10609
+ type: Output
10534
10610
  }], optionTemplate: [{
10535
10611
  type: ContentChild,
10536
10612
  args: [COMBOBOX_OPTION_TEMPLATE_TOKEN, { read: TemplateRef }]
@@ -10584,6 +10660,7 @@ class ComboboxOptionComponent {
10584
10660
  this.combobox.writeValueFromOption(this.option());
10585
10661
  this.combobox.focus();
10586
10662
  this.combobox.optionClick.emit(this.option());
10663
+ this.combobox.userInteraction.emit();
10587
10664
  }
10588
10665
  _ignoreBlur() {
10589
10666
  this.combobox._ignoreNextBlurEvent();
@@ -10683,7 +10760,7 @@ class ComboboxComponent extends DecoratedInputBase {
10683
10760
  this.combobox.setBodyComponent(ComboboxBodyComponent);
10684
10761
  }
10685
10762
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10686
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.2", type: ComboboxComponent, isStandalone: true, selector: "et-combobox", host: { listeners: { "click": "combobox.selectInputAndOpen()" }, classAttribute: "et-combobox" }, providers: [provideIcons(CHEVRON_ICON, TIMES_ICON)], usesInheritance: true, hostDirectives: [{ directive: i1.AnimatedOverlayDirective }, { directive: OverlayCloseBlockerDirective }, { directive: InputDirective, inputs: ["placeholder", "placeholder"] }, { directive: ComboboxDirective, inputs: ["options", "options", "initialValue", "initialValue", "filterInternal", "filterInternal", "loading", "loading", "error", "error", "emptyText", "emptyText", "placeholder", "placeholder", "multiple", "multiple", "bindLabel", "bindLabel", "bindValue", "bindValue", "bindDisabled", "bindDisabled", "allowCustomValues", "allowCustomValues", "selectedOptionComponent", "selectedOptionComponent", "optionComponent", "optionComponent", "bodyErrorComponent", "bodyErrorComponent", "bodyLoadingComponent", "bodyLoadingComponent", "bodyEmptyComponent", "bodyEmptyComponent", "bodyMoreItemsHintComponent", "bodyMoreItemsHintComponent", "showBodyMoreItemsHint", "showBodyMoreItemsHint", "bodyEmptyText", "bodyEmptyText", "bodyMoreItemsHintText", "bodyMoreItemsHintText", "optionComponentInputs", "optionComponentInputs", "selectedOptionComponentInputs", "selectedOptionComponentInputs", "bodyErrorComponentInputs", "bodyErrorComponentInputs", "bodyLoadingComponentInputs", "bodyLoadingComponentInputs", "bodyEmptyComponentInputs", "bodyEmptyComponentInputs", "bodyMoreItemsHintComponentInputs", "bodyMoreItemsHintComponentInputs"], outputs: ["filterChange", "filterChange", "optionClick", "optionClick"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div>\n @if (combobox.multiple$ | async) {\n <div class=\"et-combobox-selected-options\">\n @for (item of combobox.selectedOptions$ | async; track combobox.trackByOptionKeyFn($index, item)) {\n <div class=\"et-combobox-selected-option\" aria-hidden=\"true\">\n @if (combobox.customSelectedOptionTpl$ | async; as customSelectedOptionTpl) {\n <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n } @else {\n @if (combobox.selectedOptionComponent(); as comp) {\n <ng-container\n *ngComponentOutlet=\"comp; inputs: combobox.combineSelectedOptionWithComponentInputs(item)\"\n />\n } @else {\n {{ combobox.getOptionLabel(item) | async }}\n }\n }\n\n <button\n [disabled]=\"input.disabled\"\n (click)=\"combobox.removeSelectedOption(item); $event.stopPropagation(); combobox.focus()\"\n class=\"et-combobox-selected-option-remove\"\n tabindex=\"-1\"\n type=\"button\"\n >\n x\n </button>\n </div>\n }\n <div class=\"et-combobox-muliple-input\">\n <ng-container *ngTemplateOutlet=\"inputTpl\" />\n </div>\n </div>\n }\n\n <ng-template #inputTpl>\n <input\n [disabled]=\"input.disabled\"\n [attr.id]=\"input.id\"\n [attr.aria-required]=\"(input.required$ | async) || null\"\n [attr.aria-disabled]=\"(input.disabled$ | async) || null\"\n [attr.aria-invalid]=\"(input.invalid$ | async) || null\"\n [attr.aria-expanded]=\"combobox.isOpen$ | async\"\n [attr.aria-describedby]=\"input.describedBy$ | async\"\n [attr.placeholder]=\"input.placeholder || null\"\n [attr.aria-activedescendant]=\"combobox.activeOptionId$ | async\"\n [attr.aria-controls]=\"(combobox.selectBodyId$ | async) || null\"\n [attr.aria-owns]=\"(combobox.selectBodyId$ | async) || null\"\n (keydown)=\"combobox._processKeydownEvent($event)\"\n (keyup)=\"combobox._processKeyupEvent()\"\n (click)=\"combobox.open()\"\n (blur)=\"combobox._handleBlurEvent()\"\n (input)=\"combobox._processInputEvent($event)\"\n class=\"et-combobox-wrapper\"\n autocomplete=\"off\"\n aria-haspopup=\"listbox\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n type=\"text\"\n value=\"{{ combobox.currentFilter }}\"\n etNativeInputRef\n />\n </ng-template>\n\n @if ((combobox.multiple$ | async) === false) {\n <ng-container *ngTemplateOutlet=\"inputTpl\" />\n }\n\n @if (\n ((combobox.multiple$ | async) === false && combobox.currentFilter) || (combobox.selectedOptions$ | async)?.length\n ) {\n <button\n [disabled]=\"input.disabled\"\n (click)=\"combobox.clearValue(); $event.stopPropagation(); combobox.focus()\"\n class=\"et-combobox-clear\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i class=\"et-combobox-clear-icon\" etIcon=\"et-times\"></i>\n </button>\n }\n <i class=\"et-combobox-chevron\" etIcon=\"et-chevron\"></i>\n</div>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template>\n <ng-content />\n</ng-template>\n", styles: [".et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-enter-from,.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-leave-to{opacity:0;transform:scaleY(0)}.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-enter-active{transition:transform 125ms var(--ease-out-5),opacity 125ms var(--ease-out-5)}.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-leave-active{transition:transform 50ms var(--ease-in-5),opacity 50ms var(--ease-in-5)}.et-combobox-body.et-with-default-animation[et-floating-placement^=top] .et-combobox-body-container{transform-origin:bottom}.et-combobox-body.et-with-default-animation[et-floating-placement^=bottom] .et-combobox-body-container{transform-origin:top}.et-combobox-body-container{display:block;background-color:#3d3d3d;color:#fff;max-height:min(200px,var(--et-floating-max-height, 200px));overflow:auto}.et-combobox-body{width:100%;display:grid;transform:var(--et-floating-translate);will-change:transform}.et-combobox-option{display:block}:where(.et-combobox-option--active){background-color:#1e1e1e}.et-combobox{display:block;border:1px solid #ccc;padding:15px;position:relative}.et-combobox-chevron{transform:rotate(180deg);display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:15px;inset-block-start:7px}:where(.et-combobox-clear){display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:40px;inset-block-start:7px;background-color:transparent;border:none;color:#fff;padding:0}:where(.et-combobox-clear) .et-times-icon{display:block;inline-size:15px;block-size:15px}\n"], dependencies: [{ kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
10763
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.2", type: ComboboxComponent, isStandalone: true, selector: "et-combobox", host: { listeners: { "click": "combobox.selectInputAndOpen()" }, classAttribute: "et-combobox" }, providers: [provideIcons(CHEVRON_ICON, TIMES_ICON)], usesInheritance: true, hostDirectives: [{ directive: i1.AnimatedOverlayDirective }, { directive: OverlayCloseBlockerDirective }, { directive: InputDirective, inputs: ["placeholder", "placeholder"] }, { directive: ComboboxDirective, inputs: ["options", "options", "initialValue", "initialValue", "filterInternal", "filterInternal", "loading", "loading", "error", "error", "emptyText", "emptyText", "placeholder", "placeholder", "multiple", "multiple", "bindLabel", "bindLabel", "bindValue", "bindValue", "bindDisabled", "bindDisabled", "allowCustomValues", "allowCustomValues", "selectedOptionComponent", "selectedOptionComponent", "optionComponent", "optionComponent", "bodyErrorComponent", "bodyErrorComponent", "bodyLoadingComponent", "bodyLoadingComponent", "bodyEmptyComponent", "bodyEmptyComponent", "bodyMoreItemsHintComponent", "bodyMoreItemsHintComponent", "showBodyMoreItemsHint", "showBodyMoreItemsHint", "bodyEmptyText", "bodyEmptyText", "bodyMoreItemsHintText", "bodyMoreItemsHintText", "optionComponentInputs", "optionComponentInputs", "selectedOptionComponentInputs", "selectedOptionComponentInputs", "bodyErrorComponentInputs", "bodyErrorComponentInputs", "bodyLoadingComponentInputs", "bodyLoadingComponentInputs", "bodyEmptyComponentInputs", "bodyEmptyComponentInputs", "bodyMoreItemsHintComponentInputs", "bodyMoreItemsHintComponentInputs"], outputs: ["filterChange", "filterChange", "optionClick", "optionClick", "userInteraction", "userInteraction"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div>\n @if (combobox.multiple$ | async) {\n <div class=\"et-combobox-selected-options\">\n @for (item of combobox.selectedOptions$ | async; track combobox.trackByOptionKeyFn($index, item)) {\n <div class=\"et-combobox-selected-option\" aria-hidden=\"true\">\n @if (combobox.customSelectedOptionTpl$ | async; as customSelectedOptionTpl) {\n <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n } @else {\n @if (combobox.selectedOptionComponent(); as comp) {\n <ng-container\n *ngComponentOutlet=\"comp; inputs: combobox.combineSelectedOptionWithComponentInputs(item)\"\n />\n } @else {\n {{ combobox.getOptionLabel(item) | async }}\n }\n }\n\n <button\n [disabled]=\"input.disabled\"\n (click)=\"combobox.removeSelectedOption(item); $event.stopPropagation(); combobox.focus()\"\n class=\"et-combobox-selected-option-remove\"\n tabindex=\"-1\"\n type=\"button\"\n >\n x\n </button>\n </div>\n }\n <div class=\"et-combobox-muliple-input\">\n <ng-container *ngTemplateOutlet=\"inputTpl\" />\n </div>\n </div>\n }\n\n <ng-template #inputTpl>\n <input\n [disabled]=\"input.disabled\"\n [attr.id]=\"input.id\"\n [attr.aria-required]=\"(input.required$ | async) || null\"\n [attr.aria-disabled]=\"(input.disabled$ | async) || null\"\n [attr.aria-invalid]=\"(input.invalid$ | async) || null\"\n [attr.aria-expanded]=\"combobox.isOpen$ | async\"\n [attr.aria-describedby]=\"input.describedBy$ | async\"\n [attr.placeholder]=\"input.placeholder || null\"\n [attr.aria-activedescendant]=\"combobox.activeOptionId$ | async\"\n [attr.aria-controls]=\"(combobox.selectBodyId$ | async) || null\"\n [attr.aria-owns]=\"(combobox.selectBodyId$ | async) || null\"\n (keydown)=\"combobox._processKeydownEvent($event)\"\n (keyup)=\"combobox._processKeyupEvent()\"\n (click)=\"combobox.open()\"\n (blur)=\"combobox._handleBlurEvent()\"\n (input)=\"combobox._processInputEvent($event)\"\n class=\"et-combobox-wrapper\"\n autocomplete=\"off\"\n aria-haspopup=\"listbox\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n type=\"text\"\n value=\"{{ combobox.currentFilter }}\"\n etNativeInputRef\n />\n </ng-template>\n\n @if ((combobox.multiple$ | async) === false) {\n <ng-container *ngTemplateOutlet=\"inputTpl\" />\n }\n\n @if (\n ((combobox.multiple$ | async) === false && combobox.currentFilter) || (combobox.selectedOptions$ | async)?.length\n ) {\n <button\n [disabled]=\"input.disabled\"\n (click)=\"combobox.clearValue(); $event.stopPropagation(); combobox.focus()\"\n class=\"et-combobox-clear\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i class=\"et-combobox-clear-icon\" etIcon=\"et-times\"></i>\n </button>\n }\n <i class=\"et-combobox-chevron\" etIcon=\"et-chevron\"></i>\n</div>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template>\n <ng-content />\n</ng-template>\n", styles: [".et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-enter-from,.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-leave-to{opacity:0;transform:scaleY(0)}.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-enter-active{transition:transform 125ms var(--ease-out-5),opacity 125ms var(--ease-out-5)}.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-leave-active{transition:transform 50ms var(--ease-in-5),opacity 50ms var(--ease-in-5)}.et-combobox-body.et-with-default-animation[et-floating-placement^=top] .et-combobox-body-container{transform-origin:bottom}.et-combobox-body.et-with-default-animation[et-floating-placement^=bottom] .et-combobox-body-container{transform-origin:top}.et-combobox-body-container{display:block;background-color:#3d3d3d;color:#fff;max-height:min(200px,var(--et-floating-max-height, 200px));overflow:auto}.et-combobox-body{width:100%;display:grid;transform:var(--et-floating-translate);will-change:transform}.et-combobox-option{display:block}:where(.et-combobox-option--active){background-color:#1e1e1e}.et-combobox{display:block;border:1px solid #ccc;padding:15px;position:relative}.et-combobox-chevron{transform:rotate(180deg);display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:15px;inset-block-start:7px}:where(.et-combobox-clear){display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:40px;inset-block-start:7px;background-color:transparent;border:none;color:#fff;padding:0}:where(.et-combobox-clear) .et-times-icon{display:block;inline-size:15px;block-size:15px}\n"], dependencies: [{ kind: "directive", type: NativeInputRefDirective, selector: "input[etNativeInputRef], textarea[etNativeInputRef], select[etNativeInputRef], button[etNativeInputRef]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
10687
10764
  }
10688
10765
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: ComboboxComponent, decorators: [{
10689
10766
  type: Component,
@@ -10725,7 +10802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImpor
10725
10802
  'bodyEmptyComponentInputs',
10726
10803
  'bodyMoreItemsHintComponentInputs',
10727
10804
  ],
10728
- outputs: ['filterChange', 'optionClick'],
10805
+ outputs: ['filterChange', 'optionClick', 'userInteraction'],
10729
10806
  },
10730
10807
  ], providers: [provideIcons(CHEVRON_ICON, TIMES_ICON)], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div>\n @if (combobox.multiple$ | async) {\n <div class=\"et-combobox-selected-options\">\n @for (item of combobox.selectedOptions$ | async; track combobox.trackByOptionKeyFn($index, item)) {\n <div class=\"et-combobox-selected-option\" aria-hidden=\"true\">\n @if (combobox.customSelectedOptionTpl$ | async; as customSelectedOptionTpl) {\n <ng-container *ngTemplateOutlet=\"customSelectedOptionTpl; context: { option: item }\" />\n } @else {\n @if (combobox.selectedOptionComponent(); as comp) {\n <ng-container\n *ngComponentOutlet=\"comp; inputs: combobox.combineSelectedOptionWithComponentInputs(item)\"\n />\n } @else {\n {{ combobox.getOptionLabel(item) | async }}\n }\n }\n\n <button\n [disabled]=\"input.disabled\"\n (click)=\"combobox.removeSelectedOption(item); $event.stopPropagation(); combobox.focus()\"\n class=\"et-combobox-selected-option-remove\"\n tabindex=\"-1\"\n type=\"button\"\n >\n x\n </button>\n </div>\n }\n <div class=\"et-combobox-muliple-input\">\n <ng-container *ngTemplateOutlet=\"inputTpl\" />\n </div>\n </div>\n }\n\n <ng-template #inputTpl>\n <input\n [disabled]=\"input.disabled\"\n [attr.id]=\"input.id\"\n [attr.aria-required]=\"(input.required$ | async) || null\"\n [attr.aria-disabled]=\"(input.disabled$ | async) || null\"\n [attr.aria-invalid]=\"(input.invalid$ | async) || null\"\n [attr.aria-expanded]=\"combobox.isOpen$ | async\"\n [attr.aria-describedby]=\"input.describedBy$ | async\"\n [attr.placeholder]=\"input.placeholder || null\"\n [attr.aria-activedescendant]=\"combobox.activeOptionId$ | async\"\n [attr.aria-controls]=\"(combobox.selectBodyId$ | async) || null\"\n [attr.aria-owns]=\"(combobox.selectBodyId$ | async) || null\"\n (keydown)=\"combobox._processKeydownEvent($event)\"\n (keyup)=\"combobox._processKeyupEvent()\"\n (click)=\"combobox.open()\"\n (blur)=\"combobox._handleBlurEvent()\"\n (input)=\"combobox._processInputEvent($event)\"\n class=\"et-combobox-wrapper\"\n autocomplete=\"off\"\n aria-haspopup=\"listbox\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n type=\"text\"\n value=\"{{ combobox.currentFilter }}\"\n etNativeInputRef\n />\n </ng-template>\n\n @if ((combobox.multiple$ | async) === false) {\n <ng-container *ngTemplateOutlet=\"inputTpl\" />\n }\n\n @if (\n ((combobox.multiple$ | async) === false && combobox.currentFilter) || (combobox.selectedOptions$ | async)?.length\n ) {\n <button\n [disabled]=\"input.disabled\"\n (click)=\"combobox.clearValue(); $event.stopPropagation(); combobox.focus()\"\n class=\"et-combobox-clear\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i class=\"et-combobox-clear-icon\" etIcon=\"et-times\"></i>\n </button>\n }\n <i class=\"et-combobox-chevron\" etIcon=\"et-chevron\"></i>\n</div>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template>\n <ng-content />\n</ng-template>\n", styles: [".et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-enter-from,.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-leave-to{opacity:0;transform:scaleY(0)}.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-enter-active{transition:transform 125ms var(--ease-out-5),opacity 125ms var(--ease-out-5)}.et-combobox-body.et-with-default-animation .et-combobox-body-container.et-animation-leave-active{transition:transform 50ms var(--ease-in-5),opacity 50ms var(--ease-in-5)}.et-combobox-body.et-with-default-animation[et-floating-placement^=top] .et-combobox-body-container{transform-origin:bottom}.et-combobox-body.et-with-default-animation[et-floating-placement^=bottom] .et-combobox-body-container{transform-origin:top}.et-combobox-body-container{display:block;background-color:#3d3d3d;color:#fff;max-height:min(200px,var(--et-floating-max-height, 200px));overflow:auto}.et-combobox-body{width:100%;display:grid;transform:var(--et-floating-translate);will-change:transform}.et-combobox-option{display:block}:where(.et-combobox-option--active){background-color:#1e1e1e}.et-combobox{display:block;border:1px solid #ccc;padding:15px;position:relative}.et-combobox-chevron{transform:rotate(180deg);display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:15px;inset-block-start:7px}:where(.et-combobox-clear){display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:40px;inset-block-start:7px;background-color:transparent;border:none;color:#fff;padding:0}:where(.et-combobox-clear) .et-times-icon{display:block;inline-size:15px;block-size:15px}\n"] }]
10731
10808
  }], ctorParameters: () => [] });
@@ -10958,6 +11035,7 @@ class SelectOptionDirective {
10958
11035
  this._select.writeValueFromOption(this);
10959
11036
  this._select.focus();
10960
11037
  this._select.optionClick.emit(this.value);
11038
+ this._select.userInteraction.emit();
10961
11039
  }
10962
11040
  _updateViewValue() {
10963
11041
  this._viewValue$.next(this._elementRef.nativeElement.textContent?.trim() ?? '');
@@ -11026,6 +11104,7 @@ class SelectDirective {
11026
11104
  this._selectionModel = new SelectionModel();
11027
11105
  this._activeSelectionModel = new ActiveSelectionModel();
11028
11106
  this.optionClick = new EventEmitter();
11107
+ this.userInteraction = new EventEmitter();
11029
11108
  this._selectOptionsQueryList$ = new BehaviorSubject(null);
11030
11109
  this.selectBodyId$ = this._selectBodyId$.asObservable();
11031
11110
  this.isOpen$ = this._isOpen$.asObservable();
@@ -11250,7 +11329,9 @@ class SelectDirective {
11250
11329
  if (type === 'toggle') {
11251
11330
  this._selectionModel.toggleSelectedOption(option);
11252
11331
  }
11332
+ this.optionClick.emit(option.value);
11253
11333
  }
11334
+ this.userInteraction.emit();
11254
11335
  }
11255
11336
  }
11256
11337
  _closeBodyOnDisable() {
@@ -11263,7 +11344,7 @@ class SelectDirective {
11263
11344
  .subscribe();
11264
11345
  }
11265
11346
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SelectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
11266
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.2", type: SelectDirective, isStandalone: true, inputs: { multiple: "multiple", emptyText: "emptyText" }, outputs: { optionClick: "optionClick" }, providers: [
11347
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.2", type: SelectDirective, isStandalone: true, inputs: { multiple: "multiple", emptyText: "emptyText" }, outputs: { optionClick: "optionClick", userInteraction: "userInteraction" }, providers: [
11267
11348
  {
11268
11349
  provide: SELECT_TOKEN,
11269
11350
  useExisting: SelectDirective,
@@ -11288,6 +11369,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImpor
11288
11369
  type: Input
11289
11370
  }], optionClick: [{
11290
11371
  type: Output
11372
+ }], userInteraction: [{
11373
+ type: Output
11291
11374
  }], _selectOptionsQueryList: [{
11292
11375
  type: ContentChildren,
11293
11376
  args: [SELECT_OPTION_TOKEN, { descendants: true }]
@@ -11387,7 +11470,7 @@ class SelectComponent extends DecoratedInputBase {
11387
11470
  this.select.setSelectBody({ component: SelectBodyComponent, template: this.selectBodyTpl });
11388
11471
  }
11389
11472
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
11390
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.2", type: SelectComponent, isStandalone: true, selector: "et-select", host: { classAttribute: "et-select" }, providers: [provideIcons(CHEVRON_ICON, TIMES_ICON)], viewQueries: [{ propertyName: "selectBodyTpl", first: true, predicate: ["selectBodyTpl"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: InputDirective }, { directive: SelectDirective, inputs: ["multiple", "multiple", "emptyText", "emptyText"], outputs: ["optionClick", "optionClick"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div class=\"et-select-wrapper\">\n <div\n #inputElement\n [attr.id]=\"input.id\"\n [attr.aria-labelledby]=\"select.labelledBy$ | async\"\n [attr.aria-describedby]=\"input.describedBy$ | async\"\n [attr.tabindex]=\"(input.disabled$ | async) ? -1 : 0\"\n [attr.aria-required]=\"(input.required$ | async) || null\"\n [attr.aria-disabled]=\"(input.disabled$ | async) || null\"\n [attr.aria-invalid]=\"(input.invalid$ | async) || null\"\n [attr.aria-controls]=\"(select.selectBodyId$ | async) || null\"\n [attr.aria-owns]=\"(select.owns$ | async) || null\"\n [attr.aria-expanded]=\"select.isOpen$ | async\"\n [attr.aria-activedescendant]=\"select.activeDescendant$ | async\"\n (click)=\"select.open()\"\n (keydown)=\"select._processKeydownEvent($event)\"\n (blur)=\"select._controlTouched()\"\n class=\"et-select-input et-select-input--static\"\n aria-haspopup=\"listbox\"\n role=\"combobox\"\n aria-autocomplete=\"none\"\n >\n <span\n [attr.id]=\"select.selectCurrentValueId\"\n [class.cdk-visually-hidden]=\"select._selectionModel.allowMultiple && select.ariaViewValue()\"\n class=\"et-select-current-value\"\n >\n @if (select.ariaViewValue()) {\n {{ select.ariaViewValue() }}\n } @else {\n {{ select.emptyText }}\n }\n </span>\n\n @if (select._selectionModel.allowMultiple) {\n @if (select._selectionModel.selection$ | async; as selectedOptions) {\n @if (selectedOptions.length) {\n <ul class=\"et-select-selected-options\" aria-hidden=\"true\">\n @for (opt of selectedOptions; track select.trackByFn($index, opt)) {\n <li class=\"et-select-selected-option\">\n {{ opt.viewValue$ | async }}\n <button\n [disabled]=\"input.disabled\"\n (click)=\"$event.stopPropagation(); select.removeOptionFromSelection(opt); select.focus()\"\n class=\"et-select-selected-option-remove\"\n tabindex=\"-1\"\n type=\"button\"\n ></button>\n </li>\n }\n </ul>\n }\n }\n }\n </div>\n\n @if (select.ariaViewValue() || (select._selectionModel.selection$ | async)?.length) {\n <button\n [disabled]=\"input.disabled\"\n (click)=\"select.clearValue(); $event.stopPropagation(); select.focus()\"\n class=\"et-select-clear\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i class=\"et-select-clear-icon\" etIcon=\"et-times\"></i>\n </button>\n }\n\n <i class=\"et-select-chevron\" etIcon=\"et-chevron\"></i>\n</div>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template #selectBodyTpl>\n <ng-content />\n</ng-template>\n", styles: [".et-select{display:block;border:1px solid #ccc;padding:15px;position:relative}.et-select-input{position:absolute;inset:0}.et-select-option{display:block}.et-select-chevron{transform:rotate(180deg);display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:15px;inset-block-start:7px}:where(.et-select-clear){display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:40px;inset-block-start:7px;background-color:transparent;border:none;color:#fff;padding:0}:where(.et-select-clear) .et-times-icon{display:block;inline-size:15px;block-size:15px}.et-select-option--active{background-color:#1f1f1f}.et-select-option--selected{font-weight:700}.et-select-selected-options{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:5px}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
11473
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.2", type: SelectComponent, isStandalone: true, selector: "et-select", host: { classAttribute: "et-select" }, providers: [provideIcons(CHEVRON_ICON, TIMES_ICON)], viewQueries: [{ propertyName: "selectBodyTpl", first: true, predicate: ["selectBodyTpl"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: InputDirective }, { directive: SelectDirective, inputs: ["multiple", "multiple", "emptyText", "emptyText"], outputs: ["optionClick", "optionClick", "userInteraction", "userInteraction"] }], ngImport: i0, template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div class=\"et-select-wrapper\">\n <div\n #inputElement\n [attr.id]=\"input.id\"\n [attr.aria-labelledby]=\"select.labelledBy$ | async\"\n [attr.aria-describedby]=\"input.describedBy$ | async\"\n [attr.tabindex]=\"(input.disabled$ | async) ? -1 : 0\"\n [attr.aria-required]=\"(input.required$ | async) || null\"\n [attr.aria-disabled]=\"(input.disabled$ | async) || null\"\n [attr.aria-invalid]=\"(input.invalid$ | async) || null\"\n [attr.aria-controls]=\"(select.selectBodyId$ | async) || null\"\n [attr.aria-owns]=\"(select.owns$ | async) || null\"\n [attr.aria-expanded]=\"select.isOpen$ | async\"\n [attr.aria-activedescendant]=\"select.activeDescendant$ | async\"\n (click)=\"select.open()\"\n (keydown)=\"select._processKeydownEvent($event)\"\n (blur)=\"select._controlTouched()\"\n class=\"et-select-input et-select-input--static\"\n aria-haspopup=\"listbox\"\n role=\"combobox\"\n aria-autocomplete=\"none\"\n >\n <span\n [attr.id]=\"select.selectCurrentValueId\"\n [class.cdk-visually-hidden]=\"select._selectionModel.allowMultiple && select.ariaViewValue()\"\n class=\"et-select-current-value\"\n >\n @if (select.ariaViewValue()) {\n {{ select.ariaViewValue() }}\n } @else {\n {{ select.emptyText }}\n }\n </span>\n\n @if (select._selectionModel.allowMultiple) {\n @if (select._selectionModel.selection$ | async; as selectedOptions) {\n @if (selectedOptions.length) {\n <ul class=\"et-select-selected-options\" aria-hidden=\"true\">\n @for (opt of selectedOptions; track select.trackByFn($index, opt)) {\n <li class=\"et-select-selected-option\">\n {{ opt.viewValue$ | async }}\n <button\n [disabled]=\"input.disabled\"\n (click)=\"$event.stopPropagation(); select.removeOptionFromSelection(opt); select.focus()\"\n class=\"et-select-selected-option-remove\"\n tabindex=\"-1\"\n type=\"button\"\n ></button>\n </li>\n }\n </ul>\n }\n }\n }\n </div>\n\n @if (select.ariaViewValue() || (select._selectionModel.selection$ | async)?.length) {\n <button\n [disabled]=\"input.disabled\"\n (click)=\"select.clearValue(); $event.stopPropagation(); select.focus()\"\n class=\"et-select-clear\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i class=\"et-select-clear-icon\" etIcon=\"et-times\"></i>\n </button>\n }\n\n <i class=\"et-select-chevron\" etIcon=\"et-chevron\"></i>\n</div>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template #selectBodyTpl>\n <ng-content />\n</ng-template>\n", styles: [".et-select{display:block;border:1px solid #ccc;padding:15px;position:relative}.et-select-input{position:absolute;inset:0}.et-select-option{display:block}.et-select-chevron{transform:rotate(180deg);display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:15px;inset-block-start:7px}:where(.et-select-clear){display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:40px;inset-block-start:7px;background-color:transparent;border:none;color:#fff;padding:0}:where(.et-select-clear) .et-times-icon{display:block;inline-size:15px;block-size:15px}.et-select-option--active{background-color:#1f1f1f}.et-select-option--selected{font-weight:700}.et-select-selected-options{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:5px}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
11391
11474
  }
11392
11475
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SelectComponent, decorators: [{
11393
11476
  type: Component,
@@ -11395,7 +11478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImpor
11395
11478
  class: 'et-select',
11396
11479
  }, imports: [AsyncPipe, IconDirective], hostDirectives: [
11397
11480
  { directive: InputDirective },
11398
- { directive: SelectDirective, inputs: ['multiple', 'emptyText'], outputs: ['optionClick'] },
11481
+ { directive: SelectDirective, inputs: ['multiple', 'emptyText'], outputs: ['optionClick', 'userInteraction'] },
11399
11482
  ], providers: [provideIcons(CHEVRON_ICON, TIMES_ICON)], template: "<ng-content select=\"[etInputPrefix]\" />\n\n<div class=\"et-select-wrapper\">\n <div\n #inputElement\n [attr.id]=\"input.id\"\n [attr.aria-labelledby]=\"select.labelledBy$ | async\"\n [attr.aria-describedby]=\"input.describedBy$ | async\"\n [attr.tabindex]=\"(input.disabled$ | async) ? -1 : 0\"\n [attr.aria-required]=\"(input.required$ | async) || null\"\n [attr.aria-disabled]=\"(input.disabled$ | async) || null\"\n [attr.aria-invalid]=\"(input.invalid$ | async) || null\"\n [attr.aria-controls]=\"(select.selectBodyId$ | async) || null\"\n [attr.aria-owns]=\"(select.owns$ | async) || null\"\n [attr.aria-expanded]=\"select.isOpen$ | async\"\n [attr.aria-activedescendant]=\"select.activeDescendant$ | async\"\n (click)=\"select.open()\"\n (keydown)=\"select._processKeydownEvent($event)\"\n (blur)=\"select._controlTouched()\"\n class=\"et-select-input et-select-input--static\"\n aria-haspopup=\"listbox\"\n role=\"combobox\"\n aria-autocomplete=\"none\"\n >\n <span\n [attr.id]=\"select.selectCurrentValueId\"\n [class.cdk-visually-hidden]=\"select._selectionModel.allowMultiple && select.ariaViewValue()\"\n class=\"et-select-current-value\"\n >\n @if (select.ariaViewValue()) {\n {{ select.ariaViewValue() }}\n } @else {\n {{ select.emptyText }}\n }\n </span>\n\n @if (select._selectionModel.allowMultiple) {\n @if (select._selectionModel.selection$ | async; as selectedOptions) {\n @if (selectedOptions.length) {\n <ul class=\"et-select-selected-options\" aria-hidden=\"true\">\n @for (opt of selectedOptions; track select.trackByFn($index, opt)) {\n <li class=\"et-select-selected-option\">\n {{ opt.viewValue$ | async }}\n <button\n [disabled]=\"input.disabled\"\n (click)=\"$event.stopPropagation(); select.removeOptionFromSelection(opt); select.focus()\"\n class=\"et-select-selected-option-remove\"\n tabindex=\"-1\"\n type=\"button\"\n ></button>\n </li>\n }\n </ul>\n }\n }\n }\n </div>\n\n @if (select.ariaViewValue() || (select._selectionModel.selection$ | async)?.length) {\n <button\n [disabled]=\"input.disabled\"\n (click)=\"select.clearValue(); $event.stopPropagation(); select.focus()\"\n class=\"et-select-clear\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i class=\"et-select-clear-icon\" etIcon=\"et-times\"></i>\n </button>\n }\n\n <i class=\"et-select-chevron\" etIcon=\"et-chevron\"></i>\n</div>\n\n<ng-content select=\"[etInputSuffix]\" />\n\n<ng-template #selectBodyTpl>\n <ng-content />\n</ng-template>\n", styles: [".et-select{display:block;border:1px solid #ccc;padding:15px;position:relative}.et-select-input{position:absolute;inset:0}.et-select-option{display:block}.et-select-chevron{transform:rotate(180deg);display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:15px;inset-block-start:7px}:where(.et-select-clear){display:block;inline-size:15px;block-size:15px;position:absolute;inset-inline-end:40px;inset-block-start:7px;background-color:transparent;border:none;color:#fff;padding:0}:where(.et-select-clear) .et-times-icon{display:block;inline-size:15px;block-size:15px}.et-select-option--active{background-color:#1f1f1f}.et-select-option--selected{font-weight:700}.et-select-selected-options{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:5px}\n"] }]
11400
11483
  }], propDecorators: { selectBodyTpl: [{
11401
11484
  type: ViewChild,
@@ -18717,48 +18800,6 @@ const ScrollableImports = [
18717
18800
  ScrollablePlaceholderComponent,
18718
18801
  ];
18719
18802
 
18720
- class SkeletonComponent {
18721
- constructor() {
18722
- this.loadingAllyText = 'Loading...';
18723
- this.animated = true;
18724
- }
18725
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
18726
- 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 }); }
18727
- }
18728
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SkeletonComponent, decorators: [{
18729
- type: Component,
18730
- args: [{ selector: 'et-skeleton', template: ` <span class="cdk-visually-hidden"> {{ loadingAllyText }} </span> <ng-content />`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
18731
- class: 'et-skeleton',
18732
- }, 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"] }]
18733
- }], propDecorators: { loadingAllyText: [{
18734
- type: Input
18735
- }], animated: [{
18736
- type: Input,
18737
- args: [{ transform: booleanAttribute }]
18738
- }, {
18739
- type: HostBinding,
18740
- args: ['class.et-skeleton--animated']
18741
- }] } });
18742
-
18743
- class SkeletonItemComponent {
18744
- constructor() {
18745
- this.ariaHidden = true;
18746
- }
18747
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SkeletonItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
18748
- 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 }); }
18749
- }
18750
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: SkeletonItemComponent, decorators: [{
18751
- type: Component,
18752
- args: [{ selector: 'et-skeleton-item', template: ``, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
18753
- class: 'et-skeleton-item',
18754
- }, 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"] }]
18755
- }], propDecorators: { ariaHidden: [{
18756
- type: HostBinding,
18757
- args: ['attr.aria-hidden']
18758
- }] } });
18759
-
18760
- const SkeletonImports = [SkeletonComponent, SkeletonItemComponent];
18761
-
18762
18803
  const SORT_HEADER_COLUMN_DEF = new InjectionToken('SortHeaderColumnDef');
18763
18804
  class ColumnDefDirective extends CdkColumnDef {
18764
18805
  get name() {