@genesislcap/documentation-components 14.345.1 → 14.347.0

package/dist/dts/components/design-system-preview/design-system-preview.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design-system-preview.template.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system-preview/design-system-preview.template.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAc9D,eAAO,MAAM,2BAA2B,0EA6BvC,CAAC"}
+{"version":3,"file":"design-system-preview.template.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system-preview/design-system-preview.template.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAe9D,eAAO,MAAM,2BAA2B,0EAiCvC,CAAC"}

package/dist/dts/components/index.d.ts

@@ -8,4 +8,5 @@ export * from './color-tokens';
 export * from './design-system-preview';
 export * from './preview-form';
 export * from './preview-grid';
+export * from './preview-app';
 //# sourceMappingURL=index.d.ts.map

package/dist/dts/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}

package/dist/dts/components/preview-app/index.d.ts

@@ -0,0 +1,2 @@
+export { PreviewApp } from './preview-app';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/components/preview-app/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/preview-app/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/dts/components/preview-app/preview-app.d.ts

@@ -0,0 +1,36 @@
+import { ActionMenuItem, DropdownMenuItem, Modal } from '@genesislcap/foundation-ui';
+import { Banner, Dialog } from '@genesislcap/foundation-ui';
+import { FASTElement } from '@microsoft/fast-element';
+export declare class PreviewApp extends FASTElement {
+    modal: Modal;
+    dialog: Dialog;
+    banner: Banner;
+    errorDialogContainer: HTMLDivElement;
+    prefix: string;
+    buttonAppearanceAccent: string;
+    buttonAppearanceNeutral: string;
+    buttonAppearanceOutline: string;
+    buttonAppearanceText: string;
+    badgeAppearanceAccent: string;
+    badgeAppearanceNeutral: string;
+    badgeText: string;
+    cards: number[];
+    countries: string[];
+    menuActions: ActionMenuItem[];
+    menuDefinition: {
+        actions: ActionMenuItem[];
+        buttonAppearance: string;
+        data: {
+            name: string;
+        };
+    };
+    dropDownMenuItems: DropdownMenuItem[];
+    provider: HTMLElement;
+    connectedCallback(): void;
+    private handleStyleChanges;
+    private handleDSChanges;
+    showDialog(param: any): void;
+    closeDialog(param: any): void;
+    dismissBanner(): void;
+}
+//# sourceMappingURL=preview-app.d.ts.map

package/dist/dts/components/preview-app/preview-app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-app.d.ts","sourceRoot":"","sources":["../../../../src/components/preview-app/preview-app.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAA4B,WAAW,EAAc,MAAM,yBAAyB,CAAC;AAO5F,qBAKa,UAAW,SAAQ,WAAW;IAElC,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,oBAAoB,EAAE,cAAc,CAAC;IAE/B,MAAM,SAAW;IAClB,sBAAsB,SAAkB;IACxC,uBAAuB,SAAkB;IACzC,uBAAuB,SAAsB;IAC7C,oBAAoB,SAAiB;IACrC,qBAAqB,SAAa;IAClC,sBAAsB,SAAe;IACrC,SAAS,SAAW;IAEpB,KAAK,WAA8C;IACnD,SAAS,WA0BnB;IAEU,WAAW,EAAE,cAAc,EAAE,CAiBvC;IAEU,cAAc;;;;;;MAIxB;IACU,iBAAiB,EAAE,gBAAgB,EAAE,CA4C/C;IAEK,QAAQ,EAAE,WAAW,CAAC;IAE7B,iBAAiB;IAcjB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,eAAe;IAWvB,UAAU,CAAC,KAAK,KAAA;IAIhB,WAAW,CAAC,KAAK,KAAA;IAIjB,aAAa;CAGd"}

package/dist/dts/components/preview-app/preview-app.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const PreviewAppStyles: import("@microsoft/fast-element").ElementStyles;
+//# sourceMappingURL=preview-app.styles.d.ts.map

package/dist/dts/components/preview-app/preview-app.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-app.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/preview-app/preview-app.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAiC5B,CAAC"}

package/dist/dts/components/preview-app/preview-app.template.d.ts

