@norwegian/core-components 7.13.1 → 7.13.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/icons/icon-klarna--light.svg +3 -13
- package/assets/icons/icon-klarna.svg +3 -13
- package/assets/icons/small/klarna--light.svg +4 -6
- package/assets/icons/small/klarna.svg +4 -6
- package/assets/icons/small/mail--disabled.svg +9 -0
- package/esm2022/lib/components/alert/alert.component.mjs +2 -2
- package/esm2022/lib/components/button/button.component.mjs +2 -2
- package/esm2022/lib/components/icon/icon.component.mjs +2 -2
- package/esm2022/lib/components/input/input.component.mjs +3 -3
- package/esm2022/lib/components/micro-button/micro-button.component.mjs +2 -2
- package/esm2022/lib/components/page-header/page-header.component.mjs +2 -2
- package/esm2022/lib/components/page-header/search/search.component.mjs +2 -2
- package/esm2022/lib/components/tab-group/tab/tab.component.mjs +2 -2
- package/esm2022/lib/components/toggle/toggle.component.mjs +2 -2
- package/fesm2022/norwegian-core-components.mjs +18 -18
- package/fesm2022/norwegian-core-components.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,14 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<g fill="none" fill-rule="evenodd">
|
|
5
|
-
<g transform="translate(-310 -37)" fill-rule="nonzero">
|
|
6
|
-
<g transform="translate(310 37)">
|
|
7
|
-
<rect x="5.6843e-14" width="45" height="25" rx="4.321" fill="#FFFFFF"/>
|
|
8
|
-
<g transform="translate(4.4136 8.4)" fill="#0A0B09">
|
|
9
|
-
<path d="m36.38 6.2463c-0.58875 0-1.066 0.48158-1.066 1.0757 0 0.594 0.47725 1.0757 1.066 1.0757 0.58874 0 1.0661-0.48167 1.0661-1.0757 0-0.59416-0.47734-1.0757-1.0661-1.0757zm-3.5073-0.83166c0-0.81338-0.68897-1.4726-1.5389-1.4726s-1.539 0.65925-1.539 1.4726c0 0.81339 0.68898 1.4728 1.539 1.4728s1.5389-0.65941 1.5389-1.4728zm0.0057148-2.8622h1.6984v5.7242h-1.6984v-0.36584c-0.47982 0.3302-1.059 0.52431-1.6837 0.52431-1.6531 0-2.9933-1.3523-2.9933-3.0205s1.3402-3.0204 2.9933-3.0204c0.6247 0 1.2039 0.1941 1.6837 0.5244v-0.36619zm-13.592 0.74562v-0.74554h-1.7389v5.7241h1.7428v-2.6725c0-0.90167 0.96849-1.3863 1.6405-1.3863 0.0068818 0 0.013306 6.6771e-4 0.020188 7.527e-4v-1.6656c-0.68973 0-1.3241 0.298-1.6646 0.7452zm-4.3316 2.1166c0-0.81338-0.68905-1.4726-1.539-1.4726-0.84991 0-1.539 0.65925-1.539 1.4726 0 0.81339 0.68905 1.4728 1.539 1.4728 0.84998 0 1.539-0.65941 1.539-1.4728zm0.0056186-2.8622h1.6985v5.7242h-1.6985v-0.36584c-0.47982 0.3302-1.059 0.52431-1.6836 0.52431-1.6532 0-2.9934-1.3523-2.9934-3.0205s1.3402-3.0204 2.9934-3.0204c0.62464 0 1.2038 0.1941 1.6836 0.5244v-0.36619zm10.223-0.15396c-0.67846 0-1.3206 0.21255-1.7499 0.79895v-0.64465h-1.6911v5.7239h1.7119v-3.0081c0-0.87046 0.57847-1.2967 1.275-1.2967 0.74646 0 1.1756 0.44996 1.1756 1.2849v3.0199h1.6964v-3.6401c0-1.3321-1.0496-2.238-2.4179-2.238zm-17.374 5.8782h1.7777v-8.2751h-1.7777v8.2751zm-7.8091 0.0022581h1.8824v-8.2789h-1.8824v8.2789zm6.584-8.2789c0 1.7923-0.69219 3.4596-1.9256 4.6989l2.602 3.5803h-2.325l-2.8278-3.891 0.72981-0.55152c1.2103-0.91484 1.9045-2.3132 1.9045-3.8367h1.8421z"/>
|
|
10
|
-
</g>
|
|
11
|
-
</g>
|
|
12
|
-
</g>
|
|
13
|
-
</g>
|
|
1
|
+
<svg width="45" height="25" viewBox="0 0 1448 609" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M0 304.493C0 180.585 0 118.631 30.3995 74.5079C42.2947 57.2427 57.2427 42.2947 74.5079 30.3995C118.631 0 180.585 0 304.493 0H1142.75C1266.65 0 1328.61 0 1372.73 30.3995C1390 42.2947 1404.95 57.2427 1416.84 74.5079C1447.24 118.631 1447.24 180.585 1447.24 304.493C1447.24 428.402 1447.24 490.356 1416.84 534.479C1404.95 551.744 1390 566.692 1372.73 578.587C1328.61 608.987 1266.65 608.987 1142.75 608.987H304.494C180.585 608.987 118.631 608.987 74.5079 578.587C57.2427 566.692 42.2947 551.744 30.3995 534.479C0 490.356 0 428.402 0 304.493Z" fill="#0B051D"/>
|
|
3
|
+
<path d="M1166.17 389.005C1140.92 389.005 1121.24 368.125 1121.24 342.771C1121.24 317.416 1140.92 296.536 1166.17 296.536C1191.42 296.536 1211.1 317.416 1211.1 342.771C1211.1 368.125 1191.42 389.005 1166.17 389.005ZM1153.54 437.85C1175.08 437.85 1202.56 429.647 1217.79 397.581L1219.27 398.327C1212.59 415.851 1212.59 426.292 1212.59 428.902V433.003H1266.8V252.538H1212.59V256.64C1212.59 259.25 1212.59 269.69 1219.27 287.214L1217.79 287.96C1202.56 255.894 1175.08 247.691 1153.54 247.691C1101.93 247.691 1065.54 288.706 1065.54 342.771C1065.54 396.835 1101.93 437.85 1153.54 437.85ZM971.216 247.691C946.707 247.691 927.397 256.267 911.801 287.96L910.316 287.214C917 269.69 917 259.25 917 256.64V252.538H862.784V433.003H918.485V337.923C918.485 312.942 932.968 297.281 956.362 297.281C979.757 297.281 991.268 310.704 991.268 337.55V433.003H1046.97V318.162C1046.97 277.147 1015.03 247.691 971.216 247.691ZM782.203 287.96L780.717 287.214C787.401 269.69 787.401 259.25 787.401 256.64V252.538H733.186V433.003H788.887L789.258 346.126C789.258 320.772 802.626 305.484 824.536 305.484C830.477 305.484 835.305 306.23 840.875 307.722V252.538C816.366 247.318 794.457 256.64 782.203 287.96ZM605.073 389.005C579.821 389.005 560.14 368.125 560.14 342.771C560.14 317.416 579.821 296.536 605.073 296.536C630.324 296.536 650.005 317.416 650.005 342.771C650.005 368.125 630.324 389.005 605.073 389.005ZM592.447 437.85C613.985 437.85 641.464 429.647 656.689 397.581L658.174 398.327C651.49 415.851 651.49 426.292 651.49 428.902V433.003H705.706V252.538H651.49V256.64C651.49 259.25 651.49 269.69 658.174 287.214L656.689 287.96C641.464 255.894 613.985 247.691 592.447 247.691C540.83 247.691 504.439 288.706 504.439 342.771C504.439 396.835 540.83 437.85 592.447 437.85ZM426.828 433.003H482.53V172H426.828V433.003ZM385.981 172H329.165C329.165 218.608 300.572 260.368 257.125 290.197L240.043 302.129V172H181V433.003H240.043V303.62L337.706 433.003H409.747L315.797 309.213C358.501 278.266 386.352 230.166 385.981 172Z" fill="#F9F8F5"/>
|
|
14
4
|
</svg>
|
|
@@ -1,14 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<g fill="none" fill-rule="evenodd">
|
|
5
|
-
<g transform="translate(-310 -37)" fill-rule="nonzero">
|
|
6
|
-
<g transform="translate(310 37)">
|
|
7
|
-
<rect x="5.6843e-14" width="45" height="25" rx="4.321" fill="#FFB3C7"/>
|
|
8
|
-
<g transform="translate(4.4136 8.4)" fill="#0A0B09">
|
|
9
|
-
<path d="m36.38 6.2463c-0.58875 0-1.066 0.48158-1.066 1.0757 0 0.594 0.47725 1.0757 1.066 1.0757 0.58874 0 1.0661-0.48167 1.0661-1.0757 0-0.59416-0.47734-1.0757-1.0661-1.0757zm-3.5073-0.83166c0-0.81338-0.68897-1.4726-1.5389-1.4726s-1.539 0.65925-1.539 1.4726c0 0.81339 0.68898 1.4728 1.539 1.4728s1.5389-0.65941 1.5389-1.4728zm0.0057148-2.8622h1.6984v5.7242h-1.6984v-0.36584c-0.47982 0.3302-1.059 0.52431-1.6837 0.52431-1.6531 0-2.9933-1.3523-2.9933-3.0205s1.3402-3.0204 2.9933-3.0204c0.6247 0 1.2039 0.1941 1.6837 0.5244v-0.36619zm-13.592 0.74562v-0.74554h-1.7389v5.7241h1.7428v-2.6725c0-0.90167 0.96849-1.3863 1.6405-1.3863 0.0068818 0 0.013306 6.6771e-4 0.020188 7.527e-4v-1.6656c-0.68973 0-1.3241 0.298-1.6646 0.7452zm-4.3316 2.1166c0-0.81338-0.68905-1.4726-1.539-1.4726-0.84991 0-1.539 0.65925-1.539 1.4726 0 0.81339 0.68905 1.4728 1.539 1.4728 0.84998 0 1.539-0.65941 1.539-1.4728zm0.0056186-2.8622h1.6985v5.7242h-1.6985v-0.36584c-0.47982 0.3302-1.059 0.52431-1.6836 0.52431-1.6532 0-2.9934-1.3523-2.9934-3.0205s1.3402-3.0204 2.9934-3.0204c0.62464 0 1.2038 0.1941 1.6836 0.5244v-0.36619zm10.223-0.15396c-0.67846 0-1.3206 0.21255-1.7499 0.79895v-0.64465h-1.6911v5.7239h1.7119v-3.0081c0-0.87046 0.57847-1.2967 1.275-1.2967 0.74646 0 1.1756 0.44996 1.1756 1.2849v3.0199h1.6964v-3.6401c0-1.3321-1.0496-2.238-2.4179-2.238zm-17.374 5.8782h1.7777v-8.2751h-1.7777v8.2751zm-7.8091 0.0022581h1.8824v-8.2789h-1.8824v8.2789zm6.584-8.2789c0 1.7923-0.69219 3.4596-1.9256 4.6989l2.602 3.5803h-2.325l-2.8278-3.891 0.72981-0.55152c1.2103-0.91484 1.9045-2.3132 1.9045-3.8367h1.8421z"/>
|
|
10
|
-
</g>
|
|
11
|
-
</g>
|
|
12
|
-
</g>
|
|
13
|
-
</g>
|
|
1
|
+
<svg width="45" height="25" viewBox="0 0 1448 609" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M0 304.493C0 180.585 0 118.631 30.3995 74.5079C42.2947 57.2427 57.2427 42.2947 74.5079 30.3995C118.631 0 180.585 0 304.493 0H1142.75C1266.65 0 1328.61 0 1372.73 30.3995C1390 42.2947 1404.95 57.2427 1416.84 74.5079C1447.24 118.631 1447.24 180.585 1447.24 304.493C1447.24 428.402 1447.24 490.356 1416.84 534.479C1404.95 551.744 1390 566.692 1372.73 578.587C1328.61 608.987 1266.65 608.987 1142.75 608.987H304.494C180.585 608.987 118.631 608.987 74.5079 578.587C57.2427 566.692 42.2947 551.744 30.3995 534.479C0 490.356 0 428.402 0 304.493Z" fill="#FFA8CD"/>
|
|
3
|
+
<path d="M1166.17 389.005C1140.92 389.005 1121.24 368.125 1121.24 342.771C1121.24 317.416 1140.92 296.536 1166.17 296.536C1191.42 296.536 1211.1 317.416 1211.1 342.771C1211.1 368.125 1191.42 389.005 1166.17 389.005ZM1153.54 437.85C1175.08 437.85 1202.56 429.647 1217.79 397.581L1219.27 398.327C1212.59 415.851 1212.59 426.292 1212.59 428.902V433.003H1266.8V252.538H1212.59V256.64C1212.59 259.25 1212.59 269.69 1219.27 287.214L1217.79 287.96C1202.56 255.894 1175.08 247.691 1153.54 247.691C1101.93 247.691 1065.54 288.706 1065.54 342.771C1065.54 396.835 1101.93 437.85 1153.54 437.85ZM971.216 247.691C946.707 247.691 927.397 256.267 911.801 287.96L910.316 287.214C917 269.69 917 259.25 917 256.64V252.538H862.784V433.003H918.485V337.923C918.485 312.942 932.968 297.281 956.362 297.281C979.757 297.281 991.268 310.704 991.268 337.55V433.003H1046.97V318.162C1046.97 277.147 1015.03 247.691 971.216 247.691ZM782.203 287.96L780.717 287.214C787.401 269.69 787.401 259.25 787.401 256.64V252.538H733.186V433.003H788.887L789.258 346.126C789.258 320.772 802.626 305.484 824.536 305.484C830.477 305.484 835.305 306.23 840.875 307.722V252.538C816.366 247.318 794.457 256.64 782.203 287.96ZM605.073 389.005C579.821 389.005 560.14 368.125 560.14 342.771C560.14 317.416 579.821 296.536 605.073 296.536C630.324 296.536 650.005 317.416 650.005 342.771C650.005 368.125 630.324 389.005 605.073 389.005ZM592.447 437.85C613.985 437.85 641.464 429.647 656.689 397.581L658.174 398.327C651.49 415.851 651.49 426.292 651.49 428.902V433.003H705.706V252.538H651.49V256.64C651.49 259.25 651.49 269.69 658.174 287.214L656.689 287.96C641.464 255.894 613.985 247.691 592.447 247.691C540.83 247.691 504.439 288.706 504.439 342.771C504.439 396.835 540.83 437.85 592.447 437.85ZM426.828 433.003H482.53V172H426.828V433.003ZM385.981 172H329.165C329.165 218.608 300.572 260.368 257.125 290.197L240.043 302.129V172H181V433.003H240.043V303.62L337.706 433.003H409.747L315.797 309.213C358.501 278.266 386.352 230.166 385.981 172Z" fill="#0B051D"/>
|
|
14
4
|
</svg>
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0
|
|
2
|
-
<
|
|
3
|
-
<path d="
|
|
4
|
-
|
|
5
|
-
<circle cx="18.5" cy="17.5" r="1.5" fill="black"/>
|
|
6
|
-
</svg>
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 609 609" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M0 262C0 138.492 0 76.738 38.369 38.369C76.738 0 138.492 0 262 0H347C470.508 0 532.262 0 570.631 38.369C609 76.738 609 138.492 609 262V347C609 470.508 609 532.262 570.631 570.631C532.262 609 470.508 609 347 609H262C138.492 609 76.738 609 38.369 570.631C0 532.262 0 470.508 0 347V262Z" fill="#0B051D"/>
|
|
3
|
+
<path d="M449.675 110H365.227C365.227 179.464 322.727 241.704 258.149 286.161L232.76 303.944V110H145V499H232.76V306.167L377.922 499H485L345.357 314.503C408.831 268.379 450.227 196.691 449.675 110Z" fill="#F9F8F5"/>
|
|
4
|
+
</svg>
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0
|
|
2
|
-
<
|
|
3
|
-
<path d="
|
|
4
|
-
|
|
5
|
-
<circle cx="18.5" cy="17.5" r="1.5" fill="black"/>
|
|
6
|
-
</svg>
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 609 609" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M0 262C0 138.492 0 76.738 38.369 38.369C76.738 0 138.492 0 262 0H347C470.508 0 532.262 0 570.631 38.369C609 76.738 609 138.492 609 262V347C609 470.508 609 532.262 570.631 570.631C532.262 609 470.508 609 347 609H262C138.492 609 76.738 609 38.369 570.631C0 532.262 0 470.508 0 347V262Z" fill="#FFA8CD"/>
|
|
3
|
+
<path d="M449.675 110H365.227C365.227 179.464 322.727 241.704 258.149 286.161L232.76 303.944V110H145V499H232.76V306.167L377.922 499H485L345.357 314.503C408.831 268.379 450.227 196.691 449.675 110Z" fill="#0B051D"/>
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
|
4
|
+
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
5
|
+
width="24px" height="24px" viewBox="-285 408.9 24 24" enable-background="new -285 408.9 24 24" xml:space="preserve">
|
|
6
|
+
<path fill="#6F6F6F" d="M-265,412.9h-16c-1.7,0-3,1.3-3,3v10c0,1.7,1.3,3,3,3h16c1.7,0,3-1.3,3-3v-10
|
|
7
|
+
C-262,414.2-263.3,412.9-265,412.9z M-264.6,415.9l-7,7.3c-0.8,0.9-0.9,0.9-1.8,0l-8-7.4c-0.5-0.5-0.3-0.9,0.4-0.9h16
|
|
8
|
+
C-264.3,414.9-264.1,415.3-264.6,415.9z"/>
|
|
9
|
+
</svg>
|
|
@@ -121,11 +121,11 @@ export class AlertComponent extends NasComponentBase {
|
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
123
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
124
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertComponent, selector: "nas-alert", inputs: { timestamp: "timestamp", title: "title", info: "info", warning: "warning", error: "error", success: "success", neutral: "neutral", text: "text", stackTraceLabel: "stackTraceLabel", show: "show", removable: "removable", removeIcon: "removeIcon", trustTextHtml: "trustTextHtml", allowAutoScroll: "allowAutoScroll", server: "server", correlation: "correlation", alert: "alert" }, outputs: { showChange: "showChange" }, viewQueries: [{ propertyName: "alertContainer", first: true, predicate: ["alertContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"exists(show)\" #alertContainer [nasClass]=\"getClasses('', modifiers)\" tabindex=\"0\">\n <div [nasClass]=\"getClass('content')\">\n <nas-icon *ngIf=\"!exists(removeIcon)\" [icon]=\"getIcon()\"></nas-icon>\n <div [nasClass]=\"getClass('remove-alert')\" *ngIf=\"exists(removable);\">\n <nas-icon type=\"remove\" (click)=\"removeAlertBox()\"></nas-icon>\n </div>\n <div [nasClass]=\"getClass('text-container')\">\n <div *ngIf=\"timestamp || server || correlation\" [nasClass]=\"getClass('text--internal-info')\">\n <span *ngIf=\"timestamp\">{{timestamp | date:'full'}}</span>\n <span *ngIf=\"server\">{{server}}</span>\n <span *ngIf=\"correlation\">{{correlation}}</span>\n </div>\n <div *ngIf=\"exists(title)\" [nasClass]=\"getClass('title')\">{{title}}</div>\n <span *ngIf=\"text && !trustTextHtml\" [nasClass]=\"getClass('text')\">{{text}}</span>\n <span *ngIf=\"text && trustTextHtml\" [nasClass]=\"getClass('text')\" [innerHTML]=\"text\"></span>\n <ul *ngIf=\"alert?.messages?.length > 0\">\n <li *ngFor=\"let message of alert?.messages\">\n <span>{{message}}</span>\n </li>\n </ul>\n <ng-content></ng-content>\n <div *ngIf=\"alert?.link\">\n <nas-button link [href]=\"alert.link.href\">{{alert.link.text}}</nas-button>\n </div>\n <div *ngIf=\"alert?.stackTrace\" [nasClass]=\"getClass('stack-trace')\">\n <nas-accordion simple [title]=\"stackTraceLabel\">\n {{alert?.stackTrace}}\n </nas-accordion>\n </div>\n </div>\n </div>\n</div>", 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-alert{position:relative;padding:16px 12px;width:100%;height:100%;border:1px solid #15273F;background-color:#ebf4ff}.nas-alert--info{background-color:#ebf4ff;border:1px solid #15273F}.nas-alert--info img{width:24px;height:24px}.nas-alert--info:focus-visible{outline:2px solid #
|
|
124
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertComponent, selector: "nas-alert", inputs: { timestamp: "timestamp", title: "title", info: "info", warning: "warning", error: "error", success: "success", neutral: "neutral", text: "text", stackTraceLabel: "stackTraceLabel", show: "show", removable: "removable", removeIcon: "removeIcon", trustTextHtml: "trustTextHtml", allowAutoScroll: "allowAutoScroll", server: "server", correlation: "correlation", alert: "alert" }, outputs: { showChange: "showChange" }, viewQueries: [{ propertyName: "alertContainer", first: true, predicate: ["alertContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"exists(show)\" #alertContainer [nasClass]=\"getClasses('', modifiers)\" tabindex=\"0\">\n <div [nasClass]=\"getClass('content')\">\n <nas-icon *ngIf=\"!exists(removeIcon)\" [icon]=\"getIcon()\"></nas-icon>\n <div [nasClass]=\"getClass('remove-alert')\" *ngIf=\"exists(removable);\">\n <nas-icon type=\"remove\" (click)=\"removeAlertBox()\"></nas-icon>\n </div>\n <div [nasClass]=\"getClass('text-container')\">\n <div *ngIf=\"timestamp || server || correlation\" [nasClass]=\"getClass('text--internal-info')\">\n <span *ngIf=\"timestamp\">{{timestamp | date:'full'}}</span>\n <span *ngIf=\"server\">{{server}}</span>\n <span *ngIf=\"correlation\">{{correlation}}</span>\n </div>\n <div *ngIf=\"exists(title)\" [nasClass]=\"getClass('title')\">{{title}}</div>\n <span *ngIf=\"text && !trustTextHtml\" [nasClass]=\"getClass('text')\">{{text}}</span>\n <span *ngIf=\"text && trustTextHtml\" [nasClass]=\"getClass('text')\" [innerHTML]=\"text\"></span>\n <ul *ngIf=\"alert?.messages?.length > 0\">\n <li *ngFor=\"let message of alert?.messages\">\n <span>{{message}}</span>\n </li>\n </ul>\n <ng-content></ng-content>\n <div *ngIf=\"alert?.link\">\n <nas-button link [href]=\"alert.link.href\">{{alert.link.text}}</nas-button>\n </div>\n <div *ngIf=\"alert?.stackTrace\" [nasClass]=\"getClass('stack-trace')\">\n <nas-accordion simple [title]=\"stackTraceLabel\">\n {{alert?.stackTrace}}\n </nas-accordion>\n </div>\n </div>\n </div>\n</div>", 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-alert{position:relative;padding:16px 12px;width:100%;height:100%;border:1px solid #15273F;background-color:#ebf4ff}.nas-alert--info{background-color:#ebf4ff;border:1px solid #15273F}.nas-alert--info img{width:24px;height:24px}.nas-alert--info:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-alert--success{background-color:#f4faf2;border:1px solid #2EB004}.nas-alert--success img{width:24px;height:24px}.nas-alert--success:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-alert--warning{background-color:#fff6ec;border:1px solid #FC9E12}.nas-alert--warning img{width:24px;height:24px}.nas-alert--warning:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-alert--error{background-color:#fff5f3;border:1px solid #CC3A19}.nas-alert--error img{width:24px;height:24px}.nas-alert--error:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-alert--neutral{background-color:#f8f8f8;border:1px solid #E9E7E4}.nas-alert--neutral img{width:24px;height:24px}.nas-alert--neutral:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-alert__content{display:inline-flex}.nas-alert__remove-alert{position:absolute;right:10px;top:10px;cursor:pointer}.nas-alert__text-container{display:flex;flex-direction:column;margin-left:6px}.nas-alert__text-container:not(.nas-alert__title){display:block}.nas-alert__stack-trace{margin-top:12px;word-break:break-word}.nas-alert__stack-trace::ng-deep .nas-accordion__breakdown{width:auto}.nas-alert__stack-trace::ng-deep .nas-accordion__indicator{margin-bottom:0}.nas-alert__title{font-size:14px;line-height:20px;color:#15273f;font-weight:700;margin-bottom:4px}.nas-alert__text,.nas-alert__text--internal-info{color:#15273f;font-size:14px;line-height:20px;font-weight:700;margin-bottom:4px;font-weight:400;margin-top:-1px}.nas-alert__text--internal-info{display:flex;flex-wrap:wrap;flex-direction:row;font-weight:500;font-size:12px;line-height:16px;margin-bottom:9px;gap:3px}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: i4.ButtonComponent, selector: "nas-button", inputs: ["primary", "secondary", "tertiary", "link", "light", "large", "block", "flex", "compact", "right", "spaceless", "href", "trackingvalue", "canContinueOnDisabled", "disabled", "type", "cssClass", "ariaLabel", "cssStyle", "tabindex", "overrideBaseCssClass", "useRouterLink", "id", "target", "icon", "iconLeft", "iconType", "buttonlink"], outputs: ["clickChange", "focusOnNext"] }, { kind: "component", type: i5.AccordionComponent, selector: "nas-accordion", inputs: ["expanded", "title", "badge", "icon", "simple", "spaced", "small", "inverted", "containerOnToggle", "nopadding", "transparent", "approve", "primary", "warning", "badgeInfo", "badgeSuccess", "badgeWarning", "badgeError", "cssClass", "cssStyle"], outputs: ["toggleChange"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
125
125
|
}
|
|
126
126
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertComponent, decorators: [{
|
|
127
127
|
type: Component,
|
|
128
|
-
args: [{ selector: 'nas-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"exists(show)\" #alertContainer [nasClass]=\"getClasses('', modifiers)\" tabindex=\"0\">\n <div [nasClass]=\"getClass('content')\">\n <nas-icon *ngIf=\"!exists(removeIcon)\" [icon]=\"getIcon()\"></nas-icon>\n <div [nasClass]=\"getClass('remove-alert')\" *ngIf=\"exists(removable);\">\n <nas-icon type=\"remove\" (click)=\"removeAlertBox()\"></nas-icon>\n </div>\n <div [nasClass]=\"getClass('text-container')\">\n <div *ngIf=\"timestamp || server || correlation\" [nasClass]=\"getClass('text--internal-info')\">\n <span *ngIf=\"timestamp\">{{timestamp | date:'full'}}</span>\n <span *ngIf=\"server\">{{server}}</span>\n <span *ngIf=\"correlation\">{{correlation}}</span>\n </div>\n <div *ngIf=\"exists(title)\" [nasClass]=\"getClass('title')\">{{title}}</div>\n <span *ngIf=\"text && !trustTextHtml\" [nasClass]=\"getClass('text')\">{{text}}</span>\n <span *ngIf=\"text && trustTextHtml\" [nasClass]=\"getClass('text')\" [innerHTML]=\"text\"></span>\n <ul *ngIf=\"alert?.messages?.length > 0\">\n <li *ngFor=\"let message of alert?.messages\">\n <span>{{message}}</span>\n </li>\n </ul>\n <ng-content></ng-content>\n <div *ngIf=\"alert?.link\">\n <nas-button link [href]=\"alert.link.href\">{{alert.link.text}}</nas-button>\n </div>\n <div *ngIf=\"alert?.stackTrace\" [nasClass]=\"getClass('stack-trace')\">\n <nas-accordion simple [title]=\"stackTraceLabel\">\n {{alert?.stackTrace}}\n </nas-accordion>\n </div>\n </div>\n </div>\n</div>", 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-alert{position:relative;padding:16px 12px;width:100%;height:100%;border:1px solid #15273F;background-color:#ebf4ff}.nas-alert--info{background-color:#ebf4ff;border:1px solid #15273F}.nas-alert--info img{width:24px;height:24px}.nas-alert--info:focus-visible{outline:2px solid #
|
|
128
|
+
args: [{ selector: 'nas-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"exists(show)\" #alertContainer [nasClass]=\"getClasses('', modifiers)\" tabindex=\"0\">\n <div [nasClass]=\"getClass('content')\">\n <nas-icon *ngIf=\"!exists(removeIcon)\" [icon]=\"getIcon()\"></nas-icon>\n <div [nasClass]=\"getClass('remove-alert')\" *ngIf=\"exists(removable);\">\n <nas-icon type=\"remove\" (click)=\"removeAlertBox()\"></nas-icon>\n </div>\n <div [nasClass]=\"getClass('text-container')\">\n <div *ngIf=\"timestamp || server || correlation\" [nasClass]=\"getClass('text--internal-info')\">\n <span *ngIf=\"timestamp\">{{timestamp | date:'full'}}</span>\n <span *ngIf=\"server\">{{server}}</span>\n <span *ngIf=\"correlation\">{{correlation}}</span>\n </div>\n <div *ngIf=\"exists(title)\" [nasClass]=\"getClass('title')\">{{title}}</div>\n <span *ngIf=\"text && !trustTextHtml\" [nasClass]=\"getClass('text')\">{{text}}</span>\n <span *ngIf=\"text && trustTextHtml\" [nasClass]=\"getClass('text')\" [innerHTML]=\"text\"></span>\n <ul *ngIf=\"alert?.messages?.length > 0\">\n <li *ngFor=\"let message of alert?.messages\">\n <span>{{message}}</span>\n </li>\n </ul>\n <ng-content></ng-content>\n <div *ngIf=\"alert?.link\">\n <nas-button link [href]=\"alert.link.href\">{{alert.link.text}}</nas-button>\n </div>\n <div *ngIf=\"alert?.stackTrace\" [nasClass]=\"getClass('stack-trace')\">\n <nas-accordion simple [title]=\"stackTraceLabel\">\n {{alert?.stackTrace}}\n </nas-accordion>\n </div>\n </div>\n </div>\n</div>", 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-alert{position:relative;padding:16px 12px;width:100%;height:100%;border:1px solid #15273F;background-color:#ebf4ff}.nas-alert--info{background-color:#ebf4ff;border:1px solid #15273F}.nas-alert--info img{width:24px;height:24px}.nas-alert--info:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-alert--success{background-color:#f4faf2;border:1px solid #2EB004}.nas-alert--success img{width:24px;height:24px}.nas-alert--success:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-alert--warning{background-color:#fff6ec;border:1px solid #FC9E12}.nas-alert--warning img{width:24px;height:24px}.nas-alert--warning:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-alert--error{background-color:#fff5f3;border:1px solid #CC3A19}.nas-alert--error img{width:24px;height:24px}.nas-alert--error:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-alert--neutral{background-color:#f8f8f8;border:1px solid #E9E7E4}.nas-alert--neutral img{width:24px;height:24px}.nas-alert--neutral:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-alert__content{display:inline-flex}.nas-alert__remove-alert{position:absolute;right:10px;top:10px;cursor:pointer}.nas-alert__text-container{display:flex;flex-direction:column;margin-left:6px}.nas-alert__text-container:not(.nas-alert__title){display:block}.nas-alert__stack-trace{margin-top:12px;word-break:break-word}.nas-alert__stack-trace::ng-deep .nas-accordion__breakdown{width:auto}.nas-alert__stack-trace::ng-deep .nas-accordion__indicator{margin-bottom:0}.nas-alert__title{font-size:14px;line-height:20px;color:#15273f;font-weight:700;margin-bottom:4px}.nas-alert__text,.nas-alert__text--internal-info{color:#15273f;font-size:14px;line-height:20px;font-weight:700;margin-bottom:4px;font-weight:400;margin-top:-1px}.nas-alert__text--internal-info{display:flex;flex-wrap:wrap;flex-direction:row;font-weight:500;font-size:12px;line-height:16px;margin-bottom:9px;gap:3px}\n"] }]
|
|
129
129
|
}], ctorParameters: function () { return []; }, propDecorators: { showChange: [{
|
|
130
130
|
type: Output
|
|
131
131
|
}], alertContainer: [{
|
|
@@ -120,11 +120,11 @@ export class ButtonComponent extends NasComponentBase {
|
|
|
120
120
|
this.focusOnNext.emit(event);
|
|
121
121
|
}
|
|
122
122
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
123
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, selector: "nas-button", inputs: { primary: "primary", secondary: "secondary", tertiary: "tertiary", link: "link", light: "light", large: "large", block: "block", flex: "flex", compact: "compact", right: "right", spaceless: "spaceless", href: "href", trackingvalue: "trackingvalue", canContinueOnDisabled: "canContinueOnDisabled", disabled: "disabled", type: "type", cssClass: "cssClass", ariaLabel: "ariaLabel", cssStyle: "cssStyle", tabindex: "tabindex", overrideBaseCssClass: "overrideBaseCssClass", useRouterLink: "useRouterLink", id: "id", target: "target", icon: "icon", iconLeft: "iconLeft", iconType: "iconType", buttonlink: "buttonlink" }, outputs: { clickChange: "clickChange", focusOnNext: "focusOnNext" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button #button *ngIf=\"!href\" [nasClass]=\"getClasses('', modifiers)\" [ngStyle]=\"buttonStyle\"\n [disabled]=\"!canContinueOnDisabled && disabled\" [class.disabled]=\"disabled\" [attr.type]=\"type\"\n [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\" [id]=\"buttonId\" (click)=\"emitTrackingAndClickEvent($event)\"\n (keydown)=\"onKeydown($event)\">\n <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </span>\n</button>\n\n<ng-container *ngIf=\"href\">\n <ng-container *ngIf=\"exists(useRouterLink); else linksHref\">\n <a [nasClass]=\"getClasses('', modifiers)\" [attr.disabled]=\"disabled\" [routerLink]=\"href\" [id]=\"buttonId\"\n (click)=\"emitTrackingEvent();\" (keydown)=\"onKeydown($event)\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </a>\n </ng-container>\n</ng-container>\n\n<ng-template #linksHref>\n <a [nasClass]=\"getClasses('', modifiers)\" [attr.disabled]=\"disabled\" [href]=\"href\" [target]=\"target\" [id]=\"buttonId\"\n (click)=\"emitTrackingEvent();\" (keydown)=\"onKeydown($event)\">\n <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </span>\n </a>\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-button{position:relative;display:inline-block;padding:12px 24px;width:-webkit-max-content;width:max-content;border:0;border-radius:0;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:16px;font-weight:700;line-height:24px;text-align:center;color:#15273f;background-color:#e9e7e4;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button--container{background-color:#fff}.nas-button:before{content:\"\";display:block;position:absolute;width:100%;height:2px;bottom:-3.5px;left:0;background-color:#e9e7e4;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button:hover,.nas-button:focus{background-color:#e9e7e4}.nas-button:hover:before,.nas-button:focus:before{transform:translateY(0)}.nas-button[disabled]{cursor:default;pointer-events:none;color:#6f6f6f;background-color:#e9e7e4}.nas-button--primary{color:#fff;background-color:#e5212d}.nas-button--primary:before{background-color:#15273f}.nas-button--primary:hover,.nas-button--primary:focus{color:#fff;background-color:#b71530}.nas-button--primary:hover:before,.nas-button--primary:focus:before{background-color:#15273f}.nas-button--primary:active{color:#fff;background:#891024}.nas-button--primary:active:before{background-color:#15273f}.nas-button--primary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button--primary:focus-visible:before{display:none}.nas-button--primary:disabled{background-color:#e9e7e4}.nas-button--secondary{color:#fff;background-color:#15273f}.nas-button--secondary:before{background-color:#15273f}.nas-button--secondary:hover,.nas-button--secondary:focus{color:#fff;background-color:#0a2033}.nas-button--secondary:hover:before,.nas-button--secondary:focus:before{background-color:#0a2033}.nas-button--secondary:active{color:#fff;background:#071622}.nas-button--secondary:active:before{background-color:#071622}.nas-button--secondary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button--secondary:focus-visible:before{display:none}.nas-button--secondary:before{display:none}.nas-button--secondary:disabled{background-color:#e9e7e4}.nas-button--light{color:#15273f;background-color:#fff;border:2px solid #6F6F6F}.nas-button--light:before{background-color:#fff}.nas-button--light:hover,.nas-button--light:focus{color:#15273f;background-color:#f8f8f8}.nas-button--light:hover:before,.nas-button--light:focus:before{background-color:#f8f8f8}.nas-button--light:active{color:#15273f;background:#ebf4ff}.nas-button--light:active:before{background-color:#ebf4ff}.nas-button--light:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button--light:focus-visible:before{display:none}.nas-button--light:before{display:none}.nas-button--light:hover{border:2px solid #15273F}.nas-button--light:disabled{border:0}.nas-button--buttonlink{color:#b12a0b;background-color:transparent}.nas-button--buttonlink:before{background-color:transparent}.nas-button--buttonlink:hover,.nas-button--buttonlink:focus{color:#b12a0b;background-color:#f8f8f8}.nas-button--buttonlink:hover:before,.nas-button--buttonlink:focus:before{background-color:#f8f8f8}.nas-button--buttonlink:active{color:#b12a0b;background:#ebf4ff}.nas-button--buttonlink:active:before{background-color:#ebf4ff}.nas-button--buttonlink:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button--buttonlink:focus-visible:before{display:none}.nas-button--buttonlink:before{display:none}.nas-button--buttonlink:disabled{background-color:#f8f8f8}.nas-button--large{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:18px;line-height:24px;padding:16px 36px 13px}.nas-button--block{display:block;width:100%}.nas-button--flex{display:flex;width:100%}.nas-button--compact{margin-bottom:12px}.nas-button--compact:before{display:none}.nas-button--right{align-self:flex-end;float:right}.nas-button--spaceless{margin-bottom:0}.nas-button--transparent{color:#fff;background-color:#000000a6}.nas-button--transparent:before{background-color:inherit}.nas-button--transparent:hover,.nas-button--transparent:active,.nas-button--transparent:focus{background-color:#000c}.nas-button--link{font-size:inherit;padding:0;margin:0;background:none;color:#b12a0b;width:auto;text-align:unset}.nas-button--link:hover,.nas-button--link:focus{color:#891024;border-color:#15273f;background:none}.nas-button--link:before{display:none}.nas-button--link.nas-button--secondary{color:#15273f}.nas-button--link.nas-button--light{color:#fff}.nas-button--link.nas-button--light:hover,.nas-button--link.nas-button--light:focus{color:#f8f8f8}.nas-button--link.nas-button--tetiary{color:#ffc1b7}.nas-button--link.nas-button--tetiary:hover,.nas-button--link.nas-button--tetiary:focus{color:#ffe2d9}.nas-button__content{display:flex;justify-content:center;gap:4px}.nas-button__content--reverse{flex-direction:row-reverse}.nas-button__icon{position:relative}.nas-button__icon .nas-icon-small{margin:0;transform:scale(.8)}\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: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
123
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonComponent, selector: "nas-button", inputs: { primary: "primary", secondary: "secondary", tertiary: "tertiary", link: "link", light: "light", large: "large", block: "block", flex: "flex", compact: "compact", right: "right", spaceless: "spaceless", href: "href", trackingvalue: "trackingvalue", canContinueOnDisabled: "canContinueOnDisabled", disabled: "disabled", type: "type", cssClass: "cssClass", ariaLabel: "ariaLabel", cssStyle: "cssStyle", tabindex: "tabindex", overrideBaseCssClass: "overrideBaseCssClass", useRouterLink: "useRouterLink", id: "id", target: "target", icon: "icon", iconLeft: "iconLeft", iconType: "iconType", buttonlink: "buttonlink" }, outputs: { clickChange: "clickChange", focusOnNext: "focusOnNext" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<button #button *ngIf=\"!href\" [nasClass]=\"getClasses('', modifiers)\" [ngStyle]=\"buttonStyle\"\n [disabled]=\"!canContinueOnDisabled && disabled\" [class.disabled]=\"disabled\" [attr.type]=\"type\"\n [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\" [id]=\"buttonId\" (click)=\"emitTrackingAndClickEvent($event)\"\n (keydown)=\"onKeydown($event)\">\n <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </span>\n</button>\n\n<ng-container *ngIf=\"href\">\n <ng-container *ngIf=\"exists(useRouterLink); else linksHref\">\n <a [nasClass]=\"getClasses('', modifiers)\" [attr.disabled]=\"disabled\" [routerLink]=\"href\" [id]=\"buttonId\"\n (click)=\"emitTrackingEvent();\" (keydown)=\"onKeydown($event)\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </a>\n </ng-container>\n</ng-container>\n\n<ng-template #linksHref>\n <a [nasClass]=\"getClasses('', modifiers)\" [attr.disabled]=\"disabled\" [href]=\"href\" [target]=\"target\" [id]=\"buttonId\"\n (click)=\"emitTrackingEvent();\" (keydown)=\"onKeydown($event)\">\n <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </span>\n </a>\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-button{position:relative;display:inline-block;padding:12px 24px;width:-webkit-max-content;width:max-content;border:0;border-radius:0;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:16px;font-weight:700;line-height:24px;text-align:center;color:#15273f;background-color:#e9e7e4;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button--container{background-color:#fff}.nas-button:before{content:\"\";display:block;position:absolute;width:100%;height:2px;bottom:-3.5px;left:0;background-color:#e9e7e4;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button:hover,.nas-button:focus{background-color:#e9e7e4}.nas-button:hover:before,.nas-button:focus:before{transform:translateY(0)}.nas-button[disabled]{cursor:default;pointer-events:none;color:#6f6f6f;background-color:#e9e7e4}.nas-button--primary{color:#fff;background-color:#e5212d}.nas-button--primary:before{background-color:#15273f}.nas-button--primary:hover,.nas-button--primary:focus{color:#fff;background-color:#b71530}.nas-button--primary:hover:before,.nas-button--primary:focus:before{background-color:#15273f}.nas-button--primary:active{color:#fff;background:#891024}.nas-button--primary:active:before{background-color:#15273f}.nas-button--primary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button--primary:focus-visible:before{display:none}.nas-button--primary:disabled{background-color:#e9e7e4}.nas-button--secondary{color:#fff;background-color:#15273f}.nas-button--secondary:before{background-color:#15273f}.nas-button--secondary:hover,.nas-button--secondary:focus{color:#fff;background-color:#0a2033}.nas-button--secondary:hover:before,.nas-button--secondary:focus:before{background-color:#0a2033}.nas-button--secondary:active{color:#fff;background:#071622}.nas-button--secondary:active:before{background-color:#071622}.nas-button--secondary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button--secondary:focus-visible:before{display:none}.nas-button--secondary:before{display:none}.nas-button--secondary:disabled{background-color:#e9e7e4}.nas-button--light{color:#15273f;background-color:#fff;border:2px solid #6F6F6F}.nas-button--light:before{background-color:#fff}.nas-button--light:hover,.nas-button--light:focus{color:#15273f;background-color:#f8f8f8}.nas-button--light:hover:before,.nas-button--light:focus:before{background-color:#f8f8f8}.nas-button--light:active{color:#15273f;background:#ebf4ff}.nas-button--light:active:before{background-color:#ebf4ff}.nas-button--light:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button--light:focus-visible:before{display:none}.nas-button--light:before{display:none}.nas-button--light:hover{border:2px solid #15273F}.nas-button--light:disabled{border:0}.nas-button--buttonlink{color:#b12a0b;background-color:transparent}.nas-button--buttonlink:before{background-color:transparent}.nas-button--buttonlink:hover,.nas-button--buttonlink:focus{color:#b12a0b;background-color:#f8f8f8}.nas-button--buttonlink:hover:before,.nas-button--buttonlink:focus:before{background-color:#f8f8f8}.nas-button--buttonlink:active{color:#b12a0b;background:#ebf4ff}.nas-button--buttonlink:active:before{background-color:#ebf4ff}.nas-button--buttonlink:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button--buttonlink:focus-visible:before{display:none}.nas-button--buttonlink:before{display:none}.nas-button--buttonlink:disabled{background-color:#f8f8f8}.nas-button--large{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:18px;line-height:24px;padding:16px 36px 13px}.nas-button--block{display:block;width:100%}.nas-button--flex{display:flex;width:100%}.nas-button--compact{margin-bottom:12px}.nas-button--compact:before{display:none}.nas-button--right{align-self:flex-end;float:right}.nas-button--spaceless{margin-bottom:0}.nas-button--transparent{color:#fff;background-color:#000000a6}.nas-button--transparent:before{background-color:inherit}.nas-button--transparent:hover,.nas-button--transparent:active,.nas-button--transparent:focus{background-color:#000c}.nas-button--link{font-size:inherit;padding:0;margin:0;background:none;color:#b12a0b;width:auto;text-align:unset;text-decoration:none}.nas-button--link:hover,.nas-button--link:focus{color:#891024;border-color:#15273f;background:none}.nas-button--link:before{display:none}.nas-button--link.nas-button--secondary{color:#15273f}.nas-button--link.nas-button--light{color:#fff;border:0}.nas-button--link.nas-button--light:hover,.nas-button--link.nas-button--light:focus{color:#f8f8f8}.nas-button--link.nas-button--tetiary{color:#ffc1b7}.nas-button--link.nas-button--tetiary:hover,.nas-button--link.nas-button--tetiary:focus{color:#ffe2d9}.nas-button__content{display:flex;justify-content:center;gap:4px}.nas-button__content--reverse{flex-direction:row-reverse}.nas-button__icon{position:relative}.nas-button__icon .nas-icon-small{margin:0;transform:scale(.8)}\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: i2.NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
124
124
|
}
|
|
125
125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
126
126
|
type: Component,
|
|
127
|
-
args: [{ selector: 'nas-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #button *ngIf=\"!href\" [nasClass]=\"getClasses('', modifiers)\" [ngStyle]=\"buttonStyle\"\n [disabled]=\"!canContinueOnDisabled && disabled\" [class.disabled]=\"disabled\" [attr.type]=\"type\"\n [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\" [id]=\"buttonId\" (click)=\"emitTrackingAndClickEvent($event)\"\n (keydown)=\"onKeydown($event)\">\n <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </span>\n</button>\n\n<ng-container *ngIf=\"href\">\n <ng-container *ngIf=\"exists(useRouterLink); else linksHref\">\n <a [nasClass]=\"getClasses('', modifiers)\" [attr.disabled]=\"disabled\" [routerLink]=\"href\" [id]=\"buttonId\"\n (click)=\"emitTrackingEvent();\" (keydown)=\"onKeydown($event)\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </a>\n </ng-container>\n</ng-container>\n\n<ng-template #linksHref>\n <a [nasClass]=\"getClasses('', modifiers)\" [attr.disabled]=\"disabled\" [href]=\"href\" [target]=\"target\" [id]=\"buttonId\"\n (click)=\"emitTrackingEvent();\" (keydown)=\"onKeydown($event)\">\n <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </span>\n </a>\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-button{position:relative;display:inline-block;padding:12px 24px;width:-webkit-max-content;width:max-content;border:0;border-radius:0;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:16px;font-weight:700;line-height:24px;text-align:center;color:#15273f;background-color:#e9e7e4;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button--container{background-color:#fff}.nas-button:before{content:\"\";display:block;position:absolute;width:100%;height:2px;bottom:-3.5px;left:0;background-color:#e9e7e4;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button:hover,.nas-button:focus{background-color:#e9e7e4}.nas-button:hover:before,.nas-button:focus:before{transform:translateY(0)}.nas-button[disabled]{cursor:default;pointer-events:none;color:#6f6f6f;background-color:#e9e7e4}.nas-button--primary{color:#fff;background-color:#e5212d}.nas-button--primary:before{background-color:#15273f}.nas-button--primary:hover,.nas-button--primary:focus{color:#fff;background-color:#b71530}.nas-button--primary:hover:before,.nas-button--primary:focus:before{background-color:#15273f}.nas-button--primary:active{color:#fff;background:#891024}.nas-button--primary:active:before{background-color:#15273f}.nas-button--primary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button--primary:focus-visible:before{display:none}.nas-button--primary:disabled{background-color:#e9e7e4}.nas-button--secondary{color:#fff;background-color:#15273f}.nas-button--secondary:before{background-color:#15273f}.nas-button--secondary:hover,.nas-button--secondary:focus{color:#fff;background-color:#0a2033}.nas-button--secondary:hover:before,.nas-button--secondary:focus:before{background-color:#0a2033}.nas-button--secondary:active{color:#fff;background:#071622}.nas-button--secondary:active:before{background-color:#071622}.nas-button--secondary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button--secondary:focus-visible:before{display:none}.nas-button--secondary:before{display:none}.nas-button--secondary:disabled{background-color:#e9e7e4}.nas-button--light{color:#15273f;background-color:#fff;border:2px solid #6F6F6F}.nas-button--light:before{background-color:#fff}.nas-button--light:hover,.nas-button--light:focus{color:#15273f;background-color:#f8f8f8}.nas-button--light:hover:before,.nas-button--light:focus:before{background-color:#f8f8f8}.nas-button--light:active{color:#15273f;background:#ebf4ff}.nas-button--light:active:before{background-color:#ebf4ff}.nas-button--light:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button--light:focus-visible:before{display:none}.nas-button--light:before{display:none}.nas-button--light:hover{border:2px solid #15273F}.nas-button--light:disabled{border:0}.nas-button--buttonlink{color:#b12a0b;background-color:transparent}.nas-button--buttonlink:before{background-color:transparent}.nas-button--buttonlink:hover,.nas-button--buttonlink:focus{color:#b12a0b;background-color:#f8f8f8}.nas-button--buttonlink:hover:before,.nas-button--buttonlink:focus:before{background-color:#f8f8f8}.nas-button--buttonlink:active{color:#b12a0b;background:#ebf4ff}.nas-button--buttonlink:active:before{background-color:#ebf4ff}.nas-button--buttonlink:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button--buttonlink:focus-visible:before{display:none}.nas-button--buttonlink:before{display:none}.nas-button--buttonlink:disabled{background-color:#f8f8f8}.nas-button--large{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:18px;line-height:24px;padding:16px 36px 13px}.nas-button--block{display:block;width:100%}.nas-button--flex{display:flex;width:100%}.nas-button--compact{margin-bottom:12px}.nas-button--compact:before{display:none}.nas-button--right{align-self:flex-end;float:right}.nas-button--spaceless{margin-bottom:0}.nas-button--transparent{color:#fff;background-color:#000000a6}.nas-button--transparent:before{background-color:inherit}.nas-button--transparent:hover,.nas-button--transparent:active,.nas-button--transparent:focus{background-color:#000c}.nas-button--link{font-size:inherit;padding:0;margin:0;background:none;color:#b12a0b;width:auto;text-align:unset}.nas-button--link:hover,.nas-button--link:focus{color:#891024;border-color:#15273f;background:none}.nas-button--link:before{display:none}.nas-button--link.nas-button--secondary{color:#15273f}.nas-button--link.nas-button--light{color:#fff}.nas-button--link.nas-button--light:hover,.nas-button--link.nas-button--light:focus{color:#f8f8f8}.nas-button--link.nas-button--tetiary{color:#ffc1b7}.nas-button--link.nas-button--tetiary:hover,.nas-button--link.nas-button--tetiary:focus{color:#ffe2d9}.nas-button__content{display:flex;justify-content:center;gap:4px}.nas-button__content--reverse{flex-direction:row-reverse}.nas-button__icon{position:relative}.nas-button__icon .nas-icon-small{margin:0;transform:scale(.8)}\n"] }]
|
|
127
|
+
args: [{ selector: 'nas-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #button *ngIf=\"!href\" [nasClass]=\"getClasses('', modifiers)\" [ngStyle]=\"buttonStyle\"\n [disabled]=\"!canContinueOnDisabled && disabled\" [class.disabled]=\"disabled\" [attr.type]=\"type\"\n [attr.aria-label]=\"ariaLabel\" [attr.tabindex]=\"tabindex\" [id]=\"buttonId\" (click)=\"emitTrackingAndClickEvent($event)\"\n (keydown)=\"onKeydown($event)\">\n <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </span>\n</button>\n\n<ng-container *ngIf=\"href\">\n <ng-container *ngIf=\"exists(useRouterLink); else linksHref\">\n <a [nasClass]=\"getClasses('', modifiers)\" [attr.disabled]=\"disabled\" [routerLink]=\"href\" [id]=\"buttonId\"\n (click)=\"emitTrackingEvent();\" (keydown)=\"onKeydown($event)\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </a>\n </ng-container>\n</ng-container>\n\n<ng-template #linksHref>\n <a [nasClass]=\"getClasses('', modifiers)\" [attr.disabled]=\"disabled\" [href]=\"href\" [target]=\"target\" [id]=\"buttonId\"\n (click)=\"emitTrackingEvent();\" (keydown)=\"onKeydown($event)\">\n <span [nasClass]=\"getClass('content', exists(iconLeft) && 'reverse')\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <span [nasClass]=\"getClass('icon')\" *ngIf=\"icon || iconType\">\n <nas-icon [icon]=\"icon\" [type]=\"iconType\"></nas-icon>\n </span>\n </span>\n </a>\n</ng-template>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}.nas-button{position:relative;display:inline-block;padding:12px 24px;width:-webkit-max-content;width:max-content;border:0;border-radius:0;font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:16px;font-weight:700;line-height:24px;text-align:center;color:#15273f;background-color:#e9e7e4;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button--container{background-color:#fff}.nas-button:before{content:\"\";display:block;position:absolute;width:100%;height:2px;bottom:-3.5px;left:0;background-color:#e9e7e4;transition:all .15s cubic-bezier(0,0,.1,1)}.nas-button:hover,.nas-button:focus{background-color:#e9e7e4}.nas-button:hover:before,.nas-button:focus:before{transform:translateY(0)}.nas-button[disabled]{cursor:default;pointer-events:none;color:#6f6f6f;background-color:#e9e7e4}.nas-button--primary{color:#fff;background-color:#e5212d}.nas-button--primary:before{background-color:#15273f}.nas-button--primary:hover,.nas-button--primary:focus{color:#fff;background-color:#b71530}.nas-button--primary:hover:before,.nas-button--primary:focus:before{background-color:#15273f}.nas-button--primary:active{color:#fff;background:#891024}.nas-button--primary:active:before{background-color:#15273f}.nas-button--primary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button--primary:focus-visible:before{display:none}.nas-button--primary:disabled{background-color:#e9e7e4}.nas-button--secondary{color:#fff;background-color:#15273f}.nas-button--secondary:before{background-color:#15273f}.nas-button--secondary:hover,.nas-button--secondary:focus{color:#fff;background-color:#0a2033}.nas-button--secondary:hover:before,.nas-button--secondary:focus:before{background-color:#0a2033}.nas-button--secondary:active{color:#fff;background:#071622}.nas-button--secondary:active:before{background-color:#071622}.nas-button--secondary:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button--secondary:focus-visible:before{display:none}.nas-button--secondary:before{display:none}.nas-button--secondary:disabled{background-color:#e9e7e4}.nas-button--light{color:#15273f;background-color:#fff;border:2px solid #6F6F6F}.nas-button--light:before{background-color:#fff}.nas-button--light:hover,.nas-button--light:focus{color:#15273f;background-color:#f8f8f8}.nas-button--light:hover:before,.nas-button--light:focus:before{background-color:#f8f8f8}.nas-button--light:active{color:#15273f;background:#ebf4ff}.nas-button--light:active:before{background-color:#ebf4ff}.nas-button--light:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button--light:focus-visible:before{display:none}.nas-button--light:before{display:none}.nas-button--light:hover{border:2px solid #15273F}.nas-button--light:disabled{border:0}.nas-button--buttonlink{color:#b12a0b;background-color:transparent}.nas-button--buttonlink:before{background-color:transparent}.nas-button--buttonlink:hover,.nas-button--buttonlink:focus{color:#b12a0b;background-color:#f8f8f8}.nas-button--buttonlink:hover:before,.nas-button--buttonlink:focus:before{background-color:#f8f8f8}.nas-button--buttonlink:active{color:#b12a0b;background:#ebf4ff}.nas-button--buttonlink:active:before{background-color:#ebf4ff}.nas-button--buttonlink:focus-visible{outline:2px solid #0978E8;outline-offset:2px}.nas-button--buttonlink:focus-visible:before{display:none}.nas-button--buttonlink:before{display:none}.nas-button--buttonlink:disabled{background-color:#f8f8f8}.nas-button--large{font-family:NorwegianTextPro,Arial,Helvetica Neue,Helvetica,sans-serif;font-weight:700;font-size:18px;line-height:24px;padding:16px 36px 13px}.nas-button--block{display:block;width:100%}.nas-button--flex{display:flex;width:100%}.nas-button--compact{margin-bottom:12px}.nas-button--compact:before{display:none}.nas-button--right{align-self:flex-end;float:right}.nas-button--spaceless{margin-bottom:0}.nas-button--transparent{color:#fff;background-color:#000000a6}.nas-button--transparent:before{background-color:inherit}.nas-button--transparent:hover,.nas-button--transparent:active,.nas-button--transparent:focus{background-color:#000c}.nas-button--link{font-size:inherit;padding:0;margin:0;background:none;color:#b12a0b;width:auto;text-align:unset;text-decoration:none}.nas-button--link:hover,.nas-button--link:focus{color:#891024;border-color:#15273f;background:none}.nas-button--link:before{display:none}.nas-button--link.nas-button--secondary{color:#15273f}.nas-button--link.nas-button--light{color:#fff;border:0}.nas-button--link.nas-button--light:hover,.nas-button--link.nas-button--light:focus{color:#f8f8f8}.nas-button--link.nas-button--tetiary{color:#ffc1b7}.nas-button--link.nas-button--tetiary:hover,.nas-button--link.nas-button--tetiary:focus{color:#ffe2d9}.nas-button__content{display:flex;justify-content:center;gap:4px}.nas-button__content--reverse{flex-direction:row-reverse}.nas-button__icon{position:relative}.nas-button__icon .nas-icon-small{margin:0;transform:scale(.8)}\n"] }]
|
|
128
128
|
}], ctorParameters: function () { return []; }, propDecorators: { button: [{
|
|
129
129
|
type: ViewChild,
|
|
130
130
|
args: ['button']
|