@genesislcap/foundation-zero 14.240.0 → 14.241.0

package/dist/esm/multiselect/multiselect.stories.js

@@ -1,207 +0,0 @@
-import { html } from 'lit-html';
-import { Position } from './multiselect';
-const meta = {
-    title: 'Multiselect',
-    component: 'zero-multiselect',
-};
-export default meta;
-const notificationSeverities = [
-    {
-        value: 'Information',
-        label: 'Information',
-        labelStyle: 'color: var(--info-color)',
-    },
-    {
-        value: 'Warning',
-        label: 'Warning',
-        labelStyle: 'color: var(--warning-color)',
-    },
-    {
-        value: 'Serious',
-        label: 'Serious',
-        labelStyle: 'color: var(--serious-notify-color)',
-    },
-    {
-        value: 'Critical',
-        label: 'Critical',
-        labelStyle: 'color: var(--error-color)',
-    },
-];
-const countriesList = [
-    'Afghanistan',
-    'Aland Islands',
-    'Albania',
-    'Algeria',
-    'American Samoa',
-    'Andorra',
-    'Angola',
-    'Anguilla',
-    'Antarctica',
-    'Antigua and Barbuda',
-    'Argentina',
-    'Armenia',
-    'Aruba',
-    'Australia',
-    'Austria',
-    'Azerbaijan',
-    'Bahamas',
-    'Bahrain',
-    'Bangladesh',
-    'Barbados',
-    'Belarus',
-    'Belgium',
-    'Belize',
-    'Benin',
-    'Bermuda',
-    'Bhutan',
-    'Bolivia',
-    'Bonaire, Sint Eustatius and Saba',
-    'Bosnia and Herzegovina',
-    'Botswana',
-    'Bouvet Island',
-    'Brazil',
-    'British Indian Ocean Territory',
-    'Brunei Darussalam',
-    'Bulgaria',
-    'Burkina Faso',
-    'Burundi',
-    'Cambodia',
-    'Cameroon',
-    'Canada',
-    'Cape Verde',
-    'Cayman Islands',
-    'Central African Republic',
-    'Chad',
-];
-const disabledCountriesExample = [
-    {
-        value: 'AFG',
-        label: 'Afghanistan',
-        disabled: false,
-    },
-    {
-        value: 'ALA',
-        label: 'Aland Islands',
-    },
-    {
-        value: 'ALB',
-        label: 'Albania',
-        disabled: false,
-    },
-    {
-        value: 'ALG',
-        label: 'Algeria',
-        disabled: false,
-    },
-    {
-        value: 'AND',
-        label: 'Andorra',
-        disabled: true,
-    },
-    {
-        value: 'ARG',
-        label: 'Argentina',
-        disabled: true,
-    },
-    {
-        value: 'ARM',
-        label: 'Armenia',
-        disabled: false,
-    },
-    {
-        value: 'AUS',
-        label: 'Australia',
-        disabled: false,
-    },
-    {
-        value: 'AUT',
-        label: 'Austria',
-        disabled: true,
-    },
-    {
-        value: 'AZE',
-        label: 'Azerbaijan',
-        disabled: false,
-    },
-];
-const makeStory = (args) => ({
-    render: ({ name, text, countries, search, disabled, creatable, autoPosition, position, filterByContains, }) => html `
-    <div style="min-height: 400px;">
-      <style>
-        zero-multiselect::part(option-label)::after {
-          background-color: var(--accent-fill-rest);
-          border-radius: calc((var(--control-corner-radius) + 1) * 1px);
-          color: #fff;
-          content: attr(data-option-label-text);
-          font-size: var(--type-ramp-minus-2-font-size);
-          padding: calc((var(--design-unit) - 2) * 1px) calc(var(--design-unit) * 2px);
-          position: absolute;
-          right: 0;
-          transform: translateX(-6px);
-          white-space: nowrap;
-        }
-      </style>
-      <zero-multiselect
-        name="${name}"
-        .options="${countries}"
-        auto-position="${autoPosition}"
-        position="${position}"
-        search="${search}"
-        disabled="${disabled}"
-        creatable="${creatable}"
-        filter-by-contains="${filterByContains}"
-      >
-        <label slot="label">${text}</label>
-      </zero-multiselect>
-    </div>
-  `,
-    args: Object.assign({ name: 'Countries', search: true, disabled: false, countries: countriesList, autoPosition: true, position: Position.BELOW, creatable: false, filterByContains: false }, args),
-});
-export const Primary = makeStory({ text: 'MultiSelect' });
-export const Disabled = makeStory({ text: 'Disabled', disabled: true });
-export const DisabledOptions = makeStory({
-    text: 'Disabled Options',
-    countries: disabledCountriesExample,
-});
-export const OptionsWithCustomStyling = makeStory({
-    text: 'Options with custom styling',
-    countries: disabledCountriesExample.map((opt) => (Object.assign(Object.assign({}, (typeof opt === 'string' ? { value: opt, label: opt } : opt)), { optionLabelText: 'bubble' }))),
-});
-export const AutoPosition = makeStory({
-    text: 'Disabled Auto Position',
-    countries: disabledCountriesExample,
-    autoPosition: false,
-    position: Position.ABOVE,
-});
-export const Creatable = makeStory({
-    text: 'Creatable',
-    countries: disabledCountriesExample,
-    autoPosition: false,
-    position: Position.ABOVE,
-    creatable: true,
-});
-export const ContainsSearch = makeStory({
-    text: 'Search By Contains',
-    filterByContains: true,
-});
-export const labelStyle = {
-    args: {
-        disabled: false,
-        autoPosition: true,
-        position: Position.BELOW,
-        search: false,
-        all: false,
-    },
-    render: ({ autoPosition, position, search, all }) => html `
-    <div style="min-height: 300px;">
-      <zero-multiselect
-        name="${name}"
-        .options="${notificationSeverities}"
-        auto-position="${autoPosition}"
-        position="${position}"
-        search="${search}"
-        all="${all}"
-      ></zero-multiselect>
-    </div>
-  `,
-};

