@tedi-design-system/angular 6.3.0-rc.4 → 6.3.0-rc.5

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 (9) hide show
  1. package/fesm2022/tedi-design-system-angular-tedi.mjs +30 -21
  2. package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/tedi/components/form/form-field/form-field-control.d.ts +3 -4
  5. package/tedi/components/form/form-field/form-field-control.d.ts.map +1 -1
  6. package/tedi/components/form/form-field/form-field.component.d.ts +8 -2
  7. package/tedi/components/form/form-field/form-field.component.d.ts.map +1 -1
  8. package/tedi/components/form/text-field/text-field.component.d.ts +5 -5
  9. package/tedi/components/form/text-field/text-field.component.d.ts.map +1 -1
package/fesm2022/tedi-design-system-angular-tedi.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, Injectable, InjectionToken, REQUEST, PLATFORM_ID, effect, isSignal, Pipe, model, output, Injector, Renderer2, forwardRef, ViewChild, TemplateRef, viewChild, viewChildren, NgZone, contentChild, HostListener, contentChildren, ContentChild, Optional, Self, HostBinding, Attribute, ViewContainerRef, runInInjectionContext, ContentChildren, afterNextRender, makeEnvironmentProviders } from '@angular/core';
2
+ import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, Injectable, InjectionToken, REQUEST, PLATFORM_ID, effect, isSignal, Pipe, model, output, Injector, Renderer2, forwardRef, ViewChild, TemplateRef, viewChild, viewChildren, NgZone, contentChild, HostListener, contentChildren, DestroyRef, ContentChild, HostBinding, Attribute, ViewContainerRef, runInInjectionContext, ContentChildren, afterNextRender, makeEnvironmentProviders } from '@angular/core';
3
3
  import * as i1 from '@angular/cdk/layout';
4
4
  import * as i1$1 from '@angular/common';
5
5
  import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgTemplateOutlet, CommonModule, NgClass, NgFor, NgIf } from '@angular/common';
