@norwegian/core-components 5.1.0

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@norwegian/core-components",
+  "version": "5.1.0",
+  "peerDependencies": {
+    "@angular/common": ">=12.0.0 < 13.0.0",
+    "@angular/core": ">=12.0.0 < 13.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
+  "main": "bundles/norwegian-core-components.umd.js",
+  "module": "fesm2015/norwegian-core-components.js",
+  "es2015": "fesm2015/norwegian-core-components.js",
+  "esm2015": "esm2015/norwegian-core-components.js",
+  "fesm2015": "fesm2015/norwegian-core-components.js",
+  "typings": "norwegian-core-components.d.ts",
+  "metadata": "norwegian-core-components.metadata.json",
+  "sideEffects": false
+}

package/public_api.d.ts

@@ -0,0 +1 @@
+export * from './lib/index';

package/styles/1__settings/_colors.scss

@@ -0,0 +1,65 @@
+// Colors
+@function color($color-name, $color-variant: 'base') {
+    @return map-get(map-get($colors, $color-name), $color-variant);
+}
+
+// Find the contrast color to any color hex
+@function color-contrast($n) {
+    $color-brightness: round((red($n) * 299) + (green($n) * 587) + (blue($n) * 114) / 1000);
+    $light-color: round((red(#fff) * 299) + (green(#fff) * 587) + (blue(#fff) * 114) / 1000);
+
+    @if abs($color-brightness) < ($light-color / 2) {
+        @return $color-light;
+    } @else {
+        @return $color-dark;
+    }
+}
+// Add percentage of white to a color
+@function tint($color, $percent) {
+    @return mix(white, $color, $percent);
+}
+
+// Add percentage of black to a color
+@function shade($color, $percent) {
+    @return mix(black, $color, $percent);
+}
+
+$colors: (
+    primary: (
+        base: #d81939,
+        dark: #ae0823
+    ),
+    secondary: (
+        base: #003251, // #003d50
+        dark: #002a3a
+    ),
+    neutral: (
+        xxxlight: #f1f1f1,
+        xxlight: #e3e3e3,
+        xlight: #d8d8d8,
+        light: #c3c3c3,
+        base: #909090,
+        dark: #626363,
+        xdark: #424141
+    )
+);
+
+// Specific color's
+// Do not overuse, then your on a wrong path and will be hunted down!
+$color-light: #fff;
+$color-dark: color(secondary, dark);
+
+$color-approve: #238e00;
+$color-information: #ffc;
+$color-focus-ring: #3b99fc;
+$color-background-badge: #E0EBFF;
+$color-error: #f1d6dc;
+$color-text: $color-dark;
+$color-muted: color(neutral, dark);
+$color-backdrop: rgba(shade(color(secondary), 50%), 0.17);
+$color-backdrop--strong: rgba(shade(color(secondary), 70%), 0.7);
+
+$color-links: #C41734;
+$color-links-border: color(neutral, xlight);
+$color-links--hover: color(secondary);
+$color-background: color(neutral, xxxlight);

package/styles/1__settings/_mixins.scss

@@ -0,0 +1,226 @@
+@import '../3__base/animations';
+
+// Font family and weights
+@mixin font($font-family: base, $weight: null) {
+  $family: map-get($fonts, $font-family);
+  @if $weight {
+    @if map-has-key($family, $weight) {
+      $f-weight: map-get($family, $weight);
+
+      @if (length($f-weight) > 1) {
+        font-family: nth($f-weight, 2), map-get($family, fallback);
+        font-weight: nth($f-weight, 1);
+      } @else {
+        font-family: map-get($family, font), map-get($family, fallback);
+        font-weight: $f-weight;
+      }
+    } @else {
+      font-family: map-get($family, font), map-get($family, fallback);
+    }
+  } @else {
+    font-family: map-get($family, font), map-get($family, fallback);
+  }
+}
+
+@mixin font-size($size: base, $skip-line-height: false) {
+  $fs-breakpoints: $breakpoints;
+  $fs-map: map-get($font-size, $size);
+
+  @each $fs-breakpoint, $fs-font-size in $fs-map {
+    @if $fs-breakpoint == base {
+      @include make-font-size($fs-font-size, $skip-line-height);
+    } @else {
+      @if map-has-key($fs-breakpoints, $fs-breakpoint) {
+        $fs-breakpoint: map-get($fs-breakpoints, $fs-breakpoint);
+      }
+      @media screen and (min-width: $fs-breakpoint) {
+        @include make-font-size($fs-font-size, $skip-line-height);
+      }
+    }
+  }
+}
+
+@mixin make-font-size($fs-font-size, $skip-line-height: false) {
+  @if (type-of($fs-font-size) == "list") {
+    font-size: nth($fs-font-size, 1);
+
+    @if ($skip-line-height != true and length($fs-font-size) > 1) {
+      line-height: nth($fs-font-size, 2);
+    }
+  } @else {
+    font-size: $fs-font-size;
+
+    @if ($skip-line-height != true) {
+      line-height: nth($fs-font-size, 2);
+    }
+  }
+}
+
+// Input placeholder
+@mixin input-placeholder {
+  &:-moz-placeholder {
+    @content;
+  }
+  &::-moz-placeholder {
+    @content;
+  }
+  &:-ms-input-placeholder {
+    @content;
+  }
+  &::-webkit-input-placeholder {
+    @content;
+  }
+}
+
+// Media queries
+@mixin min-width($name) {
+  @if not map-has-key($breakpoints, $name) {
+    @media (min-width: $name) {
+      @content;
+    }
+  } @else {
+    @media (min-width: map-get($breakpoints, $name)) {
+      @content;
+    }
+  }
+}
+
+// Some very rare occations we might need this one.. USE WITH CARE!!!
+@mixin between($min, $max) {
+  @if not map-has-key($breakpoints, $min) {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @media (min-width: map-get($breakpoints, $min)) and (max-width: map-get($breakpoints, $max) - 1) {
+      @content;
+    }
+  }
+}
+
+// Animation delay for childs
+@mixin animation-delay($count, $delay, $initial: 0) {
+  animation-delay: (($count + 1) * $delay) + $initial;
+
+  @for $i from 1 through $count {
+    &:nth-child(#{$i}) {
+      animation-delay: ($i * $delay) + $initial;
+    }
+  }
+}
+
+// Transition delay for childs
+@mixin transition-delay($count, $delay, $initial: 0) {
+  transition-delay: (($count + 1) * $delay) + $initial;
+
+  @for $i from 1 through $count {
+    &:nth-child(#{$i}) {
+      transition-delay: ($i * $delay) + $initial;
+    }
+  }
+}
+
+// Flip in animation. Rember to put perspective: 1000px on parent
+@mixin flip-in($time: 550ms, $pos-y: top, $pos-x: center) {  
+  transform-origin: $pos-x $pos-y;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  animation: flip-in $time ease both;
+}
+
+// Flip in animation. Rember to put perspective: 1000px on parent
+@mixin flip-out($time: 200ms, $pos-y: top, $pos-x: center) {  
+  transform-origin: $pos-x $pos-y;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  animation: flip-out $time ease both;
+}
+
+// Flip in and out animation. Dependent on ReactCSSTransitionGroup. Rember to put perspective: 1000px on parent
+@mixin flip-in-out($time-in: 550ms, $time-out: 200ms) {
+  &-enter,
+  &-leave-active {
+    transform-origin: center top;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+  }
+
+  &-enter {
+    animation: flip-in $time-in ease both;
+  }
+
+  &-leave-active {
+    animation: flip-out $time-out ease-out both;
+  }
+}
+
+@mixin pop-in-from-top($time: 500ms) {
+  animation: pop-in-from-top $time linear both;
+}
+
+// Full-width
+@mixin full-width {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+}
+
+// No select
+@mixin no-select {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+
+  -webkit-user-drag: none;
+  -moz-user-drag: none;
+  user-drag: none;
+}
+
+// Screenreaders only
+@mixin screenreaders-only($breakpoint: null) {
+  @if ($breakpoint != null) {
+    @include min-width($breakpoint) {
+      position: absolute;
+      overflow: hidden;
+      width: 1px;
+      height: 1px;
+    }
+  } @else {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+  }
+}
+
+// Hyphens: use with care...
+@mixin hyphens {
+  overflow-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+}
+
+// Overflow text
+@mixin text-overflow {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+// Text stroke...
+@mixin text-stroke($width, $color) {
+  $shadow: ();
+  @for $i from -$width through $width {
+    $shadow: append($shadow, #{$width}px #{$i}px $color, comma);
+    $shadow: append($shadow, #{-$width}px #{$i}px $color, comma);
+    $shadow: append($shadow, #{$i}px #{$width}px $color, comma);
+    $shadow: append($shadow, #{$i}px #{-$width}px $color, comma);
+  }
+  text-shadow: $shadow;
+}

package/styles/1__settings/_type.scss

@@ -0,0 +1,53 @@
+$sans-fallback: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+$fonts: (
+    base: (
+        font: 'Apercu',
+        fallback: $sans-fallback,
+        light: 300,
+        normal: normal,
+        medium: 600,
+        bold: bold
+    ),
+    serif: (
+        font: 'Tiempos',
+        fallback: serif,
+        normal: normal,
+        medium: 600,
+        bold: bold
+    ),
+    mono: (
+        font: 'ApercuMono',
+        fallback: $sans-fallback,
+        normal: normal,
+        bold: normal
+    )
+);
+
+$font-size: (
+    xsmall: (
+        base: (14px, 20px)
+    ),
+    small: (
+        base: (16px, 26px)
+    ),
+    xregular: (
+        base: (18px, 26px)
+    ),
+    regular: (
+        base: (22px, 28px)
+    ),
+    medium: (
+        base: (24px, 30px)
+    ),
+    large: (
+        base: (28px, 34px),
+        md: (32px, 38px)
+    ),
+    xlarge: (
+        base: (50px, 56px)
+    ),
+    xxlarge: (
+        base: (72px, 80px)
+    )
+);

package/styles/1__settings/_vars.scss

@@ -0,0 +1,62 @@
+// Breakpoints
+$breakpoints: (
+    xs: 380px, // Small and up
+    md: 640px, // Medium and up
+    lg: 1000px, // Large and up
+    xl: 1280px // Extra large and up
+);
+
+
+// Container max widths
+$container-width: 1180px;
+$container-width--medium: 820px;
+$container-width--tight: 600px;
+$container-width--wide: 1600px;
+
+
+// Spacing
+$spacing--xxxlarge: 96px;
+$spacing--xxlarge: 60px;
+$spacing--xlarge: 48px;
+$spacing--large: 36px;
+$spacing: 24px;
+$spacing--medium: 16px;
+$spacing--small: 12px;
+$spacing--xsmall: 9px;
+$spacing--xxsmall: 6px;
+$spacing--xxxsmall: 3px;
+
+$indention: $spacing + $spacing--xxxsmall;
+
+
+// Border-width
+$border-width--small: 1px;
+$border-width: 2px;
+$border-width--large: 3px;
+$border-width--xlarge: 6px;
+$border-width--xxlarge: 9px;
+$border-width--xxxlarge: 12px;
+
+
+// Border radius
+$border-radius--small: 4px;
+$border-radius: 6px;
+$border-radius--large: 12px;
+
+
+// Better easings
+// http://easings.net/
+$swift-out: cubic-bezier(0, 0, 0.1, 1);
+$ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
+$ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+
+
+// Header
+$header-height: 70px;
+
+
+// Z-Index levels
+$level-1: 10;
+$level-2: 20;
+$level-3: 30;
+$level-4: 40;

package/styles/2__generic/_fonts.scss

@@ -0,0 +1,99 @@
+$import-fonts: (
+    TiemposText: (
+        'Tiempos',
+        'TiemposTextWeb-Regular',
+        normal,
+        normal
+    ),
+    TiemposText-Italic: (
+        'Tiempos',
+        'TiemposTextWeb-Italic',
+        normal,
+        italic
+    ),
+    TiemposText-Bold: (
+        'Tiempos',
+        'TiemposHeadlineWeb-Bold',
+        bold,
+        normal
+    ),
+    TiemposText-Medium: (
+        'Tiempos',
+        'TiemposText-Medium',
+        600,
+        normal
+    ),
+    TiemposText-BoldItalic: (
+        'Tiempos',
+        'TiemposHeadlineWeb-BoldItalic',
+        bold,
+        italic
+    ),
+    ApercuProRegular: (
+        'Apercu',
+        'apercu_regular_pro-web',
+        normal,
+        normal
+    ),
+    ApercuPro-Italic: (
+        'Apercu',
+        'apercu_regular_italic_pro-web',
+        normal,
+        italic
+    ),
+    ApercuProLight: (
+        'Apercu',
+        'apercu_light_pro-web',
+        300,
+        normal
+    ),
+    ApercuProLight-Italic: (
+        'Apercu',
+        'apercu_light_italic_pro-web',
+        300,
+        italic
+    ),
+    ApercuProMedium: (
+        'Apercu',
+        'apercu_medium_pro-web',
+        600,
+        normal
+    ),
+    ApercuProMedium-Italic: (
+        'Apercu',
+        'apercu_medium_italic_pro-web',
+        600,
+        italic
+    ),
+    ApercuProBold: (
+        'Apercu',
+        'apercu_bold_pro-web',
+        bold,
+        normal
+    ),
+    ApercuProBold-Italic: (
+        'Apercu',
+        'apercu_bold_italic_pro-web',
+        bold,
+        italic
+    ),
+    ApercuProMono: (
+        'ApercuMono',
+        'apercu_mono_pro-web',
+        normal,
+        normal
+    ),
+);
+
+@each $key, $value in $import-fonts {
+    @font-face {
+        font-family: '#{nth($value, 1)}';
+        font-style: nth($value, 4);
+        font-weight: nth($value, 3);
+        font-display: fallback;
+        src: url('~@norwegian/core-components/assets/fonts/#{nth($value, 2)}.woff2') format('woff2'),
+             url('~@norwegian/core-components/assets/fonts/#{nth($value, 2)}.woff') format('woff');
+        
+        
+    }
+}