package/dist/esm/number-field/number-field.stories.js

@@ -1,26 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Number Field',
-    component: 'zero-number-field',
-};
-export default meta;
-export const Primary = {
-    render: () => html `
-    <div style="display: flex; gap: 2rem;">
-      <zero-number-field placeholder="number" withFormatting>with formatting:</zero-number-field>
-      <zero-number-field placeholder="number">without formatting:</zero-number-field>
-      <zero-number-field placeholder="number" min="6" withFormatting>
-        Min 6 - with formatting
-      </zero-number-field>
-      <zero-number-field placeholder="number" min="6" max="60">
-        Min 6, Max 60 - without formatting
-      </zero-number-field>
-      <zero-number-field placeholder="number" min="1" value=${undefined}>
-        Value is undefined (min 1)
-      </zero-number-field>
-      <zero-number-field placeholder="number" min="1" value=${null}>
-        Value is null (min 1)
-      </zero-number-field>
-    </div>
-  `,
-};

package/dist/esm/progress/progress.stories.js

@@ -1,38 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Progress',
-    component: 'zero-progress',
-};
-export default meta;
-export const Multiple = {
-    render: () => html `
-    <div style="width: 100%;">
-      <zero-progress></zero-progress>
-      <zero-progress value="50"></zero-progress>
-      <zero-progress value="100"></zero-progress>
-      <zero-progress appearance="secondary-teal"></zero-progress>
-      <zero-progress appearance="secondary-teal" value="50"></zero-progress>
-      <zero-progress appearance="secondary-teal" value="100"></zero-progress>
-      <zero-progress appearance="secondary-orange"></zero-progress>
-      <zero-progress appearance="secondary-orange" value="50"></zero-progress>
-      <zero-progress appearance="secondary-orange" value="100"></zero-progress>
-    </div>
-  `,
-};
-export const Configurable = {
-    argTypes: {
-        appearance: {
-            control: 'select',
-            options: ['accent', 'secondary-orange', 'secondary-teal'],
-        },
-    },
-    args: {
-        appearance: 'accent',
-        value: '50',
-    },
-    render: ({ appearance, value }) => html `
-    <div style="width: 100%;">
-      <zero-progress appearance="${appearance}" value="${value}"></zero-progress>
-    </div>
-  `,
-};

