@compsych-ui-components/angular 7.0.11 → 7.0.12

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 (4) hide show
  1. package/esm2022/lib/text-input/text-input.js +92 -35
  2. package/esm2022/lib/text-input/text-input.js.map +1 -1
  3. package/lib/text-input/text-input.d.ts +17 -3
  4. package/package.json +1 -1
package/esm2022/lib/text-input/text-input.js CHANGED
@@ -1,5 +1,7 @@
1
1
  import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, booleanAttribute, inject, } from '@angular/core';
2
+ import { DomSanitizer } from '@angular/platform-browser';
2
3
  import { NgControl, Validators } from '@angular/forms';
4
+ import { LUCIDE_ICONS } from '@compsych-ui-components/shared/assets/lucide-icons.generated';
3
5
  import { ButtonComponent } from '../button/button';
4
6
  import * as i0 from "@angular/core";
5
7
  let nextId = 0;
@@ -14,6 +16,7 @@ let nextId = 0;
14
16
  export class TextInputComponent {
15
17
  _autoId = `cmp-text-input-${++nextId}`;
16
18
  cdr = inject(ChangeDetectorRef);
19
+ sanitizer = inject(DomSanitizer);
17
20
  _onChange = () => { };
18
21
  _onTouched = () => { };
19
22
  /** Injected when the component is used inside a reactive or template-driven form. */
@@ -97,10 +100,28 @@ export class TextInputComponent {
97
100
  disabled = false;
98
101
  /** Makes the input read-only — focusable and copyable but not editable. Value is still submitted with the form. Supports boolean coercion. */
99
102
  readonly = false;
103
+ /** Lucide icon name rendered inside the input before the text (e.g. `'search'`). */
104
+ leadingIcon;
105
+ /** Lucide icon name rendered inside the input after the text (e.g. `'eye'`). */
106
+ trailingIcon;
107
+ /** Accessible label for the trailing icon button. Required when `trailingIconClick` is used. */
108
+ trailingIconAriaLabel = '';
109
+ leadingIconSvg = null;
110
+ trailingIconSvg = null;
111
+ ngOnChanges() {
112
+ this.leadingIconSvg = this.leadingIcon ? this.buildIconSvg(this.leadingIcon) : null;
113
+ this.trailingIconSvg = this.trailingIcon ? this.buildIconSvg(this.trailingIcon) : null;
114
+ }
115
+ buildIconSvg(name) {
116
+ const svg = (LUCIDE_ICONS[name] ?? '').replace('<svg ', '<svg width="20" height="20" ');
117
+ return this.sanitizer.bypassSecurityTrustHtml(svg);
118
+ }
100
119
  /** Emits the new string value whenever the user types. For use outside Angular forms; inside forms use the `FormControl` value stream. */
101
120
  valueChange = new EventEmitter();
102
121
  /** Emits the label button's `id` when it is clicked. */
103
122
  labelButtonClick = new EventEmitter();
123
+ /** Emitted when the trailing icon button is clicked. When observed, the trailing icon renders as an interactive button. */
124
+ trailingIconClick = new EventEmitter();
104
125
  get inputId() {
105
126
  return this.id ?? this._autoId;
106
127
  }
@@ -175,7 +196,7 @@ export class TextInputComponent {
175
196
  }
176
197
  }
177
198
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
178
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TextInputComponent, isStandalone: true, selector: "compsych-text-input", inputs: { label: "label", placeholder: "placeholder", value: "value", type: "type", size: "size", name: "name", id: "id", ariaDescribedBy: "ariaDescribedBy", supportingText: "supportingText", errorMessage: "errorMessage", errorMessages: "errorMessages", labelButton: "labelButton", required: ["required", "required", booleanAttribute], error: ["error", "error", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute] }, outputs: { valueChange: "valueChange", labelButtonClick: "labelButtonClick" }, ngImport: i0, template: `
199
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TextInputComponent, isStandalone: true, selector: "compsych-text-input", inputs: { label: "label", placeholder: "placeholder", value: "value", type: "type", size: "size", name: "name", id: "id", ariaDescribedBy: "ariaDescribedBy", supportingText: "supportingText", errorMessage: "errorMessage", errorMessages: "errorMessages", labelButton: "labelButton", required: ["required", "required", booleanAttribute], error: ["error", "error", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], leadingIcon: "leadingIcon", trailingIcon: "trailingIcon", trailingIconAriaLabel: "trailingIconAriaLabel" }, outputs: { valueChange: "valueChange", labelButtonClick: "labelButtonClick", trailingIconClick: "trailingIconClick" }, usesOnChanges: true, ngImport: i0, template: `
179
200
  <div [class]="wrapperClasses">
180
201
  <div class="label-row">
181
202
  <label class="label" [for]="inputId">
@@ -197,29 +218,43 @@ export class TextInputComponent {
197
218
  />
198
219
  }
199
220
  </div>
200
- <input
201
- class="input"
202
- [id]="inputId"
203
- [name]="name || inputId"
204
- [type]="type"
205
- [placeholder]="placeholder"
206
- [value]="value"
207
- [disabled]="disabled"
208
- [readOnly]="readonly"
209
- [attr.required]="isRequired ? '' : null"
210
- [class.error]="hasError"
211
- [attr.aria-invalid]="hasError ? 'true' : null"
212
- [attr.aria-describedby]="describedBy"
213
- (input)="onInput($event)"
214
- (blur)="onBlur()"
215
- />
221
+ <div class="input-wrapper">
222
+ @if (leadingIconSvg) {
223
+ <span class="input-icon input-icon--leading" aria-hidden="true" [innerHTML]="leadingIconSvg"></span>
224
+ }
225
+ <input
226
+ class="input"
227
+ [class.has-leading-icon]="leadingIcon"
228
+ [class.has-trailing-icon]="trailingIcon"
229
+ [id]="inputId"
230
+ [name]="name || inputId"
231
+ [type]="type"
232
+ [placeholder]="placeholder"
233
+ [value]="value"
234
+ [disabled]="disabled"
235
+ [readOnly]="readonly"
236
+ [attr.required]="isRequired ? '' : null"
237
+ [class.error]="hasError"
238
+ [attr.aria-invalid]="hasError ? 'true' : null"
239
+ [attr.aria-describedby]="describedBy"
240
+ (input)="onInput($event)"
241
+ (blur)="onBlur()"
242
+ />
243
+ @if (trailingIconSvg) {
244
+ @if (trailingIconClick.observed) {
245
+ <button class="input-icon input-icon--trailing input-icon--btn" type="button" [disabled]="disabled" [attr.aria-label]="trailingIconAriaLabel || null" [innerHTML]="trailingIconSvg" (click)="trailingIconClick.emit()"></button>
246
+ } @else {
247
+ <span class="input-icon input-icon--trailing" aria-hidden="true" [innerHTML]="trailingIconSvg"></span>
248
+ }
249
+ }
250
+ </div>
216
251
  @if (displayedSupportingText) {
217
252
  <span class="supporting-text" [class.supporting-text--error]="hasError" [id]="inputId + '-supporting'">
218
253
  {{ displayedSupportingText }}
219
254
  </span>
220
255
  }
221
256
  </div>
222
- `, isInline: true, styles: [":host{display:block}.cmp-text-field{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4)}.label-row{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-padding-sys-padding-8)}.label{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);font-weight:var(--body-small-sys-font-weight);line-height:var(--body-small-sys-line-height);color:var(--surface-surface-sys-on-surface)}.required-marker{color:var(--accent-primary-sys-primary)}.cmp-text-field.disabled .label{opacity:.48}.input{box-sizing:border-box;width:100%;margin:0;border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);border-radius:var(--border-radius-sys-radius-sm);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);font-weight:var(--body-medium-sys-font-weight);line-height:var(--body-medium-sys-line-height);appearance:none;-webkit-appearance:none;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.input::placeholder{color:var(--surface-surface-sys-on-surface-variant)}.input:hover:not(:disabled):not(:focus){border-color:var(--outline-sys-outline-variant);box-shadow:0 4px 16px var(--transparent-neutral-sys-black-10),0 2px 4px #00000014}.input:focus{border-color:var(--accent-primary-sys-primary);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 4px var(--transparent-primary-sys-primary-08)}.input.error:not(:disabled):not(:focus){border-color:var(--error-sys-error)}.input.error:focus{border-color:var(--error-sys-error);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 4px var(--transparent-primary-sys-primary-08)}.input:disabled{background-color:var(--surface-surface-container-sys-surface-container-highest);color:var(--surface-surface-sys-on-surface-variant);border-color:var(--outline-sys-outline);cursor:not-allowed;opacity:.48}.supporting-text{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);font-weight:var(--body-small-sys-font-weight);line-height:var(--body-small-sys-line-height);color:var(--surface-surface-sys-on-surface-variant)}.supporting-text--error{color:var(--error-sys-error)}.cmp-text-field.disabled .supporting-text{opacity:.48}.cmp-text-field.small .input{height:44px;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-12);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height)}.cmp-text-field.medium .input{height:52px;padding:var(--spacing-padding-sys-padding-12) var(--spacing-padding-sys-padding-16);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height)}.cmp-text-field.large .input{height:64px;padding:var(--spacing-padding-sys-padding-20) var(--spacing-padding-sys-padding-16);font-size:var(--body-large-sys-font-size);line-height:var(--body-large-sys-line-height)}@media(forced-colors:active){.input{border:1px solid ButtonText;forced-color-adjust:none}.input:focus{outline:2px solid Highlight;outline-offset:2px}.input:disabled{color:GrayText;border-color:GrayText;background:ButtonFace;opacity:1}.cmp-text-field.disabled .label{color:GrayText;opacity:1}.supporting-text--error{color:LinkText}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "compsych-button", inputs: ["label", "variant", "size", "leadingIcon", "trailingIcon", "type", "ariaLabel", "iconOnly", "disabled", "loading", "fullWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
257
+ `, isInline: true, styles: [":host{display:block}.cmp-text-field{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4)}.label-row{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-padding-sys-padding-8)}.label{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);font-weight:var(--body-small-sys-font-weight);line-height:var(--body-small-sys-line-height);color:var(--surface-surface-sys-on-surface)}.required-marker{color:var(--accent-primary-sys-primary)}.cmp-text-field.disabled .label{opacity:.48}.input-wrapper{position:relative}.input-icon{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none;color:var(--surface-surface-sys-on-surface-variant)}.input-icon--leading{left:var(--spacing-padding-sys-padding-12)}.input-icon--trailing{right:var(--spacing-padding-sys-padding-12)}.cmp-text-field.medium .input-icon--leading,.cmp-text-field.large .input-icon--leading{left:var(--spacing-padding-sys-padding-16)}.cmp-text-field.medium .input-icon--trailing,.cmp-text-field.large .input-icon--trailing{right:var(--spacing-padding-sys-padding-16)}.input-icon--btn{background:none;border:none;margin:0;padding:0;cursor:pointer;pointer-events:auto;border-radius:var(--border-radius-sys-radius-xs, 2px)}.input-icon--btn:focus-visible{outline:2px solid var(--accent-primary-sys-primary);outline-offset:2px}.input-icon--btn:disabled{cursor:not-allowed}.cmp-text-field.disabled .input-icon{opacity:.48}.input{box-sizing:border-box;width:100%;margin:0;border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);border-radius:var(--border-radius-sys-radius-sm);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);font-weight:var(--body-medium-sys-font-weight);line-height:var(--body-medium-sys-line-height);appearance:none;-webkit-appearance:none;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.input::placeholder{color:var(--surface-surface-sys-on-surface-variant)}.input:hover:not(:disabled):not(:focus){border-color:var(--outline-sys-outline-variant);box-shadow:0 4px 16px var(--transparent-neutral-sys-black-10),0 2px 4px #00000014}.input:focus{border-color:var(--accent-primary-sys-primary);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 4px var(--transparent-primary-sys-primary-08)}.input.error:not(:disabled):not(:focus){border-color:var(--error-sys-error)}.input.error:focus{border-color:var(--error-sys-error);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 4px var(--transparent-primary-sys-primary-08)}.input:disabled{background-color:var(--surface-surface-container-sys-surface-container-highest);color:var(--surface-surface-sys-on-surface-variant);border-color:var(--outline-sys-outline);cursor:not-allowed;opacity:.48}.supporting-text{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);font-weight:var(--body-small-sys-font-weight);line-height:var(--body-small-sys-line-height);color:var(--surface-surface-sys-on-surface-variant)}.supporting-text--error{color:var(--error-sys-error)}.cmp-text-field.disabled .supporting-text{opacity:.48}.cmp-text-field.small .input{height:44px;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-12);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height)}.cmp-text-field.medium .input{height:52px;padding:var(--spacing-padding-sys-padding-12) var(--spacing-padding-sys-padding-16);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height)}.cmp-text-field.large .input{height:64px;padding:var(--spacing-padding-sys-padding-20) var(--spacing-padding-sys-padding-16);font-size:var(--body-large-sys-font-size);line-height:var(--body-large-sys-line-height)}.cmp-text-field.small .input.has-leading-icon{padding-left:calc(var(--spacing-padding-sys-padding-12) + 28px)}.cmp-text-field.small .input.has-trailing-icon{padding-right:calc(var(--spacing-padding-sys-padding-12) + 28px)}.cmp-text-field.medium .input.has-leading-icon,.cmp-text-field.large .input.has-leading-icon{padding-left:calc(var(--spacing-padding-sys-padding-16) + 28px)}.cmp-text-field.medium .input.has-trailing-icon,.cmp-text-field.large .input.has-trailing-icon{padding-right:calc(var(--spacing-padding-sys-padding-16) + 28px)}@media(forced-colors:active){.input{border:1px solid ButtonText;forced-color-adjust:none}.input:focus{outline:2px solid Highlight;outline-offset:2px}.input:disabled{color:GrayText;border-color:GrayText;background:ButtonFace;opacity:1}.cmp-text-field.disabled .label{color:GrayText;opacity:1}.supporting-text--error{color:LinkText}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "compsych-button", inputs: ["label", "variant", "size", "leadingIcon", "trailingIcon", "type", "ariaLabel", "iconOnly", "disabled", "loading", "fullWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
223
258
  }
224
259
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
225
260
  type: Component,
@@ -245,29 +280,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
245
280
  />
246
281
  }
