@ng-solid/design-system 22.0.6 → 22.1.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/README.md +36 -0
  2. package/fesm2022/ng-solid-design-system.mjs +496 -669
  3. package/fesm2022/ng-solid-design-system.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/types/ng-solid-design-system.d.ts +177 -179
package/fesm2022/ng-solid-design-system.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { inject, ElementRef, ChangeDetectorRef, PLATFORM_ID, Renderer2, NgZone, numberAttribute, ViewChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, Directive, forwardRef, Injectable, LOCALE_ID, HostListener, ContentChildren, ApplicationRef, DestroyRef, EnvironmentInjector, DOCUMENT, createComponent, Injector, ContentChild, DEFAULT_CURRENCY_CODE, HostBinding, Output, InjectionToken, Pipe, ViewContainerRef, RendererFactory2, TemplateRef } from '@angular/core';
2
+ import { input, numberAttribute, inject, ElementRef, ChangeDetectorRef, PLATFORM_ID, Renderer2, NgZone, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, model, Directive, forwardRef, Injectable, LOCALE_ID, effect, HostListener, ContentChildren, ApplicationRef, DestroyRef, EnvironmentInjector, DOCUMENT, createComponent, Injector, ContentChild, DEFAULT_CURRENCY_CODE, computed, HostBinding, output, InjectionToken, Pipe, ViewContainerRef, RendererFactory2, TemplateRef } from '@angular/core';
3
3
  import * as i1$1 from '@angular/common';
4
4
  import { isPlatformBrowser, NgClass, DATE_PIPE_DEFAULT_OPTIONS, CommonModule, TitleCasePipe, NgStyle } from '@angular/common';
5
5
  import { isValidURL, Guid, nsAutoClose, NS_FORMAT_OPTIONS, YesNo, NsSafeHtmlPipe, NsHumanizePipe, NS_UPLOAD_CLIENT, NsFile, notEmpty } from '@ng-solid/core';
