ngx-bsl 0.0.5 → 0.0.7

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 (7) hide show
  1. package/fesm2022/ngx-bsl.mjs +52 -47
  2. package/fesm2022/ngx-bsl.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/styles/components/_overlay.scss +1 -1
  5. package/styles/themes/_dark-theme.scss +24 -25
  6. package/styles/themes/_light-theme.scss +30 -26
  7. package/types/ngx-bsl.d.ts +5 -8
package/fesm2022/ngx-bsl.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { ChangeDetectionStrategy, Component, input, inject, computed, output, contentChildren, ElementRef, signal, forwardRef, HostListener, Pipe, viewChild, afterNextRender, model, Renderer2, DOCUMENT, Directive } from '@angular/core';
2
+ import { ViewEncapsulation, ChangeDetectionStrategy, Component, input, inject, computed, output, contentChildren, ElementRef, signal, forwardRef, HostListener, Pipe, viewChild, afterNextRender, model, Renderer2, DOCUMENT, Directive } from '@angular/core';
3
3
  import { NG_VALUE_ACCESSOR } from '@angular/forms';
4
4
  import { CdkOverlayOrigin, CdkConnectedOverlay, Overlay } from '@angular/cdk/overlay';
5
5
  import { CdkTrapFocus } from '@angular/cdk/a11y';
@@ -18,11 +18,11 @@ class IdGenerator {
18
18
  */
19
19
  class IconCheckComponent {
20
20
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconCheckComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
21
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconCheckComponent, isStandalone: true, selector: "ngx-bsl-icon-check", ngImport: i0, template: `
21
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconCheckComponent, isStandalone: true, selector: "ngx-bsl-icon-check", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
22
22
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
23
23
  <path d="M4 12.6111L8.92308 17.5L20 6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
24
24
  </svg>
25
- `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
25
+ `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
26
26
  }
27
27
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconCheckComponent, decorators: [{
28
28
  type: Component,
@@ -30,7 +30,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
30
30
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
31
31
  <path d="M4 12.6111L8.92308 17.5L20 6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
32
32
  </svg>
33
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
33
+ `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
34
34
  }] });
35
35
 
36
36
  class ListBoxOptionComponent {
@@ -397,7 +397,7 @@ class CheckboxComponent {
397
397
  multi: true,
398
398
  useExisting: CheckboxComponent,
399
399
  },
400
- ], ngImport: i0, template: "<span role=\"checkbox\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-labelledby]=\"id() + '-label'\"\n [id]=\"id()\"\n [tabindex]=\"disabled() ? -1 : 0\"\n class=\"checkbox\">\n @if (checked()) {\n <ngx-bsl-icon-check></ngx-bsl-icon-check>\n }\n</span>\n\n<span [id]=\"id() + '-label'\">\n <ng-content></ng-content>\n</span>\n", styles: [":host{width:fit-content;display:flex;align-items:center;gap:.5rem;font:var(--bsl-font-sm)}.checkbox{width:1rem;height:1rem;display:flex;justify-content:center;align-items:center;background-color:var(--bsl-checkbox-backgroundColor);border:1px solid var(--bsl-checkbox-borderColor);border-radius:4px;color:var(--bsl-checkbox-textColor)}.checkbox:focus-visible{outline-offset:2px}.checkbox:hover{border-color:var(--bsl-checkbox-borderColor-hover)}.checkbox.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "component", type: IconCheckComponent, selector: "ngx-bsl-icon-check" }] });
400
+ ], ngImport: i0, template: "<span role=\"checkbox\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-labelledby]=\"id() + '-label'\"\n [id]=\"id()\"\n [tabindex]=\"disabled() ? -1 : 0\"\n class=\"bsl-checkbox\">\n @if (checked()) {\n <ngx-bsl-icon-check></ngx-bsl-icon-check>\n }\n</span>\n\n<span [id]=\"id() + '-label'\">\n <ng-content></ng-content>\n</span>\n", styles: [":host{width:fit-content;display:flex;align-items:center;gap:.5rem;font:var(--bsl-font-sm);cursor:default}.bsl-checkbox{width:1rem;height:1rem;display:flex;justify-content:center;align-items:center;background-color:var(--bsl-checkbox-backgroundColor);border:1px solid var(--bsl-checkbox-borderColor);border-radius:4px;color:var(--bsl-checkbox-textColor)}.bsl-checkbox:focus-visible{outline-offset:2px}.bsl-checkbox:hover{border-color:var(--bsl-checkbox-borderColor-hover)}.bsl-checkbox.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "component", type: IconCheckComponent, selector: "ngx-bsl-icon-check" }], encapsulation: i0.ViewEncapsulation.None });
401
401
  }
