@ptsecurity/mosaic 13.3.0 → 13.5.0

package/design-tokens/ptsecurity-mosaic-design-tokens.d.ts

@@ -1,5 +1,5 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@ptsecurity/mosaic/design-tokens" />
-export * from './index';
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@ptsecurity/mosaic/design-tokens" />
+export * from './index';

package/design-tokens/public-api.d.ts

@@ -1,3 +1,3 @@
-import * as legacyTokens from './legacy-2017/tokens';
-export { legacyTokens };
-export * from './pt-2022/tokens';
+import * as legacyTokens from './legacy-2017/tokens';
+export { legacyTokens };
+export * from './pt-2022/tokens';

package/design-tokens/style-dictionary/build.js

@@ -0,0 +1,63 @@
+const StyleDictionary = require('style-dictionary');
+const getPlatformConfig = require('./configs');
+
+// ==== Include custom transforms ====
+require('./transforms/attribute/typography')(StyleDictionary);
+require('./transforms/attribute/palette')(StyleDictionary);
+require('./transforms/attribute/prefix')(StyleDictionary);
+require('./transforms/attribute/size')(StyleDictionary);
+
+// ==== Include custom filters ====
+require('./filters/palette')(StyleDictionary);
+require('./filters/color')(StyleDictionary);
+require('./filters/size')(StyleDictionary);
+require('./filters/typography')(StyleDictionary);
+
+// ==== Include custom transform groups ====
+require('./transformGroups/scss')(StyleDictionary);
+require('./transformGroups/css')(StyleDictionary);
+require('./transformGroups/ts')(StyleDictionary);
+
+// ==== Include custom formats ====
+require('./formats/typography')(StyleDictionary);
+require('./formats/palette')(StyleDictionary);
+
+// ==== Run build ====
+console.log('Build started...');
+console.log('==============================================');
+
+module.exports = (themeConfig) => {
+    StyleDictionary.registerFileHeader({
+        name: 'customHeader',
+        fileHeader: () => {
+            return [`Do not edit directly`];
+        }
+    });
+    console.log('themeConfig: ', themeConfig);
+
+    if (!themeConfig || themeConfig.length === 0) {
+        console.error('Build Failed. Please set ThemeConfig, for example: ', {
+                name: 'default-theme',
+                buildPath: [
+                    `packages/mosaic/design-tokens/tokens/properties/**/*.json5`,
+                    `packages/mosaic/design-tokens/tokens/components/**/*.json5`
+                ],
+                outputPath: 'packages/mosaic/design-tokens/'
+            }
+        )
+        process.exit(0);
+    }
+
+    themeConfig.map((platform) => {
+        // APPLY THE CONFIGURATION
+        // Very important: the registration of custom transforms
+        // needs to be done _before_ applying the configuration
+        const StyleDictionaryExtended = StyleDictionary.extend(getPlatformConfig(platform));
+
+        // FINALLY, BUILD ALL THE PLATFORMS
+        StyleDictionaryExtended.buildAllPlatforms();
+    });
+
+    console.log('\n==============================================');
+    console.log('\nBuild completed!');
+}

package/design-tokens/style-dictionary/configs/css.js

@@ -0,0 +1,13 @@
+module.exports = {
+    css: {
+        transformGroup: 'mc/css',
+        files: [
+            {
+                destination: 'css-tokens.css',
+                format: 'css/variables',
+                filter: 'size',
+                prefix: 'mc'
+            }
+        ]
+    }
+};

package/design-tokens/style-dictionary/configs/index.js

