@kirbydesign/designsystem 5.0.12 → 5.0.16

package/lib/components/chart/chart.types.d.ts

@@ -19,6 +19,7 @@ export declare type ChartLocale = 'da-DK' | 'en-US';
 export declare type ChartDataset = {
     kirbyOptions?: {
         highlightedElements?: number[];
+        isStockChart?: boolean;
     };
 } & ChartJSDataset;
 export declare function isNumberArray(value: any): value is number[];

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@kirbydesign/designsystem",
-  "version": "5.0.12",
+  "version": "5.0.16",
   "dependencies": {
     "chart.js": "3.3.2",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-plugin-annotation": "^1.0.2",
     "chartjs-plugin-datalabels": "^2.0.0",
     "@ionic/angular": "5.5.2",
-    "@kirbydesign/core": "0.0.19",
+    "@kirbydesign/core": "0.0.22",
     "date-fns": "2.21.1",
     "date-fns-tz": "1.1.4",
     "highcharts": "8.0.4",

package/scss/_global-styles.scss

@@ -1,269 +1 @@
-@use "sass:map";
-@use "sass:math";
-@use 'utils';
-@use 'base/ionic';
-@use 'base/typography';
-@use 'base/line-clamp';
-@use 'base/list';
-
-:root {
-  --when-merging-pull-request: 'should run publish workflow';
-}
-
-:root,
-:host {
-  --kirby-font-family: 'Roboto';
-  font-family: var(--kirby-font-family);
-  @each $color, $color-name in utils.$kirby-colors {
-    --kirby-#{$color}: #{$color-name};
-  }
-  @each $color, $color-name in utils.$text-colors {
-    --kirby-text-color-#{$color}: #{$color-name};
-  }
-  --kirby-page-max-width: 1366px;
-  --kirby-statusbar-padding: var(--ion-statusbar-padding);
-  --kirby-safe-area-top: var(--ion-safe-area-top);
-  --kirby-safe-area-right: var(--ion-safe-area-right);
-  --kirby-safe-area-bottom: var(--ion-safe-area-bottom);
-  --kirby-safe-area-left: var(--ion-safe-area-left);
-  --kirby-tab-bar-height: 50px;
-
-  // Prevent iOS tap highlight:
-  -webkit-tap-highlight-color: transparent;
-}
-
-@function get-drawer-additional-padding-top() {
-  $modal-close-button-inner-height: utils.size('l'); // Todo: Move to / get from shared var
-  $modal-close-button-vertical-margin: utils.size('xxxs') * 2; // Todo: Move to / get from shared var
-  $modal-header-vertical-padding: 3px * 2; // 3px defined by Ionic
-  $modal-header-total-height: $modal-close-button-inner-height + $modal-close-button-vertical-margin +
-    $modal-header-vertical-padding;
-  $modal-header-vertical-center: math.round($modal-header-total-height * 0.5);
-  @return $modal-header-vertical-center;
-}
-
-$backdrop-opacity: 0.4;
-
-body.allow-background-scroll {
-  overflow: initial !important;
-}
-
-ion-modal.kirby-overlay {
-  position: fixed;
-
-  // Ensure consistent backdrop on all overlays:
-  &:not(.modal-card) {
-    --backdrop-opacity: #{$backdrop-opacity};
-    ion-backdrop {
-      opacity: var(--backdrop-opacity);
-    }
-  }
-
-  // Ensure consistent backdrop on card style modals, as Ionic 5 only applies --backdrop-opacity to :first-of-type:
-  // See https://github.com/ionic-team/ionic/commit/253cd96164914a803f6bb42ff95ca74880c940d0
-  // and https://github.com/ionic-team/ionic/issues/20800#issuecomment-606670762
-  &.modal-card,
-  &.modal-card:first-of-type {
-    --backdrop-opacity: #{$backdrop-opacity};
-  }
-
-  .modal-shadow {
-    display: none;
-  }
-
-  &.kirby-modal {
-    box-sizing: border-box;
-    --background: var(--kirby-modal-background, #{utils.get-color('background-color')});
-    --border-radius: 0;
-    --height: auto;
-
-    &.kirby-modal-compact {
-      --border-radius: #{utils.$border-radius};
-      --max-width: #{utils.$compact-modal-max-width};
-      text-align: center;
-    }
-
-    &.kirby-drawer {
-      --min-height: #{utils.$drawer-default-height};
-      --kirby-modal-padding-top: calc(var(--kirby-safe-area-top, 0px) + #{utils.size('m')});
-      padding-top: var(--kirby-modal-padding-top);
-      align-items: flex-end;
-
-      &.interact-with-background {
-        &.kirby-modal.kirby-drawer {
-          --kirby-modal-padding-top: 0px;
-        }
-      }
-
-      .modal-wrapper {
-        border-top-left-radius: #{utils.$border-radius};
-        border-top-right-radius: #{utils.$border-radius};
-      }
-    }
-
-    @include utils.media('<medium') {
-      &:not(.kirby-drawer):not(.kirby-modal-compact) {
-        --height: 100%;
-      }
-    }
-
-    &:not(.kirby-modal-compact).kirby-modal-full-height {
-      --height: 100%;
-    }
-
-    &.modal-card:not(.kirby-drawer) {
-      .modal-wrapper {
-        @include utils.media('<medium') {
-          // Reset Ionic Card style height + top border radius:
-          --height: 100%;
-          border-top-left-radius: 0;
-          border-top-right-radius: 0;
-        }
-
-        @include utils.media('>=medium') {
-          // Reset Ionic Card style border radius:
-          border-radius: utils.$border-radius;
-        }
-      }
-    }
-
-    @include utils.media('>=medium') {
-      --width: #{utils.$modal-max-width};
-      --border-radius: #{utils.$border-radius};
-      --box-shadow: #{utils.get-elevation(8)};
-
-      &:not(.kirby-modal-compact) {
-        --max-height: 100%;
-        --kirby-modal-padding-top-base: #{utils.size('xl')};
-        --kirby-modal-padding-top: var(--kirby-modal-padding-top-base);
-        padding-top: var(--kirby-modal-padding-top);
-
-        &:not(.kirby-drawer) {
-          --min-height: #{utils.$modal-default-height};
-          align-items: flex-start;
-
-          &.kirby-modal-small {
-            --min-height: #{map.get(utils.$modal-heights, 's')};
-          }
-          &.kirby-modal-medium {
-            --min-height: #{map.get(utils.$modal-heights, 'm')};
-          }
-          &.kirby-modal-large {
-            --min-height: #{map.get(utils.$modal-heights, 'l')};
-          }
-
-          &.kirby-modal-full-height .modal-wrapper,
-          .modal-wrapper.full-height {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-          }
-        }
-      }
-
-      &.kirby-drawer {
-        --kirby-modal-padding-top: calc(
-          var(--kirby-modal-padding-top-base) + #{get-drawer-additional-padding-top()}
-        );
-
-        .modal-wrapper {
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-      }
-    }
-  }
-
-  &.kirby-action-sheet {
-    --background: transparent;
-    --width: 100%;
-    --height: 100%;
-
-    .modal-wrapper {
-      display: flex;
-      justify-content: center;
-      align-items: flex-end;
-      pointer-events: none;
-      --max-width: auto;
-      --max-height: auto;
-    }
-  }
-
-  &.kirby-alert {
-    --background: #{utils.get-color('background-color')};
-    --border-radius: #{utils.$border-radius};
-    --box-shadow: #{utils.get-elevation(8)};
-
-    .modal-wrapper {
-      max-width: utils.$alert-max-width;
-      height: auto;
-      text-align: center;
-    }
-  }
-}
-
-ion-loading.kirby-loading-overlay {
-  --backdrop-opacity: #{utils.$loading-overlay-backdrop-opacity};
-  --ion-backdrop-color: #{utils.get-color('background-color')};
-  .loading-wrapper {
-    --background: transparent;
-  }
-}
-
-.kirby-toast {
-  position: fixed;
-  user-select: none;
-  text-align: center;
-
-  // Set default colors
-  --background: #{utils.get-color('success')};
-  --color: #{utils.get-color('success-contrast')};
-  --button-color: #{utils.get-color('success-contrast')};
-
-  @each $color-name, $color-value in utils.$notification-colors {
-    &.#{$color-name} {
-      --background: #{utils.get-color($color-name)};
-      --color: #{utils.get-color($color-name + '-contrast')};
-      --button-color: #{utils.get-color($color-name + '-contrast')};
-    }
-  }
-}
-
-/*
- * FAB-sheet backdrop
-*/
-.fab-sheet-active {
-  .tabs-inner,
-  ion-router-outlet,
-  .ion-page {
-    overflow: visible;
-    contain: none !important;
-  }
-
-  ion-tab-bar {
-    z-index: -1;
-  }
-}
-
-/*
- * Link-styles (anchor tag with href)
- */
-:link,
-:visited {
-  color: inherit;
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-/*
- * Class to add link-icon to the right of e.g. anchor tag.
- */
-.kirby-external-icon {
-  $icon-scaling-factor: 1.5em;
-  white-space: nowrap;
-  background-image: url('/assets/kirby/icons/svg/link.svg');
-  background-repeat: no-repeat;
-  background-position: right 50%;
-  background-size: $icon-scaling-factor;
-  //place icon to the right of text, with icons own width + the actual spacing
-  padding-right: calc(#{$icon-scaling-factor} + #{utils.size('xxxs')});
-}
+@forward "~@kirbydesign/core/scss/global-styles";

package/scss/_utils.scss

@@ -1 +1 @@
-@forward '~@kirbydesign/core/scss/utils';
+@forward "~@kirbydesign/core/scss/utils";

package/scss/base/_functions.scss

@@ -1,188 +1 @@
-@use "sass:list";
-@use "sass:map";
-@use "sass:math";
-@use "sass:string";
-@use "../themes/colors";
-@use "variables";
-
-@function _get-map-prop($map, $key) {
-  @if map.has-key($map, $key) {
-    @return map.get($map, $key);
-  }
-
-  @error 'Unknown key `#{$key}`.';
-  @return null;
-}
-
-@function size($key: 'm') {
-  $negative: string.index($key, '-') == 1;
-  @if ($negative) {
-    $key: string.slice($key, 2, -1);
-  }
-  $value: _get-map-prop(variables.$sizes, $key);
-  @return if($negative, string.unquote('-' + $value), $value);
-}
-
-@function z($key) {
-  @return _get-map-prop(variables.$z-layers, $key);
-}
-
-@function font-size($key: 'n') {
-  @if ($key == 'display') {
-    @warn 'Display key is deprecated';
-  }
-  @return _get-map-prop(variables.$font-sizes, $key);
-}
-
-@function line-height($key: 'm') {
-  @return _get-map-prop(variables.$line-height, $key);
-}
-
-@function font-weight($key: 'normal') {
-  @return _get-map-prop(variables.$font-weight, $key);
-}
-
-@function icon-font-size($size) {
-  @return map.get(variables.$icon-font-sizes, $size);
-}
-
-@function get-color($variant, $getValueOnly: false, $map: colors.$kirby-colors) {
-  $value: _get-map-prop($map, $variant);
-  @if $getValueOnly == true {
-    @return $value;
-  } @else {
-    @return string.unquote('var(--kirby-' + $variant + ')');
-  }
-}
-
-@function get-text-color($variant) {
-  $value: _get-map-prop(colors.$text-colors, $variant);
-  @return string.unquote('var(--kirby-text-color-' + $variant + ')');
-}
-
-@function get-elevation($value) {
-  @return map.get(variables.$elevations, $value);
-}
-
-@function get-transition-duration($value) {
-  @return map.get(variables.$transition-durations, $value);
-}
-
-@function get-transition-easing($value) {
-  @return map.get(variables.$transition-easings, $value);
-}
-
-@function get-shadow-size($elevation) {
-  $shadow-size: 0;
-  $shadow-list: map.get(variables.$elevations, $elevation);
-  @each $shadow in $shadow-list {
-    $offset-x: math.abs(_get-shadow-value($shadow, 'offset-x'));
-    $offset-y: math.abs(_get-shadow-value($shadow, 'offset-y'));
-    $blur-radius: _get-shadow-value($shadow, 'blur-radius');
-    $spread-radius: _get-shadow-value($shadow, 'spread-radius');
-    $current-shadow-size: math.max($offset-x, $offset-y) + $blur-radius + $spread-radius;
-    $shadow-size: math.max($shadow-size, $current-shadow-size);
-  }
-  @return $shadow-size;
-}
-
-@function _get-shadow-value($shadow, $valuekey) {
-  $shadow-value-map: (
-    'offset-x': 1,
-    'offset-y': 2,
-    'blur-radius': 3,
-    'spread-radius': 4,
-  );
-  $value-index: map.get($shadow-value-map, $valuekey);
-  @return list.nth($shadow, $value-index);
-}
-
-/**
- * Outputs all keys from map as CSS class selector list
- */
-@function keys-to-classes($map) {
-  $classes: ();
-  @each $key in map.keys($map) {
-    $classes: list.append($classes, '.#{$key}', $separator: comma);
-  }
-  @return $classes;
-}
-
-@mixin slotted($selectors...) {
-  ::ng-deep > {
-    #{$selectors} {
-      @content;
-    }
-  }
-}
-
-@mixin theme-background($variant, $text-variant-override: null) {
-  $background-color: null;
-  $text-color: null;
-  @if $variant == transparent {
-    $background-color: transparent;
-    $text-color: get-text-color('black');
-  } @else {
-    $background-color: get-color($variant);
-    $text-color: get-color($variant + '-contrast');
-  }
-  @if ($text-variant-override != null) {
-    $text-color: get-text-color($text-variant-override);
-  }
-  background-color: $background-color;
-  color: $text-color;
-}
-
-/// Only apply the :hover selector and styles if pointer device can hover
-/// (effectively desktop/mouse devices):
-@mixin hover() {
-  @media (hover: hover) {
-    &:hover {
-      @content;
-    }
-  }
-}
-
-// Only apply the :focus selector and styles if pointer device can hover
-// (effectively desktop/mouse devices):
-@mixin focus() {
-  @media (hover: hover) {
-    &:focus {
-      @content;
-    }
-  }
-}
-
-// Only apply the styles on touch devices
-// No check for `hover: none`, as Samsung Galaxy will return false on `hover: none` media query
-@mixin touch() {
-  @media (pointer: coarse) {
-    @content;
-  }
-}
-
-// Only apply the styles on non touch devices
-// (fine pointer and hover):
-@mixin not-touch() {
-  @media (hover: hover) and (pointer: fine) {
-    @content;
-  }
-}
-
-// Ensure minimum click area (default 44 x 44 px)
-// Ignore rounded corners to ensure square click area
-@mixin accessible-target-size($width: variables.$fat-finger-size, $height: $width) {
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    min-height: $height;
-    min-width: $width;
-    width: 100%;
-    height: 100%;
-    transform: translate(-50%, -50%);
-    left: 50%;
-    top: 50%;
-  }
-}
+@forward "~@kirbydesign/core/scss/base/functions";

package/scss/base/_ionic.scss

@@ -1,36 +1 @@
-@use '../base/functions';
-@use '../themes/colors';
-
-/* Core CSS required for Ionic components to work properly */
-@import '~@ionic/angular/css/core.css';
-
-@mixin ionic-color-map($ionic-variant, $kirby-variant: $ionic-variant) {
-  --ion-color-#{$ionic-variant}: var(--kirby-#{$kirby-variant});
-  --ion-color-#{$ionic-variant}-rgb: #{functions.get-color(
-      #{$kirby-variant}-rgb,
-      true,
-      colors.$kirby-colors
-    )};
-  --ion-color-#{$ionic-variant}-contrast: var(--kirby-#{$kirby-variant}-contrast);
-  --ion-color-#{$ionic-variant}-contrast-rgb: #{functions.get-color(
-      #{$kirby-variant}-contrast-rgb,
-      true,
-      colors.$kirby-colors
-    )};
-  --ion-color-#{$ionic-variant}-shade: var(--kirby-#{$kirby-variant}-shade);
-  --ion-color-#{$ionic-variant}-tint: var(--kirby-#{$kirby-variant}-tint);
-}
-
-:root {
-  @include ionic-color-map('primary');
-  @include ionic-color-map('secondary');
-  @include ionic-color-map('tertiary');
-  @include ionic-color-map('success');
-  @include ionic-color-map('warning');
-  @include ionic-color-map('danger');
-  @include ionic-color-map('light');
-  @include ionic-color-map('medium');
-  @include ionic-color-map('dark');
-
-  --ion-font-family: var(--kirby-font-family);
-}
+@forward "~@kirbydesign/core/scss/base/ionic";