@@ -0,0 +1,4 @@
+import { PreviewApp } from './preview-app';
+export declare const previewAppTemplate: (prefix: string) => import("@microsoft/fast-element").ViewTemplate<PreviewApp, any>;
+export declare const PreviewAppTemplate: import("@microsoft/fast-element").ViewTemplate<PreviewApp, any>;
+//# sourceMappingURL=preview-app.template.d.ts.map

package/dist/dts/components/preview-app/preview-app.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-app.template.d.ts","sourceRoot":"","sources":["../../../../src/components/preview-app/preview-app.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,oEAmBhD,CAAC;AACF,eAAO,MAAM,kBAAkB,iEAE9B,CAAC"}

package/dist/dts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAwBA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AA2BA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/esm/components/design-system-preview/design-system-preview.template.js

@@ -3,6 +3,7 @@ import { html } from '@microsoft/fast-element';
 import { ColorPalette } from '../color-palette';
 import { ColorToken } from '../color-token';
 import { ColorTokens } from '../color-tokens';
+import { PreviewApp } from '../preview-app';
 import { PreviewComponents } from '../preview-components';
 import { PreviewForm } from '../preview-form';
 import { PreviewGrid } from '../preview-grid';
@@ -18,6 +19,7 @@ TypographyTokens;
 FoundationForms;
 PreviewForm;
 PreviewGrid;
+PreviewApp;
 export const DesignSystemPreviewTemplate = html `
   <template>
     <rapid-tabs>
@@ -26,6 +28,7 @@ export const DesignSystemPreviewTemplate = html `
       <rapid-tab slot="tab">Colors</rapid-tab>
       <rapid-tab slot="tab">Form</rapid-tab>
       <rapid-tab slot="tab">Grid</rapid-tab>
+      <rapid-tab slot="tab">Sample App</rapid-tab>
       <rapid-tab-panel slot="tabpanel">
         <preview-components></preview-components>
       </rapid-tab-panel>
@@ -45,6 +48,9 @@ export const DesignSystemPreviewTemplate = html `
       <rapid-tab-panel slot="tabpanel">
         <preview-grid></preview-grid>
       </rapid-tab-panel>
+      <rapid-tab-panel slot="tabpanel">
+        <preview-app></preview-app>
+      </rapid-tab-panel>
     </rapid-tabs>
   </template>
 `;

package/dist/esm/components/index.js

@@ -8,3 +8,4 @@ export * from './color-tokens';
 export * from './design-system-preview';
 export * from './preview-form';
 export * from './preview-grid';
+export * from './preview-app';

package/dist/esm/components/preview-app/index.js

@@ -0,0 +1 @@
+export { PreviewApp } from './preview-app';

package/dist/esm/components/preview-app/preview-app.js