@@ -0,0 +1,48 @@
+const merge = require('lodash/merge');
+
+const scssConfig = require('./scss');
+const jsConfig = require('./js');
+const cssConfig = require('./css');
+
+const filterObj = {
+    options: {
+        showFileHeader: true,
+        fileHeader: 'customHeader'
+    }
+};
+
+function filterOptions(platforms) {
+    const platformObj = {};
+
+    platforms.map(p => Object.assign(platformObj, p));
+
+    Object.keys(platformObj).forEach((p) => {
+        platformObj[p].files.map(f => merge(f, filterObj));
+    });
+
+    return platformObj;
+}
+
+function getSources(theme) {
+
+    return theme.buildPath;
+}
+
+function getConfigs(theme) {
+
+    scssConfig.scss.buildPath = theme.outputPath;
+    jsConfig.js.buildPath = theme.outputPath;
+    cssConfig.css.buildPath = theme.outputPath;
+
+    return filterOptions([scssConfig, jsConfig, cssConfig]);
+}
+
+module.exports = (theme) => {
+
+    return {
+        source: [
+            ...getSources(theme)
+        ],
+        platforms: getConfigs(theme)
+    };
+};

package/design-tokens/style-dictionary/configs/js.js

@@ -0,0 +1,9 @@
+module.exports = {
+    js: {
+        transformGroup: 'mc/ts',
+        files: [{
+            destination: 'tokens.ts',
+            format: 'javascript/es6'
+        }]
+    }
+};

package/design-tokens/style-dictionary/configs/scss.js

@@ -0,0 +1,23 @@
+module.exports = {
+    scss: {
+        transformGroup: 'mc/scss',
+        files: [
+            {
+                destination: '_variables.scss',
+                format: 'scss/variables',
+                filter: 'color'
+            },
+            {
+                destination: '_palette.scss',
+                format: 'mc-scss/palette',
+                filter: 'palette'
+            },
+            {
+                destination: '_typography.scss',
+                format: 'mc-scss/typography',
+                mapName: 'mosaic',
+                filter: 'typography'
+            }
+        ]
+    }
+};

package/design-tokens/style-dictionary/filters/color.js

@@ -0,0 +1,7 @@
+module.exports = (StyleDictionary) => {
+
+    StyleDictionary.registerFilter({
+        name: 'color',
+        matcher: (prop) => !prop.attributes.palette && !prop.attributes.typography
+    })
+}

package/design-tokens/style-dictionary/filters/palette.js

@@ -0,0 +1,7 @@
+module.exports = (StyleDictionary) => {
+
+    StyleDictionary.registerFilter({
+        name: 'palette',
+        matcher: (prop) => prop.attributes.palette
+    })
+}

package/design-tokens/style-dictionary/filters/size.js

@@ -0,0 +1,7 @@
+module.exports = (StyleDictionary) => {
+
+    StyleDictionary.registerFilter({
+        name: 'size',
+        matcher: (prop) => prop.attributes.size
+    })
+}

package/design-tokens/style-dictionary/filters/typography.js

@@ -0,0 +1,7 @@
+module.exports = (StyleDictionary) => {
+
+    StyleDictionary.registerFilter({
+        name: 'typography',
+        matcher: (prop) => prop.attributes.typography
+    })
+}

package/design-tokens/style-dictionary/formats/palette.js

@@ -0,0 +1,25 @@
+
+module.exports = (StyleDictionary) => {
+    StyleDictionary.registerFormat({
+        name: 'mc-scss/palette',
+        formatter: function (dictionary) {
+            return dictionary.allProperties
+                .map((prop) => `\$${prop.name}: ${getMapFromObj(prop.value)};\n`)
+                .join('\n');
+        }
+    })
+};
+
+function getMapFromObj(object) {
+    const result = Object.keys(object)
+        .map((key) => {
+            if (key === 'contrast') {
+                return `${key}: ${getMapFromObj(object[key])}`
+            }
+
+            return `${key}: ${object[key].value},\n`
+        })
+        .join('');
+
+    return `(\n${result}\n)`
+}

package/design-tokens/style-dictionary/formats/typography.js