@@ -8,19 +8,19 @@ import * as i1 from '@angular/forms';
8
8
  import { FormsModule, NG_VALUE_ACCESSOR, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
9
9
  import { Subject, filter, timer, take as take$1, tap } from 'rxjs';
10
10
  import { isSameMonth, getLocalTimeZone, today, DateFormatter, startOfWeek, getWeeksInMonth, getDayOfWeek, isToday, parseDate, isEqualDay, startOfMonth, endOfMonth } from '@internationalized/date';
11
- import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
11
+ import { takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
12
12
  import { NumberFormatter, NumberParser } from '@internationalized/number';
13
13
  import { RouterLink } from '@angular/router';
14
14
  import { take } from 'rxjs/operators';
15
15
  import { DomSanitizer } from '@angular/platform-browser';
16
16
 
17
17
  class NsAvatarComponent {
18
- src;
19
- atl;
20
- icon;
21
- shape = 'circle';
22
- size = 'small';
23
- gap = 4;
18
+ src = input(undefined, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
19
+ atl = input(undefined, ...(ngDevMode ? [{ debugName: "atl" }] : /* istanbul ignore next */ []));
20
+ icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
21
+ shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
22
+ size = input('small', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
23
+ gap = input(4, { ...(ngDevMode ? { debugName: "gap" } : /* istanbul ignore next */ {}), transform: numberAttribute });
24
24
  textRef;
25
25
  hasCover;
26
26
  hasIcon;
@@ -30,18 +30,18 @@ class NsAvatarComponent {
30
30
  renderer = inject(Renderer2);
31
31
  ngZone = inject(NgZone);
32
32
  ngOnChanges() {
33
- this.hasCover = isValidURL(this.src);
34
- this.hasIcon = !this.src && !!this.icon;
33
+ this.hasCover = isValidURL(this.src());
34
+ this.hasIcon = !this.src() && !!this.icon();
35
35
  this.notifyCalc();
36
36
  }
37
37
  imgError($event) {
38
38
  if (!$event.defaultPrevented) {
39
39
  this.hasIcon = false;
40
40
  this.hasCover = false;
41
- if (this.icon) {
41
+ if (this.icon()) {
42
42
  this.hasIcon = true;
43
43
  }
44
- else if (isValidURL(this.src)) {
44
+ else if (isValidURL(this.src())) {
45
45
  this.hasCover = true;
46
46
  }
47
47
  this.cdr.detectChanges();
@@ -55,7 +55,7 @@ class NsAvatarComponent {
55
55
  }
56
56
  const childrenWidth = textEl.offsetWidth;
57
57
  const avatarWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
58
- const offset = this.gap * 2 < avatarWidth ? this.gap * 2 : 8;
58
+ const offset = this.gap() * 2 < avatarWidth ? this.gap() * 2 : 8;
59
59
  const scale = avatarWidth - offset < childrenWidth
60
60
  ? (avatarWidth - offset) / childrenWidth
61
61
  : 1;
@@ -67,16 +67,16 @@ class NsAvatarComponent {
67
67
  }
68
68
  }
69
69
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
70
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsAvatarComponent, isStandalone: true, selector: "ns-avatar", inputs: { src: "src", atl: "atl", icon: "icon", shape: "shape", size: "size", gap: ["gap", "gap", numberAttribute] }, host: { properties: { "class.ns-avatar--circle": "shape === 'circle'", "class.ns-avatar--square": "shape === 'square'", "class.ns-avatar--large": "size === 'large'", "class.ns-avatar--medium": "size === 'medium'", "class.ns-avatar--small": "size === 'small'" }, classAttribute: "ns-avatar" }, viewQueries: [{ propertyName: "textRef", first: true, predicate: ["textRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
70
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsAvatarComponent, isStandalone: true, selector: "ns-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, atl: { classPropertyName: "atl", publicName: "atl", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-avatar--circle": "shape() === 'circle'", "class.ns-avatar--square": "shape() === 'square'", "class.ns-avatar--large": "size() === 'large'", "class.ns-avatar--medium": "size() === 'medium'", "class.ns-avatar--small": "size() === 'small'" }, classAttribute: "ns-avatar" }, viewQueries: [{ propertyName: "textRef", first: true, predicate: ["textRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
71
71
  @if (hasCover) {
72
72
  <img
73
73
  class="ns-avatar__cover"
74
- [attr.src]="src"
75
- [attr.alt]="atl"
74
+ [attr.src]="src()"
75
+ [attr.alt]="atl()"
76
76
  (error)="imgError($event)"
77
77
  />
78
78
  } @else {
79
- <span class="ns-avatar__text" #textRef>{{ src }}</span>
79
+ <span class="ns-avatar__text" #textRef>{{ src() }}</span>
80
80
  }
81
81
  `, isInline: true, styles: [".ns-avatar{box-sizing:border-box;margin:0;padding:0;color:#fff;font-size:1rem;font-variant:tabular-nums;list-style:none;font-feature-settings:\"tnum\";position:relative;display:inline-block;overflow:hidden;white-space:nowrap;text-align:center;vertical-align:middle;background:#ccc}.ns-avatar--small{line-height:2rem;width:2rem;height:2rem}.ns-avatar--medium{line-height:3rem;width:3rem;height:3rem}.ns-avatar--large{font-size:1.5rem;line-height:4rem;width:4rem;height:4rem}.ns-avatar--circle{border-radius:50%}.ns-avatar--square{border-radius:2px}.ns-avatar__cover{border:2px solid transparent;border-radius:100px;background:radial-gradient(circle,#5dea63,#11b719);box-sizing:border-box}.ns-avatar__text{transform-origin:0 center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
82
82
  }
@@ -86,147 +86,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
86
86
  @if (hasCover) {
87
87
  <img
88
88
  class="ns-avatar__cover"
89
- [attr.src]="src"
90
- [attr.alt]="atl"
89
+ [attr.src]="src()"
90
+ [attr.alt]="atl()"
91
91
  (error)="imgError($event)"
92
92
  />
93
93
  } @else {
94
- <span class="ns-avatar__text" #textRef>{{ src }}</span>
94
+ <span class="ns-avatar__text" #textRef>{{ src() }}</span>
95
95
  }
96
96
  `, host: {
97
97
  class: 'ns-avatar',
98
- '[class.ns-avatar--circle]': `shape === 'circle'`,
99
- '[class.ns-avatar--square]': `shape === 'square'`,
100
- '[class.ns-avatar--large]': `size === 'large'`,
101
- '[class.ns-avatar--medium]': `size === 'medium'`,
102
- '[class.ns-avatar--small]': `size === 'small'`
98
+ '[class.ns-avatar--circle]': `shape() === 'circle'`,
99
+ '[class.ns-avatar--square]': `shape() === 'square'`,
100
+ '[class.ns-avatar--large]': `size() === 'large'`,
101
+ '[class.ns-avatar--medium]': `size() === 'medium'`,
102
+ '[class.ns-avatar--small]': `size() === 'small'`
103
103
  }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, encapsulation: ViewEncapsulation.None, styles: [".ns-avatar{box-sizing:border-box;margin:0;padding:0;color:#fff;font-size:1rem;font-variant:tabular-nums;list-style:none;font-feature-settings:\"tnum\";position:relative;display:inline-block;overflow:hidden;white-space:nowrap;text-align:center;vertical-align:middle;background:#ccc}.ns-avatar--small{line-height:2rem;width:2rem;height:2rem}.ns-avatar--medium{line-height:3rem;width:3rem;height:3rem}.ns-avatar--large{font-size:1.5rem;line-height:4rem;width:4rem;height:4rem}.ns-avatar--circle{border-radius:50%}.ns-avatar--square{border-radius:2px}.ns-avatar__cover{border:2px solid transparent;border-radius:100px;background:radial-gradient(circle,#5dea63,#11b719);box-sizing:border-box}.ns-avatar__text{transform-origin:0 center}\n"] }]
104
- }], propDecorators: { src: [{
105
- type: Input,
106
- args: [{ required: true }]
107
- }], atl: [{
108
- type: Input
109
- }], icon: [{
110
- type: Input
111
- }], shape: [{
112
- type: Input
113
- }], size: [{
114
- type: Input
115
- }], gap: [{
116
- type: Input,
117
- args: [{ transform: numberAttribute }]
118
- }], textRef: [{
104
+ }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], atl: [{ type: i0.Input, args: [{ isSignal: true, alias: "atl", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], textRef: [{
119
105
  type: ViewChild,
120
106
  args: ['textRef', { static: false }]
121
107
  }] } });
122
108
 
123
109
  class NsButtonComponent {
124
- label;
125
- type = 'button';
126
- theme = 'secondary';
127
- block;
128
- disabled;
129
- loading;
130
- icon;
131
- value;
110
+ label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
111
+ type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
112
+ theme = input('secondary', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
113
+ block = input(undefined, { ...(ngDevMode ? { debugName: "block" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
114
+ disabled = input(undefined, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
115
+ loading = input(undefined, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
116
+ icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
117
+ value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
132
118
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
133
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsButtonComponent, isStandalone: true, selector: "ns-button", inputs: { label: "label", type: "type", theme: "theme", block: ["block", "block", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], loading: ["loading", "loading", booleanAttribute], icon: "icon", value: "value" }, host: { properties: { "class.ns-button": "true", "class.ns-button__grid": "block", "class.ns-button--loading": "loading", "class.ns-button--disabled": "disabled" } }, ngImport: i0, template: `
119
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsButtonComponent, isStandalone: true, selector: "ns-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-button": "true", "class.ns-button__grid": "block()", "class.ns-button--loading": "loading()", "class.ns-button--disabled": "disabled()" } }, ngImport: i0, template: `
134
120
  <button
135
- [attr.type]="type"
121
+ [attr.type]="type()"
136
122
  class="btn"
137
123
  [ngClass]="{
138
- btn__primary: theme == 'primary',
139
- btn__secondary: theme == 'secondary',
140
- btn__success: theme == 'success',
141
- btn__block: block,
142
- 'btn--icon': icon
124
+ btn__primary: theme() == 'primary',
125
+ btn__secondary: theme() == 'secondary',
126
+ btn__success: theme() == 'success',
127
+ btn__block: block(),
128
+ 'btn--icon': icon()
143
129
  }"
144
- [disabled]="disabled || loading"
130
+ [disabled]="disabled() || loading()"
145
131
  >
146
- @if (!loading) {
147
- @if (icon) {
148
- <ns-icon [name]="icon" size="16" />
132
+ @if (!loading()) {
133
+ @if (icon()) {
134
+ <ns-icon [name]="icon()" size="16" />
149
135
  }
150
- {{ label }}
136
+ {{ label() }}
151
137
  } @else {
152
138
  <ns-icon name="preload" size="16" />
153
139
  }
154
140
  </button>
155
- `, isInline: true, styles: [":host{display:block;width:fit-content}:host.ns-button__grid{display:grid;width:100%}:host.ns-button--disabled,:host.ns-button--loading{pointer-events:none}.btn{display:block;position:relative;border-radius:var(--ns-border-radius, .375rem);vertical-align:center;text-align:center;text-transform:none;font-size:.875rem;line-height:1rem;outline:none;white-space:nowrap;padding:var(--ns-btn-padding-y, .5rem) var(--ns-btn-padding-x, 1rem);cursor:pointer}.btn:disabled{pointer-events:none}.btn__primary{background-color:var(--ns-color-primary, #3665f3);border:1px solid var(--ns-color-primary, #3665f3);color:var(--ns-color-primary-foreground, #fff);min-width:var(--ns-btn-min-width, 5rem)}.btn__primary:focus,.btn__primary:active{color:var(--ns-color-primary-foreground, #fff);border-color:var(--ns-color-primary-hover, #2f57d9);box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__primary:hover{background-color:var(--ns-color-primary-hover, #2f57d9)}.btn__secondary{color:var(--ns-color-foreground, #1f2937);background-color:var(--ns-color-surface, #fff);min-width:var(--ns-btn-min-width, 5rem);border:1px solid var(--ns-color-border, rgb(219, 214, 225))}.btn__secondary:focus,.btn__secondary:active{color:var(--ns-color-foreground, #1f2937);border:1px solid var(--ns-color-border, rgb(219, 214, 225));box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__secondary:hover{background-color:var(--ns-color-surface-muted, rgba(9, 30, 66, .08))}.btn__success{border-color:transparent;background-color:var(--ns-color-success, #0cac42);color:var(--ns-color-primary-foreground, #fff);min-width:var(--ns-btn-min-width, 5rem)}.btn__success:focus,.btn__success:active{color:var(--ns-color-success, #0cac42);border:1px solid var(--ns-color-border, rgb(219, 214, 225));box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__success:hover{background-color:var(--ns-color-success, #0cac42)}.btn__block{width:100%;min-height:2.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }] });
141
+ `, isInline: true, styles: [":host{display:block;width:fit-content}:host.ns-button__grid{display:grid;width:100%}:host.ns-button--disabled,:host.ns-button--loading{pointer-events:none}.btn{display:block;position:relative;border-radius:var(--ns-control-border-radius, var(--ns-border-radius, .375rem));vertical-align:center;text-align:center;text-transform:none;font-size:.875rem;line-height:1rem;outline:none;white-space:nowrap;padding:var(--ns-btn-padding-y, .5rem) var(--ns-btn-padding-x, 1rem);cursor:pointer}.btn:disabled{pointer-events:none}.btn__primary{background-color:var(--ns-color-primary, #3665f3);border:1px solid var(--ns-color-primary, #3665f3);color:var(--ns-color-primary-foreground, #fff);min-width:var(--ns-btn-min-width, 5rem)}.btn__primary:focus,.btn__primary:active{color:var(--ns-color-primary-foreground, #fff);border-color:var(--ns-color-primary-hover, #2f57d9);box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__primary:hover{background-color:var(--ns-color-primary-hover, #2f57d9)}.btn__secondary{color:var(--ns-color-foreground, #1f2937);background-color:var(--ns-color-surface, #fff);min-width:var(--ns-btn-min-width, 5rem);border:1px solid var(--ns-color-border, rgb(219, 214, 225))}.btn__secondary:focus,.btn__secondary:active{color:var(--ns-color-foreground, #1f2937);border:1px solid var(--ns-color-border, rgb(219, 214, 225));box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__secondary:hover{background-color:var(--ns-color-surface-muted, rgba(9, 30, 66, .08))}.btn__success{border-color:transparent;background-color:var(--ns-color-success, #0cac42);color:var(--ns-color-primary-foreground, #fff);min-width:var(--ns-btn-min-width, 5rem)}.btn__success:focus,.btn__success:active{color:var(--ns-color-success, #0cac42);border:1px solid var(--ns-color-border, rgb(219, 214, 225));box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__success:hover{background-color:var(--ns-color-success, #0cac42)}.btn__block{width:100%;min-height:2.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }] });
156
142
  }
157
143
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsButtonComponent, decorators: [{
158
144
  type: Component,
159
145
  args: [{ selector: 'ns-button', imports: [NgClass, NsIconsComponent], template: `
160
146
  <button
161
- [attr.type]="type"
147
+ [attr.type]="type()"
162
148
  class="btn"
163
149
  [ngClass]="{
164
- btn__primary: theme == 'primary',
165
- btn__secondary: theme == 'secondary',
166
- btn__success: theme == 'success',
167
- btn__block: block,
168
- 'btn--icon': icon
150
+ btn__primary: theme() == 'primary',
151
+ btn__secondary: theme() == 'secondary',
152
+ btn__success: theme() == 'success',
153
+ btn__block: block(),
154
+ 'btn--icon': icon()
169
155
  }"
170
- [disabled]="disabled || loading"
156
+ [disabled]="disabled() || loading()"
171
157
  >
172
- @if (!loading) {
173
- @if (icon) {
174
- <ns-icon [name]="icon" size="16" />
158
+ @if (!loading()) {
159
+ @if (icon()) {
160
+ <ns-icon [name]="icon()" size="16" />
175
161
  }
176
- {{ label }}
162
+ {{ label() }}
177
163
  } @else {
178
164
  <ns-icon name="preload" size="16" />
179
165
  }
180
166
  </button>
181
167
  `, host: {
182
168
  '[class.ns-button]': 'true',
183
- '[class.ns-button__grid]': 'block',
184
- '[class.ns-button--loading]': 'loading',
185
- '[class.ns-button--disabled]': 'disabled'
186
- }, styles: [":host{display:block;width:fit-content}:host.ns-button__grid{display:grid;width:100%}:host.ns-button--disabled,:host.ns-button--loading{pointer-events:none}.btn{display:block;position:relative;border-radius:var(--ns-border-radius, .375rem);vertical-align:center;text-align:center;text-transform:none;font-size:.875rem;line-height:1rem;outline:none;white-space:nowrap;padding:var(--ns-btn-padding-y, .5rem) var(--ns-btn-padding-x, 1rem);cursor:pointer}.btn:disabled{pointer-events:none}.btn__primary{background-color:var(--ns-color-primary, #3665f3);border:1px solid var(--ns-color-primary, #3665f3);color:var(--ns-color-primary-foreground, #fff);min-width:var(--ns-btn-min-width, 5rem)}.btn__primary:focus,.btn__primary:active{color:var(--ns-color-primary-foreground, #fff);border-color:var(--ns-color-primary-hover, #2f57d9);box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__primary:hover{background-color:var(--ns-color-primary-hover, #2f57d9)}.btn__secondary{color:var(--ns-color-foreground, #1f2937);background-color:var(--ns-color-surface, #fff);min-width:var(--ns-btn-min-width, 5rem);border:1px solid var(--ns-color-border, rgb(219, 214, 225))}.btn__secondary:focus,.btn__secondary:active{color:var(--ns-color-foreground, #1f2937);border:1px solid var(--ns-color-border, rgb(219, 214, 225));box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__secondary:hover{background-color:var(--ns-color-surface-muted, rgba(9, 30, 66, .08))}.btn__success{border-color:transparent;background-color:var(--ns-color-success, #0cac42);color:var(--ns-color-primary-foreground, #fff);min-width:var(--ns-btn-min-width, 5rem)}.btn__success:focus,.btn__success:active{color:var(--ns-color-success, #0cac42);border:1px solid var(--ns-color-border, rgb(219, 214, 225));box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__success:hover{background-color:var(--ns-color-success, #0cac42)}.btn__block{width:100%;min-height:2.5rem}\n"] }]
187
- }], propDecorators: { label: [{
188
- type: Input
189
- }], type: [{
190
- type: Input
191
- }], theme: [{
192
- type: Input
193
- }], block: [{
194
- type: Input,
195
- args: [{ transform: booleanAttribute }]
196
- }], disabled: [{
197
- type: Input,
198
- args: [{ transform: booleanAttribute }]
199
- }], loading: [{
200
- type: Input,
201
- args: [{ transform: booleanAttribute }]
202
- }], icon: [{
203
- type: Input
204
- }], value: [{
205
- type: Input
206
- }] } });
169
+ '[class.ns-button__grid]': 'block()',
170
+ '[class.ns-button--loading]': 'loading()',
171
+ '[class.ns-button--disabled]': 'disabled()'
172
+ }, styles: [":host{display:block;width:fit-content}:host.ns-button__grid{display:grid;width:100%}:host.ns-button--disabled,:host.ns-button--loading{pointer-events:none}.btn{display:block;position:relative;border-radius:var(--ns-control-border-radius, var(--ns-border-radius, .375rem));vertical-align:center;text-align:center;text-transform:none;font-size:.875rem;line-height:1rem;outline:none;white-space:nowrap;padding:var(--ns-btn-padding-y, .5rem) var(--ns-btn-padding-x, 1rem);cursor:pointer}.btn:disabled{pointer-events:none}.btn__primary{background-color:var(--ns-color-primary, #3665f3);border:1px solid var(--ns-color-primary, #3665f3);color:var(--ns-color-primary-foreground, #fff);min-width:var(--ns-btn-min-width, 5rem)}.btn__primary:focus,.btn__primary:active{color:var(--ns-color-primary-foreground, #fff);border-color:var(--ns-color-primary-hover, #2f57d9);box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__primary:hover{background-color:var(--ns-color-primary-hover, #2f57d9)}.btn__secondary{color:var(--ns-color-foreground, #1f2937);background-color:var(--ns-color-surface, #fff);min-width:var(--ns-btn-min-width, 5rem);border:1px solid var(--ns-color-border, rgb(219, 214, 225))}.btn__secondary:focus,.btn__secondary:active{color:var(--ns-color-foreground, #1f2937);border:1px solid var(--ns-color-border, rgb(219, 214, 225));box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__secondary:hover{background-color:var(--ns-color-surface-muted, rgba(9, 30, 66, .08))}.btn__success{border-color:transparent;background-color:var(--ns-color-success, #0cac42);color:var(--ns-color-primary-foreground, #fff);min-width:var(--ns-btn-min-width, 5rem)}.btn__success:focus,.btn__success:active{color:var(--ns-color-success, #0cac42);border:1px solid var(--ns-color-border, rgb(219, 214, 225));box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__success:hover{background-color:var(--ns-color-success, #0cac42)}.btn__block{width:100%;min-height:2.5rem}\n"] }]
173
+ }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
207
174
 
208
175
  class NsValueAccessor {
209
- type = 'text';
210
- placeholder = '';
211
- label;
212
- disabled;
213
- readonly;
176
+ type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
177
+ placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
178
+ label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
179
+ disabled = model(undefined, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
180
+ readonly = input(undefined, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
214
181
  id = Guid.create();
215
- _value;
216
- get value() {
217
- return this._value;
218
- }
219
- set value(value) {
220
- if (`${this._value}` !== `${value}`) {
182
+ value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
183
+ setValue(value) {
184
+ if (`${this.value()}` !== `${value}`) {
221
185
  this.onChange(value);
222
186
  }
223
- this._value = value;
187
+ this.value.set(value);
224
188
  }
225
189
  onTouched = () => { };
226
190
  onChange = () => { };
227
191
  writeValue(value) {
228
192
  if (typeof value !== 'undefined') {
229
- this._value = value;
193
+ this.value.set(value);
230
194
  }
231
195
  }
232
196
  registerOnChange(fn) {
@@ -236,26 +200,14 @@ class NsValueAccessor {
236
200
  this.onTouched = fn;
237
201
  }
238
202
  setDisabledState(isDisabled) {
239
- this.disabled = isDisabled;
203
+ this.disabled.set(isDisabled);
240
204
  }
241
205
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsValueAccessor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
242
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: NsValueAccessor, isStandalone: true, inputs: { type: "type", placeholder: "placeholder", label: "label", disabled: "disabled", readonly: "readonly", value: "value" }, ngImport: i0 });
206
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.21", type: NsValueAccessor, isStandalone: true, inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange" }, ngImport: i0 });
243
207
  }
244
208
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsValueAccessor, decorators: [{
245
209
  type: Directive
246
- }], propDecorators: { type: [{
247
- type: Input
248
- }], placeholder: [{
249
- type: Input
250
- }], label: [{
251
- type: Input
252
- }], disabled: [{
253
- type: Input
254
- }], readonly: [{
255
- type: Input
256
- }], value: [{
257
- type: Input
258
- }] } });
210
+ }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
259
211
 
260
212
  class NsCheckboxComponent extends NsValueAccessor {
261
213
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -269,14 +221,15 @@ class NsCheckboxComponent extends NsValueAccessor {
269
221
  <label class="form-check-label">
270
222
  <input
271
223
  class="form-check-input"
272
- [(ngModel)]="value"
224
+ [ngModel]="value()"
225
+ (ngModelChange)="setValue($event)"
273
226
  type="checkbox"
274
227
  (blur)="onTouched()"
275
- [disabled]="disabled"
228
+ [disabled]="disabled()"
276
229
  />
277
- {{ label }}
230
+ {{ label() }}
278
231
  </label>
279
- `, isInline: true, styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-radius-sm, .375rem);font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}.form-check-label{margin-bottom:var(--ns-space-2, .5rem)}.form-check-input{position:relative;margin-left:unset;margin-right:var(--ns-space-1, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
232
+ `, isInline: true, styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:var(--ns-control-host-width, 100%);max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem));font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}.form-check-label{margin-bottom:var(--ns-space-2, .5rem)}.form-check-input{position:relative;margin-left:unset;margin-right:var(--ns-space-1, .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
280
233
  }
281
234
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCheckboxComponent, decorators: [{
282
235
  type: Component,
@@ -284,12 +237,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
284
237
  <label class="form-check-label">
285
238
  <input
286
239
  class="form-check-input"
287
- [(ngModel)]="value"
240
+ [ngModel]="value()"
241
+ (ngModelChange)="setValue($event)"
288
242
  type="checkbox"
289
243
  (blur)="onTouched()"
290
- [disabled]="disabled"
244
+ [disabled]="disabled()"
291
245
  />
292
- {{ label }}
246
+ {{ label() }}
293
247
  </label>
294
248
  `, providers: [
295
249
  {
@@ -297,7 +251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
297
251
  useExisting: forwardRef(() => NsCheckboxComponent),
298
252
  multi: true
299
253
  }
300
- ], styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-radius-sm, .375rem);font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}.form-check-label{margin-bottom:var(--ns-space-2, .5rem)}.form-check-input{position:relative;margin-left:unset;margin-right:var(--ns-space-1, .25rem)}\n"] }]
254
+ ], styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:var(--ns-control-host-width, 100%);max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem));font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}.form-check-label{margin-bottom:var(--ns-space-2, .5rem)}.form-check-input{position:relative;margin-left:unset;margin-right:var(--ns-space-1, .25rem)}\n"] }]
301
255
  }] });
302
256
 
303
257
  function isDateSelectable(date, state) {
@@ -599,7 +553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
599
553
  }] });
600
554
 
601
555
  class NsDatePickerMonthComponent {
602
- month;
556
+ month = input(undefined, ...(ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []));
603
557
  service = inject(NsDatepickerService);
604
558
  doSelect(day) {
605
559
  if (!day.context.disabled) {
@@ -607,18 +561,18 @@ class NsDatePickerMonthComponent {
607
561
  }
608
562
  }
609
563
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDatePickerMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
610
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsDatePickerMonthComponent, isStandalone: true, selector: "ns-date-picker-month", inputs: { month: "month" }, ngImport: i0, template: `
564
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsDatePickerMonthComponent, isStandalone: true, selector: "ns-date-picker-month", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
611
565
  <table class="ns-date-picker__month">
612
566
  <thead>
613
567
  <tr>
614
- @for (weekday of month.weekdays; track weekday) {
568
+ @for (weekday of month().weekdays; track weekday) {
615
569
  <th class="ns-date-picker__weekday">{{ weekday | titlecase }}</th>
616
570
  }
617
571
  </tr>
618
572
  </thead>
619
573
 
620
574
  <tbody>
621
- @for (week of month.weeks; track week.number) {
575
+ @for (week of month().weeks; track week.number) {
622
576
  <tr>
623
577
  @for (day of week.days; track day.number) {
624
578
  <td
@@ -649,14 +603,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
649
603
  <table class="ns-date-picker__month">
650
604
  <thead>
651
605
  <tr>
652
- @for (weekday of month.weekdays; track weekday) {
606
+ @for (weekday of month().weekdays; track weekday) {
653
607
  <th class="ns-date-picker__weekday">{{ weekday | titlecase }}</th>
654
608
  }
655
609
  </tr>
656
610
  </thead>
657
611
 
658
612
  <tbody>
659
- @for (week of month.weeks; track week.number) {
613
+ @for (week of month().weeks; track week.number) {
660
614
  <tr>
661
615
  @for (day of week.days; track day.number) {
662
616
  <td
@@ -680,25 +634,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
680
634
  </tbody>
681
635
  </table>
682
636
  `, styles: [".ns-date-picker__day{border:none;background-color:transparent;text-align:center;border-radius:.5rem;height:2rem;width:100%}.ns-date-picker__weekday{font-weight:600;text-align:center}.ns-date-picker--selected>.ns-date-picker__day{background-color:#5b5fc7;color:#fff}.ns-date-picker--current:not(.ns-date-picker--selected)>.ns-date-picker__day{border:2px solid #dcdffa;font-weight:600;color:#5b5fc7}.ns-date-picker--disabled>.ns-date-picker__day{pointer-events:none;color:#bdbdbd}\n"] }]
683
- }], propDecorators: { month: [{
684
- type: Input
685
- }] } });
637
+ }], propDecorators: { month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }] } });
686
638
 
687
639
  class NsDatePickerNavigationComponent {
688
- month;
640
+ month = input(undefined, ...(ngDevMode ? [{ debugName: "month" }] : /* istanbul ignore next */ []));
689
641
  service = inject(NsDatepickerService);
690
642
  prev() {
691
- this.service.navigate(this.month.startDate.subtract({ months: 1 }));
643
+ this.service.navigate(this.month().startDate.subtract({ months: 1 }));
692
644
  }
693
645
  next() {
694
- this.service.navigate(this.month.startDate.add({ months: 1 }));
646
+ this.service.navigate(this.month().startDate.add({ months: 1 }));
695
647
  }
696
648
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDatePickerNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
697
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsDatePickerNavigationComponent, isStandalone: true, selector: "ns-date-picker-navigation", inputs: { month: "month" }, host: { properties: { "class.ns-date-picker__navigation": "true" } }, ngImport: i0, template: `
649
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsDatePickerNavigationComponent, isStandalone: true, selector: "ns-date-picker-navigation", inputs: { month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-date-picker__navigation": "true" } }, ngImport: i0, template: `
698
650
  <div class="ns-date-picker__wrap">
699
651
  <ns-button icon="angle-left" (click)="prev()" />
700
652
  <span class="ns-date-picker__month-title">{{
701
- month.label | titlecase
653
+ month().label | titlecase
702
654
  }}</span>
703
655
  <ns-button icon="angle-right" (click)="next()" />
704
656
  </div>
@@ -710,26 +662,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
710
662
  <div class="ns-date-picker__wrap">
711
663
  <ns-button icon="angle-left" (click)="prev()" />
712
664
  <span class="ns-date-picker__month-title">{{
713
- month.label | titlecase
665
+ month().label | titlecase
714
666
  }}</span>
715
667
  <ns-button icon="angle-right" (click)="next()" />
716
668
  </div>
717
669
  `, host: {
718
670
  '[class.ns-date-picker__navigation]': 'true'
719
671
  }, styles: [".ns-date-picker__wrap{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding:.5rem;margin-bottom:.5rem}.ns-date-picker__wrap::ng-deep .btn{min-width:unset;padding:unset}\n"] }]
720
- }], propDecorators: { month: [{
721
- type: Input
722
- }] } });
672
+ }], propDecorators: { month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }] } });
723
673
 
724
674
  class NsDatePickerMenuComponent {
725
675
  model;
726
- placement;
676
+ placement = input(undefined, ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
677
+ startDate = input(undefined, ...(ngDevMode ? [{ debugName: "startDate" }] : /* istanbul ignore next */ []));
727
678
  service = inject(NsDatepickerService);
728
- set startDate(firstDate) {
729
- this.model = this.service.getMonth(firstDate);
730
- }
679
+ syncStartDate = effect(() => {
680
+ const firstDate = this.startDate();
681
+ if (firstDate) {
682
+ this.model = this.service.getMonth(firstDate);
683
+ }
684
+ }, ...(ngDevMode ? [{ debugName: "syncStartDate" }] : /* istanbul ignore next */ []));
731
685
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDatePickerMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
732
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsDatePickerMenuComponent, isStandalone: true, selector: "ns-date-picker-menu", inputs: { placement: "placement", startDate: "startDate" }, host: { properties: { "class.ns-date-picker__menu": "true", "class.ns-date-picker__menu--start": "placement == \"bottom-start\"", "class.ns-date-picker__menu--end": "placement == \"bottom-end\"" } }, ngImport: i0, template: `
686
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsDatePickerMenuComponent, isStandalone: true, selector: "ns-date-picker-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-date-picker__menu": "true", "class.ns-date-picker__menu--start": "placement() == \"bottom-start\"", "class.ns-date-picker__menu--end": "placement() == \"bottom-end\"" } }, ngImport: i0, template: `
733
687
  <ns-date-picker-navigation [month]="model" />
734
688
  <ns-date-picker-month [month]="model" />
735
689
  `, isInline: true, styles: [":host{position:absolute;overflow:hidden;min-width:100%;height:auto;box-sizing:border-box;z-index:1100;display:block;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem;margin:.5rem 0 0;padding:.5rem}:host.ns-date-picker__menu--start{position:absolute;inset:auto auto auto 0}:host.ns-date-picker__menu--end{position:absolute;inset:auto 0 auto auto}\n"], dependencies: [{ kind: "component", type: NsDatePickerMonthComponent, selector: "ns-date-picker-month", inputs: ["month"] }, { kind: "component", type: NsDatePickerNavigationComponent, selector: "ns-date-picker-navigation", inputs: ["month"] }] });
@@ -741,43 +695,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
741
695
  <ns-date-picker-month [month]="model" />
742
696
  `, host: {
743
697
  '[class.ns-date-picker__menu]': 'true',
744
- '[class.ns-date-picker__menu--start]': 'placement == "bottom-start"',
745
- '[class.ns-date-picker__menu--end]': 'placement == "bottom-end"'
698
+ '[class.ns-date-picker__menu--start]': 'placement() == "bottom-start"',
699
+ '[class.ns-date-picker__menu--end]': 'placement() == "bottom-end"'
746
700
  }, styles: [":host{position:absolute;overflow:hidden;min-width:100%;height:auto;box-sizing:border-box;z-index:1100;display:block;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem;margin:.5rem 0 0;padding:.5rem}:host.ns-date-picker__menu--start{position:absolute;inset:auto auto auto 0}:host.ns-date-picker__menu--end{position:absolute;inset:auto 0 auto auto}\n"] }]
747
- }], propDecorators: { placement: [{
748
- type: Input
749
- }], startDate: [{
750
- type: Input
751
- }] } });
701
+ }], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], startDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDate", required: false }] }] } });
752
702
 
753
703
  class NsDropdownItemDirective {
754
- label;
755
- value;
756
- disabled = false;
704
+ label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
705
+ value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
706
+ disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
757
707
  constructor() { }
758
708
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
759
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: NsDropdownItemDirective, isStandalone: true, selector: "ns-dropdown-item", inputs: { label: "label", value: "value", disabled: "disabled" }, ngImport: i0 });
709
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.21", type: NsDropdownItemDirective, isStandalone: true, selector: "ns-dropdown-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
760
710
  }
761
711
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownItemDirective, decorators: [{
762
712
  type: Directive,
763
713
  args: [{
764
714
  selector: 'ns-dropdown-item'
765
715
  }]
766
- }], ctorParameters: () => [], propDecorators: { label: [{
767
- type: Input
768
- }], value: [{
769
- type: Input
770
- }], disabled: [{
771
- type: Input
772
- }] } });
716
+ }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
773
717
 
774
718
  class NsDropdownComponent extends NsValueAccessor {
775
- labelField = 'label';
776
- valueField = 'value';
777
- iconName;
778
- defaultFirst;
779
- placement = 'start';
780
- filterable;
719
+ labelField = input('label', ...(ngDevMode ? [{ debugName: "labelField" }] : /* istanbul ignore next */ []));
720
+ valueField = input('value', ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
721
+ iconName = input(undefined, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
722
+ defaultFirst = input(undefined, ...(ngDevMode ? [{ debugName: "defaultFirst" }] : /* istanbul ignore next */ []));
723
+ placement = input('start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
724
+ filterable = input(undefined, ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
725
+ collectionInput = input([], { ...(ngDevMode ? { debugName: "collectionInput" } : /* istanbul ignore next */ {}), alias: 'collection' });
781
726
  searchRef;
782
727
  items;
783
728
  show = false;
@@ -786,45 +731,48 @@ class NsDropdownComponent extends NsValueAccessor {
786
731
  _search;
787
732
  constructor() {
788
733
  super();
734
+ effect(() => this.setCollection(this.collectionInput()));
789
735
  }
790
736
  ngOnInit() { }
791
737
  ngAfterContentInit() {
792
738
  if (!this.collection.length && !!this.items) {
793
- this.collection = this.items.toArray().map((item) => ({
794
- label: item.label,
795
- value: item.value,
796
- disabled: item.disabled
797
- }));
739
+ this.setCollection(this.items.toArray().map((item) => ({
740
+ label: item.label(),
741
+ value: item.value(),
742
+ disabled: item.disabled()
743
+ })));
798
744
  }
799
745
  }
800
- set collection(source) {
746
+ setCollection(source) {
801
747
  this._collection = this._filtered = source;
802
748
  }
803
749
  get collection() {
804
- return this.filterable ? this._filtered : this._collection;
750
+ return this.filterable() ? this._filtered : this._collection;
805
751
  }
806
752
  get selected() {
807
- return this.collection.find((item) => item[this.valueField] == this.value);
753
+ return this.collection.find((item) => item[this.valueField()] == this.value());
808
754
  }
809
755
  set search(value) {
810
756
  this._search = value;
811
- this._filtered = this._collection.filter((item) => String(item[this.labelField]).toLowerCase().includes(value.toLowerCase()));
757
+ this._filtered = this._collection.filter((item) => String(item[this.labelField()])
758
+ .toLowerCase()
759
+ .includes(value.toLowerCase()));
812
760
  this.show = !!value;
813
761
  }
814
762
  get search() {
815
763
  return this._search;
816
764
  }
817
765
  select(item) {
818
- const value = item[this.valueField];
766
+ const value = item[this.valueField()];
819
767
  if (typeof value === 'string' || typeof value === 'number') {
820
- this.value = value;
768
+ this.setValue(value);
821
769
  }
822
770
  }
823
771
  toggle(event) {
824
772
  event.preventDefault();
825
- if (!this.disabled) {
773
+ if (!this.disabled()) {
826
774
  this.show = !this.show;
827
- if (this.filterable) {
775
+ if (this.filterable()) {
828
776
  if (this.show) {
829
777
  this.searchRef.nativeElement.focus();
830
778
  }
@@ -838,17 +786,17 @@ class NsDropdownComponent extends NsValueAccessor {
838
786
  keyDown(event) {
839
787
  if (this.show) {
840
788
  let index = this.selected
841
- ? this.collection.findIndex((item) => this.selected[this.valueField] === item[this.valueField])
789
+ ? this.collection.findIndex((item) => this.selected[this.valueField()] === item[this.valueField()])
842
790
  : -1;
843
791
  switch (event.key) {
844
792
  case 'ArrowUp':
845
793
  if (index >= 1) {
846
- this.value = String(this.collection[--index][this.valueField]);
794
+ this.setValue(String(this.collection[--index][this.valueField()]));
847
795
  }
848
796
  break;
849
797
  case 'ArrowDown':
850
798
  if (index < this.collection.length - 1) {
851
- this.value = String(this.collection[++index][this.valueField]);
799
+ this.setValue(String(this.collection[++index][this.valueField()]));
852
800
  }
853
801
  break;
854
802
  case 'Enter':
@@ -865,19 +813,19 @@ class NsDropdownComponent extends NsValueAccessor {
865
813
  }
866
814
  }
867
815
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
868
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsDropdownComponent, isStandalone: true, selector: "ns-dropdown", inputs: { labelField: "labelField", valueField: "valueField", iconName: "iconName", defaultFirst: "defaultFirst", placement: "placement", filterable: "filterable", collection: "collection" }, host: { listeners: { "click": "toggle($event)", "keydown": "keyDown($event)" }, properties: { "class.dropdown": "true", "class.ns-dropdown__filterable": "filterable", "class.show": "show" } }, providers: [
816
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsDropdownComponent, isStandalone: true, selector: "ns-dropdown", inputs: { labelField: { classPropertyName: "labelField", publicName: "labelField", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, defaultFirst: { classPropertyName: "defaultFirst", publicName: "defaultFirst", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, collectionInput: { classPropertyName: "collectionInput", publicName: "collection", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggle($event)", "keydown": "keyDown($event)" }, properties: { "class.dropdown": "true", "class.ns-dropdown__filterable": "filterable()", "class.show": "show" } }, providers: [
869
817
  {
870
818
  provide: NG_VALUE_ACCESSOR,
871
819
  useExisting: forwardRef(() => NsDropdownComponent),
872
820
  multi: true
873
821
  }
874
- ], queries: [{ propertyName: "items", predicate: NsDropdownItemDirective }], viewQueries: [{ propertyName: "searchRef", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (label) {\n <label class=\"form-label\" [attr.for]=\"id\">{{ label }}</label>\n}\n@if (filterable) {\n <div class=\"ns-dropdown__search\" [class.disabled]=\"disabled\">\n <div\n class=\"ns-dropdown__value\"\n [ngClass]=\"{ 'ns-dropdown__placeholder': !selected || show }\"\n [hidden]=\"!!search\"\n >\n <span class=\"ns-dropdown__value-label\">\n {{ !!selected ? selected[labelField] : placeholder }}\n </span>\n </div>\n\n <div class=\"ns-dropdown__input\">\n <input\n class=\"form-control\"\n [(ngModel)]=\"search\"\n #input\n [disabled]=\"disabled\"\n [id]=\"id\"\n />\n </div>\n\n <svg\n class=\"dropdown-toggle\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n height=\"12px\"\n width=\"12px\"\n >\n <path\n d=\"M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z\"\n ></path>\n </svg>\n </div>\n} @else {\n <button\n class=\"btn btn__secondary\"\n [id]=\"id\"\n type=\"button\"\n [disabled]=\"disabled\"\n >\n @if (iconName) {\n <ns-icon [name]=\"iconName\" [size]=\"16\" />\n }\n @if (placeholder && selected) {\n <label class=\"form-label\">\n {{ placeholder }}: <span [innerHtml]=\"selected[labelField]\"></span>\n </label>\n } @else {\n <label\n class=\"form-label\"\n [innerHtml]=\"!!selected ? selected[labelField] : placeholder\"\n ></label>\n }\n\n <svg\n class=\"dropdown-toggle\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n height=\"12px\"\n width=\"12px\"\n >\n <path\n d=\"M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z\"\n ></path>\n </svg>\n </button>\n}\n\n<ul\n class=\"dropdown-menu\"\n [attr.aria-labelledby]=\"id\"\n [ngClass]=\"{\n show: show,\n 'dropdown-start': placement !== 'end',\n 'dropdown-end': placement == 'end'\n }\"\n (mouseleave)=\"show = false\"\n>\n @for (item of collection; track item) {\n <li>\n <button\n class=\"dropdown-item\"\n [ngClass]=\"{ active: selected === item }\"\n (click)=\"select(item)\"\n >\n <svg\n class=\"icon-check-mark\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n height=\"16px\"\n width=\"16px\"\n >\n <path\n d=\"M6.19,14.51a.77.77,0,0,1-.57-.25l-4.2-4.8a.75.75,0,0,1,1.13-1l3.56,4.06L13.36,1.82a.75.75,0,0,1,1-.21.76.76,0,0,1,.21,1.05L6.81,14.18a.73.73,0,0,1-.58.33Z\"\n ></path>\n </svg>\n <span>{{ item[labelField] }}</span>\n </button>\n </li>\n }\n @if (!collection?.length) {\n <button class=\"dropdown-item\">\n <span>No items found</span>\n </button>\n }\n</ul>\n", styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-radius-sm, .375rem);font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}:host.show .dropdown-toggle{transform:rotate(0)}.btn{display:block;position:relative;border-radius:var(--ns-border-radius, .375rem);vertical-align:center;text-align:center;text-transform:none;font-size:.875rem;line-height:1rem;outline:none;white-space:nowrap;padding:var(--ns-btn-padding-y, .5rem) var(--ns-btn-padding-x, 1rem);cursor:pointer}.btn:disabled{pointer-events:none}.btn{display:flex;justify-content:flex-start;align-items:center;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);width:100%}.btn__secondary{color:var(--ns-color-foreground, #1f2937);background-color:var(--ns-color-surface, #fff);min-width:var(--ns-btn-min-width, 5rem);border:1px solid var(--ns-color-border, rgb(219, 214, 225))}.btn__secondary:focus,.btn__secondary:active{color:var(--ns-color-foreground, #1f2937);border:1px solid var(--ns-color-border, rgb(219, 214, 225));box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__secondary:hover{background-color:var(--ns-color-surface-muted, rgba(9, 30, 66, .08))}.btn__secondary{background-color:var(--ns-color-surface, #fff);border:1px solid var(--ns-color-border, #cfcfdb)}.btn__secondary:hover{background-color:var(--ns-color-surface, #fff)}.btn .form-label{text-overflow:ellipsis;overflow:hidden;margin-bottom:unset;font-weight:600}.btn .form-label span{font-weight:400}.btn:disabled{background-color:var(--ns-color-surface-muted, #e9ecef)}.ns-dropdown__search{display:flex;position:relative;flex:1;overflow:hidden;text-overflow:ellipsis;padding-left:10px;padding-right:10px;align-items:center;height:36px}.ns-dropdown__search.disabled{pointer-events:none}.ns-dropdown__search.disabled .ns-dropdown__value-label{opacity:.65}.ns-dropdown__placeholder{color:var(--ns-gray-400, #bdbed4)}.ns-dropdown__value{display:flex;align-items:center;font-weight:600;font-size:.875rem;z-index:1001}.ns-dropdown__input{position:absolute;left:0;width:100%}.ns-dropdown__input .form-control{margin-bottom:unset}.dropdown-menu{min-width:100%;overflow:hidden;overflow-y:auto;position:relative;height:auto;box-sizing:border-box;max-height:240px;z-index:1100;margin-top:.5rem}.dropdown-menu li{position:static;margin:0;padding:0 4px}.dropdown-toggle{margin-left:auto;transform:rotate(180deg);transition:transform .2s ease-in-out 0s;flex-shrink:0}.dropdown-item{display:flex;position:relative;border-radius:4px;box-sizing:border-box;align-items:center;z-index:1}.dropdown-item .icon-check-mark{opacity:0;margin:0 .35rem 0 -.35rem}.dropdown-item.active,.dropdown-item:hover{color:initial;background:var(--ns-color-surface-muted, rgba(108, 96, 199, .08))}.dropdown-item.active{color:var(--ns-color-primary, #584ac0)}.dropdown-item.active .icon-check-mark{opacity:1}.dropdown-item span{line-height:1.4;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.dropdown-start{position:absolute;inset:auto auto auto 0}.dropdown-end{position:absolute;inset:auto 0 auto auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }] });
822
+ ], queries: [{ propertyName: "items", predicate: NsDropdownItemDirective }], viewQueries: [{ propertyName: "searchRef", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n <label class=\"form-label\" [attr.for]=\"id\">{{ label() }}</label>\n}\n@if (filterable()) {\n <div class=\"ns-dropdown__search\" [class.disabled]=\"disabled()\">\n <div\n class=\"ns-dropdown__value\"\n [ngClass]=\"{ 'ns-dropdown__placeholder': !selected || show }\"\n [hidden]=\"!!search\"\n >\n <span class=\"ns-dropdown__value-label\">\n {{ !!selected ? selected[labelField()] : placeholder() }}\n </span>\n </div>\n\n <div class=\"ns-dropdown__input\">\n <input\n class=\"form-control\"\n [(ngModel)]=\"search\"\n #input\n [disabled]=\"disabled()\"\n [id]=\"id\"\n />\n </div>\n\n <svg\n class=\"dropdown-toggle\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n height=\"12px\"\n width=\"12px\"\n >\n <path\n d=\"M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z\"\n ></path>\n </svg>\n </div>\n} @else {\n <button\n class=\"btn btn__secondary\"\n [id]=\"id\"\n type=\"button\"\n [disabled]=\"disabled()\"\n >\n @if (iconName()) {\n <ns-icon [name]=\"iconName()\" [size]=\"16\" />\n }\n @if (placeholder() && selected) {\n <label class=\"form-label\">\n {{ placeholder() }}: <span [innerHtml]=\"selected[labelField()]\"></span>\n </label>\n } @else {\n <label\n class=\"form-label\"\n [innerHtml]=\"!!selected ? selected[labelField()] : placeholder()\"\n ></label>\n }\n\n <svg\n class=\"dropdown-toggle\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n height=\"12px\"\n width=\"12px\"\n >\n <path\n d=\"M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z\"\n ></path>\n </svg>\n </button>\n}\n\n<ul\n class=\"dropdown-menu\"\n [attr.aria-labelledby]=\"id\"\n [ngClass]=\"{\n show: show,\n 'dropdown-start': placement() !== 'end',\n 'dropdown-end': placement() == 'end'\n }\"\n (mouseleave)=\"show = false\"\n>\n @for (item of collection; track item) {\n <li>\n <button\n class=\"dropdown-item\"\n [ngClass]=\"{ active: selected === item }\"\n (click)=\"select(item)\"\n >\n <svg\n class=\"icon-check-mark\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n height=\"16px\"\n width=\"16px\"\n >\n <path\n d=\"M6.19,14.51a.77.77,0,0,1-.57-.25l-4.2-4.8a.75.75,0,0,1,1.13-1l3.56,4.06L13.36,1.82a.75.75,0,0,1,1-.21.76.76,0,0,1,.21,1.05L6.81,14.18a.73.73,0,0,1-.58.33Z\"\n ></path>\n </svg>\n <span>{{ item[labelField()] }}</span>\n </button>\n </li>\n }\n @if (!collection?.length) {\n <button class=\"dropdown-item\">\n <span>No items found</span>\n </button>\n }\n</ul>\n", styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:var(--ns-control-host-width, 100%);max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem));font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}:host.show .dropdown-toggle{transform:rotate(0)}.btn{display:block;position:relative;border-radius:var(--ns-control-border-radius, var(--ns-border-radius, .375rem));vertical-align:center;text-align:center;text-transform:none;font-size:.875rem;line-height:1rem;outline:none;white-space:nowrap;padding:var(--ns-btn-padding-y, .5rem) var(--ns-btn-padding-x, 1rem);cursor:pointer}.btn:disabled{pointer-events:none}.btn{display:flex;justify-content:flex-start;align-items:center;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);width:100%}.btn__secondary{color:var(--ns-color-foreground, #1f2937);background-color:var(--ns-color-surface, #fff);min-width:var(--ns-btn-min-width, 5rem);border:1px solid var(--ns-color-border, rgb(219, 214, 225))}.btn__secondary:focus,.btn__secondary:active{color:var(--ns-color-foreground, #1f2937);border:1px solid var(--ns-color-border, rgb(219, 214, 225));box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__secondary:hover{background-color:var(--ns-color-surface-muted, rgba(9, 30, 66, .08))}.btn__secondary{background-color:var(--ns-color-surface, #fff);border:1px solid var(--ns-color-border, #cfcfdb)}.btn__secondary:hover{background-color:var(--ns-color-surface, #fff)}.btn .form-label{text-overflow:ellipsis;overflow:hidden;margin-bottom:unset;font-weight:600}.btn .form-label span{font-weight:400}.btn:disabled{background-color:var(--ns-color-surface-muted, #e9ecef)}.ns-dropdown__search{display:flex;position:relative;flex:1;overflow:hidden;text-overflow:ellipsis;padding-left:10px;padding-right:10px;align-items:center;height:36px}.ns-dropdown__search.disabled{pointer-events:none}.ns-dropdown__search.disabled .ns-dropdown__value-label{opacity:.65}.ns-dropdown__placeholder{color:var(--ns-gray-400, #bdbed4)}.ns-dropdown__value{display:flex;align-items:center;font-weight:600;font-size:.875rem;z-index:1001}.ns-dropdown__input{position:absolute;left:0;width:100%}.ns-dropdown__input .form-control{margin-bottom:unset}.dropdown-menu{min-width:100%;overflow:hidden;overflow-y:auto;position:relative;height:auto;box-sizing:border-box;max-height:240px;z-index:1100;margin-top:.5rem}.dropdown-menu li{position:static;margin:0;padding:0 4px}.dropdown-toggle{margin-left:auto;transform:rotate(180deg);transition:transform .2s ease-in-out 0s;flex-shrink:0}.dropdown-item{display:flex;position:relative;border-radius:4px;box-sizing:border-box;align-items:center;z-index:1}.dropdown-item .icon-check-mark{opacity:0;margin:0 .35rem 0 -.35rem}.dropdown-item.active,.dropdown-item:hover{color:initial;background:var(--ns-color-surface-muted, rgba(108, 96, 199, .08))}.dropdown-item.active{color:var(--ns-color-primary, #584ac0)}.dropdown-item.active .icon-check-mark{opacity:1}.dropdown-item span{line-height:1.4;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.dropdown-start{position:absolute;inset:auto auto auto 0}.dropdown-end{position:absolute;inset:auto 0 auto auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }] });
875
823
  }
876
824
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDropdownComponent, decorators: [{
877
825
  type: Component,
878
826
  args: [{ selector: 'ns-dropdown', host: {
879
827
  '[class.dropdown]': 'true',
880
- '[class.ns-dropdown__filterable]': 'filterable',
828
+ '[class.ns-dropdown__filterable]': 'filterable()',
881
829
  '[class.show]': 'show'
882
830
  }, providers: [
883
831
  {
@@ -885,27 +833,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
885
833
  useExisting: forwardRef(() => NsDropdownComponent),
886
834
  multi: true
887
835
  }
888
- ], imports: [NgClass, FormsModule, NsIconsComponent], template: "@if (label) {\n <label class=\"form-label\" [attr.for]=\"id\">{{ label }}</label>\n}\n@if (filterable) {\n <div class=\"ns-dropdown__search\" [class.disabled]=\"disabled\">\n <div\n class=\"ns-dropdown__value\"\n [ngClass]=\"{ 'ns-dropdown__placeholder': !selected || show }\"\n [hidden]=\"!!search\"\n >\n <span class=\"ns-dropdown__value-label\">\n {{ !!selected ? selected[labelField] : placeholder }}\n </span>\n </div>\n\n <div class=\"ns-dropdown__input\">\n <input\n class=\"form-control\"\n [(ngModel)]=\"search\"\n #input\n [disabled]=\"disabled\"\n [id]=\"id\"\n />\n </div>\n\n <svg\n class=\"dropdown-toggle\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n height=\"12px\"\n width=\"12px\"\n >\n <path\n d=\"M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z\"\n ></path>\n </svg>\n </div>\n} @else {\n <button\n class=\"btn btn__secondary\"\n [id]=\"id\"\n type=\"button\"\n [disabled]=\"disabled\"\n >\n @if (iconName) {\n <ns-icon [name]=\"iconName\" [size]=\"16\" />\n }\n @if (placeholder && selected) {\n <label class=\"form-label\">\n {{ placeholder }}: <span [innerHtml]=\"selected[labelField]\"></span>\n </label>\n } @else {\n <label\n class=\"form-label\"\n [innerHtml]=\"!!selected ? selected[labelField] : placeholder\"\n ></label>\n }\n\n <svg\n class=\"dropdown-toggle\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n height=\"12px\"\n width=\"12px\"\n >\n <path\n d=\"M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z\"\n ></path>\n </svg>\n </button>\n}\n\n<ul\n class=\"dropdown-menu\"\n [attr.aria-labelledby]=\"id\"\n [ngClass]=\"{\n show: show,\n 'dropdown-start': placement !== 'end',\n 'dropdown-end': placement == 'end'\n }\"\n (mouseleave)=\"show = false\"\n>\n @for (item of collection; track item) {\n <li>\n <button\n class=\"dropdown-item\"\n [ngClass]=\"{ active: selected === item }\"\n (click)=\"select(item)\"\n >\n <svg\n class=\"icon-check-mark\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n height=\"16px\"\n width=\"16px\"\n >\n <path\n d=\"M6.19,14.51a.77.77,0,0,1-.57-.25l-4.2-4.8a.75.75,0,0,1,1.13-1l3.56,4.06L13.36,1.82a.75.75,0,0,1,1-.21.76.76,0,0,1,.21,1.05L6.81,14.18a.73.73,0,0,1-.58.33Z\"\n ></path>\n </svg>\n <span>{{ item[labelField] }}</span>\n </button>\n </li>\n }\n @if (!collection?.length) {\n <button class=\"dropdown-item\">\n <span>No items found</span>\n </button>\n }\n</ul>\n", styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-radius-sm, .375rem);font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}:host.show .dropdown-toggle{transform:rotate(0)}.btn{display:block;position:relative;border-radius:var(--ns-border-radius, .375rem);vertical-align:center;text-align:center;text-transform:none;font-size:.875rem;line-height:1rem;outline:none;white-space:nowrap;padding:var(--ns-btn-padding-y, .5rem) var(--ns-btn-padding-x, 1rem);cursor:pointer}.btn:disabled{pointer-events:none}.btn{display:flex;justify-content:flex-start;align-items:center;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);width:100%}.btn__secondary{color:var(--ns-color-foreground, #1f2937);background-color:var(--ns-color-surface, #fff);min-width:var(--ns-btn-min-width, 5rem);border:1px solid var(--ns-color-border, rgb(219, 214, 225))}.btn__secondary:focus,.btn__secondary:active{color:var(--ns-color-foreground, #1f2937);border:1px solid var(--ns-color-border, rgb(219, 214, 225));box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__secondary:hover{background-color:var(--ns-color-surface-muted, rgba(9, 30, 66, .08))}.btn__secondary{background-color:var(--ns-color-surface, #fff);border:1px solid var(--ns-color-border, #cfcfdb)}.btn__secondary:hover{background-color:var(--ns-color-surface, #fff)}.btn .form-label{text-overflow:ellipsis;overflow:hidden;margin-bottom:unset;font-weight:600}.btn .form-label span{font-weight:400}.btn:disabled{background-color:var(--ns-color-surface-muted, #e9ecef)}.ns-dropdown__search{display:flex;position:relative;flex:1;overflow:hidden;text-overflow:ellipsis;padding-left:10px;padding-right:10px;align-items:center;height:36px}.ns-dropdown__search.disabled{pointer-events:none}.ns-dropdown__search.disabled .ns-dropdown__value-label{opacity:.65}.ns-dropdown__placeholder{color:var(--ns-gray-400, #bdbed4)}.ns-dropdown__value{display:flex;align-items:center;font-weight:600;font-size:.875rem;z-index:1001}.ns-dropdown__input{position:absolute;left:0;width:100%}.ns-dropdown__input .form-control{margin-bottom:unset}.dropdown-menu{min-width:100%;overflow:hidden;overflow-y:auto;position:relative;height:auto;box-sizing:border-box;max-height:240px;z-index:1100;margin-top:.5rem}.dropdown-menu li{position:static;margin:0;padding:0 4px}.dropdown-toggle{margin-left:auto;transform:rotate(180deg);transition:transform .2s ease-in-out 0s;flex-shrink:0}.dropdown-item{display:flex;position:relative;border-radius:4px;box-sizing:border-box;align-items:center;z-index:1}.dropdown-item .icon-check-mark{opacity:0;margin:0 .35rem 0 -.35rem}.dropdown-item.active,.dropdown-item:hover{color:initial;background:var(--ns-color-surface-muted, rgba(108, 96, 199, .08))}.dropdown-item.active{color:var(--ns-color-primary, #584ac0)}.dropdown-item.active .icon-check-mark{opacity:1}.dropdown-item span{line-height:1.4;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.dropdown-start{position:absolute;inset:auto auto auto 0}.dropdown-end{position:absolute;inset:auto 0 auto auto}\n"] }]
889
- }], ctorParameters: () => [], propDecorators: { labelField: [{
890
- type: Input
891
- }], valueField: [{
892
- type: Input
893
- }], iconName: [{
894
- type: Input
895
- }], defaultFirst: [{
896
- type: Input
897
- }], placement: [{
898
- type: Input
899
- }], filterable: [{
900
- type: Input
901
- }], searchRef: [{
836
+ ], imports: [NgClass, FormsModule, NsIconsComponent], template: "@if (label()) {\n <label class=\"form-label\" [attr.for]=\"id\">{{ label() }}</label>\n}\n@if (filterable()) {\n <div class=\"ns-dropdown__search\" [class.disabled]=\"disabled()\">\n <div\n class=\"ns-dropdown__value\"\n [ngClass]=\"{ 'ns-dropdown__placeholder': !selected || show }\"\n [hidden]=\"!!search\"\n >\n <span class=\"ns-dropdown__value-label\">\n {{ !!selected ? selected[labelField()] : placeholder() }}\n </span>\n </div>\n\n <div class=\"ns-dropdown__input\">\n <input\n class=\"form-control\"\n [(ngModel)]=\"search\"\n #input\n [disabled]=\"disabled()\"\n [id]=\"id\"\n />\n </div>\n\n <svg\n class=\"dropdown-toggle\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n height=\"12px\"\n width=\"12px\"\n >\n <path\n d=\"M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z\"\n ></path>\n </svg>\n </div>\n} @else {\n <button\n class=\"btn btn__secondary\"\n [id]=\"id\"\n type=\"button\"\n [disabled]=\"disabled()\"\n >\n @if (iconName()) {\n <ns-icon [name]=\"iconName()\" [size]=\"16\" />\n }\n @if (placeholder() && selected) {\n <label class=\"form-label\">\n {{ placeholder() }}: <span [innerHtml]=\"selected[labelField()]\"></span>\n </label>\n } @else {\n <label\n class=\"form-label\"\n [innerHtml]=\"!!selected ? selected[labelField()] : placeholder()\"\n ></label>\n }\n\n <svg\n class=\"dropdown-toggle\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n height=\"12px\"\n width=\"12px\"\n >\n <path\n d=\"M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z\"\n ></path>\n </svg>\n </button>\n}\n\n<ul\n class=\"dropdown-menu\"\n [attr.aria-labelledby]=\"id\"\n [ngClass]=\"{\n show: show,\n 'dropdown-start': placement() !== 'end',\n 'dropdown-end': placement() == 'end'\n }\"\n (mouseleave)=\"show = false\"\n>\n @for (item of collection; track item) {\n <li>\n <button\n class=\"dropdown-item\"\n [ngClass]=\"{ active: selected === item }\"\n (click)=\"select(item)\"\n >\n <svg\n class=\"icon-check-mark\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n height=\"16px\"\n width=\"16px\"\n >\n <path\n d=\"M6.19,14.51a.77.77,0,0,1-.57-.25l-4.2-4.8a.75.75,0,0,1,1.13-1l3.56,4.06L13.36,1.82a.75.75,0,0,1,1-.21.76.76,0,0,1,.21,1.05L6.81,14.18a.73.73,0,0,1-.58.33Z\"\n ></path>\n </svg>\n <span>{{ item[labelField()] }}</span>\n </button>\n </li>\n }\n @if (!collection?.length) {\n <button class=\"dropdown-item\">\n <span>No items found</span>\n </button>\n }\n</ul>\n", styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:var(--ns-control-host-width, 100%);max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem));font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}:host.show .dropdown-toggle{transform:rotate(0)}.btn{display:block;position:relative;border-radius:var(--ns-control-border-radius, var(--ns-border-radius, .375rem));vertical-align:center;text-align:center;text-transform:none;font-size:.875rem;line-height:1rem;outline:none;white-space:nowrap;padding:var(--ns-btn-padding-y, .5rem) var(--ns-btn-padding-x, 1rem);cursor:pointer}.btn:disabled{pointer-events:none}.btn{display:flex;justify-content:flex-start;align-items:center;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);width:100%}.btn__secondary{color:var(--ns-color-foreground, #1f2937);background-color:var(--ns-color-surface, #fff);min-width:var(--ns-btn-min-width, 5rem);border:1px solid var(--ns-color-border, rgb(219, 214, 225))}.btn__secondary:focus,.btn__secondary:active{color:var(--ns-color-foreground, #1f2937);border:1px solid var(--ns-color-border, rgb(219, 214, 225));box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__secondary:hover{background-color:var(--ns-color-surface-muted, rgba(9, 30, 66, .08))}.btn__secondary{background-color:var(--ns-color-surface, #fff);border:1px solid var(--ns-color-border, #cfcfdb)}.btn__secondary:hover{background-color:var(--ns-color-surface, #fff)}.btn .form-label{text-overflow:ellipsis;overflow:hidden;margin-bottom:unset;font-weight:600}.btn .form-label span{font-weight:400}.btn:disabled{background-color:var(--ns-color-surface-muted, #e9ecef)}.ns-dropdown__search{display:flex;position:relative;flex:1;overflow:hidden;text-overflow:ellipsis;padding-left:10px;padding-right:10px;align-items:center;height:36px}.ns-dropdown__search.disabled{pointer-events:none}.ns-dropdown__search.disabled .ns-dropdown__value-label{opacity:.65}.ns-dropdown__placeholder{color:var(--ns-gray-400, #bdbed4)}.ns-dropdown__value{display:flex;align-items:center;font-weight:600;font-size:.875rem;z-index:1001}.ns-dropdown__input{position:absolute;left:0;width:100%}.ns-dropdown__input .form-control{margin-bottom:unset}.dropdown-menu{min-width:100%;overflow:hidden;overflow-y:auto;position:relative;height:auto;box-sizing:border-box;max-height:240px;z-index:1100;margin-top:.5rem}.dropdown-menu li{position:static;margin:0;padding:0 4px}.dropdown-toggle{margin-left:auto;transform:rotate(180deg);transition:transform .2s ease-in-out 0s;flex-shrink:0}.dropdown-item{display:flex;position:relative;border-radius:4px;box-sizing:border-box;align-items:center;z-index:1}.dropdown-item .icon-check-mark{opacity:0;margin:0 .35rem 0 -.35rem}.dropdown-item.active,.dropdown-item:hover{color:initial;background:var(--ns-color-surface-muted, rgba(108, 96, 199, .08))}.dropdown-item.active{color:var(--ns-color-primary, #584ac0)}.dropdown-item.active .icon-check-mark{opacity:1}.dropdown-item span{line-height:1.4;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.dropdown-start{position:absolute;inset:auto auto auto 0}.dropdown-end{position:absolute;inset:auto 0 auto auto}\n"] }]
837
+ }], ctorParameters: () => [], propDecorators: { labelField: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelField", required: false }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], defaultFirst: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFirst", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], collectionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: false }] }], searchRef: [{
902
838
  type: ViewChild,
903
839
  args: ['input', { read: ElementRef }]
904
840
  }], items: [{
905
841
  type: ContentChildren,
906
842
  args: [NsDropdownItemDirective]
907
- }], collection: [{
908
- type: Input
909
843
  }], toggle: [{
910
844
  type: HostListener,
911
845
  args: ['click', ['$event']]
@@ -925,37 +859,37 @@ class NsDatePickerComponent extends NsValueAccessor {
925
859
  injector = inject(EnvironmentInjector);
926
860
  ngZone = inject(NgZone);
927
861
  document = inject(DOCUMENT);
928
- autoClose = true;
929
- placement = 'bottom-start';
930
- view;
931
- visibleMonths = 1;
932
- firstDayOfWeek = 'sun';
933
- maxDate;
934
- minDate;
935
- navigation = 'select';
936
- weekdayStyle = 'short';
862
+ autoClose = input(true, ...(ngDevMode ? [{ debugName: "autoClose" }] : /* istanbul ignore next */ []));
863
+ placement = input('bottom-start', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
864
+ view = input(undefined, ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
865
+ visibleMonths = input(1, ...(ngDevMode ? [{ debugName: "visibleMonths" }] : /* istanbul ignore next */ []));
866
+ firstDayOfWeek = input('sun', ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
867
+ maxDate = input(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
868
+ minDate = input(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
869
+ navigation = input('select', ...(ngDevMode ? [{ debugName: "navigation" }] : /* istanbul ignore next */ []));
870
+ weekdayStyle = input('short', ...(ngDevMode ? [{ debugName: "weekdayStyle" }] : /* istanbul ignore next */ []));
937
871
  controlValue;
938
872
  popupRef = null;
939
873
  destroyCloseHandlers$ = new Subject();
940
874
  ngOnInit() {
941
875
  if (this.model === undefined) {
942
- const inputs = {};
943
- [
944
- 'visibleMonths',
945
- 'firstDayOfWeek',
946
- 'navigation',
947
- 'minDate',
948
- 'maxDate',
949
- 'weekdayStyle'
950
- ].forEach((name) => (inputs[name] = this[name]));
876
+ const inputs = {
877
+ visibleMonths: this.visibleMonths(),
878
+ firstDayOfWeek: this.firstDayOfWeek(),
879
+ navigation: this.navigation(),
880
+ minDate: this.service.ensureDateValue(this.minDate()) || undefined,
881
+ maxDate: this.service.ensureDateValue(this.maxDate()) || undefined,
882
+ weekdayStyle: this.weekdayStyle()
883
+ };
951
884
  this.service.set(inputs);
952
885
  }
953
886
  this.service.selected$
954
887
  .pipe(takeUntilDestroyed(this.destroyRef))
955
888
  .subscribe((date) => {
956
- this._value = this.parserFormatter.format(date);
889
+ this.value.set(this.parserFormatter.format(date));
957
890
  this.onChange(date.toString());
958
- if (this.autoClose === true || this.autoClose === 'inside') {
891
+ const autoClose = this.autoClose();
892
+ if (autoClose === true || autoClose === 'inside') {
959
893
  this.close();
960
894
  }
961
895
  this.cdRef.markForCheck();
@@ -969,7 +903,7 @@ class NsDatePickerComponent extends NsValueAccessor {
969
903
  }
970
904
  writeValue(value) {
971
905
  this.controlValue = this.service.ensureDateValue(value);
972
- this._value = this.parserFormatter.format(this.controlValue);
906
+ this.value.set(this.parserFormatter.format(this.controlValue));
973
907
  }
974
908
  isOpen() {
975
909
  return !!this.popupRef;
@@ -1007,7 +941,7 @@ class NsDatePickerComponent extends NsValueAccessor {
1007
941
  }
1008
942
  _applyDatepickerInputs(menuRef) {
1009
943
  menuRef.setInput('startDate', this.model?.startDate || this.service.today());
1010
- menuRef.setInput('placement', this.placement);
944
+ menuRef.setInput('placement', this.placement());
1011
945
  }
1012
946
  close() {
1013
947
  if (this.isOpen()) {
@@ -1023,10 +957,10 @@ class NsDatePickerComponent extends NsValueAccessor {
1023
957
  if (!popupRef) {
1024
958
  return;
1025
959
  }
1026
- nsAutoClose(this.ngZone, this.document, this.autoClose, () => this.close(), this.destroyCloseHandlers$, [], [this.elRef.nativeElement, popupRef.location.nativeElement]);
960
+ nsAutoClose(this.ngZone, this.document, this.autoClose(), () => this.close(), this.destroyCloseHandlers$, [], [this.elRef.nativeElement, popupRef.location.nativeElement]);
1027
961
  }
1028
962
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDatePickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1029
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsDatePickerComponent, isStandalone: true, selector: "ns-date-picker", inputs: { autoClose: "autoClose", placement: "placement", view: "view", visibleMonths: "visibleMonths", firstDayOfWeek: "firstDayOfWeek", maxDate: "maxDate", minDate: "minDate", navigation: "navigation", weekdayStyle: "weekdayStyle" }, host: { properties: { "class.ns-date-picker": "true", "class.ns-date-picker--show": "isOpen()" } }, providers: [
963
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsDatePickerComponent, isStandalone: true, selector: "ns-date-picker", inputs: { autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, visibleMonths: { classPropertyName: "visibleMonths", publicName: "visibleMonths", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: true, isRequired: false, transformFunction: null }, weekdayStyle: { classPropertyName: "weekdayStyle", publicName: "weekdayStyle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-date-picker": "true", "class.ns-date-picker--show": "isOpen()" } }, providers: [
1030
964
  {
1031
965
  provide: NG_VALUE_ACCESSOR,
1032
966
  useExisting: forwardRef(() => NsDatePickerComponent),
@@ -1034,8 +968,8 @@ class NsDatePickerComponent extends NsValueAccessor {
1034
968
  },
1035
969
  NsDatepickerService
1036
970
  ], usesInheritance: true, ngImport: i0, template: `
1037
- @if (label) {
1038
- <label class="form-label" [attr.for]="id">{{ label }}</label>
971
+ @if (label()) {
972
+ <label class="form-label" [attr.for]="id">{{ label() }}</label>
1039
973
  }
1040
974
 
1041
975
  <div class="row">
@@ -1047,10 +981,10 @@ class NsDatePickerComponent extends NsValueAccessor {
1047
981
  type="text"
1048
982
  class="ns-date-picker__input"
1049
983
  readonly
1050
- [ngModel]="value"
984
+ [ngModel]="value()"
1051
985
  [attr.id]="id"
1052
- [attr.placeholder]="placeholder"
1053
- [disabled]="disabled"
986
+ [attr.placeholder]="placeholder()"
987
+ [disabled]="disabled()"
1054
988
  (blur)="onTouched()"
1055
989
  #input
1056
990
  />
@@ -1063,7 +997,7 @@ class NsDatePickerComponent extends NsValueAccessor {
1063
997
  </ns-dropdown>
1064
998
  </div>
1065
999
  </div>
1066
- `, isInline: true, styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-radius-sm, .375rem);font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}:host{max-width:15rem}:host.ns-date-picker--show>.form-control{border-color:#567af0;box-shadow:unset;outline:0}.form-control{display:flex;position:relative;align-items:center;gap:.2rem}.btn{font-weight:500}.btn:focus{box-shadow:none}.btn:focus:not(:focus-visible){outline:none}.btn:disabled{background-color:#e9ecef}.ns-date-picker__input{appearance:none;border:none;width:100%;outline:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }, { kind: "component", type: NsDropdownComponent, selector: "ns-dropdown", inputs: ["labelField", "valueField", "iconName", "defaultFirst", "placement", "filterable", "collection"] }, { kind: "directive", type: NsDropdownItemDirective, selector: "ns-dropdown-item", inputs: ["label", "value", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1000
+ `, isInline: true, styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:var(--ns-control-host-width, 100%);max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem));font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}:host{max-width:15rem}:host.ns-date-picker--show>.form-control{border-color:#567af0;box-shadow:unset;outline:0}.form-control{display:flex;position:relative;align-items:center;gap:.2rem}.btn{font-weight:500}.btn:focus{box-shadow:none}.btn:focus:not(:focus-visible){outline:none}.btn:disabled{background-color:#e9ecef}.ns-date-picker__input{appearance:none;border:none;width:100%;outline:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }, { kind: "component", type: NsDropdownComponent, selector: "ns-dropdown", inputs: ["labelField", "valueField", "iconName", "defaultFirst", "placement", "filterable", "collection"] }, { kind: "directive", type: NsDropdownItemDirective, selector: "ns-dropdown-item", inputs: ["label", "value", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1067
1001
  }
1068
1002
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDatePickerComponent, decorators: [{
1069
1003
  type: Component,
@@ -1073,8 +1007,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1073
1007
  NsDropdownComponent,
1074
1008
  NsDropdownItemDirective
1075
1009
  ], standalone: true, template: `
1076
- @if (label) {
1077
- <label class="form-label" [attr.for]="id">{{ label }}</label>
1010
+ @if (label()) {
1011
+ <label class="form-label" [attr.for]="id">{{ label() }}</label>
1078
1012
  }
1079
1013
 
1080
1014
  <div class="row">
@@ -1086,10 +1020,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1086
1020
  type="text"
1087
1021
  class="ns-date-picker__input"
1088
1022
  readonly
1089
- [ngModel]="value"
1023
+ [ngModel]="value()"
1090
1024
  [attr.id]="id"
1091
- [attr.placeholder]="placeholder"
1092
- [disabled]="disabled"
1025
+ [attr.placeholder]="placeholder()"
1026
+ [disabled]="disabled()"
1093
1027
  (blur)="onTouched()"
1094
1028
  #input
1095
1029
  />
@@ -1112,32 +1046,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1112
1046
  multi: true
1113
1047
  },
1114
1048
  NsDatepickerService
1115
- ], styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-radius-sm, .375rem);font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}:host{max-width:15rem}:host.ns-date-picker--show>.form-control{border-color:#567af0;box-shadow:unset;outline:0}.form-control{display:flex;position:relative;align-items:center;gap:.2rem}.btn{font-weight:500}.btn:focus{box-shadow:none}.btn:focus:not(:focus-visible){outline:none}.btn:disabled{background-color:#e9ecef}.ns-date-picker__input{appearance:none;border:none;width:100%;outline:none}\n"] }]
1116
- }], propDecorators: { autoClose: [{
1117
- type: Input
1118
- }], placement: [{
1119
- type: Input
1120
- }], view: [{
1121
- type: Input
1122
- }], visibleMonths: [{
1123
- type: Input
1124
- }], firstDayOfWeek: [{
1125
- type: Input
1126
- }], maxDate: [{
1127
- type: Input
1128
- }], minDate: [{
1129
- type: Input
1130
- }], navigation: [{
1131
- type: Input
1132
- }], weekdayStyle: [{
1133
- type: Input
1134
- }] } });
1049
+ ], styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:var(--ns-control-host-width, 100%);max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem));font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}:host{max-width:15rem}:host.ns-date-picker--show>.form-control{border-color:#567af0;box-shadow:unset;outline:0}.form-control{display:flex;position:relative;align-items:center;gap:.2rem}.btn{font-weight:500}.btn:focus{box-shadow:none}.btn:focus:not(:focus-visible){outline:none}.btn:disabled{background-color:#e9ecef}.ns-date-picker__input{appearance:none;border:none;width:100%;outline:none}\n"] }]
1050
+ }], propDecorators: { autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], visibleMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleMonths", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], navigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigation", required: false }] }], weekdayStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayStyle", required: false }] }] } });
1135
1051
 
1136
1052
  class NsDateRangeStartDirective extends NsValueAccessor {
1137
1053
  parserFormatter = inject(NsDateParserFormatter);
1138
1054
  writeValue(value) {
1139
1055
  const nsDate = this.parserFormatter.parse(value);
1140
- this._value = this.parserFormatter.format(nsDate);
1056
+ this.value.set(this.parserFormatter.format(nsDate));
1141
1057
  }
1142
1058
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDateRangeStartDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
1143
1059
  static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: NsDateRangeStartDirective, isStandalone: true, selector: "ns-date-range-start", providers: [
@@ -1166,7 +1082,7 @@ class NsDateRangeEndDirective extends NsValueAccessor {
1166
1082
  parserFormatter = inject(NsDateParserFormatter);
1167
1083
  writeValue(value) {
1168
1084
  const nsDate = this.parserFormatter.parse(value);
1169
- this._value = this.parserFormatter.format(nsDate);
1085
+ this.value.set(this.parserFormatter.format(nsDate));
1170
1086
  }
1171
1087
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDateRangeEndDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
1172
1088
  static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: NsDateRangeEndDirective, isStandalone: true, selector: "ns-date-range-end", providers: [
@@ -1193,24 +1109,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1193
1109
  }] });
1194
1110
 
1195
1111
  class NsDateRangePickerComponent {
1196
- placeholder;
1112
+ placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
1197
1113
  start;
1198
1114
  end;
1199
1115
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1200
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsDateRangePickerComponent, isStandalone: true, selector: "ns-date-range", inputs: { placeholder: "placeholder" }, host: { properties: { "class.ns-date-range": "true" } }, queries: [{ propertyName: "start", first: true, predicate: NsDateRangeStartDirective, descendants: true }, { propertyName: "end", first: true, predicate: NsDateRangeEndDirective, descendants: true }], ngImport: i0, template: `
1116
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsDateRangePickerComponent, isStandalone: true, selector: "ns-date-range", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-date-range": "true" } }, queries: [{ propertyName: "start", first: true, predicate: NsDateRangeStartDirective, descendants: true }, { propertyName: "end", first: true, predicate: NsDateRangeEndDirective, descendants: true }], ngImport: i0, template: `
1201
1117
  <div class="ns-date-range__wrap">
1202
1118
  @if (start) {
1203
1119
  <ns-date-picker
1204
- [label]="start.label"
1205
- [placeholder]="placeholder"
1206
- [(ngModel)]="start.value"
1120
+ [label]="start.label()"
1121
+ [placeholder]="placeholder()"
1122
+ [ngModel]="start.value()"
1123
+ (ngModelChange)="start.setValue($event)"
1207
1124
  />
1208
1125
  }
1209
1126
  @if (end) {
1210
1127
  <ns-date-picker
1211
- [label]="end.label"
1212
- [placeholder]="placeholder"
1213
- [(ngModel)]="end.value"
1128
+ [label]="end.label()"
1129
+ [placeholder]="placeholder()"
1130
+ [ngModel]="end.value()"
1131
+ (ngModelChange)="end.setValue($event)"
1214
1132
  />
1215
1133
  }
1216
1134
  </div>
@@ -1222,25 +1140,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1222
1140
  <div class="ns-date-range__wrap">
1223
1141
  @if (start) {
1224
1142
  <ns-date-picker
1225
- [label]="start.label"
1226
- [placeholder]="placeholder"
1227
- [(ngModel)]="start.value"
1143
+ [label]="start.label()"
1144
+ [placeholder]="placeholder()"
1145
+ [ngModel]="start.value()"
1146
+ (ngModelChange)="start.setValue($event)"
1228
1147
  />
1229
1148
  }
1230
1149
  @if (end) {
1231
1150
  <ns-date-picker
1232
- [label]="end.label"
1233
- [placeholder]="placeholder"
1234
- [(ngModel)]="end.value"
1151
+ [label]="end.label()"
1152
+ [placeholder]="placeholder()"
1153
+ [ngModel]="end.value()"
1154
+ (ngModelChange)="end.setValue($event)"
1235
1155
  />
1236
1156
  }
1237
1157
  </div>
1238
1158
  `, host: {
1239
1159
  '[class.ns-date-range]': 'true'
1240
1160
  }, styles: [":host{display:block;position:relative;max-width:30rem}.ns-date-range__wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem}\n"] }]
1241
- }], propDecorators: { placeholder: [{
1242
- type: Input
1243
- }], start: [{
1161
+ }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], start: [{
1244
1162
  type: ContentChild,
1245
1163
  args: [NsDateRangeStartDirective]
1246
1164
  }], end: [{
@@ -1249,16 +1167,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1249
1167
  }] } });
1250
1168
 
1251
1169
  class NsInputComponent extends NsValueAccessor {
1252
- prepend;
1253
- append;
1170
+ ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
1171
+ ariaDescribedBy = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
1254
1172
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1255
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsInputComponent, isStandalone: true, selector: "ns-input", inputs: { prepend: "prepend", append: "append" }, providers: [
1173
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsInputComponent, isStandalone: true, selector: "ns-input", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1256
1174
  {
1257
1175
  provide: NG_VALUE_ACCESSOR,
1258
1176
  useExisting: forwardRef(() => NsInputComponent),
1259
1177
  multi: true
1260
1178
  }
1261
- ], usesInheritance: true, ngImport: i0, template: "@if (label) {\n <label class=\"form-label\" [attr.for]=\"id\">{{ label }}</label>\n}\n\n<input\n [(ngModel)]=\"value\"\n class=\"form-control\"\n [attr.id]=\"id\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [attr.readonly]=\"readonly\"\n (blur)=\"onTouched()\"\n/>\n", styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-radius-sm, .375rem);font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1179
+ ], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n <label class=\"form-label\" [attr.for]=\"id\">{{ label() }}</label>\n}\n\n<input\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n class=\"form-control\"\n [attr.id]=\"id\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [attr.readonly]=\"readonly()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (blur)=\"onTouched()\"\n/>\n", styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:var(--ns-control-host-width, 100%);max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem));font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1262
1180
  }
1263
1181
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputComponent, decorators: [{
1264
1182
  type: Component,
@@ -1268,25 +1186,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1268
1186
  useExisting: forwardRef(() => NsInputComponent),
1269
1187
  multi: true
1270
1188
  }
1271
- ], imports: [FormsModule], template: "@if (label) {\n <label class=\"form-label\" [attr.for]=\"id\">{{ label }}</label>\n}\n\n<input\n [(ngModel)]=\"value\"\n class=\"form-control\"\n [attr.id]=\"id\"\n [type]=\"type\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [attr.readonly]=\"readonly\"\n (blur)=\"onTouched()\"\n/>\n", styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-radius-sm, .375rem);font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}\n"] }]
1272
- }], propDecorators: { prepend: [{
1273
- type: Input
1274
- }], append: [{
1275
- type: Input
1276
- }] } });
1189
+ ], imports: [FormsModule], template: "@if (label()) {\n <label class=\"form-label\" [attr.for]=\"id\">{{ label() }}</label>\n}\n\n<input\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n class=\"form-control\"\n [attr.id]=\"id\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [attr.readonly]=\"readonly()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n (blur)=\"onTouched()\"\n/>\n", styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:var(--ns-control-host-width, 100%);max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem));font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}\n"] }]
1190
+ }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }] } });
1191
+
1192
+ class NsInputGroupAddonComponent {
1193
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputGroupAddonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1194
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsInputGroupAddonComponent, isStandalone: true, selector: "ns-input-group-addon", host: { properties: { "class.ns-input-group-addon": "true" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:flex;align-items:center;justify-content:center;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);color:var(--ns-color-text, #172b4d);font-size:var(--ns-font-size-base, 1rem);font-weight:var(--ns-font-weight-regular, 400);line-height:1.5;white-space:nowrap;background-color:var(--ns-color-surface-muted, #f4f5f7);border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem))}input[type=checkbox],input[type=radio]{width:1rem;height:1rem;margin:0;accent-color:var(--ns-color-primary, #567af0)}\n"], encapsulation: i0.ViewEncapsulation.ShadowDom });
1195
+ }
1196
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputGroupAddonComponent, decorators: [{
1197
+ type: Component,
1198
+ args: [{ selector: 'ns-input-group-addon', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.ShadowDom, host: {
1199
+ '[class.ns-input-group-addon]': 'true'
1200
+ }, styles: [":host{display:flex;align-items:center;justify-content:center;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);color:var(--ns-color-text, #172b4d);font-size:var(--ns-font-size-base, 1rem);font-weight:var(--ns-font-weight-regular, 400);line-height:1.5;white-space:nowrap;background-color:var(--ns-color-surface-muted, #f4f5f7);border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem))}input[type=checkbox],input[type=radio]{width:1rem;height:1rem;margin:0;accent-color:var(--ns-color-primary, #567af0)}\n"] }]
1201
+ }] });
1277
1202
 
1278
1203
  class NsInputGroupComponent {
1279
- label;
1204
+ label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
1205
+ prepend = input(undefined, ...(ngDevMode ? [{ debugName: "prepend" }] : /* istanbul ignore next */ []));
1206
+ append = input(undefined, ...(ngDevMode ? [{ debugName: "append" }] : /* istanbul ignore next */ []));
1207
+ size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
1208
+ wrap = input(true, { ...(ngDevMode ? { debugName: "wrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
1209
+ primaryInput;
1280
1210
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1281
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsInputGroupComponent, isStandalone: true, selector: "ns-input-group", inputs: { label: "label" }, host: { properties: { "class.ns-input-group": "true" } }, ngImport: i0, template: "@if (label) {\n <label class=\"form-label\">{{ label }}</label>\n}\n\n<div class=\"input-group\">\n <ng-content></ng-content>\n</div>\n", styles: [".form-label{display:block;margin-bottom:var(--ns-space-2, .5rem);font-size:var(--ns-font-size-sm, .875rem)}.form-control{width:100%}.input-group{display:flex;flex-direction:row;align-items:center;width:100%;max-width:100%;position:relative;margin-bottom:var(--ns-space-2, .5rem)}.input-group ns-input{display:flex;margin-bottom:unset}.input-group:has(>ns-input-group-addon:first-child){background-color:var(--ns-color-surface, #fff)}.input-group:has(>ns-input:first-child) .form-control{border-top-right-radius:unset;border-bottom-right-radius:unset;margin:unset}.input-group:has(>ns-input:last-child) .form-control{border-top-left-radius:unset;border-bottom-left-radius:unset;margin:unset}.input-group:has(>ns-button:first-child) .btn{border-top-right-radius:unset;border-bottom-right-radius:unset;border-right-width:0;margin:unset}.input-group:has(>ns-button:last-child) .btn{border-top-left-radius:unset;border-bottom-left-radius:unset;border-left-width:0;margin:unset}\n"], encapsulation: i0.ViewEncapsulation.ShadowDom });
1211
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsInputGroupComponent, isStandalone: true, selector: "ns-input-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, prepend: { classPropertyName: "prepend", publicName: "prepend", isSignal: true, isRequired: false, transformFunction: null }, append: { classPropertyName: "append", publicName: "append", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-input-group": "true" } }, queries: [{ propertyName: "primaryInput", first: true, predicate: NsInputComponent, descendants: true }], ngImport: i0, template: "@if (label()) {\n <label class=\"form-label\" [attr.for]=\"primaryInput?.id\">{{ label() }}</label>\n}\n\n<div\n class=\"input-group\"\n [class.input-group--sm]=\"size() === 'sm'\"\n [class.input-group--lg]=\"size() === 'lg'\"\n [class.input-group--nowrap]=\"!wrap()\"\n>\n @if (prepend()) {\n <ns-input-group-addon>{{ prepend() }}</ns-input-group-addon>\n }\n <ng-content></ng-content>\n @if (append()) {\n <ns-input-group-addon>{{ append() }}</ns-input-group-addon>\n }\n</div>\n", styles: [":host{--ns-input-group-radius: var(--ns-radius-sm, .375rem);display:block;width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem);font-size:var(--ns-font-size-sm, .875rem)}.form-label{display:block;margin-bottom:var(--ns-space-2, .5rem);font-size:var(--ns-font-size-sm, .875rem)}.input-group{display:flex;flex-wrap:wrap;align-items:stretch;width:100%;max-width:100%;position:relative;--ns-control-border-radius: 0}.input-group--nowrap{flex-wrap:nowrap}.input-group--sm{--ns-control-padding-y: .25rem;--ns-control-padding-x: .5rem;--ns-btn-padding-y: .25rem;--ns-btn-padding-x: .5rem;--ns-font-size-base: .875rem}.input-group--lg{--ns-control-padding-y: .75rem;--ns-control-padding-x: 1rem;--ns-btn-padding-y: .75rem;--ns-btn-padding-x: 1rem;--ns-font-size-base: 1.125rem}.input-group>ns-input,.input-group>ns-textarea{--ns-control-host-width: 1%;display:block;flex:1 1 0;min-width:0;margin-bottom:0}.input-group>ns-button,.input-group>ns-input-group-addon{display:block;flex:0 0 auto}.input-group>*{--ns-control-border-radius: 0;position:relative}.input-group>:not(:first-child){margin-inline-start:-1px}.input-group>:first-child{--ns-control-border-radius: var(--ns-input-group-radius) 0 0 var(--ns-input-group-radius)}.input-group>:last-child{--ns-control-border-radius: 0 var(--ns-input-group-radius) var(--ns-input-group-radius) 0}.input-group>:only-child{--ns-control-border-radius: var(--ns-input-group-radius)}.input-group>:focus-within{z-index:2}\n"], dependencies: [{ kind: "component", type: NsInputGroupAddonComponent, selector: "ns-input-group-addon" }], encapsulation: i0.ViewEncapsulation.ShadowDom });
1282
1212
  }
1283
1213
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputGroupComponent, decorators: [{
1284
1214
  type: Component,
1285
- args: [{ selector: 'ns-input-group', encapsulation: ViewEncapsulation.ShadowDom, host: {
1215
+ args: [{ selector: 'ns-input-group', encapsulation: ViewEncapsulation.ShadowDom, imports: [NsInputGroupAddonComponent], host: {
1286
1216
  '[class.ns-input-group]': 'true'
1287
- }, template: "@if (label) {\n <label class=\"form-label\">{{ label }}</label>\n}\n\n<div class=\"input-group\">\n <ng-content></ng-content>\n</div>\n", styles: [".form-label{display:block;margin-bottom:var(--ns-space-2, .5rem);font-size:var(--ns-font-size-sm, .875rem)}.form-control{width:100%}.input-group{display:flex;flex-direction:row;align-items:center;width:100%;max-width:100%;position:relative;margin-bottom:var(--ns-space-2, .5rem)}.input-group ns-input{display:flex;margin-bottom:unset}.input-group:has(>ns-input-group-addon:first-child){background-color:var(--ns-color-surface, #fff)}.input-group:has(>ns-input:first-child) .form-control{border-top-right-radius:unset;border-bottom-right-radius:unset;margin:unset}.input-group:has(>ns-input:last-child) .form-control{border-top-left-radius:unset;border-bottom-left-radius:unset;margin:unset}.input-group:has(>ns-button:first-child) .btn{border-top-right-radius:unset;border-bottom-right-radius:unset;border-right-width:0;margin:unset}.input-group:has(>ns-button:last-child) .btn{border-top-left-radius:unset;border-bottom-left-radius:unset;border-left-width:0;margin:unset}\n"] }]
1288
- }], propDecorators: { label: [{
1289
- type: Input
1217
+ }, template: "@if (label()) {\n <label class=\"form-label\" [attr.for]=\"primaryInput?.id\">{{ label() }}</label>\n}\n\n<div\n class=\"input-group\"\n [class.input-group--sm]=\"size() === 'sm'\"\n [class.input-group--lg]=\"size() === 'lg'\"\n [class.input-group--nowrap]=\"!wrap()\"\n>\n @if (prepend()) {\n <ns-input-group-addon>{{ prepend() }}</ns-input-group-addon>\n }\n <ng-content></ng-content>\n @if (append()) {\n <ns-input-group-addon>{{ append() }}</ns-input-group-addon>\n }\n</div>\n", styles: [":host{--ns-input-group-radius: var(--ns-radius-sm, .375rem);display:block;width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem);font-size:var(--ns-font-size-sm, .875rem)}.form-label{display:block;margin-bottom:var(--ns-space-2, .5rem);font-size:var(--ns-font-size-sm, .875rem)}.input-group{display:flex;flex-wrap:wrap;align-items:stretch;width:100%;max-width:100%;position:relative;--ns-control-border-radius: 0}.input-group--nowrap{flex-wrap:nowrap}.input-group--sm{--ns-control-padding-y: .25rem;--ns-control-padding-x: .5rem;--ns-btn-padding-y: .25rem;--ns-btn-padding-x: .5rem;--ns-font-size-base: .875rem}.input-group--lg{--ns-control-padding-y: .75rem;--ns-control-padding-x: 1rem;--ns-btn-padding-y: .75rem;--ns-btn-padding-x: 1rem;--ns-font-size-base: 1.125rem}.input-group>ns-input,.input-group>ns-textarea{--ns-control-host-width: 1%;display:block;flex:1 1 0;min-width:0;margin-bottom:0}.input-group>ns-button,.input-group>ns-input-group-addon{display:block;flex:0 0 auto}.input-group>*{--ns-control-border-radius: 0;position:relative}.input-group>:not(:first-child){margin-inline-start:-1px}.input-group>:first-child{--ns-control-border-radius: var(--ns-input-group-radius) 0 0 var(--ns-input-group-radius)}.input-group>:last-child{--ns-control-border-radius: 0 var(--ns-input-group-radius) var(--ns-input-group-radius) 0}.input-group>:only-child{--ns-control-border-radius: var(--ns-input-group-radius)}.input-group>:focus-within{z-index:2}\n"] }]
1218
+ }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], prepend: [{ type: i0.Input, args: [{ isSignal: true, alias: "prepend", required: false }] }], append: [{ type: i0.Input, args: [{ isSignal: true, alias: "append", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], primaryInput: [{
1219
+ type: ContentChild,
1220
+ args: [NsInputComponent]
1290
1221
  }] } });
1291
1222
 
1292
1223
  function clamp(value, min = -Infinity, max = Infinity) {
@@ -1352,11 +1283,11 @@ const NS_INPUT_NUMBER_PROVIDER = {
1352
1283
  multi: true
1353
1284
  };
1354
1285
  class NsInputNumberComponent extends NsValueAccessor {
1355
- step;
1356
- precision;
1357
- minValue;
1358
- maxValue;
1359
- formatStyle = 'decimal';
1286
+ step = input(undefined, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
1287
+ precision = input(undefined, { ...(ngDevMode ? { debugName: "precision" } : /* istanbul ignore next */ {}), transform: numberAttribute });
1288
+ minValue = input(undefined, { ...(ngDevMode ? { debugName: "minValue" } : /* istanbul ignore next */ {}), transform: numberAttribute });
1289
+ maxValue = input(undefined, { ...(ngDevMode ? { debugName: "maxValue" } : /* istanbul ignore next */ {}), transform: numberAttribute });
1290
+ formatStyle = input('decimal', ...(ngDevMode ? [{ debugName: "formatStyle" }] : /* istanbul ignore next */ []));
1360
1291
  input;
1361
1292
  numberInput = 0;
1362
1293
  defaultOptions = inject(NS_FORMAT_OPTIONS);
@@ -1372,10 +1303,10 @@ class NsInputNumberComponent extends NsValueAccessor {
1372
1303
  get formatOptions() {
1373
1304
  return {
1374
1305
  ...this.defaultOptions.number,
1375
- style: this.formatStyle,
1306
+ style: this.formatStyle(),
1376
1307
  currency: this.currency,
1377
- minimumFractionDigits: this.precision,
1378
- maximumFractionDigits: this.precision
1308
+ minimumFractionDigits: this.precision(),
1309
+ maximumFractionDigits: this.precision()
1379
1310
  };
1380
1311
  }
1381
1312
  writeValue(value) {
@@ -1386,98 +1317,100 @@ class NsInputNumberComponent extends NsValueAccessor {
1386
1317
  value = Number(value);
1387
1318
  }
1388
1319
  if (value === undefined && !isNaN(value)) {
1389
- if (this.step !== undefined && !isNaN(this.step)) {
1390
- value = snapValueToStep(value, this.minValue, this.maxValue, this.step);
1320
+ const step = this.step();
1321
+ if (step !== undefined && !isNaN(step)) {
1322
+ value = snapValueToStep(value, this.minValue(), this.maxValue(), step);
1391
1323
  }
1392
1324
  else {
1393
- value = clamp(value, this.minValue, this.maxValue);
1325
+ value = clamp(value, this.minValue(), this.maxValue());
1394
1326
  }
1395
1327
  }
1396
- this._value = this.formatter.format(!isNaN(value) ? value : 0);
1397
- this.numberInput = this.parser.parse(this._value);
1328
+ const formattedValue = this.formatter.format(!isNaN(value) ? value : 0);
1329
+ this.value.set(formattedValue);
1330
+ this.numberInput = this.parser.parse(formattedValue);
1398
1331
  }
1399
- set value(value) {
1400
- if (this._value !== value) {
1332
+ setValue(value) {
1333
+ if (this.value() !== value) {
1401
1334
  let parsedValue = this.parser.parse(value);
1402
- if (this.step !== undefined && !isNaN(this.step)) {
1403
- parsedValue = snapValueToStep(parsedValue, this.minValue, this.maxValue, this.step);
1335
+ const step = this.step();
1336
+ if (step !== undefined && !isNaN(step)) {
1337
+ parsedValue = snapValueToStep(parsedValue, this.minValue(), this.maxValue(), step);
1404
1338
  }
1405
1339
  else {
1406
- parsedValue = clamp(parsedValue, this.minValue, this.maxValue);
1340
+ parsedValue = clamp(parsedValue, this.minValue(), this.maxValue());
1407
1341
  }
1408
1342
  if (isNaN(parsedValue)) {
1409
1343
  parsedValue = 0; // Reset to 0 if parsing fails
1410
1344
  }
1411
1345
  if (this.numberInput !== parsedValue) {
1412
- this._value = value;
1346
+ this.value.set(value);
1413
1347
  this.numberInput = parsedValue;
1414
1348
  this.onChange(parsedValue);
1415
1349
  }
1416
1350
  }
1417
1351
  }
1418
- get value() {
1419
- return String(this._value);
1420
- }
1421
1352
  onInput(event) {
1422
1353
  const { value } = event.target;
1423
1354
  if (!this.parser.isValidPartialNumber(value)) {
1424
- if (this.type === 'currency') {
1355
+ if (this.type() === 'currency') {
1425
1356
  this.renderer.setProperty(this.input.nativeElement, 'value', this.formatOptions.currency);
1426
1357
  }
1427
- this.value = '';
1358
+ this.setValue('');
1428
1359
  }
1429
1360
  else {
1430
- this.value = value;
1361
+ this.setValue(value);
1431
1362
  }
1432
1363
  }
1433
1364
  onKeyUp(event) {
1434
- if (!this.disabled) {
1365
+ if (!this.disabled()) {
1435
1366
  let newValue = NaN;
1436
1367
  if (event.key === 'ArrowUp') {
1437
- newValue = this.safeNextStep('+', this.minValue);
1368
+ newValue = this.safeNextStep('+', this.minValue());
1438
1369
  }
1439
1370
  else if (event.key === 'ArrowDown') {
1440
- newValue = this.safeNextStep('-', this.maxValue);
1371
+ newValue = this.safeNextStep('-', this.maxValue());
1441
1372
  }
1442
1373
  if (!isNaN(newValue)) {
1443
1374
  event?.preventDefault();
1444
- this.value = this.formatter.format(newValue);
1375
+ this.setValue(this.formatter.format(newValue));
1445
1376
  }
1446
1377
  }
1447
1378
  }
1448
1379
  onFocusOut(event) {
1449
- if (!this.disabled) {
1380
+ if (!this.disabled()) {
1450
1381
  event?.preventDefault();
1451
- this._value = this.formatter.format(this.numberInput);
1382
+ this.value.set(this.formatter.format(this.numberInput));
1452
1383
  }
1453
1384
  }
1454
1385
  safeNextStep = (operation, minMax = 0) => {
1455
1386
  let prev = this.numberInput;
1456
- let clampStep = this.step !== undefined && !isNaN(this.step) ? this.step : 1;
1387
+ const step = this.step();
1388
+ let clampStep = step !== undefined && !isNaN(step) ? step : 1;
1389
+ const stepValue = this.step();
1457
1390
  if (this.formatOptions.style === 'percent' &&
1458
- (this.step === undefined || isNaN(this.step))) {
1391
+ (stepValue === undefined || isNaN(stepValue))) {
1459
1392
  clampStep = 0.01;
1460
1393
  }
1461
1394
  if (isNaN(prev)) {
1462
1395
  // if the input is empty, start from the min/max value when incrementing/decrementing,
1463
1396
  // or zero if there is no min/max value defined.
1464
1397
  let newValue = isNaN(minMax) ? 0 : minMax;
1465
- return snapValueToStep(newValue, this.minValue, this.maxValue, clampStep);
1398
+ return snapValueToStep(newValue, this.minValue(), this.maxValue(), clampStep);
1466
1399
  }
1467
1400
  else {
1468
1401
  // otherwise, first snap the current value to the nearest step. if it moves in the direction
1469
1402
  // we're going, use that value, otherwise add the step and snap that value.
1470
- let newValue = snapValueToStep(prev, this.minValue, this.maxValue, clampStep);
1403
+ let newValue = snapValueToStep(prev, this.minValue(), this.maxValue(), clampStep);
1471
1404
  if ((operation === '+' && newValue > prev) ||
1472
1405
  (operation === '-' && newValue < prev)) {
1473
1406
  return newValue;
1474
1407
  }
1475
- return snapValueToStep(handleDecimalOperation(operation, prev, clampStep), this.minValue, this.maxValue, clampStep);
1408
+ return snapValueToStep(handleDecimalOperation(operation, prev, clampStep), this.minValue(), this.maxValue(), clampStep);
1476
1409
  }
1477
1410
  };
1478
1411
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1479
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsInputNumberComponent, isStandalone: true, selector: "ns-input-number", inputs: { step: ["step", "step", numberAttribute], precision: ["precision", "precision", numberAttribute], minValue: ["minValue", "minValue", numberAttribute], maxValue: ["maxValue", "maxValue", numberAttribute], formatStyle: "formatStyle" }, host: { listeners: { "keydown": "onKeyUp($event)", "focusout": "onFocusOut($event)" } }, providers: [NS_INPUT_NUMBER_PROVIDER], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: ` @if (label) {
1480
- <label class="form-label" [attr.for]="id">{{ label }}</label>
1412
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsInputNumberComponent, isStandalone: true, selector: "ns-input-number", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, formatStyle: { classPropertyName: "formatStyle", publicName: "formatStyle", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeyUp($event)", "focusout": "onFocusOut($event)" } }, providers: [NS_INPUT_NUMBER_PROVIDER], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: ` @if (label()) {
1413
+ <label class="form-label" [attr.for]="id">{{ label() }}</label>
1481
1414
  }
1482
1415
 
1483
1416
  <div class="input-group">
@@ -1487,21 +1420,21 @@ class NsInputNumberComponent extends NsValueAccessor {
1487
1420
  type="text"
1488
1421
  autocomplete="off"
1489
1422
  [attr.id]="id"
1490
- [attr.min]="minValue"
1491
- [attr.max]="maxValue"
1492
- [attr.readonly]="readonly"
1493
- [attr.step]="step"
1494
- [placeholder]="placeholder"
1495
- [disabled]="disabled"
1496
- [ngModel]="value"
1423
+ [attr.min]="minValue()"
1424
+ [attr.max]="maxValue()"
1425
+ [attr.readonly]="readonly()"
1426
+ [attr.step]="step()"
1427
+ [placeholder]="placeholder()"
1428
+ [disabled]="disabled()"
1429
+ [ngModel]="value()"
1497
1430
  (input)="onInput($event)"
1498
1431
  />
1499
- </div>`, isInline: true, styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-radius-sm, .375rem);font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1432
+ </div>`, isInline: true, styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:var(--ns-control-host-width, 100%);max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem));font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1500
1433
  }
1501
1434
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsInputNumberComponent, decorators: [{
1502
1435
  type: Component,
1503
- args: [{ selector: 'ns-input-number', imports: [FormsModule], template: ` @if (label) {
1504
- <label class="form-label" [attr.for]="id">{{ label }}</label>
1436
+ args: [{ selector: 'ns-input-number', imports: [FormsModule], template: ` @if (label()) {
1437
+ <label class="form-label" [attr.for]="id">{{ label() }}</label>
1505
1438
  }
1506
1439
 
1507
1440
  <div class="input-group">
@@ -1511,31 +1444,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1511
1444
  type="text"
1512
1445
  autocomplete="off"
1513
1446
  [attr.id]="id"
1514
- [attr.min]="minValue"
1515
- [attr.max]="maxValue"
1516
- [attr.readonly]="readonly"
1517
- [attr.step]="step"
1518
- [placeholder]="placeholder"
1519
- [disabled]="disabled"
1520
- [ngModel]="value"
1447
+ [attr.min]="minValue()"
1448
+ [attr.max]="maxValue()"
1449
+ [attr.readonly]="readonly()"
1450
+ [attr.step]="step()"
1451
+ [placeholder]="placeholder()"
1452
+ [disabled]="disabled()"
1453
+ [ngModel]="value()"
1521
1454
  (input)="onInput($event)"
1522
1455
  />
1523
- </div>`, providers: [NS_INPUT_NUMBER_PROVIDER], styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-radius-sm, .375rem);font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}\n"] }]
1524
- }], propDecorators: { step: [{
1525
- type: Input,
1526
- args: [{ transform: numberAttribute }]
1527
- }], precision: [{
1528
- type: Input,
1529
- args: [{ transform: numberAttribute }]
1530
- }], minValue: [{
1531
- type: Input,
1532
- args: [{ transform: numberAttribute }]
1533
- }], maxValue: [{
1534
- type: Input,
1535
- args: [{ transform: numberAttribute }]
1536
- }], formatStyle: [{
1537
- type: Input
1538
- }], input: [{
1456
+ </div>`, providers: [NS_INPUT_NUMBER_PROVIDER], styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:var(--ns-control-host-width, 100%);max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem));font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}\n"] }]
1457
+ }], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "minValue", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], formatStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatStyle", required: false }] }], input: [{
1539
1458
  type: ViewChild,
1540
1459
  args: ['input', { static: true }]
1541
1460
  }], onKeyUp: [{
@@ -1547,8 +1466,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1547
1466
  }] } });
1548
1467
 
1549
1468
  class NsPasswordComponent extends NsValueAccessor {
1550
- forgotLink;
1551
- showAndHide;
1469
+ forgotLink = input(undefined, ...(ngDevMode ? [{ debugName: "forgotLink" }] : /* istanbul ignore next */ []));
1470
+ showAndHide = input(undefined, ...(ngDevMode ? [{ debugName: "showAndHide" }] : /* istanbul ignore next */ []));
1552
1471
  show;
1553
1472
  constructor() {
1554
1473
  super();
@@ -1558,13 +1477,13 @@ class NsPasswordComponent extends NsValueAccessor {
1558
1477
  this.show = !this.show;
1559
1478
  }
1560
1479
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1561
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsPasswordComponent, isStandalone: true, selector: "ns-password", inputs: { forgotLink: "forgotLink", showAndHide: "showAndHide" }, providers: [
1480
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsPasswordComponent, isStandalone: true, selector: "ns-password", inputs: { forgotLink: { classPropertyName: "forgotLink", publicName: "forgotLink", isSignal: true, isRequired: false, transformFunction: null }, showAndHide: { classPropertyName: "showAndHide", publicName: "showAndHide", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1562
1481
  {
1563
1482
  provide: NG_VALUE_ACCESSOR,
1564
1483
  useExisting: forwardRef(() => NsPasswordComponent),
1565
1484
  multi: true
1566
1485
  }
1567
- ], usesInheritance: true, ngImport: i0, template: "@if (label) {\n <label class=\"form-label\">\n {{ label }}\n @if (forgotLink) {\n <a [routerLink]=\"forgotLink\">Olvido su contrase\u00F1a?</a>\n }\n </label>\n}\n\n<div class=\"input-group\">\n <input\n class=\"form-control\"\n [type]=\"show ? 'input' : 'password'\"\n [(ngModel)]=\"value\"\n [placeholder]=\"placeholder\"\n (blur)=\"onTouched()\"\n [disabled]=\"disabled\"\n />\n\n @if (showAndHide) {\n <div class=\"input-group-append\" (click)=\"toggle()\">\n <span class=\"input-group-text\">\n <ns-icon [name]=\"show ? 'eye-hide' : 'eye-show'\" />\n </span>\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-radius-sm, .375rem);font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }] });
1486
+ ], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n <label class=\"form-label\">\n {{ label() }}\n @if (forgotLink()) {\n <a [routerLink]=\"forgotLink()\">Olvido su contrase\u00F1a?</a>\n }\n </label>\n}\n\n<div class=\"input-group\">\n <input\n class=\"form-control\"\n [type]=\"show ? 'input' : 'password'\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [placeholder]=\"placeholder()\"\n (blur)=\"onTouched()\"\n [disabled]=\"disabled()\"\n />\n\n @if (showAndHide()) {\n <div class=\"input-group-append\" (click)=\"toggle()\">\n <span class=\"input-group-text\">\n <ns-icon [name]=\"show ? 'eye-hide' : 'eye-show'\" />\n </span>\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:var(--ns-control-host-width, 100%);max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem));font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }] });
1568
1487
  }
1569
1488
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsPasswordComponent, decorators: [{
1570
1489
  type: Component,
@@ -1574,28 +1493,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1574
1493
  useExisting: forwardRef(() => NsPasswordComponent),
1575
1494
  multi: true
1576
1495
  }
1577
- ], imports: [RouterLink, FormsModule, NsIconsComponent], template: "@if (label) {\n <label class=\"form-label\">\n {{ label }}\n @if (forgotLink) {\n <a [routerLink]=\"forgotLink\">Olvido su contrase\u00F1a?</a>\n }\n </label>\n}\n\n<div class=\"input-group\">\n <input\n class=\"form-control\"\n [type]=\"show ? 'input' : 'password'\"\n [(ngModel)]=\"value\"\n [placeholder]=\"placeholder\"\n (blur)=\"onTouched()\"\n [disabled]=\"disabled\"\n />\n\n @if (showAndHide) {\n <div class=\"input-group-append\" (click)=\"toggle()\">\n <span class=\"input-group-text\">\n <ns-icon [name]=\"show ? 'eye-hide' : 'eye-show'\" />\n </span>\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-radius-sm, .375rem);font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}\n"] }]
1578
- }], ctorParameters: () => [], propDecorators: { forgotLink: [{
1579
- type: Input
1580
- }], showAndHide: [{
1581
- type: Input
1582
- }] } });
1496
+ ], imports: [RouterLink, FormsModule, NsIconsComponent], template: "@if (label()) {\n <label class=\"form-label\">\n {{ label() }}\n @if (forgotLink()) {\n <a [routerLink]=\"forgotLink()\">Olvido su contrase\u00F1a?</a>\n }\n </label>\n}\n\n<div class=\"input-group\">\n <input\n class=\"form-control\"\n [type]=\"show ? 'input' : 'password'\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n [placeholder]=\"placeholder()\"\n (blur)=\"onTouched()\"\n [disabled]=\"disabled()\"\n />\n\n @if (showAndHide()) {\n <div class=\"input-group-append\" (click)=\"toggle()\">\n <span class=\"input-group-text\">\n <ns-icon [name]=\"show ? 'eye-hide' : 'eye-show'\" />\n </span>\n </div>\n }\n</div>\n", styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:var(--ns-control-host-width, 100%);max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem));font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}\n"] }]
1497
+ }], ctorParameters: () => [], propDecorators: { forgotLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "forgotLink", required: false }] }], showAndHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAndHide", required: false }] }] } });
1583
1498
 