402
402
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: CheckboxComponent, decorators: [{
403
403
  type: Component,
@@ -409,7 +409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
409
409
  multi: true,
410
410
  useExisting: CheckboxComponent,
411
411
  },
412
- ], template: "<span role=\"checkbox\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-labelledby]=\"id() + '-label'\"\n [id]=\"id()\"\n [tabindex]=\"disabled() ? -1 : 0\"\n class=\"checkbox\">\n @if (checked()) {\n <ngx-bsl-icon-check></ngx-bsl-icon-check>\n }\n</span>\n\n<span [id]=\"id() + '-label'\">\n <ng-content></ng-content>\n</span>\n", styles: [":host{width:fit-content;display:flex;align-items:center;gap:.5rem;font:var(--bsl-font-sm)}.checkbox{width:1rem;height:1rem;display:flex;justify-content:center;align-items:center;background-color:var(--bsl-checkbox-backgroundColor);border:1px solid var(--bsl-checkbox-borderColor);border-radius:4px;color:var(--bsl-checkbox-textColor)}.checkbox:focus-visible{outline-offset:2px}.checkbox:hover{border-color:var(--bsl-checkbox-borderColor-hover)}.checkbox.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}\n"] }]
412
+ ], encapsulation: ViewEncapsulation.None, template: "<span role=\"checkbox\"\n [attr.aria-checked]=\"checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-labelledby]=\"id() + '-label'\"\n [id]=\"id()\"\n [tabindex]=\"disabled() ? -1 : 0\"\n class=\"bsl-checkbox\">\n @if (checked()) {\n <ngx-bsl-icon-check></ngx-bsl-icon-check>\n }\n</span>\n\n<span [id]=\"id() + '-label'\">\n <ng-content></ng-content>\n</span>\n", styles: [":host{width:fit-content;display:flex;align-items:center;gap:.5rem;font:var(--bsl-font-sm);cursor:default}.bsl-checkbox{width:1rem;height:1rem;display:flex;justify-content:center;align-items:center;background-color:var(--bsl-checkbox-backgroundColor);border:1px solid var(--bsl-checkbox-borderColor);border-radius:4px;color:var(--bsl-checkbox-textColor)}.bsl-checkbox:focus-visible{outline-offset:2px}.bsl-checkbox:hover{border-color:var(--bsl-checkbox-borderColor-hover)}.bsl-checkbox.disabled{opacity:.65;cursor:not-allowed;pointer-events:none}\n"] }]
413
413
  }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], onKeydown: [{
414
414
  type: HostListener,
415
415
  args: ['keydown.enter', ['$event']]
@@ -433,13 +433,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
433
433
  */
434
434
  class IconXMarkComponent {
435
435
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconXMarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
436
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconXMarkComponent, isStandalone: true, selector: "ngx-bsl-icon-x-mark", ngImport: i0, template: `
436
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconXMarkComponent, isStandalone: true, selector: "ngx-bsl-icon-x-mark", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
437
437
  <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
438
438
  <g clip-path="url(#clip0_20_20)" id="object-0" transform="matrix(0.5, 0, 0, 0.5, 0, 0)">
439
439
  <path fill="currentColor" stroke="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M0.490426 0.490426C1.14433 -0.163475 2.20451 -0.163475 2.85841 0.490426L24 21.632L45.1416 0.490426C45.7955 -0.163475 46.8557 -0.163475 47.5096 0.490426C48.1635 1.14433 48.1635 2.20451 47.5096 2.85841L26.368 24L47.5096 45.1416C48.1635 45.7955 48.1635 46.8557 47.5096 47.5096C46.8557 48.1635 45.7955 48.1635 45.1416 47.5096L24 26.368L2.85841 47.5096C2.20451 48.1635 1.14433 48.1635 0.490426 47.5096C-0.163475 46.8557 -0.163475 45.7955 0.490426 45.1416L21.632 24L0.490426 2.85841C-0.163475 2.20451 -0.163475 1.14433 0.490426 0.490426Z"></path>
440
440
  </g>
441
441
  </svg>
442
- `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
442
+ `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
443
443
  }
444
444
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconXMarkComponent, decorators: [{
445
445
  type: Component,
@@ -449,7 +449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
449
449
  <path fill="currentColor" stroke="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M0.490426 0.490426C1.14433 -0.163475 2.20451 -0.163475 2.85841 0.490426L24 21.632L45.1416 0.490426C45.7955 -0.163475 46.8557 -0.163475 47.5096 0.490426C48.1635 1.14433 48.1635 2.20451 47.5096 2.85841L26.368 24L47.5096 45.1416C48.1635 45.7955 48.1635 46.8557 47.5096 47.5096C46.8557 48.1635 45.7955 48.1635 45.1416 47.5096L24 26.368L2.85841 47.5096C2.20451 48.1635 1.14433 48.1635 0.490426 47.5096C-0.163475 46.8557 -0.163475 45.7955 0.490426 45.1416L21.632 24L0.490426 2.85841C-0.163475 2.20451 -0.163475 1.14433 0.490426 0.490426Z"></path>
450
450
  </g>
451
451
  </svg>
452
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
452
+ `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
453
453
  }] });
454
454
 
455
455
  class DrawerComponent {
@@ -525,11 +525,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
525
525
  */
526
526
  class IconChevronDownComponent {
527
527
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconChevronDownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
528
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconChevronDownComponent, isStandalone: true, selector: "ngx-bsl-icon-chevron-down", ngImport: i0, template: `
528
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconChevronDownComponent, isStandalone: true, selector: "ngx-bsl-icon-chevron-down", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
529
529
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
530
530
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8 L12 16 L20 8"/>
531
531
  </svg>
532
- `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
532
+ `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
533
533
  }
534
534
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconChevronDownComponent, decorators: [{
535
535
  type: Component,
@@ -537,7 +537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
537
537
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
538
538
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8 L12 16 L20 8"/>
539
539
  </svg>
540
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
540
+ `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
541
541
  }] });
542
542
 
543
543
  /*
@@ -546,14 +546,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
546
546
  */
547
547
  class IconCompanyComponent {
548
548
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconCompanyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
549
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconCompanyComponent, isStandalone: true, selector: "ngx-bsl-icon-company", ngImport: i0, template: `
549
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconCompanyComponent, isStandalone: true, selector: "ngx-bsl-icon-company", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
550
550
  <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
551
551
  <rect width="32" height="32" stroke="none" fill="#000000" opacity="0" transform="matrix(1, 0, 0, 1, 4.440892098500626e-16, 4.440892098500626e-16)"/>
552
552
  <g transform="matrix(2.6666669845581055, 0, 0, 2.6666669845581055, 16, 16)">
553
553
  <path style="stroke: none; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: currentColor; fill-rule: nonzero; opacity: 1; stroke-width: 0px;" transform=" translate(-8, -8)" d="M 7.5 2 C 7.223869061895771 2.0000276089526747 7.000027608952674 2.223869061895771 7 2.5000000000000004 L 7 4 L 3.5 4 C 3.2238690618957704 4.000027608952675 3.0000276089526743 4.223869061895771 3 4.5 L 3 8 L 2.5 8 C 2.2238690618957704 8.000027608952674 2.0000276089526743 8.22386906189577 2 8.5 L 2 14 L 3 14 L 3 9 L 7 9 L 7 14 L 8 14 L 8 3 L 13 3 L 13 14 L 14 14 L 14 2.5 C 13.999972391047326 2.2238690618957704 13.77613093810423 2.0000276089526747 13.5 2 L 7.5 2 z M 9 4 L 9 5 L 10 5 L 10 4 L 9 4 z M 11 4 L 11 5 L 12 5 L 12 4 L 11 4 z M 4 5 L 7 5 L 7 8 L 4 8 L 4 5 z M 5 6 L 5 7 L 6 7 L 6 6 L 5 6 z M 9 6 L 9 7 L 10 7 L 10 6 L 9 6 z M 11 6 L 11 7 L 12 7 L 12 6 L 11 6 z M 9 8 L 9 9 L 10 9 L 10 8 L 9 8 z M 11 8 L 11 9 L 12 9 L 12 8 L 11 8 z M 4 10 L 4 11 L 6 11 L 6 10 L 4 10 z M 9 10 L 9 11 L 10 11 L 10 10 L 9 10 z M 11 10 L 11 11 L 12 11 L 12 10 L 11 10 z M 4 12 L 4 13 L 6 13 L 6 12 L 4 12 z M 9 12 L 9 13 L 10 13 L 10 12 L 9 12 z M 11 12 L 11 13 L 12 13 L 12 12 L 11 12 z" stroke-linecap="round"/>
554
554
  </g>
555
555
  </svg>
556
- `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
556
+ `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
557
557
  }
558
558
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconCompanyComponent, decorators: [{
559
559
  type: Component,
@@ -564,7 +564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
564
564
  <path style="stroke: none; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: currentColor; fill-rule: nonzero; opacity: 1; stroke-width: 0px;" transform=" translate(-8, -8)" d="M 7.5 2 C 7.223869061895771 2.0000276089526747 7.000027608952674 2.223869061895771 7 2.5000000000000004 L 7 4 L 3.5 4 C 3.2238690618957704 4.000027608952675 3.0000276089526743 4.223869061895771 3 4.5 L 3 8 L 2.5 8 C 2.2238690618957704 8.000027608952674 2.0000276089526743 8.22386906189577 2 8.5 L 2 14 L 3 14 L 3 9 L 7 9 L 7 14 L 8 14 L 8 3 L 13 3 L 13 14 L 14 14 L 14 2.5 C 13.999972391047326 2.2238690618957704 13.77613093810423 2.0000276089526747 13.5 2 L 7.5 2 z M 9 4 L 9 5 L 10 5 L 10 4 L 9 4 z M 11 4 L 11 5 L 12 5 L 12 4 L 11 4 z M 4 5 L 7 5 L 7 8 L 4 8 L 4 5 z M 5 6 L 5 7 L 6 7 L 6 6 L 5 6 z M 9 6 L 9 7 L 10 7 L 10 6 L 9 6 z M 11 6 L 11 7 L 12 7 L 12 6 L 11 6 z M 9 8 L 9 9 L 10 9 L 10 8 L 9 8 z M 11 8 L 11 9 L 12 9 L 12 8 L 11 8 z M 4 10 L 4 11 L 6 11 L 6 10 L 4 10 z M 9 10 L 9 11 L 10 11 L 10 10 L 9 10 z M 11 10 L 11 11 L 12 11 L 12 10 L 11 10 z M 4 12 L 4 13 L 6 13 L 6 12 L 4 12 z M 9 12 L 9 13 L 10 13 L 10 12 L 9 12 z M 11 12 L 11 13 L 12 13 L 12 12 L 11 12 z" stroke-linecap="round"/>
565
565
  </g>
566
566
  </svg>
567
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
567
+ `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
568
568
  }] });