@@ -0,0 +1,52 @@
+module.exports = (StyleDictionary) => {
+
+    StyleDictionary.registerFormat({
+        name: 'mc-scss/typography',
+        formatter: function(dictionary) {
+            let string;
+
+            string = dictionary.allProperties
+                .map((prop) => {
+                    let output = '';
+
+                    const value = prop.attributes.category === 'asset' ? `"${ prop.value }"` : prop.value;
+
+                    output += `$${ prop.name }: ${ value };`
+
+                    if (prop.comment) {
+                        output += ` // ${ prop.comment }`;
+                    }
+
+                    output += '\n';
+
+                    return output;
+                })
+                .join('');
+
+            string += `\n$${this.mapName || 'tokens' }: ${processJsonNode(dictionary.properties, 0)};\n`;
+
+            return string;
+        }
+    })
+};
+
+
+function processJsonNode(obj, depth) {
+    let output = '';
+
+    if (obj.hasOwnProperty('value')) {
+        output += `$${obj.name}`;
+    } else {
+        output += '(\n'
+        output += Object.keys(obj).map((newKey) => {
+            const newProp = obj[newKey];
+            const indent = '  '.repeat(depth+1);
+
+            return `${indent}'${newKey}': ${processJsonNode(newProp, depth + 1)}`;
+        }).join(',\n');
+
+        output += '\n' + '  '.repeat(depth) + ')';
+    }
+
+    return output;
+}

package/design-tokens/style-dictionary/transformGroups/css.js

@@ -0,0 +1,13 @@
+module.exports = (StyleDictionary) => {
+
+    StyleDictionary.registerTransformGroup({
+        name: 'mc/css',
+        transforms: [
+            'attribute/cti',
+            'mc-attribute/size',
+            'name/cti/kebab',
+            'color/css',
+            'mc/prefix'
+        ]
+    });
+};

package/design-tokens/style-dictionary/transformGroups/scss.js

@@ -0,0 +1,12 @@
+module.exports = (StyleDictionary) => {
+
+    StyleDictionary.registerTransformGroup({
+        name: 'mc/scss',
+        transforms: [
+            'attribute/cti',
+            'mc-attribute/palette',
+            'mc-attribute/typography',
+            'name/cti/kebab'
+        ]
+    });
+}

package/design-tokens/style-dictionary/transformGroups/ts.js

@@ -0,0 +1,11 @@
+module.exports = (StyleDictionary) => {
+    StyleDictionary.registerTransformGroup({
+        name: 'mc/ts',
+        transforms: [
+            'attribute/cti',
+            'name/cti/pascal',
+            'size/px',
+            'color/hex'
+        ]
+    });
+}

package/design-tokens/style-dictionary/transforms/attribute/palette.js

@@ -0,0 +1,9 @@
+module.exports = (StyleDictionary) => {
+
+    StyleDictionary.registerTransform({
+        name: 'mc-attribute/palette',
+        type: 'attribute',
+        matcher: (prop) => prop.name === 'palette',
+        transformer: (prop) => ({ palette: true })
+    });
+};

package/design-tokens/style-dictionary/transforms/attribute/prefix.js

@@ -0,0 +1,11 @@
+module.exports = (StyleDictionary) => {
+    StyleDictionary.registerTransform({
+        name: 'mc/prefix',
+        type: 'attribute',
+        transformer: (prop, options) => {
+            const prefix = options.files[0].prefix ? `${options.files[0].prefix}-` : '';
+
+            prop.name = `${prefix}${prop.name}`;
+        }
+    });
+};

package/design-tokens/style-dictionary/transforms/attribute/size.js

@@ -0,0 +1,8 @@
+module.exports = (StyleDictionary) => {
+    StyleDictionary.registerTransform({
+        name: 'mc-attribute/size',
+        type: 'attribute',
+        matcher: (prop) => prop.attributes.type === 'size',
+        transformer: (prop) => ({ size: true })
+    });
+};

package/design-tokens/style-dictionary/transforms/attribute/typography.js

@@ -0,0 +1,9 @@
+module.exports = (StyleDictionary) => {
+
+    StyleDictionary.registerTransform({
+        name: 'mc-attribute/typography',
+        type: 'attribute',
+        matcher: (prop) => prop.attributes.category === 'typography',
+        transformer: (prop) => ({ typography: true })
+    });
+};

package/divider/divider.component.d.ts

