@genesislcap/rapid-design-system 14.127.2

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

@@ -0,0 +1,160 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Multiselect',
+    component: 'rapid-multiselect',
+};
+export default meta;
+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,
+    },
+];
+export const Primary = {
+    render: ({ name, text, countries, search, disabled }) => html `
+    <div style="min-height: 400px;">
+      <rapid-multiselect
+        name="${name}"
+        .options="${countries}"
+        search="${search}"
+        disabled="${disabled}"
+      >
+        <label slot="label">${text}</label>
+      </rapid-multiselect>
+    </div>
+  `,
+    args: {
+        name: 'Countries',
+        text: 'Multiselect',
+        search: true,
+        disabled: false,
+        countries: countriesList,
+    },
+};
+export const Disabled = {
+    render: ({ name, text, countries, search, disabled }) => html `
+    <div style="min-height: 400px;">
+      <rapid-multiselect
+        name="${name}"
+        .options="${countries}"
+        search="${search}"
+        disabled="${disabled}"
+      >
+        <label slot="label">${text}</label>
+      </rapid-multiselect>
+    </div>
+  `,
+    args: {
+        name: 'Countries',
+        text: 'Disabled',
+        search: true,
+        countries: countriesList,
+        disabled: true,
+    },
+};
+export const DisabledOptions = {
+    render: ({ name, text, countries, search }) => html `
+    <div style="min-height: 400px;">
+      <rapid-multiselect name="${name}" .options="${countries}" search="${search}">
+        <label slot="label">${text}</label>
+      </rapid-multiselect>
+    </div>
+  `,
+    args: {
+        name: 'Countries',
+        text: 'Disabled Options',
+        search: true,
+        countries: disabledCountriesExample,
+    },
+};

package/dist/esm/multiselect/multiselect.styles.js