569
569
 
570
570
  /*
@@ -573,14 +573,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
573
573
  */
574
574
  class IconLanguageComponent {
575
575
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconLanguageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
576
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconLanguageComponent, isStandalone: true, selector: "ngx-bsl-icon-language", ngImport: i0, template: `
576
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconLanguageComponent, isStandalone: true, selector: "ngx-bsl-icon-language", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
577
577
  <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
578
578
  <ellipse style="stroke: currentColor; fill: none; stroke-width: 1.5;" cx="16" cy="16" rx="12" ry="12"/>
579
579
  <ellipse style="stroke: currentColor; fill: none; stroke-width: 1.5;" cx="16" cy="16" rx="4.854" ry="11.903"/>
580
580
  <path style="stroke: currentColor; stroke-width: 1.5; transform-origin: 16px 12px;" d="M 5.16 11.977 L 26.844 11.977"/>
581
581
  <path style="stroke: currentColor; stroke-width: 1.5; transform-origin: 16px 20px;" d="M 5.16 20 L 26.844 20"/>
582
582
  </svg>
583
- `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
583
+ `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
584
584
  }
585
585
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconLanguageComponent, decorators: [{
586
586
  type: Component,
@@ -591,7 +591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
591
591
  <path style="stroke: currentColor; stroke-width: 1.5; transform-origin: 16px 12px;" d="M 5.16 11.977 L 26.844 11.977"/>
592
592
  <path style="stroke: currentColor; stroke-width: 1.5; transform-origin: 16px 20px;" d="M 5.16 20 L 26.844 20"/>
593
593
  </svg>
594
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
594
+ `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
595
595
  }] });
596
596
 
597
597
  /*
@@ -600,11 +600,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
600
600
  */
601
601
  class IconLocationComponent {
602
602
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconLocationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
603
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconLocationComponent, isStandalone: true, selector: "ngx-bsl-icon-location", ngImport: i0, template: `
603
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconLocationComponent, isStandalone: true, selector: "ngx-bsl-icon-location", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
604
604
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
605
605
  <path fill="currentColor" d="M 12 0 C 7.583 0 4 3.583 4 8 C 4 12.418 8.666 18.668 12 24 C 15.332 18.668 20 12.418 20 8 C 20 3.583 16.418 0 12 0 Z M 12 12.668 C 10.159 12.668 8.666 11.174 8.666 9.334 C 8.666 7.491 10.159 6 12 6 C 13.841 6 15.332 7.491 15.332 9.334 C 15.332 11.174 13.841 12.668 12 12.668 Z" style="stroke-width: 0px;"/>
606
606
  </svg>
607
- `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
607
+ `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
608
608
  }
609
609
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconLocationComponent, decorators: [{
610
610
  type: Component,
@@ -612,7 +612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
612
612
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
613
613
  <path fill="currentColor" d="M 12 0 C 7.583 0 4 3.583 4 8 C 4 12.418 8.666 18.668 12 24 C 15.332 18.668 20 12.418 20 8 C 20 3.583 16.418 0 12 0 Z M 12 12.668 C 10.159 12.668 8.666 11.174 8.666 9.334 C 8.666 7.491 10.159 6 12 6 C 13.841 6 15.332 7.491 15.332 9.334 C 15.332 11.174 13.841 12.668 12 12.668 Z" style="stroke-width: 0px;"/>
614
614
  </svg>
615
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
615
+ `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
616
616
  }] });
617
617
 
618
618
  /*
@@ -621,11 +621,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
621
621
  */
622
622
  class IconMoonComponent {
623
623
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconMoonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
624
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconMoonComponent, isStandalone: true, selector: "ngx-bsl-icon-moon", ngImport: i0, template: `
624
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconMoonComponent, isStandalone: true, selector: "ngx-bsl-icon-moon", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
625
625
  <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
626
626
  <path style="stroke: currentColor; stroke-width: 1.5; fill: none;" stroke-linecap="round" stroke-linejoin="round" transform="matrix(-0.7071068286895752, 0.7071068286895752, -0.7071068286895752, -0.7071068286895752, 934.2892456054688, -207.70388793945312)" d="M 801.408 479.913 A 12 12 0 1 1 801.408 502.087 A 11.598 11.598 0 0 0 801.408 479.913 Z"/>
627
627
  </svg>
628
- `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
628
+ `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
629
629
  }
630
630
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconMoonComponent, decorators: [{
631
631
  type: Component,
@@ -633,7 +633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
633
633
  <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
634
634
  <path style="stroke: currentColor; stroke-width: 1.5; fill: none;" stroke-linecap="round" stroke-linejoin="round" transform="matrix(-0.7071068286895752, 0.7071068286895752, -0.7071068286895752, -0.7071068286895752, 934.2892456054688, -207.70388793945312)" d="M 801.408 479.913 A 12 12 0 1 1 801.408 502.087 A 11.598 11.598 0 0 0 801.408 479.913 Z"/>
635
635
  </svg>
636
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
636
+ `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
637
637
  }] });