@@ -0,0 +1,209 @@
+import { __decorate } from "tslib";
+import { bodyFont } from '@microsoft/fast-components';
+import { attr, customElement, DOM, FASTElement, observable } from '@microsoft/fast-element';
+import { defaultBodyFont, EventName } from '../../types';
+import { logger } from '../../utils';
+import { applyStyleChanges } from '../../utils/utils';
+import { PreviewAppStyles as styles } from './preview-app.styles';
+import { PreviewAppTemplate as template } from './preview-app.template';
+let PreviewApp = class PreviewApp extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.prefix = 'rapid';
+        this.buttonAppearanceAccent = 'primary-blue';
+        this.buttonAppearanceNeutral = 'primary-grey';
+        this.buttonAppearanceOutline = 'primary-gradient';
+        this.buttonAppearanceText = 'lightweight';
+        this.badgeAppearanceAccent = 'primary';
+        this.badgeAppearanceNeutral = 'secondary';
+        this.badgeText = 'white';
+        this.cards = Array.from({ length: 8 }, (_, i) => i + 1);
+        this.countries = [
+            'Afghanistan',
+            'Aland Islands',
+            'Albania',
+            'Algeria',
+            'American Samoa',
+            'Andorra',
+            'Angola',
+            'Aruba',
+            'Australia',
+            'Austria',
+            'Azerbaijan',
+            'Bahamas',
+            'Bahrain',
+            'Bangladesh',
+            'Barbados',
+            'Belarus',
+            'Belgium',
+            'Belize',
+            'Benin',
+            'Bhutan',
+            'Bolivia',
+            'Bonaire, Sint Eustatius and Saba',
+            'Cambodia',
+            'Cameroon',
+            'Canada',
+        ];
+        this.menuActions = [
+            {
+                name: 'View',
+                callback: (rowData) => logger.debug('VIEWW!!!', rowData),
+            },
+            {
+                name: 'Delete',
+                callback: (rowData) => logger.debug('DELETE!!!', rowData),
+            },
+            {
+                name: 'Edit',
+                callback: (rowData) => logger.debug('EDIT!!!', rowData),
+            },
+            {
+                name: 'Wait',
+                callback: (rowData) => logger.debug('WAIT???', rowData),
+            },
+        ];
+        this.menuDefinition = {
+            actions: this.menuActions,
+            buttonAppearance: 'stealth',
+            data: { name: 'test' },
+        };
+        this.dropDownMenuItems = [
+            {
+                name: 'Menu item 1',
+                callback: () => alert('Menu item 1 clicked'),
+                icon: {
+                    name: 'glasses',
+                },
+            },
+            {
+                name: 'Menu item 2',
+                callback: () => alert('Menu item 2 clicked'),
+            },
+            {
+                name: 'Menu item 3',
+                callback: () => alert('Menu item 3 clicked'),
+                submenu: [
+                    {
+                        name: 'Menu item 5',
+                        callback: () => alert('Menu item 5 clicked'),
+                        icon: {
+                            name: 'address-card',
+                        },
+                    },
+                    {
+                        name: 'Menu item 6',
+                        callback: () => alert('Menu item 6 clicked'),
+                        submenu: [
+                            {
+                                name: 'Menu item 7',
+                                callback: () => alert('Menu item 7 clicked'),
+                                color: 'red',
+                                icon: {
+                                    name: 'address-card',
+                                },
+                            },
+                            {
+                                name: 'Menu item 8',
+                                callback: () => alert('Menu item 8 clicked'),
+                                isDisabled: () => true,
+                            },
+                        ],
+                    },
+                ],
+            },
+        ];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.body.addEventListener(EventName.STYLES_CHANGED, (e) => {
+            this.handleStyleChanges(e);
+        });
+        document.body.addEventListener(EventName.DS_CHANGED, (e) => {
+            this.handleDSChanges(e);
+        });
+        DOM.queueUpdate(() => {
+            bodyFont.withDefault(defaultBodyFont);
+        });
+    }
+    handleStyleChanges(e) {
+        const detail = e.detail;
+        if (detail) {
+            DOM.queueUpdate(() => {
+                applyStyleChanges(detail, this.provider);
+            });
+        }
+    }
+    handleDSChanges(event) {
+        this.prefix = event.detail.prefix;
+        this.buttonAppearanceAccent = event.detail.buttonAppearanceAccent;
+        this.buttonAppearanceNeutral = event.detail.buttonAppearanceNeutral;
+        this.buttonAppearanceOutline = event.detail.buttonAppearanceOutline;
+        this.buttonAppearanceText = event.detail.buttonAppearanceText;
+        this.badgeAppearanceAccent = event.detail.badgeAppearanceAccent;
+        this.badgeAppearanceNeutral = event.detail.badgeAppearanceNeutral;
+        this.badgeText = event.detail.badgeText;
+    }
+    showDialog(param) {
+        this[param].show();
+    }
+    closeDialog(param) {
+        this[param].close();
+    }
+    dismissBanner() {
+        this.banner.dismiss();
+    }
+};
+__decorate([
+    observable
+], PreviewApp.prototype, "modal", void 0);
+__decorate([
+    attr
+], PreviewApp.prototype, "prefix", void 0);
+__decorate([
+    observable
+], PreviewApp.prototype, "buttonAppearanceAccent", void 0);
+__decorate([
+    observable
+], PreviewApp.prototype, "buttonAppearanceNeutral", void 0);
+__decorate([
+    observable
+], PreviewApp.prototype, "buttonAppearanceOutline", void 0);
+__decorate([
+    observable
+], PreviewApp.prototype, "buttonAppearanceText", void 0);
+__decorate([
+    observable
+], PreviewApp.prototype, "badgeAppearanceAccent", void 0);
+__decorate([
+    observable
+], PreviewApp.prototype, "badgeAppearanceNeutral", void 0);
+__decorate([
+    observable
+], PreviewApp.prototype, "badgeText", void 0);
+__decorate([
+    observable
+], PreviewApp.prototype, "cards", void 0);
+__decorate([
+    observable
+], PreviewApp.prototype, "countries", void 0);
+__decorate([
+    observable
+], PreviewApp.prototype, "menuActions", void 0);
+__decorate([
+    observable
+], PreviewApp.prototype, "menuDefinition", void 0);
+__decorate([
+    observable
+], PreviewApp.prototype, "dropDownMenuItems", void 0);
+__decorate([
+    observable
+], PreviewApp.prototype, "provider", void 0);
+PreviewApp = __decorate([
+    customElement({
+        name: 'preview-app',
+        template,
+        styles,
+    })
+], PreviewApp);
+export { PreviewApp };

