@genesislcap/foundation-zero 14.240.0 → 14.241.0

package/dist/esm/combobox/combobox.stories.js

@@ -1,53 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Combobox',
-    component: 'zero-combobox',
-};
-export default meta;
-const wrapperStyle = 'height: 500px; width: 100%; display: flex; justify-content: center; align-items: center;';
-const renderOption = (option) => html `
-  <zero-option value="${option.value}">${option.text}</zero-option>
-`;
-const OptionsMapperTemplate = {
-    render: ({ options, position }) => html `
-    <div style="${wrapperStyle}">
-      <div style="display: flex">
-        Combobox
-        <zero-combobox position="${position}">${options.map(renderOption)}</zero-combobox>
-      </div>
-      <div style="display: flex">
-        Case-Sensitive Combobox
-        <zero-combobox position="${position}" case-sensitive>
-          ${options.map(renderOption)}
-        </zero-combobox>
-      </div>
-      <div style="display: flex">
-        Combobox with Ignore Input Click
-        <zero-combobox position="${position}" ignore-input-click>
-          ${options.map(renderOption)}
-        </zero-combobox>
-      </div>
-    </div>
-  `,
-};
-const optionsData = [
-    { text: 'Zero Option 1', value: 1 },
-    { text: 'Zero Option 2', value: 2 },
-    { text: 'Zero Option 3', value: 3 },
-    { text: 'Zero Option 4', value: 4 },
-    { text: 'Zero Option 5', value: 5 },
-    { text: 'ABC', value: 'ABC' },
-    { text: 'GBp', value: 'GBp' },
-    { text: 'GBP', value: 'GBP' },
-    { text: 'GbP', value: 'GbP' },
-    { text: 'USD', value: 'USD' },
-];
-export const Primary = Object.assign(Object.assign({}, OptionsMapperTemplate), { argTypes: {
-        position: {
-            control: 'select',
-            options: ['above', 'below'],
-        },
-    }, args: {
-        options: optionsData,
-        position: 'below',
-    } });

package/dist/esm/connection-indicator/connection-indicator.stories.js

@@ -1,14 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Connection Indicator',
-    component: 'zero-connection-indicator',
-};
-export default meta;
-export const Primary = {
-    args: {
-        showLabel: true,
-    },
-    render: ({ showLabel }) => html `
-    <zero-connection-indicator show-label="${showLabel}"></zero-connection-indicator>
-  `,
-};

package/dist/esm/data-grid/data-grid.stories.js

@@ -1,46 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Data Grid',
-    component: 'zero-data-grid',
-};
-export default meta;
-const loadData = (rows) => {
-    const zeroDataGrid = document.querySelector('zero-data-grid');
-    zeroDataGrid.rowsData = rows;
-};
-const clearData = () => {
-    const zeroDataGrid = document.querySelector('zero-data-grid');
-    zeroDataGrid.rowsData = [];
-};
-const rowsData = [
-    { make: 'Toyota', model: 'Celica', price: 35000, creationDate: 1617624494293, isCool: true },
-    { make: 'Ford', model: 'Mondeo', price: 32000, creationDate: 1617624494295, isCool: false },
-    { make: 'Porsche', model: 'Boxter', price: 72000, creationDate: 1619637452397, isCool: false },
-    { make: 'Audi', model: 'A6', price: 80000, creationDate: 1617624494293, isCool: true },
-    { make: 'Renault', model: 'Clio', price: 20000, creationDate: 1617624494295, isCool: true },
-    { make: 'Chevrolet', model: 'Camaro', price: 40000, creationDate: 1619637452397, isCool: false },
-    { make: 'BMW', model: 'Z8', price: 90000, creationDate: 1617624494293, isCool: false },
-    { make: 'Suzuki', model: 'Jimny', price: 23000, creationDate: 1617624494295, isCool: false },
-    { make: 'Toyota', model: 'Celica', price: 35000, creationDate: 1619637452397, isCool: true },
-    { make: 'Ford', model: 'Mondeo', price: 32000, creationDate: 1617624494293, isCool: false },
-    { make: 'Porsche', model: 'Boxter', price: 72000, creationDate: 1617624494295, isCool: true },
-    { make: 'Audi', model: 'A6', price: 80000, creationDate: 1619637452397, isCool: false },
-    { make: 'Renault', model: 'Clio', price: 20000, creationDate: 1617624494293, isCool: false },
-    { make: 'Chevrolet', model: 'Camaro', price: 40000, creationDate: 1617624494295, isCool: true },
-    { make: 'BMW', model: 'Z8', price: 90000, creationDate: 1619637452397, isCool: true },
-    { make: 'Suzuki', model: 'Jimny', price: 23000, creationDate: 1617624494293, isCool: true },
-];
-export const Primary = {
-    args: {
-        dataGridRowsData: rowsData,
-    },
-    render: ({ dataGridRowsData }) => html `
-    <div>
-      <div>
-        <zero-button @click="${() => loadData(dataGridRowsData)}">Load Data</zero-button>
-        <zero-button @click="${() => clearData()}">Clear Data</zero-button>
-      </div>
-      <zero-data-grid></zero-data-grid>
-    </div>
-  `,
-};