1584
1499
  class NsSwitchComponent extends NsValueAccessor {
1585
- boolean = true;
1586
- size = 'small';
1587
- theme = 'primary';
1588
- get value() {
1589
- return typeof this._value === 'boolean'
1590
- ? this._value
1591
- : YesNo.isYes(this._value);
1592
- }
1593
- set value(checked) {
1594
- this._value = checked;
1595
- this.onChange(this.boolean ? checked : YesNo.yesOrNo(checked));
1500
+ boolean = input(true, { ...(ngDevMode ? { debugName: "boolean" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
1501
+ size = input('small', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
1502
+ theme = input('primary', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
1503
+ checked = computed(() => {
1504
+ const value = this.value();
1505
+ return typeof value === 'boolean' ? value : YesNo.isYes(value);
1506
+ }, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
1507
+ setValue(checked) {
1508
+ super.setValue(this.boolean() ? checked : YesNo.yesOrNo(checked));
1596
1509
  }
1597
1510
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1598
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.21", type: NsSwitchComponent, isStandalone: true, selector: "ns-switch", inputs: { boolean: ["boolean", "boolean", booleanAttribute], size: "size", theme: "theme", value: "value" }, host: { properties: { "class.ns-switch": "true", "class.ns-switch--small": "size === \"small\"", "class.ns-switch--large": "size === \"large\"" } }, providers: [
1511
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsSwitchComponent, isStandalone: true, selector: "ns-switch", inputs: { boolean: { classPropertyName: "boolean", publicName: "boolean", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-switch": "true", "class.ns-switch--small": "size() === \"small\"", "class.ns-switch--large": "size() === \"large\"" } }, providers: [
1599
1512
  {
1600
1513
  provide: NG_VALUE_ACCESSOR,
1601
1514
  useExisting: forwardRef(() => NsSwitchComponent),
@@ -1606,12 +1519,13 @@ class NsSwitchComponent extends NsValueAccessor {
1606
1519
  type="checkbox"
1607
1520
  class="ns-switch__input"
1608
1521
  role="switch"
1609
- [(ngModel)]="value"
1610
- [ngClass]="{ 'ns-switch__input--success': theme == 'success' }"
1522
+ [ngModel]="checked()"
1523
+ (ngModelChange)="setValue($event)"
1524
+ [ngClass]="{ 'ns-switch__input--success': theme() == 'success' }"
1611
1525
  [attr.id]="id"
1612
- [disabled]="disabled"
1526
+ [disabled]="disabled()"
1613
1527
  />
1614
- <label class="ns-switch__label" [attr.for]="id">{{ label }}</label>
1528
+ <label class="ns-switch__label" [attr.for]="id">{{ label() }}</label>
1615
1529
  `, isInline: true, styles: [":host{display:block;min-height:1.5rem;padding-left:2.5rem;margin-bottom:.5rem;padding-top:.25rem}:host .ns-switch__input{margin-left:-2.5em;border-radius:2em;transition:background-position .15s ease-in-out;width:2em;height:1em;float:left;margin-top:.2em;vertical-align:top;background-size:contain;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e\");background-position:left center;background-repeat:no-repeat;border:1px solid rgba(0,0,0,.25);appearance:none}:host .ns-switch__input:checked{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e\");background-position:right center;background-repeat:no-repeat;background-color:var(--ns-color-primary, #3665f3);border-color:var(--ns-color-primary, #3665f3)}:host .ns-switch__input.ns-switch__input--success:checked{background-color:var(--ns-color-success, #0cac42);border-color:var(--ns-color-success, #0cac42)}:host .ns-switch__input:disabled{pointer-events:none;filter:none;opacity:.5}:host .ns-switch__label{display:inline-block}:host.ns-switch--large .ns-switch__input{width:3em;height:1.5em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
1616
1530
  }
1617
1531
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSwitchComponent, decorators: [{
@@ -1621,12 +1535,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1621
1535
  type="checkbox"
1622
1536
  class="ns-switch__input"
1623
1537
  role="switch"
1624
- [(ngModel)]="value"
1625
- [ngClass]="{ 'ns-switch__input--success': theme == 'success' }"
1538
+ [ngModel]="checked()"
1539
+ (ngModelChange)="setValue($event)"
1540
+ [ngClass]="{ 'ns-switch__input--success': theme() == 'success' }"
1626
1541
  [attr.id]="id"
1627
- [disabled]="disabled"
1542
+ [disabled]="disabled()"
1628
1543
  />
1629
- <label class="ns-switch__label" [attr.for]="id">{{ label }}</label>
1544
+ <label class="ns-switch__label" [attr.for]="id">{{ label() }}</label>
1630
1545
  `, providers: [
1631
1546
  {
1632
1547
  provide: NG_VALUE_ACCESSOR,
@@ -1635,60 +1550,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1635
1550
  }
1636
1551
  ], host: {
1637
1552
  '[class.ns-switch]': 'true',
1638
- '[class.ns-switch--small]': 'size === "small"',
1639
- '[class.ns-switch--large]': 'size === "large"'
1553
+ '[class.ns-switch--small]': 'size() === "small"',
1554
+ '[class.ns-switch--large]': 'size() === "large"'
1640
1555
  }, styles: [":host{display:block;min-height:1.5rem;padding-left:2.5rem;margin-bottom:.5rem;padding-top:.25rem}:host .ns-switch__input{margin-left:-2.5em;border-radius:2em;transition:background-position .15s ease-in-out;width:2em;height:1em;float:left;margin-top:.2em;vertical-align:top;background-size:contain;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e\");background-position:left center;background-repeat:no-repeat;border:1px solid rgba(0,0,0,.25);appearance:none}:host .ns-switch__input:checked{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e\");background-position:right center;background-repeat:no-repeat;background-color:var(--ns-color-primary, #3665f3);border-color:var(--ns-color-primary, #3665f3)}:host .ns-switch__input.ns-switch__input--success:checked{background-color:var(--ns-color-success, #0cac42);border-color:var(--ns-color-success, #0cac42)}:host .ns-switch__input:disabled{pointer-events:none;filter:none;opacity:.5}:host .ns-switch__label{display:inline-block}:host.ns-switch--large .ns-switch__input{width:3em;height:1.5em}\n"] }]
1641
- }], propDecorators: { boolean: [{
1642
- type: Input,
1643
- args: [{ transform: booleanAttribute }]
1644
- }], size: [{
1645
- type: Input
1646
- }], theme: [{
1647
- type: Input
1648
- }], value: [{
1649
- type: Input
1650
- }] } });
1556
+ }], propDecorators: { boolean: [{ type: i0.Input, args: [{ isSignal: true, alias: "boolean", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }] } });
1651
1557
 
1652
1558
  class NsTextAreaComponent extends NsValueAccessor {
1653
- rows = 3;
1559
+ rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
1654
1560
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsTextAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1655
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsTextAreaComponent, isStandalone: true, selector: "ns-textarea", inputs: { rows: "rows" }, providers: [
1561
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsTextAreaComponent, isStandalone: true, selector: "ns-textarea", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
1656
1562
  {
1657
1563
  provide: NG_VALUE_ACCESSOR,
1658
1564
  useExisting: forwardRef(() => NsTextAreaComponent),
1659
1565
  multi: true
1660
1566
  }
1661
1567
  ], usesInheritance: true, ngImport: i0, template: `
1662
- @if (label) {
1663
- <label class="form-label" [attr.for]="id">{{ label }}</label>
1568
+ @if (label()) {
1569
+ <label class="form-label" [attr.for]="id">{{ label() }}</label>
1664
1570
  }
1665
1571
 
1666
1572
  <textarea
1667
1573
  class="form-control"
1668
- [(ngModel)]="value"
1574
+ [ngModel]="value()"
1575
+ (ngModelChange)="setValue($event)"
1669
1576
  [id]="id"
1670
- [rows]="rows"
1671
- [placeholder]="placeholder"
1577
+ [rows]="rows()"
1578
+ [placeholder]="placeholder()"
1672
1579
  (blur)="onTouched()"
1673
- [disabled]="disabled"
1580
+ [disabled]="disabled()"
1674
1581
  ></textarea>
1675
- `, isInline: true, styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-radius-sm, .375rem);font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1582
+ `, isInline: true, styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:var(--ns-control-host-width, 100%);max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem));font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1676
1583
  }
1677
1584
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsTextAreaComponent, decorators: [{
1678
1585
  type: Component,
1679
1586
  args: [{ selector: 'ns-textarea', template: `
1680
- @if (label) {
1681
- <label class="form-label" [attr.for]="id">{{ label }}</label>
1587
+ @if (label()) {
1588
+ <label class="form-label" [attr.for]="id">{{ label() }}</label>
1682
1589
  }
1683
1590
 
1684
1591
  <textarea
1685
1592
  class="form-control"
1686
- [(ngModel)]="value"
1593
+ [ngModel]="value()"
1594
+ (ngModelChange)="setValue($event)"
1687
1595
  [id]="id"
1688
- [rows]="rows"
1689
- [placeholder]="placeholder"
1596
+ [rows]="rows()"
1597
+ [placeholder]="placeholder()"
1690
1598
  (blur)="onTouched()"
1691
- [disabled]="disabled"
1599
+ [disabled]="disabled()"
1692
1600
  ></textarea>
1693
1601
  `, providers: [
1694
1602
  {
@@ -1696,15 +1604,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1696
1604
  useExisting: forwardRef(() => NsTextAreaComponent),
1697
1605
  multi: true
1698
1606
  }
1699
- ], imports: [FormsModule], styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-radius-sm, .375rem);font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}\n"] }]
1700
- }], propDecorators: { rows: [{
1701
- type: Input
1702
- }] } });
1607
+ ], imports: [FormsModule], styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:var(--ns-control-host-width, 100%);max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem));font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}\n"] }]
1608
+ }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
1703
1609
 
1704
1610
  class NsContentEditableComponent extends NsValueAccessor {
1705
1611
  elementRef = inject(ElementRef);
1706
1612
  renderer = inject(Renderer2);
1707
- maxLength;
1613
+ maxLength = input(undefined, { ...(ngDevMode ? { debugName: "maxLength" } : /* istanbul ignore next */ {}), alias: 'maxlength' });
1708
1614
  enabled = true;
1709
1615
  writeValue(value) {
1710
1616
  if (typeof value !== 'undefined') {
@@ -1718,18 +1624,19 @@ class NsContentEditableComponent extends NsValueAccessor {
1718
1624
  this.onTouched();
1719
1625
  }
1720
1626
  onKeyUp(event) {
1721
- if (this.maxLength &&
1722
- this.elementRef.nativeElement.innerText.length >= this.maxLength &&
1627
+ const maxLength = this.maxLength();
1628
+ if (maxLength &&
1629
+ this.elementRef.nativeElement.innerText.length >= maxLength &&
1723
1630
  event.key !== 'Backspace') {
1724
1631
  event.preventDefault();
1725
1632
  }
1726
1633
  }
1727
1634
  setDisabledState(isDisabled) {
1728
- this.disabled = isDisabled;
1635
+ this.disabled.set(isDisabled);
1729
1636
  this.enabled = !isDisabled;
1730
1637
  }
1731
1638
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsContentEditableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1732
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsContentEditableComponent, isStandalone: true, selector: "ns-content-editable", inputs: { maxLength: ["maxlength", "maxLength"] }, host: { listeners: { "input": "onInput()", "blur": "onBlur()", "keydown": "onKeyUp($event)" }, properties: { "class.ns-content--disabled": "disabled", "attr.contenteditable": "this.enabled" } }, providers: [
1639
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsContentEditableComponent, isStandalone: true, selector: "ns-content-editable", inputs: { maxLength: { classPropertyName: "maxLength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput()", "blur": "onBlur()", "keydown": "onKeyUp($event)" }, properties: { "class.ns-content--disabled": "disabled()", "attr.contenteditable": "this.enabled" } }, providers: [
1733
1640
  {
1734
1641
  provide: NG_VALUE_ACCESSOR,
1735
1642
  useExisting: forwardRef(() => NsContentEditableComponent),
@@ -1746,12 +1653,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1746
1653
  multi: true
1747
1654
  }
1748
1655
  ], host: {
1749
- '[class.ns-content--disabled]': 'disabled'
1656
+ '[class.ns-content--disabled]': 'disabled()'
1750
1657
  }, styles: [":host{display:block;position:relative;background-color:var(--ns-content-bg, #fff);width:100%;height:fit-content;min-height:7rem;outline:none}\n", ":host.ns-content--disabled{background-color:var(--ns-content-disabled-bg,#e9ecef);opacity:.65}\n"] }]
1751
- }], propDecorators: { maxLength: [{
1752
- type: Input,
1753
- args: ['maxlength']
1754
- }], enabled: [{
1658
+ }], propDecorators: { maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], enabled: [{
1755
1659
  type: HostBinding,
1756
1660
  args: ['attr.contenteditable']
1757
1661
  }], onInput: [{
@@ -1777,8 +1681,8 @@ class NsButtonGroupComponent extends NsValueAccessor {
1777
1681
  multi: true
1778
1682
  }
1779
1683
  ], queries: [{ propertyName: "items", predicate: NsButtonComponent }], usesInheritance: true, ngImport: i0, template: `
1780
- @if (label) {
1781
- <label class="form-label">{{ label }}</label>
1684
+ @if (label()) {
1685
+ <label class="form-label">{{ label() }}</label>
1782
1686
  }
1783
1687
 
1784
1688
  <div
@@ -1792,21 +1696,21 @@ class NsButtonGroupComponent extends NsValueAccessor {
1792
1696
  class="btn__check"
1793
1697
  autocomplete="off"
1794
1698
  [attr.id]="'btn-group__' + i"
1795
- [checked]="value == item.value"
1796
- (click)="value = item.value"
1699
+ [checked]="value() == item.value()"
1700
+ (click)="setValue(item.value())"
1797
1701
  />
1798
1702
  <label class="btn btn__outline-primary" [attr.for]="'btn-group__' + i">
1799
- {{ item.label }}
1703
+ {{ item.label() }}
1800
1704
  </label>
1801
1705
  }
1802
1706
  </div>
1803
- `, isInline: true, styles: [":host{display:block;width:fit-content;margin-bottom:var(--ns-space-2, .5rem)}.form-label{display:block;font-size:var(--ns-font-size-sm, .875rem);margin-bottom:var(--ns-space-2, .5rem)}.btn{display:block;position:relative;border-radius:var(--ns-border-radius, .375rem);vertical-align:center;text-align:center;text-transform:none;font-size:.875rem;line-height:1rem;outline:none;white-space:nowrap;padding:var(--ns-btn-padding-y, .5rem) var(--ns-btn-padding-x, 1rem);cursor:pointer}.btn:disabled{pointer-events:none}.btn__check{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn__group{position:relative;display:inline-flex;vertical-align:middle}.btn__outline-primary{color:var(--ns-color-primary, #3665f3);background-color:var(--ns-color-surface, #fff);min-width:var(--ns-btn-min-width, 5rem);border:1px solid var(--ns-color-primary, #3665f3)}.btn__outline-primary:focus,.btn__outline-primary:active{color:var(--ns-color-primary-hover, #2f57d9);border-color:var(--ns-color-primary, #3665f3);box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__outline-primary:hover{color:var(--ns-color-primary-hover, #2f57d9);border-color:var(--ns-color-primary, #3665f3)}.btn__check:checked+.btn__outline-primary{background-color:var(--ns-color-primary, #3665f3);border:1px solid var(--ns-color-primary, #3665f3);color:var(--ns-color-primary-foreground, #fff);min-width:var(--ns-btn-min-width, 5rem)}.btn__check:checked+.btn__outline-primary:focus,.btn__check:checked+.btn__outline-primary:active{color:var(--ns-color-primary-foreground, #fff);border-color:var(--ns-color-primary-hover, #2f57d9);box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__check:checked+.btn__outline-primary:hover{background-color:var(--ns-color-primary-hover, #2f57d9)}.btn:not(:first-child){margin-left:-1px}.btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}\n"] });
1707
+ `, isInline: true, styles: [":host{display:block;width:fit-content;margin-bottom:var(--ns-space-2, .5rem)}.form-label{display:block;font-size:var(--ns-font-size-sm, .875rem);margin-bottom:var(--ns-space-2, .5rem)}.btn{display:block;position:relative;border-radius:var(--ns-control-border-radius, var(--ns-border-radius, .375rem));vertical-align:center;text-align:center;text-transform:none;font-size:.875rem;line-height:1rem;outline:none;white-space:nowrap;padding:var(--ns-btn-padding-y, .5rem) var(--ns-btn-padding-x, 1rem);cursor:pointer}.btn:disabled{pointer-events:none}.btn__check{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn__group{position:relative;display:inline-flex;vertical-align:middle}.btn__outline-primary{color:var(--ns-color-primary, #3665f3);background-color:var(--ns-color-surface, #fff);min-width:var(--ns-btn-min-width, 5rem);border:1px solid var(--ns-color-primary, #3665f3)}.btn__outline-primary:focus,.btn__outline-primary:active{color:var(--ns-color-primary-hover, #2f57d9);border-color:var(--ns-color-primary, #3665f3);box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__outline-primary:hover{color:var(--ns-color-primary-hover, #2f57d9);border-color:var(--ns-color-primary, #3665f3)}.btn__check:checked+.btn__outline-primary{background-color:var(--ns-color-primary, #3665f3);border:1px solid var(--ns-color-primary, #3665f3);color:var(--ns-color-primary-foreground, #fff);min-width:var(--ns-btn-min-width, 5rem)}.btn__check:checked+.btn__outline-primary:focus,.btn__check:checked+.btn__outline-primary:active{color:var(--ns-color-primary-foreground, #fff);border-color:var(--ns-color-primary-hover, #2f57d9);box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__check:checked+.btn__outline-primary:hover{background-color:var(--ns-color-primary-hover, #2f57d9)}.btn:not(:first-child){margin-left:-1px}.btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}\n"] });
1804
1708
  }
1805
1709
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsButtonGroupComponent, decorators: [{
1806
1710
  type: Component,
1807
1711
  args: [{ selector: 'ns-button-group', standalone: true, imports: [], template: `
1808
- @if (label) {
1809
- <label class="form-label">{{ label }}</label>
1712
+ @if (label()) {
1713
+ <label class="form-label">{{ label() }}</label>
1810
1714
  }
1811
1715
 
1812
1716
  <div
@@ -1820,11 +1724,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1820
1724
  class="btn__check"
1821
1725
  autocomplete="off"
1822
1726
  [attr.id]="'btn-group__' + i"
1823
- [checked]="value == item.value"
1824
- (click)="value = item.value"
1727
+ [checked]="value() == item.value()"
1728
+ (click)="setValue(item.value())"
1825
1729
  />
1826
1730
  <label class="btn btn__outline-primary" [attr.for]="'btn-group__' + i">
1827
- {{ item.label }}
1731
+ {{ item.label() }}
1828
1732
  </label>
1829
1733
  }
1830
1734
  </div>
@@ -1836,23 +1740,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1836
1740
  }
1837
1741
  ], host: {
1838
1742
  '[class.ns-button-group]': 'true'
1839
- }, styles: [":host{display:block;width:fit-content;margin-bottom:var(--ns-space-2, .5rem)}.form-label{display:block;font-size:var(--ns-font-size-sm, .875rem);margin-bottom:var(--ns-space-2, .5rem)}.btn{display:block;position:relative;border-radius:var(--ns-border-radius, .375rem);vertical-align:center;text-align:center;text-transform:none;font-size:.875rem;line-height:1rem;outline:none;white-space:nowrap;padding:var(--ns-btn-padding-y, .5rem) var(--ns-btn-padding-x, 1rem);cursor:pointer}.btn:disabled{pointer-events:none}.btn__check{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn__group{position:relative;display:inline-flex;vertical-align:middle}.btn__outline-primary{color:var(--ns-color-primary, #3665f3);background-color:var(--ns-color-surface, #fff);min-width:var(--ns-btn-min-width, 5rem);border:1px solid var(--ns-color-primary, #3665f3)}.btn__outline-primary:focus,.btn__outline-primary:active{color:var(--ns-color-primary-hover, #2f57d9);border-color:var(--ns-color-primary, #3665f3);box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__outline-primary:hover{color:var(--ns-color-primary-hover, #2f57d9);border-color:var(--ns-color-primary, #3665f3)}.btn__check:checked+.btn__outline-primary{background-color:var(--ns-color-primary, #3665f3);border:1px solid var(--ns-color-primary, #3665f3);color:var(--ns-color-primary-foreground, #fff);min-width:var(--ns-btn-min-width, 5rem)}.btn__check:checked+.btn__outline-primary:focus,.btn__check:checked+.btn__outline-primary:active{color:var(--ns-color-primary-foreground, #fff);border-color:var(--ns-color-primary-hover, #2f57d9);box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__check:checked+.btn__outline-primary:hover{background-color:var(--ns-color-primary-hover, #2f57d9)}.btn:not(:first-child){margin-left:-1px}.btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}\n"] }]
1743
+ }, styles: [":host{display:block;width:fit-content;margin-bottom:var(--ns-space-2, .5rem)}.form-label{display:block;font-size:var(--ns-font-size-sm, .875rem);margin-bottom:var(--ns-space-2, .5rem)}.btn{display:block;position:relative;border-radius:var(--ns-control-border-radius, var(--ns-border-radius, .375rem));vertical-align:center;text-align:center;text-transform:none;font-size:.875rem;line-height:1rem;outline:none;white-space:nowrap;padding:var(--ns-btn-padding-y, .5rem) var(--ns-btn-padding-x, 1rem);cursor:pointer}.btn:disabled{pointer-events:none}.btn__check{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn__group{position:relative;display:inline-flex;vertical-align:middle}.btn__outline-primary{color:var(--ns-color-primary, #3665f3);background-color:var(--ns-color-surface, #fff);min-width:var(--ns-btn-min-width, 5rem);border:1px solid var(--ns-color-primary, #3665f3)}.btn__outline-primary:focus,.btn__outline-primary:active{color:var(--ns-color-primary-hover, #2f57d9);border-color:var(--ns-color-primary, #3665f3);box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__outline-primary:hover{color:var(--ns-color-primary-hover, #2f57d9);border-color:var(--ns-color-primary, #3665f3)}.btn__check:checked+.btn__outline-primary{background-color:var(--ns-color-primary, #3665f3);border:1px solid var(--ns-color-primary, #3665f3);color:var(--ns-color-primary-foreground, #fff);min-width:var(--ns-btn-min-width, 5rem)}.btn__check:checked+.btn__outline-primary:focus,.btn__check:checked+.btn__outline-primary:active{color:var(--ns-color-primary-foreground, #fff);border-color:var(--ns-color-primary-hover, #2f57d9);box-shadow:var(--ns-shadow-focus, rgba(43, 34, 51, .04) 0 1px 4px)}.btn__check:checked+.btn__outline-primary:hover{background-color:var(--ns-color-primary-hover, #2f57d9)}.btn:not(:first-child){margin-left:-1px}.btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}\n"] }]
1840
1744
  }], propDecorators: { items: [{
1841
1745
  type: ContentChildren,
1842
1746
  args: [NsButtonComponent]
1843
1747
  }] } });
1844
1748
 
1845
1749
  class NsCommentComponent {
1846
- title;
1847
- description;
1848
- placeholder;
1849
- messages = [];
1850
- cover;
1851
- submitText;
1852
- logged;
1853
- maxLength = 128;
1854
- disabled;
1855
- commit = new Subject();
1750
+ title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
1751
+ description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
1752
+ placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
1753
+ messages = input([], ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
1754
+ cover = input(undefined, ...(ngDevMode ? [{ debugName: "cover" }] : /* istanbul ignore next */ []));
1755
+ submitText = input(undefined, ...(ngDevMode ? [{ debugName: "submitText" }] : /* istanbul ignore next */ []));
1756
+ logged = input(undefined, ...(ngDevMode ? [{ debugName: "logged" }] : /* istanbul ignore next */ []));
1757
+ maxLength = input(128, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
1758
+ disabled = input(undefined, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
1759
+ commit = output();
1856
1760
  invalid = false;
1857
1761
  content = '';
1858
1762
  clearEmptyValues = new RegExp(/(<div><br><\/div>)*/g);
@@ -1860,7 +1764,7 @@ class NsCommentComponent {
1860
1764
  ngOnInit() { }
1861
1765
  publish() {
1862
1766
  if (this.content) {
1863
- this.commit.next(this.content.replace(this.clearEmptyValues, ''));
1767
+ this.commit.emit(this.content.replace(this.clearEmptyValues, ''));
1864
1768
  this.content = '';
1865
1769
  }
1866
1770
  else {
@@ -1868,11 +1772,11 @@ class NsCommentComponent {
1868
1772
  }
1869
1773
  }
1870
1774
  get counter() {
1871
- const characters = this.maxLength - this.content.length;
1775
+ const characters = this.maxLength() - this.content.length;
1872
1776
  return characters > 0 ? characters : 0;
1873
1777
  }
1874
1778
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCommentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1875
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsCommentComponent, isStandalone: true, selector: "ns-comment", inputs: { title: "title", description: "description", placeholder: "placeholder", messages: "messages", cover: "cover", submitText: "submitText", logged: "logged", maxLength: "maxLength", disabled: "disabled" }, outputs: { commit: "commit" }, ngImport: i0, template: "@if (logged) {\n <div class=\"ns-comment-box\" [ngClass]=\"{ 'ns-comment-invalid': invalid }\">\n <ns-avatar class=\"ns-comment-avatar\" [src]=\"cover?.url\" />\n\n <div class=\"ns-comment-input-wrap\">\n <div class=\"ns-comment-input\">\n <ns-content-editable\n class=\"ns-comment-input-content\"\n [maxlength]=\"maxLength\"\n [(ngModel)]=\"content\"\n [disabled]=\"disabled\"\n />\n\n @if (!content) {\n <span class=\"ns-comment-input-placeholder\">{{ placeholder }}</span>\n }\n </div>\n\n <div class=\"ns-comment-footer\">\n <span class=\"ns-comment-counter\">Quedan {{ counter }} caracteres</span>\n\n @if (submitText) {\n <button\n class=\"ns-comment-submit\"\n (click)=\"publish()\"\n [disabled]=\"disabled\"\n >\n {{ submitText }}\n </button>\n }\n </div>\n </div>\n </div>\n} @else {\n <h4 class=\"ns-comment-title\">\n {{ title }} <br />\n <small\n class=\"ns-comment-description\"\n [innerHTML]=\"description | nsSafeHtml\"\n ></small>\n </h4>\n\n <div class=\"ns-comment-logout\">\n <ng-content />\n </div>\n}\n@if (messages?.length) {\n <ul class=\"ns-comment-list\">\n @for (comment of messages; track comment) {\n <li class=\"ns-comment\">\n <ns-avatar\n class=\"ns-comment-cover\"\n [src]=\"comment.cover?.url\"\n size=\"medium\"\n />\n\n <div class=\"ns-comment-wrap\">\n <div class=\"ns-comment-user-wrap\">\n @if (comment?.author; as author) {\n <a [attr.href]=\"author.link\" class=\"ns-comment-author\">\n {{ author.name }}\n </a>\n }\n @if (comment?.created; as date) {\n <span class=\"ns-comment-date\">{{ date | nsHumanize }}</span>\n }\n\n <div\n class=\"ns-comment-message\"\n [innerHTML]=\"comment?.message | nsSafeHtml\"\n ></div>\n </div>\n </div>\n </li>\n }\n </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;background-color:#fff;border-radius:.4rem;padding:1.5rem;margin-bottom:1rem;font-weight:300;color:#555}.ns-comment{display:flex;justify-content:flex-start;align-content:center}.ns-comment-title{margin-top:unset;margin-bottom:1rem}.ns-comment-list{border-top:1px solid #2c3035;margin:1.25rem -1.5rem 0;padding:1rem 2rem}.ns-comment-author{font-weight:500;-webkit-font-smoothing:antialiased}.ns-comment-description{font-weight:300;font-size:70%;color:#333}.ns-comment-cover,.ns-comment-avatar{height:3.5rem;width:4rem}.ns-comment-cover:not(.ns-comment-avatar),.ns-comment-avatar:not(.ns-comment-avatar){margin-top:.7rem}.ns-comment-wrap{padding:1rem;width:100%}.ns-comment-date{font-size:12px;color:#9c9c9c}.ns-comment-date:before{content:\"\\2022\";margin:0 4px}.ns-comment-box{display:flex}.ns-comment-input{position:relative;border-radius:.4rem;padding:1rem;border:1px solid #e8e8e8;margin-bottom:1rem;min-height:58px}.ns-comment-input-wrap{width:100%;margin-left:1rem;flex:1 auto}.ns-comment-input-content{position:relative;min-height:1rem;z-index:2}.ns-comment-input-content:focus-visible{outline:none}.ns-comment-input-placeholder{position:absolute;top:1rem;color:#aaa}.ns-comment-submit{display:flex;justify-content:center;align-items:center;color:#fff;border-radius:var(--ns-radius-lg, .75rem);background-color:var(--ns-color-primary, #3665f3);font-weight:600;border:1px solid transparent;line-height:1.25;transition:background,color,border .3s linear;font-size:.8rem;height:2.3rem;padding:.37rem 1.5rem;-webkit-user-select:none;user-select:none;text-transform:uppercase;-webkit-appearance:button;margin-left:auto}.ns-comment-submit:hover{background-color:var(--ns-color-primary-hover, #2f57d9)}.ns-comment-submit:disabled{cursor:not-allowed;background-color:#3bacf1}.ns-comment-footer{display:flex;align-items:center}.ns-comment-counter{color:#9c9c9c;margin-right:.5rem}.ns-comment-invalid .ns-comment-input{border-color:#ea400e;transition:all .3s ease-in-out}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsAvatarComponent, selector: "ns-avatar", inputs: ["src", "atl", "icon", "shape", "size", "gap"] }, { kind: "component", type: NsContentEditableComponent, selector: "ns-content-editable", inputs: ["maxlength"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: NsSafeHtmlPipe, name: "nsSafeHtml" }, { kind: "pipe", type: NsHumanizePipe, name: "nsHumanize" }] });
1779
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsCommentComponent, isStandalone: true, selector: "ns-comment", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, cover: { classPropertyName: "cover", publicName: "cover", isSignal: true, isRequired: false, transformFunction: null }, submitText: { classPropertyName: "submitText", publicName: "submitText", isSignal: true, isRequired: false, transformFunction: null }, logged: { classPropertyName: "logged", publicName: "logged", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commit: "commit" }, ngImport: i0, template: "@if (logged()) {\n <div class=\"ns-comment-box\" [ngClass]=\"{ 'ns-comment-invalid': invalid }\">\n <ns-avatar class=\"ns-comment-avatar\" [src]=\"cover()?.url\" />\n\n <div class=\"ns-comment-input-wrap\">\n <div class=\"ns-comment-input\">\n <ns-content-editable\n class=\"ns-comment-input-content\"\n [maxlength]=\"maxLength()\"\n [(ngModel)]=\"content\"\n [disabled]=\"disabled()\"\n />\n\n @if (!content) {\n <span class=\"ns-comment-input-placeholder\">{{ placeholder() }}</span>\n }\n </div>\n\n <div class=\"ns-comment-footer\">\n <span class=\"ns-comment-counter\">Quedan {{ counter }} caracteres</span>\n\n @if (submitText()) {\n <button\n class=\"ns-comment-submit\"\n (click)=\"publish()\"\n [disabled]=\"disabled()\"\n >\n {{ submitText() }}\n </button>\n }\n </div>\n </div>\n </div>\n} @else {\n <h4 class=\"ns-comment-title\">\n {{ title() }} <br />\n <small\n class=\"ns-comment-description\"\n [innerHTML]=\"description() | nsSafeHtml\"\n ></small>\n </h4>\n\n <div class=\"ns-comment-logout\">\n <ng-content />\n </div>\n}\n@if (messages().length) {\n <ul class=\"ns-comment-list\">\n @for (comment of messages(); track comment) {\n <li class=\"ns-comment\">\n <ns-avatar\n class=\"ns-comment-cover\"\n [src]=\"comment.cover?.url\"\n size=\"medium\"\n />\n\n <div class=\"ns-comment-wrap\">\n <div class=\"ns-comment-user-wrap\">\n @if (comment?.author; as author) {\n <a [attr.href]=\"author.link\" class=\"ns-comment-author\">\n {{ author.name }}\n </a>\n }\n @if (comment?.created; as date) {\n <span class=\"ns-comment-date\">{{ date | nsHumanize }}</span>\n }\n\n <div\n class=\"ns-comment-message\"\n [innerHTML]=\"comment?.message | nsSafeHtml\"\n ></div>\n </div>\n </div>\n </li>\n }\n </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;background-color:#fff;border-radius:.4rem;padding:1.5rem;margin-bottom:1rem;font-weight:300;color:#555}.ns-comment{display:flex;justify-content:flex-start;align-content:center}.ns-comment-title{margin-top:unset;margin-bottom:1rem}.ns-comment-list{border-top:1px solid #2c3035;margin:1.25rem -1.5rem 0;padding:1rem 2rem}.ns-comment-author{font-weight:500;-webkit-font-smoothing:antialiased}.ns-comment-description{font-weight:300;font-size:70%;color:#333}.ns-comment-cover,.ns-comment-avatar{height:3.5rem;width:4rem}.ns-comment-cover:not(.ns-comment-avatar),.ns-comment-avatar:not(.ns-comment-avatar){margin-top:.7rem}.ns-comment-wrap{padding:1rem;width:100%}.ns-comment-date{font-size:12px;color:#9c9c9c}.ns-comment-date:before{content:\"\\2022\";margin:0 4px}.ns-comment-box{display:flex}.ns-comment-input{position:relative;border-radius:.4rem;padding:1rem;border:1px solid #e8e8e8;margin-bottom:1rem;min-height:58px}.ns-comment-input-wrap{width:100%;margin-left:1rem;flex:1 auto}.ns-comment-input-content{position:relative;min-height:1rem;z-index:2}.ns-comment-input-content:focus-visible{outline:none}.ns-comment-input-placeholder{position:absolute;top:1rem;color:#aaa}.ns-comment-submit{display:flex;justify-content:center;align-items:center;color:#fff;border-radius:var(--ns-radius-lg, .75rem);background-color:var(--ns-color-primary, #3665f3);font-weight:600;border:1px solid transparent;line-height:1.25;transition:background,color,border .3s linear;font-size:.8rem;height:2.3rem;padding:.37rem 1.5rem;-webkit-user-select:none;user-select:none;text-transform:uppercase;-webkit-appearance:button;margin-left:auto}.ns-comment-submit:hover{background-color:var(--ns-color-primary-hover, #2f57d9)}.ns-comment-submit:disabled{cursor:not-allowed;background-color:#3bacf1}.ns-comment-footer{display:flex;align-items:center}.ns-comment-counter{color:#9c9c9c;margin-right:.5rem}.ns-comment-invalid .ns-comment-input{border-color:#ea400e;transition:all .3s ease-in-out}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsAvatarComponent, selector: "ns-avatar", inputs: ["src", "atl", "icon", "shape", "size", "gap"] }, { kind: "component", type: NsContentEditableComponent, selector: "ns-content-editable", inputs: ["maxlength"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: NsSafeHtmlPipe, name: "nsSafeHtml" }, { kind: "pipe", type: NsHumanizePipe, name: "nsHumanize" }] });
1876
1780
  }
1877
1781
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsCommentComponent, decorators: [{
1878
1782
  type: Component,
@@ -1883,28 +1787,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
1883
1787
  FormsModule,
1884
1788
  NsSafeHtmlPipe,
1885
1789
  NsHumanizePipe
1886
- ], template: "@if (logged) {\n <div class=\"ns-comment-box\" [ngClass]=\"{ 'ns-comment-invalid': invalid }\">\n <ns-avatar class=\"ns-comment-avatar\" [src]=\"cover?.url\" />\n\n <div class=\"ns-comment-input-wrap\">\n <div class=\"ns-comment-input\">\n <ns-content-editable\n class=\"ns-comment-input-content\"\n [maxlength]=\"maxLength\"\n [(ngModel)]=\"content\"\n [disabled]=\"disabled\"\n />\n\n @if (!content) {\n <span class=\"ns-comment-input-placeholder\">{{ placeholder }}</span>\n }\n </div>\n\n <div class=\"ns-comment-footer\">\n <span class=\"ns-comment-counter\">Quedan {{ counter }} caracteres</span>\n\n @if (submitText) {\n <button\n class=\"ns-comment-submit\"\n (click)=\"publish()\"\n [disabled]=\"disabled\"\n >\n {{ submitText }}\n </button>\n }\n </div>\n </div>\n </div>\n} @else {\n <h4 class=\"ns-comment-title\">\n {{ title }} <br />\n <small\n class=\"ns-comment-description\"\n [innerHTML]=\"description | nsSafeHtml\"\n ></small>\n </h4>\n\n <div class=\"ns-comment-logout\">\n <ng-content />\n </div>\n}\n@if (messages?.length) {\n <ul class=\"ns-comment-list\">\n @for (comment of messages; track comment) {\n <li class=\"ns-comment\">\n <ns-avatar\n class=\"ns-comment-cover\"\n [src]=\"comment.cover?.url\"\n size=\"medium\"\n />\n\n <div class=\"ns-comment-wrap\">\n <div class=\"ns-comment-user-wrap\">\n @if (comment?.author; as author) {\n <a [attr.href]=\"author.link\" class=\"ns-comment-author\">\n {{ author.name }}\n </a>\n }\n @if (comment?.created; as date) {\n <span class=\"ns-comment-date\">{{ date | nsHumanize }}</span>\n }\n\n <div\n class=\"ns-comment-message\"\n [innerHTML]=\"comment?.message | nsSafeHtml\"\n ></div>\n </div>\n </div>\n </li>\n }\n </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;background-color:#fff;border-radius:.4rem;padding:1.5rem;margin-bottom:1rem;font-weight:300;color:#555}.ns-comment{display:flex;justify-content:flex-start;align-content:center}.ns-comment-title{margin-top:unset;margin-bottom:1rem}.ns-comment-list{border-top:1px solid #2c3035;margin:1.25rem -1.5rem 0;padding:1rem 2rem}.ns-comment-author{font-weight:500;-webkit-font-smoothing:antialiased}.ns-comment-description{font-weight:300;font-size:70%;color:#333}.ns-comment-cover,.ns-comment-avatar{height:3.5rem;width:4rem}.ns-comment-cover:not(.ns-comment-avatar),.ns-comment-avatar:not(.ns-comment-avatar){margin-top:.7rem}.ns-comment-wrap{padding:1rem;width:100%}.ns-comment-date{font-size:12px;color:#9c9c9c}.ns-comment-date:before{content:\"\\2022\";margin:0 4px}.ns-comment-box{display:flex}.ns-comment-input{position:relative;border-radius:.4rem;padding:1rem;border:1px solid #e8e8e8;margin-bottom:1rem;min-height:58px}.ns-comment-input-wrap{width:100%;margin-left:1rem;flex:1 auto}.ns-comment-input-content{position:relative;min-height:1rem;z-index:2}.ns-comment-input-content:focus-visible{outline:none}.ns-comment-input-placeholder{position:absolute;top:1rem;color:#aaa}.ns-comment-submit{display:flex;justify-content:center;align-items:center;color:#fff;border-radius:var(--ns-radius-lg, .75rem);background-color:var(--ns-color-primary, #3665f3);font-weight:600;border:1px solid transparent;line-height:1.25;transition:background,color,border .3s linear;font-size:.8rem;height:2.3rem;padding:.37rem 1.5rem;-webkit-user-select:none;user-select:none;text-transform:uppercase;-webkit-appearance:button;margin-left:auto}.ns-comment-submit:hover{background-color:var(--ns-color-primary-hover, #2f57d9)}.ns-comment-submit:disabled{cursor:not-allowed;background-color:#3bacf1}.ns-comment-footer{display:flex;align-items:center}.ns-comment-counter{color:#9c9c9c;margin-right:.5rem}.ns-comment-invalid .ns-comment-input{border-color:#ea400e;transition:all .3s ease-in-out}\n"] }]
1887
- }], ctorParameters: () => [], propDecorators: { title: [{
1888
- type: Input
1889
- }], description: [{
1890
- type: Input
1891
- }], placeholder: [{
1892
- type: Input
1893
- }], messages: [{
1894
- type: Input
1895
- }], cover: [{
1896
- type: Input
1897
- }], submitText: [{
1898
- type: Input
1899
- }], logged: [{
1900
- type: Input
1901
- }], maxLength: [{
1902
- type: Input
1903
- }], disabled: [{
1904
- type: Input
1905
- }], commit: [{
1906
- type: Output
1907
- }] } });
1790
+ ], template: "@if (logged()) {\n <div class=\"ns-comment-box\" [ngClass]=\"{ 'ns-comment-invalid': invalid }\">\n <ns-avatar class=\"ns-comment-avatar\" [src]=\"cover()?.url\" />\n\n <div class=\"ns-comment-input-wrap\">\n <div class=\"ns-comment-input\">\n <ns-content-editable\n class=\"ns-comment-input-content\"\n [maxlength]=\"maxLength()\"\n [(ngModel)]=\"content\"\n [disabled]=\"disabled()\"\n />\n\n @if (!content) {\n <span class=\"ns-comment-input-placeholder\">{{ placeholder() }}</span>\n }\n </div>\n\n <div class=\"ns-comment-footer\">\n <span class=\"ns-comment-counter\">Quedan {{ counter }} caracteres</span>\n\n @if (submitText()) {\n <button\n class=\"ns-comment-submit\"\n (click)=\"publish()\"\n [disabled]=\"disabled()\"\n >\n {{ submitText() }}\n </button>\n }\n </div>\n </div>\n </div>\n} @else {\n <h4 class=\"ns-comment-title\">\n {{ title() }} <br />\n <small\n class=\"ns-comment-description\"\n [innerHTML]=\"description() | nsSafeHtml\"\n ></small>\n </h4>\n\n <div class=\"ns-comment-logout\">\n <ng-content />\n </div>\n}\n@if (messages().length) {\n <ul class=\"ns-comment-list\">\n @for (comment of messages(); track comment) {\n <li class=\"ns-comment\">\n <ns-avatar\n class=\"ns-comment-cover\"\n [src]=\"comment.cover?.url\"\n size=\"medium\"\n />\n\n <div class=\"ns-comment-wrap\">\n <div class=\"ns-comment-user-wrap\">\n @if (comment?.author; as author) {\n <a [attr.href]=\"author.link\" class=\"ns-comment-author\">\n {{ author.name }}\n </a>\n }\n @if (comment?.created; as date) {\n <span class=\"ns-comment-date\">{{ date | nsHumanize }}</span>\n }\n\n <div\n class=\"ns-comment-message\"\n [innerHTML]=\"comment?.message | nsSafeHtml\"\n ></div>\n </div>\n </div>\n </li>\n }\n </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{display:block;background-color:#fff;border-radius:.4rem;padding:1.5rem;margin-bottom:1rem;font-weight:300;color:#555}.ns-comment{display:flex;justify-content:flex-start;align-content:center}.ns-comment-title{margin-top:unset;margin-bottom:1rem}.ns-comment-list{border-top:1px solid #2c3035;margin:1.25rem -1.5rem 0;padding:1rem 2rem}.ns-comment-author{font-weight:500;-webkit-font-smoothing:antialiased}.ns-comment-description{font-weight:300;font-size:70%;color:#333}.ns-comment-cover,.ns-comment-avatar{height:3.5rem;width:4rem}.ns-comment-cover:not(.ns-comment-avatar),.ns-comment-avatar:not(.ns-comment-avatar){margin-top:.7rem}.ns-comment-wrap{padding:1rem;width:100%}.ns-comment-date{font-size:12px;color:#9c9c9c}.ns-comment-date:before{content:\"\\2022\";margin:0 4px}.ns-comment-box{display:flex}.ns-comment-input{position:relative;border-radius:.4rem;padding:1rem;border:1px solid #e8e8e8;margin-bottom:1rem;min-height:58px}.ns-comment-input-wrap{width:100%;margin-left:1rem;flex:1 auto}.ns-comment-input-content{position:relative;min-height:1rem;z-index:2}.ns-comment-input-content:focus-visible{outline:none}.ns-comment-input-placeholder{position:absolute;top:1rem;color:#aaa}.ns-comment-submit{display:flex;justify-content:center;align-items:center;color:#fff;border-radius:var(--ns-radius-lg, .75rem);background-color:var(--ns-color-primary, #3665f3);font-weight:600;border:1px solid transparent;line-height:1.25;transition:background,color,border .3s linear;font-size:.8rem;height:2.3rem;padding:.37rem 1.5rem;-webkit-user-select:none;user-select:none;text-transform:uppercase;-webkit-appearance:button;margin-left:auto}.ns-comment-submit:hover{background-color:var(--ns-color-primary-hover, #2f57d9)}.ns-comment-submit:disabled{cursor:not-allowed;background-color:#3bacf1}.ns-comment-footer{display:flex;align-items:center}.ns-comment-counter{color:#9c9c9c;margin-right:.5rem}.ns-comment-invalid .ns-comment-input{border-color:#ea400e;transition:all .3s ease-in-out}\n"] }]
1791
+ }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], cover: [{ type: i0.Input, args: [{ isSignal: true, alias: "cover", required: false }] }], submitText: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitText", required: false }] }], logged: [{ type: i0.Input, args: [{ isSignal: true, alias: "logged", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], commit: [{ type: i0.Output, args: ["commit"] }] } });
1908
1792
 
1909
1793
  var Commands;
1910
1794
  (function (Commands) {
@@ -2030,15 +1914,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
2030
1914
 
2031
1915
  class NsEditorColorPickerComponent {
2032
1916
  editor = inject(NsEditorService);
2033
- presets;
2034
- type = 'text_color';
1917
+ presets = input(undefined, ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
1918
+ type = input('text_color', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
2035
1919
  showPopup;
2036
1920
  activeColor;
2037
1921
  isActive;
2038
1922
  trackByIndex = (index) => index;
2039
1923
  ngOnInit() { }
2040
1924
  get command() {
2041
- return this.type === 'text_color'
1925
+ return this.type() === 'text_color'
2042
1926
  ? Commands.TEXT_COLOR
2043
1927
  : Commands.BACKGROUND_COLOR;
2044
1928
  }
@@ -2059,16 +1943,12 @@ class NsEditorColorPickerComponent {
2059
1943
  }
2060
1944
  remove() { }
2061
1945
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2062
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsEditorColorPickerComponent, isStandalone: true, selector: "ns-editor-color-picker", inputs: { presets: "presets", type: "type" }, ngImport: i0, template: "<button type=\"button\" class=\"btn\" (click)=\"toggle()\">\n <span class=\"ns-editor__color-text\">\n <svg role=\"presentation\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 12.5h-4l-.874 2.186A.5.5 0 0 1 8.66 15H7.273a.5.5 0 0 1-.456-.705l4.05-9A.5.5 0 0 1 11.323 5h1.354a.5.5 0 0 1 .456.295l4.05 9a.5.5 0 0 1-.456.705h-1.388a.5.5 0 0 1-.465-.314L14 12.5zm-.6-1.5L12 7.5 10.6 11h2.8z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n <span></span>\n </span>\n\n <svg\n role=\"presentation\"\n class=\"ns-editor__toggle\"\n fill=\"currentColor\"\n height=\"12px\"\n viewBox=\"0 0 16 16\"\n width=\"12px\"\n >\n <path\n d=\"M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z\"\n ></path>\n </svg>\n</button>\n\n@if (showPopup) {\n <div class=\"ns-editor__popup\">\n @for (colorGroup of presets; track $index) {\n <div class=\"ns-editor__color--container\">\n @for (color of colorGroup; track $index) {\n <button\n class=\"ns-editor__color\"\n type=\"button\"\n [ngStyle]=\"{ backgroundColor: color, color: getContrastYIQ(color) }\"\n [title]=\"color\"\n (click)=\"onColorSelect(color)\"\n ></button>\n }\n </div>\n }\n </div>\n}\n", styles: [".ns-editor__color-text{position:relative}.ns-editor__color-text span{position:absolute;left:0;right:0;top:17px;margin:auto;width:12px;height:3px;border-radius:3px;background:linear-gradient(to right,#6554c0 25%,#00b8d9 25% 50%,#ff991f 50% 75%,#de350b 75%)}.ns-editor__popup{position:absolute;min-width:10rem;padding:.8rem;width:230px;margin:0;z-index:1000;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.ns-editor__color--container{display:flex;justify-content:space-between}.ns-editor__color--container+.ns-editor__color--container{margin-top:5px}.ns-editor__color{border:none;outline:none;border-radius:6px;width:24px;height:24px;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
1946
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsEditorColorPickerComponent, isStandalone: true, selector: "ns-editor-color-picker", inputs: { presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button type=\"button\" class=\"btn\" (click)=\"toggle()\">\n <span class=\"ns-editor__color-text\">\n <svg role=\"presentation\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 12.5h-4l-.874 2.186A.5.5 0 0 1 8.66 15H7.273a.5.5 0 0 1-.456-.705l4.05-9A.5.5 0 0 1 11.323 5h1.354a.5.5 0 0 1 .456.295l4.05 9a.5.5 0 0 1-.456.705h-1.388a.5.5 0 0 1-.465-.314L14 12.5zm-.6-1.5L12 7.5 10.6 11h2.8z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n <span></span>\n </span>\n\n <svg\n role=\"presentation\"\n class=\"ns-editor__toggle\"\n fill=\"currentColor\"\n height=\"12px\"\n viewBox=\"0 0 16 16\"\n width=\"12px\"\n >\n <path\n d=\"M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z\"\n ></path>\n </svg>\n</button>\n\n@if (showPopup) {\n <div class=\"ns-editor__popup\">\n @for (colorGroup of presets(); track $index) {\n <div class=\"ns-editor__color--container\">\n @for (color of colorGroup; track $index) {\n <button\n class=\"ns-editor__color\"\n type=\"button\"\n [ngStyle]=\"{ backgroundColor: color, color: getContrastYIQ(color) }\"\n [title]=\"color\"\n (click)=\"onColorSelect(color)\"\n ></button>\n }\n </div>\n }\n </div>\n}\n", styles: [".ns-editor__color-text{position:relative}.ns-editor__color-text span{position:absolute;left:0;right:0;top:17px;margin:auto;width:12px;height:3px;border-radius:3px;background:linear-gradient(to right,#6554c0 25%,#00b8d9 25% 50%,#ff991f 50% 75%,#de350b 75%)}.ns-editor__popup{position:absolute;min-width:10rem;padding:.8rem;width:230px;margin:0;z-index:1000;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.ns-editor__color--container{display:flex;justify-content:space-between}.ns-editor__color--container+.ns-editor__color--container{margin-top:5px}.ns-editor__color{border:none;outline:none;border-radius:6px;width:24px;height:24px;flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
2063
1947
  }
2064
1948
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorColorPickerComponent, decorators: [{
2065
1949
  type: Component,
2066
- args: [{ selector: 'ns-editor-color-picker', imports: [NgStyle], template: "<button type=\"button\" class=\"btn\" (click)=\"toggle()\">\n <span class=\"ns-editor__color-text\">\n <svg role=\"presentation\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 12.5h-4l-.874 2.186A.5.5 0 0 1 8.66 15H7.273a.5.5 0 0 1-.456-.705l4.05-9A.5.5 0 0 1 11.323 5h1.354a.5.5 0 0 1 .456.295l4.05 9a.5.5 0 0 1-.456.705h-1.388a.5.5 0 0 1-.465-.314L14 12.5zm-.6-1.5L12 7.5 10.6 11h2.8z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n <span></span>\n </span>\n\n <svg\n role=\"presentation\"\n class=\"ns-editor__toggle\"\n fill=\"currentColor\"\n height=\"12px\"\n viewBox=\"0 0 16 16\"\n width=\"12px\"\n >\n <path\n d=\"M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z\"\n ></path>\n </svg>\n</button>\n\n@if (showPopup) {\n <div class=\"ns-editor__popup\">\n @for (colorGroup of presets; track $index) {\n <div class=\"ns-editor__color--container\">\n @for (color of colorGroup; track $index) {\n <button\n class=\"ns-editor__color\"\n type=\"button\"\n [ngStyle]=\"{ backgroundColor: color, color: getContrastYIQ(color) }\"\n [title]=\"color\"\n (click)=\"onColorSelect(color)\"\n ></button>\n }\n </div>\n }\n </div>\n}\n", styles: [".ns-editor__color-text{position:relative}.ns-editor__color-text span{position:absolute;left:0;right:0;top:17px;margin:auto;width:12px;height:3px;border-radius:3px;background:linear-gradient(to right,#6554c0 25%,#00b8d9 25% 50%,#ff991f 50% 75%,#de350b 75%)}.ns-editor__popup{position:absolute;min-width:10rem;padding:.8rem;width:230px;margin:0;z-index:1000;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.ns-editor__color--container{display:flex;justify-content:space-between}.ns-editor__color--container+.ns-editor__color--container{margin-top:5px}.ns-editor__color{border:none;outline:none;border-radius:6px;width:24px;height:24px;flex-shrink:0}\n"] }]
2067
- }], propDecorators: { presets: [{
2068
- type: Input
2069
- }], type: [{
2070
- type: Input
2071
- }] } });
1950
+ args: [{ selector: 'ns-editor-color-picker', imports: [NgStyle], template: "<button type=\"button\" class=\"btn\" (click)=\"toggle()\">\n <span class=\"ns-editor__color-text\">\n <svg role=\"presentation\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14 12.5h-4l-.874 2.186A.5.5 0 0 1 8.66 15H7.273a.5.5 0 0 1-.456-.705l4.05-9A.5.5 0 0 1 11.323 5h1.354a.5.5 0 0 1 .456.295l4.05 9a.5.5 0 0 1-.456.705h-1.388a.5.5 0 0 1-.465-.314L14 12.5zm-.6-1.5L12 7.5 10.6 11h2.8z\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n <span></span>\n </span>\n\n <svg\n role=\"presentation\"\n class=\"ns-editor__toggle\"\n fill=\"currentColor\"\n height=\"12px\"\n viewBox=\"0 0 16 16\"\n width=\"12px\"\n >\n <path\n d=\"M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z\"\n ></path>\n </svg>\n</button>\n\n@if (showPopup) {\n <div class=\"ns-editor__popup\">\n @for (colorGroup of presets(); track $index) {\n <div class=\"ns-editor__color--container\">\n @for (color of colorGroup; track $index) {\n <button\n class=\"ns-editor__color\"\n type=\"button\"\n [ngStyle]=\"{ backgroundColor: color, color: getContrastYIQ(color) }\"\n [title]=\"color\"\n (click)=\"onColorSelect(color)\"\n ></button>\n }\n </div>\n }\n </div>\n}\n", styles: [".ns-editor__color-text{position:relative}.ns-editor__color-text span{position:absolute;left:0;right:0;top:17px;margin:auto;width:12px;height:3px;border-radius:3px;background:linear-gradient(to right,#6554c0 25%,#00b8d9 25% 50%,#ff991f 50% 75%,#de350b 75%)}.ns-editor__popup{position:absolute;min-width:10rem;padding:.8rem;width:230px;margin:0;z-index:1000;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.ns-editor__color--container{display:flex;justify-content:space-between}.ns-editor__color--container+.ns-editor__color--container{margin-top:5px}.ns-editor__color{border:none;outline:none;border-radius:6px;width:24px;height:24px;flex-shrink:0}\n"] }]
1951
+ }], propDecorators: { presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
2072
1952
 
2073
1953
  class NsEditorLabelPipe {
2074
1954
  editor = inject(NsEditorService);
@@ -2106,7 +1986,7 @@ class NsEditorLinkComponent {
2106
1986
  }
2107
1987
  }
2108
1988
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2109
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsEditorLinkComponent, isStandalone: true, selector: "ns-editor-link", ngImport: i0, template: "<button type=\"button\" class=\"btn\" id=\"ns-editor-link\" (click)=\"show = true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" role=\"presentation\">\n <path\n d=\"M12.654 8.764a.858.858 0 01-1.213-1.213l1.214-1.214a3.717 3.717 0 015.257 0 3.714 3.714 0 01.001 5.258l-1.214 1.214-.804.804a3.72 3.72 0 01-5.263.005.858.858 0 011.214-1.214c.781.782 2.05.78 2.836-.005l.804-.803 1.214-1.214a1.998 1.998 0 00-.001-2.831 2 2 0 00-2.83 0l-1.215 1.213zm-.808 6.472a.858.858 0 011.213 1.213l-1.214 1.214a3.717 3.717 0 01-5.257 0 3.714 3.714 0 01-.001-5.258l1.214-1.214.804-.804a3.72 3.72 0 015.263-.005.858.858 0 01-1.214 1.214 2.005 2.005 0 00-2.836.005l-.804.803L7.8 13.618a1.998 1.998 0 00.001 2.831 2 2 0 002.83 0l1.215-1.213z\"\n ></path>\n </svg>\n</button>\n\n<form\n [formGroup]=\"formLink\"\n class=\"ns-editor__form-link\"\n aria-labelledby=\"ns-editor-link\"\n [ngClass]=\"{ show: show }\"\n (ngSubmit)=\"insert()\"\n>\n <header>\n <label>{{ 'insert_link' | nsEditorLabel }}</label>\n <button type=\"button\" class=\"btn-close\" (click)=\"show = false\"></button>\n </header>\n\n <ns-input [formControlName]=\"'url'\" [placeholder]=\"'link' | nsEditorLabel\" />\n <ns-input [formControlName]=\"'text'\" [placeholder]=\"'text' | nsEditorLabel\" />\n <ns-input\n [formControlName]=\"'tooltip'\"\n [placeholder]=\"'tooltip_link' | nsEditorLabel\"\n />\n <ns-checkbox\n [formControlName]=\"'openNewWindow'\"\n [label]=\"'open_new_window' | nsEditorLabel\"\n />\n\n <footer>\n <ns-button type=\"submit\" [label]=\"'submit_link' | nsEditorLabel\" />\n </footer>\n</form>\n", styles: [".ns-editor__form-link{position:absolute;z-index:1000;display:none;min-width:10rem;padding:.8rem;margin:0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.ns-editor__form-link header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.ns-editor__form-link footer{margin-top:.5rem}.ns-editor__form-link.show{display:block}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsInputComponent, selector: "ns-input", inputs: ["prepend", "append"] }, { kind: "component", type: NsCheckboxComponent, selector: "ns-checkbox" }, { kind: "component", type: NsButtonComponent, selector: "ns-button", inputs: ["label", "type", "theme", "block", "disabled", "loading", "icon", "value"] }, { kind: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
1989
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsEditorLinkComponent, isStandalone: true, selector: "ns-editor-link", ngImport: i0, template: "<button type=\"button\" class=\"btn\" id=\"ns-editor-link\" (click)=\"show = true\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" role=\"presentation\">\n <path\n d=\"M12.654 8.764a.858.858 0 01-1.213-1.213l1.214-1.214a3.717 3.717 0 015.257 0 3.714 3.714 0 01.001 5.258l-1.214 1.214-.804.804a3.72 3.72 0 01-5.263.005.858.858 0 011.214-1.214c.781.782 2.05.78 2.836-.005l.804-.803 1.214-1.214a1.998 1.998 0 00-.001-2.831 2 2 0 00-2.83 0l-1.215 1.213zm-.808 6.472a.858.858 0 011.213 1.213l-1.214 1.214a3.717 3.717 0 01-5.257 0 3.714 3.714 0 01-.001-5.258l1.214-1.214.804-.804a3.72 3.72 0 015.263-.005.858.858 0 01-1.214 1.214 2.005 2.005 0 00-2.836.005l-.804.803L7.8 13.618a1.998 1.998 0 00.001 2.831 2 2 0 002.83 0l1.215-1.213z\"\n ></path>\n </svg>\n</button>\n\n<form\n [formGroup]=\"formLink\"\n class=\"ns-editor__form-link\"\n aria-labelledby=\"ns-editor-link\"\n [ngClass]=\"{ show: show }\"\n (ngSubmit)=\"insert()\"\n>\n <header>\n <label>{{ 'insert_link' | nsEditorLabel }}</label>\n <button type=\"button\" class=\"btn-close\" (click)=\"show = false\"></button>\n </header>\n\n <ns-input [formControlName]=\"'url'\" [placeholder]=\"'link' | nsEditorLabel\" />\n <ns-input [formControlName]=\"'text'\" [placeholder]=\"'text' | nsEditorLabel\" />\n <ns-input\n [formControlName]=\"'tooltip'\"\n [placeholder]=\"'tooltip_link' | nsEditorLabel\"\n />\n <ns-checkbox\n [formControlName]=\"'openNewWindow'\"\n [label]=\"'open_new_window' | nsEditorLabel\"\n />\n\n <footer>\n <ns-button type=\"submit\" [label]=\"'submit_link' | nsEditorLabel\" />\n </footer>\n</form>\n", styles: [".ns-editor__form-link{position:absolute;z-index:1000;display:none;min-width:10rem;padding:.8rem;margin:0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.ns-editor__form-link header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.ns-editor__form-link footer{margin-top:.5rem}.ns-editor__form-link.show{display:block}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsInputComponent, selector: "ns-input", inputs: ["ariaLabel", "ariaDescribedBy"] }, { kind: "component", type: NsCheckboxComponent, selector: "ns-checkbox" }, { kind: "component", type: NsButtonComponent, selector: "ns-button", inputs: ["label", "type", "theme", "block", "disabled", "loading", "icon", "value"] }, { kind: "pipe", type: NsEditorLabelPipe, name: "nsEditorLabel" }] });
2110
1990
  }
2111
1991
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorLinkComponent, decorators: [{
2112
1992
  type: Component,
@@ -2192,16 +2072,16 @@ const DEFAULT_COLOR_PRESETS = [
2192
2072
  ];
2193
2073
  class NsEditorComponent extends NsValueAccessor {
2194
2074
  editor = inject(NsEditorService);
2195
- rows = 3;
2196
- maxLength;
2197
- colorPresets = DEFAULT_COLOR_PRESETS;
2075
+ rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
2076
+ maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
2077
+ colorPresets = input(DEFAULT_COLOR_PRESETS, ...(ngDevMode ? [{ debugName: "colorPresets" }] : /* istanbul ignore next */ []));
2198
2078
  textArea;
2199
2079
  focused = () => this.textArea.nativeElement.focus();
2200
2080
  ngOnInit() { }
2201
2081
  get presets() {
2202
2082
  const col = 8;
2203
2083
  const colors = [];
2204
- this.colorPresets.forEach((color, index) => {
2084
+ this.colorPresets().forEach((color, index) => {
2205
2085
  const row = Math.floor(index / col);
2206
2086
  if (!colors[row]) {
2207
2087
  colors.push([]);
@@ -2216,13 +2096,13 @@ class NsEditorComponent extends NsValueAccessor {
2216
2096
  }
2217
2097
  ngOnDestroy() { }
2218
2098
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2219
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsEditorComponent, isStandalone: true, selector: "ns-editor", inputs: { rows: "rows", maxLength: "maxLength", colorPresets: "colorPresets" }, host: { listeners: { "click": "focused()" }, properties: { "class.ns-editor": "true", "class.ns-editor--disabled": "disabled" } }, providers: [
2099
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsEditorComponent, isStandalone: true, selector: "ns-editor", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, colorPresets: { classPropertyName: "colorPresets", publicName: "colorPresets", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "focused()" }, properties: { "class.ns-editor": "true", "class.ns-editor--disabled": "disabled()" } }, providers: [
2220
2100
  {
2221
2101
  provide: NG_VALUE_ACCESSOR,
2222
2102
  useExisting: forwardRef(() => NsEditorComponent),
2223
2103
  multi: true
2224
2104
  }
2225
- ], viewQueries: [{ propertyName: "textArea", first: true, predicate: NsContentEditableComponent, descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (label) {\n <label class=\"form-label\" [attr.for]=\"id\">{{ label }}</label>\n}\n\n<ul class=\"ns-editor__toolbar\">\n <li class=\"ns-editor__item\">\n <ns-editor-paragraph />\n </li>\n\n <li class=\"ns-editor__item\">\n <ns-editor-toggle />\n </li>\n\n <li class=\"ns-editor__item\">\n <ns-editor-color-picker [presets]=\"presets\" />\n </li>\n\n <li class=\"ns-editor__item\">\n <ns-editor-list />\n </li>\n\n <li class=\"ns-editor__item\">\n <ns-editor-link />\n </li>\n</ul>\n\n<ns-content-editable\n class=\"ns-editor__content\"\n [id]=\"id\"\n (blur)=\"blur()\"\n [maxlength]=\"maxLength\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"value\"\n/>\n", styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-radius-sm, .375rem);font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}.ns-editor{display:block;margin-bottom:.5rem}.ns-editor__toolbar{display:flex;justify-content:flex-start;align-items:center;background:#fafbfb;border:1px solid #cfcfdb;border-bottom:none;border-radius:.375rem .375rem 0 0;padding:.375rem .5rem;list-style:none;margin-bottom:unset}.ns-editor__item{display:flex;align-items:center}.ns-editor__item .dropdown{display:inline-block;margin-bottom:unset}.ns-editor__item .dropdown>.btn{margin-bottom:unset;background-color:transparent;border:unset;box-shadow:none}.ns-editor__item .btn{position:relative;padding:unset}.ns-editor__item:not(:last-child):after{font-size:2rem;font-weight:100;color:#dfdfdf;content:\"|\";margin:0 8px}.ns-editor__item svg{fill:#5c5f62;width:1.5rem;height:1.5rem}.ns-editor__item svg.ns-editor__toggle,.ns-editor__item svg.dropdown-toggle{width:.8rem;height:.8rem;transform:rotate(180deg)}.ns-editor__content{padding:.5rem;border:1px solid #cfcfdb;border-radius:0 0 .375rem .375rem}.ns-editor__content textarea{outline:none;margin-bottom:-3px;border:unset;width:100%}.ns-editor--disabled{pointer-events:none}.ns-editor--disabled .ns-editor__toolbar{opacity:.65}\n"], dependencies: [{ kind: "component", type: NsEditorParagraphComponent, selector: "ns-editor-paragraph" }, { kind: "component", type: NsEditorToggleCommandComponent, selector: "ns-editor-toggle" }, { kind: "component", type: NsEditorColorPickerComponent, selector: "ns-editor-color-picker", inputs: ["presets", "type"] }, { kind: "component", type: NsEditorListComponent, selector: "ns-editor-list" }, { kind: "component", type: NsEditorLinkComponent, selector: "ns-editor-link" }, { kind: "component", type: NsContentEditableComponent, selector: "ns-content-editable", inputs: ["maxlength"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
2105
+ ], viewQueries: [{ propertyName: "textArea", first: true, predicate: NsContentEditableComponent, descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "@if (label()) {\n <label class=\"form-label\" [attr.for]=\"id\">{{ label() }}</label>\n}\n\n<ul class=\"ns-editor__toolbar\">\n <li class=\"ns-editor__item\">\n <ns-editor-paragraph />\n </li>\n\n <li class=\"ns-editor__item\">\n <ns-editor-toggle />\n </li>\n\n <li class=\"ns-editor__item\">\n <ns-editor-color-picker [presets]=\"presets\" />\n </li>\n\n <li class=\"ns-editor__item\">\n <ns-editor-list />\n </li>\n\n <li class=\"ns-editor__item\">\n <ns-editor-link />\n </li>\n</ul>\n\n<ns-content-editable\n class=\"ns-editor__content\"\n [id]=\"id\"\n (blur)=\"blur()\"\n [maxlength]=\"maxLength()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n/>\n", styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:var(--ns-control-host-width, 100%);max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem));font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}.ns-editor{display:block;margin-bottom:.5rem}.ns-editor__toolbar{display:flex;justify-content:flex-start;align-items:center;background:#fafbfb;border:1px solid #cfcfdb;border-bottom:none;border-radius:.375rem .375rem 0 0;padding:.375rem .5rem;list-style:none;margin-bottom:unset}.ns-editor__item{display:flex;align-items:center}.ns-editor__item .dropdown{display:inline-block;margin-bottom:unset}.ns-editor__item .dropdown>.btn{margin-bottom:unset;background-color:transparent;border:unset;box-shadow:none}.ns-editor__item .btn{position:relative;padding:unset}.ns-editor__item:not(:last-child):after{font-size:2rem;font-weight:100;color:#dfdfdf;content:\"|\";margin:0 8px}.ns-editor__item svg{fill:#5c5f62;width:1.5rem;height:1.5rem}.ns-editor__item svg.ns-editor__toggle,.ns-editor__item svg.dropdown-toggle{width:.8rem;height:.8rem;transform:rotate(180deg)}.ns-editor__content{padding:.5rem;border:1px solid #cfcfdb;border-radius:0 0 .375rem .375rem}.ns-editor__content textarea{outline:none;margin-bottom:-3px;border:unset;width:100%}.ns-editor--disabled{pointer-events:none}.ns-editor--disabled .ns-editor__toolbar{opacity:.65}\n"], dependencies: [{ kind: "component", type: NsEditorParagraphComponent, selector: "ns-editor-paragraph" }, { kind: "component", type: NsEditorToggleCommandComponent, selector: "ns-editor-toggle" }, { kind: "component", type: NsEditorColorPickerComponent, selector: "ns-editor-color-picker", inputs: ["presets", "type"] }, { kind: "component", type: NsEditorListComponent, selector: "ns-editor-list" }, { kind: "component", type: NsEditorLinkComponent, selector: "ns-editor-link" }, { kind: "component", type: NsContentEditableComponent, selector: "ns-content-editable", inputs: ["maxlength"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
2226
2106
  }
2227
2107
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsEditorComponent, decorators: [{
2228
2108
  type: Component,
@@ -2234,7 +2114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
2234
2114
  }
2235
2115
  ], encapsulation: ViewEncapsulation.None, host: {
2236
2116
  '[class.ns-editor]': 'true',
2237
- '[class.ns-editor--disabled]': 'disabled'
2117
+ '[class.ns-editor--disabled]': 'disabled()'
2238
2118
  }, imports: [
2239
2119
  NsEditorParagraphComponent,
2240
2120
  NsEditorToggleCommandComponent,
@@ -2243,14 +2123,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
2243
2123
  NsEditorLinkComponent,
2244
2124
  NsContentEditableComponent,
2245
2125
  FormsModule
2246
- ], template: "@if (label) {\n <label class=\"form-label\" [attr.for]=\"id\">{{ label }}</label>\n}\n\n<ul class=\"ns-editor__toolbar\">\n <li class=\"ns-editor__item\">\n <ns-editor-paragraph />\n </li>\n\n <li class=\"ns-editor__item\">\n <ns-editor-toggle />\n </li>\n\n <li class=\"ns-editor__item\">\n <ns-editor-color-picker [presets]=\"presets\" />\n </li>\n\n <li class=\"ns-editor__item\">\n <ns-editor-list />\n </li>\n\n <li class=\"ns-editor__item\">\n <ns-editor-link />\n </li>\n</ul>\n\n<ns-content-editable\n class=\"ns-editor__content\"\n [id]=\"id\"\n (blur)=\"blur()\"\n [maxlength]=\"maxLength\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"value\"\n/>\n", styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:100%;max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-radius-sm, .375rem);font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}.ns-editor{display:block;margin-bottom:.5rem}.ns-editor__toolbar{display:flex;justify-content:flex-start;align-items:center;background:#fafbfb;border:1px solid #cfcfdb;border-bottom:none;border-radius:.375rem .375rem 0 0;padding:.375rem .5rem;list-style:none;margin-bottom:unset}.ns-editor__item{display:flex;align-items:center}.ns-editor__item .dropdown{display:inline-block;margin-bottom:unset}.ns-editor__item .dropdown>.btn{margin-bottom:unset;background-color:transparent;border:unset;box-shadow:none}.ns-editor__item .btn{position:relative;padding:unset}.ns-editor__item:not(:last-child):after{font-size:2rem;font-weight:100;color:#dfdfdf;content:\"|\";margin:0 8px}.ns-editor__item svg{fill:#5c5f62;width:1.5rem;height:1.5rem}.ns-editor__item svg.ns-editor__toggle,.ns-editor__item svg.dropdown-toggle{width:.8rem;height:.8rem;transform:rotate(180deg)}.ns-editor__content{padding:.5rem;border:1px solid #cfcfdb;border-radius:0 0 .375rem .375rem}.ns-editor__content textarea{outline:none;margin-bottom:-3px;border:unset;width:100%}.ns-editor--disabled{pointer-events:none}.ns-editor--disabled .ns-editor__toolbar{opacity:.65}\n"] }]
2247
- }], propDecorators: { rows: [{
2248
- type: Input
2249
- }], maxLength: [{
2250
- type: Input
2251
- }], colorPresets: [{
2252
- type: Input
2253
- }], textArea: [{
2126
+ ], template: "@if (label()) {\n <label class=\"form-label\" [attr.for]=\"id\">{{ label() }}</label>\n}\n\n<ul class=\"ns-editor__toolbar\">\n <li class=\"ns-editor__item\">\n <ns-editor-paragraph />\n </li>\n\n <li class=\"ns-editor__item\">\n <ns-editor-toggle />\n </li>\n\n <li class=\"ns-editor__item\">\n <ns-editor-color-picker [presets]=\"presets\" />\n </li>\n\n <li class=\"ns-editor__item\">\n <ns-editor-list />\n </li>\n\n <li class=\"ns-editor__item\">\n <ns-editor-link />\n </li>\n</ul>\n\n<ns-content-editable\n class=\"ns-editor__content\"\n [id]=\"id\"\n (blur)=\"blur()\"\n [maxlength]=\"maxLength()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"setValue($event)\"\n/>\n", styles: [":host{display:block;position:relative;font-size:var(--ns-font-size-sm, .875rem);width:var(--ns-control-host-width, 100%);max-width:100%;margin-bottom:var(--ns-space-2, .5rem)}:host .form-control,:host .form-select{border:1px solid var(--ns-color-border, #cfcfdb);border-radius:var(--ns-control-border-radius, var(--ns-radius-sm, .375rem));font-size:var(--ns-font-size-base, 1rem);line-height:1.5;padding:var(--ns-control-padding-y, .5rem) var(--ns-control-padding-x, .75rem);resize:vertical}:host .form-control:focus,:host .form-select:focus{border-color:var(--ns-color-focus, #567af0);box-shadow:unset;outline:0}:host .form-control::placeholder,:host .form-select::placeholder{color:var(--ns-gray-400, #bdbed4);font-weight:600;font-size:.875rem}:host .form-control:disabled,:host .form-control[readonly],:host .form-select:disabled,:host .form-select[readonly]{background-color:var(--ns-color-surface, #fff);opacity:.65}:host .input-group-text{background-color:var(--ns-color-surface, #fff)}.ns-editor{display:block;margin-bottom:.5rem}.ns-editor__toolbar{display:flex;justify-content:flex-start;align-items:center;background:#fafbfb;border:1px solid #cfcfdb;border-bottom:none;border-radius:.375rem .375rem 0 0;padding:.375rem .5rem;list-style:none;margin-bottom:unset}.ns-editor__item{display:flex;align-items:center}.ns-editor__item .dropdown{display:inline-block;margin-bottom:unset}.ns-editor__item .dropdown>.btn{margin-bottom:unset;background-color:transparent;border:unset;box-shadow:none}.ns-editor__item .btn{position:relative;padding:unset}.ns-editor__item:not(:last-child):after{font-size:2rem;font-weight:100;color:#dfdfdf;content:\"|\";margin:0 8px}.ns-editor__item svg{fill:#5c5f62;width:1.5rem;height:1.5rem}.ns-editor__item svg.ns-editor__toggle,.ns-editor__item svg.dropdown-toggle{width:.8rem;height:.8rem;transform:rotate(180deg)}.ns-editor__content{padding:.5rem;border:1px solid #cfcfdb;border-radius:0 0 .375rem .375rem}.ns-editor__content textarea{outline:none;margin-bottom:-3px;border:unset;width:100%}.ns-editor--disabled{pointer-events:none}.ns-editor--disabled .ns-editor__toolbar{opacity:.65}\n"] }]
2127
+ }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], colorPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorPresets", required: false }] }], textArea: [{
2254
2128
  type: ViewChild,
2255
2129
  args: [NsContentEditableComponent, { read: ElementRef, static: true }]
2256
2130
  }], focused: [{
@@ -2286,25 +2160,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
2286
2160
  class NsImageUploadComponent extends NsValueAccessor {
2287
2161
  client = inject(NS_UPLOAD_CLIENT, { optional: true });
2288
2162
  renderer = inject(Renderer2);
2289
- accept = '.jpg,.jpeg,.png,.webp,.avif,.gif';
2290
- multi = false;
2291
- limit = 5;
2163
+ accept = input('.jpg,.jpeg,.png,.webp,.avif,.gif', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
2164
+ multi = input(false, { ...(ngDevMode ? { debugName: "multi" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
2165
+ limit = input(5, { ...(ngDevMode ? { debugName: "limit" } : /* istanbul ignore next */ {}), transform: numberAttribute });
2292
2166
  imgRef;
2293
2167
  loading = new Set();
2294
2168
  _fromIndex;
2295
2169
  _toIndex;
2296
2170
  get images() {
2297
- return Array.isArray(this.value) ? this.value : [];
2171
+ const value = this.value();
2172
+ return Array.isArray(value) ? value : [];
2298
2173
  }
2299
2174
  get image() {
2300
- return Array.isArray(this.value) ? null : this.value;
2175
+ const value = this.value();
2176
+ return Array.isArray(value) ? null : value;
2301
2177
  }
2302
2178
  writeValue(value) {
2303
2179
  if (Array.isArray(value)) {
2304
- this._value = value;
2180
+ this.value.set(value);
2305
2181
  }
2306
2182
  else {
2307
- this._value = this.multi && !value ? [] : value;
2183
+ this.value.set(this.multi() && !value ? [] : value);
2308
2184
  }
2309
2185
  }
2310
2186
  onClick() {
@@ -2325,8 +2201,8 @@ class NsImageUploadComponent extends NsValueAccessor {
2325
2201
  if (this.client) {
2326
2202
  this.client.upload(image).subscribe({
2327
2203
  next: (data) => {
2328
- if (this.multi) {
2329
- this._value = this.images.filter((img) => !this.compareWith(img, image));
2204
+ if (this.multi()) {
2205
+ this.value.set(this.images.filter((img) => !this.compareWith(img, image)));
2330
2206
  }
2331
2207
  this.loading.delete(image.name);
2332
2208
  this.assignValue(data);
@@ -2346,13 +2222,13 @@ class NsImageUploadComponent extends NsValueAccessor {
2346
2222
  };
2347
2223
  }
2348
2224
  assignValue(image) {
2349
- if (this.multi) {
2350
- this._value = [...this.images, image];
2225
+ if (this.multi()) {
2226
+ this.value.set([...this.images, image]);
2351
2227
  }
2352
2228
  else {
2353
- this._value = image;
2229
+ this.value.set(image);
2354
2230
  }
2355
- this.onChange(this._value);
2231
+ this.onChange(this.value());
2356
2232
  }
2357
2233
  compareWith(from, to) {
2358
2234
  return from.id === to.id || from.name === to.name;
@@ -2362,11 +2238,9 @@ class NsImageUploadComponent extends NsValueAccessor {
2362
2238
  if (this.client && !!image.id) {
2363
2239
  this.client.remove(image.id).subscribe({
2364
2240
  next: () => {
2365
- this.value = this.multi
2366
- ? this.images.filter((img) => img !== image)
2367
- : null;
2241
+ this.value.set(this.multi() ? this.images.filter((img) => img !== image) : null);
2368
2242
  this.loading.delete(image.name);
2369
- this.onChange(this.value);
2243
+ this.onChange(this.value());
2370
2244
  },
2371
2245
  error: () => {
2372
2246
  this.loading.delete(image.name);
@@ -2374,9 +2248,7 @@ class NsImageUploadComponent extends NsValueAccessor {
2374
2248
  });
2375
2249
  }
2376
2250
  else {
2377
- this.value = this.multi
2378
- ? this.images.filter((img) => img !== image)
2379
- : null;
2251
+ this.value.set(this.multi() ? this.images.filter((img) => img !== image) : null);
2380
2252
  this.loading.delete(image.name);
2381
2253
  }
2382
2254
  }
@@ -2399,40 +2271,32 @@ class NsImageUploadComponent extends NsValueAccessor {
2399
2271
  const element = images[this._fromIndex];
2400
2272
  images.splice(this._fromIndex, 1);
2401
2273
  images.splice(this._toIndex, 0, element);
2402
- this._value = images;
2403
- this.onChange(this.value);
2274
+ this.value.set(images);
2275
+ this.onChange(this.value());
2404
2276
  }
2405
2277
  }
2406
2278
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsImageUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2407
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsImageUploadComponent, isStandalone: true, selector: "ns-image-upload", inputs: { accept: "accept", multi: ["multi", "multi", booleanAttribute], limit: ["limit", "limit", numberAttribute] }, host: { properties: { "class.ns-image--loaded": "!multi && !!value", "class.ns-image--disabled": "disabled" } }, providers: [
2279
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsImageUploadComponent, isStandalone: true, selector: "ns-image-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-image--loaded": "!multi() && !!value()", "class.ns-image--disabled": "disabled()" } }, providers: [
2408
2280
  {
2409
2281
  provide: NG_VALUE_ACCESSOR,
2410
2282
  useExisting: forwardRef(() => NsImageUploadComponent),
2411
2283
  multi: true
2412
2284
  }
2413
- ], viewQueries: [{ propertyName: "imgRef", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ns-image__wrap\"\n [ngClass]=\"{ 'ns-image__multi': multi && images.length }\"\n>\n @if (multi) {\n @for (image of images; let i = $index; track i) {\n <div\n class=\"ns-image__thumbnail\"\n [draggable]=\"!disabled && images.length > 1\"\n (dragstart)=\"dragstart($event, i)\"\n (dragend)=\"dragend($event)\"\n (dragover)=\"dragover($event, i)\"\n (drop)=\"drop($event)\"\n >\n <button\n type=\"button\"\n class=\"ns-image__button\"\n [ngClass]=\"{ 'ns-image__loading': loading.has(image.name) }\"\n [disabled]=\"disabled\"\n >\n <img\n class=\"ns-image\"\n [attr.src]=\"image | nsImageUrl\"\n [attr.alt]=\"image.name\"\n />\n <ns-icon class=\"ns-image__preload\" name=\"preload\" />\n\n <div class=\"ns-image__overlay\">\n <ns-icon class=\"ns-image__drag\" name=\"drag-handle\" />\n <button\n type=\"button\"\n class=\"ns-image__remove\"\n (click)=\"remove(image)\"\n >\n <ns-icon name=\"trash\" />\n </button>\n </div>\n </button>\n </div>\n }\n }\n\n <button\n type=\"button\"\n class=\"ns-image__drag-container\"\n (click)=\"onClick()\"\n [ngClass]=\"{\n 'ns-image--loading': image && !multi && loading.has(image.name)\n }\"\n [hidden]=\"multi && images.length >= limit\"\n [disabled]=\"disabled\"\n >\n @if (image && !multi) {\n <img\n class=\"ns-image__fluid\"\n [attr.src]=\"image | nsImageUrl\"\n [ngClass]=\"{ disabled: disabled }\"\n alt\n />\n }\n\n <div class=\"ns-image__overlay\">\n <div class=\"ns-image__empty\">\n <ns-icon name=\"picture\" />\n <span>{{ label }}</span>\n </div>\n </div>\n\n <input\n [hidden]=\"true\"\n type=\"file\"\n (change)=\"load()\"\n [multiple]=\"false\"\n [accept]=\"accept\"\n #input\n [disabled]=\"disabled\"\n />\n </button>\n</div>\n", styles: [":host{display:block;position:relative;margin-bottom:.5rem}:host.ns-image--loaded .ns-image__overlay{opacity:0;background-color:#0000001a}:host.ns-image--loaded .ns-image__overlay .ns-icon{color:#fff}.ns-image{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.ns-image__wrap{width:100%;min-height:10rem;-webkit-user-select:none;user-select:none}.ns-image__wrap.ns-image__multi{display:grid;grid-template-columns:repeat(4,1fr);grid-column-gap:.5rem;grid-row-gap:.5rem}.ns-image__wrap.ns-image__multi .ns-image__drag-container{position:relative}.ns-image__drag-container{position:absolute;overflow:hidden;display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:#e9ecef;border:1.5px dashed #cfcfdb;border-radius:5px;margin-bottom:1rem;flex-direction:column;gap:.25rem}.ns-image__drag-container:not(:disabled){background-color:#fff}.ns-image__drag-container:not(:disabled):hover{border:1.5px dashed #b3b3c0}.ns-image__drag-container:not(:disabled):hover .ns-image__overlay{opacity:.8}.ns-image__overlay{position:absolute;display:flex;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s ease-out;-webkit-user-select:none;user-select:none;opacity:.6}.ns-image__empty{display:flex;flex-direction:column;align-items:center;padding:1rem}.ns-image__fluid{width:100%;object-fit:cover}.ns-image__thumbnail{transition:all .3s ease-in-out;cursor:move}.ns-image__thumbnail:first-child{grid-column:1/span 2;grid-row:1/span 2}.ns-image__thumbnail img{display:block;height:100%;width:100%;position:absolute;object-fit:cover}.ns-image__button{border:unset;align-items:center;display:flex;justify-content:center;margin:0;position:relative;text-align:center;width:100%;height:100%;padding:.5rem;border-radius:5px;overflow:hidden}.ns-image__button .ns-image__overlay{opacity:0}.ns-image__button:not(:disabled,.ns-image__loading) .ns-image__overlay{background-color:#0000001a}.ns-image__button:not(:disabled,.ns-image__loading):hover .ns-image__overlay{opacity:1}.ns-image__text{margin-left:1rem}.ns-image__remove{color:#d82c0d;background:transparent;border:unset;position:absolute;top:.5rem;right:.3rem;z-index:5;padding:0}.ns-image__drag{color:#fff;position:absolute;top:.3rem;left:0;z-index:5}.ns-image__preload{display:none;color:#fff;z-index:5}.ns-image__loading{background-color:#0000001a}.ns-image__loading .ns-image__preload{display:block}.ns-image__loading .ns-image{opacity:.8}.ns-image--disabled{pointer-events:none;opacity:.65}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }, { kind: "pipe", type: NsImageUrlPipe, name: "nsImageUrl" }] });
2285
+ ], viewQueries: [{ propertyName: "imgRef", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ns-image__wrap\"\n [ngClass]=\"{ 'ns-image__multi': multi() && images.length }\"\n>\n @if (multi()) {\n @for (image of images; let i = $index; track i) {\n <div\n class=\"ns-image__thumbnail\"\n [draggable]=\"!disabled() && images.length > 1\"\n (dragstart)=\"dragstart($event, i)\"\n (dragend)=\"dragend($event)\"\n (dragover)=\"dragover($event, i)\"\n (drop)=\"drop($event)\"\n >\n <button\n type=\"button\"\n class=\"ns-image__button\"\n [ngClass]=\"{ 'ns-image__loading': loading.has(image.name) }\"\n [disabled]=\"disabled()\"\n >\n <img\n class=\"ns-image\"\n [attr.src]=\"image | nsImageUrl\"\n [attr.alt]=\"image.name\"\n />\n <ns-icon class=\"ns-image__preload\" name=\"preload\" />\n\n <div class=\"ns-image__overlay\">\n <ns-icon class=\"ns-image__drag\" name=\"drag-handle\" />\n <button\n type=\"button\"\n class=\"ns-image__remove\"\n (click)=\"remove(image)\"\n >\n <ns-icon name=\"trash\" />\n </button>\n </div>\n </button>\n </div>\n }\n }\n\n <button\n type=\"button\"\n class=\"ns-image__drag-container\"\n (click)=\"onClick()\"\n [ngClass]=\"{\n 'ns-image--loading': image && !multi() && loading.has(image.name)\n }\"\n [hidden]=\"multi() && images.length >= limit()\"\n [disabled]=\"disabled()\"\n >\n @if (image && !multi()) {\n <img\n class=\"ns-image__fluid\"\n [attr.src]=\"image | nsImageUrl\"\n [ngClass]=\"{ disabled: disabled() }\"\n alt\n />\n }\n\n <div class=\"ns-image__overlay\">\n <div class=\"ns-image__empty\">\n <ns-icon name=\"picture\" />\n <span>{{ label() }}</span>\n </div>\n </div>\n\n <input\n [hidden]=\"true\"\n type=\"file\"\n (change)=\"load()\"\n [multiple]=\"false\"\n [accept]=\"accept()\"\n #input\n [disabled]=\"disabled()\"\n />\n </button>\n</div>\n", styles: [":host{display:block;position:relative;margin-bottom:.5rem}:host.ns-image--loaded .ns-image__overlay{opacity:0;background-color:#0000001a}:host.ns-image--loaded .ns-image__overlay .ns-icon{color:#fff}.ns-image{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.ns-image__wrap{width:100%;min-height:10rem;-webkit-user-select:none;user-select:none}.ns-image__wrap.ns-image__multi{display:grid;grid-template-columns:repeat(4,1fr);grid-column-gap:.5rem;grid-row-gap:.5rem}.ns-image__wrap.ns-image__multi .ns-image__drag-container{position:relative}.ns-image__drag-container{position:absolute;overflow:hidden;display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:#e9ecef;border:1.5px dashed #cfcfdb;border-radius:5px;margin-bottom:1rem;flex-direction:column;gap:.25rem}.ns-image__drag-container:not(:disabled){background-color:#fff}.ns-image__drag-container:not(:disabled):hover{border:1.5px dashed #b3b3c0}.ns-image__drag-container:not(:disabled):hover .ns-image__overlay{opacity:.8}.ns-image__overlay{position:absolute;display:flex;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s ease-out;-webkit-user-select:none;user-select:none;opacity:.6}.ns-image__empty{display:flex;flex-direction:column;align-items:center;padding:1rem}.ns-image__fluid{width:100%;object-fit:cover}.ns-image__thumbnail{transition:all .3s ease-in-out;cursor:move}.ns-image__thumbnail:first-child{grid-column:1/span 2;grid-row:1/span 2}.ns-image__thumbnail img{display:block;height:100%;width:100%;position:absolute;object-fit:cover}.ns-image__button{border:unset;align-items:center;display:flex;justify-content:center;margin:0;position:relative;text-align:center;width:100%;height:100%;padding:.5rem;border-radius:5px;overflow:hidden}.ns-image__button .ns-image__overlay{opacity:0}.ns-image__button:not(:disabled,.ns-image__loading) .ns-image__overlay{background-color:#0000001a}.ns-image__button:not(:disabled,.ns-image__loading):hover .ns-image__overlay{opacity:1}.ns-image__text{margin-left:1rem}.ns-image__remove{color:#d82c0d;background:transparent;border:unset;position:absolute;top:.5rem;right:.3rem;z-index:5;padding:0}.ns-image__drag{color:#fff;position:absolute;top:.3rem;left:0;z-index:5}.ns-image__preload{display:none;color:#fff;z-index:5}.ns-image__loading{background-color:#0000001a}.ns-image__loading .ns-image__preload{display:block}.ns-image__loading .ns-image{opacity:.8}.ns-image--disabled{pointer-events:none;opacity:.65}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }, { kind: "pipe", type: NsImageUrlPipe, name: "nsImageUrl" }] });
2414
2286
  }
2415
2287
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsImageUploadComponent, decorators: [{
2416
2288
  type: Component,
2417
2289
  args: [{ selector: 'ns-image-upload', imports: [CommonModule, NsImageUrlPipe, NsIconsComponent], standalone: true, host: {
2418
- '[class.ns-image--loaded]': '!multi && !!value',
2419
- '[class.ns-image--disabled]': 'disabled'
2290
+ '[class.ns-image--loaded]': '!multi() && !!value()',
2291
+ '[class.ns-image--disabled]': 'disabled()'
2420
2292
  }, providers: [
2421
2293
  {
2422
2294
  provide: NG_VALUE_ACCESSOR,
2423
2295
  useExisting: forwardRef(() => NsImageUploadComponent),
2424
2296
  multi: true
2425
2297
  }
2426
- ], template: "<div\n class=\"ns-image__wrap\"\n [ngClass]=\"{ 'ns-image__multi': multi && images.length }\"\n>\n @if (multi) {\n @for (image of images; let i = $index; track i) {\n <div\n class=\"ns-image__thumbnail\"\n [draggable]=\"!disabled && images.length > 1\"\n (dragstart)=\"dragstart($event, i)\"\n (dragend)=\"dragend($event)\"\n (dragover)=\"dragover($event, i)\"\n (drop)=\"drop($event)\"\n >\n <button\n type=\"button\"\n class=\"ns-image__button\"\n [ngClass]=\"{ 'ns-image__loading': loading.has(image.name) }\"\n [disabled]=\"disabled\"\n >\n <img\n class=\"ns-image\"\n [attr.src]=\"image | nsImageUrl\"\n [attr.alt]=\"image.name\"\n />\n <ns-icon class=\"ns-image__preload\" name=\"preload\" />\n\n <div class=\"ns-image__overlay\">\n <ns-icon class=\"ns-image__drag\" name=\"drag-handle\" />\n <button\n type=\"button\"\n class=\"ns-image__remove\"\n (click)=\"remove(image)\"\n >\n <ns-icon name=\"trash\" />\n </button>\n </div>\n </button>\n </div>\n }\n }\n\n <button\n type=\"button\"\n class=\"ns-image__drag-container\"\n (click)=\"onClick()\"\n [ngClass]=\"{\n 'ns-image--loading': image && !multi && loading.has(image.name)\n }\"\n [hidden]=\"multi && images.length >= limit\"\n [disabled]=\"disabled\"\n >\n @if (image && !multi) {\n <img\n class=\"ns-image__fluid\"\n [attr.src]=\"image | nsImageUrl\"\n [ngClass]=\"{ disabled: disabled }\"\n alt\n />\n }\n\n <div class=\"ns-image__overlay\">\n <div class=\"ns-image__empty\">\n <ns-icon name=\"picture\" />\n <span>{{ label }}</span>\n </div>\n </div>\n\n <input\n [hidden]=\"true\"\n type=\"file\"\n (change)=\"load()\"\n [multiple]=\"false\"\n [accept]=\"accept\"\n #input\n [disabled]=\"disabled\"\n />\n </button>\n</div>\n", styles: [":host{display:block;position:relative;margin-bottom:.5rem}:host.ns-image--loaded .ns-image__overlay{opacity:0;background-color:#0000001a}:host.ns-image--loaded .ns-image__overlay .ns-icon{color:#fff}.ns-image{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.ns-image__wrap{width:100%;min-height:10rem;-webkit-user-select:none;user-select:none}.ns-image__wrap.ns-image__multi{display:grid;grid-template-columns:repeat(4,1fr);grid-column-gap:.5rem;grid-row-gap:.5rem}.ns-image__wrap.ns-image__multi .ns-image__drag-container{position:relative}.ns-image__drag-container{position:absolute;overflow:hidden;display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:#e9ecef;border:1.5px dashed #cfcfdb;border-radius:5px;margin-bottom:1rem;flex-direction:column;gap:.25rem}.ns-image__drag-container:not(:disabled){background-color:#fff}.ns-image__drag-container:not(:disabled):hover{border:1.5px dashed #b3b3c0}.ns-image__drag-container:not(:disabled):hover .ns-image__overlay{opacity:.8}.ns-image__overlay{position:absolute;display:flex;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s ease-out;-webkit-user-select:none;user-select:none;opacity:.6}.ns-image__empty{display:flex;flex-direction:column;align-items:center;padding:1rem}.ns-image__fluid{width:100%;object-fit:cover}.ns-image__thumbnail{transition:all .3s ease-in-out;cursor:move}.ns-image__thumbnail:first-child{grid-column:1/span 2;grid-row:1/span 2}.ns-image__thumbnail img{display:block;height:100%;width:100%;position:absolute;object-fit:cover}.ns-image__button{border:unset;align-items:center;display:flex;justify-content:center;margin:0;position:relative;text-align:center;width:100%;height:100%;padding:.5rem;border-radius:5px;overflow:hidden}.ns-image__button .ns-image__overlay{opacity:0}.ns-image__button:not(:disabled,.ns-image__loading) .ns-image__overlay{background-color:#0000001a}.ns-image__button:not(:disabled,.ns-image__loading):hover .ns-image__overlay{opacity:1}.ns-image__text{margin-left:1rem}.ns-image__remove{color:#d82c0d;background:transparent;border:unset;position:absolute;top:.5rem;right:.3rem;z-index:5;padding:0}.ns-image__drag{color:#fff;position:absolute;top:.3rem;left:0;z-index:5}.ns-image__preload{display:none;color:#fff;z-index:5}.ns-image__loading{background-color:#0000001a}.ns-image__loading .ns-image__preload{display:block}.ns-image__loading .ns-image{opacity:.8}.ns-image--disabled{pointer-events:none;opacity:.65}\n"] }]
2427
- }], propDecorators: { accept: [{
2428
- type: Input
2429
- }], multi: [{
2430
- type: Input,
2431
- args: [{ transform: booleanAttribute }]
2432
- }], limit: [{
2433
- type: Input,
2434
- args: [{ transform: numberAttribute }]
2435
- }], imgRef: [{
2298
+ ], template: "<div\n class=\"ns-image__wrap\"\n [ngClass]=\"{ 'ns-image__multi': multi() && images.length }\"\n>\n @if (multi()) {\n @for (image of images; let i = $index; track i) {\n <div\n class=\"ns-image__thumbnail\"\n [draggable]=\"!disabled() && images.length > 1\"\n (dragstart)=\"dragstart($event, i)\"\n (dragend)=\"dragend($event)\"\n (dragover)=\"dragover($event, i)\"\n (drop)=\"drop($event)\"\n >\n <button\n type=\"button\"\n class=\"ns-image__button\"\n [ngClass]=\"{ 'ns-image__loading': loading.has(image.name) }\"\n [disabled]=\"disabled()\"\n >\n <img\n class=\"ns-image\"\n [attr.src]=\"image | nsImageUrl\"\n [attr.alt]=\"image.name\"\n />\n <ns-icon class=\"ns-image__preload\" name=\"preload\" />\n\n <div class=\"ns-image__overlay\">\n <ns-icon class=\"ns-image__drag\" name=\"drag-handle\" />\n <button\n type=\"button\"\n class=\"ns-image__remove\"\n (click)=\"remove(image)\"\n >\n <ns-icon name=\"trash\" />\n </button>\n </div>\n </button>\n </div>\n }\n }\n\n <button\n type=\"button\"\n class=\"ns-image__drag-container\"\n (click)=\"onClick()\"\n [ngClass]=\"{\n 'ns-image--loading': image && !multi() && loading.has(image.name)\n }\"\n [hidden]=\"multi() && images.length >= limit()\"\n [disabled]=\"disabled()\"\n >\n @if (image && !multi()) {\n <img\n class=\"ns-image__fluid\"\n [attr.src]=\"image | nsImageUrl\"\n [ngClass]=\"{ disabled: disabled() }\"\n alt\n />\n }\n\n <div class=\"ns-image__overlay\">\n <div class=\"ns-image__empty\">\n <ns-icon name=\"picture\" />\n <span>{{ label() }}</span>\n </div>\n </div>\n\n <input\n [hidden]=\"true\"\n type=\"file\"\n (change)=\"load()\"\n [multiple]=\"false\"\n [accept]=\"accept()\"\n #input\n [disabled]=\"disabled()\"\n />\n </button>\n</div>\n", styles: [":host{display:block;position:relative;margin-bottom:.5rem}:host.ns-image--loaded .ns-image__overlay{opacity:0;background-color:#0000001a}:host.ns-image--loaded .ns-image__overlay .ns-icon{color:#fff}.ns-image{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.ns-image__wrap{width:100%;min-height:10rem;-webkit-user-select:none;user-select:none}.ns-image__wrap.ns-image__multi{display:grid;grid-template-columns:repeat(4,1fr);grid-column-gap:.5rem;grid-row-gap:.5rem}.ns-image__wrap.ns-image__multi .ns-image__drag-container{position:relative}.ns-image__drag-container{position:absolute;overflow:hidden;display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:#e9ecef;border:1.5px dashed #cfcfdb;border-radius:5px;margin-bottom:1rem;flex-direction:column;gap:.25rem}.ns-image__drag-container:not(:disabled){background-color:#fff}.ns-image__drag-container:not(:disabled):hover{border:1.5px dashed #b3b3c0}.ns-image__drag-container:not(:disabled):hover .ns-image__overlay{opacity:.8}.ns-image__overlay{position:absolute;display:flex;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s ease-out;-webkit-user-select:none;user-select:none;opacity:.6}.ns-image__empty{display:flex;flex-direction:column;align-items:center;padding:1rem}.ns-image__fluid{width:100%;object-fit:cover}.ns-image__thumbnail{transition:all .3s ease-in-out;cursor:move}.ns-image__thumbnail:first-child{grid-column:1/span 2;grid-row:1/span 2}.ns-image__thumbnail img{display:block;height:100%;width:100%;position:absolute;object-fit:cover}.ns-image__button{border:unset;align-items:center;display:flex;justify-content:center;margin:0;position:relative;text-align:center;width:100%;height:100%;padding:.5rem;border-radius:5px;overflow:hidden}.ns-image__button .ns-image__overlay{opacity:0}.ns-image__button:not(:disabled,.ns-image__loading) .ns-image__overlay{background-color:#0000001a}.ns-image__button:not(:disabled,.ns-image__loading):hover .ns-image__overlay{opacity:1}.ns-image__text{margin-left:1rem}.ns-image__remove{color:#d82c0d;background:transparent;border:unset;position:absolute;top:.5rem;right:.3rem;z-index:5;padding:0}.ns-image__drag{color:#fff;position:absolute;top:.3rem;left:0;z-index:5}.ns-image__preload{display:none;color:#fff;z-index:5}.ns-image__loading{background-color:#0000001a}.ns-image__loading .ns-image__preload{display:block}.ns-image__loading .ns-image{opacity:.8}.ns-image--disabled{pointer-events:none;opacity:.65}\n"] }]
2299
+ }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], imgRef: [{
2436
2300
  type: ViewChild,
2437
2301
  args: ['input', { static: false, read: ElementRef }]
2438
2302
  }] } });
@@ -2446,7 +2310,7 @@ class NsModalRef {
2446
2310
  return this.ref.instance;
2447
2311
  }
2448
2312
  addTemplate(template) {
2449
- switch (template.name) {
2313
+ switch (template.name()) {
2450
2314
  case 'header':
2451
2315
  this.instance.headerRef = template.ref;
2452
2316
  break;
@@ -2636,22 +2500,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
2636
2500
 
2637
2501
  class NsScheduleCellComponent {
2638
2502
  service = inject(NsScheduleService);
2639
- day;
2640
- timeline;
2641
- startIn;
2642
- endIn;
2503
+ day = input(undefined, ...(ngDevMode ? [{ debugName: "day" }] : /* istanbul ignore next */ []));
2504
+ timeline = input(undefined, ...(ngDevMode ? [{ debugName: "timeline" }] : /* istanbul ignore next */ []));
2505
+ startIn = input(undefined, ...(ngDevMode ? [{ debugName: "startIn" }] : /* istanbul ignore next */ []));
2506
+ endIn = input(undefined, ...(ngDevMode ? [{ debugName: "endIn" }] : /* istanbul ignore next */ []));
2643
2507
  ngOnInit() { }
2644
2508
  onClick(event) {
2645
2509
  event.preventDefault();
2646
- const startTime = new Date(this.service.currentDate.getFullYear(), this.service.currentDate.getMonth(), this.day, this.timeline, this.startIn);
2647
- const endTime = new Date(this.service.currentDate.getFullYear(), this.service.currentDate.getMonth(), this.day, this.timeline, this.endIn);
2510
+ const startTime = new Date(this.service.currentDate.getFullYear(), this.service.currentDate.getMonth(), this.day(), this.timeline(), this.startIn());
2511
+ const endTime = new Date(this.service.currentDate.getFullYear(), this.service.currentDate.getMonth(), this.day(), this.timeline(), this.endIn());
2648
2512
  this.service.send({
2649
2513
  startTime: this.service.formatDate(startTime),
2650
2514
  endTime: this.service.formatDate(endTime)
2651
2515
  });
2652
2516
  }
2653
2517
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsScheduleCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2654
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsScheduleCellComponent, isStandalone: true, selector: "ns-schedule-cell", inputs: { day: "day", timeline: "timeline", startIn: "startIn", endIn: "endIn" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.ns-schedule__timeline-cell": "true" } }, ngImport: i0, template: '', isInline: true });
2518
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsScheduleCellComponent, isStandalone: true, selector: "ns-schedule-cell", inputs: { day: { classPropertyName: "day", publicName: "day", isSignal: true, isRequired: false, transformFunction: null }, timeline: { classPropertyName: "timeline", publicName: "timeline", isSignal: true, isRequired: false, transformFunction: null }, startIn: { classPropertyName: "startIn", publicName: "startIn", isSignal: true, isRequired: false, transformFunction: null }, endIn: { classPropertyName: "endIn", publicName: "endIn", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.ns-schedule__timeline-cell": "true" } }, ngImport: i0, template: '', isInline: true });
2655
2519
  }
2656
2520
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsScheduleCellComponent, decorators: [{
2657
2521
  type: Component,
@@ -2663,15 +2527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
2663
2527
  '[class.ns-schedule__timeline-cell]': 'true'
2664
2528
  }
2665
2529
  }]
2666
- }], propDecorators: { day: [{
2667
- type: Input
2668
- }], timeline: [{
2669
- type: Input
2670
- }], startIn: [{
2671
- type: Input
2672
- }], endIn: [{
2673
- type: Input
2674
- }], onClick: [{
2530
+ }], propDecorators: { day: [{ type: i0.Input, args: [{ isSignal: true, alias: "day", required: false }] }], timeline: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeline", required: false }] }], startIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "startIn", required: false }] }], endIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "endIn", required: false }] }], onClick: [{
2675
2531
  type: HostListener,
2676
2532
  args: ['click', ['$event']]
2677
2533
  }] } });
@@ -2724,53 +2580,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
2724
2580
  }] });
2725
2581
 
2726
2582
  class NsScheduleEventComponent {
2727
- schedule;
2728
- timeline;
2583
+ schedule = input(undefined, ...(ngDevMode ? [{ debugName: "schedule" }] : /* istanbul ignore next */ []));
2584
+ timeline = input(undefined, ...(ngDevMode ? [{ debugName: "timeline" }] : /* istanbul ignore next */ []));
2729
2585
  height;
2730
2586
  service = inject(NsScheduleService);
2731
2587
  get matchHour() {
2732
- return new Date(this.schedule.startTime).getHours() === this.timeline;
2588
+ const schedule = this.schedule();
2589
+ return (!!schedule && new Date(schedule.startTime).getHours() === this.timeline());
2733
2590
  }
2734
2591
  ngAfterContentInit() {
2735
- if (this.schedule) {
2736
- const startTime = new Date(this.schedule.startTime);
2737
- const endTime = new Date(this.schedule.endTime);
2592
+ const schedule = this.schedule();
2593
+ if (schedule) {
2594
+ const startTime = new Date(schedule.startTime);
2595
+ const endTime = new Date(schedule.endTime);
2738
2596
  const hours = Math.abs(startTime.getTime() - endTime.getTime()) / 36e5;
2739
2597
  this.height = hours > 0.5 ? 49.5 * (hours / 0.5) : 45;
2740
2598
  }
2741
2599
  }
2742
2600
  onClick(event) {
2743
2601
  event.preventDefault();
2744
- this.service.send(this.schedule);
2602
+ const schedule = this.schedule();
2603
+ if (schedule) {
2604
+ this.service.send(schedule);
2605
+ }
2745
2606
  }
2746
2607
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsScheduleEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2747
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsScheduleEventComponent, isStandalone: true, selector: "ns-schedule-event", inputs: { schedule: "schedule", timeline: "timeline" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.ns-schedule__event": "true", "class.ns-schedule__event--show": "schedule && matchHour", "style.height.px": "height" } }, ngImport: i0, template: "@if (schedule) {\n <span class=\"ns-schedule__event--subject\">{{ schedule?.subject }}</span>\n <div class=\"ns-schedule__event--body\" [innerHtml]=\"schedule?.body\"></div>\n}\n", styles: [".ns-schedule__event{display:none;position:absolute;left:0;right:0;background-color:#dcdffa;color:#5b5fc7;border:none;border-left:4px solid #5b5fc7;border-radius:.25rem;font-size:.9em;margin:.2rem;padding:.2rem;overflow:hidden;white-space:nowrap;flex-shrink:1;text-align:left;-webkit-user-select:none;user-select:none;line-height:1.3;cursor:pointer;z-index:1001}.ns-schedule__event--subject{font-weight:600}.ns-schedule__event--body{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.ns-schedule__event--show{display:block}\n"], encapsulation: i0.ViewEncapsulation.None });
2608
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsScheduleEventComponent, isStandalone: true, selector: "ns-schedule-event", inputs: { schedule: { classPropertyName: "schedule", publicName: "schedule", isSignal: true, isRequired: false, transformFunction: null }, timeline: { classPropertyName: "timeline", publicName: "timeline", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.ns-schedule__event": "true", "class.ns-schedule__event--show": "schedule() && matchHour", "style.height.px": "height" } }, ngImport: i0, template: "@if (schedule(); as currentSchedule) {\n <span class=\"ns-schedule__event--subject\">{{ currentSchedule.subject }}</span>\n <div\n class=\"ns-schedule__event--body\"\n [innerHtml]=\"currentSchedule.body\"\n ></div>\n}\n", styles: [".ns-schedule__event{display:none;position:absolute;left:0;right:0;background-color:#dcdffa;color:#5b5fc7;border:none;border-left:4px solid #5b5fc7;border-radius:.25rem;font-size:.9em;margin:.2rem;padding:.2rem;overflow:hidden;white-space:nowrap;flex-shrink:1;text-align:left;-webkit-user-select:none;user-select:none;line-height:1.3;cursor:pointer;z-index:1001}.ns-schedule__event--subject{font-weight:600}.ns-schedule__event--body{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.ns-schedule__event--show{display:block}\n"], encapsulation: i0.ViewEncapsulation.None });
2748
2609
  }
2749
2610
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsScheduleEventComponent, decorators: [{
2750
2611
  type: Component,
2751
2612
  args: [{ selector: 'ns-schedule-event', host: {
2752
2613
  '[class.ns-schedule__event]': 'true',
2753
- '[class.ns-schedule__event--show]': 'schedule && matchHour',
2614
+ '[class.ns-schedule__event--show]': 'schedule() && matchHour',
2754
2615
  '[style.height.px]': 'height'
2755
- }, encapsulation: ViewEncapsulation.None, template: "@if (schedule) {\n <span class=\"ns-schedule__event--subject\">{{ schedule?.subject }}</span>\n <div class=\"ns-schedule__event--body\" [innerHtml]=\"schedule?.body\"></div>\n}\n", styles: [".ns-schedule__event{display:none;position:absolute;left:0;right:0;background-color:#dcdffa;color:#5b5fc7;border:none;border-left:4px solid #5b5fc7;border-radius:.25rem;font-size:.9em;margin:.2rem;padding:.2rem;overflow:hidden;white-space:nowrap;flex-shrink:1;text-align:left;-webkit-user-select:none;user-select:none;line-height:1.3;cursor:pointer;z-index:1001}.ns-schedule__event--subject{font-weight:600}.ns-schedule__event--body{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.ns-schedule__event--show{display:block}\n"] }]
2756
- }], propDecorators: { schedule: [{
2757
- type: Input
2758
- }], timeline: [{
2759
- type: Input
2760
- }], onClick: [{
2616
+ }, encapsulation: ViewEncapsulation.None, template: "@if (schedule(); as currentSchedule) {\n <span class=\"ns-schedule__event--subject\">{{ currentSchedule.subject }}</span>\n <div\n class=\"ns-schedule__event--body\"\n [innerHtml]=\"currentSchedule.body\"\n ></div>\n}\n", styles: [".ns-schedule__event{display:none;position:absolute;left:0;right:0;background-color:#dcdffa;color:#5b5fc7;border:none;border-left:4px solid #5b5fc7;border-radius:.25rem;font-size:.9em;margin:.2rem;padding:.2rem;overflow:hidden;white-space:nowrap;flex-shrink:1;text-align:left;-webkit-user-select:none;user-select:none;line-height:1.3;cursor:pointer;z-index:1001}.ns-schedule__event--subject{font-weight:600}.ns-schedule__event--body{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.ns-schedule__event--show{display:block}\n"] }]
2617
+ }], propDecorators: { schedule: [{ type: i0.Input, args: [{ isSignal: true, alias: "schedule", required: false }] }], timeline: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeline", required: false }] }], onClick: [{
2761
2618
  type: HostListener,
2762
2619
  args: ['click', ['$event']]
2763
2620
  }] } });
2764
2621
 
2765
2622
  class DayComponent {
2766
- schedules;
2623
+ schedules = input(undefined, ...(ngDevMode ? [{ debugName: "schedules" }] : /* istanbul ignore next */ []));
2624
+ currentDate = input(undefined, ...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
2767
2625
  current;
2768
2626
  first;
2769
2627
  days;
2770
2628
  hours;
2771
2629
  service = inject(NsScheduleService);
2772
2630
  DAYS_OF_WEEK = 7;
2773
- set currentDate(date) {
2631
+ syncCurrentDate = effect(() => {
2632
+ const date = this.currentDate();
2774
2633
  if (date instanceof Date) {
2775
2634
  this.current = date.getDate();
2776
2635
  this.first = date.getDate() - date.getDay();
@@ -2779,14 +2638,14 @@ class DayComponent {
2779
2638
  .map((x, y) => x + y);
2780
2639
  this.service.setCurrentDate(date);
2781
2640
  }
2782
- }
2641
+ }, ...(ngDevMode ? [{ debugName: "syncCurrentDate" }] : /* istanbul ignore next */ []));
2783
2642
  ngOnInit() {
2784
2643
  this.hours = Array(24)
2785
2644
  .fill(0)
2786
2645
  .map((x, y) => x + y);
2787
2646
  }
2788
2647
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: DayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2789
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: DayComponent, isStandalone: true, selector: "ns-schedule-day", inputs: { schedules: "schedules", currentDate: "currentDate" }, ngImport: i0, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n <div class=\"ns-schedule__header ns-schedule__selected\">\n <div class=\"ns-schedule__header-date\">{{ current }}</div>\n <div class=\"ns-schedule__header-day\">\n {{ days.indexOf(current) | nsWeekday }}\n </div>\n </div>\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n <div class=\"ns-schedule__timeline-day ns-schedule__selected\">\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (schedule of schedules | filterByDay: current; track schedule) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:[index] 3rem [timeline] 1fr}\n"], dependencies: [{ kind: "component", type: NsScheduleCellComponent, selector: "ns-schedule-cell", inputs: ["day", "timeline", "startIn", "endIn"] }, { kind: "component", type: NsScheduleEventComponent, selector: "ns-schedule-event", inputs: ["schedule", "timeline"] }, { kind: "pipe", type: WeekDayPipe, name: "nsWeekday" }, { kind: "pipe", type: FilterByDayPipe, name: "filterByDay" }] });
2648
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: DayComponent, isStandalone: true, selector: "ns-schedule-day", inputs: { schedules: { classPropertyName: "schedules", publicName: "schedules", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n <div class=\"ns-schedule__header ns-schedule__selected\">\n <div class=\"ns-schedule__header-date\">{{ current }}</div>\n <div class=\"ns-schedule__header-day\">\n {{ days.indexOf(current) | nsWeekday }}\n </div>\n </div>\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n <div class=\"ns-schedule__timeline-day ns-schedule__selected\">\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (schedule of schedules() | filterByDay: current; track schedule) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:[index] 3rem [timeline] 1fr}\n"], dependencies: [{ kind: "component", type: NsScheduleCellComponent, selector: "ns-schedule-cell", inputs: ["day", "timeline", "startIn", "endIn"] }, { kind: "component", type: NsScheduleEventComponent, selector: "ns-schedule-event", inputs: ["schedule", "timeline"] }, { kind: "pipe", type: WeekDayPipe, name: "nsWeekday" }, { kind: "pipe", type: FilterByDayPipe, name: "filterByDay" }] });
2790
2649
  }
2791
2650
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: DayComponent, decorators: [{
2792
2651
  type: Component,
@@ -2795,23 +2654,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
2795
2654
  WeekDayPipe,
2796
2655
  FilterByDayPipe,
2797
2656
  NsScheduleEventComponent
2798
- ], template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n <div class=\"ns-schedule__header ns-schedule__selected\">\n <div class=\"ns-schedule__header-date\">{{ current }}</div>\n <div class=\"ns-schedule__header-day\">\n {{ days.indexOf(current) | nsWeekday }}\n </div>\n </div>\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n <div class=\"ns-schedule__timeline-day ns-schedule__selected\">\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (schedule of schedules | filterByDay: current; track schedule) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:[index] 3rem [timeline] 1fr}\n"] }]
2799
- }], propDecorators: { schedules: [{
2800
- type: Input
2801
- }], currentDate: [{
2802
- type: Input
2803
- }] } });
2657
+ ], template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n <div class=\"ns-schedule__header ns-schedule__selected\">\n <div class=\"ns-schedule__header-date\">{{ current }}</div>\n <div class=\"ns-schedule__header-day\">\n {{ days.indexOf(current) | nsWeekday }}\n </div>\n </div>\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n <div class=\"ns-schedule__timeline-day ns-schedule__selected\">\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (schedule of schedules() | filterByDay: current; track schedule) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:[index] 3rem [timeline] 1fr}\n"] }]
2658
+ }], propDecorators: { schedules: [{ type: i0.Input, args: [{ isSignal: true, alias: "schedules", required: false }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: false }] }] } });
2804
2659
 
2805
2660
  class WeekComponent {
2806
2661
  service = inject(NsScheduleService);
2807
- schedules;
2662
+ schedules = input(undefined, ...(ngDevMode ? [{ debugName: "schedules" }] : /* istanbul ignore next */ []));
2663
+ currentDate = input(undefined, ...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
2808
2664
  currentDay;
2809
2665
  first;
2810
2666
  last;
2811
2667
  days;
2812
2668
  hours;
2813
2669
  DAYS_OF_WEEK = 7;
2814
- set currentDate(date) {
2670
+ syncCurrentDate = effect(() => {
2671
+ const date = this.currentDate();
2815
2672
  if (date instanceof Date) {
2816
2673
  this.first = date.getDate() - date.getDay();
2817
2674
  this.last = this.first + 6;
@@ -2821,7 +2678,7 @@ class WeekComponent {
2821
2678
  .fill(this.first)
2822
2679
  .map((day, index) => (day > 0 ? day + index : lastDayOfPrevMonth--));
2823
2680
  }
2824
- }
2681
+ }, ...(ngDevMode ? [{ debugName: "syncCurrentDate" }] : /* istanbul ignore next */ []));
2825
2682
  get current() {
2826
2683
  return this.service.currentDate;
2827
2684
  }
@@ -2832,7 +2689,7 @@ class WeekComponent {
2832
2689
  .map((x, y) => x + y);
2833
2690
  }
2834
2691
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: WeekComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2835
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: WeekComponent, isStandalone: true, selector: "ns-schedule-week", inputs: { schedules: "schedules", currentDate: "currentDate" }, ngImport: i0, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n @for (day of days; track day; let i = $index) {\n <div\n class=\"ns-schedule__header\"\n [ngClass]=\"{ 'ns-schedule__selected': currentDay === day }\"\n >\n <div class=\"ns-schedule__header-date\">{{ day }}</div>\n <div class=\"ns-schedule__header-day\">{{ i | nsWeekday }}</div>\n </div>\n }\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n @for (day of days; track day) {\n <div\n class=\"ns-schedule__timeline-day\"\n [ngClass]=\"{ 'ns-schedule__selected': currentDay === day }\"\n >\n <ns-schedule-cell\n [day]=\"day\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"day\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (schedule of schedules | filterByDay: day; track schedule) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:[index] 3rem repeat(7,1fr)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsScheduleCellComponent, selector: "ns-schedule-cell", inputs: ["day", "timeline", "startIn", "endIn"] }, { kind: "component", type: NsScheduleEventComponent, selector: "ns-schedule-event", inputs: ["schedule", "timeline"] }, { kind: "pipe", type: WeekDayPipe, name: "nsWeekday" }, { kind: "pipe", type: FilterByDayPipe, name: "filterByDay" }] });
2692
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: WeekComponent, isStandalone: true, selector: "ns-schedule-week", inputs: { schedules: { classPropertyName: "schedules", publicName: "schedules", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n @for (day of days; track day; let i = $index) {\n <div\n class=\"ns-schedule__header\"\n [ngClass]=\"{ 'ns-schedule__selected': currentDay === day }\"\n >\n <div class=\"ns-schedule__header-date\">{{ day }}</div>\n <div class=\"ns-schedule__header-day\">{{ i | nsWeekday }}</div>\n </div>\n }\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n @for (day of days; track day) {\n <div\n class=\"ns-schedule__timeline-day\"\n [ngClass]=\"{ 'ns-schedule__selected': currentDay === day }\"\n >\n <ns-schedule-cell\n [day]=\"day\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"day\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (schedule of schedules() | filterByDay: day; track schedule) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:[index] 3rem repeat(7,1fr)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsScheduleCellComponent, selector: "ns-schedule-cell", inputs: ["day", "timeline", "startIn", "endIn"] }, { kind: "component", type: NsScheduleEventComponent, selector: "ns-schedule-event", inputs: ["schedule", "timeline"] }, { kind: "pipe", type: WeekDayPipe, name: "nsWeekday" }, { kind: "pipe", type: FilterByDayPipe, name: "filterByDay" }] });
2836
2693
  }
2837
2694
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: WeekComponent, decorators: [{
2838
2695
  type: Component,
@@ -2842,23 +2699,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
2842
2699
  NsScheduleCellComponent,
2843
2700
  FilterByDayPipe,
2844
2701
  NsScheduleEventComponent
2845
- ], standalone: true, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n @for (day of days; track day; let i = $index) {\n <div\n class=\"ns-schedule__header\"\n [ngClass]=\"{ 'ns-schedule__selected': currentDay === day }\"\n >\n <div class=\"ns-schedule__header-date\">{{ day }}</div>\n <div class=\"ns-schedule__header-day\">{{ i | nsWeekday }}</div>\n </div>\n }\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n @for (day of days; track day) {\n <div\n class=\"ns-schedule__timeline-day\"\n [ngClass]=\"{ 'ns-schedule__selected': currentDay === day }\"\n >\n <ns-schedule-cell\n [day]=\"day\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"day\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (schedule of schedules | filterByDay: day; track schedule) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:[index] 3rem repeat(7,1fr)}\n"] }]
2846
- }], propDecorators: { schedules: [{
2847
- type: Input
2848
- }], currentDate: [{
2849
- type: Input
2850
- }] } });
2702
+ ], standalone: true, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n @for (day of days; track day; let i = $index) {\n <div\n class=\"ns-schedule__header\"\n [ngClass]=\"{ 'ns-schedule__selected': currentDay === day }\"\n >\n <div class=\"ns-schedule__header-date\">{{ day }}</div>\n <div class=\"ns-schedule__header-day\">{{ i | nsWeekday }}</div>\n </div>\n }\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n @for (day of days; track day) {\n <div\n class=\"ns-schedule__timeline-day\"\n [ngClass]=\"{ 'ns-schedule__selected': currentDay === day }\"\n >\n <ns-schedule-cell\n [day]=\"day\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"day\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (schedule of schedules() | filterByDay: day; track schedule) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:[index] 3rem repeat(7,1fr)}\n"] }]
2703
+ }], propDecorators: { schedules: [{ type: i0.Input, args: [{ isSignal: true, alias: "schedules", required: false }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: false }] }] } });
2851
2704
 
2852
2705
  class NsWorkweekComponent {
2853
2706
  service = inject(NsScheduleService);
2854
- schedules;
2707
+ schedules = input(undefined, ...(ngDevMode ? [{ debugName: "schedules" }] : /* istanbul ignore next */ []));
2708
+ currentDate = input(undefined, ...(ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []));
2855
2709
  current;
2856
2710
  first;
2857
2711
  last;
2858
2712
  days = [];
2859
2713
  hours;
2860
2714
  DAYS_OF_WORKWEEK = 5;
2861
- set currentDate(date) {
2715
+ syncCurrentDate = effect(() => {
2716
+ const date = this.currentDate();
2862
2717
  if (date instanceof Date) {
2863
2718
  this.first = date.getDate() - date.getDay() + 1;
2864
2719
  this.last = this.first + 4;
@@ -2873,7 +2728,7 @@ class NsWorkweekComponent {
2873
2728
  current++;
2874
2729
  }
2875
2730
  }
2876
- }
2731
+ }, ...(ngDevMode ? [{ debugName: "syncCurrentDate" }] : /* istanbul ignore next */ []));
2877
2732
  identityDay = (index, item) => item.id;
2878
2733
  ngOnInit() {
2879
2734
  this.current = new Date().getDate();
@@ -2882,7 +2737,7 @@ class NsWorkweekComponent {
2882
2737
  .map((x, y) => x + y);
2883
2738
  }
2884
2739
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsWorkweekComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2885
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsWorkweekComponent, isStandalone: true, selector: "ns-schedule-workweek", inputs: { schedules: "schedules", currentDate: "currentDate" }, ngImport: i0, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n @for (day of days; track day; let i = $index) {\n <div\n class=\"ns-schedule__header\"\n [ngClass]=\"{ 'ns-schedule__selected': current === day }\"\n >\n <div class=\"ns-schedule__header-date\">{{ day }}</div>\n <div class=\"ns-schedule__header-day\">{{ i + 1 | nsWeekday }}</div>\n </div>\n }\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n @for (day of days; track day) {\n <div\n class=\"ns-schedule__timeline-day\"\n [ngClass]=\"{ 'ns-schedule__selected': current === day }\"\n >\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (\n schedule of schedules | filterByDay: day;\n track identityDay($index, schedule)\n ) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:[index] 3rem repeat(5,1fr)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsScheduleCellComponent, selector: "ns-schedule-cell", inputs: ["day", "timeline", "startIn", "endIn"] }, { kind: "component", type: NsScheduleEventComponent, selector: "ns-schedule-event", inputs: ["schedule", "timeline"] }, { kind: "pipe", type: WeekDayPipe, name: "nsWeekday" }, { kind: "pipe", type: FilterByDayPipe, name: "filterByDay" }] });
2740
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsWorkweekComponent, isStandalone: true, selector: "ns-schedule-workweek", inputs: { schedules: { classPropertyName: "schedules", publicName: "schedules", isSignal: true, isRequired: false, transformFunction: null }, currentDate: { classPropertyName: "currentDate", publicName: "currentDate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n @for (day of days; track day; let i = $index) {\n <div\n class=\"ns-schedule__header\"\n [ngClass]=\"{ 'ns-schedule__selected': current === day }\"\n >\n <div class=\"ns-schedule__header-date\">{{ day }}</div>\n <div class=\"ns-schedule__header-day\">{{ i + 1 | nsWeekday }}</div>\n </div>\n }\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n @for (day of days; track day) {\n <div\n class=\"ns-schedule__timeline-day\"\n [ngClass]=\"{ 'ns-schedule__selected': current === day }\"\n >\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (\n schedule of schedules() | filterByDay: day;\n track identityDay($index, schedule)\n ) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:[index] 3rem repeat(5,1fr)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NsScheduleCellComponent, selector: "ns-schedule-cell", inputs: ["day", "timeline", "startIn", "endIn"] }, { kind: "component", type: NsScheduleEventComponent, selector: "ns-schedule-event", inputs: ["schedule", "timeline"] }, { kind: "pipe", type: WeekDayPipe, name: "nsWeekday" }, { kind: "pipe", type: FilterByDayPipe, name: "filterByDay" }] });
2886
2741
  }
2887
2742
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsWorkweekComponent, decorators: [{
2888
2743
  type: Component,
@@ -2892,28 +2747,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
2892
2747
  NsScheduleCellComponent,
2893
2748
  NsScheduleEventComponent,
2894
2749
  FilterByDayPipe
2895
- ], standalone: true, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n @for (day of days; track day; let i = $index) {\n <div\n class=\"ns-schedule__header\"\n [ngClass]=\"{ 'ns-schedule__selected': current === day }\"\n >\n <div class=\"ns-schedule__header-date\">{{ day }}</div>\n <div class=\"ns-schedule__header-day\">{{ i + 1 | nsWeekday }}</div>\n </div>\n }\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n @for (day of days; track day) {\n <div\n class=\"ns-schedule__timeline-day\"\n [ngClass]=\"{ 'ns-schedule__selected': current === day }\"\n >\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (\n schedule of schedules | filterByDay: day;\n track identityDay($index, schedule)\n ) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:[index] 3rem repeat(5,1fr)}\n"] }]
2896
- }], propDecorators: { schedules: [{
2897
- type: Input
2898
- }], currentDate: [{
2899
- type: Input
2900
- }] } });
2750
+ ], standalone: true, template: "<div class=\"ns-schedule__header-wrap\">\n <div class=\"ns-schedule__header\"></div>\n @for (day of days; track day; let i = $index) {\n <div\n class=\"ns-schedule__header\"\n [ngClass]=\"{ 'ns-schedule__selected': current === day }\"\n >\n <div class=\"ns-schedule__header-date\">{{ day }}</div>\n <div class=\"ns-schedule__header-day\">{{ i + 1 | nsWeekday }}</div>\n </div>\n }\n</div>\n\n<div class=\"ns-schedule__timeline-wrap\">\n @for (timeline of hours; track timeline) {\n <div class=\"ns-schedule__timeline\">\n <div class=\"ns-schedule__timeline-day\">{{ timeline }}</div>\n @for (day of days; track day) {\n <div\n class=\"ns-schedule__timeline-day\"\n [ngClass]=\"{ 'ns-schedule__selected': current === day }\"\n >\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline\"\n [startIn]=\"0\"\n [endIn]=\"30\"\n />\n <ns-schedule-cell\n [day]=\"current\"\n [timeline]=\"timeline + 1\"\n [startIn]=\"30\"\n [endIn]=\"0\"\n />\n\n @for (\n schedule of schedules() | filterByDay: day;\n track identityDay($index, schedule)\n ) {\n <ns-schedule-event [schedule]=\"schedule\" [timeline]=\"timeline\" />\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [".ns-schedule__header-wrap,.ns-schedule__timeline{grid-template-columns:[index] 3rem repeat(5,1fr)}\n"] }]
2751
+ }], propDecorators: { schedules: [{ type: i0.Input, args: [{ isSignal: true, alias: "schedules", required: false }] }], currentDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentDate", required: false }] }] } });
2901
2752
 
2902
2753
  class NsScheduleComponent {
2903
- view = 'workweek';
2904
- selected = new Date();
2905
- height = 520;
2906
- data;
2907
- onClick;
2754
+ view = model('workweek', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
2755
+ selected = model(new Date(), ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
2756
+ height = input(520, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
2757
+ data = input(undefined, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
2908
2758
  service = inject(NsScheduleService);
2909
- constructor() {
2910
- this.onClick = this.service.onClick$;
2911
- }
2759
+ onClick = outputFromObservable(this.service.onClick$);
2912
2760
  goToday() {
2913
- this.selected = new Date();
2761
+ this.selected.set(new Date());
2914
2762
  }
2915
2763
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2916
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsScheduleComponent, isStandalone: true, selector: "ns-schedule", inputs: { view: "view", selected: "selected", height: "height", data: "data" }, outputs: { onClick: "onClick" }, host: { properties: { "class.ns-schedule": "true" } }, ngImport: i0, template: "<div class=\"ns-schedule__tools\">\n <ns-button class=\"ns-scheduler__today\" label=\"Today\" (click)=\"goToday()\" />\n\n <ns-date-picker [(ngModel)]=\"selected\" [view]=\"view\" />\n\n <ns-dropdown class=\"ns-schedule__view\" [(ngModel)]=\"view\">\n <ns-dropdown-item label=\"Day\" value=\"day\" />\n <ns-dropdown-item label=\"Work week\" value=\"workweek\" />\n <ns-dropdown-item label=\"Week\" value=\"week\" />\n </ns-dropdown>\n</div>\n\n@switch (view) {\n @case ('day') {\n <ns-schedule-day\n [currentDate]=\"selected\"\n [schedules]=\"data\"\n [style.height.px]=\"height\"\n />\n }\n @case ('week') {\n <ns-schedule-week\n [currentDate]=\"selected\"\n [schedules]=\"data\"\n [style.height.px]=\"height\"\n />\n }\n @default {\n <ns-schedule-workweek\n [currentDate]=\"selected\"\n [schedules]=\"data\"\n [style.height.px]=\"height\"\n />\n }\n}\n", styles: [".ns-schedule{display:block;width:100%;color:#616161;font-size:14px;background-color:#f5f5f5}.ns-schedule>:nth-child(2){display:block;overflow-y:auto;overflow-x:hidden}.ns-schedule__tools{display:grid;grid-template-columns:[today] 5rem [calendar] 1fr [view] 4fr;margin-bottom:.5rem;grid-gap:.5rem}.ns-schedule__view{margin-left:auto;margin-bottom:unset}.ns-schedule__header{display:flex;flex-direction:column;padding:.5em 1rem;border:1px solid #d1d1d1;-webkit-user-select:none;user-select:none;line-height:1}.ns-schedule__header-date{font-size:1.5em;font-weight:600}.ns-schedule__header-day{font-size:1em}.ns-schedule__header-wrap{position:sticky;top:0;background-color:#f9f9f9;z-index:1050}.ns-schedule__header:not(:first-child){border-left-width:0}.ns-schedule__timeline-day{position:relative;display:flex;flex-direction:column;min-height:6.5em;border:1px solid #d1d1d1;border-top-width:0}.ns-schedule__timeline-day:not(:first-child){border-left-width:0}.ns-schedule__timeline-day:first-child{text-align:center}.ns-schedule__timeline-day.ns-workweek__selected{background-color:#fafafa}.ns-schedule__timeline-cell{border-color:transparent;background-color:transparent;height:100%;flex:1 1}.ns-schedule__timeline-cell:first-child{border-bottom:1px dashed #d1d1d1}.ns-schedule__timeline-cell:hover{background-color:#ededed}.ns-schedule__selected{color:#5b5fc7;background-color:#fff}.ns-schedule__header-wrap,.ns-schedule__timeline{display:grid}\n"], dependencies: [{ kind: "component", type: NsButtonComponent, selector: "ns-button", inputs: ["label", "type", "theme", "block", "disabled", "loading", "icon", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DayComponent, selector: "ns-schedule-day", inputs: ["schedules", "currentDate"] }, { kind: "component", type: WeekComponent, selector: "ns-schedule-week", inputs: ["schedules", "currentDate"] }, { kind: "component", type: NsWorkweekComponent, selector: "ns-schedule-workweek", inputs: ["schedules", "currentDate"] }, { kind: "component", type: NsDatePickerComponent, selector: "ns-date-picker", inputs: ["autoClose", "placement", "view", "visibleMonths", "firstDayOfWeek", "maxDate", "minDate", "navigation", "weekdayStyle"] }, { kind: "component", type: NsDropdownComponent, selector: "ns-dropdown", inputs: ["labelField", "valueField", "iconName", "defaultFirst", "placement", "filterable", "collection"] }, { kind: "directive", type: NsDropdownItemDirective, selector: "ns-dropdown-item", inputs: ["label", "value", "disabled"] }], encapsulation: i0.ViewEncapsulation.None });
2764
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NsScheduleComponent, isStandalone: true, selector: "ns-schedule", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { view: "viewChange", selected: "selectedChange", onClick: "onClick" }, host: { properties: { "class.ns-schedule": "true" } }, ngImport: i0, template: "<div class=\"ns-schedule__tools\">\n <ns-button class=\"ns-scheduler__today\" label=\"Today\" (click)=\"goToday()\" />\n\n <ns-date-picker\n [ngModel]=\"selected()\"\n (ngModelChange)=\"selected.set($event)\"\n [view]=\"view()\"\n />\n\n <ns-dropdown\n class=\"ns-schedule__view\"\n [ngModel]=\"view()\"\n (ngModelChange)=\"view.set($event)\"\n >\n <ns-dropdown-item label=\"Day\" value=\"day\" />\n <ns-dropdown-item label=\"Work week\" value=\"workweek\" />\n <ns-dropdown-item label=\"Week\" value=\"week\" />\n </ns-dropdown>\n</div>\n\n@switch (view()) {\n @case ('day') {\n <ns-schedule-day\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n @case ('week') {\n <ns-schedule-week\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n @default {\n <ns-schedule-workweek\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n}\n", styles: [".ns-schedule{display:block;width:100%;color:#616161;font-size:14px;background-color:#f5f5f5}.ns-schedule>:nth-child(2){display:block;overflow-y:auto;overflow-x:hidden}.ns-schedule__tools{display:grid;grid-template-columns:[today] 5rem [calendar] 1fr [view] 4fr;margin-bottom:.5rem;grid-gap:.5rem}.ns-schedule__view{margin-left:auto;margin-bottom:unset}.ns-schedule__header{display:flex;flex-direction:column;padding:.5em 1rem;border:1px solid #d1d1d1;-webkit-user-select:none;user-select:none;line-height:1}.ns-schedule__header-date{font-size:1.5em;font-weight:600}.ns-schedule__header-day{font-size:1em}.ns-schedule__header-wrap{position:sticky;top:0;background-color:#f9f9f9;z-index:1050}.ns-schedule__header:not(:first-child){border-left-width:0}.ns-schedule__timeline-day{position:relative;display:flex;flex-direction:column;min-height:6.5em;border:1px solid #d1d1d1;border-top-width:0}.ns-schedule__timeline-day:not(:first-child){border-left-width:0}.ns-schedule__timeline-day:first-child{text-align:center}.ns-schedule__timeline-day.ns-workweek__selected{background-color:#fafafa}.ns-schedule__timeline-cell{border-color:transparent;background-color:transparent;height:100%;flex:1 1}.ns-schedule__timeline-cell:first-child{border-bottom:1px dashed #d1d1d1}.ns-schedule__timeline-cell:hover{background-color:#ededed}.ns-schedule__selected{color:#5b5fc7;background-color:#fff}.ns-schedule__header-wrap,.ns-schedule__timeline{display:grid}\n"], dependencies: [{ kind: "component", type: NsButtonComponent, selector: "ns-button", inputs: ["label", "type", "theme", "block", "disabled", "loading", "icon", "value"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DayComponent, selector: "ns-schedule-day", inputs: ["schedules", "currentDate"] }, { kind: "component", type: WeekComponent, selector: "ns-schedule-week", inputs: ["schedules", "currentDate"] }, { kind: "component", type: NsWorkweekComponent, selector: "ns-schedule-workweek", inputs: ["schedules", "currentDate"] }, { kind: "component", type: NsDatePickerComponent, selector: "ns-date-picker", inputs: ["autoClose", "placement", "view", "visibleMonths", "firstDayOfWeek", "maxDate", "minDate", "navigation", "weekdayStyle"] }, { kind: "component", type: NsDropdownComponent, selector: "ns-dropdown", inputs: ["labelField", "valueField", "iconName", "defaultFirst", "placement", "filterable", "collection"] }, { kind: "directive", type: NsDropdownItemDirective, selector: "ns-dropdown-item", inputs: ["label", "value", "disabled"] }], encapsulation: i0.ViewEncapsulation.None });
2917
2765
  }
2918
2766
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsScheduleComponent, decorators: [{
2919
2767
  type: Component,
@@ -2928,22 +2776,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
2928
2776
  NsDropdownItemDirective
2929
2777
  ], encapsulation: ViewEncapsulation.None, host: {
2930
2778
  '[class.ns-schedule]': 'true'
2931
- }, template: "<div class=\"ns-schedule__tools\">\n <ns-button class=\"ns-scheduler__today\" label=\"Today\" (click)=\"goToday()\" />\n\n <ns-date-picker [(ngModel)]=\"selected\" [view]=\"view\" />\n\n <ns-dropdown class=\"ns-schedule__view\" [(ngModel)]=\"view\">\n <ns-dropdown-item label=\"Day\" value=\"day\" />\n <ns-dropdown-item label=\"Work week\" value=\"workweek\" />\n <ns-dropdown-item label=\"Week\" value=\"week\" />\n </ns-dropdown>\n</div>\n\n@switch (view) {\n @case ('day') {\n <ns-schedule-day\n [currentDate]=\"selected\"\n [schedules]=\"data\"\n [style.height.px]=\"height\"\n />\n }\n @case ('week') {\n <ns-schedule-week\n [currentDate]=\"selected\"\n [schedules]=\"data\"\n [style.height.px]=\"height\"\n />\n }\n @default {\n <ns-schedule-workweek\n [currentDate]=\"selected\"\n [schedules]=\"data\"\n [style.height.px]=\"height\"\n />\n }\n}\n", styles: [".ns-schedule{display:block;width:100%;color:#616161;font-size:14px;background-color:#f5f5f5}.ns-schedule>:nth-child(2){display:block;overflow-y:auto;overflow-x:hidden}.ns-schedule__tools{display:grid;grid-template-columns:[today] 5rem [calendar] 1fr [view] 4fr;margin-bottom:.5rem;grid-gap:.5rem}.ns-schedule__view{margin-left:auto;margin-bottom:unset}.ns-schedule__header{display:flex;flex-direction:column;padding:.5em 1rem;border:1px solid #d1d1d1;-webkit-user-select:none;user-select:none;line-height:1}.ns-schedule__header-date{font-size:1.5em;font-weight:600}.ns-schedule__header-day{font-size:1em}.ns-schedule__header-wrap{position:sticky;top:0;background-color:#f9f9f9;z-index:1050}.ns-schedule__header:not(:first-child){border-left-width:0}.ns-schedule__timeline-day{position:relative;display:flex;flex-direction:column;min-height:6.5em;border:1px solid #d1d1d1;border-top-width:0}.ns-schedule__timeline-day:not(:first-child){border-left-width:0}.ns-schedule__timeline-day:first-child{text-align:center}.ns-schedule__timeline-day.ns-workweek__selected{background-color:#fafafa}.ns-schedule__timeline-cell{border-color:transparent;background-color:transparent;height:100%;flex:1 1}.ns-schedule__timeline-cell:first-child{border-bottom:1px dashed #d1d1d1}.ns-schedule__timeline-cell:hover{background-color:#ededed}.ns-schedule__selected{color:#5b5fc7;background-color:#fff}.ns-schedule__header-wrap,.ns-schedule__timeline{display:grid}\n"] }]
2932
- }], ctorParameters: () => [], propDecorators: { view: [{
2933
- type: Input
2934
- }], selected: [{
2935
- type: Input
2936
- }], height: [{
2937
- type: Input
2938
- }], data: [{
2939
- type: Input
2940
- }], onClick: [{
2941
- type: Output
2942
- }] } });
2779
+ }, template: "<div class=\"ns-schedule__tools\">\n <ns-button class=\"ns-scheduler__today\" label=\"Today\" (click)=\"goToday()\" />\n\n <ns-date-picker\n [ngModel]=\"selected()\"\n (ngModelChange)=\"selected.set($event)\"\n [view]=\"view()\"\n />\n\n <ns-dropdown\n class=\"ns-schedule__view\"\n [ngModel]=\"view()\"\n (ngModelChange)=\"view.set($event)\"\n >\n <ns-dropdown-item label=\"Day\" value=\"day\" />\n <ns-dropdown-item label=\"Work week\" value=\"workweek\" />\n <ns-dropdown-item label=\"Week\" value=\"week\" />\n </ns-dropdown>\n</div>\n\n@switch (view()) {\n @case ('day') {\n <ns-schedule-day\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n @case ('week') {\n <ns-schedule-week\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n @default {\n <ns-schedule-workweek\n [currentDate]=\"selected()\"\n [schedules]=\"data()\"\n [style.height.px]=\"height()\"\n />\n }\n}\n", styles: [".ns-schedule{display:block;width:100%;color:#616161;font-size:14px;background-color:#f5f5f5}.ns-schedule>:nth-child(2){display:block;overflow-y:auto;overflow-x:hidden}.ns-schedule__tools{display:grid;grid-template-columns:[today] 5rem [calendar] 1fr [view] 4fr;margin-bottom:.5rem;grid-gap:.5rem}.ns-schedule__view{margin-left:auto;margin-bottom:unset}.ns-schedule__header{display:flex;flex-direction:column;padding:.5em 1rem;border:1px solid #d1d1d1;-webkit-user-select:none;user-select:none;line-height:1}.ns-schedule__header-date{font-size:1.5em;font-weight:600}.ns-schedule__header-day{font-size:1em}.ns-schedule__header-wrap{position:sticky;top:0;background-color:#f9f9f9;z-index:1050}.ns-schedule__header:not(:first-child){border-left-width:0}.ns-schedule__timeline-day{position:relative;display:flex;flex-direction:column;min-height:6.5em;border:1px solid #d1d1d1;border-top-width:0}.ns-schedule__timeline-day:not(:first-child){border-left-width:0}.ns-schedule__timeline-day:first-child{text-align:center}.ns-schedule__timeline-day.ns-workweek__selected{background-color:#fafafa}.ns-schedule__timeline-cell{border-color:transparent;background-color:transparent;height:100%;flex:1 1}.ns-schedule__timeline-cell:first-child{border-bottom:1px dashed #d1d1d1}.ns-schedule__timeline-cell:hover{background-color:#ededed}.ns-schedule__selected{color:#5b5fc7;background-color:#fff}.ns-schedule__header-wrap,.ns-schedule__timeline{display:grid}\n"] }]
2780
+ }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
2943
2781
 
2944
2782
  class NsSchemaMarkupComponent {
2945
2783
  sanitizer = inject(DomSanitizer);
2946
- data;
2784
+ data = input(undefined, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
2947
2785
  innerHTML;
2948
2786
  ngOnInit() { }
2949
2787
  ngOnChanges({ data }) {
@@ -2952,7 +2790,7 @@ class NsSchemaMarkupComponent {
2952
2790
  this.innerHTML = this.sanitizer.bypassSecurityTrustHtml(template);
2953
2791
  }
2954
2792
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSchemaMarkupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2955
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsSchemaMarkupComponent, isStandalone: true, selector: "ns-schema", inputs: { data: "data" }, host: { properties: { "innerHTML": "this.innerHTML" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
2793
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsSchemaMarkupComponent, isStandalone: true, selector: "ns-schema", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "innerHTML": "this.innerHTML" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
2956
2794
  }
2957
2795
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsSchemaMarkupComponent, decorators: [{
2958
2796
  type: Component,
@@ -2960,16 +2798,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
2960
2798
  selector: 'ns-schema',
2961
2799
  template: ''
2962
2800
  }]
2963
- }], propDecorators: { data: [{
2964
- type: Input
2965
- }], innerHTML: [{
2801
+ }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], innerHTML: [{
2966
2802
  type: HostBinding,
2967
2803
  args: ['innerHTML']
2968
2804
  }] } });
2969
2805
 
2970
2806
  class TemplateDirective {
2971
- name;
2972
- styleClass;
2807
+ name = input(undefined, { ...(ngDevMode ? { debugName: "name" } : /* istanbul ignore next */ {}), alias: 'nsTemplate' });
2808
+ styleClass = input(undefined, ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
2973
2809
  ref = inject(TemplateRef);
2974
2810
  modalRef = inject(NsModalRef, { optional: true });
2975
2811
  ngOnInit() {
@@ -2978,7 +2814,7 @@ class TemplateDirective {
2978
2814
  }
2979
2815
  }
2980
2816
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
2981
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.21", type: TemplateDirective, isStandalone: true, selector: "[nsTemplate]", inputs: { name: ["nsTemplate", "name"], styleClass: "styleClass" }, ngImport: i0 });
2817
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.21", type: TemplateDirective, isStandalone: true, selector: "[nsTemplate]", inputs: { name: { classPropertyName: "name", publicName: "nsTemplate", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
2982
2818
  }
2983
2819
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TemplateDirective, decorators: [{
2984
2820
  type: Directive,
@@ -2986,12 +2822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
2986
2822
  selector: '[nsTemplate]',
2987
2823
  standalone: true
2988
2824
  }]
2989
- }], propDecorators: { name: [{
2990
- type: Input,
2991
- args: ['nsTemplate']
2992
- }], styleClass: [{
2993
- type: Input
2994
- }] } });
2825
+ }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "nsTemplate", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }] } });
2995
2826
 
2996
2827
  var ToastType;
2997
2828
  (function (ToastType) {
@@ -3035,15 +2866,15 @@ class ToastSetup {
3035
2866
  }
3036
2867
 
3037
2868
  class NsToastComponent {
3038
- type = ToastType.SUCCESS;
3039
- message;
2869
+ type = input(ToastType.SUCCESS, ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
2870
+ message = input(undefined, ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
3040
2871
  state = 'display';
3041
2872
  element = inject(ElementRef);
3042
2873
  get marginLeft() {
3043
2874
  return -(this.element.nativeElement.offsetWidth / 2);
3044
2875
  }
3045
2876
  get iconName() {
3046
- switch (this.type) {
2877
+ switch (this.type()) {
3047
2878
  case ToastType.WARNING:
3048
2879
  return 'exclamation-triangle';
3049
2880
  case ToastType.ERROR:
@@ -3055,30 +2886,26 @@ class NsToastComponent {
3055
2886
  }
3056
2887
  }
3057
2888
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3058
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.21", type: NsToastComponent, isStandalone: true, selector: "ns-toast", inputs: { type: "type", message: "message" }, host: { properties: { "class.ns-toast": "true", "class.ns-toast--success": "type ==='success'", "class.ns-toast--warning": "type ==='warning'", "class.ns-toast--info": "type ==='info'", "class.ns-toast--error": "type ==='error'", "class.ns-toast--leaving": "state === 'destroy'", "style.margin-left.px": "marginLeft" } }, ngImport: i0, template: `
3059
- <span class="ns-toast__message" [innerHTML]="message"></span>
2889
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", type: NsToastComponent, isStandalone: true, selector: "ns-toast", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ns-toast": "true", "class.ns-toast--success": "type() ==='success'", "class.ns-toast--warning": "type() ==='warning'", "class.ns-toast--info": "type() ==='info'", "class.ns-toast--error": "type() ==='error'", "class.ns-toast--leaving": "state === 'destroy'", "style.margin-left.px": "marginLeft" } }, ngImport: i0, template: `
2890
+ <span class="ns-toast__message" [innerHTML]="message()"></span>
3060
2891
  <ns-icon [name]="iconName" [size]="24" />
3061
2892
  `, isInline: true, styles: [":host{position:fixed;display:flex;justify-content:space-between;align-items:center;z-index:10000;left:50%;bottom:1rem;margin-left:50%;color:#fff;width:360px;height:64px;box-sizing:border-box;border-radius:var(--ns-border-radius, 8px);transform:translateY(100%);padding:1rem;animation:ns-toast-enter .3s ease-out forwards}:host.ns-toast--leaving{animation:ns-toast-leave .3s ease-in forwards}:host.ns-toast--success{background-color:var(--ns-success-color, #54b948)}:host.ns-toast--warning{background-color:var(--ns-info-color, #ffc500)}:host.ns-toast--info{background-color:var(--ns-info-color, #2980b9)}:host.ns-toast--error{background-color:var(--ns-danger-color, #c9243f)}:host .ns-toast__message{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden}@keyframes ns-toast-enter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes ns-toast-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}\n"], dependencies: [{ kind: "component", type: NsIconsComponent, selector: "ns-icon", inputs: ["name", "color", "size", "strokeWidth", "viewBox"] }] });
3062
2893
  }
3063
2894
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NsToastComponent, decorators: [{
3064
2895
  type: Component,
3065
2896
  args: [{ selector: 'ns-toast', imports: [NsIconsComponent], template: `
3066
- <span class="ns-toast__message" [innerHTML]="message"></span>
2897
+ <span class="ns-toast__message" [innerHTML]="message()"></span>
3067
2898
  <ns-icon [name]="iconName" [size]="24" />
3068
2899
  `, host: {
3069
2900
  '[class.ns-toast]': 'true',
3070
- '[class.ns-toast--success]': "type ==='success'",
3071
- '[class.ns-toast--warning]': "type ==='warning'",
3072
- '[class.ns-toast--info]': "type ==='info'",
3073
- '[class.ns-toast--error]': "type ==='error'",
2901
+ '[class.ns-toast--success]': "type() ==='success'",
2902
+ '[class.ns-toast--warning]': "type() ==='warning'",
2903
+ '[class.ns-toast--info]': "type() ==='info'",
2904
+ '[class.ns-toast--error]': "type() ==='error'",
3074
2905
  '[class.ns-toast--leaving]': "state === 'destroy'",
3075
2906
  '[style.margin-left.px]': 'marginLeft'
3076
2907
  }, styles: [":host{position:fixed;display:flex;justify-content:space-between;align-items:center;z-index:10000;left:50%;bottom:1rem;margin-left:50%;color:#fff;width:360px;height:64px;box-sizing:border-box;border-radius:var(--ns-border-radius, 8px);transform:translateY(100%);padding:1rem;animation:ns-toast-enter .3s ease-out forwards}:host.ns-toast--leaving{animation:ns-toast-leave .3s ease-in forwards}:host.ns-toast--success{background-color:var(--ns-success-color, #54b948)}:host.ns-toast--warning{background-color:var(--ns-info-color, #ffc500)}:host.ns-toast--info{background-color:var(--ns-info-color, #2980b9)}:host.ns-toast--error{background-color:var(--ns-danger-color, #c9243f)}:host .ns-toast__message{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden}@keyframes ns-toast-enter{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes ns-toast-leave{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}\n"] }]
3077
- }], propDecorators: { type: [{
3078
- type: Input
3079
- }], message: [{
3080
- type: Input
3081
- }] } });
2908
+ }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }] } });
3082
2909
 