638
638
 
639
639
  /*
@@ -642,7 +642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
642
642
  */
643
643
  class IconSunComponent {
644
644
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconSunComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
645
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconSunComponent, isStandalone: true, selector: "ngx-bsl-icon-sun", ngImport: i0, template: `
645
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconSunComponent, isStandalone: true, selector: "ngx-bsl-icon-sun", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
646
646
  <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
647
647
  <path d="M16 22.6667C19.6819 22.6667 22.6667 19.6819 22.6667 16C22.6667 12.3181 19.6819 9.33334 16 9.33334C12.3181 9.33334 9.33333 12.3181 9.33333 16C9.33333 19.6819 12.3181 22.6667 16 22.6667Z" stroke="currentColor" stroke-width="2"/>
648
648
  <path d="M16 2.66666V5.33332" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
@@ -654,7 +654,7 @@ class IconSunComponent {
654
654
  <path d="M8.59245 23.4076L5.62948 26.3705" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
655
655
  <path d="M26.3704 26.3697L23.4077 23.4068" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
656
656
  </svg>
657
- `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
657
+ `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
658
658
  }
659
659
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconSunComponent, decorators: [{
660
660
  type: Component,
@@ -670,7 +670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
670
670
  <path d="M8.59245 23.4076L5.62948 26.3705" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
671
671
  <path d="M26.3704 26.3697L23.4077 23.4068" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
672
672
  </svg>
673
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
673
+ `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
674
674
  }] });
675
675
 
676
676
  /*
@@ -679,11 +679,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
679
679
  */
680
680
  class IconArrowLeftComponent {
681
681
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconArrowLeftComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
682
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconArrowLeftComponent, isStandalone: true, selector: "ngx-bsl-icon-arrow-left", ngImport: i0, template: `
682
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconArrowLeftComponent, isStandalone: true, selector: "ngx-bsl-icon-arrow-left", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
683
683
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" >
684
684
  <path fill="currentColor" d="M 16.453 0.282 C 16.536 0.195 16.636 0.124 16.744 0.075 C 16.853 0.025 16.971 0 17.091 0 C 17.211 0 17.331 0.025 17.439 0.075 C 17.547 0.124 17.647 0.195 17.731 0.282 C 17.902 0.469 17.997 0.714 17.997 0.975 C 17.997 1.23 17.902 1.48 17.731 1.662 L 8.166 11.995 L 17.731 22.333 C 17.817 22.425 17.883 22.536 17.931 22.657 C 17.979 22.777 18.003 22.905 18 23.032 C 17.997 23.161 17.971 23.293 17.922 23.413 C 17.874 23.532 17.803 23.641 17.715 23.728 C 17.631 23.815 17.535 23.883 17.425 23.928 C 17.314 23.976 17.199 24 17.079 24 C 16.962 23.995 16.849 23.968 16.741 23.92 C 16.633 23.871 16.533 23.8 16.453 23.713 L 6.279 12.718 C 6.102 12.525 6 12.267 6 11.995 C 6 11.727 6.102 11.467 6.279 11.274 L 16.453 0.282 Z"></path>
685
685
  </svg>
686
- `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
686
+ `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
687
687
  }
688
688
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconArrowLeftComponent, decorators: [{
689
689
  type: Component,
@@ -691,7 +691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
691
691
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" >
692
692
  <path fill="currentColor" d="M 16.453 0.282 C 16.536 0.195 16.636 0.124 16.744 0.075 C 16.853 0.025 16.971 0 17.091 0 C 17.211 0 17.331 0.025 17.439 0.075 C 17.547 0.124 17.647 0.195 17.731 0.282 C 17.902 0.469 17.997 0.714 17.997 0.975 C 17.997 1.23 17.902 1.48 17.731 1.662 L 8.166 11.995 L 17.731 22.333 C 17.817 22.425 17.883 22.536 17.931 22.657 C 17.979 22.777 18.003 22.905 18 23.032 C 17.997 23.161 17.971 23.293 17.922 23.413 C 17.874 23.532 17.803 23.641 17.715 23.728 C 17.631 23.815 17.535 23.883 17.425 23.928 C 17.314 23.976 17.199 24 17.079 24 C 16.962 23.995 16.849 23.968 16.741 23.92 C 16.633 23.871 16.533 23.8 16.453 23.713 L 6.279 12.718 C 6.102 12.525 6 12.267 6 11.995 C 6 11.727 6.102 11.467 6.279 11.274 L 16.453 0.282 Z"></path>
693
693
  </svg>
694
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
694
+ `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
695
695
  }] });
696
696
 
697
697
  /*
@@ -700,11 +700,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
700
700
  */
701
701
  class IconArrowRightComponent {
702
702
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconArrowRightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
703
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconArrowRightComponent, isStandalone: true, selector: "ngx-bsl-icon-arrow-right", ngImport: i0, template: `
703
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconArrowRightComponent, isStandalone: true, selector: "ngx-bsl-icon-arrow-right", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
704
704
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
705
705
  <path fill="currentColor" d="M 7.547 0.284 C 7.464 0.194 7.364 0.123 7.255 0.074 C 7.145 0.025 7.026 0 6.907 0 C 6.788 0 6.67 0.025 6.56 0.074 C 6.45 0.123 6.35 0.194 6.267 0.284 C 6.096 0.469 6.001 0.716 6.001 0.974 C 6.001 1.231 6.096 1.479 6.267 1.663 L 15.834 11.998 L 6.267 22.334 C 6.181 22.427 6.113 22.537 6.067 22.657 C 6.021 22.778 5.999 22.907 6 23.036 C 6.001 23.166 6.027 23.294 6.076 23.414 C 6.124 23.533 6.195 23.641 6.283 23.732 C 6.367 23.818 6.466 23.886 6.575 23.932 C 6.684 23.978 6.801 24.001 6.918 24 C 7.036 23.998 7.152 23.972 7.26 23.923 C 7.368 23.875 7.465 23.804 7.547 23.715 L 17.721 12.719 C 17.9 12.526 18 12.267 18 11.998 C 18 11.728 17.9 11.469 17.721 11.276 L 7.547 0.284 Z"></path>
706
706
  </svg>
707
- `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
707
+ `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
708
708
  }
709
709
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconArrowRightComponent, decorators: [{
710
710
  type: Component,
@@ -712,7 +712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
712
712
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
713
713
  <path fill="currentColor" d="M 7.547 0.284 C 7.464 0.194 7.364 0.123 7.255 0.074 C 7.145 0.025 7.026 0 6.907 0 C 6.788 0 6.67 0.025 6.56 0.074 C 6.45 0.123 6.35 0.194 6.267 0.284 C 6.096 0.469 6.001 0.716 6.001 0.974 C 6.001 1.231 6.096 1.479 6.267 1.663 L 15.834 11.998 L 6.267 22.334 C 6.181 22.427 6.113 22.537 6.067 22.657 C 6.021 22.778 5.999 22.907 6 23.036 C 6.001 23.166 6.027 23.294 6.076 23.414 C 6.124 23.533 6.195 23.641 6.283 23.732 C 6.367 23.818 6.466 23.886 6.575 23.932 C 6.684 23.978 6.801 24.001 6.918 24 C 7.036 23.998 7.152 23.972 7.26 23.923 C 7.368 23.875 7.465 23.804 7.547 23.715 L 17.721 12.719 C 17.9 12.526 18 12.267 18 11.998 C 18 11.728 17.9 11.469 17.721 11.276 L 7.547 0.284 Z"></path>
714
714
  </svg>
715
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
715
+ `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
716
716
  }] });