@@ -0,0 +1,79 @@
+import { multiselectStyles as foundationMultiselectStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const multiselectStyles = css `
+  ${foundationMultiselectStyles}
+
+  #display-field {
+    height: calc(
+      (((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 6) * 1px
+    );
+    min-height: 0;
+    outline: none;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+    background-color: color-mix(in srgb, var(--neutral-fill-input-rest), transparent 94%);
+    color: var(--neutral-foreground-rest);
+    padding: 0 calc((var(--design-unit) - 1) * 1px) 0 calc(var(--design-unit) * 2px);
+    font-size: var(--type-ramp-base-font-size);
+    line-height: var(--type-ramp-base-line-height);
+    font-family: var(--body-font);
+  }
+
+  #display-field:focus {
+    outline: none;
+    border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
+    background-color: var(--neutral-layer-4);
+  }
+
+  #display-field:hover:not(:focus):not([disabled]) {
+    outline: none;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-hover);
+  }
+
+  .indicator {
+    width: calc((var(--base-height-multiplier) * (var(--design-unit) - 1)) * 1px);
+    height: calc((var(--base-height-multiplier) * (var(--design-unit) - 1)) * 1px);
+    left: calc(
+      100% - ((var(--base-height-multiplier) * (var(--design-unit) - 1)) + (var(--design-unit) - 1)) *
+        1px
+    );
+    background-color: var(--neutral-fill-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #arrow-icon {
+    height: 1em;
+    fill: var(--neutral-foreground-rest);
+  }
+
+  .label {
+    color: var(--neutral-foreground-hint);
+  }
+
+  .options {
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+  }
+
+  rapid-checkbox {
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+    padding: calc((var(--design-unit) + 1) * 1px) 0 calc((var(--design-unit) + 1) * 1px)
+      calc((var(--design-unit) + 1) * 1px);
+    margin: 0;
+  }
+
+  rapid-checkbox:hover:not([disabled]) {
+    background: var(--neutral-layer-4);
+  }
+
+  rapid-checkbox::part(label) {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  rapid-checkbox[disabled] {
+    cursor: not-allowed;
+  }
+`;

package/dist/esm/multiselect/multiselect.template.js

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

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

@@ -0,0 +1,2 @@
+export * from './number-field';
+export * from './number-field.styles';

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

@@ -0,0 +1,11 @@
+import { NumberField as FoundationNumberField, defaultNumberFieldConfig as foundationNumberFieldConfig, foundationNumberFieldShadowOptions, foundationNumberFieldTemplate as foundationNumberFieldTemplate, } from '@genesislcap/foundation-ui';
+import { rapidNumberFieldStyles as styles } from './number-field.styles';
+/**
+ * @tagname %%prefix%%-number-field
+ */
+export class NumberField extends FoundationNumberField {
+}
+export const defaultNumberFieldConfig = foundationNumberFieldConfig;
+export const rapidNumberFieldTemplate = foundationNumberFieldTemplate;
+export const rapidNumberFieldShadowOptions = foundationNumberFieldShadowOptions;
+export const rapidNumberField = NumberField.compose(Object.assign({ baseName: 'number-field', template: rapidNumberFieldTemplate, styles, shadowOptions: rapidNumberFieldShadowOptions }, defaultNumberFieldConfig));

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

@@ -0,0 +1,48 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Number Field',
+    component: 'rapid-number-field',
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Number Field',
+        placeholder: 'number',
+        withFormatting: true,
+        min: 1,
+        max: 60000,
+    },
+    render: ({ placeholder, withFormatting, min, max, label }) => html `
+    <div style="display: flex;flex-direction: column;">
+      <rapid-number-field
+        placeholder="${placeholder}"
+        withFormatting="${withFormatting}"
+        min="${min}"
+        max="${max}"
+      >
+        ${label}
+      </rapid-number-field>
+    </div>
+  `,
+};
+export const Examples = {
+    args: {},
+    render: () => html `
+    <div style="display: flex;flex-direction: column;">
+      <rapid-number-field placeholder="number" withFormatting>with formatting:</rapid-number-field>
+      <rapid-number-field placeholder="number">without formatting:</rapid-number-field>
+      <rapid-number-field placeholder="number" min="6" withFormatting>
+        Min 6 - with formatting
+      </rapid-number-field>
+      <rapid-number-field placeholder="number" min="6" max="60">
+        Min 6, Max 60 - without formatting
+      </rapid-number-field>
+      <rapid-number-field placeholder="number" min="1" value=${undefined}>
+        Value is undefined (min 1)
+      </rapid-number-field>
+      <rapid-number-field placeholder="number" min="1" value=${null}>
+        Value is null (min 1)
+      </rapid-number-field>
+    </div>
+  `,
+};

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

@@ -0,0 +1,87 @@
+import { css } from '@microsoft/fast-element';
+export const rapidNumberFieldStyles = (context, definition) => css `
+  :host {
+    margin-bottom: calc(var(--design-unit) * 2px);
+  }
+
+  :host([disabled]) {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  :host .control {
+    height: 100%;
+    width: 100%;
+    border: none;
+    background-color: transparent;
+    padding: 0 calc(var(--design-unit) * 2px);
+    color: var(--neutral-foreground-rest);
+    font-size: var(--type-ramp-base-font-size);
+    font-family: var(--body-font);
+  }
+
+  :host .root {
+    --focus-stroke-outer: transparent;
+
+    display: flex;
+    position: relative;
+    align-items: center;
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+    background-color: color-mix(in srgb, var(--neutral-fill-input-rest), transparent 94%);
+    height: calc(
+      (((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px
+    );
+  }
+
+  :host(:hover:not([disabled])) .root {
+    border-color: var(--neutral-stroke-hover);
+    background: none;
+  }
+
+  :host(:focus-within:not([disabled])) .root {
+    background-color: var(--neutral-layer-4);
+    border: 1px solid var(--accent-fill-rest);
+    box-shadow: none;
+  }
+
+  .label {
+    display: block;
+    color: var(--neutral-foreground-hint);
+    font-weight: 700;
+    margin: calc(var(--design-unit) * 2px) 0;
+    font-family: var(--body-font);
+    font-size: var(--type-ramp-base-font-size);
+    line-height: var(--type-ramp-base-line-height);
+  }
+
+  .controls {
+    position: absolute;
+    right: 3px;
+    width: calc((var(--base-height-multiplier) * (var(--design-unit) - 1)) * 1px);
+    height: calc((var(--base-height-multiplier) * (var(--design-unit) - 1)) * 1px);
+    background-color: var(--neutral-fill-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    cursor: pointer;
+  }
+
+  .step-down,
+  .step-up {
+    width: 1em;
+    height: 1em;
+    margin: -2px;
+  }
+
+  .step-up-glyph,
+  .step-down-glyph {
+    fill: var(--neutral-foreground-hint);
+  }
+
+  .control:focus-visible {
+    outline: none;
+  }
+`;

