@norwegian/core-components 5.6.0 → 5.7.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/bundles/norwegian-core-components.umd.js +8 -2
- package/bundles/norwegian-core-components.umd.js.map +1 -1
- package/esm2015/lib/components/input/input.component.js +9 -3
- package/fesm2015/norwegian-core-components.js +8 -2
- package/fesm2015/norwegian-core-components.js.map +1 -1
- package/lib/components/input/input.component.d.ts +7 -0
- package/norwegian-core-components.metadata.json +1 -1
- package/package.json +1 -1
|
@@ -8041,6 +8041,7 @@
|
|
|
8041
8041
|
function InputComponent() {
|
|
8042
8042
|
var _this = _super.call(this, 'nas-input') || this;
|
|
8043
8043
|
_this.modelChange = new i0.EventEmitter(false);
|
|
8044
|
+
_this.blur = new i0.EventEmitter(false);
|
|
8044
8045
|
/**
|
|
8045
8046
|
* @description
|
|
8046
8047
|
* Input type of the element.
|
|
@@ -8146,12 +8147,15 @@
|
|
|
8146
8147
|
}
|
|
8147
8148
|
}
|
|
8148
8149
|
};
|
|
8150
|
+
InputComponent.prototype.onBlur = function (value) {
|
|
8151
|
+
this.blur.emit(value);
|
|
8152
|
+
};
|
|
8149
8153
|
return InputComponent;
|
|
8150
8154
|
}(NasComponentBase));
|
|
8151
8155
|
InputComponent.decorators = [
|
|
8152
8156
|
{ type: i0.Component, args: [{
|
|
8153
8157
|
selector: 'nas-input',
|
|
8154
|
-
template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputNotReactive [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputReactive [formControlName]=\"nasFormControlName\"\n [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"
|
|
8158
|
+
template: "<ng-container *ngIf=\"!nasFormControlName; else reactiveForm\">\n <label [nasClass]=\"mainClass()\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputNotReactive [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"\n [(ngModel)]=\"model\" />\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-container>\n<ng-template #reactiveForm>\n <label [nasClass]=\"mainClass()\"\n [formGroup]=\"nasFormGroup\">\n <div [nasClass]=\"getClass('controls', exists(labelInside) && 'label-inside')\">\n <p [nasClass]=\"getClass('label')\"\n *ngIf=\"label\">{{label}}</p>\n <input #inputReactive [formControlName]=\"nasFormControlName\"\n [nasClass]=\"getClass('text')\"\n [attr.id]=\"inputId\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.placeholder]=\"placeholder\"\n [attr.readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-invalid]=\"error\"\n [attr.aria-required]=\"required\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.pattern]=\"pattern\"\n (blur)=\"onBlur($event.target.value)\"/>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"exists(error)\">\n <nas-icon icon=\"alert--error\"></nas-icon>\n </span>\n <span [nasClass]=\"getClass('icon')\"\n *ngIf=\"icon && !error\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n </div>\n <span *ngIf=\"exists(line)\" [nasClass]=\"getClass('line')\"></span>\n <p [nasClass]=\"getClass('error')\"\n *ngIf=\"exists(error) && errorMessage\">{{errorMessage}}</p>\n <span [nasClass]=\"getClass('info')\"\n *ngIf=\"info\">{{info}}</span>\n </label>\n</ng-template>\n",
|
|
8155
8159
|
encapsulation: i0.ViewEncapsulation.None,
|
|
8156
8160
|
styles: ["@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@-webkit-keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@-webkit-keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@-webkit-keyframes fade-out{to{opacity:0}}@keyframes fade-out{to{opacity:0}}@-webkit-keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@-webkit-keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@-webkit-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)}}@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-input{display:block;margin-bottom:16px;position:relative}.nas-input__label{font-family:\"Apercu\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-weight:bold;letter-spacing:-.025em;word-spacing:-.025em;display:block;margin-top:0;margin-bottom:6px}@media (min-width: 640px){.nas-input__label{letter-spacing:inherit;word-spacing:inherit}}.nas-input__label~.nas-input__icon{top:45px}.nas-input__text{position:relative;margin-bottom:3px}.nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input__text[disabled]{opacity:.5}.nas-input__line{position:relative;display:block;height:3px;background-color:#c3c3c3;transition:background-color .15s cubic-bezier(0,0,.1,1)}.nas-input__info{display:block;margin-top:9px;margin-bottom:24px}.nas-input--error .nas-input__text{padding-right:40px;background-repeat:no-repeat;background-position:right 9px center}.nas-input--error .nas-input__error{display:block;font-family:\"Apercu\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-weight:normal;color:#d81939}.nas-input--error .nas-input__line{background-color:#d81939}.nas-input--error .nas-input__text:focus~.nas-input__line{background-color:#003251}.nas-input--disabled{color:#909090}.nas-input--disabled .nas-input__text{opacity:.5}.nas-input--loading .nas-input__line{background-color:#003251;-webkit-animation:input-loader ease 1.5s;animation:input-loader ease 1.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;transform-origin:left}.nas-input--spaceless{margin-bottom:0}.nas-input__icon{position:absolute;pointer-events:none;right:12px;top:15px}.nas-input__controls{margin-bottom:0}.nas-input__controls--label-inside{background:#fff}.nas-input__controls--label-inside .nas-input__label{padding-top:9px;padding-left:16px;margin-bottom:0;font-size:14px;line-height:20px}.nas-input__controls--label-inside .nas-input__text{padding:0 16px 9px}.nas-input__controls--label-inside .nas-input__icon{top:22px}@-webkit-keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}@keyframes input-loader{0%{transform:translate(0) scaleX(0)}50%{transform:translate(0) scaleX(1)}to{transform:translate(100%) scaleX(0)}}\n"]
|
|
8157
8161
|
},] }
|
|
@@ -8163,6 +8167,7 @@
|
|
|
8163
8167
|
id: [{ type: i0.Input }],
|
|
8164
8168
|
model: [{ type: i0.Input }],
|
|
8165
8169
|
modelChange: [{ type: i0.Output }],
|
|
8170
|
+
blur: [{ type: i0.Output }],
|
|
8166
8171
|
error: [{ type: i0.Input }],
|
|
8167
8172
|
disabled: [{ type: i0.Input }],
|
|
8168
8173
|
spaceless: [{ type: i0.Input }],
|
|
@@ -8184,7 +8189,8 @@
|
|
|
8184
8189
|
nasFormGroup: [{ type: i0.Input }],
|
|
8185
8190
|
min: [{ type: i0.Input }],
|
|
8186
8191
|
max: [{ type: i0.Input }],
|
|
8187
|
-
line: [{ type: i0.Input }]
|
|
8192
|
+
line: [{ type: i0.Input }],
|
|
8193
|
+
pattern: [{ type: i0.Input }]
|
|
8188
8194
|
};
|
|
8189
8195
|
|
|
8190
8196
|
var InputModule = /** @class */ (function () {
|