@genesislcap/foundation-ui 14.489.0 → 14.489.1-alpha-519bcd2.0

package/dist/dts/base-components.d.ts

@@ -210,6 +210,17 @@ export declare const baseComponents: {
     }, typeof import("./multiselect").Multiselect>;
     foundationNumberField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").NumberFieldOptions>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").NumberFieldOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     foundationOptgroup: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./optgroup").Optgroup>;
+    foundationPill: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
+        baseName: string;
+        template: import("@microsoft/fast-element").ViewTemplate<import("./pill").Pill, any>;
+        styles: import("@microsoft/fast-element").ElementStyles;
+        shadowOptions: ShadowRootInit;
+    }>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
+        baseName: string;
+        template: import("@microsoft/fast-element").ViewTemplate<import("./pill").Pill, any>;
+        styles: import("@microsoft/fast-element").ElementStyles;
+        shadowOptions: ShadowRootInit;
+    }, typeof import("./pill").Pill>;
     foundationPopper: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
         baseName: string;
         styles: import("@microsoft/fast-element").ElementStyles;

package/dist/dts/base-components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-components.d.ts","sourceRoot":"","sources":["../../src/base-components.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAuF5D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAuFJ,SAAS,WAAW,GAAG,EAAE;CAe/C,CAAC"}
+{"version":3,"file":"base-components.d.ts","sourceRoot":"","sources":["../../src/base-components.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAwF5D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAwFJ,SAAS,WAAW,GAAG,EAAE;CAe/C,CAAC"}

package/dist/dts/index.d.ts

@@ -62,6 +62,7 @@ export * from './optgroup';
 export * from './options-datasource';
 export * from './overlays';
 export * from './patterns';
+export * from './pill';
 export * from './popper';
 export * from './progress';
 export * from './progress-ring';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+export * from './pill';
+export * from './pill.styles';
+export * from './pill.template';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pill/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}

package/dist/dts/pill/pill.d.ts

@@ -0,0 +1,58 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare const foundationPillShadowOptions: ShadowRootInit;
+export declare const defaultPillConfig: {};
+/**
+ * @tagname %%prefix%%-pill
+ *
+ * @fires remove - Fired when the remove control is activated.
+ * @fires pill-click - Fired when the pill body (excluding the remove control) is activated.
+ */
+export declare class Pill extends FoundationElement {
+    /**
+     * @attr label - the name of the thing this pill represents, e.g. a filter field name
+     * @example
+     * ```html
+     *  <rapid-pill label="Cpty Desk"></rapid-pill>
+     * ```
+     */
+    label: string;
+    /**
+     * @attr value - the current value shown alongside the label, e.g. "Cpty Desk: EQUITIES"
+     * @example
+     * ```html
+     *  <rapid-pill label="Cpty Desk" value="EQUITIES"></rapid-pill>
+     * ```
+     */
+    value: string;
+    /**
+     * @attr removable - whether the "x" remove control is shown
+     * @default true
+     */
+    removable: boolean;
+    /**
+     * @attr disabled - disables both the pill body and the remove control
+     * @default false
+     */
+    disabled: boolean;
+    handleBodyClick(): void;
+    handleRemoveClick(event: Event): void;
+}
+/**
+ * The Foundation Pill
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-pill\>
+ */
+export declare const foundationPill: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
+    baseName: string;
+    template: import("@microsoft/fast-element").ViewTemplate<Pill, any>;
+    styles: import("@microsoft/fast-element").ElementStyles;
+    shadowOptions: ShadowRootInit;
+}>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
+    baseName: string;
+    template: import("@microsoft/fast-element").ViewTemplate<Pill, any>;
+    styles: import("@microsoft/fast-element").ElementStyles;
+    shadowOptions: ShadowRootInit;
+}, typeof Pill>;
+//# sourceMappingURL=pill.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pill.d.ts","sourceRoot":"","sources":["../../../src/pill/pill.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAK/D,eAAO,MAAM,2BAA2B,EAAE,cAA0B,CAAC;AAErE,eAAO,MAAM,iBAAiB,IAAK,CAAC;AAEpC;;;;;GAKG;AACH,qBAAa,IAAK,SAAQ,iBAAiB;IACzC;;;;;;OAMG;IACG,KAAK,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACG,KAAK,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACwB,SAAS,EAAE,OAAO,CAAQ;IAErD;;;OAGG;IACwB,QAAQ,EAAE,OAAO,CAAS;IAErD,eAAe,IAAI,IAAI;IAOvB,iBAAiB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;CAOtC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;eAMzB,CAAC"}