717
717
 
718
718
  /*
@@ -721,11 +721,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
721
721
  */
722
722
  class IconArrowLeftDoubleComponent {
723
723
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconArrowLeftDoubleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
724
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconArrowLeftDoubleComponent, isStandalone: true, selector: "ngx-bsl-icon-arrow-left-double", ngImport: i0, template: `
724
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconArrowLeftDoubleComponent, isStandalone: true, selector: "ngx-bsl-icon-arrow-left-double", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
725
725
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
726
726
  <path fill="currentColor" d="M 12.529 0.284 C 12.614 0.194 12.714 0.123 12.825 0.074 C 12.936 0.025 13.055 0 13.175 0 C 13.295 0 13.414 0.025 13.524 0.074 C 13.636 0.123 13.736 0.194 13.82 0.284 C 13.992 0.469 14.087 0.716 14.087 0.974 C 14.087 1.232 13.992 1.479 13.82 1.664 L 4.181 11.998 L 13.82 22.334 C 13.906 22.427 13.975 22.537 14.021 22.657 C 14.067 22.778 14.089 22.907 14.088 23.037 C 14.087 23.166 14.061 23.295 14.013 23.414 C 13.963 23.533 13.893 23.641 13.803 23.732 C 13.719 23.818 13.619 23.887 13.509 23.933 C 13.399 23.979 13.282 24.001 13.163 24 C 13.045 23.998 12.928 23.972 12.82 23.924 C 12.711 23.875 12.613 23.804 12.529 23.715 L 2.281 12.72 C 2.101 12.526 2 12.268 2 11.998 C 2 11.728 2.101 11.469 2.281 11.276 L 12.529 0.284 Z M 20.441 0.284 C 20.525 0.194 20.625 0.123 20.736 0.074 C 20.847 0.025 20.966 0 21.086 0 C 21.206 0 21.325 0.025 21.436 0.074 C 21.546 0.123 21.647 0.194 21.729 0.284 C 21.903 0.469 21.999 0.716 21.999 0.974 C 21.999 1.232 21.903 1.479 21.729 1.664 L 12.093 11.998 L 21.729 22.334 C 21.818 22.427 21.886 22.537 21.933 22.657 C 21.978 22.778 22.001 22.907 22 23.037 C 21.999 23.166 21.973 23.295 21.923 23.414 C 21.875 23.533 21.804 23.641 21.715 23.732 C 21.629 23.818 21.529 23.887 21.42 23.933 C 21.309 23.979 21.194 24.001 21.075 24 C 20.957 23.998 20.84 23.972 20.729 23.924 C 20.622 23.875 20.524 23.804 20.441 23.715 L 10.193 12.72 C 10.013 12.526 9.912 12.268 9.912 11.998 C 9.912 11.728 10.013 11.469 10.193 11.276 L 20.441 0.284 Z"></path>
727
727
  </svg>
728
- `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
728
+ `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
729
729
  }
730
730
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconArrowLeftDoubleComponent, decorators: [{
731
731
  type: Component,
@@ -733,7 +733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
733
733
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
734
734
  <path fill="currentColor" d="M 12.529 0.284 C 12.614 0.194 12.714 0.123 12.825 0.074 C 12.936 0.025 13.055 0 13.175 0 C 13.295 0 13.414 0.025 13.524 0.074 C 13.636 0.123 13.736 0.194 13.82 0.284 C 13.992 0.469 14.087 0.716 14.087 0.974 C 14.087 1.232 13.992 1.479 13.82 1.664 L 4.181 11.998 L 13.82 22.334 C 13.906 22.427 13.975 22.537 14.021 22.657 C 14.067 22.778 14.089 22.907 14.088 23.037 C 14.087 23.166 14.061 23.295 14.013 23.414 C 13.963 23.533 13.893 23.641 13.803 23.732 C 13.719 23.818 13.619 23.887 13.509 23.933 C 13.399 23.979 13.282 24.001 13.163 24 C 13.045 23.998 12.928 23.972 12.82 23.924 C 12.711 23.875 12.613 23.804 12.529 23.715 L 2.281 12.72 C 2.101 12.526 2 12.268 2 11.998 C 2 11.728 2.101 11.469 2.281 11.276 L 12.529 0.284 Z M 20.441 0.284 C 20.525 0.194 20.625 0.123 20.736 0.074 C 20.847 0.025 20.966 0 21.086 0 C 21.206 0 21.325 0.025 21.436 0.074 C 21.546 0.123 21.647 0.194 21.729 0.284 C 21.903 0.469 21.999 0.716 21.999 0.974 C 21.999 1.232 21.903 1.479 21.729 1.664 L 12.093 11.998 L 21.729 22.334 C 21.818 22.427 21.886 22.537 21.933 22.657 C 21.978 22.778 22.001 22.907 22 23.037 C 21.999 23.166 21.973 23.295 21.923 23.414 C 21.875 23.533 21.804 23.641 21.715 23.732 C 21.629 23.818 21.529 23.887 21.42 23.933 C 21.309 23.979 21.194 24.001 21.075 24 C 20.957 23.998 20.84 23.972 20.729 23.924 C 20.622 23.875 20.524 23.804 20.441 23.715 L 10.193 12.72 C 10.013 12.526 9.912 12.268 9.912 11.998 C 9.912 11.728 10.013 11.469 10.193 11.276 L 20.441 0.284 Z"></path>
735
735
  </svg>
736
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
736
+ `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
737
737
  }] });
738
738
 
739
739
  /*
@@ -742,11 +742,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
742
742
  */