@@ -1,11 +1,11 @@
-import * as i0 from "@angular/core";
-export declare class McDivider {
-    get vertical(): boolean;
-    set vertical(value: boolean);
-    private _vertical;
-    get inset(): boolean;
-    set inset(value: boolean);
-    private _inset;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McDivider, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McDivider, "mc-divider", never, { "vertical": "vertical"; "inset": "inset"; }, {}, never, never>;
-}
+import * as i0 from "@angular/core";
+export declare class McDivider {
+    get vertical(): boolean;
+    set vertical(value: boolean);
+    private _vertical;
+    get inset(): boolean;
+    set inset(value: boolean);
+    private _inset;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDivider, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDivider, "mc-divider", never, { "vertical": "vertical"; "inset": "inset"; }, {}, never, never>;
+}

package/divider/divider.module.d.ts

@@ -1,8 +1,8 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./divider.component";
-import * as i2 from "@angular/common";
-export declare class McDividerModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<McDividerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<McDividerModule, [typeof i1.McDivider], [typeof i2.CommonModule], [typeof i1.McDivider]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<McDividerModule>;
-}
+import * as i0 from "@angular/core";
+import * as i1 from "./divider.component";
+import * as i2 from "@angular/common";
+export declare class McDividerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDividerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McDividerModule, [typeof i1.McDivider], [typeof i2.CommonModule], [typeof i1.McDivider]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<McDividerModule>;
+}

package/divider/index.d.ts

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

package/divider/ptsecurity-mosaic-divider.d.ts

@@ -1,5 +1,5 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@ptsecurity/mosaic/divider" />
-export * from './index';
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@ptsecurity/mosaic/divider" />
+export * from './index';

package/divider/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './divider.component';
-export * from './divider.module';
+export * from './divider.component';
+export * from './divider.module';

package/dl/dl.component.d.ts

@@ -1,26 +1,26 @@
-import { AfterContentInit, ElementRef, OnDestroy } from '@angular/core';
-import { Subject } from 'rxjs';
-import * as i0 from "@angular/core";
-export declare class McDlComponent implements AfterContentInit, OnDestroy {
-    protected elementRef: ElementRef;
-    minWidth: number;
-    wide: boolean;
-    vertical: boolean | null;
-    readonly resizeStream: Subject<Event>;
-    private readonly resizeDebounceInterval;
-    private resizeSubscription;
-    constructor(elementRef: ElementRef);
-    ngAfterContentInit(): void;
-    ngOnDestroy(): void;
-    updateState: () => void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McDlComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McDlComponent, "mc-dl", never, { "minWidth": "minWidth"; "wide": "wide"; "vertical": "vertical"; }, {}, never, ["*"]>;
-}
-export declare class McDtComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<McDtComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McDtComponent, "mc-dt", never, {}, {}, never, ["*"]>;
-}
-export declare class McDdComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<McDdComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McDdComponent, "mc-dd", never, {}, {}, never, ["*"]>;
-}
+import { AfterContentInit, ElementRef, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class McDlComponent implements AfterContentInit, OnDestroy {
+    protected elementRef: ElementRef;
+    minWidth: number;
+    wide: boolean;
+    vertical: boolean | null;
+    readonly resizeStream: Subject<Event>;
+    private readonly resizeDebounceInterval;
+    private resizeSubscription;
+    constructor(elementRef: ElementRef);
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    updateState: () => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDlComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDlComponent, "mc-dl", never, { "minWidth": "minWidth"; "wide": "wide"; "vertical": "vertical"; }, {}, never, ["*"]>;
+}
+export declare class McDtComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDtComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDtComponent, "mc-dt", never, {}, {}, never, ["*"]>;
+}
+export declare class McDdComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDdComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDdComponent, "mc-dd", never, {}, {}, never, ["*"]>;
+}

package/dl/dl.module.d.ts

@@ -1,10 +1,10 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./dl.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/a11y";
-import * as i4 from "@angular/cdk/platform";
-export declare class McDlModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<McDlModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<McDlModule, [typeof i1.McDlComponent, typeof i1.McDtComponent, typeof i1.McDdComponent], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.McDlComponent, typeof i1.McDtComponent, typeof i1.McDdComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<McDlModule>;
-}
+import * as i0 from "@angular/core";
+import * as i1 from "./dl.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/cdk/a11y";
+import * as i4 from "@angular/cdk/platform";
+export declare class McDlModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDlModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McDlModule, [typeof i1.McDlComponent, typeof i1.McDtComponent, typeof i1.McDdComponent], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.McDlComponent, typeof i1.McDtComponent, typeof i1.McDdComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<McDlModule>;
+}

