@norwegian/core-components 7.13.4 → 8.0.0

package/README.md

@@ -14,7 +14,7 @@ When it's in there, you can start importing the stuff you need. Like this:
 
 In app.module.ts:
 
-```ts
+```typescript
 import { ButtonModule } from '@norwegian/core-components';
 
 @NgModule({
@@ -41,7 +41,7 @@ The SCSS files for each component is compiled and injected into the component st
 If you just want the styles:   
 
 ```scss
-@import '~@norwegian/core-components/styles/index';
+@use '~@norwegian/core-components/styles/index';
 ```
 
 
@@ -64,7 +64,7 @@ Add the following line to the `apps.assets` array:
 
 ### Tech details
 
-- Angular 16
+- Angular 20
 - AOT/JIT compatible component library
 - Styles and templates are inlined at build-time, no transpiling
 - Cherry-pick the modules you need. No need to include everything

package/assets/documentation/accordion/accordion.md

@@ -1 +1 @@
-The accordion component can be used in many different context, but has the main goal to collect and categories different content in a spesific context. The accordion have five different looks; regular, with icon, simple, small and inverted.
+The Accordion component displays collapsible sections that reveal or hide content. It supports multiple variants, sizes, icons, and states, making it suitable for dense information layouts, FAQs, and structured content blocks.

package/assets/documentation/airport-select/airport-select.md

@@ -0,0 +1 @@
+The Airport Select component provides an interactive UI element for selecting airports from a predefined list. It supports both single- and dual-input (combo) modes, dynamic updates, external labels, and integration with reactive forms.

package/assets/documentation/alert/alert.md

@@ -0,0 +1 @@
+The Alert component displays contextual messages such as information, warnings, errors, or success states. It supports optional titles, icons, timestamps, HTML content, sanitized text, close functionality, and can be driven either by individual inputs or by passing an Alert Model.

package/assets/documentation/autocomplete/autocomplete.md

@@ -1 +1 @@
-The autocomplete component is a generic dropdown with possibility to dynamically pass in data models.
+The Autocomplete component provides a searchable dropdown list where items are filtered dynamically based on user input. It supports simple binding, model-driven forms, and customizable item display using an Autocomplete model.

package/assets/documentation/backdrop/backdrop.md

@@ -0,0 +1 @@
+The Backdrop component in the Norwegian Design System is used to display an overlay behind interactive elements, typically to focus the user’s attention on a modal-like UI element or prevent interaction with the rest of the page while an action is in progress.

package/assets/documentation/box/box.md

@@ -1 +1 @@
-
+The Box component from the Norwegian Design System is a layout/display component used to visually group content within a styled container. It provides several predefined variants that change the look and emphasis of the content inside.

package/assets/documentation/button/button.md

@@ -1,10 +1 @@
-Norwegian buttons are either `button` or `a` elements enhanced with Norwegian Brand styling.
-
-Native `button` and `a` elements are always used in order to provide the most straightforward and accessible experience for users. A `button` element should be used whenever some action is performed. An `a` element should be used whenever the user will navigate to another view.
-
-### Example syntax for primary button
-
-`<nas-button primary>Click me!</nas-button>`
-
-### Accessibility
-Norwegian Assets uses `button` and `a` elements to ensure an accessible experience by default. The `button` element should be used for any interaction that performs an action on the current page. The `a` element should be used for any interaction that navigates to another view.
+The Button component in the Norwegian Design System provides a versatile, customizable button used across the UI. It supports multiple colors, sizes, states, icons, link behavior, and utility properties.

package/assets/documentation/checkbox/checkbox.md

@@ -1,7 +1 @@
-
-```<nas-checkbox>``` provides the same functionality as a native ```<input type="checkbox">``` enhanced with Norwegian Brand styling and animations. The checkbox component is compatible with @angular/forms. Currently it only supports FormsModule, but ReactiveFormsModule is on the feature list.
-
-### Accessibility
-The ```<nas-checkbox>``` uses an internal ```<input type="checkbox">``` to provide an accessible experience. This internal checkbox receives focus and is automatically labelled by the text content of the ```<nas-checkbox>``` element.
-
-Checkboxes without text or labels should be given a meaningful label via aria-label or aria-labelledby.
+The Checkbox component in the Norwegian Design System provides a flexible, accessible form control with multiple visual styles and behavioral options. It supports validation states, layout variations, reactive forms, and different UI themes.

package/assets/documentation/container/container.md

@@ -1 +1 @@
-A container component is used as a wrapper component (have no visual styling), to add correct paddings and margins a cross pages and processes. 
+The Container component is a layout utility used to control width, spacing, alignment, and grouping of content. It provides multiple sizing and formatting options to structure pages consistently across the Norwegian Design System.

package/assets/documentation/continue/continue.md

@@ -1 +1,2 @@
-The continue component is used for call to action in each step in a process. E.x. a form, purchase process etc. In purchase processes it is recommended that the continue component is sticky, to increase conversion.
+The Continue component is a layout/action element that presents a prominent “Continue” button, typically used at the end of forms, steps, or flows. It can include icons, custom content, sticky behavior, and visual variants.
+It is designed to make progression actions clear, consistent, and visually aligned with the Norwegian brand.

package/assets/documentation/cover/cover.md

@@ -1 +1 @@
-The cover component is used as a cover/ heading element on a page or step in a process. It can be customized with different icons, but have clouds as defualt. 
+The Cover component is a flexible layout/header element used to introduce sections, pages, or content blocks with a title, optional description, illustration, and additional metadata. It supports multiple layout variations, sizes, and configurations.

package/assets/documentation/datepicker/datepicker.md

@@ -1,3 +1 @@
-Date picker is a input popup which activates by clicking into the input box and shows a calendar to pick the date from.
-It accepts 'Array' of complete month data to show in 'DayModel' format. i.e. Array<DayModel>
-User can set formats in which the date is shown in the input once selected and get the date once selected.
+The Datepicker component provides a form control for selecting calendar dates. It supports preselected values, disabled states, dynamic availability, accessibility features, and layout variations such as a compact mode.

package/assets/documentation/datepicker-combo/datepicker-combo.md

@@ -1 +1,2 @@
-Datepicker Combo is meant to be used when selecting outbound and inbound flights. Therefore, use of `disablePastSelection` attribute and passing in `availableDates` is recommended.
+The Datepicker Combo component combines two datepickers—typically Outbound and Inbound—into a unified UI. It supports constraints between the two dates, availability logic, locale formatting, time selection, custom formats, and layout variations.
+It is primarily used for round-trip or multi-date selection scenarios such as booking flights.

package/assets/documentation/divider/divider.md

@@ -1 +1 @@
-
+The Divider component is a simple visual separator used to break content into sections. It supports multiple color variants, spacing options, and line styles to match different layout and design needs.

package/assets/documentation/dropdown/dropdown.md

@@ -1,3 +1 @@
-The dropdown component looks like a ordinary select box, but can contain any kind of content as it is using `ng-content`, e.x. number fields, toggles, checkboxes, radio buttons or just text content.
-
-It exist in two variations; regular and inline. The inline dropdown is meant for us inside e.x. text.
+The Dropdown component provides a labeled, toggleable list used for selecting one option from a set. It supports multiple layout modes, custom styling, and event listeners.

package/assets/documentation/filter/filter.md

@@ -0,0 +1 @@
+The Filter component is a powerful, multi-input filtering interface designed for travel-related searches (e.g., flights). It supports origin/destination selection, datepickers, passenger counts, trip-type toggles, and additional switches. The component adapts between desktop and mobile layouts and works with both template-driven and reactive forms.

package/assets/documentation/grid/grid.md

@@ -1 +1 @@
-The grid component is used together with the column component. The grid component is the wrapper, while the column component specify the layout.
+The Grid component is a flexible, responsive layout system based on a 12-column structure. It allows developers to create structured, consistent page layouts by placing content inside rows and columns with configurable widths, offsets, alignment, and breakpoints.

package/assets/documentation/icon/icon.md

@@ -1 +1 @@
-We have our own custom icon and illustration language. The visual language of the icons and illustrations draws on the characteristics of our main font Apercu.
+The Icon component provides a large library of visual symbols used throughout the Norwegian Design System. Icons come in multiple styles, sizes, and categories and can be used inline with text, in buttons, lists, and UI controls.

package/assets/documentation/icon-list/icon-list.md

@@ -1 +1 @@
-This component makes a list of links with optional icons and optional ingress.
+The Icon List component displays a structured list of items, each paired with an icon, title, and optional description. It is commonly used to present key benefits, features, services, or selectable options in a visually recognizable way.

package/assets/documentation/input/input.md

@@ -1 +1 @@
-`nas-input` component uses the native `input` element with support of setting type to text and email. The component have error handling to have a different error styling, and to display error messages.
+The Input component provides a flexible and accessible text input field with extensive configuration options. It supports labels (inside or outside), icons, validation states, disabled mode, reactive forms, event outputs, and browser-level enhancements like autocomplete and input modes.

package/assets/documentation/journey/journey.md

@@ -1 +1,2 @@
-- A summary of the booking from origin to destination
+The Journey component visually represents a flight journey, showing one or more flight segments along with detailed information such as airports, flight numbers, times, delays, disruptions, and icons for status indicators (e.g., check-in, boarding, arrival).s
+It is designed to clearly communicate travel progress, disruptions, and multi-leg itineraries.

package/assets/documentation/journey-availability/journey-availability.md

@@ -1,3 +1 @@
-The Journey availability component is a result box for a particular route.
-it shoes the resultant UI, with departure-time, arrival-time, number of days/time inbetween(stop time) and airports(iata code). 
-It accepts data in AvailabilityResultModel format and returns a component.
+The Journey Availability component displays a compact overview of available flight options for a given route. Each availability card highlights key information such as departure/arrival times, total duration, number of stops, and operating carrier details.

package/assets/documentation/journey-availability-list/journey-availability-list.md

@@ -1,9 +1 @@
-The Journey availability list component is a result-box of user,s query of flight-search for a particular date, 
-it shoes the results in a list-form with time of departure to arrival, number of days/time inbetween(stop time) and airports. 
-It accepts data in AvailabilityResultModel format and returns a component.
-
-It exist in three variations 
-    - if dataset provided is empty, it will show the component with 'no result' caption.
-        - No result caption has to be provided by the parent component.
-    - if dataset provided is undefined, it will not show its component(UI) at all.
-    - if dataset provided has data, it will show the list of availability results.
+The Journey Availability List component displays multiple journey availability options in a scrollable or selectable list. Each item in the list is a Journey Availability card, and the component manages selection, sorting, and interaction for the entire list.

package/assets/documentation/journey-selection/journey-selection.md

@@ -1 +1 @@
-Journey selection component displays journey searched for/selected journey along with the close dates to change the searhed/selected journey.
+The Journey Selection component presents a chosen journey option in a compact, interactive format. It’s typically used in booking flows where the customer must confirm their selected flight or expand/collapse details to review or change them.

package/assets/documentation/journey-stopover/journey-stopover.md

@@ -1 +1,2 @@
-- A summary of the transit or stopover between origin and destination.
+The Journey Stopover component displays a layover or stopover between two flight segments in a journey. It is used to show where a passenger will transit, how long they will wait, and any relevant timing information.
+It appears between segments in multi-leg itineraries, helping users understand the flow of their trip.

package/assets/documentation/list/list.md

@@ -1 +1 @@
-The `nas-list` component is used together with `nas-list-item` components. The `nas-list` component is the wrapper where the layout of the list is specified, while the `nas-list-item` components are representing each item in the list. The `nas-list-item` component can contain custom elements and can have custom CSS classes and styling.
+The List component provides a flexible, stylized way to display collections of items with optional icons, markers, table formatting, and custom styling. It supports a variety of list types, making it suitable for feature lists, positive/negative feedback lists, navigation, and structured content.

package/assets/documentation/micro-button/micro-button.md

@@ -0,0 +1,2 @@
+The Micro Button is a compact button style used for small UI actions where space is limited. It is visually lightweight but still supports multiple variants, icons, disabled states, and events.
+It is ideal for tables, card headers, lists, filters, and inline actions.

package/assets/documentation/modal/modal.md

@@ -0,0 +1 @@
+The Modal component provides a flexible overlay container for presenting important information or actions. It is used to capture user attention and require a response before continuing.

package/assets/documentation/number-field/number-field.md

@@ -1 +1 @@
-Number field is a number selector, e.x. selector for passengers (adults, child, infant, etc). The Number field uses a native `input` element, with two native `button` elements to add and subtract. Number field component support max and min limits, and two different styles; compact and simple.
+The Number Field component is a numeric input control with increment/decrement buttons, optional limits, compact modes, validation support, and integration with Angular reactive forms. It is ideal for any use case requiring numeric input with controlled behavior (passengers, baggage, quantities, etc.).

package/assets/documentation/page-footer/page-footer.md

@@ -1 +1 @@
-`nas-page-footer` is used as the footer element on a Norwegian site. It supports to show a list of links, a go to the top button and bottom text, usually used for terms and conditions.
+The Page Footer component is a simple layout element used to display footer navigation links and optional metadata at the bottom of a page. It is typically used across the Norwegian design system to provide documentation links, navigation to related pages, or a “Back to top” button.

package/assets/documentation/page-header/page-header.md

@@ -1 +1 @@
-The `nas-page-header` component is used as the page header for a Norwegian site, and supports links and search field in header, and any content put into it. If no content is added inside the `nas-page-header` component, the hamburger menu will not be displayed.
+The Page Header component is a versatile top-of-page navigation/header bar supporting multiple layouts, actions, and states. It is used for page-level navigation, profile access, search, wallet, icons, breadcrumbs, and more.

package/assets/documentation/passenger-select/passenger-select.md

@@ -1 +1 @@
-Passenger select it typically used together with a `<nas-dropdown>` element.
+The Passenger Select component is used to choose passenger counts for a booking. It supports multiple passenger types, validation rules, dropdown or inline layouts, and integration with both template-driven and reactive Angular forms.

package/assets/documentation/phone-number/phone-number.md

@@ -1,2 +1 @@
-- Phone number component takes in list of country codes, lets user select the coutry code and enables user to write the phone number.
-- country code selection error is shown by red bordering the dropdown while writing phone number error is textual along with red bottom boder which can be passed       into the component as an input.
+The Phone Number component provides a structured and validated way to capture international phone numbers, supporting country codes, prefixes, formatting, validation, and both template-driven and reactive forms.

package/assets/documentation/premium-toggle/premium-toggle.md

@@ -1,9 +1 @@
-The `nas-premium-toggle` component is an simple cabin type toggle, where customer can select Premium or Economy cabin. The component uses the generic `nas-toggle` component.
-
-`nas-premium-toogle` have very options, as the goal is to standarize cabin type selection. Currently the toggle is e.x. used with the low fare calendar.
-
-The component support input for economy/standard and premium cabin labels. It also supports default value. When user clickes on toggle, and ´handleChange´ event will fire. 
-
-Default value can either be 'standard' or 'premium'.
-
-The premium toggle is always centered.
+The Premium Toggle component allows users to switch between Economy cabin and Premium cabin selections in a clean, compact UI. It is typically used when presenting upgrade options or fare class selections.

package/assets/documentation/radio/radio.md

@@ -1,7 +1 @@
-
-```<nas-radio>``` provides the same functionality as a native ```<input type="radio">``` enhanced with Norwegian Brand styling and animations. The radio component is compatible with @angular/forms. Currently it only supports FormsModule, but ReactiveFormsModule is on the feature list.
-
-### Accessibility
-The ```<nas-radio>``` uses an internal ```<input type="radio">``` to provide an accessible experience. This internal checkbox receives focus and is automatically labelled by the text content of the ```<nas-radio>``` element.
-
-Checkboxes without text or labels should be given a meaningful label via aria-label or aria-labelledby.
+The Radio component allows users to select one option from a group. It supports styling, validation, accessibility, and integration with reactive forms.

package/assets/documentation/ribbon-banner/ribbon-banner.md

@@ -1 +1,2 @@
-
+The Ribbon Banner displays important messages across the top of the page, above the header menu.
+It is used for alerts, warnings, info messages, and neutral notifications.

package/assets/documentation/select/select.md

@@ -1 +1 @@
-`nas-select` is a form control for selecting a value from a set of options, similar to the native `<select>` element. The Select component uses the native version.
+The Select component allows users to choose from a dropdown list and supports extensive variants such as content inside options, inline mode, errors, compact mode, filled mode, disabled mode, and reactive forms.

package/assets/documentation/simple-list/simple-list.md

@@ -1 +1 @@
-The simple list component uses the native html `ul` and `li` elements for creating a custom list with Norwegian Brand styling. 
+The Simple List component provides a flexible way to display lists with different visual styles and marker types. It supports several predefined marker styles, spacing options, and a table-like layout.

package/assets/documentation/slide-toggle/slide-toggle.md

@@ -1 +1 @@
-`nas-slide-toggle` is an on/off toggle slider which acts as a switch. This toggle will render as a checkbox in the markup.
+The Simple List component provides a flexible way to display lists with different visual styles and marker types. It supports several predefined marker styles, spacing options, and a table-like layout.

package/assets/documentation/slider/slider.md

@@ -1 +1 @@
-`nas-slider` is an `<input>` element of type range that let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box like the number input type. Because this kind of widget is imprecise, it shouldn't typically be used unless the control's exact value isn't important.
+The Slider component allows users to select a numeric value or range within predefined boundaries. It supports regular sliders, range sliders, reactive form integration, snapping behavior, suffix affixes, prefixes, and disabled states.

package/assets/documentation/sort/sort.md

@@ -1 +1 @@
-It is generic sort component which will input list of types of sort and toggle them while output the click/press events.
+The Sort component provides a dropdown-style UI for choosing sorting options. It supports optional apply buttons, auto-apply behavior, and layout variations.

package/assets/documentation/spinner/spinner.md

@@ -1 +1 @@
-The spinner component is used as a loading indicator when waiting for operations, processes etc. to finish. The spinner have 3 different "layouts"; small, with text and as overlay. Overlay can be combined with the other two. The component can be configured to enable the spinner after 500ms. If `enable` attribute is set to false again within 500ms, the spinner will not be displayed at all.
+The Spinner component is used to indicate loading states, ongoing processes, or asynchronous actions. It supports multiple sizes, overlays, labels, refresh buttons, and styling variations.

package/assets/documentation/status-box/status-box.md

@@ -1 +1,2 @@
-The status box is used to show different messages based on use case. 
+The Status Box component is used to display prominent status messages to the user.
+It visually communicates states such as info, success, warning, and error, and may include supporting text and optional action buttons.

package/assets/documentation/suggestions/suggestions.md

@@ -1 +1,2 @@
-Is meant to be used below an airport select in order to come up with suggetsions for selected airports.
+The Suggestions component provides an interactive dropdown list of suggested values based on user input.
+It is commonly used for airport selection, search fields, or any scenario where the user should choose from predefined options with auto-complete behavior.

package/assets/documentation/tab-group/tab-group.md

@@ -1 +1 @@
-The `nas-tab` component is used together with the `nas-tab-group` component. The `nas-tab-group` component is a wrapper where the layout of the tabs are specified, while the `nas-tab` component are representing each tab in the tab group. The `nas-tab` component can contain custom element and can have custom CSS classes and styling.
+The Tab Group component is used to organize content into multiple tabs, allowing the user to switch between different views without navigating away from the page. It is commonly used for dashboards, forms, grouped settings, and any UI requiring categorized content.

package/assets/documentation/table/table.md

@@ -1,8 +1 @@
-The `<nas-table>` component is used together with the `<nas-table-row>`, `<nas-table-head>`, `<nas-table-body>`, `<nas-table-foot>`, `<nas-column-group>` and `<nas-column>` components. It can have the following content:
-* An optional `[caption]`
-* Zero or more `<nas-column-group>`
-* An optional `<nas-table-head>`
-* Either one of the following
-  * Zero or more `<nas-table-body>`
-  * One or more `<nas-table-row>`
-* An optional `<nas-table-foot>`
+The Table component displays structured information in rows and columns. It supports several layout configurations, provides semantic grouping (thead, tfoot, tbody), and includes styling options such as colgroups, colored columns, and captions.

package/assets/documentation/tag/tag.md

@@ -0,0 +1 @@
+The Tag component displays small, colored labels used to categorize, highlight, or convey quick status information. Tags are compact UI elements ideal for statuses, metadata, or classification labels.

package/assets/documentation/textarea/textarea.md

@@ -1 +1 @@
-`nas-textarea` component uses the native textarea element. The component inherits most of its inputs from  `nax-input`. Refer to that page for examples that are not exclusive to `nas-textarea`.
+The Textarea component provides a multi-line text input field used for longer user-entered text such as comments, descriptions, or messages. It supports validation states, resizing behavior, disabled mode, and integration with both template-driven and reactive forms.

package/assets/documentation/toggle/toggle.md

@@ -1,5 +1 @@
-`nas-toggle` are on/off toggles with the appearance of a button. These toggles can be configured to behave as radio-buttons. By default, `nas-toggle` acts like a radio-button group - only one item can be selected.. 
-
-## Layout and orientation
-
-The `nas-toggles` can be rendered in a vertical orientation by adding the vertical attribute. It also support large, compact and light visual layout.
+The Toggle component is a versatile UI control used to let users switch between multiple options. It supports simple binary toggles, grouped toggles, icon-based selections, validations, and advanced configurations such as grouped buttons, responsive layouts, and reactive form integration.

package/assets/documentation/tooltip/tooltip.md

@@ -0,0 +1 @@
+The Tooltip component provides short, helpful information when the user hovers over an element. It allows explaining UI elements without taking extra space and supports multiple positional and behavioral configurations.

package/assets/documentation/trip-summary/trip-summary.md

@@ -1,2 +1 @@
-- A summary of the booking from origin to destination and return(if applicable) with all the services(subscribed)
-- it also contains links to change(delete/edit/change) few subscriptions
+The Trip Summary component displays key information about a flight itinerary. It is used to present segments, layovers, and detailed metadata (duration, times, airports, stopovers) in a compact, readable way. It supports multiple display modes and customization options.