743
743
  class IconArrowRightDoubleComponent {
744
744
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconArrowRightDoubleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
745
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconArrowRightDoubleComponent, isStandalone: true, selector: "ngx-bsl-icon-arrow-right-double", ngImport: i0, template: `
745
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: IconArrowRightDoubleComponent, isStandalone: true, selector: "ngx-bsl-icon-arrow-right-double", host: { properties: { "class.bsl-icon": "true" } }, ngImport: i0, template: `
746
746
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
747
747
  <path fill="currentColor" d="M 12.523 0.284 C 12.448 0.194 12.358 0.123 12.257 0.074 C 12.158 0.025 12.051 0 11.943 0 C 11.835 0 11.728 0.025 11.628 0.074 C 11.528 0.123 11.438 0.194 11.362 0.284 C 11.208 0.469 11.121 0.716 11.121 0.974 C 11.121 1.232 11.208 1.479 11.362 1.664 L 20.037 11.998 L 11.362 22.334 C 11.284 22.427 11.223 22.537 11.181 22.657 C 11.139 22.778 11.119 22.907 11.12 23.037 C 11.121 23.166 11.145 23.295 11.189 23.414 C 11.233 23.533 11.297 23.641 11.376 23.732 C 11.453 23.818 11.543 23.887 11.641 23.933 C 11.741 23.979 11.846 24.001 11.953 24 C 12.059 23.998 12.164 23.972 12.262 23.924 C 12.361 23.875 12.449 23.804 12.523 23.715 L 21.747 12.72 C 21.909 12.526 22 12.268 22 11.998 C 22 11.728 21.909 11.469 21.747 11.276 L 12.523 0.284 Z M 5.403 0.284 C 5.327 0.194 5.237 0.123 5.138 0.074 C 5.037 0.025 4.93 0 4.822 0 C 4.714 0 4.607 0.025 4.508 0.074 C 4.408 0.123 4.317 0.194 4.243 0.284 C 4.087 0.469 4.001 0.716 4.001 0.974 C 4.001 1.232 4.087 1.479 4.243 1.664 L 12.917 11.998 L 4.243 22.334 C 4.164 22.427 4.102 22.537 4.061 22.657 C 4.02 22.778 3.999 22.907 4 23.037 C 4.001 23.166 4.025 23.295 4.069 23.414 C 4.113 23.533 4.176 23.641 4.257 23.732 C 4.333 23.818 4.423 23.887 4.522 23.933 C 4.621 23.979 4.726 24.001 4.833 24 C 4.939 23.998 5.044 23.972 5.143 23.924 C 5.24 23.875 5.328 23.804 5.403 23.715 L 14.627 12.72 C 14.789 12.526 14.88 12.268 14.88 11.998 C 14.88 11.728 14.789 11.469 14.627 11.276 L 5.403 0.284 Z"></path>
748
748
  </svg>
749
- `, isInline: true, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
749
+ `, isInline: true, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
750
750
  }
