@sebgroup/green-angular 5.5.2 → 5.5.4
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.
- package/esm2022/src/v-angular/datepicker/components/date-input/date-input.component.mjs +3 -3
- package/esm2022/src/v-angular/dropdown/dropdown-list/dropdown-list.component.mjs +3 -4
- package/esm2022/src/v-angular/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/src/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.mjs +25 -7
- package/esm2022/src/v-angular/dropdown/typeahead/typeahead-input/typeahead-input.component.mjs +2 -2
- package/esm2022/src/v-angular/input/input.component.mjs +8 -7
- package/esm2022/src/v-angular/modal/fold-out/fold-out.component.mjs +2 -2
- package/esm2022/src/v-angular/modal/slide-out/slide-out.component.mjs +3 -3
- package/esm2022/src/v-angular/textarea/textarea.component.mjs +3 -3
- package/esm2022/v-angular/datepicker/components/date-input/date-input.component.mjs +3 -3
- package/esm2022/v-angular/dropdown/dropdown-list/dropdown-list.component.mjs +3 -4
- package/esm2022/v-angular/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.mjs +25 -7
- package/esm2022/v-angular/dropdown/typeahead/typeahead-input/typeahead-input.component.mjs +2 -2
- package/esm2022/v-angular/input/input.component.mjs +8 -7
- package/esm2022/v-angular/modal/fold-out/fold-out.component.mjs +2 -2
- package/esm2022/v-angular/modal/slide-out/slide-out.component.mjs +3 -3
- package/esm2022/v-angular/textarea/textarea.component.mjs +3 -3
- package/fesm2022/sebgroup-green-angular-src-v-angular-datepicker.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-datepicker.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs +28 -11
- package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs +6 -5
- package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-modal.mjs +4 -4
- package/fesm2022/sebgroup-green-angular-src-v-angular-modal.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-textarea.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-textarea.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-v-angular.mjs +42 -24
- package/fesm2022/sebgroup-green-angular-v-angular.mjs.map +1 -1
- package/package.json +20 -20
- package/src/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.d.ts +9 -3
- package/src/v-angular/dropdown/typeahead/typeahead-input/typeahead-input.component.d.ts +1 -1
- package/src/v-angular/input/input.component.d.ts +4 -3
- package/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.d.ts +9 -3
- package/v-angular/dropdown/typeahead/typeahead-input/typeahead-input.component.d.ts +1 -1
- package/v-angular/input/input.component.d.ts +4 -3
|
@@ -72,11 +72,11 @@ class NggvTextareaComponent extends NggvBaseControlValueAccessorComponent {
|
|
|
72
72
|
this.onChange(this.state);
|
|
73
73
|
}
|
|
74
74
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvTextareaComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
75
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvTextareaComponent, selector: "nggv-textarea", inputs: { thook: "thook", placeholder: "placeholder", readonly: "readonly", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", rows: "rows" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-textarea'\"\n *transloco=\"let t; read: scope\"\n>\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\" *ngIf=\"description\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <div\n [id]=\"id + '-textarea'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state }}\n </ng-container>\n </div>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n <textarea\n #input\n [id]=\"id + '-textarea'\"\n class=\"gds-field\"\n [ngClass]=\"{ 'no-resize': !!rows }\"\n [class.nggv-field--error]=\"invalid\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.role]=\"role\"\n [attr.rows]=\"rows\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n title=\"\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-textarea'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n solid=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"hasMaxLength\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host textarea{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);align-items:center;background-color:var(--sg-form-control-bg);color:var(--text-primary-color);display:flex;justify-content:center;resize:vertical}:host textarea:focus:not(:focus-visible){box-shadow:none;outline:0}:host textarea:focus,:host textarea:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media screen and (-ms-high-contrast: active){:host textarea{border:2px solid currentcolor}}:host textarea:hover{background-color:var(--gds-ref-pallet-base100)}:host textarea:disabled,:host textarea.disabled,:host textarea[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host textarea:disabled::placeholder,:host textarea.disabled::placeholder,:host textarea[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host label:not(.gds-field-notice)
|
|
75
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvTextareaComponent, selector: "nggv-textarea", inputs: { thook: "thook", placeholder: "placeholder", readonly: "readonly", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", rows: "rows" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-textarea'\"\n *transloco=\"let t; read: scope\"\n>\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\" *ngIf=\"description\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <div\n [id]=\"id + '-textarea'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state }}\n </ng-container>\n </div>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n <textarea\n #input\n [id]=\"id + '-textarea'\"\n class=\"gds-field\"\n [ngClass]=\"{ 'no-resize': !!rows }\"\n [class.nggv-field--error]=\"invalid\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.role]=\"role\"\n [attr.rows]=\"rows\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n title=\"\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-textarea'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n solid=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"hasMaxLength\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host textarea{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);align-items:center;background-color:var(--sg-form-control-bg);color:var(--text-primary-color);display:flex;justify-content:center;resize:vertical}:host textarea:focus:not(:focus-visible){box-shadow:none;outline:0}:host textarea:focus,:host textarea:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media screen and (-ms-high-contrast: active){:host textarea{border:2px solid currentcolor}}:host textarea:hover{background-color:var(--gds-ref-pallet-base100)}:host textarea:disabled,:host textarea.disabled,:host textarea[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host textarea:disabled::placeholder,:host textarea.disabled::placeholder,:host textarea[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host label:not(.gds-field-notice):is(label){margin-bottom:0}:host label:not(.gds-field-notice).form-control{width:fit-content}@supports (-moz-appearance: none){:host label:not(.gds-field-notice).form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label:not(.gds-field-notice).form-control:focus,:host label:not(.gds-field-notice).form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-field-notice):not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label:not(.gds-field-notice)+input,:host label:not(.gds-field-notice)+textarea,fieldset :host label:not(.gds-field-notice)+div,:host label:not(.gds-field-notice)+button,:host label:not(.gds-field-notice)+.group-stepper,:host label:not(.gds-field-notice)+.stepper-wrapper,:host label:not(.gds-field-notice)+.group{margin-top:.5rem}:host label:not(.gds-field-notice)+.form-info{margin-bottom:.5rem}:host label+.gds-field,:host label+.nggv-field--locked{margin-top:.5rem}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label--optional{font-weight:400}:host textarea{width:100%;max-width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem}:host textarea.nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .description{margin-bottom:.5rem}:host .error-wrapper{margin-top:.5rem;display:flex}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host .gds-form-item__footer>.form-info--countdown{font-weight:400}:host .no-resize{resize:none}:host .no-resize::-webkit-scrollbar{-webkit-appearance:none}:host .no-resize::-webkit-scrollbar-thumb{border-radius:.5rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i5.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
|
|
76
76
|
}
|
|
77
77
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvTextareaComponent, decorators: [{
|
|
78
78
|
type: Component,
|
|
79
|
-
args: [{ selector: 'nggv-textarea', template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-textarea'\"\n *transloco=\"let t; read: scope\"\n>\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\" *ngIf=\"description\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <div\n [id]=\"id + '-textarea'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state }}\n </ng-container>\n </div>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n <textarea\n #input\n [id]=\"id + '-textarea'\"\n class=\"gds-field\"\n [ngClass]=\"{ 'no-resize': !!rows }\"\n [class.nggv-field--error]=\"invalid\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.role]=\"role\"\n [attr.rows]=\"rows\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n title=\"\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-textarea'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n solid=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"hasMaxLength\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host textarea{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);align-items:center;background-color:var(--sg-form-control-bg);color:var(--text-primary-color);display:flex;justify-content:center;resize:vertical}:host textarea:focus:not(:focus-visible){box-shadow:none;outline:0}:host textarea:focus,:host textarea:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media screen and (-ms-high-contrast: active){:host textarea{border:2px solid currentcolor}}:host textarea:hover{background-color:var(--gds-ref-pallet-base100)}:host textarea:disabled,:host textarea.disabled,:host textarea[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host textarea:disabled::placeholder,:host textarea.disabled::placeholder,:host textarea[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host label:not(.gds-field-notice)
|
|
79
|
+
args: [{ selector: 'nggv-textarea', template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-textarea'\"\n *transloco=\"let t; read: scope\"\n>\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\" *ngIf=\"description\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <div\n [id]=\"id + '-textarea'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state }}\n </ng-container>\n </div>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n <textarea\n #input\n [id]=\"id + '-textarea'\"\n class=\"gds-field\"\n [ngClass]=\"{ 'no-resize': !!rows }\"\n [class.nggv-field--error]=\"invalid\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.role]=\"role\"\n [attr.rows]=\"rows\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n title=\"\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-textarea'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n solid=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"hasMaxLength\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host textarea{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);align-items:center;background-color:var(--sg-form-control-bg);color:var(--text-primary-color);display:flex;justify-content:center;resize:vertical}:host textarea:focus:not(:focus-visible){box-shadow:none;outline:0}:host textarea:focus,:host textarea:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media screen and (-ms-high-contrast: active){:host textarea{border:2px solid currentcolor}}:host textarea:hover{background-color:var(--gds-ref-pallet-base100)}:host textarea:disabled,:host textarea.disabled,:host textarea[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host textarea:disabled::placeholder,:host textarea.disabled::placeholder,:host textarea[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host label:not(.gds-field-notice):is(label){margin-bottom:0}:host label:not(.gds-field-notice).form-control{width:fit-content}@supports (-moz-appearance: none){:host label:not(.gds-field-notice).form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label:not(.gds-field-notice).form-control:focus,:host label:not(.gds-field-notice).form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-field-notice):not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label:not(.gds-field-notice)+input,:host label:not(.gds-field-notice)+textarea,fieldset :host label:not(.gds-field-notice)+div,:host label:not(.gds-field-notice)+button,:host label:not(.gds-field-notice)+.group-stepper,:host label:not(.gds-field-notice)+.stepper-wrapper,:host label:not(.gds-field-notice)+.group{margin-top:.5rem}:host label:not(.gds-field-notice)+.form-info{margin-bottom:.5rem}:host label+.gds-field,:host label+.nggv-field--locked{margin-top:.5rem}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label--optional{font-weight:400}:host textarea{width:100%;max-width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem}:host textarea.nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .description{margin-bottom:.5rem}:host .error-wrapper{margin-top:.5rem;display:flex}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host .gds-form-item__footer>.form-info--countdown{font-weight:400}:host .no-resize{resize:none}:host .no-resize::-webkit-scrollbar{-webkit-appearance:none}:host .no-resize::-webkit-scrollbar-thumb{border-radius:.5rem}\n"] }]
|
|
80
80
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
81
81
|
type: Self
|
|
82
82
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sebgroup-green-angular-src-v-angular-textarea.mjs","sources":["../../../../libs/angular/src/v-angular/textarea/textarea.component.ts","../../../../libs/angular/src/v-angular/textarea/textarea.component.html","../../../../libs/angular/src/v-angular/textarea/textarea.module.ts","../../../../libs/angular/src/v-angular/textarea/sebgroup-green-angular-src-v-angular-textarea.ts"],"sourcesContent":["import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'\n\nimport {\n ChangeDetectorRef,\n Component,\n HostBinding,\n Inject,\n Input,\n Optional,\n Self,\n} from '@angular/core'\nimport { NgControl } from '@angular/forms'\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@jsverse/transloco'\n\nimport { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/** Textarea fields allow users to add and edit longer or multiple line text. */\n@Component({\n selector: 'nggv-textarea',\n templateUrl: './textarea.component.html',\n styleUrls: ['./textarea.component.scss'],\n})\nexport class NggvTextareaComponent extends NggvBaseControlValueAccessorComponent {\n /** Special property used for selecting DOM elements during automated UI testing. */\n @HostBinding('attr.data-thook') @Input() thook: string | null | undefined =\n 'textarea'\n /** Text shown before input has a written value. */\n @Input() placeholder?: string\n /** If set to true, the value will not be editable. */\n @Input() readonly = false\n /** Minimum length (number of characters) of value. */\n @Input() set minLength(length: number) {\n this._minlength = length\n this.cdr.detectChanges()\n }\n get minlength(): number {\n return this._minlength\n }\n\n /**\n * Minimum length (number of characters) of value.\n * @deprecated minlength triggers angular-template-validation. Use @Input() minLength instead.\n */\n @Input() set minlength(length: number) {\n this._minlength = length\n this.cdr.detectChanges()\n }\n /** Maximum length (number of characters) of value. */\n @Input() set maxLength(length: number) {\n this._maxlength = length\n this.cdr.detectChanges()\n }\n get maxlength(): number {\n return this._maxlength\n }\n /**\n * Maximum length (number of characters) of value.\n * @deprecated maxlength triggers angular-template-validation. Use @Input() maxLength instead.\n */\n @Input() set maxlength(length: number) {\n this._maxlength = length\n this.cdr.detectChanges()\n }\n\n /** Returns if maxlength is used */\n get hasMaxLength(): boolean {\n return !!this.maxlength && this.maxlength !== Number.MAX_SAFE_INTEGER\n }\n\n private _maxlength = Number.MAX_SAFE_INTEGER\n\n private _minlength = 0\n\n /** Sets the height of the textarea and disables resize. A scrollbar will appear if necessary. */\n @Input() rows?: number\n\n constructor(\n @Self() @Optional() public ngControl: NgControl,\n @Optional()\n @Inject(TRANSLOCO_SCOPE)\n protected translocoScope: TranslocoScope,\n protected cdr: ChangeDetectorRef,\n ) {\n super(ngControl, translocoScope, cdr)\n }\n\n /** @internal */\n onInput(event: Event) {\n event.stopPropagation()\n if (this.disabled) return\n this.state = (event.target as HTMLTextAreaElement).value\n this.onChange(this.state)\n }\n}\n","<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-textarea'\"\n *transloco=\"let t; read: scope\"\n>\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\" *ngIf=\"description\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <div\n [id]=\"id + '-textarea'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state }}\n </ng-container>\n </div>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n <textarea\n #input\n [id]=\"id + '-textarea'\"\n class=\"gds-field\"\n [ngClass]=\"{ 'no-resize': !!rows }\"\n [class.nggv-field--error]=\"invalid\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.role]=\"role\"\n [attr.rows]=\"rows\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n title=\"\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-textarea'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n solid=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"hasMaxLength\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n","import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'\n\nimport { CommonModule } from '@angular/common'\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'\n\nimport { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'\nimport { NggvCharacterCountdownDirectiveModule } from '@sebgroup/green-angular/src/v-angular/character-countdown'\nimport { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\nimport { NggvTextareaComponent } from './textarea.component'\n\n@NgModule({\n declarations: [NggvTextareaComponent],\n imports: [\n CommonModule,\n NggvI18nModule,\n NggvCharacterCountdownDirectiveModule,\n NggCoreWrapperModule,\n ],\n exports: [NggvTextareaComponent],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggvTextareaModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sebgroup-green-angular-src-v-angular-textarea.mjs","sources":["../../../../libs/angular/src/v-angular/textarea/textarea.component.ts","../../../../libs/angular/src/v-angular/textarea/textarea.component.html","../../../../libs/angular/src/v-angular/textarea/textarea.module.ts","../../../../libs/angular/src/v-angular/textarea/sebgroup-green-angular-src-v-angular-textarea.ts"],"sourcesContent":["import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'\n\nimport {\n ChangeDetectorRef,\n Component,\n HostBinding,\n Inject,\n Input,\n Optional,\n Self,\n} from '@angular/core'\nimport { NgControl } from '@angular/forms'\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@jsverse/transloco'\n\nimport { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/** Textarea fields allow users to add and edit longer or multiple line text. */\n@Component({\n selector: 'nggv-textarea',\n templateUrl: './textarea.component.html',\n styleUrls: ['./textarea.component.scss'],\n})\nexport class NggvTextareaComponent extends NggvBaseControlValueAccessorComponent {\n /** Special property used for selecting DOM elements during automated UI testing. */\n @HostBinding('attr.data-thook') @Input() thook: string | null | undefined =\n 'textarea'\n /** Text shown before input has a written value. */\n @Input() placeholder?: string\n /** If set to true, the value will not be editable. */\n @Input() readonly = false\n /** Minimum length (number of characters) of value. */\n @Input() set minLength(length: number) {\n this._minlength = length\n this.cdr.detectChanges()\n }\n get minlength(): number {\n return this._minlength\n }\n\n /**\n * Minimum length (number of characters) of value.\n * @deprecated minlength triggers angular-template-validation. Use @Input() minLength instead.\n */\n @Input() set minlength(length: number) {\n this._minlength = length\n this.cdr.detectChanges()\n }\n /** Maximum length (number of characters) of value. */\n @Input() set maxLength(length: number) {\n this._maxlength = length\n this.cdr.detectChanges()\n }\n get maxlength(): number {\n return this._maxlength\n }\n /**\n * Maximum length (number of characters) of value.\n * @deprecated maxlength triggers angular-template-validation. Use @Input() maxLength instead.\n */\n @Input() set maxlength(length: number) {\n this._maxlength = length\n this.cdr.detectChanges()\n }\n\n /** Returns if maxlength is used */\n get hasMaxLength(): boolean {\n return !!this.maxlength && this.maxlength !== Number.MAX_SAFE_INTEGER\n }\n\n private _maxlength = Number.MAX_SAFE_INTEGER\n\n private _minlength = 0\n\n /** Sets the height of the textarea and disables resize. A scrollbar will appear if necessary. */\n @Input() rows?: number\n\n constructor(\n @Self() @Optional() public ngControl: NgControl,\n @Optional()\n @Inject(TRANSLOCO_SCOPE)\n protected translocoScope: TranslocoScope,\n protected cdr: ChangeDetectorRef,\n ) {\n super(ngControl, translocoScope, cdr)\n }\n\n /** @internal */\n onInput(event: Event) {\n event.stopPropagation()\n if (this.disabled) return\n this.state = (event.target as HTMLTextAreaElement).value\n this.onChange(this.state)\n }\n}\n","<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-textarea'\"\n *transloco=\"let t; read: scope\"\n>\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\" *ngIf=\"description\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <div\n [id]=\"id + '-textarea'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state }}\n </ng-container>\n </div>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n <textarea\n #input\n [id]=\"id + '-textarea'\"\n class=\"gds-field\"\n [ngClass]=\"{ 'no-resize': !!rows }\"\n [class.nggv-field--error]=\"invalid\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.role]=\"role\"\n [attr.rows]=\"rows\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n title=\"\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-textarea'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n solid=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n\n <ng-container *ngIf=\"hasMaxLength\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n","import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'\n\nimport { CommonModule } from '@angular/common'\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'\n\nimport { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'\nimport { NggvCharacterCountdownDirectiveModule } from '@sebgroup/green-angular/src/v-angular/character-countdown'\nimport { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\nimport { NggvTextareaComponent } from './textarea.component'\n\n@NgModule({\n declarations: [NggvTextareaComponent],\n imports: [\n CommonModule,\n NggvI18nModule,\n NggvCharacterCountdownDirectiveModule,\n NggCoreWrapperModule,\n ],\n exports: [NggvTextareaComponent],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggvTextareaModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|