package/dist/esm/progress-ring/progress-ring.stories.js

@@ -1,23 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Progress Ring',
-    component: 'zero-progress-ring',
-};
-export default meta;
-export const Multiple = {
-    render: () => html `
-    <zero-progress-ring></zero-progress-ring>
-    <zero-progress-ring value="50"></zero-progress-ring>
-    <zero-progress-ring value="100"></zero-progress-ring>
-  `,
-};
-export const Configurable = {
-    args: {
-        value: '50',
-    },
-    render: ({ value }) => html `
-    <div style="width: 100%;">
-      <zero-progress-ring value="${value}"></zero-progress-ring>
-    </div>
-  `,
-};

package/dist/esm/radio/radio.stories.js

@@ -1,11 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Radio',
-    component: 'zero-radio',
-};
-export default meta;
-export const Primary = {
-    render: () => html `
-    <zero-radio>Rapid Radio</zero-radio>
-  `,
-};

package/dist/esm/radio-group/radio-group.stories.js

@@ -1,16 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Radio Group',
-    component: 'zero-radio-group',
-};
-export default meta;
-export const Primary = {
-    render: () => html `
-    <zero-radio-group>
-      <label slot="label">Zero Radio Group (label slot)</label>
-      <zero-radio>Zero label 1</zero-radio>
-      <zero-radio>Zero label 2</zero-radio>
-      <zero-radio>Zero label 3</zero-radio>
-    </zero-radio-group>
-  `,
-};

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

@@ -1,45 +0,0 @@
-import { getCriteriaBuilder, INPUT_MIN_LENGTH } from '@genesislcap/foundation-ui';
-import { html } from 'lit-html';
-const meta = {
-    title: 'Search Bar',
-    component: 'zero-search-bar',
-};
-export default meta;
-export const Primary = {
-    render: ({ searchConfig }) => html `
-    <div style="height: 400px; width: 500px;">
-      <zero-search-bar .options="${searchConfig}"></zero-search-bar>
-    </div>
-  `,
-    args: {
-        searchConfig: [
-            {
-                field: 'TRADE_NAME',
-                label: (searchTerm) => `${searchTerm} as Trade Name`,
-                createCriteria: getCriteriaBuilder,
-                isEnabled: (searchTerm, selectedOption) => {
-                    return (searchTerm.length >= INPUT_MIN_LENGTH &&
-                        !selectedOption.some((e) => e.field === 'TRADE_NAME'));
-                },
-            },
-            {
-                field: 'INSTRUMENT_NAME',
-                label: (searchTerm) => `${searchTerm} as Instrument Name`,
-                createCriteria: getCriteriaBuilder,
-                isEnabled: (searchTerm, selectedOption) => {
-                    return (searchTerm.length >= INPUT_MIN_LENGTH &&
-                        !selectedOption.some((e) => e.field === 'INSTRUMENT_NAME'));
-                },
-            },
-            {
-                field: 'USER_ID',
-                label: (searchTerm) => `${searchTerm} as User ID`,
-                createCriteria: getCriteriaBuilder,
-                isEnabled: (searchTerm, selectedOption) => {
-                    return (searchTerm.length >= INPUT_MIN_LENGTH &&
-                        !selectedOption.some((e) => e.field === 'USER_ID'));
-                },
-            },
-        ],
-    },
-};

package/dist/esm/segmented-control/segmented-control.stories.js

