fix(navbar): correct loading design-tokens (#UIM-737) (#689)

packages/mosaic/design-tokens/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

packages/mosaic/design-tokens/package.json

@@ -0,0 +1,7 @@
+{
+    "ngPackage": {
+        "lib": {
+            "entryFile": "index.ts"
+        }
+    }
+}

packages/mosaic/design-tokens/public-api.ts

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

packages/mosaic/design-tokens/style-dictionary/configs/js.js

@@ -2,7 +2,7 @@ module.exports = {
     js: {
         transformGroup: 'js',
         files: [{
-            destination: 'tokens.js',
+            destination: 'tokens.ts',
             format: 'javascript/es6'
         }]
     }

packages/mosaic/design-tokens/tokens.js → packages/mosaic/design-tokens/tokens.ts

@@ -1,6 +1,7 @@
+/* tslint:disable:naming-convention object-literal-key-quotes quotemark whitespace */
 /**
  * Do not edit directly
- * Generated on Tue, 24 Aug 2021 08:22:46 GMT
+ * Generated on Mon, 30 Aug 2021 13:44:07 GMT
  */
 
 export const LightColorSchemePrimaryDefault = "#338FCC";
@@ -777,4 +778,4 @@ export const TooltipFontDefault = "caption";
 export const TreeSizePaddingRight = "16px";
 export const TreeSizeBorderWidth = "2px";
 export const TreeSizeNodeHeight = "28px";
-export const TreeFontNode = "body";
+export const TreeFontNode = "body";

packages/mosaic/navbar/vertical-navbar.animation.ts

@@ -1,10 +1,14 @@
 import { animate, AnimationTriggerMetadata, style, transition, trigger, state } from '@angular/animations';
+import {
+    VerticalNavbarSizeStatesClosedWidth as closedWidth,
+    VerticalNavbarSizeStatesOpenedWidth as openedWidth
+} from '@ptsecurity/mosaic/design-tokens';
 
 
 export function toggleVerticalNavbarAnimation(): AnimationTriggerMetadata {
     return trigger('toggle', [
-        state('0', style({ width: '48px' })),
-        state('1',  style({ width: '240px' })),
+        state('0', style({ width: `var(--mc-vertical-navbar-size-states-closed-width, ${closedWidth})` })),
+        state('1',  style({ width: `var(--mc-vertical-navbar-size-states-opened-width, ${openedWidth})` })),
         transition('0 <=> 1', animate('200ms cubic-bezier(0, 1, 0.5, 1)'))
     ]);
 }

tsconfig.json

@@ -38,6 +38,7 @@
             "@ptsecurity/mosaic/checkbox": ["packages/mosaic/checkbox/index.ts"],
             "@ptsecurity/mosaic/core": ["packages/mosaic/core/index.ts"],
             "@ptsecurity/mosaic/datepicker": ["packages/mosaic/datepicker/index.ts"],
+            "@ptsecurity/mosaic/design-tokens": ["packages/mosaic/design-tokens/index.ts"],
             "@ptsecurity/mosaic/divider": ["packages/mosaic/divider/index.ts"],
             "@ptsecurity/mosaic/dropdown": ["packages/mosaic/dropdown/index.ts"],
             "@ptsecurity/mosaic/form-field": ["packages/mosaic/form-field/index.ts"],