@norwegian/core-components 6.21.2 → 6.22.0

package/lib/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './icon/index';
 export * from './icon-list/index';
 export * from './info/index';
 export * from './input/index';
+export * from './input-text/index';
 export * from './simple-list/index';
 export * from './modal/index';
 export * from './number-field/index';

package/lib/components/input-text/index.d.ts

@@ -0,0 +1,2 @@
+export * from './input-text.component';
+export * from './input-text.module';

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

@@ -0,0 +1,203 @@
+/**
+ * @license
+ * Copyright Norwegian Air Shuttle. All Rights Reserved.
+ */
+import { ElementRef, EventEmitter } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { ClassModel } from '../../core';
+import { NasComponentBase } from '../../core/base/nas-component.base';
+import * as i0 from "@angular/core";
+/**
+ * @description
+ * Norwegian Input-Text Component | Form Controls
+ */
+export declare class InputTextComponent extends NasComponentBase {
+    inputReactive: ElementRef<HTMLElement>;
+    inputNotReactive: ElementRef<HTMLElement>;
+    controls: ElementRef<HTMLElement>;
+    /**
+     * @property Input
+     * @description
+     * The ID of the native input element
+     */
+    id: string;
+    /**
+     * @property Input
+     * @description
+     * The value of the native input element
+     */
+    get model(): string;
+    set model(value: string);
+    modelChange: EventEmitter<string>;
+    blur: EventEmitter<string>;
+    /**
+     * @property Input
+     * @description
+     * Whether the control is in an error state.
+     */
+    error: boolean;
+    /**
+     * @property Input
+     * @description
+     * Whether the native input element is disabled or no, with disabled styling.
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /**
+     * @property Input
+     * @description
+     * Whether the control is in an active state.
+     */
+    active: boolean;
+    /**
+     * @property Input
+     * @description
+     * Set spaceless styling (removing spacing)
+     */
+    spaceless: boolean;
+    /**
+     * @property Input
+     * @description
+     * Sets the label of the input
+     */
+    label: string;
+    /**
+     * @property Input
+     * @description
+     * Sets the label of the input inside the white area
+     */
+    labelInside: boolean;
+    /**
+     * @property Input
+     * @description
+     * The error message to display when error occur. Error attribute need to be true.
+     */
+    errorMessage: string;
+    /**
+     * @property Input
+     * @description
+     * Sets placeholder text in the native input element
+     */
+    placeholder: string;
+    /**
+     * @property Input
+     * @description
+     * Sets min length on the native input element.
+     */
+    minLength: number;
+    /**
+     * @property Input
+     * @description
+     * Sets max length on the native input element.
+     */
+    maxLength: number;
+    /**
+     * @property Input
+     * @description
+     * Sets the info text related to the input
+     */
+    info: string;
+    /**
+     * @property Input
+     * @description
+     * Sets the icon on the input
+     */
+    icon: string;
+    /**
+     * @property Input
+     * @description
+     * Input type of the element.
+     */
+    type: string;
+    /**
+     * @property Input
+     * @description
+     * Whether the element is readonly.
+     */
+    readonly: boolean;
+    /**
+     * @property Input
+     * @description
+     * String to set name on native input element.
+     */
+    get name(): string;
+    set name(value: string);
+    /**
+     * @property Input
+     * @description
+     * Sets aria describedby for accessibility
+     */
+    ariaDescribedby: string;
+    /**
+     * @property Input
+     * @description
+     * Sets the required attribute on the native input element.
+     */
+    required: boolean;
+    /**
+     * @property Input
+     * @description
+     * Sets a formControlName directive to the input.
+     * It requires that the consumer included ReactiveFormsModule in it's module.
+     * It requiers that the nasFormGroup input is filled.
+     * @example
+     * <nas-input-text [nasFormControlName]="'username'"></nas-input-text>
+     */
+    nasFormControlName: string;
+    /**
+     * @property Input
+     * @description
+     * Adds the parent's form group.
+     * It requires that the consumer included ReactiveFormsModule in it's module.
+     * It is requiered to be filled if nasFormControlName added.
+     * @example
+     * <nas-input-text [nasFormGroup]="loginGroup"></nas-input-text>
+     */
+    nasFormGroup: FormGroup;
+    /**
+     * @property Input
+     * @description
+     * The minimum value to accept for this input.
+     * @example
+     * <nas-input-text [type]="'number'" [min]="0"></nas-input-text>
+     */
+    min: number;
+    /**
+     * @property Input
+     * @description
+     * The maximum value to accept for this input.
+     * @example
+     * <nas-input-text [type]="'number'" [max]="10"></nas-input-text>
+     */
+    max: number;
+    /**
+     * @property Input
+     * @description
+     * Adds a line below the input element. Default value is true.
+     * @example
+     * <nas-input-text [line]="false"></nas-input-text>
+     */
+    line: boolean;
+    /**
+     * @property Input
+     * @description
+     * Specifies a regular expression that the input value is checked against on form submission
+     */
+    pattern: string;
+    get inputId(): string;
+    get errorId(): string;
+    private componentId;
+    private modelValue;
+    private disabledValue;
+    private nameValue;
+    constructor();
+    ngAfterViewInit(): void;
+    mainClass(): ClassModel;
+    private setNameAttribute;
+    onBlur(value: string): void;
+    private setInputStyling;
+    private setLabelInsideStyling;
+    onInput(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputTextComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputTextComponent, "nas-input-text", 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>;
+}

package/lib/components/input-text/input-text.module.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norwegian/core-components",
-  "version": "6.21.2",
+  "version": "6.22.0",
   "peerDependencies": {
     "@angular/common": ">=16.0.0 < 19.0.0",
     "@angular/core": ">=16.0.0 < 19.0.0"

package/styles/3__base/_input.scss

@@ -14,8 +14,6 @@ input[type='tel'] {
     padding: $spacing--small;
     box-sizing: border-box;
 
-    border: 0;
-
     color: $color-text;
     @include font-size(small);
     border-radius: 0;