247
282
  </div>
248
- <input
249
- class="input"
250
- [id]="inputId"
251
- [name]="name || inputId"
252
- [type]="type"
253
- [placeholder]="placeholder"
254
- [value]="value"
255
- [disabled]="disabled"
256
- [readOnly]="readonly"
257
- [attr.required]="isRequired ? '' : null"
258
- [class.error]="hasError"
259
- [attr.aria-invalid]="hasError ? 'true' : null"
260
- [attr.aria-describedby]="describedBy"
261
- (input)="onInput($event)"
262
- (blur)="onBlur()"
263
- />
283
+ <div class="input-wrapper">
284
+ @if (leadingIconSvg) {
285
+ <span class="input-icon input-icon--leading" aria-hidden="true" [innerHTML]="leadingIconSvg"></span>
286
+ }
287
+ <input
288
+ class="input"
289
+ [class.has-leading-icon]="leadingIcon"
290
+ [class.has-trailing-icon]="trailingIcon"
291
+ [id]="inputId"
292
+ [name]="name || inputId"
293
+ [type]="type"
294
+ [placeholder]="placeholder"
295
+ [value]="value"
296
+ [disabled]="disabled"
297
+ [readOnly]="readonly"
298
+ [attr.required]="isRequired ? '' : null"
299
+ [class.error]="hasError"
300
+ [attr.aria-invalid]="hasError ? 'true' : null"
301
+ [attr.aria-describedby]="describedBy"
302
+ (input)="onInput($event)"
303
+ (blur)="onBlur()"
304
+ />
305
+ @if (trailingIconSvg) {
306
+ @if (trailingIconClick.observed) {
307
+ <button class="input-icon input-icon--trailing input-icon--btn" type="button" [disabled]="disabled" [attr.aria-label]="trailingIconAriaLabel || null" [innerHTML]="trailingIconSvg" (click)="trailingIconClick.emit()"></button>
308
+ } @else {
309
+ <span class="input-icon input-icon--trailing" aria-hidden="true" [innerHTML]="trailingIconSvg"></span>
310
+ }
311
+ }
312
+ </div>
264
313
  @if (displayedSupportingText) {
265
314
  <span class="supporting-text" [class.supporting-text--error]="hasError" [id]="inputId + '-supporting'">
266
315
  {{ displayedSupportingText }}
267
316
  </span>
268
317
  }