package/dist/esm/date-picker/date-picker.stories.js

@@ -1,27 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Date Picker',
-    component: 'zero-date-picker',
-};
-export default meta;
-const wrapperStyle = 'display: flex; flex-direction: row; justify-content: center; width: 100%; height: 500px;';
-export const Primary = {
-    args: {
-        firstDataPickerValue: '01-01-2021',
-        secondDatePickerFormat: 'MMMM/DD/YY',
-        thirdDatePickerFormat: 'MMM/ddd/YYYY',
-        thirdDatePickerValue: '01-01-2023',
-    },
-    render: ({ firstDataPickerValue, secondDatePickerFormat, thirdDatePickerFormat, thirdDatePickerValue, }) => html `
-    <div style="${wrapperStyle}">
-      <div>
-        <zero-date-picker value="${firstDataPickerValue}"></zero-date-picker>
-        <zero-date-picker format="${secondDatePickerFormat}"></zero-date-picker>
-        <zero-date-picker
-          format="${thirdDatePickerFormat}"
-          value="${thirdDatePickerValue}"
-        ></zero-date-picker>
-      </div>
-    </div>
-  `,
-};

package/dist/esm/dialog/dialog.stories.js

@@ -1,86 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Dialog',
-    component: 'zero-dialog',
-};
-export default meta;
-const showDialog = (e) => {
-    const dialog = document.querySelector('zero-dialog');
-    dialog.show();
-};
-const showEmptyDialog = (e) => {
-    const dialog = document.getElementById('empty-dialog');
-    dialog.show();
-};
-const closeDialog = (e) => {
-    const dialog = document.querySelector('zero-dialog');
-    dialog.close();
-};
-const dialogNotifyId = 'dialogNotify';
-const showDialogNotify = (notifyText, dialogType) => {
-    const dialogNotify = document.createElement('zero-dialog');
-    dialogNotify.setAttribute('id', dialogNotifyId);
-    dialogNotify.type = dialogType;
-    dialogNotify.notification = {
-        title: 'Notify Title',
-        body: `${notifyText} ID - notify - ${Math.random()}`,
-        config: {
-            dialog: {
-                confirmingActions: [
-                    {
-                        label: 'Action',
-                        action: () => {
-                            alert('Action in progress');
-                        },
-                    },
-                ],
-            },
-        },
-    };
-    const container = document.getElementById('dialog-container');
-    container.appendChild(dialogNotify);
-    dialogNotify.show();
-};
-export const Primary = {
-    argTypes: {
-        dialogType: {
-            control: 'select',
-            options: ['default', 'error', 'success'],
-        },
-    },
-    args: {
-        notifyText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet',
-        dialogMaxWidth: '557px',
-        dialogTitle: 'Dialog title',
-        dialogInitialText: 'Some text in a Zero Dialog',
-        dialogMainText: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis similique iste ab sed
-      voluptatem ut suscipit tenetur distinctio? Quo est debitis pariatur qui quisquam repudiandae
-      at atque et quibusdam rerum, reprehenderit sed laborum officiis distinctio dolorum
-      temporibus aperiam dolor consequatur perferendis aspernatur fugit repellendus asperiores,
-      voluptas illo? Voluptatum, atque quidem?`,
-        dialogCloseButtonText: 'Close this dialog',
-        dialogType: 'default',
-    },
-    render: ({ notifyText, dialogMaxWidth, dialogTitle, dialogInitialText, dialogMainText, dialogCloseButtonText, dialogType, }) => {
-        var _a;
-        (_a = document.getElementById(dialogNotifyId)) === null || _a === void 0 ? void 0 : _a.remove();
-        return html `
-      <zero-button @click="${showDialog}">Show Zero Dialog</zero-button>
-      <zero-button @click="${showEmptyDialog}">Show Empty Dialog</zero-button>
-      <zero-button @click="${() => showDialogNotify(notifyText, dialogType)}">
-        Show Zero Dialog - Notification Structure ${dialogType}
-      </zero-button>
-      <div id="dialog-container"></div>
-      <zero-dialog style="--dialog-max-width: ${dialogMaxWidth};" type=${dialogType}>
-        <h5 slot="top">${dialogTitle}</h5>
-        <p>${dialogInitialText}</p>
-        <p>${dialogMainText}</p>
-        <zero-divider slot="bottom"></zero-divider>
-        <zero-button appearance="primary-gradient" slot="bottom" @click="${closeDialog}">
-          ${dialogCloseButtonText}
-        </zero-button>
-      </zero-dialog>
-      <zero-dialog id="empty-dialog"></zero-dialog>
-    `;
-    },
-};

package/dist/esm/disclosure/disclosure.stories.js

@@ -1,31 +0,0 @@
-import { html } from 'lit-html';
-import { FastAppearanceValues } from '../_common/colors';
-const meta = {
-    title: 'Disclosure',
-    component: 'zero-disclosure',
-};
-export default meta;
-export const Primary = {
-    argTypes: {
-        fastAppearance: {
-            control: 'select',
-            options: FastAppearanceValues,
-        },
-    },
-    args: {
-        disclosureTitle: 'Open Disclosure',
-        disclosureText: `Created by writer Gardner Fox and artist Harry Lampert, the original Flashfirst appeared
-    in Flash Comics #1 (cover date January 1940/release monthNovember 1939). Nicknamed the
-    "Scarlet Speedster", all incarnations of theFlash possess "super speed", which includes
-    the ability to run, move, andthink extremely fast, use superhuman reflexes, and seemingly
-    violatecertain laws of physics.`,
-        disclosureEndSlot: '⚡️',
-        fastAppearance: 'lightweight',
-    },
-    render: ({ fastAppearance, disclosureTitle, disclosureText, disclosureEndSlot }) => html `
-    <zero-disclosure appearance="${fastAppearance}" title="${disclosureTitle}">
-      <span slot="end">${disclosureEndSlot}</span>
-      <div>${disclosureText}</div>
-    </zero-disclosure>
-  `,
-};

package/dist/esm/divider/divider.stories.js

@@ -1,33 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Divider',
-    component: 'zero-divider',
-};
-export default meta;
-export const Primary = {
-    argTypes: {
-        orientation: {
-            control: 'select',
-            options: ['horizontal', 'vertical'],
-        },
-        role: {
-            control: 'select',
-            options: ['separator', 'presentation'],
-        },
-    },
-    args: {
-        orientation: 'horizontal',
-        role: 'separator',
-    },
-    render: ({ orientation, role }) => html `
-    <div
-      style="display: flex; justify-content:center; width: 100%; ${orientation === 'vertical'
-        ? 'flex-direction: row;'
-        : 'flex-direction: column;'}"
-    >
-      <zero-button style="flex: 1;"></zero-button>
-      <zero-divider orientation="${orientation}" role="${role}"></zero-divider>
-      <zero-button style="flex: 1;"></zero-button>
-    </div>
-  `,
-};

package/dist/esm/dropdown-menu/dropdown-menu.stories.js

@@ -1,68 +0,0 @@
-import { html } from 'lit-html';
-import { logger } from '../utils/logger';
-const meta = {
-    title: 'Dropdown Menu',
-    component: 'zero-dropdown-menu',
-};
-export default meta;
-const zeroItems = [
-    {
-        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,
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        name: 'Menu item 4',
-        callback: () => logger.debug('Menu item 4 clicked'),
-        isDisabled: () => true,
-    },
-];
-export const Primary = {
-    args: {
-        items: zeroItems,
-        dropdownOpenerText: 'Dropdown menu',
-    },
-    render: ({ dropdownOpenerText, items }) => html `
-    <div>
-      <zero-dropdown-menu name="${dropdownOpenerText}" .items=${items}></zero-dropdown-menu>
-    </div>
-  `,
-};

package/dist/esm/error-banner/error-banner.stories.js

@@ -1,70 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Error Banner',
-    component: 'zero-error-banner',
-};
-export default meta;
-const showError = (errorText) => {
-    var _a;
-    let errorBanner = document.querySelector('#js-error-banner');
-    if (!errorBanner) {
-        errorBanner = document.createElement('zero-error-banner');
-        errorBanner.id = 'js-error-banner';
-        (_a = document.querySelector('#zero-banner')) === null || _a === void 0 ? void 0 : _a.appendChild(errorBanner);
-    }
-    errorBanner.error = {
-        title: 'Error Title',
-        errorDetails: `${errorText} ID - ${Math.random()}`,
-        config: {
-            banner: {
-                confirmingActions: [
-                    {
-                        label: 'Action',
-                        action: () => {
-                            alert('Action in progress');
-                        },
-                    },
-                ],
-            },
-        },
-    };
-};
-const showNotify = (notifyText) => {
-    var _a;
-    let errorBanner = document.querySelector('#js-error-banner');
-    if (!errorBanner) {
-        errorBanner = document.createElement('zero-error-banner');
-        errorBanner.id = 'js-error-banner';
-        (_a = document.querySelector('#zero-banner')) === null || _a === void 0 ? void 0 : _a.appendChild(errorBanner);
-    }
-    errorBanner.notification = {
-        title: 'Notify Title',
-        body: `${notifyText} ID - notify - ${Math.random()}`,
-        config: {
-            banner: {
-                confirmingActions: [
-                    {
-                        label: 'Action',
-                        action: () => {
-                            alert('Action in progress');
-                        },
-                    },
-                ],
-            },
-        },
-    };
-};
-export const Primary = {
-    args: {
-        errorText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
-        notifyText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
-    },
-    render: ({ errorText, notifyText }) => html `
-    <div id="zero-banner" style="width: 100%;">
-      <zero-button @click="${() => showError(errorText)}">Show Zero Error Banner</zero-button>
-      <zero-button @click="${() => showNotify(notifyText)}">
-        Show Zero Error Banner - Notification
-      </zero-button>
-    </div>
-  `,
-};

package/dist/esm/error-dialog/error-dialog.stories.js

@@ -1,63 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Error Dialog',
-    component: 'zero-error-dialog',
-};
-export default meta;
-const showDialog = (errorText) => {
-    const dialog = document.createElement('zero-error-dialog');
-    const container = document.getElementById('error-dialog-container');
-    container.appendChild(dialog);
-    dialog.error = {
-        title: 'Error Title',
-        errorDetails: `${errorText} ID - ${Math.random()}`,
-        config: {
-            dialog: {
-                confirmingActions: [
-                    {
-                        label: 'Action',
-                        action: () => {
-                            alert('Action in progress');
-                        },
-                    },
-                ],
-            },
-        },
-    };
-    dialog.show();
-};
-const showDialogNotify = (notifyText) => {
-    const dialog = document.createElement('zero-error-dialog');
-    const container = document.getElementById('error-dialog-container');
-    container.appendChild(dialog);
-    dialog.notification = {
-        title: 'Notify Title',
-        body: `${notifyText} ID - notify - ${Math.random()}`,
-        config: {
-            dialog: {
-                confirmingActions: [
-                    {
-                        label: 'Action',
-                        action: () => {
-                            alert('Action in progress');
-                        },
-                    },
-                ],
-            },
-        },
-    };
-    dialog.show();
-};
-export const Primary = {
-    args: {
-        errorText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet',
-        notifyText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet',
-    },
-    render: ({ errorText, notifyText }) => html `
-    <zero-button @click="${() => showDialog(errorText)}">Show Zero Dialog</zero-button>
-    <zero-button @click="${() => showDialogNotify(notifyText)}">
-      Show Zero Dialog - Notification
-    </zero-button>
-    <div id="error-dialog-container"></div>
-  `,
-};

package/dist/esm/file-upload/file-upload.stories.js

@@ -1,13 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'File Upload',
-    component: 'zero-file-upload',
-};
-export default meta;
-export const Primary = {
-    render: () => html `
-    <div style="min-height: 300px;">
-      <zero-file-upload label="Select Files"></zero-file-upload>
-    </div>
-  `,
-};

package/dist/esm/filter/filter.stories.js

@@ -1,17 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Filter',
-    component: 'zero-filter',
-};
-export default meta;
-const wrapperStyle = 'display: flex;min-height:300px;';
-export const Primary = {
-    render: () => html `
-    <div style="${wrapperStyle}">
-      <zero-filter type="text" fieldName="SOME_TEXT_FIELD"></zero-filter>
-      <zero-filter type="boolean" fieldName="SOME_BOOLEAN_FIELD"></zero-filter>
-      <zero-filter type="date" fieldName="SOME_DATE_FIELD"></zero-filter>
-      <zero-filter type="number" fieldName="SOME_NUMERIC_FIELD"></zero-filter>
-    </div>
-  `,
-};

package/dist/esm/filter-bar/filter-bar.stories.js

@@ -1,14 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Filter Bar',
-    component: 'zero-filter-bar',
-};
-export default meta;
-export const Primary = {
-    render: () => html `
-    <zero-filter-bar
-      resource="ALL_PROCESSES_STATUS"
-      only="PROCESS_PORT, START_TIME, PROCESS_NAME, DATADUMP"
-    ></zero-filter-bar>
-  `,
-};

package/dist/esm/flex-layout/flex-layout.stories.js

@@ -1,81 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Flex Layout',
-    component: 'zero-flex-layout',
-    parameters: {
-        controls: { hideNoControlsWarning: true },
-    },
-};
-export default meta;
-const wrapperStyle = 'display: flex; flex-direction: column; flex: 1; padding: 10px; justify-content: space-between; height: 1500px;';
-export const Primary = {
-    render: () => html `
-    <div style="${wrapperStyle}">
-      <zero-card style="height: 200px; width: 100%;">
-        <zero-flex-layout class="flex-column flex-wrap spacing-2x justify-end">
-          <div style="width: 30%; height: 40%; background-color: red;"></div>
-          <div style="width: 30%; height: 50%; background-color: green;"></div>
-        </zero-flex-layout>
-      </zero-card>
-
-      <zero-card style="height: 200px; width: 100%;">
-        <zero-flex-layout class="flex-row spacing-2x">
-          <div style="width: 30%; background-color: red;"></div>
-          <div style="width: 70%; background-color: green;"></div>
-        </zero-flex-layout>
-      </zero-card>
-
-      <zero-card style="height: 200px; width: 100%;">
-        <zero-flex-layout class="flex-row spacing-2x">
-          <div style="width: 20%; background-color: red;"></div>
-          <div style="width: 60%; background-color: green;"></div>
-          <div style="width: 20%; background-color: blue;"></div>
-        </zero-flex-layout>
-      </zero-card>
-
-      <zero-card style="height: 200px; width: 100%;">
-        <zero-flex-layout class="flex-row spacing-2x">
-          <div style="width: 30%; height: 100%; background-color: red;"></div>
-          <zero-flex-layout class="flex-column spacing-2x">
-            <div style="height: 60%; width: 100%; background-color: blue;"></div>
-            <div style="height: 40%; width: 100%; background-color: green;"></div>
-          </zero-flex-layout>
-        </zero-flex-layout>
-      </zero-card>
-
-      <zero-card style="height: 200px; width: 100%;">
-        <zero-flex-layout class="flex-column spacing-2x">
-          <div style="height: 100%; width: 100%; background-color: blue;"></div>
-          <zero-flex-layout class="flex-row spacing-2x">
-            <div style="width: 80%; background-color: green;"></div>
-            <div style="width: 20%; background-color: blue;"></div>
-          </zero-flex-layout>
-        </zero-flex-layout>
-      </zero-card>
-
-      <zero-card style="height: 200px; width: 100%;">
-        <zero-flex-layout class="flex-column spacing-2x">
-          <div style="height: 20%; width: 100%; background-color: blue;"></div>
-          <zero-flex-layout class="flex-row spacing-2x">
-            <div style="width: 20%; background-color: green;"></div>
-            <div style="width: 80%; background-color: blue;"></div>
-          </zero-flex-layout>
-          <div style="width: 100%; height: 20%; background-color: yellow;"></div>
-        </zero-flex-layout>
-      </zero-card>
-
-      <zero-card style="height: 200px; width: 100%;">
-        <zero-flex-layout class="flex-row spacing-2x">
-          <div style="background-color: blue; width: 100%; height: 100%;"></div>
-          <zero-flex-layout class="flex-column spacing-2x">
-            <div style="background-color: green; width: 100%; height: 100%;"></div>
-            <zero-flex-layout class="flex-row spacing-2x">
-              <div style="flex:3; background-color: yellow;"></div>
-              <div style="flex:1; background-color: blue;"></div>
-            </zero-flex-layout>
-          </zero-flex-layout>
-        </zero-flex-layout>
-      </zero-card>
-    </div>
-  `,
-};

package/dist/esm/flipper/flipper.stories.js

@@ -1,20 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Flipper',
-    component: 'zero-flipper',
-};
-export default meta;
-export const Primary = {
-    argTypes: {
-        direction: {
-            control: 'select',
-            options: ['previous', 'next'],
-        },
-    },
-    args: {
-        direction: 'next',
-    },
-    render: ({ direction }) => html `
-    <zero-flipper direction="${direction}">Zero Flipper</zero-flipper>
-  `,
-};