@genesislcap/rapid-design-system 14.127.2

package/dist/esm/disclosure/disclosure.styles.js

@@ -0,0 +1,20 @@
+import { foundationDisclosureStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidDisclosureStyles = (context, definition) => css `
+  ${foundationDisclosureStyles(context, definition)}
+  :host {
+    font-size: var(--type-ramp-base-font-size);
+    font-family: var(--body-font);
+    line-height: var(--type-ramp-base-line-height);
+    color: var(--neutral-foreground-rest);
+  }
+
+  :host([appearance='accent']) .invoker {
+    padding: calc((10 + (var(--design-unit) * 2 * var(--density))) * 1px);
+  }
+
+  #disclosure-content {
+    padding: 0 calc(var(--design-unit) * 4px) calc(var(--design-unit) * 4px);
+    text-align: center;
+  }
+`;

package/dist/esm/disclosure/disclosure.template.js

@@ -0,0 +1,2 @@
+import { foundationDisclosureTemplate } from '@genesislcap/foundation-ui';
+export const rapidDisclosureTemplate = (context, definition) => foundationDisclosureTemplate(context, definition);

package/dist/esm/disclosure/index.js

@@ -0,0 +1,3 @@
+export * from './disclosure';
+export * from './disclosure.styles';
+export * from './disclosure.template';

package/dist/esm/divider/divider.js

@@ -0,0 +1,10 @@
+import { defaultDividerConfig, Divider as FoundationDivider, foundationDividerShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidDividerStyles as styles } from './divider.styles';
+import { rapidDividerTemplate as template } from './divider.template';
+/**
+ * @tagname %%prefix%%-divider
+ */
+export class Divider extends FoundationDivider {
+}
+export const rapidDivider = Divider.compose(Object.assign({ baseName: 'divider', template,
+    styles, shadowOptions: foundationDividerShadowOptions }, defaultDividerConfig));

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

@@ -0,0 +1,36 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Divider',
+    component: 'rapid-divider',
+    tags: ['autodocs'],
+};
+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;">
+      <div
+        style="display: flex; justify-content:center; width: 100%; ${orientation === 'vertical'
+        ? 'flex-direction: row;'
+        : 'flex-direction: column;'}"
+      >
+        <rapid-button style="flex: 1;"></rapid-button>
+        <rapid-divider orientation="${orientation}" role="${role}"></rapid-divider>
+        <rapid-button style="flex: 1;"></rapid-button>
+      </div>
+    </div>
+  `,
+};

package/dist/esm/divider/divider.styles.js

@@ -0,0 +1,5 @@
+import { foundationDividerStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidDividerStyles = (context, definition) => css `
+  ${foundationDividerStyles(context, definition)}
+`;

package/dist/esm/divider/divider.template.js

@@ -0,0 +1,2 @@
+import { foundationDividerTemplate } from '@genesislcap/foundation-ui';
+export const rapidDividerTemplate = (context, definition) => foundationDividerTemplate(context, definition);

package/dist/esm/divider/index.js

@@ -0,0 +1,3 @@
+export * from './divider';
+export * from './divider.styles';
+export * from './divider.template';

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

@@ -0,0 +1,19 @@
+import { DropdownMenu as FoundationDropdownMenu, foundationDropdownMenuTemplate as template, } from '@genesislcap/foundation-ui';
+import { rapidDropdownMenuStyles as styles } from './dropdown-menu.styles';
+/**
+ * @tagname %%prefix%%-dropdown-menu
+ */
+export class DropdownMenu extends FoundationDropdownMenu {
+}
+/**
+ * The rapid Dropdown Menu
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<rapid-dropdown-menu\>
+ */
+export const rapidDropdownMenu = DropdownMenu.compose({
+    baseName: 'dropdown-menu',
+    styles,
+    template,
+});

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

@@ -0,0 +1,68 @@
+import { html } from 'lit-html';
+import { logger } from '../utils/logger';
+const meta = {
+    title: 'Dropdown Menu',
+    component: 'rapid-dropdown-menu',
+};
+export default meta;
+const rapidItems = [
+    {
+        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: rapidItems,
+        dropdownOpenerText: 'Dropdown menu',
+    },
+    render: ({ dropdownOpenerText, items }) => html `
+    <div>
+      <rapid-dropdown-menu name="${dropdownOpenerText}" .items=${items}></rapid-dropdown-menu>
+    </div>
+  `,
+};

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

@@ -0,0 +1,18 @@
+import { dropdownMenuBaseStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidDropdownMenuStyles = (context, definition) => css `
+  ${dropdownMenuBaseStyles('rapid', context, definition)}
+
+  .actions-menu {
+    border-radius: calc(var(--control-corner-radius) * 1px) calc(var(--control-corner-radius) * 1px);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+    gap: 0;
+    margin: calc(var(--design-unit) * 1px) 0;
+  }
+
+  rapid-menu {
+    margin: 0 0 calc(var(--design-unit) * 1px) calc(var(--design-unit) * -2px);
+    border-radius: calc(var(--control-corner-radius) * 1px) calc(var(--control-corner-radius) * 1px);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+  }
+`;

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

@@ -0,0 +1,3 @@
+export * from './dropdown-menu';
+export * from './dropdown-menu.styles';
+export { foundationDropdownMenuTemplate as zeroDropdownMenuTemplate, getDropdownMenuTemplate, extractMenuItems, dropdownMenuBaseStyles, } from '@genesislcap/foundation-ui';

package/dist/esm/error-boundary/error-boundary.js

@@ -0,0 +1,10 @@
+import { foundationErrorBoundary } from '@genesislcap/foundation-ui';
+import { getExports } from '../utils';
+// eslint-disable-next-line prettier/prettier
+const { defaultConfig, shadowOptions, styles, template } = getExports(foundationErrorBoundary);
+export const rapidErrorBoundary = () => foundationErrorBoundary();
+export { ErrorBoundary } from '@genesislcap/foundation-ui';
+export const defaultErrorBoundaryConfig = defaultConfig;
+export const rapidErrorBoundaryTemplate = template;
+export const rapidErrorBoundaryStyles = styles;
+export const rapidErrorBoundaryShadowOptions = shadowOptions;

package/dist/esm/error-boundary/index.js

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

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

@@ -0,0 +1,18 @@
+import { defaultFileUploadConfig as foundationConfig, FileUpload as FoundationFileUpload, foundationFileUploadShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidFileUploadStyles } from './file-upload.styles';
+import { fileUploadTemplate as template } from './file-upload.template';
+export const defaultFileUploadConfig = foundationConfig;
+export const rapidFileUploadShadowOptions = foundationFileUploadShadowOptions;
+/**
+ * @tagname %%prefix%%-file-upload
+ */
+export class FileUpload extends FoundationFileUpload {
+}
+/**
+ * The Rapid FileUpload
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<rapid-file-upload\>
+ */
+export const rapidFileUpload = FileUpload.compose(Object.assign({ baseName: 'file-upload', shadowOptions: rapidFileUploadShadowOptions, styles: rapidFileUploadStyles, template }, defaultFileUploadConfig));

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

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

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

@@ -0,0 +1,25 @@
+import { foundationFileUploadStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidFileUploadStyles = css `
+  ${foundationFileUploadStyles}
+  ::-webkit-scrollbar {
+    width: calc(var(--design-unit) * 3px);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: rgb(31 33 38);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    width: 8px;
+    border-radius: 10px;
+    box-shadow: inset 0 0 6px rgba(0 0 0 / 30%);
+    background-color: var(--neutral-fill-rest);
+    border: calc(var(--stroke-width) * 3px) solid var(--neutral-layer-4);
+  }
+
+  :host::part(select-file-button),
+  :host::part(upload-file-button) {
+    margin: 0 0 calc(var(--design-unit) * 2px) calc(var(--design-unit) * 2px);
+  }
+`;

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

@@ -0,0 +1,5 @@
+import { getPrefixedFileUpload } from '@genesislcap/foundation-ui';
+import { html } from '@microsoft/fast-element';
+export const fileUploadTemplate = html `
+  ${getPrefixedFileUpload('rapid')}
+`;

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

@@ -0,0 +1,3 @@
+export * from './file-upload';
+export * from './file-upload.styles';
+export { foundationFileUploadTemplate as rapidFileUploadTemplate } from '@genesislcap/foundation-ui';

package/dist/esm/filter/filter.js

@@ -0,0 +1,13 @@
+import { Filter as FoundationFilter } from '@genesislcap/foundation-ui';
+import { rapidFilterStyles as styles } from './filter.styles';
+import { rapidFilterTemplate as template } from './filter.template';
+/**
+ * @tagname %%prefix%%-filter
+ */
+export class Filter extends FoundationFilter {
+}
+export const rapidFilter = Filter.compose({
+    baseName: 'filter',
+    template,
+    styles,
+});

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

@@ -0,0 +1,32 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Filter',
+    component: 'rapid-filter',
+};
+export default meta;
+const wrapperStyle = 'display: flex;min-height:300px;';
+export const Default = {
+    args: {
+        type: 'boolean',
+        fieldName: 'SOME_FIELD',
+    },
+    argTypes: {
+        type: {
+            control: 'select',
+            options: ['text', 'boolean', 'date', 'number'],
+        },
+    },
+    render: ({ type, fieldName }) => html `
+    <rapid-filter type="${type}" fieldName="${fieldName}"></rapid-filter>
+  `,
+};
+export const Multiple = {
+    render: () => html `
+    <div style="${wrapperStyle}">
+      <rapid-filter type="text" fieldName="SOME_TEXT_FIELD"></rapid-filter>
+      <rapid-filter type="boolean" fieldName="SOME_BOOLEAN_FIELD"></rapid-filter>
+      <rapid-filter type="date" fieldName="SOME_DATE_FIELD"></rapid-filter>
+      <rapid-filter type="number" fieldName="SOME_NUMERIC_FIELD"></rapid-filter>
+    </div>
+  `,
+};

package/dist/esm/filter/filter.styles.js

@@ -0,0 +1,30 @@
+import { foundationFilterStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidFilterStyles = (context, definition) => css `
+  ${foundationFilterStyles}
+  .filter-wrapper {
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+  }
+
+  .close-icon {
+    border: calc(var(--stroke-width) * 1px) solid transparent;
+  }
+
+  .close-icon:hover {
+    border-color: var(--error-color);
+    background: color-mix(in srgb, var(--error-color), transparent 75%);
+  }
+
+  .close-icon:hover svg path {
+    fill: var(--error-color);
+  }
+
+  rapid-select {
+    margin-bottom: calc(var(--design-unit) * 2px);
+  }
+
+  .flex-row rapid-text-field,
+  .flex-row rapid-select {
+    flex: 1;
+  }
+`;

package/dist/esm/filter/filter.template.js

@@ -0,0 +1,5 @@
+import { getPrefixedFilterTemplate } from '@genesislcap/foundation-ui';
+import { html } from '@microsoft/fast-element';
+export const rapidFilterTemplate = html `
+  ${getPrefixedFilterTemplate('rapid')}
+`;

package/dist/esm/filter/index.js

@@ -0,0 +1,3 @@
+export * from './filter';
+export * from './filter.template';
+export { foundationFilterStyles as zeroFilterStyles } from '@genesislcap/foundation-ui';

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

@@ -0,0 +1,20 @@
+import { FilterBar as FoundationFilterBar } from '@genesislcap/foundation-ui';
+import { rapidFilterBarStyles as styles } from './filter-bar.styles';
+import { rapidFilterBarTemplate as template } from './filter-bar.template';
+/**
+ * @tagname %%prefix%%-filter-bar
+ */
+export class FilterBar extends FoundationFilterBar {
+}
+/**
+ * The Rapid Filter
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<rapid-filter-bar\>
+ */
+export const rapidFilterBar = FilterBar.compose({
+    baseName: 'filter-bar',
+    template,
+    styles,
+});

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

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

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

@@ -0,0 +1,23 @@
+import { foundationFilterBarStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidFilterBarStyles = (context, definition) => css `
+  ${foundationFilterBarStyles(context, definition)}
+  .toggle,
+  .toggle-collapsed {
+    background: var(--neutral-layer-4);
+    color: var(--neutral-foreground-hint);
+  }
+
+  .toggle {
+    border-top: calc(var(--stroke-width) * 2px) solid;
+  }
+
+  .toggle:hover,
+  .toggle-collapsed:hover {
+    color: var(--accent-foreground-rest);
+  }
+
+  .filter-bar {
+    background: var(--neutral-layer-3);
+  }
+`;

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

@@ -0,0 +1,5 @@
+import { filterBarTemplate } from '@genesislcap/foundation-ui';
+import { html } from '@microsoft/fast-element';
+export const rapidFilterBarTemplate = html `
+  ${filterBarTemplate('rapid')}
+`;

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

@@ -0,0 +1,3 @@
+export * from './filter-bar.styles';
+export * from './filter-bar.template';
+export * from './filter-bar';

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

@@ -0,0 +1,10 @@
+import { foundationFlexLayout } from '@genesislcap/foundation-ui';
+import { getExports } from '../utils';
+// eslint-disable-next-line prettier/prettier
+const { defaultConfig, shadowOptions, styles, template } = getExports(foundationFlexLayout);
+export const rapidFlexLayout = () => foundationFlexLayout();
+export { FlexLayout } from '@genesislcap/foundation-ui';
+export const defaultFlexLayoutConfig = defaultConfig;
+export const rapidFlexLayoutTemplate = template;
+export const rapidFlexLayoutStyles = styles;
+export const rapidFlexLayoutShadowOptions = shadowOptions;

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

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

package/dist/esm/flipper/flipper.js

@@ -0,0 +1,7 @@
+import { defaultFlipperConfig, Flipper as FoundationFlipper, foundationFlipperShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidFlipperStyles as styles } from './flipper.styles';
+import { rapidFlipperTemplate as template } from './flipper.template';
+export class Flipper extends FoundationFlipper {
+}
+export const rapidFlipper = Flipper.compose(Object.assign({ baseName: 'flipper', template,
+    styles, shadowOptions: foundationFlipperShadowOptions }, defaultFlipperConfig));

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

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

package/dist/esm/flipper/flipper.styles.js

@@ -0,0 +1,23 @@
+import { foundationFlipperStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidFlipperStyles = (context, definition) => css `
+  ${foundationFlipperStyles(context, definition)}
+  :host {
+    color: var(--neutral-foreground-rest);
+  }
+
+  :host(:hover) {
+    color: var(--neutral-foreground-rest);
+  }
+
+  :host::before {
+    background: color-mix(in srgb, var(--accent-fill-rest), transparent 50%);
+    border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
+    color: var(--neutral-foreground-rest);
+  }
+
+  :host(:hover)::before {
+    background: var(--accent-fill-rest);
+    color: var(--neutral-foreground-rest);
+  }
+`;

package/dist/esm/flipper/flipper.template.js

@@ -0,0 +1,2 @@
+import { foundationFlipperTemplate } from '@genesislcap/foundation-ui';
+export const rapidFlipperTemplate = (context, definition) => foundationFlipperTemplate(context, definition);

package/dist/esm/flipper/index.js

@@ -0,0 +1,3 @@
+export * from './flipper';
+export * from './flipper.styles';
+export * from './flipper.template';

package/dist/esm/flyout/flyout.js

@@ -0,0 +1,18 @@
+import { defaultFlyoutConfig as foundationConfig, Flyout as FoundationFlyout, foundationFlyoutShadowOptions, } from '@genesislcap/foundation-ui';
+import { rapidFlyoutStyles } from './flyout.styles';
+import { rapidFlyoutTemplate as template } from './flyout.template';
+export const defaultFlyoutConfig = foundationConfig;
+export const rapidFlyoutShadowOptions = foundationFlyoutShadowOptions;
+/**
+ * @tagname %%prefix%%-flyout
+ */
+export class Flyout extends FoundationFlyout {
+}
+/**
+ * The Rapid Flyout
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<rapid-flyout\>
+ */
+export const rapidFlyout = Flyout.compose(Object.assign({ baseName: 'flyout', shadowOptions: rapidFlyoutShadowOptions, styles: rapidFlyoutStyles, template }, defaultFlyoutConfig));

package/dist/esm/flyout/flyout.stories.js

@@ -0,0 +1,58 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Flyout',
+    component: 'rapid-flyout',
+};
+export default meta;
+const openFlyout = () => {
+    const rapidFlyout = document.querySelector(`rapid-flyout`);
+    rapidFlyout.closed = false;
+};
+const closeFlyout = () => {
+    const rapidFlyout = document.querySelector(`rapid-flyout`);
+    rapidFlyout.closed = true;
+};
+export const Primary = {
+    argTypes: {
+        position: {
+            control: 'select',
+            options: ['left', 'right'],
+        },
+    },
+    args: {
+        position: 'right',
+        height: '600px',
+        flyoutWidth: '20%',
+    },
+    render: ({ position, height, flyoutWidth }) => html `
+    <div style="display: flex; height: ${height};">
+      <rapid-button @click="${openFlyout}">Open Flyout</rapid-button>
+
+      <style>
+        rapid-flyout::part(flyout) {
+          width: ${flyoutWidth};
+        }
+      </style>
+      <rapid-flyout position="${position}" style="height: ${height};">
+        <p slot="title">Rapid flyout</p>
+        <div slot="header">
+          <p>Header</p>
+        </div>
+        <div class="container">
+          <p>Flyout options</p>
+          <ul>
+            <li>Option 1</li>
+            <li>Option 2</li>
+            <li>Option 3</li>
+            <li>Option 4</li>
+            <li>Option 5</li>
+          </ul>
+        </div>
+        <div slot="footer">
+          <p>Footer</p>
+          <rapid-button @click="${closeFlyout}">Close Flyout</rapid-button>
+        </div>
+      </rapid-flyout>
+    </div>
+  `,
+};