@kirbydesign/designsystem 0.0.0

package/src/lib/kirby.module.ts

@@ -0,0 +1,219 @@
+import { CommonModule } from '@angular/common';
+import { Inject, InjectionToken, ModuleWithProviders, NgModule, Optional } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+
+import { AccordionItemComponent } from './components/accordion/accordion-item.component';
+import { AccordionDirective } from './components/accordion/accordion.directive';
+import { AppModule } from './components/app/app.module';
+import { AvatarComponent } from './components/avatar/avatar.component';
+import { ButtonComponent } from './components/button/button.component';
+import { CalendarComponent } from './components/calendar/calendar.component';
+import { CardFooterComponent } from './components/card/card-footer/card-footer.component';
+import { CardHeaderComponent } from './components/card/card-header/card-header.component';
+import { CardComponent } from './components/card/card.component';
+import { ChartDeprecatedComponent } from './components/chart-deprecated/chart-deprecated.component';
+import { ChartModule } from './components/chart/chart.module';
+import { CheckboxComponent } from './components/checkbox/checkbox.component';
+import { ChipComponent } from './components/chip/chip.component';
+import { DividerComponent } from './components/divider/divider.component';
+import { DropdownComponent } from './components/dropdown/dropdown.component';
+import { EmptyStateComponent } from './components/empty-state/empty-state.component';
+import { FabSheetComponent } from './components/fab-sheet/fab-sheet.component';
+import { FlagComponent } from './components/flag/flag.component';
+import { DateInputDirective } from './components/form-field/directives/date/date-input.directive';
+import { DecimalMaskDirective } from './components/form-field/directives/decimal-mask/decimal-mask.directive';
+import { FormFieldMessageComponent } from './components/form-field/form-field-message/form-field-message.component';
+import { FormFieldComponent } from './components/form-field/form-field.component';
+import { InputCounterComponent } from './components/form-field/input-counter/input-counter.component';
+import { InputComponent } from './components/form-field/input/input.component';
+import { TextareaComponent } from './components/form-field/textarea/textarea.component';
+import { BreakpointHelperService } from './components/grid/breakpoint-helper.service';
+import { GridComponent } from './components/grid/grid.component';
+import { IconModule } from './components/icon/icon.module';
+import { ItemGroupComponent } from './components/item-group/item-group.component';
+import { ItemSlidingComponent } from './components/item-sliding/item-sliding.component';
+import { ItemModule } from './components/item/item.module';
+import { ListModule } from './components/list/list.module';
+import { GroupByPipe } from './components/list/pipes/group-by.pipe';
+import { LoadingOverlayComponent } from './components/loading-overlay/loading-overlay.component';
+import { LoadingOverlayService } from './components/loading-overlay/loading-overlay.service';
+import { ActionSheetComponent } from './components/modal/action-sheet/action-sheet.component';
+import { AlertComponent } from './components/modal/alert/alert.component';
+import { ModalFooterComponent } from './components/modal/footer/modal-footer.component';
+import { ModalCompactWrapperComponent } from './components/modal/modal-wrapper/compact/modal-compact-wrapper.component';
+import { ModalWrapperComponent } from './components/modal/modal-wrapper/modal-wrapper.component';
+import { ActionSheetHelper } from './components/modal/services/action-sheet.helper';
+import { AlertHelper } from './components/modal/services/alert.helper';
+import { ModalController } from './components/modal/services/modal.controller';
+import { ModalHelper } from './components/modal/services/modal.helper';
+import { PageModule } from './components/page/page.module';
+import { PopoverComponent } from './components/popover/popover.component';
+import { ProgressCircleRingComponent } from './components/progress-circle/progress-circle-ring.component';
+import { ProgressCircleComponent } from './components/progress-circle/progress-circle.component';
+import { RadioGroupComponent } from './components/radio/radio-group/radio-group.component';
+import { RadioComponent } from './components/radio/radio.component';
+import { RangeComponent } from './components/range/range.component';
+import { ReorderListComponent } from './components/reorder-list/reorder-list.component';
+import { RouterOutletModule } from './components/router-outlet/router-outlet.module';
+import { SectionHeaderComponent } from './components/section-header/section-header.component';
+import { SegmentedControlComponent } from './components/segmented-control/segmented-control.component';
+import { ComponentLoaderDirective } from './components/shared/component-loader.directive';
+import { ResizeObserverFactory } from './components/shared/resize-observer/resize-observer.factory';
+import { ResizeObserverService } from './components/shared/resize-observer/resize-observer.service';
+import { SlideButtonComponent } from './components/slide-button/slide-button.component';
+import { SlideDirective, SlidesComponent } from './components/slides/slides.component';
+import { SpinnerModule } from './components/spinner/spinner.module';
+import { StockChartDeprecatedComponent } from './components/stock-chart-deprecated/stock-chart-deprecated.component';
+import { TabsModule } from './components/tabs/tabs.module';
+import { ToastController } from './components/toast/services/toast.controller';
+import { ToastHelper } from './components/toast/services/toast.helper';
+import { ToggleButtonModule } from './components/toggle-button/toggle-button.module';
+import { ToggleComponent } from './components/toggle/toggle.component';
+import { KirbyBadge as BadgeComponent } from './components/web-component-proxies.component';
+import { customElementsInitializer } from './custom-elements-initializer';
+import { ElementAsButtonDirective } from './directives/element-as-button/element-as-button.directive';
+import { KeyHandlerDirective } from './directives/key-handler/key-handler.directive';
+import { ModalRouterLinkDirective } from './directives/modal-router-link/modal-router-link.directive';
+import { ThemeColorDirective } from './directives/theme-color/theme-color.directive';
+
+const exportedDeclarations = [
+  CardComponent,
+  CardHeaderComponent,
+  CardFooterComponent,
+  ButtonComponent,
+  ChartDeprecatedComponent,
+  StockChartDeprecatedComponent,
+  GridComponent,
+  ComponentLoaderDirective,
+  AvatarComponent,
+  GroupByPipe,
+  CalendarComponent,
+  CheckboxComponent,
+  ActionSheetComponent,
+  ModalFooterComponent,
+  ModalRouterLinkDirective,
+  SegmentedControlComponent,
+  ChipComponent,
+  BadgeComponent,
+  ThemeColorDirective,
+  DateInputDirective,
+  DecimalMaskDirective,
+  SlideButtonComponent,
+  ToggleComponent,
+  EmptyStateComponent,
+  FormFieldComponent,
+  InputComponent,
+  InputCounterComponent,
+  TextareaComponent,
+  FabSheetComponent,
+  DividerComponent,
+  ReorderListComponent,
+  DropdownComponent,
+  LoadingOverlayComponent,
+  ProgressCircleComponent,
+  FlagComponent,
+  SlidesComponent,
+  SlideDirective,
+  AccordionDirective,
+  AccordionItemComponent,
+  ItemSlidingComponent,
+  RadioComponent,
+  RadioGroupComponent,
+  RangeComponent,
+  ElementAsButtonDirective,
+  ItemGroupComponent,
+  SectionHeaderComponent,
+];
+
+const declarations = [
+  ...exportedDeclarations,
+  KeyHandlerDirective,
+  FormFieldMessageComponent,
+  AlertComponent,
+  ModalWrapperComponent,
+  ModalCompactWrapperComponent,
+  ProgressCircleRingComponent,
+  PopoverComponent,
+];
+
+const exportedModules = [
+  AppModule,
+  RouterOutletModule,
+  PageModule,
+  TabsModule,
+  IconModule,
+  ItemModule,
+  ToggleButtonModule,
+  ListModule,
+  ChartModule,
+  SpinnerModule,
+];
+
+const exports = [...exportedModules, ...exportedDeclarations];
+
+const importedModules = [...exportedModules];
+
+const providers = [
+  ModalController,
+  ActionSheetHelper,
+  ModalHelper,
+  AlertHelper,
+  ToastHelper,
+  ToastController,
+  BreakpointHelperService,
+  LoadingOverlayService,
+  ResizeObserverFactory,
+  ResizeObserverService,
+  customElementsInitializer(),
+];
+
+const entryComponents = [
+  ModalWrapperComponent,
+  ModalCompactWrapperComponent,
+  ActionSheetComponent,
+  AlertComponent,
+];
+
+const ConfigToken = new InjectionToken<any>('USERCONFIG');
+export interface KirbyConfig {
+  moduleRootRoutePath?: string;
+}
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule,
+    IonicModule.forRoot({
+      mode: 'ios',
+      inputShims: true,
+      scrollAssist: true,
+      scrollPadding: false,
+    }),
+    ...importedModules,
+  ],
+  declarations: declarations,
+  providers: providers,
+  entryComponents: entryComponents,
+  exports: exports,
+})
+export class KirbyModule {
+  static forChild(config?: KirbyConfig): ModuleWithProviders<KirbyModule> {
+    return {
+      ngModule: KirbyModule,
+      providers: [
+        {
+          provide: ConfigToken,
+          useValue: config,
+        },
+      ],
+    };
+  }
+
+  constructor(
+    modalController: ModalController,
+    @Optional() @Inject(ConfigToken) config?: KirbyConfig
+  ) {
+    modalController.initialize(config && config.moduleRootRoutePath);
+  }
+}