@@ -1,26 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Segmented Control',
-    component: 'zero-segmented-control',
-};
-export default meta;
-const wrapperStyle = 'display: flex; flex-direction: column;';
-export const Primary = {
-    render: () => html `
-    <div style="${wrapperStyle}">
-      <zero-segmented-control>
-        <label slot="label">Neutral Segment Control (label slot)</label>
-        <zero-segmented-item>Segmented Item</zero-segmented-item>
-        <zero-segmented-item>Segmented Item</zero-segmented-item>
-        <zero-segmented-item>Segmented Item</zero-segmented-item>
-      </zero-segmented-control>
-
-      <zero-segmented-control appearance="primary">
-        <label slot="label">Primary Segment Control (label slot)</label>
-        <zero-segmented-item>Segmented Item</zero-segmented-item>
-        <zero-segmented-item>Segmented Item</zero-segmented-item>
-        <zero-segmented-item>Segmented Item</zero-segmented-item>
-      </zero-segmented-control>
-    </div>
-  `,
-};

package/dist/esm/select/select.stories.js

@@ -1,17 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Select',
-    component: 'zero-select',
-};
-export default meta;
-export const Primary = {
-    render: () => html `
-    <div style="min-height: 300px;">
-      <zero-select>
-        <zero-option value="1">Zero Option 1</zero-option>
-        <zero-option value="2">Zero Option 2</zero-option>
-        <zero-option value="3">Zero Option 3</zero-option>
-      </zero-select>
-    </div>
-  `,
-};

package/dist/esm/skeleton/skeleton.stories.js

@@ -1,35 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Skeleton',
-    component: 'zero-skeleton',
-};
-export default meta;
-export const Primary = {
-    render: () => html `
-    <div
-      style="
-      background-color: #fff;
-      padding: 20px;
-      width: 500px;
-      border-radius: 4px;"
-    >
-      <zero-skeleton style="width: 50px; height: 50px;" shape="circle"></zero-skeleton>
-      <zero-skeleton
-        style="border-radius: 4px; margin-top: 10px; height: 10px;"
-        shape="rect"
-      ></zero-skeleton>
-      <zero-skeleton
-        style="border-radius: 4px; margin-top: 10px; height: 10px;"
-        shape="rect"
-      ></zero-skeleton>
-      <zero-skeleton
-        style="border-radius: 4px;width: 75px;height: 30px;margin-top: 20px;margin-bottom: 10px;"
-        shape="rect"
-      ></zero-skeleton>
-    </div>
-    <zero-skeleton
-      style="border-radius: 4px; margin-top: 10px; height: 20px;"
-      shape="rect"
-    ></zero-skeleton>
-  `,
-};

package/dist/esm/slider/slider.stories.js

@@ -1,28 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Slider',
-    component: 'zero-slider',
-};
-export default meta;
-export const Primary = {
-    render: () => html `
-    <div style="min-height: 300px; width: 100%;">
-      <h6>Vertical</h6>
-      <zero-slider min="0" max="100" step="10" value="70" orientation="vertical"></zero-slider>
-      <h6>Horizontal</h6>
-      <zero-slider min="0" max="100" step="10" value="70"></zero-slider>
-    </div>
-  `,
-};
-export const WithLabels = {
-    render: () => html `
-    <div style="min-height: 300px; width: 100%; margin: 20px;">
-      <zero-slider min="0" max="100" step="10" value="70">
-        <zero-slider-label position="0">0%</zero-slider-label>
-        <zero-slider-label position="10">10%</zero-slider-label>
-        <zero-slider-label position="90">90%</zero-slider-label>
-        <zero-slider-label position="100">100%</zero-slider-label>
-      </zero-slider>
-    </div>
-  `,
-};

package/dist/esm/snackbar/snackbar.stories.js

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

package/dist/esm/stacking-icons/stacking-icons.stories.js