269
318
  </div>
270
- `, styles: [":host{display:block}.cmp-text-field{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4)}.label-row{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-padding-sys-padding-8)}.label{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);font-weight:var(--body-small-sys-font-weight);line-height:var(--body-small-sys-line-height);color:var(--surface-surface-sys-on-surface)}.required-marker{color:var(--accent-primary-sys-primary)}.cmp-text-field.disabled .label{opacity:.48}.input{box-sizing:border-box;width:100%;margin:0;border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);border-radius:var(--border-radius-sys-radius-sm);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);font-weight:var(--body-medium-sys-font-weight);line-height:var(--body-medium-sys-line-height);appearance:none;-webkit-appearance:none;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.input::placeholder{color:var(--surface-surface-sys-on-surface-variant)}.input:hover:not(:disabled):not(:focus){border-color:var(--outline-sys-outline-variant);box-shadow:0 4px 16px var(--transparent-neutral-sys-black-10),0 2px 4px #00000014}.input:focus{border-color:var(--accent-primary-sys-primary);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 4px var(--transparent-primary-sys-primary-08)}.input.error:not(:disabled):not(:focus){border-color:var(--error-sys-error)}.input.error:focus{border-color:var(--error-sys-error);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 4px var(--transparent-primary-sys-primary-08)}.input:disabled{background-color:var(--surface-surface-container-sys-surface-container-highest);color:var(--surface-surface-sys-on-surface-variant);border-color:var(--outline-sys-outline);cursor:not-allowed;opacity:.48}.supporting-text{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);font-weight:var(--body-small-sys-font-weight);line-height:var(--body-small-sys-line-height);color:var(--surface-surface-sys-on-surface-variant)}.supporting-text--error{color:var(--error-sys-error)}.cmp-text-field.disabled .supporting-text{opacity:.48}.cmp-text-field.small .input{height:44px;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-12);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height)}.cmp-text-field.medium .input{height:52px;padding:var(--spacing-padding-sys-padding-12) var(--spacing-padding-sys-padding-16);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height)}.cmp-text-field.large .input{height:64px;padding:var(--spacing-padding-sys-padding-20) var(--spacing-padding-sys-padding-16);font-size:var(--body-large-sys-font-size);line-height:var(--body-large-sys-line-height)}@media(forced-colors:active){.input{border:1px solid ButtonText;forced-color-adjust:none}.input:focus{outline:2px solid Highlight;outline-offset:2px}.input:disabled{color:GrayText;border-color:GrayText;background:ButtonFace;opacity:1}.cmp-text-field.disabled .label{color:GrayText;opacity:1}.supporting-text--error{color:LinkText}}\n"] }]
319
+ `, styles: [":host{display:block}.cmp-text-field{display:flex;flex-direction:column;gap:var(--spacing-padding-sys-padding-4)}.label-row{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-padding-sys-padding-8)}.label{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);font-weight:var(--body-small-sys-font-weight);line-height:var(--body-small-sys-line-height);color:var(--surface-surface-sys-on-surface)}.required-marker{color:var(--accent-primary-sys-primary)}.cmp-text-field.disabled .label{opacity:.48}.input-wrapper{position:relative}.input-icon{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none;color:var(--surface-surface-sys-on-surface-variant)}.input-icon--leading{left:var(--spacing-padding-sys-padding-12)}.input-icon--trailing{right:var(--spacing-padding-sys-padding-12)}.cmp-text-field.medium .input-icon--leading,.cmp-text-field.large .input-icon--leading{left:var(--spacing-padding-sys-padding-16)}.cmp-text-field.medium .input-icon--trailing,.cmp-text-field.large .input-icon--trailing{right:var(--spacing-padding-sys-padding-16)}.input-icon--btn{background:none;border:none;margin:0;padding:0;cursor:pointer;pointer-events:auto;border-radius:var(--border-radius-sys-radius-xs, 2px)}.input-icon--btn:focus-visible{outline:2px solid var(--accent-primary-sys-primary);outline-offset:2px}.input-icon--btn:disabled{cursor:not-allowed}.cmp-text-field.disabled .input-icon{opacity:.48}.input{box-sizing:border-box;width:100%;margin:0;border:var(--border-width-sys-stroke-thin) solid var(--outline-sys-outline);border-radius:var(--border-radius-sys-radius-sm);background-color:var(--surface-surface-container-sys-surface-container-lowest);color:var(--surface-surface-sys-on-surface);font-family:var(--body-medium-sys-font-family);font-size:var(--body-medium-sys-font-size);font-weight:var(--body-medium-sys-font-weight);line-height:var(--body-medium-sys-line-height);appearance:none;-webkit-appearance:none;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.input::placeholder{color:var(--surface-surface-sys-on-surface-variant)}.input:hover:not(:disabled):not(:focus){border-color:var(--outline-sys-outline-variant);box-shadow:0 4px 16px var(--transparent-neutral-sys-black-10),0 2px 4px #00000014}.input:focus{border-color:var(--accent-primary-sys-primary);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 4px var(--transparent-primary-sys-primary-08)}.input.error:not(:disabled):not(:focus){border-color:var(--error-sys-error)}.input.error:focus{border-color:var(--error-sys-error);border-width:var(--border-width-sys-stroke-medium);box-shadow:0 0 0 4px var(--transparent-primary-sys-primary-08)}.input:disabled{background-color:var(--surface-surface-container-sys-surface-container-highest);color:var(--surface-surface-sys-on-surface-variant);border-color:var(--outline-sys-outline);cursor:not-allowed;opacity:.48}.supporting-text{font-family:var(--body-small-sys-font-family);font-size:var(--body-small-sys-font-size);font-weight:var(--body-small-sys-font-weight);line-height:var(--body-small-sys-line-height);color:var(--surface-surface-sys-on-surface-variant)}.supporting-text--error{color:var(--error-sys-error)}.cmp-text-field.disabled .supporting-text{opacity:.48}.cmp-text-field.small .input{height:44px;padding:var(--spacing-padding-sys-padding-8) var(--spacing-padding-sys-padding-12);font-size:var(--body-small-sys-font-size);line-height:var(--body-small-sys-line-height)}.cmp-text-field.medium .input{height:52px;padding:var(--spacing-padding-sys-padding-12) var(--spacing-padding-sys-padding-16);font-size:var(--body-medium-sys-font-size);line-height:var(--body-medium-sys-line-height)}.cmp-text-field.large .input{height:64px;padding:var(--spacing-padding-sys-padding-20) var(--spacing-padding-sys-padding-16);font-size:var(--body-large-sys-font-size);line-height:var(--body-large-sys-line-height)}.cmp-text-field.small .input.has-leading-icon{padding-left:calc(var(--spacing-padding-sys-padding-12) + 28px)}.cmp-text-field.small .input.has-trailing-icon{padding-right:calc(var(--spacing-padding-sys-padding-12) + 28px)}.cmp-text-field.medium .input.has-leading-icon,.cmp-text-field.large .input.has-leading-icon{padding-left:calc(var(--spacing-padding-sys-padding-16) + 28px)}.cmp-text-field.medium .input.has-trailing-icon,.cmp-text-field.large .input.has-trailing-icon{padding-right:calc(var(--spacing-padding-sys-padding-16) + 28px)}@media(forced-colors:active){.input{border:1px solid ButtonText;forced-color-adjust:none}.input:focus{outline:2px solid Highlight;outline-offset:2px}.input:disabled{color:GrayText;border-color:GrayText;background:ButtonFace;opacity:1}.cmp-text-field.disabled .label{color:GrayText;opacity:1}.supporting-text--error{color:LinkText}}\n"] }]
271
320
  }], ctorParameters: () => [], propDecorators: { label: [{
272
321
  type: Input
273
322
  }], placeholder: [{
@@ -304,9 +353,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
304
353
  }], readonly: [{
305
354
  type: Input,
306
355
  args: [{ transform: booleanAttribute }]
356
+ }], leadingIcon: [{
357
+ type: Input
358
+ }], trailingIcon: [{
359
+ type: Input
360
+ }], trailingIconAriaLabel: [{
361
+ type: Input
307
362
  }], valueChange: [{
308
363
  type: Output
309
364
  }], labelButtonClick: [{
310
365
  type: Output
366
+ }], trailingIconClick: [{
367
+ type: Output
311
368
  }] } });