package/dl/index.d.ts

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

package/dl/ptsecurity-mosaic-dl.d.ts

@@ -1,5 +1,5 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@ptsecurity/mosaic/dl" />
-export * from './index';
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@ptsecurity/mosaic/dl" />
+export * from './index';

package/dl/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './dl.module';
-export * from './dl.component';
+export * from './dl.module';
+export * from './dl.component';

package/dropdown/dropdown-animations.d.ts

@@ -1,11 +1,11 @@
-import { AnimationTriggerMetadata } from '@angular/animations';
-/**
- * Animations used by the mc-dropdown component.
- * @docs-private
- */
-export declare const mcDropdownAnimations: {
-    readonly transformDropdown: AnimationTriggerMetadata;
-    readonly fadeInItems: AnimationTriggerMetadata;
-};
-export declare const fadeInItems: AnimationTriggerMetadata;
-export declare const transformDropdown: AnimationTriggerMetadata;
+import { AnimationTriggerMetadata } from '@angular/animations';
+/**
+ * Animations used by the mc-dropdown component.
+ * @docs-private
+ */
+export declare const mcDropdownAnimations: {
+    readonly transformDropdown: AnimationTriggerMetadata;
+    readonly fadeInItems: AnimationTriggerMetadata;
+};
+export declare const fadeInItems: AnimationTriggerMetadata;
+export declare const transformDropdown: AnimationTriggerMetadata;

package/dropdown/dropdown-content.directive.d.ts

@@ -1,32 +1,32 @@
-import { TemplateRef, ComponentFactoryResolver, ApplicationRef, Injector, ViewContainerRef, OnDestroy } from '@angular/core';
-import { Subject } from 'rxjs';
-import * as i0 from "@angular/core";
-/**
- * Dropdown content that will be rendered lazily once the dropdown is opened.
- */
-export declare class McDropdownContent implements OnDestroy {
-    private template;
-    private componentFactoryResolver;
-    private appRef;
-    private injector;
-    private viewContainerRef;
-    private document;
-    /** Emits when the dropdown content has been attached. */
-    attached: Subject<void>;
-    private portal;
-    private outlet;
-    constructor(template: TemplateRef<any>, componentFactoryResolver: ComponentFactoryResolver, appRef: ApplicationRef, injector: Injector, viewContainerRef: ViewContainerRef, document: any);
-    /**
-     * Attaches the content with a particular context.
-     * @docs-private
-     */
-    attach(context?: any): void;
-    /**
-     * Detaches the content.
-     * @docs-private
-     */
-    detach(): void;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McDropdownContent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McDropdownContent, "ng-template[mcDropdownContent]", never, {}, {}, never>;
-}
+import { TemplateRef, ComponentFactoryResolver, ApplicationRef, Injector, ViewContainerRef, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * Dropdown content that will be rendered lazily once the dropdown is opened.
+ */
+export declare class McDropdownContent implements OnDestroy {
+    private template;
+    private componentFactoryResolver;
+    private appRef;
+    private injector;
+    private viewContainerRef;
+    private document;
+    /** Emits when the dropdown content has been attached. */
+    attached: Subject<void>;
+    private portal;
+    private outlet;
+    constructor(template: TemplateRef<any>, componentFactoryResolver: ComponentFactoryResolver, appRef: ApplicationRef, injector: Injector, viewContainerRef: ViewContainerRef, document: any);
+    /**
+     * Attaches the content with a particular context.
+     * @docs-private
+     */
+    attach(context?: any): void;
+    /**
+     * Detaches the content.
+     * @docs-private
+     */
+    detach(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDropdownContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McDropdownContent, "ng-template[mcDropdownContent]", never, {}, {}, never>;
+}