package/scss/base/_line-clamp.scss

@@ -1,56 +1 @@
-.kirby-line-clamp {
-  // Needed both for line-clamp support and for fallback solution
-  overflow: hidden;
-
-  // Fallback solution with "explicit ellipsis"
-  // line-height value is expected to be in px unit
-
-  line-height: var(--line-height);
-  max-height: calc(var(--line-clamp) * var(--line-height));
-  position: relative;
-
-  // Ellipsis
-  &::before {
-    content: '…';
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    background-color: var(--kirby-background-color);
-    line-height: var(--line-height);
-    height: var(--line-height);
-  }
-
-  // Cover ellipsis when number of lines is less than or equal to line-clamp value
-  &::after {
-    content: '';
-    position: absolute;
-    right: 0;
-    width: 1em;
-    height: var(--line-height);
-    line-height: var(--line-height);
-    background-color: var(--kirby-background-color);
-  }
-}
-
-// Non-standard line-clamp solution with wide browser support
-// See https://caniuse.com/mdn-css_properties_-webkit-line-clamp
-@supports (-webkit-line-clamp: 1) {
-  .kirby-line-clamp {
-    display: -webkit-box;
-    -webkit-line-clamp: var(--line-clamp, none);
-    -webkit-box-orient: vertical;
-
-    // Work around weird bug by setting visibility
-    // See https://bugs.webkit.org/show_bug.cgi?id=207013
-    // and https://stackoverflow.com/questions/41995229/webkit-line-clamp-does-not-work-on-chrome-unless-i-make-some-unrelated-css-chan
-    visibility: visible;
-
-    // Reset fallback properties that are not needed when support for line-clamp
-    max-height: initial;
-    position: initial;
-    &::before,
-    &::after {
-      display: none;
-    }
-  }
-}
+@forward "~@kirbydesign/core/scss/base/line-clamp";

