@norwegian/core-components 6.30.0 → 6.31.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/assets/icons/icon-check--disabled.svg +7 -0
- package/assets/icons/icon-check.svg +1 -1
- package/assets/icons/icon-chevron-down.svg +1 -1
- package/assets/icons/icon-minus--light.svg +5 -0
- package/assets/icons/icon-minus.svg +5 -0
- package/assets/icons/icon-plus--light.svg +5 -0
- package/assets/icons/icon-plus.svg +5 -0
- package/assets/icons/small/discount--light.svg +3 -0
- package/esm2022/lib/components/checkbox/checkbox.component.mjs +2 -2
- package/esm2022/lib/components/icon/icon.component.mjs +2 -2
- package/esm2022/lib/components/number-field/models/number-field.model.mjs +2 -0
- package/esm2022/lib/components/number-field/number-field.component.mjs +21 -3
- package/esm2022/lib/components/radio/radio.component.mjs +3 -3
- package/fesm2022/norwegian-core-components.mjs +26 -8
- package/fesm2022/norwegian-core-components.mjs.map +1 -1
- package/lib/components/number-field/models/number-field.model.d.ts +5 -0
- package/lib/components/number-field/number-field.component.d.ts +3 -0
- package/package.json +1 -1
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
4
|
+
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
5
|
+
width="14px" height="12px" viewBox="0 0 14 12" enable-background="new 0 0 14 12" xml:space="preserve">
|
|
6
|
+
<polygon fill="#6F6F6F" points="11.7,0 5.8,6.7 2.2,3.1 0,5.3 6,11.3 14,2 "/>
|
|
7
|
+
</svg>
|
|
@@ -3,5 +3,5 @@
|
|
|
3
3
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
4
4
|
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
5
5
|
width="14px" height="12px" viewBox="0 0 14 12" enable-background="new 0 0 14 12" xml:space="preserve">
|
|
6
|
-
<polygon fill="#
|
|
6
|
+
<polygon fill="#15273F" points="11.7,0 5.8,6.7 2.2,3.1 0,5.3 6,11.3 14,2 "/>
|
|
7
7
|
</svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 8"><defs><style>.cls-1{fill:#
|
|
1
|
+
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 8"><defs><style>.cls-1{fill:#15273F;}</style></defs><title>chevron-down</title><polygon class="cls-1" points="0 2.2 2.06 0 6.5 3.9 10.83 0 13 2.2 6.5 8 0 2.2"/></svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="plus">
|
|
3
|
+
<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M7.33301 9V15H9.33301V9H15.333V7H9.33301V1H7.33301V7H1.33301V9H7.33301Z" fill="#FFFFFF"/>
|
|
4
|
+
</g>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="plus">
|
|
3
|
+
<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M7.33301 9V15H9.33301V9H15.333V7H9.33301V1H7.33301V7H1.33301V9H7.33301Z" fill="#6F6F6F"/>
|
|
4
|
+
</g>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.495 0H22.5017C23.3043 0 24 0.643575 24 1.50168V11.4771C24 12.1743 23.5719 13.1397 23.0903 13.6223L13.6187 23.1151C12.4415 24.295 10.5686 24.295 9.3913 23.1151L0.882943 14.5877C-0.294314 13.4078 -0.294314 11.5307 0.882943 10.3508L10.3545 0.8581C10.8361 0.375418 11.7993 0 12.495 0ZM10.6285 9.33333C10.6285 10.0625 10.0455 10.6458 9.31685 10.6458C8.58816 10.6458 8.00521 10.0625 8.00521 9.33333C8.00521 8.60417 8.58816 8 9.31685 8C10.0455 8 10.6285 8.60417 10.6285 9.33333ZM13.3559 14.6875C13.3559 13.9583 13.9388 13.375 14.6675 13.375C15.3962 13.375 16 13.9583 16 14.6875C16 15.4167 15.3962 16 14.6675 16C13.9388 16 13.3559 15.4167 13.3559 14.6875ZM14.5634 8.25C14.8966 7.9375 15.417 7.9375 15.7502 8.25C16.0625 8.58333 16.0625 9.10417 15.7502 9.4375L9.42095 15.7708C9.25439 15.9375 9.0462 16 8.838 16C8.60898 16 8.40078 15.9375 8.23422 15.7708C7.92193 15.4375 7.92193 14.9167 8.23422 14.5833L14.5634 8.25Z" fill="#FFFFFF"/>
|
|
3
|
+
</svg>
|
|
@@ -94,11 +94,11 @@ export class CheckboxComponent extends NasComponentBase {
|
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
97
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CheckboxComponent, selector: "nas-checkbox", inputs: { inputId: "inputId", value: "value", error: "error", disabled: "disabled", block: "block", spaceless: "spaceless", inverted: "inverted", outlined: "outlined", ariaLabel: ["aria-label", "ariaLabel"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], name: "name", required: "required", tabIndex: "tabIndex", checked: "checked", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup" }, outputs: { checkedChange: "checkedChange", focusOnPrevious: "focusOnPrevious" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputReactive", first: true, predicate: ["inputReactive"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass\">\n <input type=\"checkbox\"\n #input\n [id]=\"inputId\"\n [checked]=\"exists(checked)\"\n [disabled]=\"exists(disabled)\"\n [required]=\"exists(required)\"\n [tabIndex]=\"tabIndex\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaLabelledby\"\n [attr.value]=\"value\"\n (change)=\"inputChanged($event)\"\n (click)=\"inputClicked($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-container>\n\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass\"\n #inputReactive\n [formGroup]=\"nasFormGroup\">\n <input type=\"checkbox\"\n [formControlName]=\"nasFormControlName\"\n [id]=\"inputId\"\n [checked]=\"exists(checked)\"\n [required]=\"exists(required)\"\n [tabIndex]=\"tabIndex\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaLabelledby\"\n [attr.value]=\"value\"\n (keydown)=\"onKeydown($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-checkbox{-webkit-user-select:none;-o-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none;user-drag:none;position:relative;display:inline-block;cursor:pointer;padding-left:
|
|
97
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CheckboxComponent, selector: "nas-checkbox", inputs: { inputId: "inputId", value: "value", error: "error", disabled: "disabled", block: "block", spaceless: "spaceless", inverted: "inverted", outlined: "outlined", ariaLabel: ["aria-label", "ariaLabel"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], name: "name", required: "required", tabIndex: "tabIndex", checked: "checked", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup" }, outputs: { checkedChange: "checkedChange", focusOnPrevious: "focusOnPrevious" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "inputReactive", first: true, predicate: ["inputReactive"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass\">\n <input type=\"checkbox\"\n #input\n [id]=\"inputId\"\n [checked]=\"exists(checked)\"\n [disabled]=\"exists(disabled)\"\n [required]=\"exists(required)\"\n [tabIndex]=\"tabIndex\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaLabelledby\"\n [attr.value]=\"value\"\n (change)=\"inputChanged($event)\"\n (click)=\"inputClicked($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-container>\n\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass\"\n #inputReactive\n [formGroup]=\"nasFormGroup\">\n <input type=\"checkbox\"\n [formControlName]=\"nasFormControlName\"\n [id]=\"inputId\"\n [checked]=\"exists(checked)\"\n [required]=\"exists(required)\"\n [tabIndex]=\"tabIndex\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaLabelledby\"\n [attr.value]=\"value\"\n (keydown)=\"onKeydown($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-checkbox{-webkit-user-select:none;-o-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none;user-drag:none;position:relative;display:inline-block;cursor:pointer;padding-left:30px;margin-bottom:24px;margin-right:24px;color:#15273f}.nas-checkbox:hover .nas-checkbox__indicator:after{border-color:#909090}.nas-checkbox input{position:absolute;opacity:0;z-index:-1}.nas-checkbox input:checked+.nas-checkbox__indicator{border-color:#15273f;background-color:#ebf4ff}.nas-checkbox input:checked+.nas-checkbox__indicator:before{transform:scale(.9);opacity:1;top:10px}.nas-checkbox input:checked+.nas-checkbox__indicator:after{border-color:#003251}.nas-checkbox input[disabled]+.nas-checkbox__indicator{background-color:#e3e3e3;border-color:#6f6f6f}.nas-checkbox input[disabled]+.nas-checkbox__indicator:after,.nas-checkbox input[disabled]+.nas-checkbox__indicator:hover:after,.nas-checkbox input[disabled]+.nas-checkbox__indicator:focus:after{border-color:#c3c3c3}.nas-checkbox__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;left:0;border:2px solid #15273F;width:22px;height:22px;background-color:#fff}.nas-checkbox__indicator:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-checkbox__indicator:before{content:\"\";display:inline-block;vertical-align:middle;position:absolute;top:55%;left:50%;width:14px;height:12px;margin-top:-6px;margin-left:-7px;transform-origin:40% 90%;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1);background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%2315273F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox--disabled{color:#6f6f6f;cursor:default}.nas-checkbox--disabled .nas-checkbox__indicator{background-color:#e3e3e3}.nas-checkbox--disabled .nas-checkbox__indicator:before{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%236F6F6F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox--disabled:hover .nas-checkbox__indicator:after{border-color:#c3c3c3}.nas-checkbox--error input:checked+.nas-checkbox__indicator:after,.nas-checkbox--error input+.nas-checkbox__indicator:after{border-color:#e5212d}.nas-checkbox--inverted{color:#fff}.nas-checkbox--inverted input:checked+.nas-checkbox__indicator:after,.nas-checkbox--inverted input+.nas-checkbox__indicator:after{border-color:#fff}.nas-checkbox--inverted-error{color:#fff}.nas-checkbox--inverted-error input:checked+.nas-checkbox__indicator:after,.nas-checkbox--inverted-error input+.nas-checkbox__indicator:after{border-color:#e5212d}.nas-checkbox--outlined .nas-checkbox__indicator{border:2px solid #c3c3c3}.nas-checkbox--outlined .nas-checkbox__indicator:after{display:none}.nas-checkbox--outlined-error .nas-checkbox__indicator{border:2px solid #E5212D;background-color:#fff5f3}.nas-checkbox--outlined-error .nas-checkbox__indicator:after{display:none}.nas-checkbox--spaceless{margin-bottom:6px}.nas-checkbox--block{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i3.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
98
98
|
}
|
|
99
99
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
100
100
|
type: Component,
|
|
101
|
-
args: [{ selector: 'nas-checkbox', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass\">\n <input type=\"checkbox\"\n #input\n [id]=\"inputId\"\n [checked]=\"exists(checked)\"\n [disabled]=\"exists(disabled)\"\n [required]=\"exists(required)\"\n [tabIndex]=\"tabIndex\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaLabelledby\"\n [attr.value]=\"value\"\n (change)=\"inputChanged($event)\"\n (click)=\"inputClicked($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-container>\n\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass\"\n #inputReactive\n [formGroup]=\"nasFormGroup\">\n <input type=\"checkbox\"\n [formControlName]=\"nasFormControlName\"\n [id]=\"inputId\"\n [checked]=\"exists(checked)\"\n [required]=\"exists(required)\"\n [tabIndex]=\"tabIndex\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaLabelledby\"\n [attr.value]=\"value\"\n (keydown)=\"onKeydown($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-checkbox{-webkit-user-select:none;-o-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none;user-drag:none;position:relative;display:inline-block;cursor:pointer;padding-left:
|
|
101
|
+
args: [{ selector: 'nas-checkbox', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass\">\n <input type=\"checkbox\"\n #input\n [id]=\"inputId\"\n [checked]=\"exists(checked)\"\n [disabled]=\"exists(disabled)\"\n [required]=\"exists(required)\"\n [tabIndex]=\"tabIndex\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaLabelledby\"\n [attr.value]=\"value\"\n (change)=\"inputChanged($event)\"\n (click)=\"inputClicked($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-container>\n\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass\"\n #inputReactive\n [formGroup]=\"nasFormGroup\">\n <input type=\"checkbox\"\n [formControlName]=\"nasFormControlName\"\n [id]=\"inputId\"\n [checked]=\"exists(checked)\"\n [required]=\"exists(required)\"\n [tabIndex]=\"tabIndex\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaLabelledby\"\n [attr.value]=\"value\"\n (keydown)=\"onKeydown($event)\" />\n <span [nasClass]=\"getClass('indicator')\"></span>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </label>\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-checkbox{-webkit-user-select:none;-o-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-drag:none;user-drag:none;position:relative;display:inline-block;cursor:pointer;padding-left:30px;margin-bottom:24px;margin-right:24px;color:#15273f}.nas-checkbox:hover .nas-checkbox__indicator:after{border-color:#909090}.nas-checkbox input{position:absolute;opacity:0;z-index:-1}.nas-checkbox input:checked+.nas-checkbox__indicator{border-color:#15273f;background-color:#ebf4ff}.nas-checkbox input:checked+.nas-checkbox__indicator:before{transform:scale(.9);opacity:1;top:10px}.nas-checkbox input:checked+.nas-checkbox__indicator:after{border-color:#003251}.nas-checkbox input[disabled]+.nas-checkbox__indicator{background-color:#e3e3e3;border-color:#6f6f6f}.nas-checkbox input[disabled]+.nas-checkbox__indicator:after,.nas-checkbox input[disabled]+.nas-checkbox__indicator:hover:after,.nas-checkbox input[disabled]+.nas-checkbox__indicator:focus:after{border-color:#c3c3c3}.nas-checkbox__indicator{position:absolute;display:block;-webkit-user-select:none;user-select:none;left:0;border:2px solid #15273F;width:22px;height:22px;background-color:#fff}.nas-checkbox__indicator:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-checkbox__indicator:before{content:\"\";display:inline-block;vertical-align:middle;position:absolute;top:55%;left:50%;width:14px;height:12px;margin-top:-6px;margin-left:-7px;transform-origin:40% 90%;opacity:0;transform:scale(0);transition:all .1s cubic-bezier(0,0,.1,1);background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%2315273F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox--disabled{color:#6f6f6f;cursor:default}.nas-checkbox--disabled .nas-checkbox__indicator{background-color:#e3e3e3}.nas-checkbox--disabled .nas-checkbox__indicator:before{background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 18.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Layer_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%2214px%22 height%3D%2212px%22 viewBox%3D%220 0 14 12%22 enable-background%3D%22new 0 0 14 12%22 xml%3Aspace%3D%22preserve%22%3E%3Cpolygon fill%3D%22%236F6F6F%22 points%3D%2211.7%2C0 5.8%2C6.7 2.2%2C3.1 0%2C5.3 6%2C11.3 14%2C2 %22%2F%3E%3C%2Fsvg%3E\");background-repeat:no-repeat}.nas-checkbox--disabled:hover .nas-checkbox__indicator:after{border-color:#c3c3c3}.nas-checkbox--error input:checked+.nas-checkbox__indicator:after,.nas-checkbox--error input+.nas-checkbox__indicator:after{border-color:#e5212d}.nas-checkbox--inverted{color:#fff}.nas-checkbox--inverted input:checked+.nas-checkbox__indicator:after,.nas-checkbox--inverted input+.nas-checkbox__indicator:after{border-color:#fff}.nas-checkbox--inverted-error{color:#fff}.nas-checkbox--inverted-error input:checked+.nas-checkbox__indicator:after,.nas-checkbox--inverted-error input+.nas-checkbox__indicator:after{border-color:#e5212d}.nas-checkbox--outlined .nas-checkbox__indicator{border:2px solid #c3c3c3}.nas-checkbox--outlined .nas-checkbox__indicator:after{display:none}.nas-checkbox--outlined-error .nas-checkbox__indicator{border:2px solid #E5212D;background-color:#fff5f3}.nas-checkbox--outlined-error .nas-checkbox__indicator:after{display:none}.nas-checkbox--spaceless{margin-bottom:6px}.nas-checkbox--block{display:block}\n"] }]
|
|
102
102
|
}], ctorParameters: function () { return []; }, propDecorators: { input: [{
|
|
103
103
|
type: ViewChild,
|
|
104
104
|
args: ['input']
|