@norwegian/core-components 7.9.1 → 7.9.2
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.
|
@@ -63,11 +63,11 @@ export class ToggleComponent extends NasComponentBase {
|
|
|
63
63
|
history.pushState(null, '', option.href);
|
|
64
64
|
}
|
|
65
65
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
66
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToggleComponent, selector: "nas-toggle", inputs: { options: "options", large: "large", compact: "compact", rounded: "rounded", small: "small", big: "big", selectedValue: "selectedValue", label: "label", vertical: "vertical", grouped: "grouped", group: "group", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", scrollable: "scrollable" }, outputs: { handleChange: "handleChange" }, usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"mainClasses()\" *ngIf=\"!nasFormControlName; else reactiveForm\">\n <h3 [nasClass]=\"getClass('title')\">{{label}}</h3>\n <div [nasClass]=\"getClass('items')\">\n <span [nasClass]=\"getClass('item')\" *ngFor=\"let option of options\">\n <input [nasClass]=\"getClass('radio')\" [attr.id]=\"getOptionId(option)\" [checked]=\"option.value === selectedValue\"\n [attr.name]=\"group\" type=\"radio\" [attr.value]=\"option.value\" (change)=\"onChange(option)\">\n <label [nasClass]=\"getClass('label')\" [attr.for]=\"getOptionId(option)\">\n <ng-container *ngIf=\"option?.href; else noLink\">\n <a [nasClass]=\"getClass('link', selectedValue == option.value && 'selected')\" [href]=\"option.href\"\n (click)=\"onClickHref($event, option)\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </a>\n </ng-container>\n <ng-template #noLink>\n <div [nasClass]=\"getClass('label--content')\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </div>\n </ng-template>\n </label>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"isRounded\">{{option.text}}</span>\n </span>\n </div>\n</div>\n<ng-template #reactiveForm>\n <div [nasClass]=\"mainClasses()\">\n <h3 [nasClass]=\"getClass('title')\">{{label}}</h3>\n <div [nasClass]=\"getClass('items')\" [formGroup]=\"nasFormGroup\">\n <span [nasClass]=\"getClass('item')\" *ngFor=\"let option of options\">\n <input [formControlName]=\"nasFormControlName\" [nasClass]=\"getClass('radio')\" [attr.id]=\"getOptionId(option)\"\n [checked]=\"option.value === selectedValue\" [name]=\"group\" type=\"radio\" [value]=\"option.value\"\n (change)=\"onChange(option)\">\n <label [nasClass]=\"getClass('label')\" [attr.for]=\"getOptionId(option)\">\n <ng-container *ngIf=\"option?.href; else noLink\">\n <a [nasClass]=\"getClass('link', selectedValue == option.value && 'selected')\" [href]=\"option.href\"\n (click)=\"onClickHref($event, option)\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </a>\n </ng-container>\n <ng-template #noLink>\n <div [nasClass]=\"getClass('label--content')\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </div>\n </ng-template>\n </label>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"isRounded\">{{option.text}}</span>\n </span>\n </div>\n </div>\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-toggle__items{display:flex;flex-grow:2;perspective:1000px}.nas-toggle__title{font-size:16px;line-height:24px}.nas-toggle .icon-small{display:none;margin-left:-3px;margin-right:9px}@media (min-width: 640px){.nas-toggle .icon-small{display:inline-block}}.nas-toggle__item{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;animation-delay:.42s;-webkit-user-select:none;user-select:none;width:100%}.nas-toggle__item:nth-child(1){animation-delay:60ms}.nas-toggle__item:nth-child(2){animation-delay:.12s}.nas-toggle__item:nth-child(3){animation-delay:.18s}.nas-toggle__item:nth-child(4){animation-delay:.24s}.nas-toggle__item:nth-child(5){animation-delay:.3s}.nas-toggle__item:nth-child(6){animation-delay:.36s}.nas-toggle__item:not(:first-child){margin-left:2px}.nas-toggle__item:not(:last-child){margin-right:2px}.nas-toggle__label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:16px;line-height:24px;text-align:center;color:#15273f;white-space:nowrap;cursor:pointer;margin:0;border:2px solid #E9E7E4;background-color:#fff;transition:transform .15s cubic-bezier(0,0,.1,1)}.nas-toggle__label--content{padding:12px}.nas-toggle__label:hover,.nas-toggle__label:focus{border-color:#15273f}.nas-toggle__label:active{transform:translateY(3px)}.nas-toggle__price{display:block}@media (min-width: 640px){.nas-toggle__price{display:none}}.nas-toggle--compact .nas-toggle__label{font-size:14px;line-height:20px}.nas-toggle--compact .nas-toggle__label--content,.nas-toggle--compact .nas-toggle__link{padding:6px}.nas-toggle--large{align-items:stretch}.nas-toggle--large .icon-small{margin:0}.nas-toggle--large .nas-toggle__label{height:100%;border-color:#fff;background-color:#fff}.nas-toggle--large .nas-toggle__label--content{padding:24px}.nas-toggle--large .nas-toggle__label:hover,.nas-toggle--large .nas-toggle__label:focus{border-color:#15273f}.nas-toggle--large .nas-toggle__item:not(:first-child){margin-left:6px}.nas-toggle--large .nas-toggle__item:not(:last-child){margin-right:6px}.nas-toggle--large .nas-toggle__text{display:block}@media (min-width: 640px){.nas-toggle--large .nas-toggle__price{display:block;margin-bottom:-9px}}.nas-toggle--large .nas-toggle__link{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.nas-toggle--grouped{padding-bottom:3px;border-bottom:3px solid #15273F}.nas-toggle--vertical .nas-toggle__items{flex-direction:column;padding-bottom:0;border-bottom:0}.nas-toggle--vertical .nas-toggle__item,.nas-toggle--vertical .nas-toggle__item:not(:first-child),.nas-toggle--vertical .nas-toggle__item:not(:last-child){margin:0 0 3px}.nas-toggle--vertical .nas-toggle__label{text-align:left}.nas-toggle--vertical .nas-toggle__label--content,.nas-toggle--vertical .nas-toggle__link{padding:6px 24px}.nas-toggle--rounded .nas-toggle__label{margin:0 auto 6px;height:83px;width:83px;border-radius:100%}.nas-toggle--rounded .nas-toggle__label:hover,.nas-toggle--rounded .nas-toggle__label:focus{border-color:#fff;background-color:#fff}.nas-toggle--rounded .nas-toggle__item:not(:first-child){margin-left:12px}.nas-toggle--rounded .nas-toggle__item:not(:last-child){margin-right:12px}.nas-toggle--rounded .nas-toggle__text{display:block;text-align:center}.nas-toggle--big .nas-toggle__label{height:96px;width:96px;padding-top:9px}.nas-toggle--small .nas-toggle__label{padding-top:6px;height:65px;width:65px}.nas-toggle__radio{position:fixed;top:-99px;left:-99px;opacity:0}.nas-toggle__radio:checked~.nas-toggle__label{color:#15273f;border-color:#15273f;background-color:#ebf4ff}.nas-toggle__radio:focus-visible~.nas-toggle__label{box-shadow:0 0 1px 2px #e9e7e4,0 0 2px 3px #7ca4cd}.nas-toggle__radio:disabled~.nas-toggle__label{opacity:.4;pointer-events:none}.nas-toggle--scrollable .nas-toggle__items{overflow-x:auto;overflow-y:hidden;padding-bottom:20px;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar{height:4px;width:4px}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-thumb{background:#15273f;border-radius:2px}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-track-piece:end{margin-right:100px;background:#fff}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-track-piece:start{margin-left:100px;background:#fff}.nas-toggle--scrollable .nas-toggle__items::-moz-scrollbar{height:4px;width:4px}.nas-toggle__link{display:block;color:#15273f;border:0;padding:12px}.nas-toggle__link--selected{color:#fff}::ng-deep .nas-icon-small{margin-right:6px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i3.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
66
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToggleComponent, selector: "nas-toggle", inputs: { options: "options", large: "large", compact: "compact", rounded: "rounded", small: "small", big: "big", selectedValue: "selectedValue", label: "label", vertical: "vertical", grouped: "grouped", group: "group", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", scrollable: "scrollable" }, outputs: { handleChange: "handleChange" }, usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"mainClasses()\" *ngIf=\"!nasFormControlName; else reactiveForm\">\n <h3 [nasClass]=\"getClass('title')\">{{label}}</h3>\n <div [nasClass]=\"getClass('items')\">\n <span [nasClass]=\"getClass('item')\" *ngFor=\"let option of options\">\n <input [nasClass]=\"getClass('radio')\" [attr.id]=\"getOptionId(option)\" [checked]=\"option.value === selectedValue\"\n [attr.name]=\"group\" type=\"radio\" [attr.value]=\"option.value\" (change)=\"onChange(option)\">\n <label [nasClass]=\"getClass('label')\" [attr.for]=\"getOptionId(option)\">\n <ng-container *ngIf=\"option?.href; else noLink\">\n <a [nasClass]=\"getClass('link', selectedValue == option.value && 'selected')\" [href]=\"option.href\"\n (click)=\"onClickHref($event, option)\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </a>\n </ng-container>\n <ng-template #noLink>\n <div [nasClass]=\"getClass('label--content')\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </div>\n </ng-template>\n </label>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"isRounded\">{{option.text}}</span>\n </span>\n </div>\n</div>\n<ng-template #reactiveForm>\n <div [nasClass]=\"mainClasses()\">\n <h3 [nasClass]=\"getClass('title')\">{{label}}</h3>\n <div [nasClass]=\"getClass('items')\" [formGroup]=\"nasFormGroup\">\n <span [nasClass]=\"getClass('item')\" *ngFor=\"let option of options\">\n <input [formControlName]=\"nasFormControlName\" [nasClass]=\"getClass('radio')\" [attr.id]=\"getOptionId(option)\"\n [checked]=\"option.value === selectedValue\" [name]=\"group\" type=\"radio\" [value]=\"option.value\"\n (change)=\"onChange(option)\">\n <label [nasClass]=\"getClass('label')\" [attr.for]=\"getOptionId(option)\">\n <ng-container *ngIf=\"option?.href; else noLink\">\n <a [nasClass]=\"getClass('link', selectedValue == option.value && 'selected')\" [href]=\"option.href\"\n (click)=\"onClickHref($event, option)\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </a>\n </ng-container>\n <ng-template #noLink>\n <div [nasClass]=\"getClass('label--content')\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </div>\n </ng-template>\n </label>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"isRounded\">{{option.text}}</span>\n </span>\n </div>\n </div>\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-toggle__items{display:flex;flex-grow:2;perspective:1000px}.nas-toggle__title{font-size:16px;line-height:24px}.nas-toggle .icon-small{display:none;margin-left:-3px;margin-right:9px}@media (min-width: 640px){.nas-toggle .icon-small{display:inline-block}}.nas-toggle__item{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;animation-delay:.42s;-webkit-user-select:none;user-select:none;width:100%}.nas-toggle__item:nth-child(1){animation-delay:60ms}.nas-toggle__item:nth-child(2){animation-delay:.12s}.nas-toggle__item:nth-child(3){animation-delay:.18s}.nas-toggle__item:nth-child(4){animation-delay:.24s}.nas-toggle__item:nth-child(5){animation-delay:.3s}.nas-toggle__item:nth-child(6){animation-delay:.36s}.nas-toggle__item:not(:first-child){margin-left:2px}.nas-toggle__item:not(:last-child){margin-right:2px}.nas-toggle__label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:16px;line-height:24px;text-align:center;color:#15273f;white-space:nowrap;cursor:pointer;margin:0;border:2px solid #E9E7E4;background-color:#fff;transition:transform .15s cubic-bezier(0,0,.1,1)}.nas-toggle__label--content{padding:12px}.nas-toggle__label:hover,.nas-toggle__label:focus{border-color:#15273f}.nas-toggle__label:active{transform:translateY(3px)}.nas-toggle__price{display:block}@media (min-width: 640px){.nas-toggle__price{display:none}}.nas-toggle--compact .nas-toggle__label{font-size:14px;line-height:20px}.nas-toggle--compact .nas-toggle__label--content,.nas-toggle--compact .nas-toggle__link{padding:6px}.nas-toggle--large{align-items:stretch}.nas-toggle--large .icon-small{margin:0}.nas-toggle--large .nas-toggle__label{height:100%;border-color:#fff;background-color:#fff}.nas-toggle--large .nas-toggle__label--content{padding:24px}.nas-toggle--large .nas-toggle__label:hover,.nas-toggle--large .nas-toggle__label:focus{border-color:#15273f}.nas-toggle--large .nas-toggle__item:not(:first-child){margin-left:6px}.nas-toggle--large .nas-toggle__item:not(:last-child){margin-right:6px}.nas-toggle--large .nas-toggle__text{display:block}@media (min-width: 640px){.nas-toggle--large .nas-toggle__price{display:block;margin-bottom:-9px}}.nas-toggle--large .nas-toggle__link{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.nas-toggle--grouped{padding-bottom:3px;border-bottom:3px solid #15273F}.nas-toggle--vertical .nas-toggle__items{flex-direction:column;padding-bottom:0;border-bottom:0}.nas-toggle--vertical .nas-toggle__item,.nas-toggle--vertical .nas-toggle__item:not(:first-child),.nas-toggle--vertical .nas-toggle__item:not(:last-child){margin:0 0 3px}.nas-toggle--vertical .nas-toggle__label{text-align:left}.nas-toggle--vertical .nas-toggle__label--content,.nas-toggle--vertical .nas-toggle__link{padding:6px 24px}.nas-toggle--rounded .nas-toggle__label{margin:0 auto 6px;height:83px;width:83px;border-radius:100%}.nas-toggle--rounded .nas-toggle__label:hover,.nas-toggle--rounded .nas-toggle__label:focus{border-color:#fff;background-color:#fff}.nas-toggle--rounded .nas-toggle__item:not(:first-child){margin-left:12px}.nas-toggle--rounded .nas-toggle__item:not(:last-child){margin-right:12px}.nas-toggle--rounded .nas-toggle__text{display:block;text-align:center}.nas-toggle--big .nas-toggle__label{height:96px;width:96px;padding-top:9px}.nas-toggle--small .nas-toggle__label{padding-top:6px;height:65px;width:65px}.nas-toggle__radio{position:fixed;top:-99px;left:-99px;opacity:0}.nas-toggle__radio:checked~.nas-toggle__label{color:#15273f;border-color:#15273f;background-color:#ebf4ff}.nas-toggle__radio:focus-visible~.nas-toggle__label{box-shadow:0 0 1px 2px #e9e7e4,0 0 2px 3px #7ca4cd}.nas-toggle__radio:disabled~.nas-toggle__label{opacity:.4;pointer-events:none}.nas-toggle--scrollable .nas-toggle__items{overflow-x:auto;overflow-y:hidden;padding-bottom:20px;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar{height:4px;width:4px}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-thumb{background:#15273f;border-radius:2px}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-track-piece:end{margin-right:100px;background:#fff}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-track-piece:start{margin-left:100px;background:#fff}.nas-toggle--scrollable .nas-toggle__items::-moz-scrollbar{height:4px;width:4px}.nas-toggle__link{display:block;color:#15273f;border:0;padding:12px}::ng-deep .nas-icon-small{margin-right:6px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i3.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
67
67
|
}
|
|
68
68
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
69
69
|
type: Component,
|
|
70
|
-
args: [{ selector: 'nas-toggle', template: "<div [nasClass]=\"mainClasses()\" *ngIf=\"!nasFormControlName; else reactiveForm\">\n <h3 [nasClass]=\"getClass('title')\">{{label}}</h3>\n <div [nasClass]=\"getClass('items')\">\n <span [nasClass]=\"getClass('item')\" *ngFor=\"let option of options\">\n <input [nasClass]=\"getClass('radio')\" [attr.id]=\"getOptionId(option)\" [checked]=\"option.value === selectedValue\"\n [attr.name]=\"group\" type=\"radio\" [attr.value]=\"option.value\" (change)=\"onChange(option)\">\n <label [nasClass]=\"getClass('label')\" [attr.for]=\"getOptionId(option)\">\n <ng-container *ngIf=\"option?.href; else noLink\">\n <a [nasClass]=\"getClass('link', selectedValue == option.value && 'selected')\" [href]=\"option.href\"\n (click)=\"onClickHref($event, option)\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </a>\n </ng-container>\n <ng-template #noLink>\n <div [nasClass]=\"getClass('label--content')\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </div>\n </ng-template>\n </label>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"isRounded\">{{option.text}}</span>\n </span>\n </div>\n</div>\n<ng-template #reactiveForm>\n <div [nasClass]=\"mainClasses()\">\n <h3 [nasClass]=\"getClass('title')\">{{label}}</h3>\n <div [nasClass]=\"getClass('items')\" [formGroup]=\"nasFormGroup\">\n <span [nasClass]=\"getClass('item')\" *ngFor=\"let option of options\">\n <input [formControlName]=\"nasFormControlName\" [nasClass]=\"getClass('radio')\" [attr.id]=\"getOptionId(option)\"\n [checked]=\"option.value === selectedValue\" [name]=\"group\" type=\"radio\" [value]=\"option.value\"\n (change)=\"onChange(option)\">\n <label [nasClass]=\"getClass('label')\" [attr.for]=\"getOptionId(option)\">\n <ng-container *ngIf=\"option?.href; else noLink\">\n <a [nasClass]=\"getClass('link', selectedValue == option.value && 'selected')\" [href]=\"option.href\"\n (click)=\"onClickHref($event, option)\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </a>\n </ng-container>\n <ng-template #noLink>\n <div [nasClass]=\"getClass('label--content')\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </div>\n </ng-template>\n </label>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"isRounded\">{{option.text}}</span>\n </span>\n </div>\n </div>\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-toggle__items{display:flex;flex-grow:2;perspective:1000px}.nas-toggle__title{font-size:16px;line-height:24px}.nas-toggle .icon-small{display:none;margin-left:-3px;margin-right:9px}@media (min-width: 640px){.nas-toggle .icon-small{display:inline-block}}.nas-toggle__item{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;animation-delay:.42s;-webkit-user-select:none;user-select:none;width:100%}.nas-toggle__item:nth-child(1){animation-delay:60ms}.nas-toggle__item:nth-child(2){animation-delay:.12s}.nas-toggle__item:nth-child(3){animation-delay:.18s}.nas-toggle__item:nth-child(4){animation-delay:.24s}.nas-toggle__item:nth-child(5){animation-delay:.3s}.nas-toggle__item:nth-child(6){animation-delay:.36s}.nas-toggle__item:not(:first-child){margin-left:2px}.nas-toggle__item:not(:last-child){margin-right:2px}.nas-toggle__label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:16px;line-height:24px;text-align:center;color:#15273f;white-space:nowrap;cursor:pointer;margin:0;border:2px solid #E9E7E4;background-color:#fff;transition:transform .15s cubic-bezier(0,0,.1,1)}.nas-toggle__label--content{padding:12px}.nas-toggle__label:hover,.nas-toggle__label:focus{border-color:#15273f}.nas-toggle__label:active{transform:translateY(3px)}.nas-toggle__price{display:block}@media (min-width: 640px){.nas-toggle__price{display:none}}.nas-toggle--compact .nas-toggle__label{font-size:14px;line-height:20px}.nas-toggle--compact .nas-toggle__label--content,.nas-toggle--compact .nas-toggle__link{padding:6px}.nas-toggle--large{align-items:stretch}.nas-toggle--large .icon-small{margin:0}.nas-toggle--large .nas-toggle__label{height:100%;border-color:#fff;background-color:#fff}.nas-toggle--large .nas-toggle__label--content{padding:24px}.nas-toggle--large .nas-toggle__label:hover,.nas-toggle--large .nas-toggle__label:focus{border-color:#15273f}.nas-toggle--large .nas-toggle__item:not(:first-child){margin-left:6px}.nas-toggle--large .nas-toggle__item:not(:last-child){margin-right:6px}.nas-toggle--large .nas-toggle__text{display:block}@media (min-width: 640px){.nas-toggle--large .nas-toggle__price{display:block;margin-bottom:-9px}}.nas-toggle--large .nas-toggle__link{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.nas-toggle--grouped{padding-bottom:3px;border-bottom:3px solid #15273F}.nas-toggle--vertical .nas-toggle__items{flex-direction:column;padding-bottom:0;border-bottom:0}.nas-toggle--vertical .nas-toggle__item,.nas-toggle--vertical .nas-toggle__item:not(:first-child),.nas-toggle--vertical .nas-toggle__item:not(:last-child){margin:0 0 3px}.nas-toggle--vertical .nas-toggle__label{text-align:left}.nas-toggle--vertical .nas-toggle__label--content,.nas-toggle--vertical .nas-toggle__link{padding:6px 24px}.nas-toggle--rounded .nas-toggle__label{margin:0 auto 6px;height:83px;width:83px;border-radius:100%}.nas-toggle--rounded .nas-toggle__label:hover,.nas-toggle--rounded .nas-toggle__label:focus{border-color:#fff;background-color:#fff}.nas-toggle--rounded .nas-toggle__item:not(:first-child){margin-left:12px}.nas-toggle--rounded .nas-toggle__item:not(:last-child){margin-right:12px}.nas-toggle--rounded .nas-toggle__text{display:block;text-align:center}.nas-toggle--big .nas-toggle__label{height:96px;width:96px;padding-top:9px}.nas-toggle--small .nas-toggle__label{padding-top:6px;height:65px;width:65px}.nas-toggle__radio{position:fixed;top:-99px;left:-99px;opacity:0}.nas-toggle__radio:checked~.nas-toggle__label{color:#15273f;border-color:#15273f;background-color:#ebf4ff}.nas-toggle__radio:focus-visible~.nas-toggle__label{box-shadow:0 0 1px 2px #e9e7e4,0 0 2px 3px #7ca4cd}.nas-toggle__radio:disabled~.nas-toggle__label{opacity:.4;pointer-events:none}.nas-toggle--scrollable .nas-toggle__items{overflow-x:auto;overflow-y:hidden;padding-bottom:20px;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar{height:4px;width:4px}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-thumb{background:#15273f;border-radius:2px}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-track-piece:end{margin-right:100px;background:#fff}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-track-piece:start{margin-left:100px;background:#fff}.nas-toggle--scrollable .nas-toggle__items::-moz-scrollbar{height:4px;width:4px}.nas-toggle__link{display:block;color:#15273f;border:0;padding:12px}
|
|
70
|
+
args: [{ selector: 'nas-toggle', template: "<div [nasClass]=\"mainClasses()\" *ngIf=\"!nasFormControlName; else reactiveForm\">\n <h3 [nasClass]=\"getClass('title')\">{{label}}</h3>\n <div [nasClass]=\"getClass('items')\">\n <span [nasClass]=\"getClass('item')\" *ngFor=\"let option of options\">\n <input [nasClass]=\"getClass('radio')\" [attr.id]=\"getOptionId(option)\" [checked]=\"option.value === selectedValue\"\n [attr.name]=\"group\" type=\"radio\" [attr.value]=\"option.value\" (change)=\"onChange(option)\">\n <label [nasClass]=\"getClass('label')\" [attr.for]=\"getOptionId(option)\">\n <ng-container *ngIf=\"option?.href; else noLink\">\n <a [nasClass]=\"getClass('link', selectedValue == option.value && 'selected')\" [href]=\"option.href\"\n (click)=\"onClickHref($event, option)\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </a>\n </ng-container>\n <ng-template #noLink>\n <div [nasClass]=\"getClass('label--content')\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </div>\n </ng-template>\n </label>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"isRounded\">{{option.text}}</span>\n </span>\n </div>\n</div>\n<ng-template #reactiveForm>\n <div [nasClass]=\"mainClasses()\">\n <h3 [nasClass]=\"getClass('title')\">{{label}}</h3>\n <div [nasClass]=\"getClass('items')\" [formGroup]=\"nasFormGroup\">\n <span [nasClass]=\"getClass('item')\" *ngFor=\"let option of options\">\n <input [formControlName]=\"nasFormControlName\" [nasClass]=\"getClass('radio')\" [attr.id]=\"getOptionId(option)\"\n [checked]=\"option.value === selectedValue\" [name]=\"group\" type=\"radio\" [value]=\"option.value\"\n (change)=\"onChange(option)\">\n <label [nasClass]=\"getClass('label')\" [attr.for]=\"getOptionId(option)\">\n <ng-container *ngIf=\"option?.href; else noLink\">\n <a [nasClass]=\"getClass('link', selectedValue == option.value && 'selected')\" [href]=\"option.href\"\n (click)=\"onClickHref($event, option)\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </a>\n </ng-container>\n <ng-template #noLink>\n <div [nasClass]=\"getClass('label--content')\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </div>\n </ng-template>\n </label>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"isRounded\">{{option.text}}</span>\n </span>\n </div>\n </div>\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-toggle__items{display:flex;flex-grow:2;perspective:1000px}.nas-toggle__title{font-size:16px;line-height:24px}.nas-toggle .icon-small{display:none;margin-left:-3px;margin-right:9px}@media (min-width: 640px){.nas-toggle .icon-small{display:inline-block}}.nas-toggle__item{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;animation-delay:.42s;-webkit-user-select:none;user-select:none;width:100%}.nas-toggle__item:nth-child(1){animation-delay:60ms}.nas-toggle__item:nth-child(2){animation-delay:.12s}.nas-toggle__item:nth-child(3){animation-delay:.18s}.nas-toggle__item:nth-child(4){animation-delay:.24s}.nas-toggle__item:nth-child(5){animation-delay:.3s}.nas-toggle__item:nth-child(6){animation-delay:.36s}.nas-toggle__item:not(:first-child){margin-left:2px}.nas-toggle__item:not(:last-child){margin-right:2px}.nas-toggle__label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:16px;line-height:24px;text-align:center;color:#15273f;white-space:nowrap;cursor:pointer;margin:0;border:2px solid #E9E7E4;background-color:#fff;transition:transform .15s cubic-bezier(0,0,.1,1)}.nas-toggle__label--content{padding:12px}.nas-toggle__label:hover,.nas-toggle__label:focus{border-color:#15273f}.nas-toggle__label:active{transform:translateY(3px)}.nas-toggle__price{display:block}@media (min-width: 640px){.nas-toggle__price{display:none}}.nas-toggle--compact .nas-toggle__label{font-size:14px;line-height:20px}.nas-toggle--compact .nas-toggle__label--content,.nas-toggle--compact .nas-toggle__link{padding:6px}.nas-toggle--large{align-items:stretch}.nas-toggle--large .icon-small{margin:0}.nas-toggle--large .nas-toggle__label{height:100%;border-color:#fff;background-color:#fff}.nas-toggle--large .nas-toggle__label--content{padding:24px}.nas-toggle--large .nas-toggle__label:hover,.nas-toggle--large .nas-toggle__label:focus{border-color:#15273f}.nas-toggle--large .nas-toggle__item:not(:first-child){margin-left:6px}.nas-toggle--large .nas-toggle__item:not(:last-child){margin-right:6px}.nas-toggle--large .nas-toggle__text{display:block}@media (min-width: 640px){.nas-toggle--large .nas-toggle__price{display:block;margin-bottom:-9px}}.nas-toggle--large .nas-toggle__link{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.nas-toggle--grouped{padding-bottom:3px;border-bottom:3px solid #15273F}.nas-toggle--vertical .nas-toggle__items{flex-direction:column;padding-bottom:0;border-bottom:0}.nas-toggle--vertical .nas-toggle__item,.nas-toggle--vertical .nas-toggle__item:not(:first-child),.nas-toggle--vertical .nas-toggle__item:not(:last-child){margin:0 0 3px}.nas-toggle--vertical .nas-toggle__label{text-align:left}.nas-toggle--vertical .nas-toggle__label--content,.nas-toggle--vertical .nas-toggle__link{padding:6px 24px}.nas-toggle--rounded .nas-toggle__label{margin:0 auto 6px;height:83px;width:83px;border-radius:100%}.nas-toggle--rounded .nas-toggle__label:hover,.nas-toggle--rounded .nas-toggle__label:focus{border-color:#fff;background-color:#fff}.nas-toggle--rounded .nas-toggle__item:not(:first-child){margin-left:12px}.nas-toggle--rounded .nas-toggle__item:not(:last-child){margin-right:12px}.nas-toggle--rounded .nas-toggle__text{display:block;text-align:center}.nas-toggle--big .nas-toggle__label{height:96px;width:96px;padding-top:9px}.nas-toggle--small .nas-toggle__label{padding-top:6px;height:65px;width:65px}.nas-toggle__radio{position:fixed;top:-99px;left:-99px;opacity:0}.nas-toggle__radio:checked~.nas-toggle__label{color:#15273f;border-color:#15273f;background-color:#ebf4ff}.nas-toggle__radio:focus-visible~.nas-toggle__label{box-shadow:0 0 1px 2px #e9e7e4,0 0 2px 3px #7ca4cd}.nas-toggle__radio:disabled~.nas-toggle__label{opacity:.4;pointer-events:none}.nas-toggle--scrollable .nas-toggle__items{overflow-x:auto;overflow-y:hidden;padding-bottom:20px;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar{height:4px;width:4px}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-thumb{background:#15273f;border-radius:2px}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-track-piece:end{margin-right:100px;background:#fff}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-track-piece:start{margin-left:100px;background:#fff}.nas-toggle--scrollable .nas-toggle__items::-moz-scrollbar{height:4px;width:4px}.nas-toggle__link{display:block;color:#15273f;border:0;padding:12px}::ng-deep .nas-icon-small{margin-right:6px}\n"] }]
|
|
71
71
|
}], ctorParameters: function () { return []; }, propDecorators: { options: [{
|
|
72
72
|
type: Input
|
|
73
73
|
}], large: [{
|
|
@@ -9490,11 +9490,11 @@ class ToggleComponent extends NasComponentBase {
|
|
|
9490
9490
|
history.pushState(null, '', option.href);
|
|
9491
9491
|
}
|
|
9492
9492
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9493
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToggleComponent, selector: "nas-toggle", inputs: { options: "options", large: "large", compact: "compact", rounded: "rounded", small: "small", big: "big", selectedValue: "selectedValue", label: "label", vertical: "vertical", grouped: "grouped", group: "group", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", scrollable: "scrollable" }, outputs: { handleChange: "handleChange" }, usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"mainClasses()\" *ngIf=\"!nasFormControlName; else reactiveForm\">\n <h3 [nasClass]=\"getClass('title')\">{{label}}</h3>\n <div [nasClass]=\"getClass('items')\">\n <span [nasClass]=\"getClass('item')\" *ngFor=\"let option of options\">\n <input [nasClass]=\"getClass('radio')\" [attr.id]=\"getOptionId(option)\" [checked]=\"option.value === selectedValue\"\n [attr.name]=\"group\" type=\"radio\" [attr.value]=\"option.value\" (change)=\"onChange(option)\">\n <label [nasClass]=\"getClass('label')\" [attr.for]=\"getOptionId(option)\">\n <ng-container *ngIf=\"option?.href; else noLink\">\n <a [nasClass]=\"getClass('link', selectedValue == option.value && 'selected')\" [href]=\"option.href\"\n (click)=\"onClickHref($event, option)\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </a>\n </ng-container>\n <ng-template #noLink>\n <div [nasClass]=\"getClass('label--content')\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </div>\n </ng-template>\n </label>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"isRounded\">{{option.text}}</span>\n </span>\n </div>\n</div>\n<ng-template #reactiveForm>\n <div [nasClass]=\"mainClasses()\">\n <h3 [nasClass]=\"getClass('title')\">{{label}}</h3>\n <div [nasClass]=\"getClass('items')\" [formGroup]=\"nasFormGroup\">\n <span [nasClass]=\"getClass('item')\" *ngFor=\"let option of options\">\n <input [formControlName]=\"nasFormControlName\" [nasClass]=\"getClass('radio')\" [attr.id]=\"getOptionId(option)\"\n [checked]=\"option.value === selectedValue\" [name]=\"group\" type=\"radio\" [value]=\"option.value\"\n (change)=\"onChange(option)\">\n <label [nasClass]=\"getClass('label')\" [attr.for]=\"getOptionId(option)\">\n <ng-container *ngIf=\"option?.href; else noLink\">\n <a [nasClass]=\"getClass('link', selectedValue == option.value && 'selected')\" [href]=\"option.href\"\n (click)=\"onClickHref($event, option)\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </a>\n </ng-container>\n <ng-template #noLink>\n <div [nasClass]=\"getClass('label--content')\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </div>\n </ng-template>\n </label>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"isRounded\">{{option.text}}</span>\n </span>\n </div>\n </div>\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-toggle__items{display:flex;flex-grow:2;perspective:1000px}.nas-toggle__title{font-size:16px;line-height:24px}.nas-toggle .icon-small{display:none;margin-left:-3px;margin-right:9px}@media (min-width: 640px){.nas-toggle .icon-small{display:inline-block}}.nas-toggle__item{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;animation-delay:.42s;-webkit-user-select:none;user-select:none;width:100%}.nas-toggle__item:nth-child(1){animation-delay:60ms}.nas-toggle__item:nth-child(2){animation-delay:.12s}.nas-toggle__item:nth-child(3){animation-delay:.18s}.nas-toggle__item:nth-child(4){animation-delay:.24s}.nas-toggle__item:nth-child(5){animation-delay:.3s}.nas-toggle__item:nth-child(6){animation-delay:.36s}.nas-toggle__item:not(:first-child){margin-left:2px}.nas-toggle__item:not(:last-child){margin-right:2px}.nas-toggle__label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:16px;line-height:24px;text-align:center;color:#15273f;white-space:nowrap;cursor:pointer;margin:0;border:2px solid #E9E7E4;background-color:#fff;transition:transform .15s cubic-bezier(0,0,.1,1)}.nas-toggle__label--content{padding:12px}.nas-toggle__label:hover,.nas-toggle__label:focus{border-color:#15273f}.nas-toggle__label:active{transform:translateY(3px)}.nas-toggle__price{display:block}@media (min-width: 640px){.nas-toggle__price{display:none}}.nas-toggle--compact .nas-toggle__label{font-size:14px;line-height:20px}.nas-toggle--compact .nas-toggle__label--content,.nas-toggle--compact .nas-toggle__link{padding:6px}.nas-toggle--large{align-items:stretch}.nas-toggle--large .icon-small{margin:0}.nas-toggle--large .nas-toggle__label{height:100%;border-color:#fff;background-color:#fff}.nas-toggle--large .nas-toggle__label--content{padding:24px}.nas-toggle--large .nas-toggle__label:hover,.nas-toggle--large .nas-toggle__label:focus{border-color:#15273f}.nas-toggle--large .nas-toggle__item:not(:first-child){margin-left:6px}.nas-toggle--large .nas-toggle__item:not(:last-child){margin-right:6px}.nas-toggle--large .nas-toggle__text{display:block}@media (min-width: 640px){.nas-toggle--large .nas-toggle__price{display:block;margin-bottom:-9px}}.nas-toggle--large .nas-toggle__link{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.nas-toggle--grouped{padding-bottom:3px;border-bottom:3px solid #15273F}.nas-toggle--vertical .nas-toggle__items{flex-direction:column;padding-bottom:0;border-bottom:0}.nas-toggle--vertical .nas-toggle__item,.nas-toggle--vertical .nas-toggle__item:not(:first-child),.nas-toggle--vertical .nas-toggle__item:not(:last-child){margin:0 0 3px}.nas-toggle--vertical .nas-toggle__label{text-align:left}.nas-toggle--vertical .nas-toggle__label--content,.nas-toggle--vertical .nas-toggle__link{padding:6px 24px}.nas-toggle--rounded .nas-toggle__label{margin:0 auto 6px;height:83px;width:83px;border-radius:100%}.nas-toggle--rounded .nas-toggle__label:hover,.nas-toggle--rounded .nas-toggle__label:focus{border-color:#fff;background-color:#fff}.nas-toggle--rounded .nas-toggle__item:not(:first-child){margin-left:12px}.nas-toggle--rounded .nas-toggle__item:not(:last-child){margin-right:12px}.nas-toggle--rounded .nas-toggle__text{display:block;text-align:center}.nas-toggle--big .nas-toggle__label{height:96px;width:96px;padding-top:9px}.nas-toggle--small .nas-toggle__label{padding-top:6px;height:65px;width:65px}.nas-toggle__radio{position:fixed;top:-99px;left:-99px;opacity:0}.nas-toggle__radio:checked~.nas-toggle__label{color:#15273f;border-color:#15273f;background-color:#ebf4ff}.nas-toggle__radio:focus-visible~.nas-toggle__label{box-shadow:0 0 1px 2px #e9e7e4,0 0 2px 3px #7ca4cd}.nas-toggle__radio:disabled~.nas-toggle__label{opacity:.4;pointer-events:none}.nas-toggle--scrollable .nas-toggle__items{overflow-x:auto;overflow-y:hidden;padding-bottom:20px;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar{height:4px;width:4px}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-thumb{background:#15273f;border-radius:2px}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-track-piece:end{margin-right:100px;background:#fff}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-track-piece:start{margin-left:100px;background:#fff}.nas-toggle--scrollable .nas-toggle__items::-moz-scrollbar{height:4px;width:4px}.nas-toggle__link{display:block;color:#15273f;border:0;padding:12px}.nas-toggle__link--selected{color:#fff}::ng-deep .nas-icon-small{margin-right:6px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
9493
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToggleComponent, selector: "nas-toggle", inputs: { options: "options", large: "large", compact: "compact", rounded: "rounded", small: "small", big: "big", selectedValue: "selectedValue", label: "label", vertical: "vertical", grouped: "grouped", group: "group", nasFormControlName: "nasFormControlName", nasFormGroup: "nasFormGroup", scrollable: "scrollable" }, outputs: { handleChange: "handleChange" }, usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"mainClasses()\" *ngIf=\"!nasFormControlName; else reactiveForm\">\n <h3 [nasClass]=\"getClass('title')\">{{label}}</h3>\n <div [nasClass]=\"getClass('items')\">\n <span [nasClass]=\"getClass('item')\" *ngFor=\"let option of options\">\n <input [nasClass]=\"getClass('radio')\" [attr.id]=\"getOptionId(option)\" [checked]=\"option.value === selectedValue\"\n [attr.name]=\"group\" type=\"radio\" [attr.value]=\"option.value\" (change)=\"onChange(option)\">\n <label [nasClass]=\"getClass('label')\" [attr.for]=\"getOptionId(option)\">\n <ng-container *ngIf=\"option?.href; else noLink\">\n <a [nasClass]=\"getClass('link', selectedValue == option.value && 'selected')\" [href]=\"option.href\"\n (click)=\"onClickHref($event, option)\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </a>\n </ng-container>\n <ng-template #noLink>\n <div [nasClass]=\"getClass('label--content')\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </div>\n </ng-template>\n </label>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"isRounded\">{{option.text}}</span>\n </span>\n </div>\n</div>\n<ng-template #reactiveForm>\n <div [nasClass]=\"mainClasses()\">\n <h3 [nasClass]=\"getClass('title')\">{{label}}</h3>\n <div [nasClass]=\"getClass('items')\" [formGroup]=\"nasFormGroup\">\n <span [nasClass]=\"getClass('item')\" *ngFor=\"let option of options\">\n <input [formControlName]=\"nasFormControlName\" [nasClass]=\"getClass('radio')\" [attr.id]=\"getOptionId(option)\"\n [checked]=\"option.value === selectedValue\" [name]=\"group\" type=\"radio\" [value]=\"option.value\"\n (change)=\"onChange(option)\">\n <label [nasClass]=\"getClass('label')\" [attr.for]=\"getOptionId(option)\">\n <ng-container *ngIf=\"option?.href; else noLink\">\n <a [nasClass]=\"getClass('link', selectedValue == option.value && 'selected')\" [href]=\"option.href\"\n (click)=\"onClickHref($event, option)\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </a>\n </ng-container>\n <ng-template #noLink>\n <div [nasClass]=\"getClass('label--content')\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </div>\n </ng-template>\n </label>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"isRounded\">{{option.text}}</span>\n </span>\n </div>\n </div>\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-toggle__items{display:flex;flex-grow:2;perspective:1000px}.nas-toggle__title{font-size:16px;line-height:24px}.nas-toggle .icon-small{display:none;margin-left:-3px;margin-right:9px}@media (min-width: 640px){.nas-toggle .icon-small{display:inline-block}}.nas-toggle__item{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;animation-delay:.42s;-webkit-user-select:none;user-select:none;width:100%}.nas-toggle__item:nth-child(1){animation-delay:60ms}.nas-toggle__item:nth-child(2){animation-delay:.12s}.nas-toggle__item:nth-child(3){animation-delay:.18s}.nas-toggle__item:nth-child(4){animation-delay:.24s}.nas-toggle__item:nth-child(5){animation-delay:.3s}.nas-toggle__item:nth-child(6){animation-delay:.36s}.nas-toggle__item:not(:first-child){margin-left:2px}.nas-toggle__item:not(:last-child){margin-right:2px}.nas-toggle__label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:16px;line-height:24px;text-align:center;color:#15273f;white-space:nowrap;cursor:pointer;margin:0;border:2px solid #E9E7E4;background-color:#fff;transition:transform .15s cubic-bezier(0,0,.1,1)}.nas-toggle__label--content{padding:12px}.nas-toggle__label:hover,.nas-toggle__label:focus{border-color:#15273f}.nas-toggle__label:active{transform:translateY(3px)}.nas-toggle__price{display:block}@media (min-width: 640px){.nas-toggle__price{display:none}}.nas-toggle--compact .nas-toggle__label{font-size:14px;line-height:20px}.nas-toggle--compact .nas-toggle__label--content,.nas-toggle--compact .nas-toggle__link{padding:6px}.nas-toggle--large{align-items:stretch}.nas-toggle--large .icon-small{margin:0}.nas-toggle--large .nas-toggle__label{height:100%;border-color:#fff;background-color:#fff}.nas-toggle--large .nas-toggle__label--content{padding:24px}.nas-toggle--large .nas-toggle__label:hover,.nas-toggle--large .nas-toggle__label:focus{border-color:#15273f}.nas-toggle--large .nas-toggle__item:not(:first-child){margin-left:6px}.nas-toggle--large .nas-toggle__item:not(:last-child){margin-right:6px}.nas-toggle--large .nas-toggle__text{display:block}@media (min-width: 640px){.nas-toggle--large .nas-toggle__price{display:block;margin-bottom:-9px}}.nas-toggle--large .nas-toggle__link{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.nas-toggle--grouped{padding-bottom:3px;border-bottom:3px solid #15273F}.nas-toggle--vertical .nas-toggle__items{flex-direction:column;padding-bottom:0;border-bottom:0}.nas-toggle--vertical .nas-toggle__item,.nas-toggle--vertical .nas-toggle__item:not(:first-child),.nas-toggle--vertical .nas-toggle__item:not(:last-child){margin:0 0 3px}.nas-toggle--vertical .nas-toggle__label{text-align:left}.nas-toggle--vertical .nas-toggle__label--content,.nas-toggle--vertical .nas-toggle__link{padding:6px 24px}.nas-toggle--rounded .nas-toggle__label{margin:0 auto 6px;height:83px;width:83px;border-radius:100%}.nas-toggle--rounded .nas-toggle__label:hover,.nas-toggle--rounded .nas-toggle__label:focus{border-color:#fff;background-color:#fff}.nas-toggle--rounded .nas-toggle__item:not(:first-child){margin-left:12px}.nas-toggle--rounded .nas-toggle__item:not(:last-child){margin-right:12px}.nas-toggle--rounded .nas-toggle__text{display:block;text-align:center}.nas-toggle--big .nas-toggle__label{height:96px;width:96px;padding-top:9px}.nas-toggle--small .nas-toggle__label{padding-top:6px;height:65px;width:65px}.nas-toggle__radio{position:fixed;top:-99px;left:-99px;opacity:0}.nas-toggle__radio:checked~.nas-toggle__label{color:#15273f;border-color:#15273f;background-color:#ebf4ff}.nas-toggle__radio:focus-visible~.nas-toggle__label{box-shadow:0 0 1px 2px #e9e7e4,0 0 2px 3px #7ca4cd}.nas-toggle__radio:disabled~.nas-toggle__label{opacity:.4;pointer-events:none}.nas-toggle--scrollable .nas-toggle__items{overflow-x:auto;overflow-y:hidden;padding-bottom:20px;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar{height:4px;width:4px}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-thumb{background:#15273f;border-radius:2px}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-track-piece:end{margin-right:100px;background:#fff}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-track-piece:start{margin-left:100px;background:#fff}.nas-toggle--scrollable .nas-toggle__items::-moz-scrollbar{height:4px;width:4px}.nas-toggle__link{display:block;color:#15273f;border:0;padding:12px}::ng-deep .nas-icon-small{margin-right:6px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
9494
9494
|
}
|
|
9495
9495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
9496
9496
|
type: Component,
|
|
9497
|
-
args: [{ selector: 'nas-toggle', template: "<div [nasClass]=\"mainClasses()\" *ngIf=\"!nasFormControlName; else reactiveForm\">\n <h3 [nasClass]=\"getClass('title')\">{{label}}</h3>\n <div [nasClass]=\"getClass('items')\">\n <span [nasClass]=\"getClass('item')\" *ngFor=\"let option of options\">\n <input [nasClass]=\"getClass('radio')\" [attr.id]=\"getOptionId(option)\" [checked]=\"option.value === selectedValue\"\n [attr.name]=\"group\" type=\"radio\" [attr.value]=\"option.value\" (change)=\"onChange(option)\">\n <label [nasClass]=\"getClass('label')\" [attr.for]=\"getOptionId(option)\">\n <ng-container *ngIf=\"option?.href; else noLink\">\n <a [nasClass]=\"getClass('link', selectedValue == option.value && 'selected')\" [href]=\"option.href\"\n (click)=\"onClickHref($event, option)\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </a>\n </ng-container>\n <ng-template #noLink>\n <div [nasClass]=\"getClass('label--content')\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </div>\n </ng-template>\n </label>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"isRounded\">{{option.text}}</span>\n </span>\n </div>\n</div>\n<ng-template #reactiveForm>\n <div [nasClass]=\"mainClasses()\">\n <h3 [nasClass]=\"getClass('title')\">{{label}}</h3>\n <div [nasClass]=\"getClass('items')\" [formGroup]=\"nasFormGroup\">\n <span [nasClass]=\"getClass('item')\" *ngFor=\"let option of options\">\n <input [formControlName]=\"nasFormControlName\" [nasClass]=\"getClass('radio')\" [attr.id]=\"getOptionId(option)\"\n [checked]=\"option.value === selectedValue\" [name]=\"group\" type=\"radio\" [value]=\"option.value\"\n (change)=\"onChange(option)\">\n <label [nasClass]=\"getClass('label')\" [attr.for]=\"getOptionId(option)\">\n <ng-container *ngIf=\"option?.href; else noLink\">\n <a [nasClass]=\"getClass('link', selectedValue == option.value && 'selected')\" [href]=\"option.href\"\n (click)=\"onClickHref($event, option)\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </a>\n </ng-container>\n <ng-template #noLink>\n <div [nasClass]=\"getClass('label--content')\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </div>\n </ng-template>\n </label>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"isRounded\">{{option.text}}</span>\n </span>\n </div>\n </div>\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-toggle__items{display:flex;flex-grow:2;perspective:1000px}.nas-toggle__title{font-size:16px;line-height:24px}.nas-toggle .icon-small{display:none;margin-left:-3px;margin-right:9px}@media (min-width: 640px){.nas-toggle .icon-small{display:inline-block}}.nas-toggle__item{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;animation-delay:.42s;-webkit-user-select:none;user-select:none;width:100%}.nas-toggle__item:nth-child(1){animation-delay:60ms}.nas-toggle__item:nth-child(2){animation-delay:.12s}.nas-toggle__item:nth-child(3){animation-delay:.18s}.nas-toggle__item:nth-child(4){animation-delay:.24s}.nas-toggle__item:nth-child(5){animation-delay:.3s}.nas-toggle__item:nth-child(6){animation-delay:.36s}.nas-toggle__item:not(:first-child){margin-left:2px}.nas-toggle__item:not(:last-child){margin-right:2px}.nas-toggle__label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:16px;line-height:24px;text-align:center;color:#15273f;white-space:nowrap;cursor:pointer;margin:0;border:2px solid #E9E7E4;background-color:#fff;transition:transform .15s cubic-bezier(0,0,.1,1)}.nas-toggle__label--content{padding:12px}.nas-toggle__label:hover,.nas-toggle__label:focus{border-color:#15273f}.nas-toggle__label:active{transform:translateY(3px)}.nas-toggle__price{display:block}@media (min-width: 640px){.nas-toggle__price{display:none}}.nas-toggle--compact .nas-toggle__label{font-size:14px;line-height:20px}.nas-toggle--compact .nas-toggle__label--content,.nas-toggle--compact .nas-toggle__link{padding:6px}.nas-toggle--large{align-items:stretch}.nas-toggle--large .icon-small{margin:0}.nas-toggle--large .nas-toggle__label{height:100%;border-color:#fff;background-color:#fff}.nas-toggle--large .nas-toggle__label--content{padding:24px}.nas-toggle--large .nas-toggle__label:hover,.nas-toggle--large .nas-toggle__label:focus{border-color:#15273f}.nas-toggle--large .nas-toggle__item:not(:first-child){margin-left:6px}.nas-toggle--large .nas-toggle__item:not(:last-child){margin-right:6px}.nas-toggle--large .nas-toggle__text{display:block}@media (min-width: 640px){.nas-toggle--large .nas-toggle__price{display:block;margin-bottom:-9px}}.nas-toggle--large .nas-toggle__link{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.nas-toggle--grouped{padding-bottom:3px;border-bottom:3px solid #15273F}.nas-toggle--vertical .nas-toggle__items{flex-direction:column;padding-bottom:0;border-bottom:0}.nas-toggle--vertical .nas-toggle__item,.nas-toggle--vertical .nas-toggle__item:not(:first-child),.nas-toggle--vertical .nas-toggle__item:not(:last-child){margin:0 0 3px}.nas-toggle--vertical .nas-toggle__label{text-align:left}.nas-toggle--vertical .nas-toggle__label--content,.nas-toggle--vertical .nas-toggle__link{padding:6px 24px}.nas-toggle--rounded .nas-toggle__label{margin:0 auto 6px;height:83px;width:83px;border-radius:100%}.nas-toggle--rounded .nas-toggle__label:hover,.nas-toggle--rounded .nas-toggle__label:focus{border-color:#fff;background-color:#fff}.nas-toggle--rounded .nas-toggle__item:not(:first-child){margin-left:12px}.nas-toggle--rounded .nas-toggle__item:not(:last-child){margin-right:12px}.nas-toggle--rounded .nas-toggle__text{display:block;text-align:center}.nas-toggle--big .nas-toggle__label{height:96px;width:96px;padding-top:9px}.nas-toggle--small .nas-toggle__label{padding-top:6px;height:65px;width:65px}.nas-toggle__radio{position:fixed;top:-99px;left:-99px;opacity:0}.nas-toggle__radio:checked~.nas-toggle__label{color:#15273f;border-color:#15273f;background-color:#ebf4ff}.nas-toggle__radio:focus-visible~.nas-toggle__label{box-shadow:0 0 1px 2px #e9e7e4,0 0 2px 3px #7ca4cd}.nas-toggle__radio:disabled~.nas-toggle__label{opacity:.4;pointer-events:none}.nas-toggle--scrollable .nas-toggle__items{overflow-x:auto;overflow-y:hidden;padding-bottom:20px;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar{height:4px;width:4px}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-thumb{background:#15273f;border-radius:2px}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-track-piece:end{margin-right:100px;background:#fff}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-track-piece:start{margin-left:100px;background:#fff}.nas-toggle--scrollable .nas-toggle__items::-moz-scrollbar{height:4px;width:4px}.nas-toggle__link{display:block;color:#15273f;border:0;padding:12px}
|
|
9497
|
+
args: [{ selector: 'nas-toggle', template: "<div [nasClass]=\"mainClasses()\" *ngIf=\"!nasFormControlName; else reactiveForm\">\n <h3 [nasClass]=\"getClass('title')\">{{label}}</h3>\n <div [nasClass]=\"getClass('items')\">\n <span [nasClass]=\"getClass('item')\" *ngFor=\"let option of options\">\n <input [nasClass]=\"getClass('radio')\" [attr.id]=\"getOptionId(option)\" [checked]=\"option.value === selectedValue\"\n [attr.name]=\"group\" type=\"radio\" [attr.value]=\"option.value\" (change)=\"onChange(option)\">\n <label [nasClass]=\"getClass('label')\" [attr.for]=\"getOptionId(option)\">\n <ng-container *ngIf=\"option?.href; else noLink\">\n <a [nasClass]=\"getClass('link', selectedValue == option.value && 'selected')\" [href]=\"option.href\"\n (click)=\"onClickHref($event, option)\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </a>\n </ng-container>\n <ng-template #noLink>\n <div [nasClass]=\"getClass('label--content')\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </div>\n </ng-template>\n </label>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"isRounded\">{{option.text}}</span>\n </span>\n </div>\n</div>\n<ng-template #reactiveForm>\n <div [nasClass]=\"mainClasses()\">\n <h3 [nasClass]=\"getClass('title')\">{{label}}</h3>\n <div [nasClass]=\"getClass('items')\" [formGroup]=\"nasFormGroup\">\n <span [nasClass]=\"getClass('item')\" *ngFor=\"let option of options\">\n <input [formControlName]=\"nasFormControlName\" [nasClass]=\"getClass('radio')\" [attr.id]=\"getOptionId(option)\"\n [checked]=\"option.value === selectedValue\" [name]=\"group\" type=\"radio\" [value]=\"option.value\"\n (change)=\"onChange(option)\">\n <label [nasClass]=\"getClass('label')\" [attr.for]=\"getOptionId(option)\">\n <ng-container *ngIf=\"option?.href; else noLink\">\n <a [nasClass]=\"getClass('link', selectedValue == option.value && 'selected')\" [href]=\"option.href\"\n (click)=\"onClickHref($event, option)\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </a>\n </ng-container>\n <ng-template #noLink>\n <div [nasClass]=\"getClass('label--content')\">\n <nas-icon *ngIf=\"option.icon\" [icon]=\"option.icon\" [type]=\"iconType\"></nas-icon>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"!isRounded\">{{ option.text }}</span>\n </div>\n </ng-template>\n </label>\n <span [nasClass]=\"getClass('text')\" *ngIf=\"isRounded\">{{option.text}}</span>\n </span>\n </div>\n </div>\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-toggle__items{display:flex;flex-grow:2;perspective:1000px}.nas-toggle__title{font-size:16px;line-height:24px}.nas-toggle .icon-small{display:none;margin-left:-3px;margin-right:9px}@media (min-width: 640px){.nas-toggle .icon-small{display:inline-block}}.nas-toggle__item{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both;animation-delay:.42s;-webkit-user-select:none;user-select:none;width:100%}.nas-toggle__item:nth-child(1){animation-delay:60ms}.nas-toggle__item:nth-child(2){animation-delay:.12s}.nas-toggle__item:nth-child(3){animation-delay:.18s}.nas-toggle__item:nth-child(4){animation-delay:.24s}.nas-toggle__item:nth-child(5){animation-delay:.3s}.nas-toggle__item:nth-child(6){animation-delay:.36s}.nas-toggle__item:not(:first-child){margin-left:2px}.nas-toggle__item:not(:last-child){margin-right:2px}.nas-toggle__label{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:16px;line-height:24px;text-align:center;color:#15273f;white-space:nowrap;cursor:pointer;margin:0;border:2px solid #E9E7E4;background-color:#fff;transition:transform .15s cubic-bezier(0,0,.1,1)}.nas-toggle__label--content{padding:12px}.nas-toggle__label:hover,.nas-toggle__label:focus{border-color:#15273f}.nas-toggle__label:active{transform:translateY(3px)}.nas-toggle__price{display:block}@media (min-width: 640px){.nas-toggle__price{display:none}}.nas-toggle--compact .nas-toggle__label{font-size:14px;line-height:20px}.nas-toggle--compact .nas-toggle__label--content,.nas-toggle--compact .nas-toggle__link{padding:6px}.nas-toggle--large{align-items:stretch}.nas-toggle--large .icon-small{margin:0}.nas-toggle--large .nas-toggle__label{height:100%;border-color:#fff;background-color:#fff}.nas-toggle--large .nas-toggle__label--content{padding:24px}.nas-toggle--large .nas-toggle__label:hover,.nas-toggle--large .nas-toggle__label:focus{border-color:#15273f}.nas-toggle--large .nas-toggle__item:not(:first-child){margin-left:6px}.nas-toggle--large .nas-toggle__item:not(:last-child){margin-right:6px}.nas-toggle--large .nas-toggle__text{display:block}@media (min-width: 640px){.nas-toggle--large .nas-toggle__price{display:block;margin-bottom:-9px}}.nas-toggle--large .nas-toggle__link{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.nas-toggle--grouped{padding-bottom:3px;border-bottom:3px solid #15273F}.nas-toggle--vertical .nas-toggle__items{flex-direction:column;padding-bottom:0;border-bottom:0}.nas-toggle--vertical .nas-toggle__item,.nas-toggle--vertical .nas-toggle__item:not(:first-child),.nas-toggle--vertical .nas-toggle__item:not(:last-child){margin:0 0 3px}.nas-toggle--vertical .nas-toggle__label{text-align:left}.nas-toggle--vertical .nas-toggle__label--content,.nas-toggle--vertical .nas-toggle__link{padding:6px 24px}.nas-toggle--rounded .nas-toggle__label{margin:0 auto 6px;height:83px;width:83px;border-radius:100%}.nas-toggle--rounded .nas-toggle__label:hover,.nas-toggle--rounded .nas-toggle__label:focus{border-color:#fff;background-color:#fff}.nas-toggle--rounded .nas-toggle__item:not(:first-child){margin-left:12px}.nas-toggle--rounded .nas-toggle__item:not(:last-child){margin-right:12px}.nas-toggle--rounded .nas-toggle__text{display:block;text-align:center}.nas-toggle--big .nas-toggle__label{height:96px;width:96px;padding-top:9px}.nas-toggle--small .nas-toggle__label{padding-top:6px;height:65px;width:65px}.nas-toggle__radio{position:fixed;top:-99px;left:-99px;opacity:0}.nas-toggle__radio:checked~.nas-toggle__label{color:#15273f;border-color:#15273f;background-color:#ebf4ff}.nas-toggle__radio:focus-visible~.nas-toggle__label{box-shadow:0 0 1px 2px #e9e7e4,0 0 2px 3px #7ca4cd}.nas-toggle__radio:disabled~.nas-toggle__label{opacity:.4;pointer-events:none}.nas-toggle--scrollable .nas-toggle__items{overflow-x:auto;overflow-y:hidden;padding-bottom:20px;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar{height:4px;width:4px}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-thumb{background:#15273f;border-radius:2px}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-track-piece:end{margin-right:100px;background:#fff}.nas-toggle--scrollable .nas-toggle__items::-webkit-scrollbar-track-piece:start{margin-left:100px;background:#fff}.nas-toggle--scrollable .nas-toggle__items::-moz-scrollbar{height:4px;width:4px}.nas-toggle__link{display:block;color:#15273f;border:0;padding:12px}::ng-deep .nas-icon-small{margin-right:6px}\n"] }]
|
|
9498
9498
|
}], ctorParameters: function () { return []; }, propDecorators: { options: [{
|
|
9499
9499
|
type: Input
|
|
9500
9500
|
}], large: [{
|