package/dist/esm/patterns/define.js

@@ -0,0 +1,36 @@
+import { FASTElement } from '@microsoft/fast-element';
+const defaultDefinitionOverrider = (base) => (override) => (Object.assign(Object.assign({}, base), override));
+/**
+ * Defines a platform custom element based on the provided type and definition.
+ *
+ * @example
+ * An example using custom definition merge logic, useful if you need to impose hard restrictions.
+ * ```ts
+ * const definitionOverrider = (definition) => ({
+ *    ...baseDefinition,
+ *    ...definition,
+ *    styles: baseDefinition.styles,
+ *    shadowOptions: {
+ *      mode: 'closed,
+ *    },
+ * });
+ * export const define = defineFactory(LoginForm, definitionOverrider);
+ * ```
+ *
+ * @example
+ * You can provide the base definition if you're happy with the default spread operator merge logic.
+ * ```ts
+ * export const define = defineFactory(LoginForm, baseDefinition);
+ * ```
+ *
+ * @param Type - The custom element Type / Class to define.
+ * @param overriderOrBase - A function that merges definitions, or the base definition if custom merging is not needed.
+ * @returns The type class.
+ */
+export const defineFactory = (Type, overriderOrBase) => (definition) => {
+    const overrider = typeof overriderOrBase === 'function'
+        ? overriderOrBase
+        : defaultDefinitionOverrider(overriderOrBase);
+    return FASTElement.define(class extends Type {
+    }, overrider(definition));
+};

package/dist/esm/patterns/index.js

@@ -0,0 +1,2 @@
+export * from './define';
+export * from './tag-for';

package/dist/esm/patterns/tag-for.js

