@norwegian/core-components 7.4.6 → 7.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/accordion/accordion.component.mjs +2 -2
- package/esm2022/lib/components/page-header/page-header.component.mjs +3 -3
- package/esm2022/lib/components/page-header/search/search.component.mjs +2 -2
- package/fesm2022/norwegian-core-components.mjs +6 -6
- package/fesm2022/norwegian-core-components.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/1__settings/_type.scss +7 -7
- package/styles/3__base/_heading.scss +12 -12
|
@@ -94,11 +94,11 @@ export class AccordionComponent extends NasComponentBase {
|
|
|
94
94
|
this.regularHeader = !this.exists(this.small) && !this.exists(this.simple) ? true : false;
|
|
95
95
|
}
|
|
96
96
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
97
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AccordionComponent, selector: "nas-accordion", inputs: { expanded: "expanded", title: "title", badge: "badge", icon: "icon", simple: "simple", spaced: "spaced", small: "small", inverted: "inverted", containerOnToggle: "containerOnToggle", nopadding: "nopadding", transparent: "transparent", approve: "approve", primary: "primary", warning: "warning", badgeInfo: "badgeInfo", badgeSuccess: "badgeSuccess", badgeWarning: "badgeWarning", badgeError: "badgeError", cssClass: "cssClass", cssStyle: "cssStyle" }, outputs: { toggleChange: "toggleChange" }, usesInheritance: true, ngImport: i0, template: "<section [nasClass]=\"getClasses('', getModifiers())\" [ngStyle]=\"cssStyle\" ref=\"element\">\n <div *ngIf=\"exists(containerOnToggle); else toggleTemplate\" class=\"container\">\n <ng-container *ngTemplateOutlet=\"toggleTemplate\"></ng-container>\n </div>\n\n <div [nasClass]=\"wrapperClass()\">\n <div [hidden]=\"!exists(expanded)\" [nasClass]=\"getClass('content')\"\n [style.background-color]=\"exists(transparent) && 'inherit'\" [style.padding]=\"exists(transparent) && 'unset'\">\n <ng-content></ng-content>\n </div>\n </div>\n</section>\n\n<ng-template #toggleTemplate>\n <button type=\"button\" [nasClass]=\"getClass('toggle')\" (click)=\"toggle()\">\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n <div [nasClass]=\"getClass('breakdown')\">\n <h4 *ngIf=\"regularHeader\" [nasClass]=\"getClass('title')\">{{title}}</h4>\n <h5 *ngIf=\"!regularHeader\" [nasClass]=\"getClass('title')\">{{title}}</h5>\n <div *ngIf=\"badge\" [nasClass]=\"getClass('badge', exists(badgeInfo) ? 'info' :\n exists(badgeSuccess) ? 'success' : exists(badgeWarning) ? 'warning': exists(badgeError) ? 'error': '')\">\n <span>{{badge}}</span>\n </div>\n </div>\n <nas-icon type=\"chevron-down\" [nasClass]=\"getClass('indicator', exists(badge) ? 'no-margin' : '')\"></nas-icon>\n </button>\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-accordion{position:relative;border:1px solid #E9E7E4}.nas-accordion__toggle{display:flex;align-items:center;text-align:left;width:100%;padding:12px 16px}.nas-accordion__toggle:hover,.nas-accordion__toggle:focus{background-color:#
|
|
97
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: AccordionComponent, selector: "nas-accordion", inputs: { expanded: "expanded", title: "title", badge: "badge", icon: "icon", simple: "simple", spaced: "spaced", small: "small", inverted: "inverted", containerOnToggle: "containerOnToggle", nopadding: "nopadding", transparent: "transparent", approve: "approve", primary: "primary", warning: "warning", badgeInfo: "badgeInfo", badgeSuccess: "badgeSuccess", badgeWarning: "badgeWarning", badgeError: "badgeError", cssClass: "cssClass", cssStyle: "cssStyle" }, outputs: { toggleChange: "toggleChange" }, usesInheritance: true, ngImport: i0, template: "<section [nasClass]=\"getClasses('', getModifiers())\" [ngStyle]=\"cssStyle\" ref=\"element\">\n <div *ngIf=\"exists(containerOnToggle); else toggleTemplate\" class=\"container\">\n <ng-container *ngTemplateOutlet=\"toggleTemplate\"></ng-container>\n </div>\n\n <div [nasClass]=\"wrapperClass()\">\n <div [hidden]=\"!exists(expanded)\" [nasClass]=\"getClass('content')\"\n [style.background-color]=\"exists(transparent) && 'inherit'\" [style.padding]=\"exists(transparent) && 'unset'\">\n <ng-content></ng-content>\n </div>\n </div>\n</section>\n\n<ng-template #toggleTemplate>\n <button type=\"button\" [nasClass]=\"getClass('toggle')\" (click)=\"toggle()\">\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n <div [nasClass]=\"getClass('breakdown')\">\n <h4 *ngIf=\"regularHeader\" [nasClass]=\"getClass('title')\">{{title}}</h4>\n <h5 *ngIf=\"!regularHeader\" [nasClass]=\"getClass('title')\">{{title}}</h5>\n <div *ngIf=\"badge\" [nasClass]=\"getClass('badge', exists(badgeInfo) ? 'info' :\n exists(badgeSuccess) ? 'success' : exists(badgeWarning) ? 'warning': exists(badgeError) ? 'error': '')\">\n <span>{{badge}}</span>\n </div>\n </div>\n <nas-icon type=\"chevron-down\" [nasClass]=\"getClass('indicator', exists(badge) ? 'no-margin' : '')\"></nas-icon>\n </button>\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-accordion{position:relative;border:1px solid #E9E7E4;background-color:#fff}.nas-accordion__toggle{display:flex;align-items:center;text-align:left;width:100%;padding:12px 16px}.nas-accordion__toggle:hover,.nas-accordion__toggle:focus{background-color:#f1f1f1}.nas-accordion__breakdown{display:flex;flex-direction:column;align-items:normal;width:100%}@media (min-width: 640px){.nas-accordion__breakdown{flex-direction:row;align-items:center}}.nas-accordion__wrapper--enter{perspective:1000px}.nas-accordion__wrapper--enter .nas-accordion__content{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both}.nas-accordion__wrapper--leave{position:absolute;width:100%;perspective:1000px}.nas-accordion__wrapper--leave .nas-accordion__content{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-out .2s ease both}.nas-accordion__content{padding:9px 16px 16px;background-color:#fff}.nas-accordion__content p:last-child{margin-bottom:0}.nas-accordion__indicator{position:relative;margin-left:auto;transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}.nas-accordion__indicator--no-margin,.nas-accordion__title{margin:0}.nas-accordion--simple{background-color:transparent;border:none}.nas-accordion--simple .nas-accordion__toggle{padding:0;background-color:transparent;margin-bottom:12px}.nas-accordion--simple .nas-accordion__indicator{margin-left:9px;transform-origin:45% 55%;margin-bottom:3px}.nas-accordion--simple .nas-accordion__content{padding:16px}.nas-accordion__icon{margin:0 9px 0 0}.nas-accordion__badge{background-color:#f8f8f8;border:1px solid #E9E7E4;padding:4px 8px;margin:3px 24px 3px 0;font-size:14px;color:#15273f;border-radius:100px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (min-width: 640px){.nas-accordion__badge{margin-left:auto}}.nas-accordion__badge--success{background-color:#f4faf2;border:1px solid #2EB004;padding:4px 8px;margin:3px 24px 3px 0;font-size:14px;color:#15273f;border-radius:100px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (min-width: 640px){.nas-accordion__badge--success{margin-left:auto}}.nas-accordion__badge--info{background-color:#ebf4ff;border:1px solid #15273F;padding:4px 8px;margin:3px 24px 3px 0;font-size:14px;color:#15273f;border-radius:100px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (min-width: 640px){.nas-accordion__badge--info{margin-left:auto}}.nas-accordion__badge--error{background-color:#fff5f3;border:1px solid #CC3A19;padding:4px 8px;margin:3px 24px 3px 0;font-size:14px;color:#15273f;border-radius:100px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (min-width: 640px){.nas-accordion__badge--error{margin-left:auto}}.nas-accordion__badge--warning{background-color:#fff6ec;border:1px solid #FC9E12;padding:4px 8px;margin:3px 24px 3px 0;font-size:14px;color:#15273f;border-radius:100px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (min-width: 640px){.nas-accordion__badge--warning{margin-left:auto}}.nas-accordion--expanded{z-index:20}.nas-accordion--expanded .nas-accordion__indicator{transform:rotate(-180deg)}@media (min-width: 640px){.nas-accordion--spaced .nas-accordion__toggle{padding:16px 24px}}@media (min-width: 640px){.nas-accordion--spaced .nas-accordion__content{padding:12px 24px 24px}}.nas-accordion--small .nas-accordion__toggle{padding:9px 16px;background-color:#fff}.nas-accordion--small .nas-accordion__toggle:hover,.nas-accordion--small .nas-accordion__toggle:focus{background-color:#fff}.nas-accordion--small .nas-accordion__content{padding:3px 16px 24px}.nas-accordion--small .nas-accordion__indicator{transform-origin:45% 55%;margin-bottom:3px}.nas-accordion--inverted{border:1px solid #FFFFFF}.nas-accordion--inverted .nas-accordion__toggle{background-color:#e9e7e4}.nas-accordion--inverted .nas-accordion__toggle:hover,.nas-accordion--inverted .nas-accordion__toggle:focus{background-color:#fff}.nas-accordion--inverted .nas-accordion__content,.nas-accordion--inverted.nas-accordion--expanded .nas-accordion__toggle{background-color:#e9e7e4}.nas-accordion--nopadding{padding-bottom:25px}.nas-accordion--nopadding .nas-accordion__toggle,.nas-accordion--nopadding .nas-accordion__content{padding:0}.nas-accordion--approve .nas-accordion__toggle{background-color:#f4faf2;color:#2eb004}.nas-accordion--primary .nas-accordion__toggle{background-color:#fff5f3;color:#b12a0b}.nas-accordion--warning .nas-accordion__toggle,.nas-accordion--warning .nas-accordion__content{background-color:#fff6ec;color:#15273f}.nas-accordion .nas-icon-positive--light,.nas-accordion .nas-icon-negative--light{transform:scale(.85)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
98
98
|
}
|
|
99
99
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
100
100
|
type: Component,
|
|
101
|
-
args: [{ selector: 'nas-accordion', encapsulation: ViewEncapsulation.None, template: "<section [nasClass]=\"getClasses('', getModifiers())\" [ngStyle]=\"cssStyle\" ref=\"element\">\n <div *ngIf=\"exists(containerOnToggle); else toggleTemplate\" class=\"container\">\n <ng-container *ngTemplateOutlet=\"toggleTemplate\"></ng-container>\n </div>\n\n <div [nasClass]=\"wrapperClass()\">\n <div [hidden]=\"!exists(expanded)\" [nasClass]=\"getClass('content')\"\n [style.background-color]=\"exists(transparent) && 'inherit'\" [style.padding]=\"exists(transparent) && 'unset'\">\n <ng-content></ng-content>\n </div>\n </div>\n</section>\n\n<ng-template #toggleTemplate>\n <button type=\"button\" [nasClass]=\"getClass('toggle')\" (click)=\"toggle()\">\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n <div [nasClass]=\"getClass('breakdown')\">\n <h4 *ngIf=\"regularHeader\" [nasClass]=\"getClass('title')\">{{title}}</h4>\n <h5 *ngIf=\"!regularHeader\" [nasClass]=\"getClass('title')\">{{title}}</h5>\n <div *ngIf=\"badge\" [nasClass]=\"getClass('badge', exists(badgeInfo) ? 'info' :\n exists(badgeSuccess) ? 'success' : exists(badgeWarning) ? 'warning': exists(badgeError) ? 'error': '')\">\n <span>{{badge}}</span>\n </div>\n </div>\n <nas-icon type=\"chevron-down\" [nasClass]=\"getClass('indicator', exists(badge) ? 'no-margin' : '')\"></nas-icon>\n </button>\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-accordion{position:relative;border:1px solid #E9E7E4}.nas-accordion__toggle{display:flex;align-items:center;text-align:left;width:100%;padding:12px 16px}.nas-accordion__toggle:hover,.nas-accordion__toggle:focus{background-color:#
|
|
101
|
+
args: [{ selector: 'nas-accordion', encapsulation: ViewEncapsulation.None, template: "<section [nasClass]=\"getClasses('', getModifiers())\" [ngStyle]=\"cssStyle\" ref=\"element\">\n <div *ngIf=\"exists(containerOnToggle); else toggleTemplate\" class=\"container\">\n <ng-container *ngTemplateOutlet=\"toggleTemplate\"></ng-container>\n </div>\n\n <div [nasClass]=\"wrapperClass()\">\n <div [hidden]=\"!exists(expanded)\" [nasClass]=\"getClass('content')\"\n [style.background-color]=\"exists(transparent) && 'inherit'\" [style.padding]=\"exists(transparent) && 'unset'\">\n <ng-content></ng-content>\n </div>\n </div>\n</section>\n\n<ng-template #toggleTemplate>\n <button type=\"button\" [nasClass]=\"getClass('toggle')\" (click)=\"toggle()\">\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon\">\n <nas-icon [icon]=\"icon\"></nas-icon>\n </span>\n <div [nasClass]=\"getClass('breakdown')\">\n <h4 *ngIf=\"regularHeader\" [nasClass]=\"getClass('title')\">{{title}}</h4>\n <h5 *ngIf=\"!regularHeader\" [nasClass]=\"getClass('title')\">{{title}}</h5>\n <div *ngIf=\"badge\" [nasClass]=\"getClass('badge', exists(badgeInfo) ? 'info' :\n exists(badgeSuccess) ? 'success' : exists(badgeWarning) ? 'warning': exists(badgeError) ? 'error': '')\">\n <span>{{badge}}</span>\n </div>\n </div>\n <nas-icon type=\"chevron-down\" [nasClass]=\"getClass('indicator', exists(badge) ? 'no-margin' : '')\"></nas-icon>\n </button>\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-accordion{position:relative;border:1px solid #E9E7E4;background-color:#fff}.nas-accordion__toggle{display:flex;align-items:center;text-align:left;width:100%;padding:12px 16px}.nas-accordion__toggle:hover,.nas-accordion__toggle:focus{background-color:#f1f1f1}.nas-accordion__breakdown{display:flex;flex-direction:column;align-items:normal;width:100%}@media (min-width: 640px){.nas-accordion__breakdown{flex-direction:row;align-items:center}}.nas-accordion__wrapper--enter{perspective:1000px}.nas-accordion__wrapper--enter .nas-accordion__content{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-in .55s ease both}.nas-accordion__wrapper--leave{position:absolute;width:100%;perspective:1000px}.nas-accordion__wrapper--leave .nas-accordion__content{transform-origin:center top;transform-style:preserve-3d;-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:flip-out .2s ease both}.nas-accordion__content{padding:9px 16px 16px;background-color:#fff}.nas-accordion__content p:last-child{margin-bottom:0}.nas-accordion__indicator{position:relative;margin-left:auto;transition:transform .2s cubic-bezier(0,0,.1,1);transform-origin:45% 55%}.nas-accordion__indicator--no-margin,.nas-accordion__title{margin:0}.nas-accordion--simple{background-color:transparent;border:none}.nas-accordion--simple .nas-accordion__toggle{padding:0;background-color:transparent;margin-bottom:12px}.nas-accordion--simple .nas-accordion__indicator{margin-left:9px;transform-origin:45% 55%;margin-bottom:3px}.nas-accordion--simple .nas-accordion__content{padding:16px}.nas-accordion__icon{margin:0 9px 0 0}.nas-accordion__badge{background-color:#f8f8f8;border:1px solid #E9E7E4;padding:4px 8px;margin:3px 24px 3px 0;font-size:14px;color:#15273f;border-radius:100px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (min-width: 640px){.nas-accordion__badge{margin-left:auto}}.nas-accordion__badge--success{background-color:#f4faf2;border:1px solid #2EB004;padding:4px 8px;margin:3px 24px 3px 0;font-size:14px;color:#15273f;border-radius:100px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (min-width: 640px){.nas-accordion__badge--success{margin-left:auto}}.nas-accordion__badge--info{background-color:#ebf4ff;border:1px solid #15273F;padding:4px 8px;margin:3px 24px 3px 0;font-size:14px;color:#15273f;border-radius:100px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (min-width: 640px){.nas-accordion__badge--info{margin-left:auto}}.nas-accordion__badge--error{background-color:#fff5f3;border:1px solid #CC3A19;padding:4px 8px;margin:3px 24px 3px 0;font-size:14px;color:#15273f;border-radius:100px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (min-width: 640px){.nas-accordion__badge--error{margin-left:auto}}.nas-accordion__badge--warning{background-color:#fff6ec;border:1px solid #FC9E12;padding:4px 8px;margin:3px 24px 3px 0;font-size:14px;color:#15273f;border-radius:100px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (min-width: 640px){.nas-accordion__badge--warning{margin-left:auto}}.nas-accordion--expanded{z-index:20}.nas-accordion--expanded .nas-accordion__indicator{transform:rotate(-180deg)}@media (min-width: 640px){.nas-accordion--spaced .nas-accordion__toggle{padding:16px 24px}}@media (min-width: 640px){.nas-accordion--spaced .nas-accordion__content{padding:12px 24px 24px}}.nas-accordion--small .nas-accordion__toggle{padding:9px 16px;background-color:#fff}.nas-accordion--small .nas-accordion__toggle:hover,.nas-accordion--small .nas-accordion__toggle:focus{background-color:#fff}.nas-accordion--small .nas-accordion__content{padding:3px 16px 24px}.nas-accordion--small .nas-accordion__indicator{transform-origin:45% 55%;margin-bottom:3px}.nas-accordion--inverted{border:1px solid #FFFFFF}.nas-accordion--inverted .nas-accordion__toggle{background-color:#e9e7e4}.nas-accordion--inverted .nas-accordion__toggle:hover,.nas-accordion--inverted .nas-accordion__toggle:focus{background-color:#fff}.nas-accordion--inverted .nas-accordion__content,.nas-accordion--inverted.nas-accordion--expanded .nas-accordion__toggle{background-color:#e9e7e4}.nas-accordion--nopadding{padding-bottom:25px}.nas-accordion--nopadding .nas-accordion__toggle,.nas-accordion--nopadding .nas-accordion__content{padding:0}.nas-accordion--approve .nas-accordion__toggle{background-color:#f4faf2;color:#2eb004}.nas-accordion--primary .nas-accordion__toggle{background-color:#fff5f3;color:#b12a0b}.nas-accordion--warning .nas-accordion__toggle,.nas-accordion--warning .nas-accordion__content{background-color:#fff6ec;color:#15273f}.nas-accordion .nas-icon-positive--light,.nas-accordion .nas-icon-negative--light{transform:scale(.85)}\n"] }]
|
|
102
102
|
}], ctorParameters: function () { return []; }, propDecorators: { expanded: [{
|
|
103
103
|
type: Input
|
|
104
104
|
}], title: [{
|