package/dist/esm/components/preview-app/preview-app.styles.js

@@ -0,0 +1,35 @@
+import { css } from '@microsoft/fast-element';
+export const PreviewAppStyles = css `
+  :host {
+    --badge-fill-primary: var(--accent-fill-rest);
+    --badge-fill-neutral: var(--neutral-fill-rest);
+
+    background: var(--fill-color);
+    color: var(--neutral-foreground-rest);
+    flex-direction: column;
+    flex: 1;
+    font-family: var(--body-font);
+  }
+
+  .app-container {
+    display: grid;
+    background: var(--fill-color);
+    grid-template-columns: 3fr 1fr;
+    grid-template-rows: repeat(2, 1fr);
+    grid-gap: 12px;
+    height: calc(100% - 24px);
+    padding: 12px;
+
+    .div1 {
+      grid-area: 1 / 1 / 2 / 2;
+    }
+
+    .div2 {
+      grid-area: 2 / 1 / 3 / 2;
+    }
+
+    .div3 {
+      grid-area: 1 / 2 / 3 / 3;
+    }
+  }
+`;

package/dist/esm/components/preview-app/preview-app.template.js

@@ -0,0 +1,24 @@
+import { html, ref } from '@microsoft/fast-element';
+export const previewAppTemplate = (prefix) => html `
+  <template>
+    <${prefix}-design-system-provider ${ref('provider')}>
+      <rapid-layout>
+        <rapid-layout-region>
+          <rapid-layout-region type="vertical">
+            <rapid-layout-item title="Button">
+              <preview-grid></preview-grid>
+            </rapid-layout-item>
+            <rapid-layout-item title="Checkbox">
+            </rapid-layout-item>
+          </rapid-layout-region>
+          <rapid-layout-item title="Text">
+            <preview-grid></preview-grid>
+          </rapid-layout-item>
+        </rapid-layout-region>
+      </rapid-layout>
+    </${prefix}-design-system-provider>
+  </template>
+`;
+export const PreviewAppTemplate = html `
+  ${(x) => previewAppTemplate(x.prefix)}
+`;

package/dist/esm/components/preview-grid/preview-grid.template.js

@@ -5,10 +5,10 @@ export const previewGrid = (prefix) => html `
       <div class="grid-height">
         <${prefix}-grid-pro 
           ${ref('grid')}
-          rowHeight="45"
-          headerHeight="45"
+          rowHeight="36"
+          headerHeight="36"
           singleClickEdit="true"
-          persist-column-state-key="zero-grid-pro-state"
+          persist-column-state-key="${prefix}-grid-pro-state"
         >
         ${repeat((x) => x.multipleCustomFoundationColumnConfigs, html `
             <grid-pro-column :definition=${(x) => x}>

package/dist/esm/index.js