@@ -0,0 +1,21 @@
+// TODO: Remove after upgrade to latest fast-element or proxy the underlying version
+import { FASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * Determines what HTML tag name to use for the dependency.
+ * @param dependency - The dependency the template is dependent on.
+ * @returns The tag name to use in markup.
+ * @beta
+ */
+export function tagFor(dependency) {
+    if (typeof dependency === 'string') {
+        return dependency;
+    }
+    if (typeof dependency === 'function') {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        dependency = FASTElementDefinition.forType(dependency); // < using forType instead of getByType for now...
+        if (!dependency) {
+            throw new Error('Missing FASTElement definition.');
+        }
+    }
+    return dependency.name;
+}

package/dist/esm/progress/index.js

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

package/dist/esm/progress/progress.js

@@ -0,0 +1,10 @@
+import { defaultProgressConfig, foundationProgressShadowOptions, Progress as FoundationProgress, } from '@genesislcap/foundation-ui';
+import { rapidProgressStyles as styles } from './progress.styles';
+import { rapidProgressTemplate as template } from './progress.template';
+/**
+ * @tagname %%prefix%%-progress
+ */
+export class Progress extends FoundationProgress {
+}
+export const rapidProgress = Progress.compose(Object.assign({ baseName: 'progress', template,
+    styles, shadowOptions: foundationProgressShadowOptions }, defaultProgressConfig));

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

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

package/dist/esm/progress/progress.styles.js

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

package/dist/esm/progress/progress.template.js

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

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

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

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

@@ -0,0 +1,8 @@
+import { foundationProgressRingShadowOptions, ProgressRing as FoundationProgressRing, defaultProgressRingConfig, } from '@genesislcap/foundation-ui';
+import { rapidProgressRingStyles as styles } from './progress-ring.styles';
+import { rapidProgressRingTemplate as template } from './progress-ring.template';
+export class ProgressRing extends FoundationProgressRing {
+}
+export const defaultrapidProgressRingConfig = {};
+export const rapidProgressRing = ProgressRing.compose(Object.assign({ baseName: 'progress-ring', template,
+    styles, shadowOptions: foundationProgressRingShadowOptions }, defaultProgressRingConfig));

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

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

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

@@ -0,0 +1,6 @@
+import { foundationProgressRingStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidProgressRingStyles = (context, definition) => css `
+  ${foundationProgressRingStyles(context, definition)}
+`;
+// TODO: variations in terms of size and gradient needs to be added

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

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

package/dist/esm/provide-design-system.js

@@ -0,0 +1,18 @@
+import { createDesignSystemProxy, provideTokens } from '@genesislcap/foundation-ui';
+import { DesignSystem } from '@microsoft/fast-foundation';
+import * as tokens from './_config/tokens';
+import * as values from './_config/values';
+/**
+ * Provides a design system for the specified element either by returning one that was
+ * already created for that element or creating one.
+ * @param element - The element to root the design system at. By default, this is the body.
+ * @returns rapid Design System
+ * @public
+ */
+export const provideDesignSystem = (element, prefix = 'rapid') => {
+    if (element) {
+        provideTokens(tokens, values, element);
+    }
+    const rapidDesignSystem = DesignSystem.getOrCreate(element).withPrefix(prefix);
+    return createDesignSystemProxy(rapidDesignSystem);
+};

package/dist/esm/radio/index.js

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

package/dist/esm/radio/radio.js

@@ -0,0 +1,10 @@
+import { defaultRadioConfig, foundationRadioShadowOptions, Radio as FoundationRadio, } from '@genesislcap/foundation-ui';
+import { rapidRadioStyles as styles } from './radio.styles';
+import { rapidRadioTemplate as template } from './radio.template';
+/**
+ * @tagname %%prefix%%-radio
+ */
+export class Radio extends FoundationRadio {
+}
+export const rapidRadio = Radio.compose(Object.assign({ baseName: 'radio', template,
+    styles, shadowOptions: foundationRadioShadowOptions }, defaultRadioConfig));

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

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

package/dist/esm/radio/radio.styles.js

@@ -0,0 +1,36 @@
+import { foundationRadioStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const rapidRadioStyles = (context, definition) => css `
+  ${foundationRadioStyles(context, definition)}
+  :host {
+    margin: calc(var(--design-unit) * 2px) 0 calc(var(--design-unit) * 2px) 0;
+  }
+
+  :host .control {
+    background: transparent;
+  }
+
+  :host([aria-checked='true']) .control {
+    background: transparent;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
+  }
+
+  :host .label {
+    padding-inline-start: calc(var(--design-unit) * 2px);
+  }
+
+  :host(:not([disabled])) .control:hover {
+    background: transparent;
+  }
+
+  :host([aria-checked='true']:not([disabled])) .control:hover {
+    background: transparent;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-hover);
+  }
+
+  .checked-indicator,
+  :host([aria-checked='true']:not([disabled])) .control:hover .checked-indicator {
+    background: var(--accent-fill-rest);
+  }
+`;
+// TODO: have to add styles for medium and small variants

package/dist/esm/radio/radio.template.js

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

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

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

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

@@ -0,0 +1,10 @@
+import { defaultRadioGroupConfig, foundationRadioGroupShadowOptions, RadioGroup as FoundationRadioGroup, } from '@genesislcap/foundation-ui';
+import { rapidRadioGroupStyles as styles } from './radio-group.styles';
+import { rapidRadioGroupTemplate as template } from './radio-group.template';
+/**
+ * @tagname %%prefix%%-radio-group
+ */
+export class RadioGroup extends FoundationRadioGroup {
+}
+export const rapidRadioGroup = RadioGroup.compose(Object.assign({ baseName: 'radio-group', template,
+    styles, shadowOptions: foundationRadioGroupShadowOptions }, defaultRadioGroupConfig));