package/src/lib/polyfills/intersection-observer-polyfill-loader.js

@@ -0,0 +1,14 @@
+(function () {
+  // A technique for loading polyfills only when needed. Details here:
+  // https://philipwalton.com/articles/loading-polyfills-only-when-needed/
+  if (polyfillNeeded()) {
+    // Browsers that doesn't support IntersectionObserver must load the polyfills first:
+    var script = document.createElement('script');
+    script.src = 'kirby/polyfills/intersection-observer-polyfill.min.js';
+    document.head.appendChild(script);
+  }
+
+  function polyfillNeeded() {
+    return typeof IntersectionObserver === 'undefined';
+  }
+})();

package/src/lib/polyfills/intersection-observer-polyfill-loader.min.js

@@ -0,0 +1 @@
+!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=6)}({6:function(e,t){!function(){if("undefined"==typeof IntersectionObserver){var e=document.createElement("script");e.src="kirby/polyfills/intersection-observer-polyfill.min.js",document.head.appendChild(e)}}()}});

package/src/lib/polyfills/intersection-observer-polyfill.js

@@ -0,0 +1,2 @@
+import IntersectionObserver from 'intersection-observer';
+window.IntersectionObserver = IntersectionObserver;

package/src/lib/polyfills/intersection-observer-polyfill.min.js

@@ -0,0 +1 @@
+!function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=5)}({1:function(t,e){!function(){"use strict";if("object"==typeof window)if("IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype)"isIntersecting"in window.IntersectionObserverEntry.prototype||Object.defineProperty(window.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return this.intersectionRatio>0}});else{var t=window.document,e=[];o.prototype.THROTTLE_TIMEOUT=100,o.prototype.POLL_INTERVAL=null,o.prototype.USE_MUTATION_OBSERVER=!0,o.prototype.observe=function(t){if(!this._observationTargets.some((function(e){return e.element==t}))){if(!t||1!=t.nodeType)throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:t,entry:null}),this._monitorIntersections(),this._checkForIntersections()}},o.prototype.unobserve=function(t){this._observationTargets=this._observationTargets.filter((function(e){return e.element!=t})),this._observationTargets.length||(this._unmonitorIntersections(),this._unregisterInstance())},o.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorIntersections(),this._unregisterInstance()},o.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},o.prototype._initThresholds=function(t){var e=t||[0];return Array.isArray(e)||(e=[e]),e.sort().filter((function(t,e,n){if("number"!=typeof t||isNaN(t)||t<0||t>1)throw new Error("threshold must be a number between 0 and 1 inclusively");return t!==n[e-1]}))},o.prototype._parseRootMargin=function(t){var e=(t||"0px").split(/\s+/).map((function(t){var e=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(!e)throw new Error("rootMargin must be specified in pixels or percent");return{value:parseFloat(e[1]),unit:e[2]}}));return e[1]=e[1]||e[0],e[2]=e[2]||e[0],e[3]=e[3]||e[1],e},o.prototype._monitorIntersections=function(){this._monitoringIntersections||(this._monitoringIntersections=!0,this.POLL_INTERVAL?this._monitoringInterval=setInterval(this._checkForIntersections,this.POLL_INTERVAL):(i(window,"resize",this._checkForIntersections,!0),i(t,"scroll",this._checkForIntersections,!0),this.USE_MUTATION_OBSERVER&&"MutationObserver"in window&&(this._domObserver=new MutationObserver(this._checkForIntersections),this._domObserver.observe(t,{attributes:!0,childList:!0,characterData:!0,subtree:!0}))))},o.prototype._unmonitorIntersections=function(){this._monitoringIntersections&&(this._monitoringIntersections=!1,clearInterval(this._monitoringInterval),this._monitoringInterval=null,r(window,"resize",this._checkForIntersections,!0),r(t,"scroll",this._checkForIntersections,!0),this._domObserver&&(this._domObserver.disconnect(),this._domObserver=null))},o.prototype._checkForIntersections=function(){var t=this._rootIsInDom(),e=t?this._getRootRect():{top:0,bottom:0,left:0,right:0,width:0,height:0};this._observationTargets.forEach((function(o){var i=o.element,r=s(i),c=this._rootContainsTarget(i),h=o.entry,u=t&&c&&this._computeTargetAndRootIntersection(i,e),a=o.entry=new n({time:window.performance&&performance.now&&performance.now(),target:i,boundingClientRect:r,rootBounds:e,intersectionRect:u});h?t&&c?this._hasCrossedThreshold(h,a)&&this._queuedEntries.push(a):h&&h.isIntersecting&&this._queuedEntries.push(a):this._queuedEntries.push(a)}),this),this._queuedEntries.length&&this._callback(this.takeRecords(),this)},o.prototype._computeTargetAndRootIntersection=function(e,n){if("none"!=window.getComputedStyle(e).display){for(var o,i,r,c,u,a,l,d,p=s(e),f=h(e),g=!1;!g;){var v=null,_=1==f.nodeType?window.getComputedStyle(f):{};if("none"==_.display)return;if(f==this.root||f==t?(g=!0,v=n):f!=t.body&&f!=t.documentElement&&"visible"!=_.overflow&&(v=s(f)),v&&(o=v,i=p,r=void 0,c=void 0,u=void 0,a=void 0,l=void 0,d=void 0,r=Math.max(o.top,i.top),c=Math.min(o.bottom,i.bottom),u=Math.max(o.left,i.left),a=Math.min(o.right,i.right),d=c-r,!(p=(l=a-u)>=0&&d>=0&&{top:r,bottom:c,left:u,right:a,width:l,height:d})))break;f=h(f)}return p}},o.prototype._getRootRect=function(){var e;if(this.root)e=s(this.root);else{var n=t.documentElement,o=t.body;e={top:0,left:0,right:n.clientWidth||o.clientWidth,width:n.clientWidth||o.clientWidth,bottom:n.clientHeight||o.clientHeight,height:n.clientHeight||o.clientHeight}}return this._expandRectByRootMargin(e)},o.prototype._expandRectByRootMargin=function(t){var e=this._rootMarginValues.map((function(e,n){return"px"==e.unit?e.value:e.value*(n%2?t.width:t.height)/100})),n={top:t.top-e[0],right:t.right+e[1],bottom:t.bottom+e[2],left:t.left-e[3]};return n.width=n.right-n.left,n.height=n.bottom-n.top,n},o.prototype._hasCrossedThreshold=function(t,e){var n=t&&t.isIntersecting?t.intersectionRatio||0:-1,o=e.isIntersecting?e.intersectionRatio||0:-1;if(n!==o)for(var i=0;i<this.thresholds.length;i++){var r=this.thresholds[i];if(r==n||r==o||r<n!=r<o)return!0}},o.prototype._rootIsInDom=function(){return!this.root||c(t,this.root)},o.prototype._rootContainsTarget=function(e){return c(this.root||t,e)},o.prototype._registerInstance=function(){e.indexOf(this)<0&&e.push(this)},o.prototype._unregisterInstance=function(){var t=e.indexOf(this);-1!=t&&e.splice(t,1)},window.IntersectionObserver=o,window.IntersectionObserverEntry=n}function n(t){this.time=t.time,this.target=t.target,this.rootBounds=t.rootBounds,this.boundingClientRect=t.boundingClientRect,this.intersectionRect=t.intersectionRect||{top:0,bottom:0,left:0,right:0,width:0,height:0},this.isIntersecting=!!t.intersectionRect;var e=this.boundingClientRect,n=e.width*e.height,o=this.intersectionRect,i=o.width*o.height;this.intersectionRatio=n?Number((i/n).toFixed(4)):this.isIntersecting?1:0}function o(t,e){var n,o,i,r=e||{};if("function"!=typeof t)throw new Error("callback must be a function");if(r.root&&1!=r.root.nodeType)throw new Error("root must be an Element");this._checkForIntersections=(n=this._checkForIntersections.bind(this),o=this.THROTTLE_TIMEOUT,i=null,function(){i||(i=setTimeout((function(){n(),i=null}),o))}),this._callback=t,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(r.rootMargin),this.thresholds=this._initThresholds(r.threshold),this.root=r.root||null,this.rootMargin=this._rootMarginValues.map((function(t){return t.value+t.unit})).join(" ")}function i(t,e,n,o){"function"==typeof t.addEventListener?t.addEventListener(e,n,o||!1):"function"==typeof t.attachEvent&&t.attachEvent("on"+e,n)}function r(t,e,n,o){"function"==typeof t.removeEventListener?t.removeEventListener(e,n,o||!1):"function"==typeof t.detatchEvent&&t.detatchEvent("on"+e,n)}function s(t){var e;try{e=t.getBoundingClientRect()}catch(t){}return e?(e.width&&e.height||(e={top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.right-e.left,height:e.bottom-e.top}),e):{top:0,bottom:0,left:0,right:0,width:0,height:0}}function c(t,e){for(var n=e;n;){if(n==t)return!0;n=h(n)}return!1}function h(t){var e=t.parentNode;return e&&11==e.nodeType&&e.host?e.host:e&&e.assignedSlot?e.assignedSlot.parentNode:e}}()},5:function(t,e,n){"use strict";n.r(e);var o=n(1),i=n.n(o);window.IntersectionObserver=i.a}});

package/src/lib/polyfills/resize-observer-polyfill-loader.js

@@ -0,0 +1,14 @@
+(function () {
+  // A technique for loading polyfills only when needed. Details here:
+  // https://philipwalton.com/articles/loading-polyfills-only-when-needed/
+  if (polyfillNeeded()) {
+    // Browsers that doesn't support ResizeObserver must load the polyfill first:
+    var script = document.createElement('script');
+    script.src = 'kirby/polyfills/resize-observer-polyfill.min.js';
+    document.head.appendChild(script);
+  }
+
+  function polyfillNeeded() {
+    return typeof ResizeObserver === 'undefined';
+  }
+})();

package/src/lib/polyfills/resize-observer-polyfill-loader.min.js

@@ -0,0 +1 @@
+!function(e){var r={};function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:n})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,r){if(1&r&&(e=t(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(t.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var o in e)t.d(n,o,function(r){return e[r]}.bind(null,o));return n},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p="",t(t.s=4)}({4:function(e,r){!function(){if("undefined"==typeof ResizeObserver){var e=document.createElement("script");e.src="kirby/polyfills/resize-observer-polyfill.min.js",document.head.appendChild(e)}}()}});

package/src/lib/polyfills/resize-observer-polyfill.js

@@ -0,0 +1,2 @@
+import ResizeObserver from 'resize-observer-polyfill';
+window.ResizeObserver = ResizeObserver;

package/src/lib/polyfills/resize-observer-polyfill.min.js

@@ -0,0 +1 @@
+!function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=2)}([function(t,e,n){"use strict";(function(t){var n=function(){if("undefined"!=typeof Map)return Map;function t(t,e){var n=-1;return t.some((function(t,r){return t[0]===e&&(n=r,!0)})),n}return function(){function e(){this.__entries__=[]}return Object.defineProperty(e.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),e.prototype.get=function(e){var n=t(this.__entries__,e),r=this.__entries__[n];return r&&r[1]},e.prototype.set=function(e,n){var r=t(this.__entries__,e);~r?this.__entries__[r][1]=n:this.__entries__.push([e,n])},e.prototype.delete=function(e){var n=this.__entries__,r=t(n,e);~r&&n.splice(r,1)},e.prototype.has=function(e){return!!~t(this.__entries__,e)},e.prototype.clear=function(){this.__entries__.splice(0)},e.prototype.forEach=function(t,e){void 0===e&&(e=null);for(var n=0,r=this.__entries__;n<r.length;n++){var i=r[n];t.call(e,i[1],i[0])}},e}()}(),r="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,i=void 0!==t&&t.Math===Math?t:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),o="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(i):function(t){return setTimeout((function(){return t(Date.now())}),1e3/60)};var s=["top","right","bottom","left","width","height","size","weight"],c="undefined"!=typeof MutationObserver,a=function(){function t(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(t,e){var n=!1,r=!1,i=0;function s(){n&&(n=!1,t()),r&&a()}function c(){o(s)}function a(){var t=Date.now();if(n){if(t-i<2)return;r=!0}else n=!0,r=!1,setTimeout(c,e);i=t}return a}(this.refresh.bind(this),20)}return t.prototype.addObserver=function(t){~this.observers_.indexOf(t)||this.observers_.push(t),this.connected_||this.connect_()},t.prototype.removeObserver=function(t){var e=this.observers_,n=e.indexOf(t);~n&&e.splice(n,1),!e.length&&this.connected_&&this.disconnect_()},t.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},t.prototype.updateObservers_=function(){var t=this.observers_.filter((function(t){return t.gatherActive(),t.hasActive()}));return t.forEach((function(t){return t.broadcastActive()})),t.length>0},t.prototype.connect_=function(){r&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),c?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},t.prototype.disconnect_=function(){r&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},t.prototype.onTransitionEnd_=function(t){var e=t.propertyName,n=void 0===e?"":e;s.some((function(t){return!!~n.indexOf(t)}))&&this.refresh()},t.getInstance=function(){return this.instance_||(this.instance_=new t),this.instance_},t.instance_=null,t}(),u=function(t,e){for(var n=0,r=Object.keys(e);n<r.length;n++){var i=r[n];Object.defineProperty(t,i,{value:e[i],enumerable:!1,writable:!1,configurable:!0})}return t},h=function(t){return t&&t.ownerDocument&&t.ownerDocument.defaultView||i},f=b(0,0,0,0);function d(t){return parseFloat(t)||0}function p(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];return e.reduce((function(e,n){return e+d(t["border-"+n+"-width"])}),0)}function l(t){var e=t.clientWidth,n=t.clientHeight;if(!e&&!n)return f;var r=h(t).getComputedStyle(t),i=function(t){for(var e={},n=0,r=["top","right","bottom","left"];n<r.length;n++){var i=r[n],o=t["padding-"+i];e[i]=d(o)}return e}(r),o=i.left+i.right,s=i.top+i.bottom,c=d(r.width),a=d(r.height);if("border-box"===r.boxSizing&&(Math.round(c+o)!==e&&(c-=p(r,"left","right")+o),Math.round(a+s)!==n&&(a-=p(r,"top","bottom")+s)),!function(t){return t===h(t).document.documentElement}(t)){var u=Math.round(c+o)-e,l=Math.round(a+s)-n;1!==Math.abs(u)&&(c-=u),1!==Math.abs(l)&&(a-=l)}return b(i.left,i.top,c,a)}var v="undefined"!=typeof SVGGraphicsElement?function(t){return t instanceof h(t).SVGGraphicsElement}:function(t){return t instanceof h(t).SVGElement&&"function"==typeof t.getBBox};function _(t){return r?v(t)?function(t){var e=t.getBBox();return b(0,0,e.width,e.height)}(t):l(t):f}function b(t,e,n,r){return{x:t,y:e,width:n,height:r}}var y=function(){function t(t){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=b(0,0,0,0),this.target=t}return t.prototype.isActive=function(){var t=_(this.target);return this.contentRect_=t,t.width!==this.broadcastWidth||t.height!==this.broadcastHeight},t.prototype.broadcastRect=function(){var t=this.contentRect_;return this.broadcastWidth=t.width,this.broadcastHeight=t.height,t},t}(),m=function(t,e){var n,r,i,o,s,c,a,h=(r=(n=e).x,i=n.y,o=n.width,s=n.height,c="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,a=Object.create(c.prototype),u(a,{x:r,y:i,width:o,height:s,top:i,right:r+o,bottom:s+i,left:r}),a);u(this,{target:t,contentRect:h})},w=function(){function t(t,e,r){if(this.activeObservations_=[],this.observations_=new n,"function"!=typeof t)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=t,this.controller_=e,this.callbackCtx_=r}return t.prototype.observe=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof h(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)||(e.set(t,new y(t)),this.controller_.addObserver(this),this.controller_.refresh())}},t.prototype.unobserve=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof h(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)&&(e.delete(t),e.size||this.controller_.removeObserver(this))}},t.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},t.prototype.gatherActive=function(){var t=this;this.clearActive(),this.observations_.forEach((function(e){e.isActive()&&t.activeObservations_.push(e)}))},t.prototype.broadcastActive=function(){if(this.hasActive()){var t=this.callbackCtx_,e=this.activeObservations_.map((function(t){return new m(t.target,t.broadcastRect())}));this.callback_.call(t,e,t),this.clearActive()}},t.prototype.clearActive=function(){this.activeObservations_.splice(0)},t.prototype.hasActive=function(){return this.activeObservations_.length>0},t}(),g="undefined"!=typeof WeakMap?new WeakMap:new n,O=function t(e){if(!(this instanceof t))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var n=a.getInstance(),r=new w(e,n,this);g.set(this,r)};["observe","unobserve","disconnect"].forEach((function(t){O.prototype[t]=function(){var e;return(e=g.get(this))[t].apply(e,arguments)}}));var E=void 0!==i.ResizeObserver?i.ResizeObserver:O;e.a=E}).call(this,n(3))},,function(t,e,n){"use strict";n.r(e);var r=n(0);window.ResizeObserver=r.a},function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(t){"object"==typeof window&&(n=window)}t.exports=n}]);

package/src/lib/scss/link.spec.ts

@@ -0,0 +1,47 @@
+import { DesignTokenHelper } from '@kirbydesign/core';
+
+const { getColor } = DesignTokenHelper;
+
+describe('Anchor tag', () => {
+  let element: HTMLElement;
+
+  afterEach(() => {
+    document.body.removeChild(element);
+  });
+  describe(`by default`, () => {
+    beforeEach(() => {
+      const fixture = `<a href="/test/" id="fixture">Text</a>`;
+      document.body.insertAdjacentHTML('afterbegin', fixture);
+      document.body.style.color = getColor('black').value;
+      element = document.body.querySelector('#fixture');
+    });
+
+    it(`should inherit its color`, () => {
+      expect(element).toHaveComputedStyle({ color: getColor('black') });
+    });
+
+    it(`should be styled with an underline`, () => {
+      expect(element).toHaveComputedStyle({ 'text-decoration-line': 'underline' });
+    });
+
+    it(`should be styled with a pointer as the cursor`, () => {
+      expect(element).toHaveComputedStyle({ cursor: 'pointer' });
+    });
+  });
+
+  describe(`with class for link-icon applied`, () => {
+    beforeEach(() => {
+      const fixture = `<a href="/test/" class="kirby-external-icon" id="fixture">Text</a>`;
+      document.body.insertAdjacentHTML('afterbegin', fixture);
+      element = document.body.querySelector('#fixture');
+    });
+
+    it(`should have a link icon`, () => {
+      const baseURI = window.document.baseURI;
+
+      expect(element).toHaveComputedStyle({
+        'background-image': `url("${baseURI}assets/kirby/icons/svg/link.svg")`,
+      });
+    });
+  });
+});

package/src/lib/scss/scss-helper.ts

@@ -0,0 +1,8 @@
+// TODO TRM/JEO Parse from scss files instead!!1!!
+export class ScssHelper {
+  // Breakpoints
+  public static BREAKPOINT_SCREEN_L = 720;
+  public static BREAKPOINT_CARD_S = 320;
+  public static BREAKPOINT_CARD_M = 460;
+  public static BREAKPOINT_CARD_L = 820;
+}

package/src/lib/scss/typography.spec.ts

@@ -0,0 +1,241 @@
+describe('Typography', () => {
+  let element: HTMLElement;
+
+  afterEach(() => {
+    document.body.removeChild(element);
+  });
+
+  describe('default paragraph', () => {
+    beforeEach(() => {
+      const fixture = `<p id="fixture">Text</p>`;
+      document.body.insertAdjacentHTML('afterbegin', fixture);
+      element = document.body.querySelector('#fixture');
+    });
+
+    it(`should be rendered with font-size: 16px`, () => {
+      expect(element).toHaveComputedStyle({ 'font-size': '16px' });
+    });
+
+    it(`should be rendered with font-weight: 400`, () => {
+      expect(element).toHaveComputedStyle({ 'font-weight': '400' });
+    });
+
+    it(`should be rendered with line-height: 24px`, () => {
+      expect(element).toHaveComputedStyle({ 'line-height': '24px' });
+    });
+
+    it(`should be rendered with correct margin`, () => {
+      expect(element).toHaveComputedStyle({
+        'margin-top': '0px',
+        'margin-right': '0px',
+        'margin-left': '0px',
+        'margin-bottom': '16px',
+      });
+    });
+  });
+
+  describe('display font', () => {
+    const displayFonts = {
+      'display 1': {
+        cssClass: 'kirby-text-display-1',
+        fontSize: '72px',
+        fontWeight: '900',
+        lineHeight: 'normal',
+      },
+      'display 2': {
+        cssClass: 'kirby-text-display-2',
+        fontSize: '56px',
+        fontWeight: '900',
+        lineHeight: 'normal',
+      },
+      'display 3': {
+        cssClass: 'kirby-text-display-3',
+        fontSize: '40px',
+        fontWeight: '900',
+        lineHeight: 'normal',
+      },
+    };
+
+    for (const displayFontName in displayFonts) {
+      const displayFont = displayFonts[displayFontName];
+      describe(`${displayFontName} set by applying class '${displayFont.cssClass}' to parapgraph`, () => {
+        beforeEach(() => {
+          const fixture = `<p class="${displayFont.cssClass}" id="fixture">Text</p>`;
+          document.body.insertAdjacentHTML('afterbegin', fixture);
+          element = document.body.querySelector('#fixture');
+        });
+
+        it(`should be rendered with font-size: ${displayFont.fontSize}`, () => {
+          expect(element).toHaveComputedStyle({ 'font-size': displayFont.fontSize });
+        });
+
+        it(`should be rendered with font-weight: ${displayFont.fontWeight}`, () => {
+          expect(element).toHaveComputedStyle({ 'font-weight': displayFont.fontWeight });
+        });
+
+        it(`should be rendered with line-height: ${displayFont.lineHeight}`, () => {
+          expect(element).toHaveComputedStyle({ 'line-height': displayFont.lineHeight });
+        });
+
+        it(`should be rendered with correct margin`, () => {
+          expect(element).toHaveComputedStyle({
+            'margin-top': '0px',
+            'margin-right': '0px',
+            'margin-left': '0px',
+            'margin-bottom': '16px',
+          });
+        });
+      });
+    }
+  });
+
+  describe('heading', () => {
+    const headings = {
+      'heading 1': {
+        tag: 'h1',
+        cssClasses: ['h1', 'kirby-text-xlarge'],
+        fontSize: '32px',
+        fontWeight: '900',
+        lineHeight: '38px',
+      },
+      'heading 2': {
+        tag: 'h2',
+        cssClasses: ['h2', 'kirby-text-large'],
+        fontSize: '22px',
+        fontWeight: '700',
+        lineHeight: '28px',
+      },
+      'heading 3': {
+        tag: 'h3',
+        cssClasses: ['h3', 'kirby-text-medium'],
+        fontSize: '18px',
+        fontWeight: '700',
+        lineHeight: '24px',
+      },
+    };
+
+    for (const headingName in headings) {
+      const heading = headings[headingName];
+      describe(`${headingName} set by tag '<${heading.tag}>'`, () => {
+        beforeEach(() => {
+          const fixture = `<${heading.tag} id="fixture">Text</${heading.tag}>`;
+          document.body.insertAdjacentHTML('afterbegin', fixture);
+          element = document.body.querySelector('#fixture');
+        });
+
+        it(`should be rendered with font-size: ${heading.fontSize}`, () => {
+          expect(element).toHaveComputedStyle({ 'font-size': heading.fontSize });
+        });
+
+        it(`should be rendered with font-weight: ${heading.fontWeight}`, () => {
+          expect(element).toHaveComputedStyle({ 'font-weight': heading.fontWeight });
+        });
+
+        it(`should be rendered with line-height: ${heading.lineHeight}`, () => {
+          expect(element).toHaveComputedStyle({ 'line-height': heading.lineHeight });
+        });
+
+        it(`should be rendered with correct margin`, () => {
+          expect(element).toHaveComputedStyle({
+            'margin-top': '0px',
+            'margin-right': '0px',
+            'margin-left': '0px',
+            'margin-bottom': '16px',
+          });
+        });
+      });
+
+      for (const cssClass of heading.cssClasses) {
+        describe(`${headingName} set by applying class '${cssClass}' to parapgraph`, () => {
+          beforeEach(() => {
+            const fixture = `<p class="${cssClass}" id="fixture">Text</p>`;
+            document.body.insertAdjacentHTML('afterbegin', fixture);
+            element = document.body.querySelector('#fixture');
+          });
+
+          it(`should be rendered with font-size: ${heading.fontSize}`, () => {
+            expect(element).toHaveComputedStyle({ 'font-size': heading.fontSize });
+          });
+
+          it(`should be rendered with font-weight: ${heading.fontWeight}`, () => {
+            expect(element).toHaveComputedStyle({ 'font-weight': heading.fontWeight });
+          });
+
+          it(`should be rendered with line-height: ${heading.lineHeight}`, () => {
+            expect(element).toHaveComputedStyle({ 'line-height': heading.lineHeight });
+          });
+
+          it(`should be rendered with correct margin`, () => {
+            expect(element).toHaveComputedStyle({
+              'margin-top': '0px',
+              'margin-right': '0px',
+              'margin-left': '0px',
+              'margin-bottom': '16px',
+            });
+          });
+        });
+      }
+    }
+  });
+
+  describe('text', () => {
+    const texts = {
+      'small text': {
+        cssClass: 'kirby-text-small',
+        fontSize: '14px',
+        fontWeight: '400',
+        lineHeight: '20px',
+      },
+      'small text light': {
+        cssClass: 'kirby-text-small-light',
+        fontSize: '14px',
+        fontWeight: '300',
+        lineHeight: '20px',
+      },
+      'x-small text': {
+        cssClass: 'kirby-text-xsmall',
+        fontSize: '12px',
+        fontWeight: '400',
+        lineHeight: '16px',
+      },
+      'xx-small text': {
+        cssClass: 'kirby-text-xxsmall',
+        fontSize: '10px',
+        fontWeight: '400',
+        lineHeight: '11px',
+      },
+    };
+
+    for (const textName in texts) {
+      const text = texts[textName];
+      describe(`${textName} set by applying class '${text.cssClass}' to parapgraph`, () => {
+        beforeEach(() => {
+          const fixture = `<p class="${text.cssClass}" id="fixture">Text</p>`;
+          document.body.insertAdjacentHTML('afterbegin', fixture);
+          element = document.body.querySelector('#fixture');
+        });
+
+        it(`should be rendered with font-size: ${text.fontSize}`, () => {
+          expect(element).toHaveComputedStyle({ 'font-size': text.fontSize });
+        });
+
+        it(`should be rendered with font-weight: ${text.fontWeight}`, () => {
+          expect(element).toHaveComputedStyle({ 'font-weight': text.fontWeight });
+        });
+
+        it(`should be rendered with line-height: ${text.lineHeight}`, () => {
+          expect(element).toHaveComputedStyle({ 'line-height': text.lineHeight });
+        });
+
+        it(`should be rendered with correct margin`, () => {
+          expect(element).toHaveComputedStyle({
+            'margin-top': '0px',
+            'margin-right': '0px',
+            'margin-left': '0px',
+            'margin-bottom': '16px',
+          });
+        });
+      });
+    }
+  });
+});

package/src/lib/testing/element-css-custom-matchers.d.ts

@@ -0,0 +1,7 @@
+declare namespace jasmine {
+  interface Matchers<T> {
+    toHaveComputedStyle(styles: {
+      [cssProperty: string]: string | import('../helpers/design-token-helper').ThemeColorDefinition;
+    }): boolean;
+  }
+}