@@ -1,13 +1,15 @@
 import { Form as FoundationForms } from '@genesislcap/foundation-forms';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
 import { provideDesignSystem as provideZeroDesignSystem, baseComponents as zeroBaseComponents, } from '@genesislcap/foundation-zero';
 import { zeroGridComponents } from '@genesislcap/foundation-zero-grid-pro';
 import { provideDesignSystem as provideRapidDesignSystem, baseComponents as rapidBaseComponents, } from '@genesislcap/rapid-design-system';
 import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
-import { DesignSystemEditor, ColorPalette, PreviewComponents, ColorToken, ColorTokens, TypographyTokens, DesignSystemExport, DesignSystemPreview, PreviewForm, PreviewGrid, } from './components';
+import { DesignSystemEditor, ColorPalette, PreviewComponents, ColorToken, ColorTokens, TypographyTokens, DesignSystemExport, DesignSystemPreview, PreviewForm, PreviewGrid, PreviewApp, } from './components';
 export * from './components';
 export * from './types';
 provideZeroDesignSystem().register(zeroBaseComponents, zeroGridComponents);
-provideRapidDesignSystem().register(rapidBaseComponents, rapidGridComponents);
+provideRapidDesignSystem().register(rapidBaseComponents, rapidGridComponents, foundationLayoutComponents);
 DesignSystemEditor;
 PreviewComponents;
 DesignSystemExport;
@@ -19,3 +21,4 @@ DesignSystemPreview;
 FoundationForms;
 PreviewForm;
 PreviewGrid;
+PreviewApp;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/documentation-components",
   "description": "Genesis Foundation Dcoumentation Components",
-  "version": "14.345.1",
+  "version": "14.347.0",
   "sideEffects": [
     "*.css"
   ],
@@ -23,24 +23,24 @@
     "clean": "rimraf dist temp tsconfig.tsbuildinfo"
   },
   "devDependencies": {
-    "@genesislcap/genx": "14.345.1",
-    "@genesislcap/rollup-builder": "14.345.1",
-    "@genesislcap/ts-builder": "14.345.1",
-    "@genesislcap/uvu-playwright-builder": "14.345.1",
-    "@genesislcap/vite-builder": "14.345.1",
-    "@genesislcap/webpack-builder": "14.345.1"
+    "@genesislcap/genx": "14.347.0",
+    "@genesislcap/rollup-builder": "14.347.0",
+    "@genesislcap/ts-builder": "14.347.0",
+    "@genesislcap/uvu-playwright-builder": "14.347.0",
+    "@genesislcap/vite-builder": "14.347.0",
+    "@genesislcap/webpack-builder": "14.347.0"
   },
   "dependencies": {
     "@ag-grid-community/core": "29.2.0",
-    "@genesislcap/foundation-forms": "14.345.1",
-    "@genesislcap/foundation-logger": "14.345.1",
-    "@genesislcap/foundation-ui": "14.345.1",
-    "@genesislcap/foundation-utils": "14.345.1",
-    "@genesislcap/foundation-zero": "14.345.1",
-    "@genesislcap/foundation-zero-grid-pro": "14.345.1",
-    "@genesislcap/grid-pro": "14.345.1",
-    "@genesislcap/rapid-design-system": "14.345.1",
-    "@genesislcap/rapid-grid-pro": "14.345.1",
+    "@genesislcap/foundation-forms": "14.347.0",
+    "@genesislcap/foundation-logger": "14.347.0",
+    "@genesislcap/foundation-ui": "14.347.0",
+    "@genesislcap/foundation-utils": "14.347.0",
+    "@genesislcap/foundation-zero": "14.347.0",
+    "@genesislcap/foundation-zero-grid-pro": "14.347.0",
+    "@genesislcap/grid-pro": "14.347.0",
+    "@genesislcap/rapid-design-system": "14.347.0",
+    "@genesislcap/rapid-grid-pro": "14.347.0",
     "@jsonforms/core": "^3.2.1",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
@@ -56,5 +56,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6fe2b3549762f27ea710ee27fdf7b10a0d4ecfce"
+  "gitHead": "1867b0173e7ffe32db40d75b1cfb19bb81e8edca"
 }