@@ -1,53 +0,0 @@
-import { faSizeValues } from '@genesislcap/foundation-ui';
-import { html } from 'lit-html';
-const meta = {
-    title: 'Stacking Icons',
-    component: 'zero-stacking-icons',
-};
-export default meta;
-const iconSizeArgTypes = {
-    control: 'select',
-    options: ['stack-1x', 'stack-2x'],
-    description: 'Select size for the icon',
-};
-const iconVariantArgTypes = {
-    control: 'select',
-    options: ['regular', 'solid', 'brand'],
-    description: 'Select variant for the icon',
-};
-export const Configurable = {
-    argTypes: {
-        size: {
-            control: 'select',
-            options: faSizeValues,
-            description: 'Select size for the stacking icons',
-        },
-        firstIconSize: iconSizeArgTypes,
-        firstIconVariant: iconVariantArgTypes,
-        secondIconSize: iconSizeArgTypes,
-        secondIconVariant: iconVariantArgTypes,
-    },
-    args: {
-        size: '1x',
-        firstIconName: 'circle',
-        firstIconSize: 'stack-2x',
-        firstIconVariant: 'regular',
-        secondIconName: 'flag',
-        secondIconSize: 'stack-1x',
-        secondIconVariant: 'solid',
-    },
-    render: ({ size, firstIconName, firstIconSize, firstIconVariant, secondIconName, secondIconSize, secondIconVariant, }) => html `
-    <zero-stacking-icons size="${size}" style="color:#FFFFFF">
-      <zero-icon
-        name="${firstIconName}"
-        size="${firstIconSize}"
-        variant="${firstIconVariant}"
-      ></zero-icon>
-      <zero-icon
-        name="${secondIconName}"
-        size="${secondIconSize}"
-        variant="${secondIconVariant}"
-      ></zero-icon>
-    </zero-stacking-icons>
-  `,
-};

package/dist/esm/stepper/stepper.stories.js

@@ -1,30 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Stepper',
-    component: 'zero-stepper',
-};
-export default meta;
-export const Primary = {
-    render: () => html `
-    <div style="display:flex; gap: 10px; min-height: 400px">
-      <zero-stepper>
-        <zero-stepper-tab>Rapid stepper 1</zero-stepper-tab>
-        <zero-stepper-tab>Rapid stepper 2</zero-stepper-tab>
-        <zero-stepper-tab>Rapid stepper 3</zero-stepper-tab>
-        <zero-stepper-tab>Rapid stepper 4</zero-stepper-tab>
-        <zero-stepper-tab-panel>Rapid Stepper Panel 1</zero-stepper-tab-panel>
-        <zero-stepper-tab-panel>Rapid Stepper Panel 2</zero-stepper-tab-panel>
-        <zero-stepper-tab-panel>Rapid Stepper Panel 3</zero-stepper-tab-panel>
-        <zero-stepper-tab-panel>Rapid Stepper Panel 4</zero-stepper-tab-panel>
-      </zero-stepper>
-      <zero-stepper orientation="horizontal">
-        <zero-stepper-tab>Rapid stepper 1</zero-stepper-tab>
-        <zero-stepper-tab>Rapid stepper 2</zero-stepper-tab>
-        <zero-stepper-tab>Rapid stepper 3</zero-stepper-tab>
-        <zero-stepper-tab-panel>Rapid Stepper Panel 1</zero-stepper-tab-panel>
-        <zero-stepper-tab-panel>Rapid Stepper Panel 2</zero-stepper-tab-panel>
-        <zero-stepper-tab-panel>Rapid Stepper Panel 3</zero-stepper-tab-panel>
-      </zero-stepper>
-    </div>
-  `,
-};

package/dist/esm/switch/switch.stories.js

@@ -1,11 +0,0 @@
-import { html } from 'lit-html';
-const meta = {
-    title: 'Switch',
-    component: 'zero-switch',
-};
-export default meta;
-export const Primary = {
-    render: () => html `
-    <zero-switch checked></zero-switch>
-  `,
-};