751
751
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: IconArrowRightDoubleComponent, decorators: [{
752
752
  type: Component,
@@ -754,7 +754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
754
754
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
755
755
  <path fill="currentColor" d="M 12.523 0.284 C 12.448 0.194 12.358 0.123 12.257 0.074 C 12.158 0.025 12.051 0 11.943 0 C 11.835 0 11.728 0.025 11.628 0.074 C 11.528 0.123 11.438 0.194 11.362 0.284 C 11.208 0.469 11.121 0.716 11.121 0.974 C 11.121 1.232 11.208 1.479 11.362 1.664 L 20.037 11.998 L 11.362 22.334 C 11.284 22.427 11.223 22.537 11.181 22.657 C 11.139 22.778 11.119 22.907 11.12 23.037 C 11.121 23.166 11.145 23.295 11.189 23.414 C 11.233 23.533 11.297 23.641 11.376 23.732 C 11.453 23.818 11.543 23.887 11.641 23.933 C 11.741 23.979 11.846 24.001 11.953 24 C 12.059 23.998 12.164 23.972 12.262 23.924 C 12.361 23.875 12.449 23.804 12.523 23.715 L 21.747 12.72 C 21.909 12.526 22 12.268 22 11.998 C 22 11.728 21.909 11.469 21.747 11.276 L 12.523 0.284 Z M 5.403 0.284 C 5.327 0.194 5.237 0.123 5.138 0.074 C 5.037 0.025 4.93 0 4.822 0 C 4.714 0 4.607 0.025 4.508 0.074 C 4.408 0.123 4.317 0.194 4.243 0.284 C 4.087 0.469 4.001 0.716 4.001 0.974 C 4.001 1.232 4.087 1.479 4.243 1.664 L 12.917 11.998 L 4.243 22.334 C 4.164 22.427 4.102 22.537 4.061 22.657 C 4.02 22.778 3.999 22.907 4 23.037 C 4.001 23.166 4.025 23.295 4.069 23.414 C 4.113 23.533 4.176 23.641 4.257 23.732 C 4.333 23.818 4.423 23.887 4.522 23.933 C 4.621 23.979 4.726 24.001 4.833 24 C 4.939 23.998 5.044 23.972 5.143 23.924 C 5.24 23.875 5.328 23.804 5.403 23.715 L 14.627 12.72 C 14.789 12.526 14.88 12.268 14.88 11.998 C 14.88 11.728 14.789 11.469 14.627 11.276 L 5.403 0.284 Z"></path>
756
756
  </svg>
757
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;justify-content:center;align-items:center}:host svg{width:1rem;height:1rem}\n"] }]
757
+ `, host: { '[class.bsl-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".bsl-icon{display:inline-flex;justify-content:center;align-items:center}.bsl-icon svg{width:1rem;height:1rem}\n"] }]
758
758
  }] });
759
759
 
760
760
  class PaginationComponent {
@@ -981,6 +981,7 @@ class RangeComponent {
981
981
  }
982
982
  if (range) {
983
983
  this.value.update(() => range);
984
+ this.onChange(this.value());
984
985
  }
985
986
  }
986
987
  valueInRange(value) {
@@ -1019,6 +1020,7 @@ class RangeComponent {
1019
1020
  const diff = direction === RangeMoveDirection.BACKWARD ? -this._step() : this._step();
1020
1021
  const newFrom = this.value().from + diff;
1021
1022
  this.value.update((value) => new Range(round(newFrom, this.stepDigits()), value.to));
1023
+ this.onChange(this.value());
1022
1024
  this.computeFromThumbPosition();
1023
1025
  this.overlappingThumb.set(Thumb.FROM);
1024
1026
  }
@@ -1032,6 +1034,7 @@ class RangeComponent {
1032
1034
  const diff = direction === RangeMoveDirection.BACKWARD ? -this._step() : this._step();
1033
1035
  const newTo = this.value().to + diff;
1034
1036
  this.value.update((value) => new Range(value.from, round(newTo, this.stepDigits())));
1037
+ this.onChange(this.value());
1035
1038
  this.computeToThumbPosition();
1036
1039
  this.overlappingThumb.set(Thumb.TO);
1037
1040
  }
@@ -1056,10 +1059,12 @@ class RangeComponent {
1056
1059
  const thumb = this.selectThumbToMove(pointerPosition);
1057
1060
  if (thumb === Thumb.FROM) {
1058
1061
  this.value.update((value) => new Range(newValue, value.to));
1062
+ this.onChange(this.value());
1059
1063
  this.computeFromThumbPosition();
1060
1064
  }
1061
1065
  else {
1062
1066
  this.value.update((value) => new Range(value.from, newValue));
1067
+ this.onChange(this.value());
1063
1068
  this.computeToThumbPosition();
1064
1069
  }
1065
1070
  }
@@ -1140,7 +1145,7 @@ class SelectComponent {
1140
1145
  listBox = viewChild(ListBoxComponent, ...(ngDevMode ? [{ debugName: "listBox" }] : []));
1141
1146
  onChange = (_value) => { };
1142
1147
  onTouch = () => { };
1143
- value = null;
1148
+ value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
1144
1149
  open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
1145
1150
  ariaActiveDescendant = computed(() => this.listBox()?.ariaActiveDescendant() ?? null, ...(ngDevMode ? [{ debugName: "ariaActiveDescendant" }] : []));
1146
1151
  initialFocusedOptionIndex = signal(null, ...(ngDevMode ? [{ debugName: "initialFocusedOptionIndex" }] : []));
@@ -1160,8 +1165,8 @@ class SelectComponent {
1160
1165
  }
1161
1166
  }
1162
1167
  onSelectOption(value) {
1163
- this.value = value;
1164
- this.onChange(this.value);
1168
+ this.value.set(value);
1169
+ this.onChange(value);
1165
1170
  this.hideListBox();
1166
1171
  }
1167
1172
  onKeydown(event) {
@@ -1186,16 +1191,16 @@ class SelectComponent {
1186
1191
  this.onTouch = onTouch;
1187
1192
  }
1188
1193
  writeValue(value) {
1189
- this.value = value;
1194
+ this.value.set(value);
1190
1195
  }
1191
1196
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1192
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: SelectComponent, isStandalone: true, selector: "ngx-bsl-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, comparisonField: { classPropertyName: "comparisonField", publicName: "comparisonField", isSignal: true, isRequired: false, transformFunction: null }, iconMode: { classPropertyName: "iconMode", publicName: "iconMode", isSignal: true, isRequired: false, transformFunction: null }, customIcon: { classPropertyName: "customIcon", publicName: "customIcon", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1197
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: SelectComponent, isStandalone: true, selector: "ngx-bsl-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, comparisonField: { classPropertyName: "comparisonField", publicName: "comparisonField", isSignal: true, isRequired: false, transformFunction: null }, iconMode: { classPropertyName: "iconMode", publicName: "iconMode", isSignal: true, isRequired: false, transformFunction: null }, customIcon: { classPropertyName: "customIcon", publicName: "customIcon", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
1193
1198
  {
1194
1199
  provide: NG_VALUE_ACCESSOR,
1195
1200
  useExisting: forwardRef(() => SelectComponent),
1196
1201
  multi: true,
1197
1202
  },
1198
- ], viewQueries: [{ propertyName: "listBox", first: true, predicate: ListBoxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<button\n type=\"button\"\n role=\"combobox\"\n #selectButton\n cdkOverlayOrigin\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"'list-box-' + id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n (click)=\"onClick()\"\n (keydown.enter)=\"onKeydown($any($event))\"\n (keydown.space)=\"onKeydown($any($event))\"\n (keydown.arrowUp)=\"onKeydown($any($event))\"\n (keydown.arrowDown)=\"onKeydown($any($event))\"\n (keydown.escape)=\"hideListBox()\">\n @if (iconMode()) {\n <ng-content select=\"[data-custom-icon]\"></ng-content>\n } @else {\n <span>{{ value ? (value | listBoxOptionValueConverter : bindLabel()) : placeholder() }}</span>\n\n @if (customIcon()) {\n <ng-content select=\"[data-custom-icon]\"></ng-content>\n } @else {\n <ngx-bsl-icon-chevron-down></ngx-bsl-icon-chevron-down>\n }\n }\n</button>\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectButton\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayWidth]=\"dropdownWidth() || selectButton.offsetWidth\"\n (overlayOutsideClick)=\"hideListBox()\">\n <ngx-bsl-list-box\n [initialValue]=\"value\"\n [initialFocusedOptionIndex]=\"initialFocusedOptionIndex()\"\n [comparisonField]=\"comparisonField()\"\n [id]=\"'list-box-' + id()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledby]=\"ariaLabelledBy()\"\n [exposeAriaActiveDescendant]=\"true\"\n (selectOption)=\"onSelectOption($event)\">\n @for (option of options(); track option) {\n <ngx-bsl-list-box-option\n [id]=\"'list-box-option-' + id()\"\n [value]=\"option\">\n <ng-container>{{ option | listBoxOptionValueConverter : bindLabel() }}</ng-container>\n </ngx-bsl-list-box-option>\n }\n </ngx-bsl-list-box>\n</ng-template>\n", styles: ["button{width:100%;min-height:2.25rem;justify-content:space-between;gap:.5rem}button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: IconChevronDownComponent, selector: "ngx-bsl-icon-chevron-down" }, { kind: "component", type: ListBoxComponent, selector: "ngx-bsl-list-box", inputs: ["id", "ariaLabel", "ariaLabelledby", "exposeAriaActiveDescendant", "comparisonField", "initialValue", "initialFocusedOptionIndex"], outputs: ["selectOption"] }, { kind: "component", type: ListBoxOptionComponent, selector: "ngx-bsl-list-box-option", inputs: ["value", "id"] }, { kind: "pipe", type: ListBoxOptionValueConverterPipe, name: "listBoxOptionValueConverter" }] });
1203
+ ], viewQueries: [{ propertyName: "listBox", first: true, predicate: ListBoxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<button\n type=\"button\"\n role=\"combobox\"\n #selectButton\n class=\"bsl-select-button\"\n cdkOverlayOrigin\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"'list-box-' + id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n [class.button-icon]=\"iconMode()\"\n (click)=\"onClick()\"\n (keydown.enter)=\"onKeydown($any($event))\"\n (keydown.space)=\"onKeydown($any($event))\"\n (keydown.arrowUp)=\"onKeydown($any($event))\"\n (keydown.arrowDown)=\"onKeydown($any($event))\"\n (keydown.escape)=\"hideListBox()\">\n @if (iconMode()) {\n <ng-content select=\"[data-custom-icon]\"></ng-content>\n } @else {\n <span>{{ value() ? (value() | listBoxOptionValueConverter : bindLabel()) : placeholder() }}</span>\n\n @if (customIcon()) {\n <ng-content select=\"[data-custom-icon]\"></ng-content>\n } @else {\n <ngx-bsl-icon-chevron-down></ngx-bsl-icon-chevron-down>\n }\n }\n</button>\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectButton\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayWidth]=\"dropdownWidth() || selectButton.offsetWidth\"\n (overlayOutsideClick)=\"hideListBox()\">\n <ngx-bsl-list-box\n [initialValue]=\"value()\"\n [initialFocusedOptionIndex]=\"initialFocusedOptionIndex()\"\n [comparisonField]=\"comparisonField()\"\n [id]=\"'list-box-' + id()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledby]=\"ariaLabelledBy()\"\n [exposeAriaActiveDescendant]=\"true\"\n (selectOption)=\"onSelectOption($event)\">\n @for (option of options(); track option) {\n <ngx-bsl-list-box-option\n [id]=\"'list-box-option-' + id()\"\n [value]=\"option\">\n <ng-container>{{ option | listBoxOptionValueConverter : bindLabel() }}</ng-container>\n </ngx-bsl-list-box-option>\n }\n </ngx-bsl-list-box>\n</ng-template>\n", styles: [".bsl-select-button{width:100%;min-height:2.25rem;justify-content:space-between;gap:.5rem}.bsl-select-button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: IconChevronDownComponent, selector: "ngx-bsl-icon-chevron-down" }, { kind: "component", type: ListBoxComponent, selector: "ngx-bsl-list-box", inputs: ["id", "ariaLabel", "ariaLabelledby", "exposeAriaActiveDescendant", "comparisonField", "initialValue", "initialFocusedOptionIndex"], outputs: ["selectOption"] }, { kind: "component", type: ListBoxOptionComponent, selector: "ngx-bsl-list-box-option", inputs: ["value", "id"] }, { kind: "pipe", type: ListBoxOptionValueConverterPipe, name: "listBoxOptionValueConverter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1199
1204
  }
1200
1205
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SelectComponent, decorators: [{
1201
1206
  type: Component,
@@ -1212,8 +1217,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
1212
1217
  useExisting: forwardRef(() => SelectComponent),
1213
1218
  multi: true,
1214
1219
  },
1215
- ], template: "<button\n type=\"button\"\n role=\"combobox\"\n #selectButton\n cdkOverlayOrigin\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"'list-box-' + id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n (click)=\"onClick()\"\n (keydown.enter)=\"onKeydown($any($event))\"\n (keydown.space)=\"onKeydown($any($event))\"\n (keydown.arrowUp)=\"onKeydown($any($event))\"\n (keydown.arrowDown)=\"onKeydown($any($event))\"\n (keydown.escape)=\"hideListBox()\">\n @if (iconMode()) {\n <ng-content select=\"[data-custom-icon]\"></ng-content>\n } @else {\n <span>{{ value ? (value | listBoxOptionValueConverter : bindLabel()) : placeholder() }}</span>\n\n @if (customIcon()) {\n <ng-content select=\"[data-custom-icon]\"></ng-content>\n } @else {\n <ngx-bsl-icon-chevron-down></ngx-bsl-icon-chevron-down>\n }\n }\n</button>\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectButton\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayWidth]=\"dropdownWidth() || selectButton.offsetWidth\"\n (overlayOutsideClick)=\"hideListBox()\">\n <ngx-bsl-list-box\n [initialValue]=\"value\"\n [initialFocusedOptionIndex]=\"initialFocusedOptionIndex()\"\n [comparisonField]=\"comparisonField()\"\n [id]=\"'list-box-' + id()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledby]=\"ariaLabelledBy()\"\n [exposeAriaActiveDescendant]=\"true\"\n (selectOption)=\"onSelectOption($event)\">\n @for (option of options(); track option) {\n <ngx-bsl-list-box-option\n [id]=\"'list-box-option-' + id()\"\n [value]=\"option\">\n <ng-container>{{ option | listBoxOptionValueConverter : bindLabel() }}</ng-container>\n </ngx-bsl-list-box-option>\n }\n </ngx-bsl-list-box>\n</ng-template>\n", styles: ["button{width:100%;min-height:2.25rem;justify-content:space-between;gap:.5rem}button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
1216
- }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], comparisonField: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparisonField", required: false }] }], iconMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconMode", required: false }] }], customIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "customIcon", required: false }] }], dropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidth", required: false }] }], listBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ListBoxComponent), { isSignal: true }] }] } });
1220
+ ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<button\n type=\"button\"\n role=\"combobox\"\n #selectButton\n class=\"bsl-select-button\"\n cdkOverlayOrigin\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"'list-box-' + id()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-activedescendant]=\"ariaActiveDescendant()\"\n [class.button-icon]=\"iconMode()\"\n (click)=\"onClick()\"\n (keydown.enter)=\"onKeydown($any($event))\"\n (keydown.space)=\"onKeydown($any($event))\"\n (keydown.arrowUp)=\"onKeydown($any($event))\"\n (keydown.arrowDown)=\"onKeydown($any($event))\"\n (keydown.escape)=\"hideListBox()\">\n @if (iconMode()) {\n <ng-content select=\"[data-custom-icon]\"></ng-content>\n } @else {\n <span>{{ value() ? (value() | listBoxOptionValueConverter : bindLabel()) : placeholder() }}</span>\n\n @if (customIcon()) {\n <ng-content select=\"[data-custom-icon]\"></ng-content>\n } @else {\n <ngx-bsl-icon-chevron-down></ngx-bsl-icon-chevron-down>\n }\n }\n</button>\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"selectButton\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayWidth]=\"dropdownWidth() || selectButton.offsetWidth\"\n (overlayOutsideClick)=\"hideListBox()\">\n <ngx-bsl-list-box\n [initialValue]=\"value()\"\n [initialFocusedOptionIndex]=\"initialFocusedOptionIndex()\"\n [comparisonField]=\"comparisonField()\"\n [id]=\"'list-box-' + id()\"\n [ariaLabel]=\"ariaLabel()\"\n [ariaLabelledby]=\"ariaLabelledBy()\"\n [exposeAriaActiveDescendant]=\"true\"\n (selectOption)=\"onSelectOption($event)\">\n @for (option of options(); track option) {\n <ngx-bsl-list-box-option\n [id]=\"'list-box-option-' + id()\"\n [value]=\"option\">\n <ng-container>{{ option | listBoxOptionValueConverter : bindLabel() }}</ng-container>\n </ngx-bsl-list-box-option>\n }\n </ngx-bsl-list-box>\n</ng-template>\n", styles: [".bsl-select-button{width:100%;min-height:2.25rem;justify-content:space-between;gap:.5rem}.bsl-select-button span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
1221
+ }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], comparisonField: [{ type: i0.Input, args: [{ isSignal: true, alias: "comparisonField", required: false }] }], iconMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconMode", required: false }] }], customIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "customIcon", required: false }] }], dropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidth", required: false }] }], listBox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ListBoxComponent), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
1217
1222
 
1218
1223
  class TooltipComponent {
1219
1224
  message = '';