@norwegian/core-components 7.5.0 → 7.7.0

package/lib/components/input/input.component.d.ts

@@ -2,7 +2,7 @@
  * @license
  * Copyright Norwegian Air Shuttle. All Rights Reserved.
  */
-import { ElementRef, EventEmitter } from '@angular/core';
+import { ElementRef, EventEmitter, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { ClassModel } from '../../core';
 import { NasComponentBase } from '../../core/base/nas-component.base';
@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
  * @description
  * Norwegian Input Component | Form Controls | New design
  */
-export declare class InputComponent extends NasComponentBase {
+export declare class InputComponent extends NasComponentBase implements OnInit {
     inputReactive: ElementRef<HTMLElement>;
     inputNotReactive: ElementRef<HTMLElement>;
     controls: ElementRef<HTMLElement>;
@@ -43,12 +43,6 @@ export declare class InputComponent extends NasComponentBase {
      */
     get disabled(): boolean;
     set disabled(value: boolean);
-    /**
-     * @property Input
-     * @description
-     * Whether the control is in an active state.
-     */
-    active: boolean;
     /**
      * @property Input
      * @description
@@ -190,14 +184,19 @@ export declare class InputComponent extends NasComponentBase {
     private modelValue;
     private disabledValue;
     private nameValue;
+    active: boolean;
+    focus: boolean;
+    valid: boolean;
+    lastWasTab: boolean;
     constructor();
+    onKeydown(e: KeyboardEvent): void;
+    ngOnInit(): void;
     ngAfterViewInit(): void;
     mainClass(): ClassModel;
     private setNameAttribute;
     onBlur(value: string): void;
-    private setInputStyling;
-    private setLabelInsideStyling;
-    onInput(event: Event): void;
+    onKeyDown(): void;
+    setActiveInput(active: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "nas-input", never, { "id": { "alias": "id"; "required": false; }; "model": { "alias": "model"; "required": false; }; "error": { "alias": "error"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "active": { "alias": "active"; "required": false; }; "spaceless": { "alias": "spaceless"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelInside": { "alias": "labelInside"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "info": { "alias": "info"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "type": { "alias": "type"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "name": { "alias": "name"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "nasFormControlName": { "alias": "nasFormControlName"; "required": false; }; "nasFormGroup": { "alias": "nasFormGroup"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "line": { "alias": "line"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; }, { "modelChange": "modelChange"; "blur": "blur"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "nas-input", never, { "id": { "alias": "id"; "required": false; }; "model": { "alias": "model"; "required": false; }; "error": { "alias": "error"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "spaceless": { "alias": "spaceless"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelInside": { "alias": "labelInside"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "info": { "alias": "info"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "type": { "alias": "type"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "name": { "alias": "name"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "nasFormControlName": { "alias": "nasFormControlName"; "required": false; }; "nasFormGroup": { "alias": "nasFormGroup"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "line": { "alias": "line"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; }, { "modelChange": "modelChange"; "blur": "blur"; }, never, never, false, never>;
 }

package/lib/components/phone-number/phone-number.component.d.ts

@@ -2,7 +2,7 @@
  * @license
  * Copyright Norwegian Air Shuttle. All Rights Reserved.
  */
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, OnInit, AfterViewInit } from '@angular/core';
 import { NasComponentBase } from '../../core/base/nas-component.base';
 import { SelectOptionModel } from '../select/models/select-option.model';
 import { ClassModel } from '../../core/models/class.model';
@@ -12,7 +12,7 @@ import * as i0 from "@angular/core";
  * @description
  * Norwegian Phone number Component | Form Controls | New design
  */
-export declare class PhoneNumberComponent extends NasComponentBase {
+export declare class PhoneNumberComponent extends NasComponentBase implements OnInit, AfterViewInit {
     /**
      * @property Input
      * @description
@@ -246,8 +246,18 @@ export declare class PhoneNumberComponent extends NasComponentBase {
      * <nas-phone-number (selectedChange)="onSelectedChange($event)"></nas-phone-number>
     */
     selectedChange: EventEmitter<SelectOptionModel>;
+    get inputId(): string;
+    private componentId;
+    active: boolean;
+    valid: boolean;
+    focus: boolean;
+    lastWasTab: boolean;
     constructor();
+    onKeydown(e: KeyboardEvent): void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
     mainClass(): ClassModel;
+    setActiveOnFocus(active: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PhoneNumberComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PhoneNumberComponent, "nas-phone-number", never, { "options": { "alias": "options"; "required": false; }; "preferredOptions": { "alias": "preferredOptions"; "required": false; }; "prefixCountryCode": { "alias": "prefixCountryCode"; "required": false; }; "label": { "alias": "label"; "required": false; }; "optionsLabel": { "alias": "optionsLabel"; "required": false; }; "preferredOptionsLabel": { "alias": "preferredOptionsLabel"; "required": false; }; "inputLabel": { "alias": "inputLabel"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "error": { "alias": "error"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "spaceless": { "alias": "spaceless"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "info": { "alias": "info"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "nasFormControlName": { "alias": "nasFormControlName"; "required": false; }; "nasFormControlNamePrefix": { "alias": "nasFormControlNamePrefix"; "required": false; }; "nasFormGroup": { "alias": "nasFormGroup"; "required": false; }; "model": { "alias": "model"; "required": false; }; "cssClass": { "alias": "cssClass"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "modelChange": "modelChange"; "selectedChange": "selectedChange"; }, never, never, false, never>;
 }

package/lib/components/radio/radio.component.d.ts

@@ -131,6 +131,7 @@ export declare class RadioComponent extends NasComponentBase {
     constructor();
     mainClass(): ClassModel;
     onChange(event: Event): void;
+    onKeydown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RadioComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<RadioComponent, "nas-radio", never, { "id": { "alias": "id"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "error": { "alias": "error"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "strong": { "alias": "strong"; "required": false; }; "block": { "alias": "block"; "required": false; }; "spaceless": { "alias": "spaceless"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "required": { "alias": "required"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "nasFormControlName": { "alias": "nasFormControlName"; "required": false; }; "nasFormGroup": { "alias": "nasFormGroup"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, ["*"], false, never>;
 }

package/lib/components/select/select.component.d.ts

@@ -2,7 +2,7 @@
  * @license
  * Copyright Norwegian Air Shuttle. All Rights Reserved.
  */
-import { EventEmitter, ElementRef, ChangeDetectorRef, OnChanges, QueryList, AfterContentInit, AfterViewChecked } from '@angular/core';
+import { EventEmitter, ElementRef, ChangeDetectorRef, OnChanges, QueryList, AfterContentInit, AfterViewChecked, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { NasComponentBase } from '../../core';
 import { ClassModel } from '../../core/models';
@@ -12,14 +12,17 @@ import { OptgroupComponent } from './optgroup/optgroup.component';
 import * as i0 from "@angular/core";
 /**
  * @description
- * Norwegian Select Component | Form Controls
+ * Norwegian Select Component | Form Controls | New design
  */
-export declare class SelectComponent extends NasComponentBase implements OnChanges, AfterViewChecked, AfterContentInit {
+export declare class SelectComponent extends NasComponentBase implements OnChanges, AfterViewChecked, AfterContentInit, OnInit {
     private change;
     selectControl: FormControl<any>;
     labelWidth: number;
     selectTitle: string;
     hasContent: boolean;
+    active: boolean;
+    valid: boolean;
+    focus: boolean;
     selectTitleWrapper: ElementRef;
     errorMessageWrapper: ElementRef;
     select: ElementRef<HTMLSelectElement>;
@@ -170,7 +173,10 @@ export declare class SelectComponent extends NasComponentBase implements OnChang
     private optionsValue;
     private open;
     private componentId;
+    private lastWasTab;
     constructor(change: ChangeDetectorRef);
+    onKeydown(e: KeyboardEvent): void;
+    ngOnInit(): void;
     ngOnChanges(): void;
     ngAfterContentInit(): void;
     ngAfterViewChecked(): void;
@@ -180,6 +186,8 @@ export declare class SelectComponent extends NasComponentBase implements OnChang
     toggleSelect(event: any, keydown?: boolean): void;
     blurSelect(): void;
     getClasses(): Array<ClassModel>;
+    activeSelect(): void;
+    focusSelect(): void;
     private setSelectedAndEmitChange;
     private setFirstOptionSelected;
     private updateShadow;

package/lib/components/select/select.module.d.ts

@@ -5,8 +5,9 @@ import * as i3 from "./optgroup/optgroup.component";
 import * as i4 from "@angular/common";
 import * as i5 from "@angular/forms";
 import * as i6 from "../../core/directives/nas-class/nas-class.module";
+import * as i7 from "../icon/icon.module";
 export declare class SelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SelectModule, [typeof i1.SelectComponent, typeof i2.OptionComponent, typeof i3.OptgroupComponent], [typeof i4.CommonModule, typeof i5.ReactiveFormsModule, typeof i6.NasClassModule], [typeof i1.SelectComponent, typeof i2.OptionComponent, typeof i3.OptgroupComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SelectModule, [typeof i1.SelectComponent, typeof i2.OptionComponent, typeof i3.OptgroupComponent], [typeof i4.CommonModule, typeof i5.ReactiveFormsModule, typeof i6.NasClassModule, typeof i7.IconModule], [typeof i1.SelectComponent, typeof i2.OptionComponent, typeof i3.OptgroupComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SelectModule>;
 }

package/lib/components/textarea/textarea.component.d.ts

@@ -2,15 +2,15 @@
  * @license
  * Copyright Norwegian Air Shuttle. All Rights Reserved.
  */
-import { EventEmitter } from '@angular/core';
+import { AfterViewInit, EventEmitter, OnInit } from '@angular/core';
 import { NasComponentBase, ClassModel } from '../../core';
 import { FormGroup } from '@angular/forms';
 import * as i0 from "@angular/core";
 /**
  * @description
- * Norwegian Textarea Component | Form Controls
+ * Norwegian Textarea Component | Form Controls | New design
  */
-export declare class TextareaComponent extends NasComponentBase {
+export declare class TextareaComponent extends NasComponentBase implements OnInit, AfterViewInit {
     /**
      * @property Input
      * @description
@@ -138,9 +138,19 @@ export declare class TextareaComponent extends NasComponentBase {
      * Set spaceless styling (removing spacing)
     */
     spaceless: boolean;
+    get inputId(): string;
+    private componentId;
+    active: boolean;
+    valid: boolean;
+    focus: boolean;
+    lastWasTab: boolean;
     constructor();
+    onKeydown(e: KeyboardEvent): void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
     mainClass(): ClassModel;
     textareaStyle(): Map<string, any>;
+    setActiveOnFocus(active: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextareaComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TextareaComponent, "nas-textarea", never, { "label": { "alias": "label"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "height": { "alias": "height"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "id": { "alias": "id"; "required": false; }; "info": { "alias": "info"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "model": { "alias": "model"; "required": false; }; "nasFormControlName": { "alias": "nasFormControlName"; "required": false; }; "nasFormGroup": { "alias": "nasFormGroup"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "spaceless": { "alias": "spaceless"; "required": false; }; }, { "modelChange": "modelChange"; }, never, never, false, never>;
 }

package/lib/components/textarea/textarea.module.d.ts

@@ -3,8 +3,9 @@ import * as i1 from "./textarea.component";
 import * as i2 from "@angular/common";
 import * as i3 from "../../core/directives/nas-class/nas-class.module";
 import * as i4 from "@angular/forms";
+import * as i5 from "../icon/icon.module";
 export declare class TextareaModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TextareaModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TextareaModule, [typeof i1.TextareaComponent], [typeof i2.CommonModule, typeof i3.NasClassModule, typeof i4.FormsModule, typeof i4.ReactiveFormsModule], [typeof i1.TextareaComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TextareaModule, [typeof i1.TextareaComponent], [typeof i2.CommonModule, typeof i3.NasClassModule, typeof i4.FormsModule, typeof i4.ReactiveFormsModule, typeof i5.IconModule], [typeof i1.TextareaComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TextareaModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norwegian/core-components",
-  "version": "7.5.0",
+  "version": "7.7.0",
   "peerDependencies": {
     "@angular/common": ">=16.0.0 < 22.0.0",
     "@angular/core": ">=16.0.0 < 22.0.0"

package/styles/1__settings/_colors.scss

@@ -71,13 +71,13 @@ $base-colors: (
         base: #FC9E12),
     red-color: (10: #FFF5F3,
         20: #FAD1D2,
-        30: #F4A4AA,
+        30: #FFC1B7,
         40: #EF7678,
         50: #EA4850,
         60: #E5212D,
         70: #B71530,
         80: #891024,
-        90: #5B0B18,
+        90: #500010,
         100: #2E050C,
         base: #E5212D),
     white-color: (base: #FFFFFF),
@@ -126,9 +126,6 @@ $cta-tertiary: color(white-color, base);
 $cta-tertiary-hover: color(grey-color, 10);
 $cta-tertiary-press: color(blue-color, 10);
 
-// Focus
-$focus-ring: #0978E8;
-
 // Interactive elements
 $interactive-element-default: color(white-color, base);
 $interactive-element-disabled: color(grey-color, 40);
@@ -136,9 +133,18 @@ $interactive-element-hover: color(grey-color, 10);
 $interactive-element-selected: color(blue-color, 10);
 
 // Typography
-$typography-text-default: color(blue-color, base);
-$typography-text-disabled: color(grey-color, 40);
-$typography-text-inverted: color(white-color, base);
-$typography-text-link: color(dark-red-color, 80);
-$typography-text-muted: color(grey-color, 70);
-$typography-promotion: color(red-color, base);
+$typography-default: color(blue-color, base);
+$typography-disabled: color(grey-color, 40);
+$typography-inverted: color(white-color, base);
+$typography-link: color(dark-red-color, 80);
+$typography-link-inverted: color(white-color, base);
+$typography-link-pink: color(red-color, 30);
+$typography-muted: color(grey-color, 70);
+$typography-promotion: color(red-color, base);
+
+// UI
+$focus-outline: #0978E8;
+$overlay-light: rgba(21, 39, 63, 0.1);
+$overlay-default: rgba(21, 39, 63, 0.2);
+$overlay-dark: rgba(21, 39, 63, 0.4);
+$overlay-xdark: rgba(21, 39, 63, 0.6);

package/styles/3__base/_body.scss

@@ -1,7 +1,7 @@
 body {
     @include font(base, normal);
     @include font-size(small, true);
-    color: $typography-text-default;
+    color: $typography-default;
     font-style: normal;
     line-height: 1.4;
     -moz-osx-font-smoothing: grayscale;

package/styles/3__base/_heading.scss

@@ -24,7 +24,7 @@ h1,
     @include font(heading, bold);
     @include font-size(xxlarge, false, mobile);
     margin: 0 0 $spacing;
-    color: $typography-text-default;
+    color: $typography-default;
     letter-spacing: -0.03em;
 
     @include min-width(md) {
@@ -87,7 +87,7 @@ h6,
     margin: 0 0 $spacing--xxxsmall;
 
     a {
-        color: $typography-text-default;
+        color: $typography-default;
         border-bottom: 0;
     }
 }

package/styles/3__base/_input.scss

@@ -14,7 +14,7 @@ input[type='tel'] {
     padding: $spacing--small;
     box-sizing: border-box;
     border: 0;
-    color: $typography-text-default;
+    color: $typography-default;
     @include font-size(small);
     border-radius: 0;
     background-color: $background-surface-default;
@@ -22,7 +22,7 @@ input[type='tel'] {
     transition: all 200ms $swift-out;
 
     &[disabled] {
-        color: $typography-text-muted;
+        color: $typography-muted;
     }
 
     @include input-placeholder {

package/styles/3__base/_link.scss

@@ -1,48 +1,48 @@
 // Link
 a,
 .link {
-    color: $typography-text-link;
+    color: $typography-link;
     cursor: pointer;
     text-decoration: none;
     border-bottom: $border-width solid $border-muted;
 
     &:hover,
     &:focus {
-        color: $typography-text-default;
+        color: $typography-default;
         border-color: $border-heavy;
     }
 
     &--disabled {
-        color: $typography-text-default;
+        color: $typography-default;
         border-bottom: $border-width solid $border-muted;
         cursor: default;
 
         &:hover,
         &:focus {
-            color: $typography-text-default;
+            color: $typography-default;
             border-color: $border-muted;
         }
     }
 }
 
 .link--light {
-    color: $typography-text-inverted;
+    color: $typography-inverted;
     border-bottom: $border-width solid $border-inverted;
 
     &:hover,
     &:focus {
-        color: rgba($typography-text-inverted, 0.8);
+        color: rgba($typography-inverted, 0.8);
         border-color: rgba($border-inverted, 0.8);
     }
 }
 
 .link--secondary {
-    color: $typography-text-default;
+    color: $typography-default;
     border-bottom: $border-width solid $border-heavy;
 
     &:hover,
     &:focus {
-        color: $typography-text-link;
+        color: $typography-link;
         border-color: $border-primary;
     }
 }

package/styles/3__base/_type.scss

@@ -24,7 +24,7 @@ em {
 
 .label {
     margin: 0 0 $spacing--xxxsmall;
-    color: $typography-text-muted;
+    color: $typography-muted;
 }
 
 .preamble {
@@ -35,7 +35,7 @@ em {
 }
 
 .text-muted {
-    color: $typography-text-muted;
+    color: $typography-muted;
 }
 
 blockquote {