3083
2910
  class NsToastService {
3084
2911
  appRef = inject(ApplicationRef);
@@ -3138,5 +2965,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImpo
3138
2965
  * Generated bundle index. Do not edit.
3139
2966
  */
3140
2967
 
3141
- export { NsAvatarComponent, NsButtonComponent, NsButtonGroupComponent, NsCalendar, NsCheckboxComponent, NsCommentComponent, NsContentEditableComponent, NsDateParserFormatter, NsDatePickerComponent, NsDateRangeEndDirective, NsDateRangePickerComponent, NsDateRangeStartDirective, NsDropdownComponent, NsDropdownItemDirective, NsEditorColorPickerComponent, NsEditorComponent, NsEditorLinkComponent, NsEditorListComponent, NsEditorParagraphComponent, NsEditorToggleCommandComponent, NsImageUploadComponent, NsInputComponent, NsInputGroupComponent, NsInputNumberComponent, NsModalComponent, NsModalService, NsPasswordComponent, NsScheduleComponent, NsScheduleService, NsSchemaMarkupComponent, NsSwitchComponent, NsTextAreaComponent, NsToastComponent, NsToastService, NsValueAccessor, TemplateDirective, ToastRef, ToastSetup, ToastType };
2968
+ export { NsAvatarComponent, NsButtonComponent, NsButtonGroupComponent, NsCalendar, NsCheckboxComponent, NsCommentComponent, NsContentEditableComponent, NsDateParserFormatter, NsDatePickerComponent, NsDateRangeEndDirective, NsDateRangePickerComponent, NsDateRangeStartDirective, NsDropdownComponent, NsDropdownItemDirective, NsEditorColorPickerComponent, NsEditorComponent, NsEditorLinkComponent, NsEditorListComponent, NsEditorParagraphComponent, NsEditorToggleCommandComponent, NsImageUploadComponent, NsInputComponent, NsInputGroupAddonComponent, NsInputGroupComponent, NsInputNumberComponent, NsModalComponent, NsModalService, NsPasswordComponent, NsScheduleComponent, NsScheduleService, NsSchemaMarkupComponent, NsSwitchComponent, NsTextAreaComponent, NsToastComponent, NsToastService, NsValueAccessor, TemplateDirective, ToastRef, ToastSetup, ToastType };
3142
2969
  //# sourceMappingURL=ng-solid-design-system.mjs.map