@norwegian/core-components 7.16.2 → 7.16.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/icons/small/checkmark-outlined.svg +3 -0
- package/assets/icons/small/checkmark-solid.svg +3 -0
- package/esm2022/lib/components/accordion/accordion.component.mjs +2 -2
- package/esm2022/lib/components/icon/icon.component.mjs +2 -2
- package/fesm2022/norwegian-core-components.mjs +4 -4
- package/fesm2022/norwegian-core-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM17.3217 6L19.8 8.41751L9.94075 18L4.2 12.4L6.66032 10L9.94075 13.2L17.3217 6Z" fill="#15273F"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C2.57703e-07 5.37258 5.37258 2.57711e-07 12 0ZM9.94043 13.2002L6.66016 10L4.2002 12.4004L9.94043 18L19.7998 8.41797L17.3213 6L9.94043 13.2002Z" fill="#15273F"/>
|
|
3
|
+
</svg>
|
|
@@ -106,11 +106,11 @@ export class AccordionComponent extends NasComponentBase {
|
|
|
106
106
|
this.regularHeader = !this.exists(this.small) && !this.exists(this.simple) ? true : false;
|
|
107
107
|
}
|
|
108
108
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
109
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AccordionComponent, selector: "nas-accordion", inputs: { expanded: "expanded", title: "title", titleDescription: "titleDescription", description: "description", 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", htag: "htag" }, 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 <div>\n <div [nasClass]=\"getClass('header')\">\n <ng-container *ngIf=\"regularHeader\">\n <ng-container [ngSwitch]=\"headerLevel\">\n <h1 *ngSwitchCase=\"1\" [nasClass]=\"getClass('title')\">{{ title }}</h1>\n <h2 *ngSwitchCase=\"2\" [nasClass]=\"getClass('title')\">{{ title }}</h2>\n <h3 *ngSwitchCase=\"3\" [nasClass]=\"getClass('title')\">{{ title }}</h3>\n <h4 *ngSwitchCase=\"4\" [nasClass]=\"getClass('title')\">{{ title }}</h4>\n <h5 *ngSwitchCase=\"5\" [nasClass]=\"getClass('title')\">{{ title }}</h5>\n </ng-container>\n </ng-container>\n <h6 *ngIf=\"!regularHeader\" [nasClass]=\"getClass('title', 'small')\">{{title}}</h6>\n <div *ngIf=\"titleDescription\" [nasClass]=\"getClass('title', 'description')\">{{titleDescription}}</div>\n </div>\n <div *ngIf=\"description\" [nasClass]=\"getClass('description')\">{{description}}</div>\n </div>\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 [icon]=\"'angle-down'\" [type]=\"'small'\"\n [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;border-radius:4px;margin-bottom:4px}.nas-accordion:hover,.nas-accordion:focus-visible{border-color:#c3c3c3}@media (min-width: 640px){.nas-accordion{margin-bottom:8px}}.nas-accordion__toggle{display:flex;align-items:center;text-align:left;width:100%;padding:16px;border-radius:4px}.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{overflow:hidden}.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__header{display:flex;flex-wrap:wrap;gap:4px}.nas-accordion__content{padding:16px;background-color:#fff;border-top:1px solid #E9E7E4;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.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{margin:0}.nas-accordion__title{margin:0 12px 0 0;font-size:18px;line-height:24px;line-height:normal}.nas-accordion__title--small{font-size:16px;line-height:24px}.nas-accordion__title--description{margin-right: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;border-top:0}.nas-accordion--simple .nas-icon-small--angle-down{transform:scale(.9)}.nas-accordion__description{margin-top:4px}.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)}.nas-accordion--expanded .nas-accordion__toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}@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;background-color:#fff}.nas-accordion--small .nas-accordion__content{padding:9px}.nas-accordion--small .nas-accordion__indicator{transform-origin:45% 55%;margin-bottom:3px}.nas-accordion--small .nas-icon-small--angle-down{transform:scale(.9)}.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: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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 }); }
|
|
109
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AccordionComponent, selector: "nas-accordion", inputs: { expanded: "expanded", title: "title", titleDescription: "titleDescription", description: "description", 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", htag: "htag" }, 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 <div>\n <div [nasClass]=\"getClass('header')\">\n <ng-container *ngIf=\"regularHeader\">\n <ng-container [ngSwitch]=\"headerLevel\">\n <h1 *ngSwitchCase=\"1\" [nasClass]=\"getClass('title')\">{{ title }}</h1>\n <h2 *ngSwitchCase=\"2\" [nasClass]=\"getClass('title')\">{{ title }}</h2>\n <h3 *ngSwitchCase=\"3\" [nasClass]=\"getClass('title')\">{{ title }}</h3>\n <h4 *ngSwitchCase=\"4\" [nasClass]=\"getClass('title')\">{{ title }}</h4>\n <h5 *ngSwitchCase=\"5\" [nasClass]=\"getClass('title')\">{{ title }}</h5>\n </ng-container>\n </ng-container>\n <h6 *ngIf=\"!regularHeader\" [nasClass]=\"getClass('title', 'small')\">{{title}}</h6>\n <div *ngIf=\"titleDescription\" [nasClass]=\"getClass('title', 'description')\">{{titleDescription}}</div>\n </div>\n <div *ngIf=\"description\" [nasClass]=\"getClass('description')\">{{description}}</div>\n </div>\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 [icon]=\"'angle-down'\" [type]=\"'small'\"\n [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;border-radius:4px;margin-bottom:4px}.nas-accordion:hover,.nas-accordion:focus-visible{border-color:#c3c3c3}@media (min-width: 640px){.nas-accordion{margin-bottom:8px}}.nas-accordion__toggle{display:flex;align-items:center;text-align:left;width:100%;padding:16px;border-radius:4px}.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__header{display:flex;flex-wrap:wrap;gap:4px}.nas-accordion__content{padding:16px;background-color:#fff;border-top:1px solid #E9E7E4;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.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{margin:0}.nas-accordion__title{margin:0 12px 0 0;font-size:18px;line-height:24px;line-height:normal}.nas-accordion__title--small{font-size:16px;line-height:24px}.nas-accordion__title--description{margin-right: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;border-top:0}.nas-accordion--simple .nas-icon-small--angle-down{transform:scale(.9)}.nas-accordion__description{margin-top:4px}.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)}.nas-accordion--expanded .nas-accordion__toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}@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;background-color:#fff}.nas-accordion--small .nas-accordion__content{padding:9px}.nas-accordion--small .nas-accordion__indicator{transform-origin:45% 55%;margin-bottom:3px}.nas-accordion--small .nas-icon-small--angle-down{transform:scale(.9)}.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: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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 }); }
|
|
110
110
|
}
|
|
111
111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
112
112
|
type: Component,
|
|
113
|
-
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 <div>\n <div [nasClass]=\"getClass('header')\">\n <ng-container *ngIf=\"regularHeader\">\n <ng-container [ngSwitch]=\"headerLevel\">\n <h1 *ngSwitchCase=\"1\" [nasClass]=\"getClass('title')\">{{ title }}</h1>\n <h2 *ngSwitchCase=\"2\" [nasClass]=\"getClass('title')\">{{ title }}</h2>\n <h3 *ngSwitchCase=\"3\" [nasClass]=\"getClass('title')\">{{ title }}</h3>\n <h4 *ngSwitchCase=\"4\" [nasClass]=\"getClass('title')\">{{ title }}</h4>\n <h5 *ngSwitchCase=\"5\" [nasClass]=\"getClass('title')\">{{ title }}</h5>\n </ng-container>\n </ng-container>\n <h6 *ngIf=\"!regularHeader\" [nasClass]=\"getClass('title', 'small')\">{{title}}</h6>\n <div *ngIf=\"titleDescription\" [nasClass]=\"getClass('title', 'description')\">{{titleDescription}}</div>\n </div>\n <div *ngIf=\"description\" [nasClass]=\"getClass('description')\">{{description}}</div>\n </div>\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 [icon]=\"'angle-down'\" [type]=\"'small'\"\n [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;border-radius:4px;margin-bottom:4px}.nas-accordion:hover,.nas-accordion:focus-visible{border-color:#c3c3c3}@media (min-width: 640px){.nas-accordion{margin-bottom:8px}}.nas-accordion__toggle{display:flex;align-items:center;text-align:left;width:100%;padding:16px;border-radius:4px}.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
|
|
113
|
+
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 <div>\n <div [nasClass]=\"getClass('header')\">\n <ng-container *ngIf=\"regularHeader\">\n <ng-container [ngSwitch]=\"headerLevel\">\n <h1 *ngSwitchCase=\"1\" [nasClass]=\"getClass('title')\">{{ title }}</h1>\n <h2 *ngSwitchCase=\"2\" [nasClass]=\"getClass('title')\">{{ title }}</h2>\n <h3 *ngSwitchCase=\"3\" [nasClass]=\"getClass('title')\">{{ title }}</h3>\n <h4 *ngSwitchCase=\"4\" [nasClass]=\"getClass('title')\">{{ title }}</h4>\n <h5 *ngSwitchCase=\"5\" [nasClass]=\"getClass('title')\">{{ title }}</h5>\n </ng-container>\n </ng-container>\n <h6 *ngIf=\"!regularHeader\" [nasClass]=\"getClass('title', 'small')\">{{title}}</h6>\n <div *ngIf=\"titleDescription\" [nasClass]=\"getClass('title', 'description')\">{{titleDescription}}</div>\n </div>\n <div *ngIf=\"description\" [nasClass]=\"getClass('description')\">{{description}}</div>\n </div>\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 [icon]=\"'angle-down'\" [type]=\"'small'\"\n [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;border-radius:4px;margin-bottom:4px}.nas-accordion:hover,.nas-accordion:focus-visible{border-color:#c3c3c3}@media (min-width: 640px){.nas-accordion{margin-bottom:8px}}.nas-accordion__toggle{display:flex;align-items:center;text-align:left;width:100%;padding:16px;border-radius:4px}.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__header{display:flex;flex-wrap:wrap;gap:4px}.nas-accordion__content{padding:16px;background-color:#fff;border-top:1px solid #E9E7E4;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.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{margin:0}.nas-accordion__title{margin:0 12px 0 0;font-size:18px;line-height:24px;line-height:normal}.nas-accordion__title--small{font-size:16px;line-height:24px}.nas-accordion__title--description{margin-right: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;border-top:0}.nas-accordion--simple .nas-icon-small--angle-down{transform:scale(.9)}.nas-accordion__description{margin-top:4px}.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)}.nas-accordion--expanded .nas-accordion__toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}@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;background-color:#fff}.nas-accordion--small .nas-accordion__content{padding:9px}.nas-accordion--small .nas-accordion__indicator{transform-origin:45% 55%;margin-bottom:3px}.nas-accordion--small .nas-icon-small--angle-down{transform:scale(.9)}.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"] }]
|
|
114
114
|
}], ctorParameters: function () { return []; }, propDecorators: { expanded: [{
|
|
115
115
|
type: Input
|
|
116
116
|
}], title: [{
|