@atelier-ui/angular 0.0.20 → 0.0.22

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 (3) hide show
  1. package/fesm2022/atelier-ui-angular.mjs +68 -60
  2. package/fesm2022/atelier-ui-angular.mjs.map +1 -1
  3. package/package.json +1 -1
package/fesm2022/atelier-ui-angular.mjs CHANGED
@@ -218,19 +218,21 @@ class LlmInput {
218
218
  }
219
219
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LlmInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
220
220
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: LlmInput, isStandalone: true, selector: "llm-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
221
- <input
222
- [type]="type()"
223
- [value]="value()"
224
- (input)="onInput($event)"
225
- (blur)="touched.set(true)"
226
- [disabled]="disabled()"
227
- [readOnly]="readonly()"
228
- [placeholder]="placeholder()"
229
- [attr.name]="name() || null"
230
- [attr.aria-invalid]="invalid() || null"
231
- [attr.aria-required]="required() || null"
232
- [attr.aria-describedby]="showErrors() ? errorId : null"
233
- />
221
+ <div class="input-field">
222
+ <input
223
+ [type]="type()"
224
+ [value]="value()"
225
+ (input)="onInput($event)"
226
+ (blur)="touched.set(true)"
227
+ [disabled]="disabled()"
228
+ [readOnly]="readonly()"
229
+ [placeholder]="placeholder()"
230
+ [attr.name]="name() || null"
231
+ [attr.aria-invalid]="invalid() || null"
232
+ [attr.aria-required]="required() || null"
233
+ [attr.aria-describedby]="showErrors() ? errorId : null"
234
+ />
235
+ </div>
234
236
  @if (showErrors()) {
235
237
  <div class="errors" [id]="errorId" aria-live="polite">
236
238
  @for (error of errors(); track error.kind) {
@@ -238,24 +240,26 @@ class LlmInput {
238
240
  }
239
241
  </div>
240
242
  }
241
- `, isInline: true, styles: [":host{display:block;font-family:var(--ui-font-family);font-size:var(--ui-font-size-md)}input{display:block;width:100%;padding:.625rem var(--ui-spacing-3);font-size:inherit;font-family:inherit;line-height:var(--ui-line-height-normal);color:var(--ui-color-text);background-color:var(--ui-color-input-bg);border:1px solid var(--ui-color-input-border);border-radius:var(--ui-radius-md);box-shadow:inset 0 1px 2px #0000000a;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast),background-color var(--ui-transition-fast);outline:none;box-sizing:border-box}input::placeholder{color:var(--ui-color-placeholder)}input:hover:not(:disabled):not(:read-only){border-color:var(--ui-color-input-border-hover)}input:focus{border-color:var(--ui-color-input-border-focus);background-color:var(--ui-color-input-bg-focus);box-shadow:var(--ui-focus-ring)}:host(.is-invalid) input{border-color:var(--ui-color-input-border-invalid)}:host(.is-invalid) input:focus{border-color:var(--ui-color-input-border-invalid);box-shadow:0 0 0 2px var(--ui-color-surface),0 0 0 4px var(--ui-color-danger)}:host(.is-disabled){opacity:var(--ui-opacity-disabled);cursor:not-allowed}:host(.is-disabled) input{cursor:not-allowed}:host(.is-readonly) input{background-color:var(--ui-color-surface-sunken);cursor:default;box-shadow:none}.errors{margin-top:var(--ui-spacing-1)}.error-message{margin:0;font-size:var(--ui-font-size-sm);color:var(--ui-color-error-text);line-height:var(--ui-line-height-normal)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
243
+ `, isInline: true, styles: [":host{display:block;font-family:var(--ui-font-family);font-size:var(--ui-font-size-md)}input{display:block;width:100%;padding:.625rem var(--ui-spacing-3);font-size:inherit;font-family:inherit;line-height:var(--ui-line-height-normal);color:var(--ui-color-text);background-color:var(--ui-color-input-bg);border:1px solid var(--ui-color-input-border);border-radius:var(--ui-radius-md);box-shadow:inset 0 1px 2px #0000000a;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast),background-color var(--ui-transition-fast);outline:none;box-sizing:border-box}input::placeholder{color:var(--ui-color-placeholder)}input:hover:not(:disabled):not(:read-only){border-color:var(--ui-color-input-border-hover)}input:focus{border-color:var(--ui-color-input-border-focus);background-color:var(--ui-color-input-bg-focus);box-shadow:var(--ui-focus-ring)}.input-field{position:relative}:host(.is-invalid) input{border-color:var(--ui-color-input-border-invalid);padding-right:2rem}:host(.is-invalid) input:focus{border-color:var(--ui-color-input-border-invalid);box-shadow:0 0 0 2px var(--ui-color-surface),0 0 0 4px var(--ui-color-danger)}:host(.is-invalid) .input-field:before{content:\"\\2715\";position:absolute;top:.625rem;right:.75rem;color:var(--ui-color-danger);font-weight:700;line-height:1;pointer-events:none}:host(.is-disabled){opacity:var(--ui-opacity-disabled);cursor:not-allowed}:host(.is-disabled) input{cursor:not-allowed}:host(.is-readonly) input{background-color:var(--ui-color-surface-sunken);cursor:default;box-shadow:none}.errors{margin-top:var(--ui-spacing-1)}.error-message{margin:0;font-size:var(--ui-font-size-sm);color:var(--ui-color-error-text);line-height:var(--ui-line-height-normal)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
242
244
  }
243
245
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LlmInput, decorators: [{
244
246
  type: Component,
245
247
  args: [{ selector: 'llm-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
246
- <input
247
- [type]="type()"
248
- [value]="value()"
249
- (input)="onInput($event)"
250
- (blur)="touched.set(true)"
251
- [disabled]="disabled()"
252
- [readOnly]="readonly()"
253
- [placeholder]="placeholder()"
254
- [attr.name]="name() || null"
255
- [attr.aria-invalid]="invalid() || null"
256
- [attr.aria-required]="required() || null"
257
- [attr.aria-describedby]="showErrors() ? errorId : null"
258
- />
248
+ <div class="input-field">
249
+ <input
250
+ [type]="type()"
251
+ [value]="value()"
252
+ (input)="onInput($event)"
253
+ (blur)="touched.set(true)"
254
+ [disabled]="disabled()"
255
+ [readOnly]="readonly()"
256
+ [placeholder]="placeholder()"
257
+ [attr.name]="name() || null"
258
+ [attr.aria-invalid]="invalid() || null"
259
+ [attr.aria-required]="required() || null"
260
+ [attr.aria-describedby]="showErrors() ? errorId : null"
261
+ />
262
+ </div>
259
263
  @if (showErrors()) {
260
264
  <div class="errors" [id]="errorId" aria-live="polite">
261
265
  @for (error of errors(); track error.kind) {
@@ -265,7 +269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
265
269
  }
266
270
  `, host: {
267
271
  '[class]': 'hostClasses()',
268
- }, styles: [":host{display:block;font-family:var(--ui-font-family);font-size:var(--ui-font-size-md)}input{display:block;width:100%;padding:.625rem var(--ui-spacing-3);font-size:inherit;font-family:inherit;line-height:var(--ui-line-height-normal);color:var(--ui-color-text);background-color:var(--ui-color-input-bg);border:1px solid var(--ui-color-input-border);border-radius:var(--ui-radius-md);box-shadow:inset 0 1px 2px #0000000a;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast),background-color var(--ui-transition-fast);outline:none;box-sizing:border-box}input::placeholder{color:var(--ui-color-placeholder)}input:hover:not(:disabled):not(:read-only){border-color:var(--ui-color-input-border-hover)}input:focus{border-color:var(--ui-color-input-border-focus);background-color:var(--ui-color-input-bg-focus);box-shadow:var(--ui-focus-ring)}:host(.is-invalid) input{border-color:var(--ui-color-input-border-invalid)}:host(.is-invalid) input:focus{border-color:var(--ui-color-input-border-invalid);box-shadow:0 0 0 2px var(--ui-color-surface),0 0 0 4px var(--ui-color-danger)}:host(.is-disabled){opacity:var(--ui-opacity-disabled);cursor:not-allowed}:host(.is-disabled) input{cursor:not-allowed}:host(.is-readonly) input{background-color:var(--ui-color-surface-sunken);cursor:default;box-shadow:none}.errors{margin-top:var(--ui-spacing-1)}.error-message{margin:0;font-size:var(--ui-font-size-sm);color:var(--ui-color-error-text);line-height:var(--ui-line-height-normal)}\n"] }]
272
+ }, styles: [":host{display:block;font-family:var(--ui-font-family);font-size:var(--ui-font-size-md)}input{display:block;width:100%;padding:.625rem var(--ui-spacing-3);font-size:inherit;font-family:inherit;line-height:var(--ui-line-height-normal);color:var(--ui-color-text);background-color:var(--ui-color-input-bg);border:1px solid var(--ui-color-input-border);border-radius:var(--ui-radius-md);box-shadow:inset 0 1px 2px #0000000a;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast),background-color var(--ui-transition-fast);outline:none;box-sizing:border-box}input::placeholder{color:var(--ui-color-placeholder)}input:hover:not(:disabled):not(:read-only){border-color:var(--ui-color-input-border-hover)}input:focus{border-color:var(--ui-color-input-border-focus);background-color:var(--ui-color-input-bg-focus);box-shadow:var(--ui-focus-ring)}.input-field{position:relative}:host(.is-invalid) input{border-color:var(--ui-color-input-border-invalid);padding-right:2rem}:host(.is-invalid) input:focus{border-color:var(--ui-color-input-border-invalid);box-shadow:0 0 0 2px var(--ui-color-surface),0 0 0 4px var(--ui-color-danger)}:host(.is-invalid) .input-field:before{content:\"\\2715\";position:absolute;top:.625rem;right:.75rem;color:var(--ui-color-danger);font-weight:700;line-height:1;pointer-events:none}:host(.is-disabled){opacity:var(--ui-opacity-disabled);cursor:not-allowed}:host(.is-disabled) input{cursor:not-allowed}:host(.is-readonly) input{background-color:var(--ui-color-surface-sunken);cursor:default;box-shadow:none}.errors{margin-top:var(--ui-spacing-1)}.error-message{margin:0;font-size:var(--ui-font-size-sm);color:var(--ui-color-error-text);line-height:var(--ui-line-height-normal)}\n"] }]
269
273
  }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
270
274
 
271
275
  let nextId$b = 0;
@@ -327,21 +331,23 @@ class LlmTextarea {
327
331
  }
328
332
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LlmTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
329
333
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: LlmTextarea, isStandalone: true, selector: "llm-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
330
- <textarea
331
- [value]="value()"
332
- (input)="onInput($event)"
333
- (blur)="touched.set(true)"
334
- [disabled]="disabled()"
335
- [readOnly]="readonly()"
336
- [placeholder]="placeholder()"
337
- [rows]="rows()"
338
- [attr.name]="name() || null"
339
- [attr.aria-invalid]="invalid() || null"
340
- [attr.aria-required]="required() || null"
341
- [attr.aria-describedby]="showErrors() ? errorId : null"
342
- [cdkTextareaAutosize]="autoResize()"
343
- [cdkAutosizeMinRows]="rows()"
344
- ></textarea>
334
+ <div class="textarea-field">
335
+ <textarea
336
+ [value]="value()"
337
+ (input)="onInput($event)"
338
+ (blur)="touched.set(true)"
339
+ [disabled]="disabled()"
340
+ [readOnly]="readonly()"
341
+ [placeholder]="placeholder()"
342
+ [rows]="rows()"
343
+ [attr.name]="name() || null"
344
+ [attr.aria-invalid]="invalid() || null"
345
+ [attr.aria-required]="required() || null"
346
+ [attr.aria-describedby]="showErrors() ? errorId : null"
347
+ [cdkTextareaAutosize]="autoResize()"
348
+ [cdkAutosizeMinRows]="rows()"
349
+ ></textarea>
350
+ </div>
345
351
  @if (showErrors()) {
346
352
  <div class="errors" [id]="errorId" aria-live="polite">
347
353
  @for (error of errors(); track error.kind) {
@@ -349,26 +355,28 @@ class LlmTextarea {
349
355
  }
350
356
  </div>
351
357
  }
352
- `, isInline: true, styles: [":host{display:block;font-family:var(--ui-font-family);font-size:var(--ui-font-size-md)}textarea{display:block;width:100%;padding:.625rem var(--ui-spacing-3);font-size:inherit;font-family:inherit;line-height:var(--ui-line-height-normal);color:var(--ui-color-text);background-color:var(--ui-color-input-bg);border:1px solid var(--ui-color-input-border);border-radius:var(--ui-radius-md);box-shadow:inset 0 1px 2px #0000000a;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast),background-color var(--ui-transition-fast);outline:none;box-sizing:border-box;resize:vertical;min-height:80px}textarea::placeholder{color:var(--ui-color-placeholder)}textarea:hover:not(:disabled):not(:read-only){border-color:var(--ui-color-input-border-hover)}textarea:focus{border-color:var(--ui-color-input-border-focus);background-color:var(--ui-color-input-bg-focus);box-shadow:var(--ui-focus-ring)}:host(.is-invalid) textarea{border-color:var(--ui-color-input-border-invalid)}:host(.is-invalid) textarea:focus{border-color:var(--ui-color-input-border-invalid);box-shadow:0 0 0 2px var(--ui-color-surface),0 0 0 4px var(--ui-color-danger)}:host(.is-disabled){opacity:var(--ui-opacity-disabled);cursor:not-allowed}:host(.is-disabled) textarea{cursor:not-allowed}:host(.is-readonly) textarea{background-color:var(--ui-color-surface-sunken);cursor:default;box-shadow:none}:host(.is-auto-resize) textarea{resize:none;overflow:hidden}.errors{margin-top:var(--ui-spacing-1)}.error-message{margin:0;font-size:var(--ui-font-size-sm);color:var(--ui-color-error-text);line-height:var(--ui-line-height-normal)}\n"], dependencies: [{ kind: "ngmodule", type: TextFieldModule }, { kind: "directive", type: i1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
358
+ `, isInline: true, styles: [":host{display:block;font-family:var(--ui-font-family);font-size:var(--ui-font-size-md)}textarea{display:block;width:100%;padding:.625rem var(--ui-spacing-3);font-size:inherit;font-family:inherit;line-height:var(--ui-line-height-normal);color:var(--ui-color-text);background-color:var(--ui-color-input-bg);border:1px solid var(--ui-color-input-border);border-radius:var(--ui-radius-md);box-shadow:inset 0 1px 2px #0000000a;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast),background-color var(--ui-transition-fast);outline:none;box-sizing:border-box;resize:vertical;min-height:80px}textarea::placeholder{color:var(--ui-color-placeholder)}textarea:hover:not(:disabled):not(:read-only){border-color:var(--ui-color-input-border-hover)}textarea:focus{border-color:var(--ui-color-input-border-focus);background-color:var(--ui-color-input-bg-focus);box-shadow:var(--ui-focus-ring)}.textarea-field{position:relative}:host(.is-invalid) textarea{border-color:var(--ui-color-input-border-invalid);padding-right:2rem}:host(.is-invalid) textarea:focus{border-color:var(--ui-color-input-border-invalid);box-shadow:0 0 0 2px var(--ui-color-surface),0 0 0 4px var(--ui-color-danger)}:host(.is-invalid) .textarea-field:before{content:\"\\2715\";position:absolute;top:.625rem;right:.75rem;color:var(--ui-color-danger);font-weight:700;line-height:1;pointer-events:none}:host(.is-disabled){opacity:var(--ui-opacity-disabled);cursor:not-allowed}:host(.is-disabled) textarea{cursor:not-allowed}:host(.is-readonly) textarea{background-color:var(--ui-color-surface-sunken);cursor:default;box-shadow:none}:host(.is-auto-resize) textarea{resize:none;overflow:hidden}.errors{margin-top:var(--ui-spacing-1)}.error-message{margin:0;font-size:var(--ui-font-size-sm);color:var(--ui-color-error-text);line-height:var(--ui-line-height-normal)}\n"], dependencies: [{ kind: "ngmodule", type: TextFieldModule }, { kind: "directive", type: i1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
353
359
  }
354
360
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LlmTextarea, decorators: [{
355
361
  type: Component,
356
362
  args: [{ selector: 'llm-textarea', standalone: true, imports: [TextFieldModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
357
- <textarea
358
- [value]="value()"
359
- (input)="onInput($event)"
360
- (blur)="touched.set(true)"
361
- [disabled]="disabled()"
362
- [readOnly]="readonly()"
363
- [placeholder]="placeholder()"
364
- [rows]="rows()"
365
- [attr.name]="name() || null"
366
- [attr.aria-invalid]="invalid() || null"
367
- [attr.aria-required]="required() || null"
368
- [attr.aria-describedby]="showErrors() ? errorId : null"
369
- [cdkTextareaAutosize]="autoResize()"
370
- [cdkAutosizeMinRows]="rows()"
371
- ></textarea>
363
+ <div class="textarea-field">
364
+ <textarea
365
+ [value]="value()"
366
+ (input)="onInput($event)"
367
+ (blur)="touched.set(true)"
368
+ [disabled]="disabled()"
369
+ [readOnly]="readonly()"
370
+ [placeholder]="placeholder()"
371
+ [rows]="rows()"
372
+ [attr.name]="name() || null"
373
+ [attr.aria-invalid]="invalid() || null"
374
+ [attr.aria-required]="required() || null"
375
+ [attr.aria-describedby]="showErrors() ? errorId : null"
376
+ [cdkTextareaAutosize]="autoResize()"
377
+ [cdkAutosizeMinRows]="rows()"
378
+ ></textarea>
379
+ </div>
372
380
  @if (showErrors()) {
373
381
  <div class="errors" [id]="errorId" aria-live="polite">
374
382
  @for (error of errors(); track error.kind) {
@@ -378,7 +386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
378
386
  }
379
387
  `, host: {
380
388
  '[class]': 'hostClasses()',
381
- }, styles: [":host{display:block;font-family:var(--ui-font-family);font-size:var(--ui-font-size-md)}textarea{display:block;width:100%;padding:.625rem var(--ui-spacing-3);font-size:inherit;font-family:inherit;line-height:var(--ui-line-height-normal);color:var(--ui-color-text);background-color:var(--ui-color-input-bg);border:1px solid var(--ui-color-input-border);border-radius:var(--ui-radius-md);box-shadow:inset 0 1px 2px #0000000a;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast),background-color var(--ui-transition-fast);outline:none;box-sizing:border-box;resize:vertical;min-height:80px}textarea::placeholder{color:var(--ui-color-placeholder)}textarea:hover:not(:disabled):not(:read-only){border-color:var(--ui-color-input-border-hover)}textarea:focus{border-color:var(--ui-color-input-border-focus);background-color:var(--ui-color-input-bg-focus);box-shadow:var(--ui-focus-ring)}:host(.is-invalid) textarea{border-color:var(--ui-color-input-border-invalid)}:host(.is-invalid) textarea:focus{border-color:var(--ui-color-input-border-invalid);box-shadow:0 0 0 2px var(--ui-color-surface),0 0 0 4px var(--ui-color-danger)}:host(.is-disabled){opacity:var(--ui-opacity-disabled);cursor:not-allowed}:host(.is-disabled) textarea{cursor:not-allowed}:host(.is-readonly) textarea{background-color:var(--ui-color-surface-sunken);cursor:default;box-shadow:none}:host(.is-auto-resize) textarea{resize:none;overflow:hidden}.errors{margin-top:var(--ui-spacing-1)}.error-message{margin:0;font-size:var(--ui-font-size-sm);color:var(--ui-color-error-text);line-height:var(--ui-line-height-normal)}\n"] }]
389
+ }, styles: [":host{display:block;font-family:var(--ui-font-family);font-size:var(--ui-font-size-md)}textarea{display:block;width:100%;padding:.625rem var(--ui-spacing-3);font-size:inherit;font-family:inherit;line-height:var(--ui-line-height-normal);color:var(--ui-color-text);background-color:var(--ui-color-input-bg);border:1px solid var(--ui-color-input-border);border-radius:var(--ui-radius-md);box-shadow:inset 0 1px 2px #0000000a;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast),background-color var(--ui-transition-fast);outline:none;box-sizing:border-box;resize:vertical;min-height:80px}textarea::placeholder{color:var(--ui-color-placeholder)}textarea:hover:not(:disabled):not(:read-only){border-color:var(--ui-color-input-border-hover)}textarea:focus{border-color:var(--ui-color-input-border-focus);background-color:var(--ui-color-input-bg-focus);box-shadow:var(--ui-focus-ring)}.textarea-field{position:relative}:host(.is-invalid) textarea{border-color:var(--ui-color-input-border-invalid);padding-right:2rem}:host(.is-invalid) textarea:focus{border-color:var(--ui-color-input-border-invalid);box-shadow:0 0 0 2px var(--ui-color-surface),0 0 0 4px var(--ui-color-danger)}:host(.is-invalid) .textarea-field:before{content:\"\\2715\";position:absolute;top:.625rem;right:.75rem;color:var(--ui-color-danger);font-weight:700;line-height:1;pointer-events:none}:host(.is-disabled){opacity:var(--ui-opacity-disabled);cursor:not-allowed}:host(.is-disabled) textarea{cursor:not-allowed}:host(.is-readonly) textarea{background-color:var(--ui-color-surface-sunken);cursor:default;box-shadow:none}:host(.is-auto-resize) textarea{resize:none;overflow:hidden}.errors{margin-top:var(--ui-spacing-1)}.error-message{margin:0;font-size:var(--ui-font-size-sm);color:var(--ui-color-error-text);line-height:var(--ui-line-height-normal)}\n"] }]
382
390
  }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }] } });
383
391
 
384
392
  let nextId$a = 0;