package/dist/dts/pill/pill.styles.d.ts

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

package/dist/dts/pill/pill.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill.styles.d.ts","sourceRoot":"","sources":["../../../src/pill/pill.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,iDAyEtB,CAAC"}

package/dist/dts/pill/pill.template.d.ts

@@ -0,0 +1,3 @@
+import type { Pill } from './pill';
+export declare const foundationPillTemplate: import("@microsoft/fast-element").ViewTemplate<Pill, any>;
+//# sourceMappingURL=pill.template.d.ts.map

package/dist/dts/pill/pill.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pill.template.d.ts","sourceRoot":"","sources":["../../../src/pill/pill.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AA0CnC,eAAO,MAAM,sBAAsB,2DAElC,CAAC"}

package/dist/dts/react.d.ts

@@ -62,6 +62,7 @@ import type { NumberField as NumberFieldWC } from './number-field/number-field';
 import type { Optgroup as OptgroupWC } from './optgroup/optgroup';
 import type { MultiselectDatasource as MultiselectDatasourceWC } from './options-datasource/multiselect-datasource';
 import type { OptionsDatasource as OptionsDatasourceWC } from './options-datasource/options-datasource';
+import type { Pill as PillWC } from './pill/pill';
 import type { Popper as PopperWC } from './popper/popper';
 import type { ProgressRing as ProgressRingWC } from './progress-ring/progress-ring';
 import type { Progress as ProgressWC } from './progress/progress';
@@ -149,6 +150,15 @@ export declare const ActionsMenu: React.ForwardRefExoticComponent<
 >;
 export type ActionsMenuRef = ActionsMenuWC;
 
+export declare const Accordion: React.ForwardRefExoticComponent<
+  React.PropsWithChildren<
+    Omit<PublicOf<AccordionWC>, 'children' | 'style'> &
+    HTMLWCProps & {
+    }
+  > & React.RefAttributes<AccordionWC>
+>;
+export type AccordionRef = AccordionWC;
+
 export declare const AiCriteriaSearch: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
     Omit<PublicOf<AiCriteriaSearchWC>, 'children' | 'style'> &
@@ -160,15 +170,6 @@ export declare const AiCriteriaSearch: React.ForwardRefExoticComponent<
 >;
 export type AiCriteriaSearchRef = AiCriteriaSearchWC;
 
-export declare const Accordion: React.ForwardRefExoticComponent<
-  React.PropsWithChildren<
-    Omit<PublicOf<AccordionWC>, 'children' | 'style'> &
-    HTMLWCProps & {
-    }
-  > & React.RefAttributes<AccordionWC>
->;
-export type AccordionRef = AccordionWC;
-
 export declare const AiIndicator: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
     Omit<PublicOf<AiIndicatorWC>, 'children' | 'style'> &
@@ -698,6 +699,17 @@ export declare const OptionsDatasource: React.ForwardRefExoticComponent<
 >;
 export type OptionsDatasourceRef = OptionsDatasourceWC;
 
+export declare const Pill: React.ForwardRefExoticComponent<
+  React.PropsWithChildren<
+    Omit<PublicOf<PillWC>, 'children' | 'style'> &
+    HTMLWCProps & {
+      onRemove?: (event: CustomEvent<unknown>) => void;
+      onPillClick?: (event: CustomEvent<unknown>) => void;
+    }
+  > & React.RefAttributes<PillWC>
+>;
+export type PillRef = PillWC;
+
 export declare const Popper: React.ForwardRefExoticComponent<
   React.PropsWithChildren<
     Omit<PublicOf<PopperWC>, 'children' | 'style'> &

package/dist/esm/base-components.js

@@ -51,6 +51,7 @@ import { foundationMultiselect } from './multiselect';
 import { foundationNumberField } from './number-field';
 import { foundationOptgroup } from './optgroup';
 import { foundationSystemHealthOverlay } from './overlays';
+import { foundationPill } from './pill';
 import { foundationPopper } from './popper';
 import { foundationProgress } from './progress';
 import { foundationProgressRing } from './progress-ring';