@@ -7,12 +7,12 @@ import * as i2 from '@angular/cdk/overlay';
7
7
  import { Overlay, OverlayConfig, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
8
8
  import { ComponentPortal } from '@angular/cdk/portal';
9
9
  import { LiveAnnouncer, _IdGenerator, CdkTrapFocus } from '@angular/cdk/a11y';
10
- import * as i1$3 from '@angular/forms';
11
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
10
+ import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
12
11
  import * as i3 from '@angular/cdk/listbox';
13
12
  import { CdkListbox, CdkListboxModule } from '@angular/cdk/listbox';
14
13
  import * as i1$2 from 'ngx-float-ui';
15
14
  import { NgxFloatUiContentComponent, NgxFloatUiModule } from 'ngx-float-ui';
15
+ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
16
16
  import { trigger, state, transition, style, animate } from '@angular/animations';
17
17
  import { RouterLink } from '@angular/router';
18
18
 
@@ -5237,7 +5237,22 @@ class FormFieldComponent {
5237
5237
  */
5238
5238
  inputClass = input(null);
5239
5239
  control;
5240
+ ngControl;
5240
5241
  feedback;
5242
+ destroyRef = inject(DestroyRef);
5243
+ ngAfterContentInit() {
5244
+ this.ngControl?.control?.events
5245
+ ?.pipe(takeUntilDestroyed(this.destroyRef))
5246
+ .subscribe(() => this.updateValidationState());
5247
+ this.updateValidationState();
5248
+ }
5249
+ updateValidationState() {
5250
+ const invalid = !!this.ngControl?.invalid;
5251
+ const touched = !!this.ngControl?.touched;
5252
+ const dirty = !!this.ngControl?.dirty;
5253
+ const fieldInvalid = invalid && (touched || dirty);
5254
+ this.control?.setInvalidState(fieldInvalid);
5255
+ }
5241
5256
  resolvedIcon = computed(() => {
5242
5257
  const icon = this.icon();
5243
5258
  if (!icon)
@@ -5246,7 +5261,7 @@ class FormFieldComponent {
5246
5261
  });
5247
5262
  validationState = computed(() => {
5248
5263
  const feedbackType = this.feedback?.type();
5249
- const fieldInvalid = this.control?.invalid();
5264
+ const fieldInvalid = this.control?.invalid?.() ?? false;
5250
5265
  if (fieldInvalid || feedbackType === "error")
5251
5266
  return "invalid";
5252
5267
  if (feedbackType === "valid")
@@ -5280,7 +5295,7 @@ class FormFieldComponent {
5280
5295
  this.control?.clearField?.();
5281
5296
  }
5282
5297
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5283
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FormFieldComponent, isStandalone: true, selector: "tedi-form-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "control", first: true, predicate: TEDI_FORM_FIELD_CONTROL, descendants: true }, { propertyName: "feedback", first: true, predicate: FeedbackTextComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div [ngClass]=\"inputClasses()\">\n <ng-content select=\"input[tedi-text-field]\"></ng-content>\n\n @if (showClearButton()) {\n <div class=\"tedi-form-field__buttons\">\n <button\n class=\"tedi-form-field__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n [disabled]=\"isDisabled()\"\n (click)=\"clear()\"\n ></button>\n\n @if (icon()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n </div>\n }\n\n @if (resolvedIcon(); as icon) {\n <div class=\"tedi-form-field__icon\">\n <tedi-icon\n [name]=\"icon.name\"\n [size]=\"icon.size ?? (size() === 'small' ? 16 : 18)\"\n [color]=\"icon.color ?? 'secondary'\"\n [type]=\"icon.type ?? 'outlined'\"\n [variant]=\"icon.variant ?? 'outlined'\"\n [attr.aria-hidden]=\"true\"\n />\n </div>\n }\n</div>\n\n@if (feedback) {\n <div class=\"tedi-form-field__feedback\">\n <ng-content select=\"tedi-feedback-text\"></ng-content>\n </div>\n}\n", styles: [".tedi-form-field{display:flex;flex-direction:column}.tedi-form-field__input{position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%;height:var(--form-field-height);background:var(--form-input-background-default);border:1px solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-form-field--small .tedi-label{font-size:var(--body-small-regular-size)}.tedi-form-field--small .tedi-form-field__input{height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input{height:var(--form-field-height-lg)}.tedi-form-field--valid .tedi-form-field__input{border-color:var(--form-general-feedback-success-border)}.tedi-form-field--valid .tedi-form-field__input:focus-within{box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-form-field--invalid .tedi-form-field__input{border-color:var(--form-general-feedback-error-border)}.tedi-form-field--invalid .tedi-form-field__input:focus-within{box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-form-field--disabled .tedi-form-field__input{cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled);box-shadow:none}.tedi-form-field--with-icon .tedi-form-field__input{padding-right:var(--form-field-padding-x-md-default)}.tedi-form-field--with-icon.tedi-form-field--large .tedi-form-field__input{padding-right:var(--form-field-padding-x-lg)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:hover,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:has(input:hover){border-color:var(--form-input-border-hover)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:active,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:has(input:active){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:focus-within,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:has(input:focus-visible){border-color:var(--form-input-border-focus);box-shadow:0 0 0 1px var(--form-input-border-focus)}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5298
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FormFieldComponent, isStandalone: true, selector: "tedi-form-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "control", first: true, predicate: TEDI_FORM_FIELD_CONTROL, descendants: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }, { propertyName: "feedback", first: true, predicate: FeedbackTextComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div [ngClass]=\"inputClasses()\">\n <ng-content select=\"input[tedi-text-field]\"></ng-content>\n\n @if (showClearButton()) {\n <div class=\"tedi-form-field__buttons\">\n <button\n class=\"tedi-form-field__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n [disabled]=\"isDisabled()\"\n (click)=\"clear()\"\n ></button>\n\n @if (icon()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n </div>\n }\n\n @if (resolvedIcon(); as icon) {\n <div class=\"tedi-form-field__icon\">\n <tedi-icon\n [name]=\"icon.name\"\n [size]=\"icon.size ?? (size() === 'small' ? 16 : 18)\"\n [color]=\"icon.color ?? 'secondary'\"\n [type]=\"icon.type ?? 'outlined'\"\n [variant]=\"icon.variant ?? 'outlined'\"\n [attr.aria-hidden]=\"true\"\n />\n </div>\n }\n</div>\n\n@if (feedback) {\n <div class=\"tedi-form-field__feedback\">\n <ng-content select=\"tedi-feedback-text\"></ng-content>\n </div>\n}\n", styles: [".tedi-form-field{display:flex;flex-direction:column}.tedi-form-field__input{position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%;height:var(--form-field-height);background:var(--form-input-background-default);border:1px solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-form-field--small .tedi-label{font-size:var(--body-small-regular-size)}.tedi-form-field--small .tedi-form-field__input{height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input{height:var(--form-field-height-lg)}.tedi-form-field--valid .tedi-form-field__input{border-color:var(--form-general-feedback-success-border)}.tedi-form-field--valid .tedi-form-field__input:focus-within{box-shadow:0 0 0 1px var(--form-general-feedback-success-border)}.tedi-form-field--invalid .tedi-form-field__input{border-color:var(--form-general-feedback-error-border)}.tedi-form-field--invalid .tedi-form-field__input:focus-within{box-shadow:0 0 0 1px var(--form-general-feedback-error-border)}.tedi-form-field--disabled .tedi-form-field__input{cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled);box-shadow:none}.tedi-form-field--with-icon .tedi-form-field__input{padding-right:var(--form-field-padding-x-md-default)}.tedi-form-field--with-icon.tedi-form-field--large .tedi-form-field__input{padding-right:var(--form-field-padding-x-lg)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:hover,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:has(input:hover){border-color:var(--form-input-border-hover)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:active,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:has(input:active){border-color:var(--form-input-border-active);box-shadow:0 0 0 1px var(--form-input-border-active)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:focus-within,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:has(input:focus-visible){border-color:var(--form-input-border-focus);box-shadow:0 0 0 1px var(--form-input-border-focus)}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "ariaLabel"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5284
5299
  }
5285
5300
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormFieldComponent, decorators: [{
5286
5301
  type: Component,
@@ -5296,6 +5311,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
5296
5311
  }], propDecorators: { control: [{
5297
5312
  type: ContentChild,
5298
5313
  args: [TEDI_FORM_FIELD_CONTROL]
5314
+ }], ngControl: [{
5315
+ type: ContentChild,
5316
+ args: [NgControl]
5299
5317
  }], feedback: [{
5300
5318
  type: ContentChild,
5301
5319
  args: [FeedbackTextComponent]
@@ -5303,7 +5321,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
5303
5321
 
5304
5322
  class TextFieldComponent {
5305
5323
  el;
5306
- ngControl;
5307
5324
  /**
5308
5325
  * Value of the input field. Supports two-way binding, use with form controls.
5309
5326
  */
@@ -5317,18 +5334,14 @@ class TextFieldComponent {
5317
5334
  * Callback triggered when the clear button is clicked.
5318
5335
  */
5319
5336
  clear = output();
5320
- constructor(el, ngControl) {
5337
+ constructor(el) {
5321
5338
  this.el = el;
5322
- this.ngControl = ngControl;
5323
- if (this.ngControl) {
5324
- this.ngControl.valueAccessor = this;
5325
- }
5326
5339
  }
5327
5340
  disabled = computed(() => this.el.nativeElement.disabled || this.formDisabled());
5328
- invalid = computed(() => {
5329
- const control = this.ngControl?.control;
5330
- return !!(control?.invalid && (control?.touched || control?.dirty));
5331
- });
5341
+ invalid = signal(false);
5342
+ setInvalidState(isInvalid) {
5343
+ this.invalid.set(isInvalid);
5344
+ }
5332
5345
  formDisabled = signal(false);
5333
5346
  onChange = () => { };
5334
5347
  onTouched = () => { };
@@ -5366,7 +5379,7 @@ class TextFieldComponent {
5366
5379
  this.clear.emit();
5367
5380
  this.onTouched();
5368
5381
  }
5369
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextFieldComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
5382
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextFieldComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
5370
5383
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: TextFieldComponent, isStandalone: true, selector: "input[tedi-text-field]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, arrowsHidden: { classPropertyName: "arrowsHidden", publicName: "arrowsHidden", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", clear: "clear" }, host: { listeners: { "input": "handleInputChange($event)", "blur": "handleBlur()" }, properties: { "class.tedi-text-field--arrows-hidden": "arrowsHidden()", "attr.aria-invalid": "invalid() || null" }, classAttribute: "tedi-text-field" }, providers: [
5371
5384
  {
5372
5385
  provide: NG_VALUE_ACCESSOR,
@@ -5398,11 +5411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
5398
5411
  "(input)": "handleInputChange($event)",
5399
5412
  "(blur)": "handleBlur()",
5400
5413
  }, styles: [".tedi-text-field{flex:1;height:100%;padding:var(--form-field-padding-y-md-default) var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-text-field::placeholder{color:var(--form-input-text-placeholder)}.tedi-text-field:disabled{color:var(--form-input-text-disabled);cursor:not-allowed;background:transparent}.tedi-text-field--arrows-hidden::-webkit-outer-spin-button,.tedi-text-field--arrows-hidden::-webkit-inner-spin-button{appearance:none}.tedi-text-field--arrows-hidden[type=number]{appearance:textfield}.tedi-form-field--with-icon .tedi-text-field{padding-right:0}.tedi-form-field--small .tedi-text-field{padding-block:var(--form-field-padding-y-sm);padding-inline:var(--form-field-padding-x-md-default)}.tedi-form-field--large .tedi-text-field{padding-block:var(--form-field-padding-y-lg);padding-inline:var(--form-field-padding-x-lg)}\n"] }]
5401
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.NgControl, decorators: [{
5402
- type: Optional
5403
- }, {
5404
- type: Self
5405
- }] }] });
5414
+ }], ctorParameters: () => [{ type: i0.ElementRef }] });
5406
5415
 
5407
5416
  class TextGroupLabelComponent {
5408
5417
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TextGroupLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });