swisspost · oliverschuerch · Apr 26, 2024
@@ -48,7 +48,7 @@
     "@percy/cypress": "3.1.2",
     "@stencil-community/eslint-plugin": "0.7.2",
     "@stencil/angular-output-target": "0.8.4",
-    "@stencil/core": "4.14.0",
+    "@stencil/core": "4.17.1",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "3.0.11",
     "@types/jest": "29.5.12",

@@ -1,6 +1,5 @@
 import { Component, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
-import { version } from '../../../package.json';
-import { checkEmptyOrOneOf } from '../../utils';
+import { pkg, checkEmptyOrOneOf } from '@/utils';
 import { HEADING_LEVELS, HeadingLevel } from './heading-levels';
 
 /**
@@ -68,7 +67,7 @@ export class PostAccordionItem {
     const HeadingTag = `h${this.headingLevel ?? 2}`;
 
     return (
-      <Host id={this.id} data-version={version}>
+      <Host id={this.id} data-version={pkg.version}>
         <div part="accordion-item" class="accordion-item">
           <HeadingTag class="accordion-header" id={`${this.id}--header`}>
             <button

@@ -1,5 +1,5 @@
 import { Component, Element, h, Host, Listen, Method, Prop } from '@stencil/core';
-import { version } from '../../../package.json';
+import { pkg } from '@/utils';
 
 /**
  * @slot default - Slot for placing post-accordion-item components.
@@ -104,7 +104,7 @@ export class PostAccordion {
 
   render() {
     return (
-      <Host data-version={version}>
+      <Host data-version={pkg.version}>
         <div class="accordion">
           <slot onSlotchange={() => this.registerAccordionItems()} />
         </div>

@@ -10,9 +10,8 @@ import {
   State,
   Watch,
 } from '@stencil/core';
-import { version } from '../../../package.json';
-import { fadeOut } from '../../animations';
-import { checkEmptyOrOneOf, checkEmptyOrPattern, checkNonEmpty, checkType } from '../../utils';
+import { pkg, checkEmptyOrOneOf, checkEmptyOrPattern, checkNonEmpty, checkType } from '@/utils';
+import { fadeOut } from '@/animations';
 import { ALERT_TYPES, AlertType } from './alert-types';
 
 /**
@@ -155,7 +154,7 @@ export class PostAlert {
     ];
 
     return (
-      <Host data-version={version}>
+      <Host data-version={pkg.version}>
         <div role="alert" class={this.classes}>
           {this.dismissible && (
             <button class="btn-close" onClick={this.onDismissButtonClick}>

@@ -11,13 +11,11 @@ import {
   State,
   Watch,
 } from '@stencil/core';
-import { checkNonEmpty, checkOneOf } from '../../utils';
-import { version } from '../../../package.json';
+import { pkg, checkNonEmpty, checkOneOf, parse } from '@/utils';
 
 // remove as soon as all browser support :host-context()
 // https://caniuse.com/?search=%3Ahost-context()
 import scss from './post-card-control.module.scss';
-import { parse } from '../../utils/sass-export';
 
 const SCSS_VARIABLES = parse(scss);
 const EVENT_MAP = {
@@ -351,7 +349,7 @@ export class PostCardControl {
 
   render() {
     return (
-      <Host data-version={version} onClick={this.cardClickHandler}>
+      <Host data-version={pkg.version} onClick={this.cardClickHandler}>
         <div
           class={{
             'card-control': true,

@@ -10,9 +10,8 @@ import {
   State,
   Watch,
 } from '@stencil/core';
-import { version } from '../../../package.json';
-import { collapse, expand } from '../../animations/collapse';
-import { checkEmptyOrType, isMotionReduced } from '../../utils';
+import { pkg, checkEmptyOrType, isMotionReduced } from '@/utils';
+import { collapse, expand } from '@/animations/collapse';
 
 /**
  * @slot default - Slot for placing content within the collapsible element.
@@ -91,7 +90,7 @@ export class PostCollapsible {
 
   render() {
     return (
-      <Host id={this.id} data-version={version}>
+      <Host id={this.id} data-version={pkg.version}>
         <div class="collapse" id={`${this.id}--collapse`} ref={el => (this.collapsible = el)}>
           <slot />
         </div>

@@ -1,6 +1,5 @@
 import { Component, Element, Host, h, Prop, State, Watch } from '@stencil/core';
-import { checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';
-import { version } from '../../../package.json';
+import { pkg, checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from '@/utils';
 
 const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
 const ANIMATION_NAMES = [
@@ -150,7 +149,7 @@ export class PostIcon {
       .filter(([_key, value]) => value !== null)
       .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
     return (
-      <Host data-version={version}>
+      <Host data-version={pkg.version}>
         <span style={svgStyles}></span>
       </Host>
     );

@@ -1,7 +1,7 @@
 import { Component, Element, h, Host, Method, Prop } from '@stencil/core';
 import { Placement } from '@floating-ui/dom';
-import { version } from '../../../package.json';
-import { getAttributeObserver } from '../../utils/attribute-observer';
+import { pkg } from '@/utils';
+import { getAttributeObserver } from '@/utils/attribute-observer';
 
 /**
  * @slot default - Slot for placing content inside the popover.
@@ -133,7 +133,7 @@ export class PostPopover {
 
   render() {
     return (
-      <Host data-version={version}>
+      <Host data-version={pkg.version}>
         <post-popovercontainer
           arrow={this.arrow}
           placement={this.placement}

@@ -15,7 +15,7 @@ import {
 // Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green
 import '@oddbird/popover-polyfill';
 
-import { version } from '../../../package.json';
+import { pkg } from '@/utils';
 
 const SIDE_MAP = {
   top: 'bottom',
@@ -214,7 +214,7 @@ export class PostPopovercontainer {
 
   render() {
     return (
-      <Host data-version={version}>
+      <Host data-version={pkg.version}>
         <div
           class="popover"
           part="popover"

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';
-import { version } from '../../../package.json';
+import { pkg } from '@/utils';
 
 @Component({
   tag: 'post-rating',
@@ -108,7 +108,7 @@ export class PostRating {
 
   render() {
     return (
-      <Host data-version={version}>
+      <Host data-version={pkg.version}>
         <div
           role="slider"
           class="rating"

@@ -1,6 +1,5 @@
 import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
-import { version } from '../../../package.json';
-import { checkNonEmpty } from '../../utils';
+import { pkg, checkNonEmpty } from '@/utils';
 
 /**
  * @slot default - Slot for the content of the tab header.
@@ -35,7 +34,7 @@ export class PostTabHeader {
       <Host
         id={this.tabId}
         role="tab"
-        data-version={version}
+        data-version={pkg.version}
         aria-selected="false"
         tabindex="-1"
         class="tab-title"

@@ -1,5 +1,5 @@
 import { Component, Element, h, Host, Prop, State } from '@stencil/core';
-import { version } from '../../../package.json';
+import { pkg } from '@/utils';
 
 /**
  * @slot default - Slot for placing the content of the tab panel.
@@ -27,7 +27,7 @@ export class PostTabPanel {
 
   render() {
     return (
-      <Host data-version={version} id={this.panelId} role="tabpanel">
+      <Host data-version={pkg.version} id={this.panelId} role="tabpanel">
         <slot />
       </Host>
     );

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
-import { version } from '../../../package.json';
-import { fadeIn, fadeOut } from '../../animations';
+import { pkg } from '@/utils';
+import { fadeIn, fadeOut } from '@/animations';
 
 /**
  * @slot tabs - Slot for placing tab headers. Each tab header should be a <post-tab-header> element.
@@ -195,7 +195,7 @@ export class PostTabs {
 
   render() {
     return (
-      <Host data-version={version}>
+      <Host data-version={pkg.version}>
         <div class="tabs-wrapper">
           <div class="tabs" role="tablist">
             <slot name="tabs" onSlotchange={() => this.enableTabs()} />

@@ -1,5 +1,5 @@
 import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
-import { version } from '../../../package.json';
+import { pkg } from '@/utils';
 
 /**
  * @slot default - Content to place in the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.</p>
@@ -46,7 +46,11 @@ export class PostTag {
   }
 
   private setClasses() {
-    this.classes = ['tag', this.size ? `tag-${this.size}` : null, this.variant ? `tag-${this.variant}` : null]
+    this.classes = [
+      'tag',
+      this.size ? `tag-${this.size}` : null,
+      this.variant ? `tag-${this.variant}` : null,
+    ]
       .filter(c => c !== null)
       .join(' ');
   }
@@ -57,7 +61,7 @@ export class PostTag {
 
   render() {
     return (
-      <Host data-version={version}>
+      <Host data-version={pkg.version}>
         <div class={this.classes}>
           {this.icon ? <post-icon name={this.icon}></post-icon> : null}
           <div class="tag-text">

@@ -1,9 +1,9 @@
 import { Component, Element, h, Host, Method, Prop } from '@stencil/core';
 import { Placement } from '@floating-ui/dom';
-import { version } from '../../../package.json';
+import { pkg } from '@/utils';
 import isFocusable from 'ally.js/is/focusable';
 import 'long-press-event';
-import { getAttributeObserver } from '../../utils/attribute-observer';
+import { getAttributeObserver } from '@/utils/attribute-observer';
 
 /**
  * @slot default - Slot for the content of the tooltip.
@@ -212,7 +212,7 @@ export class PostTooltip {
     const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
     return (
       <Host
-        data-version={version}
+        data-version={pkg.version}
         role="tooltip"
         onPointerOver={this.handleInterest}
         onPointerOut={this.handleInterestLost}

@@ -1,3 +1,4 @@
+export * from './package';
 export * from './property-checkers';
 export * from './is-motion-reduced';
 export * from './sass-export';
@@ -0,0 +1,2 @@
+import * as packageJson from '@root/package.json';
+export const pkg = packageJson;
@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
+    "paths": {
+      "@root/*": ["./*"],
+      "@/*": ["./src/*"]
+    },
     "allowSyntheticDefaultImports": true,
     "allowUnreachableCode": false,
     "declaration": false,