@norwegian/core-components 5.1.0

package/README.md

@@ -0,0 +1,78 @@
+# Angular assets for Norwegian
+
+Component library to facilitate setup of new Norwegian projects. The library contains common UI building blocks for Norwegian sites. Like buttons, accordions, grid system, filter and search boxes, and so on.
+
+## Installation
+
+In order to use components in your project, you have to install `@norwegian/core-components` as a dependency of you project.
+
+```sh
+npm i @norwegian/core-components
+```
+
+When it's in there, you can start importing the stuff you need. Like this:
+
+In app.module.ts:
+
+```ts
+import { ButtonModule } from '@norwegian/core-components';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, ButtonModule],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
+In app.component.html:
+
+```html
+<nas-button primary>Click me!</nas-button>
+```
+
+### What about the SCSS?
+
+The SCSS files for each component is compiled and injected into the component styles. In addition to this, the variables, mixins and such is included in the distributed package and is available for your project.
+
+If you just want the styles:   
+
+```scss
+@import '~@norwegian/core-components/styles/index';
+```
+
+
+### Exposing the assets
+
+The styles refer til asset files like fonts and icons. These files are part of the distributed package and you need to expose them through the angular compiler in order for everything to come together. You do this through defining app assets in your `.angular-cli.json` file. Note that you need a license to use these assets in your site. These can be provided through NAB.
+
+Add the following line to the `apps.assets` array:
+
+```json
+{
+  "glob": "**/*",
+  "input": "./node_modules/@norwegian/core-components/assets",
+  "output": "./assets/"
+}
+```
+
+### Tech details
+
+- Angular 8+
+- 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
+- Both components and modules are exposed, making it possible to compose new modules from the components
+
+
+
+## Adding your own component
+
+Project is currenty not open source, and only developers which is a part of the Norwegian team can contribute with new components, features, bugfixes and patches. For the Norwegian team, please check out the internal documentation site for step-by-step introduction to the library.
+
+
+## Version History
+
+See [CHANGELOG](CHANGELOG.md) for history
+

package/assets/documentation/accordion/accordion.md

@@ -0,0 +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.

package/assets/documentation/autocomplete/autocomplete.md

@@ -0,0 +1 @@
+The autocomplete component is a generic dropdown with possibility to dynamically pass in data models.

package/assets/documentation/box/box.md

@@ -0,0 +1 @@
+

package/assets/documentation/button/button.md

@@ -0,0 +1,10 @@
+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.

package/assets/documentation/checkbox/checkbox.md

@@ -0,0 +1,7 @@
+
+```<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.

package/assets/documentation/chip/chip.md

@@ -0,0 +1 @@
+The `nas-chip` component is generating a `span` with chip styling. Content can be added to the chip by wrapping the `nas-chip` element around the content.

package/assets/documentation/container/container.md

@@ -0,0 +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. 

package/assets/documentation/continue/continue.md

@@ -0,0 +1 @@
+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.

package/assets/documentation/cover/cover.md

@@ -0,0 +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. 

package/assets/documentation/datepicker/calendar/calendar.md

@@ -0,0 +1,3 @@
+Calendar is a compelte month view of dates to pick the date from.
+It accepts 'Array' of complete month data to show in 'DayModel' format. i.e. Array<DayModel>
+once selected user can get the date with an event.

package/assets/documentation/datepicker/datepicker.md

@@ -0,0 +1,3 @@
+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.

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

@@ -0,0 +1 @@
+Datepicker Combo is meant to be used when selecting outbound and inbound flights. Therefore, use of `disablePastSelection` attribute and passing in `availableDates` is recommended.

package/assets/documentation/dropdown/dropdown.md

@@ -0,0 +1,3 @@
+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.

package/assets/documentation/grid/grid.md

@@ -0,0 +1 @@
+The grid component is used together with the column component. The grid component is the wrapper, while the column component specify the layout.

package/assets/documentation/icon/icon.md

@@ -0,0 +1,4 @@
+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.
+
+### Colours
+The large sized illustrations are made for use on a light background, like the background gray. They should never be placed on a red background. The medium and small sized blue icons can be used on a light background, and the white version of them can be placed on a dark background, like red or blue.

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

@@ -0,0 +1 @@
+This component makes a list of links with optional icons and optional ingress.

package/assets/documentation/info/info.md

@@ -0,0 +1 @@
+The `nas-info` component can be used to display information, warnings or error messages for error handling.

package/assets/documentation/input/input.md

@@ -0,0 +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.

package/assets/documentation/journey/journey.md

@@ -0,0 +1 @@
+- A summary of the booking from origin to destination

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

@@ -0,0 +1,3 @@
+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.

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

@@ -0,0 +1,9 @@
+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.

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

@@ -0,0 +1 @@
+Journey selection component displays journey searched for/selected journey along with the close dates to change the searhed/selected journey.

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

@@ -0,0 +1 @@
+- A summary of the transit or stopover between origin and destination.

package/assets/documentation/list/list.md

@@ -0,0 +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.

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

@@ -0,0 +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.

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

@@ -0,0 +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.

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

@@ -0,0 +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.

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

@@ -0,0 +1 @@
+Passenger select it typically used together with a `<nas-dropdown>` element.

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

@@ -0,0 +1,2 @@
+- 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.

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

@@ -0,0 +1,9 @@
+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.

package/assets/documentation/radio/radio.md

@@ -0,0 +1,7 @@
+
+```<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.

package/assets/documentation/select/select.md

@@ -0,0 +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.

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

@@ -0,0 +1 @@
+The simple list component uses the native html `ul` and `li` elements for creating a custom list with Norwegian Brand styling. 

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

@@ -0,0 +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.

package/assets/documentation/slider/slider.md

@@ -0,0 +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.

package/assets/documentation/sort/sort.md

@@ -0,0 +1 @@
+It is generic sort component which will input list of types of sort and toggle them while output the click/press events.

package/assets/documentation/spinner/spinner.md

@@ -0,0 +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.

package/assets/documentation/subsidy-discount/subsidy-discount.md

@@ -0,0 +1,3 @@
+The `nas-subsidy-discount` component is an extended dropdown/ select component, with label, icon, frame/border, and info button made for subsidy discount selection. The icon is customizable, but defaults to the medium family icon. Icons which is provided into the component must exist in medium size (see nas-icon documentation). It is used e.x. to select domestic spain resident subsidies. 
+
+The icon button can be used to trigger e.x. a model, info-box, or other events to inform user about the subsidy discount. 

package/assets/documentation/suggestions/suggestions.md

@@ -0,0 +1 @@
+Is meant to be used below an airport select in order to come up with suggetsions for selected airports.

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

@@ -0,0 +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.

package/assets/documentation/table/table.md

@@ -0,0 +1,8 @@
+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>`

package/assets/documentation/textarea/textarea.md

@@ -0,0 +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`.

package/assets/documentation/toggle/toggle.md

@@ -0,0 +1,5 @@
+`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.

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

@@ -0,0 +1,2 @@
+- 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

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

@@ -0,0 +1 @@
+`nas-weather-icon` is a dynamic icon which created inline svg based on weather and temperature input.