312
369
  //# sourceMappingURL=text-input.js.map
package/esm2022/lib/text-input/text-input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/text-input/text-input.ts"],"names":[],"mappings":"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","sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n EventEmitter,\r\n Input,\r\n Output,\r\n booleanAttribute,\r\n inject,\r\n} from '@angular/core';\r\nimport { ControlValueAccessor, NgControl, Validators } from '@angular/forms';\r\nimport { ButtonComponent, ButtonVariant } from '../button/button';\r\n\r\n/** Size variant of a `compsych-text-input`. Controls input height, padding, and font size. */\r\nexport type TextInputSize = 'small' | 'medium' | 'large';\r\n\r\n/** Native input type. */\r\nexport type TextInputType = 'text' | 'password';\r\n\r\n/** Configuration for the optional button rendered at the right of the label row. */\r\nexport interface TextInputLabelButton {\r\n /** Stable identifier emitted by `labelButtonClick` when clicked. */\r\n id: string;\r\n /** Text displayed on the button. */\r\n label: string;\r\n /** Visual style of the button. Defaults to `'text'`. */\r\n variant?: ButtonVariant;\r\n /** Lucide icon name shown before the label. */\r\n leadingIcon?: string;\r\n /** Lucide icon name shown after the label. */\r\n trailingIcon?: string;\r\n /** Hides the label and renders a square icon-only button. Requires `leadingIcon`. */\r\n iconOnly?: boolean;\r\n}\r\n\r\nlet nextId = 0;\r\n\r\n/**\r\n * A labelled text input that wraps a native `<input>` element.\r\n * Implements `ControlValueAccessor` so it works with both reactive forms\r\n * (`formControlName`, `[formControl]`) and template-driven forms (`ngModel`).\r\n * The error visual state is driven automatically by the bound `FormControl`'s\r\n * validity once the field has been touched, and can also be set explicitly via\r\n * the `error` input for use outside of Angular forms.\r\n */\r\n@Component({\r\n selector: 'compsych-text-input',\r\n standalone: true,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [ButtonComponent],\r\n template: `\r\n <div [class]=\"wrapperClasses\">\r\n <div class=\"label-row\">\r\n <label class=\"label\" [for]=\"inputId\">\r\n {{ label }}\r\n @if (isRequired) {\r\n <span class=\"required-marker\" aria-hidden=\"true\"> *</span>\r\n }\r\n </label>\r\n @if (parsedLabelButton) {\r\n <compsych-button\r\n [label]=\"parsedLabelButton.label\"\r\n [variant]=\"parsedLabelButton.variant ?? 'text'\"\r\n size=\"small\"\r\n [leadingIcon]=\"parsedLabelButton.leadingIcon\"\r\n [trailingIcon]=\"parsedLabelButton.trailingIcon\"\r\n [iconOnly]=\"!!parsedLabelButton.iconOnly\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onLabelButtonClick()\"\r\n />\r\n }\r\n </div>\r\n <input\r\n class=\"input\"\r\n [id]=\"inputId\"\r\n [name]=\"name || inputId\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"value\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"readonly\"\r\n [attr.required]=\"isRequired ? '' : null\"\r\n [class.error]=\"hasError\"\r\n [attr.aria-invalid]=\"hasError ? 'true' : null\"\r\n [attr.aria-describedby]=\"describedBy\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n @if (displayedSupportingText) {\r\n <span class=\"supporting-text\" [class.supporting-text--error]=\"hasError\" [id]=\"inputId + '-supporting'\">\r\n {{ displayedSupportingText }}\r\n </span>\r\n }\r\n </div>\r\n `,\r\n styleUrl: './text-input.css',\r\n})\r\nexport class TextInputComponent implements ControlValueAccessor {\r\n private readonly _autoId = `cmp-text-input-${++nextId}`;\r\n private readonly cdr = inject(ChangeDetectorRef);\r\n private _onChange: (value: string) => void = () => {};\r\n private _onTouched: () => void = () => {};\r\n\r\n /** Injected when the component is used inside a reactive or template-driven form. */\r\n protected readonly ngControl: NgControl | null;\r\n\r\n constructor() {\r\n const ctrl = inject(NgControl, { optional: true, self: true });\r\n if (ctrl) ctrl.valueAccessor = this;\r\n this.ngControl = ctrl;\r\n }\r\n\r\n /** Label displayed above the input. */\r\n @Input() label = '';\r\n /** Placeholder text shown inside the input when empty. */\r\n @Input() placeholder = '';\r\n /** Current value of the input. When used in a form, the form controls the value. */\r\n @Input() value = '';\r\n /** Native input type. Defaults to `'text'`. Use `'password'` to mask the value. */\r\n @Input() type: TextInputType = 'text';\r\n /** Size variant — controls height, padding, and font size. Defaults to `'medium'`. */\r\n @Input() size: TextInputSize = 'medium';\r\n /** Native `name` attribute forwarded to the `<input>`. Defaults to the auto-generated id. */\r\n @Input() name?: string;\r\n /** Native `id` attribute for the `<input>`. Auto-generated if omitted. */\r\n @Input() id?: string;\r\n /**\r\n * Id(s) of external elements that describe the input, space-separated.\r\n * Forwarded to `aria-describedby` on the native `<input>`.\r\n */\r\n @Input() ariaDescribedBy?: string;\r\n /** Text displayed below the input. Shown in red when the input is in error state. */\r\n @Input() supportingText = '';\r\n /**\r\n * Static error text shown in red when the input is in error state.\r\n * Used when the input is outside a form (with `[error]=\"true\"`).\r\n * When inside a form, prefer `errorMessages` for per-validator messages.\r\n */\r\n @Input() errorMessage = '';\r\n /**\r\n * Map of Angular validator error keys to display strings.\r\n * The component reads `ngControl.errors` to determine which validator failed\r\n * and shows the matching message in red below the input.\r\n * Example: `{ required: 'Username is required', minlength: 'Min 8 characters' }`\r\n */\r\n @Input() errorMessages: Record<string, string> = {};\r\n\r\n private _labelButton: TextInputLabelButton | null = null;\r\n\r\n /**\r\n * JSON string configuring the optional button at the right of the label row.\r\n * Hidden when empty or omitted. Example: `'{\"id\":\"show\",\"label\":\"Show\"}'`\r\n * Clicking emits the button's `id` via the `labelButtonClick` output.\r\n */\r\n @Input() set labelButton(json: string) {\r\n if (!json) { this._labelButton = null; return; }\r\n try {\r\n this._labelButton = JSON.parse(json) as TextInputLabelButton;\r\n } catch {\r\n this._labelButton = null;\r\n }\r\n }\r\n\r\n /** @internal Template access to the parsed label button config. */\r\n protected get parsedLabelButton(): TextInputLabelButton | null {\r\n return this._labelButton;\r\n }\r\n\r\n /**\r\n * Adds a blue asterisk after the label. When used in a form, this is set\r\n * automatically if the bound `FormControl` has `Validators.required`.\r\n * Can also be set explicitly for non-form use. Supports boolean coercion.\r\n */\r\n @Input({ transform: booleanAttribute }) required = false;\r\n /**\r\n * Applies the error visual state (red border) explicitly. When used in a form,\r\n * the error state is driven automatically from the `FormControl`'s validity once\r\n * the field is touched — this input is only needed outside of forms.\r\n * Supports boolean coercion.\r\n */\r\n @Input({ transform: booleanAttribute }) error = false;\r\n /** Disables the input. When used in a form, also responds to `FormControl.disable()`. Supports boolean coercion. */\r\n @Input({ transform: booleanAttribute }) disabled = false;\r\n /** Makes the input read-only — focusable and copyable but not editable. Value is still submitted with the form. Supports boolean coercion. */\r\n @Input({ transform: booleanAttribute }) readonly = false;\r\n\r\n /** Emits the new string value whenever the user types. For use outside Angular forms; inside forms use the `FormControl` value stream. */\r\n @Output() readonly valueChange = new EventEmitter<string>();\r\n /** Emits the label button's `id` when it is clicked. */\r\n @Output() readonly labelButtonClick = new EventEmitter<string>();\r\n\r\n get inputId(): string {\r\n return this.id ?? this._autoId;\r\n }\r\n\r\n /** True when the bound FormControl is invalid and touched, or when `error` is explicitly set. */\r\n get hasError(): boolean {\r\n return this.error || !!(this.ngControl?.invalid && this.ngControl.touched);\r\n }\r\n\r\n /** True when `required` is set explicitly, or when the bound FormControl has Validators.required. */\r\n get isRequired(): boolean {\r\n return this.required || !!(this.ngControl?.control?.hasValidator(Validators.required));\r\n }\r\n\r\n private get activeErrorMessage(): string {\r\n const errors = this.ngControl?.errors;\r\n if (!errors) return '';\r\n for (const key of Object.keys(errors)) {\r\n if (this.errorMessages[key]) return this.errorMessages[key];\r\n }\r\n return '';\r\n }\r\n\r\n get displayedSupportingText(): string {\r\n if (this.hasError) {\r\n return this.activeErrorMessage || this.errorMessage || this.supportingText;\r\n }\r\n return this.supportingText;\r\n }\r\n\r\n get describedBy(): string | null {\r\n const parts: string[] = [];\r\n if (this.ariaDescribedBy) parts.push(this.ariaDescribedBy);\r\n if (this.supportingText || this.errorMessage || Object.keys(this.errorMessages).length) {\r\n parts.push(this.inputId + '-supporting');\r\n }\r\n return parts.length ? parts.join(' ') : null;\r\n }\r\n\r\n get wrapperClasses(): string {\r\n return ['cmp-text-field', this.size, this.disabled ? 'disabled' : '']\r\n .filter(Boolean)\r\n .join(' ');\r\n }\r\n\r\n // ── ControlValueAccessor ────────────────────────────────────────────────────\r\n\r\n writeValue(value: string | null): void {\r\n this.value = value ?? '';\r\n this.cdr.markForCheck();\r\n }\r\n\r\n registerOnChange(fn: (value: string) => void): void {\r\n this._onChange = fn;\r\n }\r\n\r\n registerOnTouched(fn: () => void): void {\r\n this._onTouched = fn;\r\n }\r\n\r\n /** Called by Angular when the bound FormControl is programmatically disabled or enabled. */\r\n setDisabledState(isDisabled: boolean): void {\r\n this.disabled = isDisabled;\r\n this.cdr.markForCheck();\r\n }\r\n\r\n // ── Event handlers ──────────────────────────────────────────────────────────\r\n\r\n protected onInput(event: Event): void {\r\n const value = (event.target as HTMLInputElement).value;\r\n this.value = value;\r\n this._onChange(value);\r\n this.valueChange.emit(value);\r\n }\r\n\r\n protected onBlur(): void {\r\n this._onTouched();\r\n this.cdr.markForCheck();\r\n }\r\n\r\n protected onLabelButtonClick(): void {\r\n if (this._labelButton) {\r\n this.labelButtonClick.emit(this._labelButton.id);\r\n }\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../../../../packages/angular/src/lib/text-input/text-input.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,KAAK,EAEL,MAAM,EACN,gBAAgB,EAChB,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,YAAY,EAAY,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAwB,SAAS,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAC;AAC5F,OAAO,EAAE,eAAe,EAAiB,MAAM,kBAAkB,CAAC;;AAwBlE,IAAI,MAAM,GAAG,CAAC,CAAC;AAEf;;;;;;;GAOG;AAmEH,MAAM,OAAO,kBAAkB;IACZ,OAAO,GAAG,kBAAkB,EAAE,MAAM,EAAE,CAAC;IACvC,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAChC,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC1C,SAAS,GAA4B,GAAG,EAAE,GAAE,CAAC,CAAC;IAC9C,UAAU,GAAe,GAAG,EAAE,GAAE,CAAC,CAAC;IAE1C,qFAAqF;IAClE,SAAS,CAAmB;IAE/C;QACE,MAAM,IAAI,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QAC/D,IAAI,IAAI;YAAE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QACpC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED,uCAAuC;IAC9B,KAAK,GAAG,EAAE,CAAC;IACpB,0DAA0D;IACjD,WAAW,GAAG,EAAE,CAAC;IAC1B,oFAAoF;IAC3E,KAAK,GAAG,EAAE,CAAC;IACpB,mFAAmF;IAC1E,IAAI,GAAkB,MAAM,CAAC;IACtC,sFAAsF;IAC7E,IAAI,GAAkB,QAAQ,CAAC;IACxC,6FAA6F;IACpF,IAAI,CAAU;IACvB,0EAA0E;IACjE,EAAE,CAAU;IACrB;;;OAGG;IACM,eAAe,CAAU;IAClC,qFAAqF;IAC5E,cAAc,GAAG,EAAE,CAAC;IAC7B;;;;OAIG;IACM,YAAY,GAAG,EAAE,CAAC;IAC3B;;;;;OAKG;IACM,aAAa,GAA2B,EAAE,CAAC;IAE5C,YAAY,GAAgC,IAAI,CAAC;IAEzD;;;;OAIG;IACH,IAAa,WAAW,CAAC,IAAY;QACnC,IAAI,CAAC,IAAI,EAAE,CAAC;YAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YAAC,OAAO;QAAC,CAAC;QAChD,IAAI,CAAC;YACH,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAyB,CAAC;QAC/D,CAAC;QAAC,MAAM,CAAC;YACP,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,mEAAmE;IACnE,IAAc,iBAAiB;QAC7B,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAED;;;;OAIG;IACqC,QAAQ,GAAG,KAAK,CAAC;IACzD;;;;;OAKG;IACqC,KAAK,GAAG,KAAK,CAAC;IACtD,oHAAoH;IAC5E,QAAQ,GAAG,KAAK,CAAC;IACzD,8IAA8I;IACtG,QAAQ,GAAG,KAAK,CAAC;IACzD,oFAAoF;IAC3E,WAAW,CAAU;IAC9B,gFAAgF;IACvE,YAAY,CAAU;IAC/B,gGAAgG;IACvF,qBAAqB,GAAG,EAAE,CAAC;IAE1B,cAAc,GAAoB,IAAI,CAAC;IACvC,eAAe,GAAoB,IAAI,CAAC;IAElD,WAAW;QACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACpF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACzF,CAAC;IAEO,YAAY,CAAC,IAAY;QAC/B,MAAM,GAAG,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,8BAA8B,CAAC,CAAC;QACxF,OAAO,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC;IACrD,CAAC;IAED,0IAA0I;IACvH,WAAW,GAAG,IAAI,YAAY,EAAU,CAAC;IAC5D,wDAAwD;IACrC,gBAAgB,GAAG,IAAI,YAAY,EAAU,CAAC;IACjE,2HAA2H;IACxG,iBAAiB,GAAG,IAAI,YAAY,EAAQ,CAAC;IAEhE,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,OAAO,CAAC;IACjC,CAAC;IAED,iGAAiG;IACjG,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAC7E,CAAC;IAED,qGAAqG;IACrG,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,YAAY,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC;IACzF,CAAC;IAED,IAAY,kBAAkB;QAC5B,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;QACtC,IAAI,CAAC,MAAM;YAAE,OAAO,EAAE,CAAC;QACvB,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;YACtC,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC;gBAAE,OAAO,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAC9D,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,uBAAuB;QACzB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,CAAC;QAC7E,CAAC;QACD,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAED,IAAI,WAAW;QACb,MAAM,KAAK,GAAa,EAAE,CAAC;QAC3B,IAAI,IAAI,CAAC,eAAe;YAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAC3D,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,YAAY,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,EAAE,CAAC;YACvF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC,CAAC;QAC3C,CAAC;QACD,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC/C,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;aAClE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,CAAC;IAED,+EAA+E;IAE/E,UAAU,CAAC,KAAoB;QAC7B,IAAI,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;QACzB,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;IAC1B,CAAC;IAED,gBAAgB,CAAC,EAA2B;QAC1C,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;IACtB,CAAC;IAED,iBAAiB,CAAC,EAAc;QAC9B,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;IACvB,CAAC;IAED,4FAA4F;IAC5F,gBAAgB,CAAC,UAAmB;QAClC,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;QAC3B,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;IAC1B,CAAC;IAED,+EAA+E;IAErE,OAAO,CAAC,KAAY;QAC5B,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;QACvD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAES,MAAM;QACd,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;IAC1B,CAAC;IAES,kBAAkB;QAC1B,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;wGAxMU,kBAAkB;4FAAlB,kBAAkB,oXA6ET,gBAAgB,6BAOhB,gBAAgB,sCAEhB,gBAAgB,sCAEhB,gBAAgB,mRArJ1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DT,60JA3DS,eAAe;;4FA8Dd,kBAAkB;kBAlE9B,SAAS;+BACE,qBAAqB,cACnB,IAAI,mBACC,uBAAuB,CAAC,MAAM,WACtC,CAAC,eAAe,CAAC,YAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DT;;sBAoBA,KAAK;;sBAEL,KAAK;;sBAEL,KAAK;;sBAEL,KAAK;;sBAEL,KAAK;;sBAEL,KAAK;;sBAEL,KAAK;;sBAKL,KAAK;;sBAEL,KAAK;;sBAML,KAAK;;sBAOL,KAAK;;sBASL,KAAK;;sBAmBL,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAOrC,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAErC,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAErC,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAErC,KAAK;;sBAEL,KAAK;;sBAEL,KAAK;;sBAgBL,MAAM;;sBAEN,MAAM;;sBAEN,MAAM","sourcesContent":["import {\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n EventEmitter,\r\n Input,\r\n OnChanges,\r\n Output,\r\n booleanAttribute,\r\n inject,\r\n} from '@angular/core';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\nimport { ControlValueAccessor, NgControl, Validators } from '@angular/forms';\r\nimport { LUCIDE_ICONS } from '@compsych-ui-components/shared/assets/lucide-icons.generated';\r\nimport { ButtonComponent, ButtonVariant } from '../button/button';\r\n\r\n/** Size variant of a `compsych-text-input`. Controls input height, padding, and font size. */\r\nexport type TextInputSize = 'small' | 'medium' | 'large';\r\n\r\n/** Native input type. */\r\nexport type TextInputType = 'text' | 'password';\r\n\r\n/** Configuration for the optional button rendered at the right of the label row. */\r\nexport interface TextInputLabelButton {\r\n /** Stable identifier emitted by `labelButtonClick` when clicked. */\r\n id: string;\r\n /** Text displayed on the button. */\r\n label: string;\r\n /** Visual style of the button. Defaults to `'text'`. */\r\n variant?: ButtonVariant;\r\n /** Lucide icon name shown before the label. */\r\n leadingIcon?: string;\r\n /** Lucide icon name shown after the label. */\r\n trailingIcon?: string;\r\n /** Hides the label and renders a square icon-only button. Requires `leadingIcon`. */\r\n iconOnly?: boolean;\r\n}\r\n\r\nlet nextId = 0;\r\n\r\n/**\r\n * A labelled text input that wraps a native `<input>` element.\r\n * Implements `ControlValueAccessor` so it works with both reactive forms\r\n * (`formControlName`, `[formControl]`) and template-driven forms (`ngModel`).\r\n * The error visual state is driven automatically by the bound `FormControl`'s\r\n * validity once the field has been touched, and can also be set explicitly via\r\n * the `error` input for use outside of Angular forms.\r\n */\r\n@Component({\r\n selector: 'compsych-text-input',\r\n standalone: true,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [ButtonComponent],\r\n template: `\r\n <div [class]=\"wrapperClasses\">\r\n <div class=\"label-row\">\r\n <label class=\"label\" [for]=\"inputId\">\r\n {{ label }}\r\n @if (isRequired) {\r\n <span class=\"required-marker\" aria-hidden=\"true\"> *</span>\r\n }\r\n </label>\r\n @if (parsedLabelButton) {\r\n <compsych-button\r\n [label]=\"parsedLabelButton.label\"\r\n [variant]=\"parsedLabelButton.variant ?? 'text'\"\r\n size=\"small\"\r\n [leadingIcon]=\"parsedLabelButton.leadingIcon\"\r\n [trailingIcon]=\"parsedLabelButton.trailingIcon\"\r\n [iconOnly]=\"!!parsedLabelButton.iconOnly\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onLabelButtonClick()\"\r\n />\r\n }\r\n </div>\r\n <div class=\"input-wrapper\">\r\n @if (leadingIconSvg) {\r\n <span class=\"input-icon input-icon--leading\" aria-hidden=\"true\" [innerHTML]=\"leadingIconSvg\"></span>\r\n }\r\n <input\r\n class=\"input\"\r\n [class.has-leading-icon]=\"leadingIcon\"\r\n [class.has-trailing-icon]=\"trailingIcon\"\r\n [id]=\"inputId\"\r\n [name]=\"name || inputId\"\r\n [type]=\"type\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"value\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"readonly\"\r\n [attr.required]=\"isRequired ? '' : null\"\r\n [class.error]=\"hasError\"\r\n [attr.aria-invalid]=\"hasError ? 'true' : null\"\r\n [attr.aria-describedby]=\"describedBy\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n @if (trailingIconSvg) {\r\n @if (trailingIconClick.observed) {\r\n <button class=\"input-icon input-icon--trailing input-icon--btn\" type=\"button\" [disabled]=\"disabled\" [attr.aria-label]=\"trailingIconAriaLabel || null\" [innerHTML]=\"trailingIconSvg\" (click)=\"trailingIconClick.emit()\"></button>\r\n } @else {\r\n <span class=\"input-icon input-icon--trailing\" aria-hidden=\"true\" [innerHTML]=\"trailingIconSvg\"></span>\r\n }\r\n }\r\n </div>\r\n @if (displayedSupportingText) {\r\n <span class=\"supporting-text\" [class.supporting-text--error]=\"hasError\" [id]=\"inputId + '-supporting'\">\r\n {{ displayedSupportingText }}\r\n </span>\r\n }\r\n </div>\r\n `,\r\n styleUrl: './text-input.css',\r\n})\r\nexport class TextInputComponent implements ControlValueAccessor, OnChanges {\r\n private readonly _autoId = `cmp-text-input-${++nextId}`;\r\n private readonly cdr = inject(ChangeDetectorRef);\r\n private readonly sanitizer = inject(DomSanitizer);\r\n private _onChange: (value: string) => void = () => {};\r\n private _onTouched: () => void = () => {};\r\n\r\n /** Injected when the component is used inside a reactive or template-driven form. */\r\n protected readonly ngControl: NgControl | null;\r\n\r\n constructor() {\r\n const ctrl = inject(NgControl, { optional: true, self: true });\r\n if (ctrl) ctrl.valueAccessor = this;\r\n this.ngControl = ctrl;\r\n }\r\n\r\n /** Label displayed above the input. */\r\n @Input() label = '';\r\n /** Placeholder text shown inside the input when empty. */\r\n @Input() placeholder = '';\r\n /** Current value of the input. When used in a form, the form controls the value. */\r\n @Input() value = '';\r\n /** Native input type. Defaults to `'text'`. Use `'password'` to mask the value. */\r\n @Input() type: TextInputType = 'text';\r\n /** Size variant — controls height, padding, and font size. Defaults to `'medium'`. */\r\n @Input() size: TextInputSize = 'medium';\r\n /** Native `name` attribute forwarded to the `<input>`. Defaults to the auto-generated id. */\r\n @Input() name?: string;\r\n /** Native `id` attribute for the `<input>`. Auto-generated if omitted. */\r\n @Input() id?: string;\r\n /**\r\n * Id(s) of external elements that describe the input, space-separated.\r\n * Forwarded to `aria-describedby` on the native `<input>`.\r\n */\r\n @Input() ariaDescribedBy?: string;\r\n /** Text displayed below the input. Shown in red when the input is in error state. */\r\n @Input() supportingText = '';\r\n /**\r\n * Static error text shown in red when the input is in error state.\r\n * Used when the input is outside a form (with `[error]=\"true\"`).\r\n * When inside a form, prefer `errorMessages` for per-validator messages.\r\n */\r\n @Input() errorMessage = '';\r\n /**\r\n * Map of Angular validator error keys to display strings.\r\n * The component reads `ngControl.errors` to determine which validator failed\r\n * and shows the matching message in red below the input.\r\n * Example: `{ required: 'Username is required', minlength: 'Min 8 characters' }`\r\n */\r\n @Input() errorMessages: Record<string, string> = {};\r\n\r\n private _labelButton: TextInputLabelButton | null = null;\r\n\r\n /**\r\n * JSON string configuring the optional button at the right of the label row.\r\n * Hidden when empty or omitted. Example: `'{\"id\":\"show\",\"label\":\"Show\"}'`\r\n * Clicking emits the button's `id` via the `labelButtonClick` output.\r\n */\r\n @Input() set labelButton(json: string) {\r\n if (!json) { this._labelButton = null; return; }\r\n try {\r\n this._labelButton = JSON.parse(json) as TextInputLabelButton;\r\n } catch {\r\n this._labelButton = null;\r\n }\r\n }\r\n\r\n /** @internal Template access to the parsed label button config. */\r\n protected get parsedLabelButton(): TextInputLabelButton | null {\r\n return this._labelButton;\r\n }\r\n\r\n /**\r\n * Adds a blue asterisk after the label. When used in a form, this is set\r\n * automatically if the bound `FormControl` has `Validators.required`.\r\n * Can also be set explicitly for non-form use. Supports boolean coercion.\r\n */\r\n @Input({ transform: booleanAttribute }) required = false;\r\n /**\r\n * Applies the error visual state (red border) explicitly. When used in a form,\r\n * the error state is driven automatically from the `FormControl`'s validity once\r\n * the field is touched — this input is only needed outside of forms.\r\n * Supports boolean coercion.\r\n */\r\n @Input({ transform: booleanAttribute }) error = false;\r\n /** Disables the input. When used in a form, also responds to `FormControl.disable()`. Supports boolean coercion. */\r\n @Input({ transform: booleanAttribute }) disabled = false;\r\n /** Makes the input read-only — focusable and copyable but not editable. Value is still submitted with the form. Supports boolean coercion. */\r\n @Input({ transform: booleanAttribute }) readonly = false;\r\n /** Lucide icon name rendered inside the input before the text (e.g. `'search'`). */\r\n @Input() leadingIcon?: string;\r\n /** Lucide icon name rendered inside the input after the text (e.g. `'eye'`). */\r\n @Input() trailingIcon?: string;\r\n /** Accessible label for the trailing icon button. Required when `trailingIconClick` is used. */\r\n @Input() trailingIconAriaLabel = '';\r\n\r\n protected leadingIconSvg: SafeHtml | null = null;\r\n protected trailingIconSvg: SafeHtml | null = null;\r\n\r\n ngOnChanges(): void {\r\n this.leadingIconSvg = this.leadingIcon ? this.buildIconSvg(this.leadingIcon) : null;\r\n this.trailingIconSvg = this.trailingIcon ? this.buildIconSvg(this.trailingIcon) : null;\r\n }\r\n\r\n private buildIconSvg(name: string): SafeHtml {\r\n const svg = (LUCIDE_ICONS[name] ?? '').replace('<svg ', '<svg width=\"20\" height=\"20\" ');\r\n return this.sanitizer.bypassSecurityTrustHtml(svg);\r\n }\r\n\r\n /** Emits the new string value whenever the user types. For use outside Angular forms; inside forms use the `FormControl` value stream. */\r\n @Output() readonly valueChange = new EventEmitter<string>();\r\n /** Emits the label button's `id` when it is clicked. */\r\n @Output() readonly labelButtonClick = new EventEmitter<string>();\r\n /** Emitted when the trailing icon button is clicked. When observed, the trailing icon renders as an interactive button. */\r\n @Output() readonly trailingIconClick = new EventEmitter<void>();\r\n\r\n get inputId(): string {\r\n return this.id ?? this._autoId;\r\n }\r\n\r\n /** True when the bound FormControl is invalid and touched, or when `error` is explicitly set. */\r\n get hasError(): boolean {\r\n return this.error || !!(this.ngControl?.invalid && this.ngControl.touched);\r\n }\r\n\r\n /** True when `required` is set explicitly, or when the bound FormControl has Validators.required. */\r\n get isRequired(): boolean {\r\n return this.required || !!(this.ngControl?.control?.hasValidator(Validators.required));\r\n }\r\n\r\n private get activeErrorMessage(): string {\r\n const errors = this.ngControl?.errors;\r\n if (!errors) return '';\r\n for (const key of Object.keys(errors)) {\r\n if (this.errorMessages[key]) return this.errorMessages[key];\r\n }\r\n return '';\r\n }\r\n\r\n get displayedSupportingText(): string {\r\n if (this.hasError) {\r\n return this.activeErrorMessage || this.errorMessage || this.supportingText;\r\n }\r\n return this.supportingText;\r\n }\r\n\r\n get describedBy(): string | null {\r\n const parts: string[] = [];\r\n if (this.ariaDescribedBy) parts.push(this.ariaDescribedBy);\r\n if (this.supportingText || this.errorMessage || Object.keys(this.errorMessages).length) {\r\n parts.push(this.inputId + '-supporting');\r\n }\r\n return parts.length ? parts.join(' ') : null;\r\n }\r\n\r\n get wrapperClasses(): string {\r\n return ['cmp-text-field', this.size, this.disabled ? 'disabled' : '']\r\n .filter(Boolean)\r\n .join(' ');\r\n }\r\n\r\n // ── ControlValueAccessor ────────────────────────────────────────────────────\r\n\r\n writeValue(value: string | null): void {\r\n this.value = value ?? '';\r\n this.cdr.markForCheck();\r\n }\r\n\r\n registerOnChange(fn: (value: string) => void): void {\r\n this._onChange = fn;\r\n }\r\n\r\n registerOnTouched(fn: () => void): void {\r\n this._onTouched = fn;\r\n }\r\n\r\n /** Called by Angular when the bound FormControl is programmatically disabled or enabled. */\r\n setDisabledState(isDisabled: boolean): void {\r\n this.disabled = isDisabled;\r\n this.cdr.markForCheck();\r\n }\r\n\r\n // ── Event handlers ──────────────────────────────────────────────────────────\r\n\r\n protected onInput(event: Event): void {\r\n const value = (event.target as HTMLInputElement).value;\r\n this.value = value;\r\n this._onChange(value);\r\n this.valueChange.emit(value);\r\n }\r\n\r\n protected onBlur(): void {\r\n this._onTouched();\r\n this.cdr.markForCheck();\r\n }\r\n\r\n protected onLabelButtonClick(): void {\r\n if (this._labelButton) {\r\n this.labelButtonClick.emit(this._labelButton.id);\r\n }\r\n }\r\n}\r\n"]}
package/lib/text-input/text-input.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { EventEmitter } from '@angular/core';
1
+ import { EventEmitter, OnChanges } from '@angular/core';
2
+ import { SafeHtml } from '@angular/platform-browser';
2
3
  import { ControlValueAccessor, NgControl } from '@angular/forms';
3
4
  import { ButtonVariant } from '../button/button';
4
5
  import * as i0 from "@angular/core";
@@ -29,9 +30,10 @@ export interface TextInputLabelButton {
29
30
  * validity once the field has been touched, and can also be set explicitly via
30
31
  * the `error` input for use outside of Angular forms.
31
32
  */
32
- export declare class TextInputComponent implements ControlValueAccessor {
33
+ export declare class TextInputComponent implements ControlValueAccessor, OnChanges {
33
34
  private readonly _autoId;
34
35
  private readonly cdr;
36
+ private readonly sanitizer;
35
37
  private _onChange;
36
38
  private _onTouched;
37
39
  /** Injected when the component is used inside a reactive or template-driven form. */
@@ -97,10 +99,22 @@ export declare class TextInputComponent implements ControlValueAccessor {
97
99
  disabled: boolean;
98
100
  /** Makes the input read-only — focusable and copyable but not editable. Value is still submitted with the form. Supports boolean coercion. */
99
101
  readonly: boolean;
102
+ /** Lucide icon name rendered inside the input before the text (e.g. `'search'`). */
103
+ leadingIcon?: string;
104
+ /** Lucide icon name rendered inside the input after the text (e.g. `'eye'`). */
105
+ trailingIcon?: string;
106
+ /** Accessible label for the trailing icon button. Required when `trailingIconClick` is used. */
107
+ trailingIconAriaLabel: string;
108
+ protected leadingIconSvg: SafeHtml | null;
109
+ protected trailingIconSvg: SafeHtml | null;
110
+ ngOnChanges(): void;
111
+ private buildIconSvg;
100
112
  /** Emits the new string value whenever the user types. For use outside Angular forms; inside forms use the `FormControl` value stream. */
101
113
  readonly valueChange: EventEmitter<string>;
102
114
  /** Emits the label button's `id` when it is clicked. */
103
115
  readonly labelButtonClick: EventEmitter<string>;
116
+ /** Emitted when the trailing icon button is clicked. When observed, the trailing icon renders as an interactive button. */
117
+ readonly trailingIconClick: EventEmitter<void>;
104
118
  get inputId(): string;
105
119
  /** True when the bound FormControl is invalid and touched, or when `error` is explicitly set. */
106
120
  get hasError(): boolean;
@@ -119,7 +133,7 @@ export declare class TextInputComponent implements ControlValueAccessor {
119
133
  protected onBlur(): void;
120
134
  protected onLabelButtonClick(): void;
121
135
  static ɵfac: i0.ɵɵFactoryDeclaration<TextInputComponent, never>;
122
- static ɵcmp: i0.ɵɵComponentDeclaration<TextInputComponent, "compsych-text-input", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "supportingText": { "alias": "supportingText"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "labelButton": { "alias": "labelButton"; "required": false; }; "required": { "alias": "required"; "required": false; }; "error": { "alias": "error"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "valueChange": "valueChange"; "labelButtonClick": "labelButtonClick"; }, never, never, true, never>;
136
+ static ɵcmp: i0.ɵɵComponentDeclaration<TextInputComponent, "compsych-text-input", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "supportingText": { "alias": "supportingText"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "labelButton": { "alias": "labelButton"; "required": false; }; "required": { "alias": "required"; "required": false; }; "error": { "alias": "error"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; }; "trailingIconAriaLabel": { "alias": "trailingIconAriaLabel"; "required": false; }; }, { "valueChange": "valueChange"; "labelButtonClick": "labelButtonClick"; "trailingIconClick": "trailingIconClick"; }, never, never, true, never>;
123
137
  static ngAcceptInputType_required: unknown;
124
138
  static ngAcceptInputType_error: unknown;
125
139
  static ngAcceptInputType_disabled: unknown;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@compsych-ui-components/angular",
3
- "version": "7.0.11",
3
+ "version": "7.0.12",
4
4
  "description": "Angular UI components for compsych",
5
5
  "publishConfig": {
6
6
  "access": "public",