@@ -135,6 +136,7 @@ export const baseComponents = {
     foundationMultiselect,
     foundationNumberField,
     foundationOptgroup,
+    foundationPill,
     foundationPopper,
     foundationProgress,
     foundationProgressRing,

package/dist/esm/index.js

@@ -62,6 +62,7 @@ export * from './optgroup';
 export * from './options-datasource';
 export * from './overlays';
 export * from './patterns';
+export * from './pill';
 export * from './popper';
 export * from './progress';
 export * from './progress-ring';

package/dist/esm/pill/index.js

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

package/dist/esm/pill/pill.js

@@ -0,0 +1,63 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { pillStyles as styles } from './pill.styles';
+import { foundationPillTemplate as template } from './pill.template';
+// explicitly declaring for extensibility
+export const foundationPillShadowOptions = undefined;
+export const defaultPillConfig = {};
+/**
+ * @tagname %%prefix%%-pill
+ *
+ * @fires remove - Fired when the remove control is activated.
+ * @fires pill-click - Fired when the pill body (excluding the remove control) is activated.
+ */
+export class Pill extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * @attr removable - whether the "x" remove control is shown
+         * @default true
+         */
+        this.removable = true;
+        /**
+         * @attr disabled - disables both the pill body and the remove control
+         * @default false
+         */
+        this.disabled = false;
+    }
+    handleBodyClick() {
+        if (this.disabled) {
+            return;
+        }
+        this.$emit('pill-click');
+    }
+    handleRemoveClick(event) {
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        this.$emit('remove');
+    }
+}
+__decorate([
+    attr
+], Pill.prototype, "label", void 0);
+__decorate([
+    attr
+], Pill.prototype, "value", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], Pill.prototype, "removable", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], Pill.prototype, "disabled", void 0);
+/**
+ * The Foundation Pill
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-pill\>
+ */
+export const foundationPill = Pill.compose(Object.assign({ baseName: 'pill', template,
+    styles, shadowOptions: foundationPillShadowOptions }, defaultPillConfig));

package/dist/esm/pill/pill.styles.js

@@ -0,0 +1,75 @@
+import { css } from '@microsoft/fast-element';
+export const pillStyles = css `
+  :host {
+    --pill-fill: var(--neutral-fill-rest, #e5e5e5);
+    --pill-fill-hover: var(--neutral-fill-hover, #d9d9d9);
+    --pill-foreground: var(--neutral-foreground-rest, #1a1a1a);
+    --pill-border-radius: 12px;
+
+    display: inline-flex;
+  }
+
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    height: 24px;
+    padding: 0 4px 0 10px;
+    border-radius: var(--pill-border-radius);
+    background: var(--pill-fill);
+    color: var(--pill-foreground);
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  .pill[disabled] {
+    opacity: 50%;
+  }
+
+  .pill-body {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .pill-body:disabled {
+    cursor: not-allowed;
+  }
+
+  .pill-label {
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .pill-value {
+    white-space: nowrap;
+  }
+
+  .pill-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    padding: 0;
+  }
+
+  .pill-remove:hover {
+    background: var(--pill-fill-hover);
+  }
+
+  .pill-remove:disabled {
+    cursor: not-allowed;
+  }
+`;

package/dist/esm/pill/pill.template.js

@@ -0,0 +1,38 @@
+import { html, when } from '@microsoft/fast-element';
+import { getPrefix } from '../utils';
+const getPrefixedPillTemplate = (prefix) => html `
+  <div class="pill" part="pill" ?disabled=${(x) => x.disabled}>
+    <button
+      class="pill-body"
+      part="pill-body"
+      type="button"
+      data-test-id="pill-body"
+      ?disabled=${(x) => x.disabled}
+      @click=${(x) => x.handleBodyClick()}
+    >
+      <span class="pill-label" part="pill-label" data-test-id="pill-label">${(x) => x.label}</span>
+      ${when((x) => x.value, html `
+          <span class="pill-value" part="pill-value" data-test-id="pill-value">
+            : ${(x) => x.value}
+          </span>
+        `)}
+      <slot></slot>
+    </button>
+    ${when((x) => x.removable, html `
+        <button
+          class="pill-remove"
+          part="pill-remove"
+          type="button"
+          data-test-id="pill-remove"
+          aria-label="Remove ${(x) => x.label}"
+          ?disabled=${(x) => x.disabled}
+          @click=${(x, c) => x.handleRemoveClick(c.event)}
+        >
+          <${prefix}-icon name="xmark" size="2xs"></${prefix}-icon>
+        </button>
+      `)}
+  </div>
+`;
+export const foundationPillTemplate = html `
+  ${(x) => getPrefixedPillTemplate(getPrefix(x))}
+`;