@sebgroup/green-angular 5.8.1 → 5.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/src/v-angular/checkbox/checkbox.component.mjs +2 -2
- package/esm2022/src/v-angular/table/table.component.mjs +3 -3
- package/esm2022/src/v-angular/table/table.models.mjs +1 -1
- package/esm2022/v-angular/checkbox/checkbox.component.mjs +2 -2
- package/esm2022/v-angular/table/table.component.mjs +3 -3
- package/esm2022/v-angular/table/table.models.mjs +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-checkbox.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-checkbox.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-table.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-table.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-v-angular.mjs +4 -4
- package/fesm2022/sebgroup-green-angular-v-angular.mjs.map +1 -1
- package/package.json +1 -1
- package/src/v-angular/table/table.component.d.ts +1 -1
- package/src/v-angular/table/table.models.d.ts +5 -0
- package/v-angular/table/table.component.d.ts +1 -1
- package/v-angular/table/table.models.d.ts +5 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUubW9kZWxzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hbmd1bGFyL3NyYy92LWFuZ3VsYXIvdGFibGUvdGFibGUubW9kZWxzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgdHlwZSBTb3J0aW5nT3JkZXIgPSAnYXNjJyB8ICdkZXNjJ1xuZXhwb3J0IHR5cGUgQ29sdW1uVHlwZSA9ICdudW1lcmljJyB8ICd0ZXh0J1xuXG4vKiogR2VuZXJpYyB0eXBlIGZvciBUYWJsZVJvdyBkYXRhICovXG5leHBvcnQgdHlwZSBUYWJsZVJvdyA9IFJlY29yZDxzdHJpbmcsIGFueT5cblxuLyoqIE9wdGlvbnMgYXBwbHlpbmcgdG8gdGhlIHRhYmxlIGhlYWRlciAqL1xuZXhwb3J0IGludGVyZmFjZSBUYWJsZUhlYWRlck9wdGlvbnMge1xuICAvKipcbiAgICogRGVmaW5lZCB0aGUgdGV4dCBkaXNwbGF5ZWQgaW4gdGhlIHRhYmxlIGhlYWRlci5cbiAgICogQGV4YW1wbGUgPHRoPiB7e1RhYmxlQ29sdW1uLmxhYmVsfX0gPC90aD5cbiAgICovXG4gIGxhYmVsPzogc3RyaW5nXG5cbiAgLyoqIEFkanVzdHMgdGV4dC1hbGlnbm1lbnQuICovXG4gIHZhbHVlVHlwZT86IENvbHVtblR5cGVcblxuICAvKipcbiAgICogRGVmaW5lcyB3aGV0aGVyIHRoZSB0YWJsZSBkYXRhIGNhbiBiZSBvcmRlcmVkIHVzaW5nIHRoaXMgY29sdW1uLlxuICAgKiBTZXR0aW5nIHRoaXMgdG8gZmFsc2UgKG9yIG9taXR0aW5nIGl0KSB3aWxsIGFsc28gcmVtb3ZlIHRoZSBjYXJldCBzb3J0aW5nIHN5bWJvbCBpbiBzcGVjaWZpZWQgY29sdW1uLlxuICAgKi9cbiAgc29ydGFibGU/OiBib29sZWFuXG5cbiAgLyoqXG4gICAqIERlZmluZWQgYXJpYSBsYWJlbCBmb3IgYSBzb3J0YWJsZSBjb2x1bW4gZm9yIHRoZSBzY3JlZW4gcmVhZGVyIHVzZXJzLlxuICAgKi9cbiAgYXJpYUxhYmVsU29ydGFibGU/
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUubW9kZWxzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hbmd1bGFyL3NyYy92LWFuZ3VsYXIvdGFibGUvdGFibGUubW9kZWxzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgdHlwZSBTb3J0aW5nT3JkZXIgPSAnYXNjJyB8ICdkZXNjJ1xuZXhwb3J0IHR5cGUgQ29sdW1uVHlwZSA9ICdudW1lcmljJyB8ICd0ZXh0J1xuXG4vKiogR2VuZXJpYyB0eXBlIGZvciBUYWJsZVJvdyBkYXRhICovXG5leHBvcnQgdHlwZSBUYWJsZVJvdyA9IFJlY29yZDxzdHJpbmcsIGFueT5cblxuLyoqIE9wdGlvbnMgYXBwbHlpbmcgdG8gdGhlIHRhYmxlIGhlYWRlciAqL1xuZXhwb3J0IGludGVyZmFjZSBUYWJsZUhlYWRlck9wdGlvbnMge1xuICAvKipcbiAgICogRGVmaW5lZCB0aGUgdGV4dCBkaXNwbGF5ZWQgaW4gdGhlIHRhYmxlIGhlYWRlci5cbiAgICogQGV4YW1wbGUgPHRoPiB7e1RhYmxlQ29sdW1uLmxhYmVsfX0gPC90aD5cbiAgICovXG4gIGxhYmVsPzogc3RyaW5nXG5cbiAgLyoqIEFkanVzdHMgdGV4dC1hbGlnbm1lbnQuICovXG4gIHZhbHVlVHlwZT86IENvbHVtblR5cGVcblxuICAvKipcbiAgICogRGVmaW5lcyB3aGV0aGVyIHRoZSB0YWJsZSBkYXRhIGNhbiBiZSBvcmRlcmVkIHVzaW5nIHRoaXMgY29sdW1uLlxuICAgKiBTZXR0aW5nIHRoaXMgdG8gZmFsc2UgKG9yIG9taXR0aW5nIGl0KSB3aWxsIGFsc28gcmVtb3ZlIHRoZSBjYXJldCBzb3J0aW5nIHN5bWJvbCBpbiBzcGVjaWZpZWQgY29sdW1uLlxuICAgKi9cbiAgc29ydGFibGU/OiBib29sZWFuXG5cbiAgLyoqXG4gICAqIERlZmluZWQgYXJpYSBsYWJlbCBmb3IgYSBzb3J0YWJsZSBjb2x1bW4gZm9yIHRoZSBzY3JlZW4gcmVhZGVyIHVzZXJzLlxuICAgKi9cbiAgYXJpYUxhYmVsU29ydGFibGU/OiBzdHJpbmdcblxuICAvKipcbiAgICogRGVzY3JpYmVzIHRoZSBzb3J0aW5nIG9yZGVyIG9mIHRoZSBjb2x1bW4uXG4gICAqIEFzIHRoZSB0YWJsZSBjYW4gb25seSBiZSBzb3J0ZWQgYmFzZWQgb24gb25lIGNvbHVtbiBwcm9wZXJ0eSwgaWYgdGhlIHByb3BlcnR5IGlzIG5vdCB1bmRlZmluZWQsXG4gICAqIGl0IHdpbGwgaW5zdHJ1Y3QgdGhlIHRhYmxlIHRvIHNvcnQgdGhlIGRhdGEgYmFzZWQgb24gdGhpcyBzcGVjaWZpYyBjb2x1bW4uXG4gICAqL1xuICBvcmRlcj86IFNvcnRpbmdPcmRlclxuXG4gIC8qKlxuICAgKiBEeW5hbWljYWxseSBoaWRlIG9yIHNob3cgdGhlIGxhYmVsIGFuZCBkYXRhIG9uIG1vYmlsZSB2aWV3LlxuICAgKi9cbiAgaGlkZUxhYmVsT25Nb2JpbGU/OiBib29sZWFuXG4gIGhpZGVQcm9wZXJ0eU9uTW9iaWxlPzogYm9vbGVhblxufVxuXG4vKiogT3B0aW9ucyBhcHBseWluZyB0byB0YWJsZSByb3dzICovXG5leHBvcnQgaW50ZXJmYWNlIFRhYmxlUm93T3B0aW9ucyB7XG4gIC8qKiBBZGp1c3RzIHRleHQtYWxpZ25tZW50LiAqL1xuICB2YWx1ZVR5cGU/OiBDb2x1bW5UeXBlXG5cbiAgLyoqIFVzZWQgdG8gcHJldmVudCB0aGUgZGVmYXVsdCBjbGljayBldmVudCB0byBiZSBlbWl0dGVkIHdoZW4gY2xpY2tpbmcgaW4gY2VsbHMgZm9yIHNwZWNpZmllZCBjb2x1bW4gKi9cbiAgcHJldmVudERlZmF1bHRDbGlja0V2ZW50PzogYm9vbGVhblxufVxuXG4vKipcbiAqIEludGVyZmFjZSB1c2VkIHRvIGRlc2NyaWJlIGhvdyBhIHRhYmxlIGNvbHVtbiBzaG91bGQgYmUgZGlzcGxheWVkLiBUaGlzIGluY2x1ZGVzIHRoZSB0ZXh0IGFuZCBjbGFzcyB1c2VkIGZvciB0aGUgdGFibGUgaGVhZGVyLFxuICogYW5kIHRoZSBkYXRhIGZvciBlYWNoIHRhYmxlIHJvdy5cbiAqL1xuZXhwb3J0IGludGVyZmFjZSBUYWJsZUNvbHVtbjxUIGV4dGVuZHMgVGFibGVSb3c+XG4gIGV4dGVuZHMgVGFibGVIZWFkZXJPcHRpb25zLFxuICAgIFRhYmxlUm93T3B0aW9ucyB7XG4gIC8qKlxuICAgKiBUaGUgcHJvcGVydHkgbmFtZSB1c2VkIHRvIGlkZW50aWZ5IHdoYXQgdmFsdWUgdG8gZGlzcGxheSBpbiBhIGNlbGwgZm9yIHRoYXQgY29sdW1uLlxuICAgKiBAZXhhbXBsZSA8dHIgKm5nRm9yPVwibGV0IGRhdGEgaW4gZGF0YUxpc3RcIj4gPHRkPnt7IGRhdGFbVGFibGVDb2x1bW4ucHJvcGVydHldIH19PC90ZD4gPC90cj5cbiAgICovXG4gIHByb3BlcnR5OiBrZXlvZiBUXG59XG5cbi8qKlxuICogSW50ZXJmYWNlIGRlc2NyaWJpbmcgZXZlbnQgZW1pdHRlZCBvbiByZW9yZGVyaW5nIHRoZSB0YWJsZS5cbiAqL1xuZXhwb3J0IGludGVyZmFjZSBPcmRlckJ5PFQgZXh0ZW5kcyBUYWJsZVJvdz4ge1xuICBwcm9wZXJ0eToga2V5b2YgVFxuICBvcmRlcjogU29ydGluZ09yZGVyIHwgdW5kZWZpbmVkXG59XG5cbi8qKlxuICogSW50ZXJmYWNlIGRlc2NyaWJpbmcgdGhlIGFyaWEgbGFiZWxzIGZvciBzb3J0aW5nIGluIHRoZSB0YWJsZS5cbiAqIEFyaWEgbGFiZWwgYXR0cmlidXRlcyBhcmUgdXNlZCBmb3IgYSBzY3JlZW4gcmVhZGVyIHRvIGRlc2NyaWJlIHRoZSBzb3J0aW5nIHN0YXRlIG9mIHRoZSB0YWJsZS5cbiAqL1xuZXhwb3J0IGludGVyZmFjZSBhcmlhTGFiZWxzT3JkZXJCeSB7XG4gIGFzYzogc3RyaW5nXG4gIGRlc2M6IHN0cmluZ1xufVxuIl19
|
|
@@ -47,11 +47,11 @@ export class NggvCheckboxComponent extends NggvBaseControlValueAccessorComponent
|
|
|
47
47
|
};
|
|
48
48
|
}
|
|
49
49
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvCheckboxComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
50
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvCheckboxComponent, selector: "nggv-checkbox", inputs: { thook: "thook", optionalLabel: "optionalLabel" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n <div\n [id]=\"id + '-checkbox'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n <ng-container *ngIf=\"!labelContentTpl\">\n {{ label }}\n </ng-container>\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n ></ng-template>\n </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div>\n <!-- CHECKBOX FIELD -->\n <label\n [id]=\"id + '-label'\"\n [attr.for]=\"id + '-checkbox'\"\n class=\"form-control\"\n *transloco=\"let t; read: scope\"\n >\n <input\n #input\n type=\"checkbox\"\n [id]=\"id + '-checkbox'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n <!-- LABEL -->\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 <span\n *ngIf=\"\n optional === true || (required !== true && optional !== false)\n \"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n <span>{{ label }}</span>\n </ng-container>\n </ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <ng-container *transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-checkbox'\"\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 <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\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 </div>\n </ng-container>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);--gds-comp-checkbox-container-color-disabled: var(--gds-
|
|
50
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvCheckboxComponent, selector: "nggv-checkbox", inputs: { thook: "thook", optionalLabel: "optionalLabel" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n <div\n [id]=\"id + '-checkbox'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n <ng-container *ngIf=\"!labelContentTpl\">\n {{ label }}\n </ng-container>\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n ></ng-template>\n </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div>\n <!-- CHECKBOX FIELD -->\n <label\n [id]=\"id + '-label'\"\n [attr.for]=\"id + '-checkbox'\"\n class=\"form-control\"\n *transloco=\"let t; read: scope\"\n >\n <input\n #input\n type=\"checkbox\"\n [id]=\"id + '-checkbox'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n <!-- LABEL -->\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 <span\n *ngIf=\"\n optional === true || (required !== true && optional !== false)\n \"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n <span>{{ label }}</span>\n </ng-container>\n </ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <ng-container *transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-checkbox'\"\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 <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\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 </div>\n </ng-container>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base300);--gds-comp-checkbox-border-color: var(--gds-ref-pallet-base900);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-ref-pallet-base900);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2)}:host label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control{align-items:flex-start}:host label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=checkbox]:focus-visible):focus,:host label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}:host label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}:host .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}:host .is-invalid label.form-control.is-invalid{border:none;margin:0}}:host label.form-control input[type=checkbox]:disabled~i,:host label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~i::placeholder,:host label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i,:host label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i:after,:host label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~span,:host label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=checkbox]:disabled~span::placeholder,:host label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}:host label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}:host label.form-control input[type=checkbox]:checked~i:after{opacity:1}:host .form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none;line-height:1.125rem}:host .form-control:has(input:disabled){cursor:not-allowed}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host i:after{box-sizing:border-box}\n"], dependencies: [{ 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.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
|
|
51
51
|
}
|
|
52
52
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvCheckboxComponent, decorators: [{
|
|
53
53
|
type: Component,
|
|
54
|
-
args: [{ selector: 'nggv-checkbox', template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n <div\n [id]=\"id + '-checkbox'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n <ng-container *ngIf=\"!labelContentTpl\">\n {{ label }}\n </ng-container>\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n ></ng-template>\n </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div>\n <!-- CHECKBOX FIELD -->\n <label\n [id]=\"id + '-label'\"\n [attr.for]=\"id + '-checkbox'\"\n class=\"form-control\"\n *transloco=\"let t; read: scope\"\n >\n <input\n #input\n type=\"checkbox\"\n [id]=\"id + '-checkbox'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n <!-- LABEL -->\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 <span\n *ngIf=\"\n optional === true || (required !== true && optional !== false)\n \"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n <span>{{ label }}</span>\n </ng-container>\n </ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <ng-container *transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-checkbox'\"\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 <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\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 </div>\n </ng-container>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);--gds-comp-checkbox-container-color-disabled: var(--gds-
|
|
54
|
+
args: [{ selector: 'nggv-checkbox', template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n <div\n [id]=\"id + '-checkbox'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n <ng-container *ngIf=\"!labelContentTpl\">\n {{ label }}\n </ng-container>\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n ></ng-template>\n </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div>\n <!-- CHECKBOX FIELD -->\n <label\n [id]=\"id + '-label'\"\n [attr.for]=\"id + '-checkbox'\"\n class=\"form-control\"\n *transloco=\"let t; read: scope\"\n >\n <input\n #input\n type=\"checkbox\"\n [id]=\"id + '-checkbox'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n <!-- LABEL -->\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 <span\n *ngIf=\"\n optional === true || (required !== true && optional !== false)\n \"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n <span>{{ label }}</span>\n </ng-container>\n </ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <ng-container *transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-checkbox'\"\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 <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\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 </div>\n </ng-container>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base300);--gds-comp-checkbox-border-color: var(--gds-ref-pallet-base900);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-ref-pallet-base900);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2)}:host label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control{align-items:flex-start}:host label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=checkbox]:focus-visible):focus,:host label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}:host label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}:host .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}:host .is-invalid label.form-control.is-invalid{border:none;margin:0}}:host label.form-control input[type=checkbox]:disabled~i,:host label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~i::placeholder,:host label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i,:host label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i:after,:host label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~span,:host label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=checkbox]:disabled~span::placeholder,:host label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}:host label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}:host label.form-control input[type=checkbox]:checked~i:after{opacity:1}:host .form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none;line-height:1.125rem}:host .form-control:has(input:disabled){cursor:not-allowed}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host i:after{box-sizing:border-box}\n"] }]
|
|
55
55
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
56
56
|
type: Self
|
|
57
57
|
}, {
|