package/scss/base/_list.scss

@@ -1,11 +1 @@
-ul,
-ol {
-  margin-inline-start: 0.25em;
-  padding-inline-start: 1em;
-  line-height: 1.5;
-}
-
-li li,
-li + li {
-  margin-block-start: 0.5em;
-}
+@forward "~@kirbydesign/core/scss/base/list";

package/scss/base/_typography.scss

@@ -1,105 +1 @@
-@use "functions";
-
-@import '~@fontsource/roboto/300.css';
-@import '~@fontsource/roboto/400.css';
-@import '~@fontsource/roboto/700.css';
-@import '~@fontsource/roboto/900.css';
-
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4,
-p,
-.p {
-  margin: 0;
-  margin-bottom: functions.size('s');
-}
-
-kirby-app .page-title {
-  > h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 0;
-  }
-}
-
-.kirby-text-display-1 {
-  font-size: functions.font-size('xxxxl');
-  font-weight: functions.font-weight('black');
-  line-height: normal;
-}
-
-.kirby-text-display-2 {
-  font-size: functions.font-size('xxxl');
-  font-weight: functions.font-weight('black');
-  line-height: normal;
-}
-
-.kirby-text-display-3 {
-  font-size: functions.font-size('xxl');
-  font-weight: functions.font-weight('black');
-  line-height: normal;
-}
-
-h1,
-.h1,
-.kirby-text-xlarge {
-  font-size: functions.font-size('xl');
-  font-weight: functions.font-weight('black');
-  line-height: functions.line-height('xl');
-}
-
-h2,
-.h2,
-.kirby-text-large {
-  font-size: functions.font-size('l');
-  font-weight: functions.font-weight('bold');
-  line-height: functions.line-height('l');
-}
-
-h3,
-.h3,
-.kirby-text-medium {
-  font-size: functions.font-size('m');
-  font-weight: functions.font-weight('bold');
-  line-height: functions.line-height('m');
-}
-
-p,
-.p,
-.kirby-text-normal {
-  font-size: functions.font-size('n');
-  line-height: functions.line-height('n');
-}
-
-.kirby-text-small {
-  font-size: functions.font-size('s');
-  line-height: functions.line-height('s');
-}
-
-.kirby-text-small-light {
-  font-size: functions.font-size('s');
-  font-weight: functions.font-weight('light');
-  line-height: functions.line-height('s');
-}
-
-.kirby-text-xsmall {
-  font-size: functions.font-size('xs');
-  line-height: functions.line-height('xs');
-}
-
-.kirby-text-xxsmall {
-  font-size: functions.font-size('xxs');
-  line-height: functions.line-height('xxs');
-}
-
-.kirby-text-bold {
-  font-weight: functions.font-weight('bold');
-}
+@forward "~@kirbydesign/core/scss/base/typography";