@mozaic-ds/web-components 1.0.0-beta.7 → 1.1.0

package/dist/components/radiogroup/RadioGroup.svelte.d.ts

@@ -1,15 +1,34 @@
-import type { RadioGroupOption } from './radioGroup.types';
+/**
+ * A radio button is a selection control that allows users to choose a single option from a list of mutually exclusive choices. Unlike checkboxes, only one option can be selected at a time within the same group. Radio Buttons are commonly used in forms, surveys, and settings where a single choice must be made.
+ */
 interface Props {
-    id: string;
-    selectedvalue?: string;
-    options: Array<RadioGroupOption>;
-    legend: string;
-    inline: boolean;
+    /**
+     * The name attribute for the radio element, typically used for form submission.
+     */
+    name: string;
+    /**
+     * The current value of the radio group.
+     */
+    value?: string;
+    /**
+     * list of properties of each radio button of the radio group
+     */
+    options: Array<{
+        id: string;
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }>;
+    /**
+     * If `true`, applies an invalid state to the radio group.
+     */
     isinvalid?: boolean;
-    onchange?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
+    /**
+     * If `true`, make the form element of the group inline.
+     */
+    inline?: boolean;
 }
-declare const RadioGroup: import("svelte").Component<Props, {}, "selectedvalue">;
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
 type RadioGroup = ReturnType<typeof RadioGroup>;
 export default RadioGroup;
 //# sourceMappingURL=RadioGroup.svelte.d.ts.map

package/dist/components/radiogroup/RadioGroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/radiogroup/RadioGroup.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGzD,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAiDH,QAAA,MAAM,UAAU,wDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/radiogroup/RadioGroup.svelte.ts"],"names":[],"mappings":"AAKE;;GAEG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA6BH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/segmentedcontrol/README.md

@@ -0,0 +1,19 @@
+# `m-segmented-control`
+
+A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `selected` | The selected segment index, bound via v-model. | `number` | `$bindable(0)` |
+| `full` | if `true`, the segmented control take the full width. | `boolean` |   |
+| `size` | Determines the size of the segmented control. | `'s'` `'m'` | `s` |
+| `segments*` | An array of objects that allows you to provide all the data needed to generate the content for each segment. | `Array<{ label: string; }>` |   |
+
+## Events
+
+| Name | Description | Type |
+|------|------|-------------|
+| `change` | Emits when the selected segment changes. | `CustomEvent<number>` |
+

package/dist/components/segmentedcontrol/SegmentedControl.js

@@ -0,0 +1,4 @@
+import{v as w,c as C,p as E,a as j,b as l,f as k,t as u,i as h,j as S,k as c,r as v,e as p,g as b,d as D,h as q,m as A}from"../../custom-element.js";import{e as B,i as F}from"../../each.js";import{s as _}from"../../attributes.js";import{b as G}from"../../this.js";var H=k('<button type="button" role="radio"> </button>'),I=k('<div role="radiogroup"></div>');const J={hash:"svelte-1p6odhf",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-segmented-control.svelte-1p6odhf {display:inline-flex;background-color:var(--segmented-control-color-background-default, #ffffff);border:1px solid var(--segmented-control-color-border, #cccccc);border-radius:3rem;height:2rem;padding:0.25rem;box-sizing:border-box;gap:0.25rem;}.mc-segmented-control__segment.svelte-1p6odhf {display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;color:var(--segmented-control-color-text-default, #666666);cursor:pointer;font-family:inherit;font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, 0.875rem);padding:0 1rem;border-radius:3rem;height:1.5rem;width:100%;transition:background-color 0.3s ease;}.mc-segmented-control__segment.svelte-1p6odhf:not(.mc-segmented-control__segment--selected):hover {background-color:var(--segmented-control-color-background-hover, rgba(0, 0, 0, 0.05));}.mc-segmented-control__segment--selected.svelte-1p6odhf {color:var(--segmented-control-color-text-selected, #ffffff);background-color:var(--segmented-control-color-background-selected, #464e63);}.mc-segmented-control__segment.svelte-1p6odhf:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-segmented-control--m.svelte-1p6odhf {height:3rem;padding:0.5rem;}.mc-segmented-control--m.svelte-1p6odhf .mc-segmented-control__segment:where(.svelte-1p6odhf) {height:2rem;}.mc-segmented-control--full.svelte-1p6odhf {display:flex;}`};function K(g,r){E(r,!0),j(g,J);let o=l(r,"selected",15,0),d=l(r,"full",7),m=l(r,"size",7,"s"),a=l(r,"segments",7),i;const x=e=>{o(e);const f=new CustomEvent("change",{detail:e,bubbles:!0,composed:!0});i.dispatchEvent(f)};var y={get selected(){return o()},set selected(e=0){o(e),c()},get full(){return d()},set full(e){d(e),c()},get size(){return m()},set size(e="s"){m(e),c()},get segments(){return a()},set segments(e){a(e),c()}},s=I();return B(s,21,a,F,(e,f,n)=>{var t=H();t.__click=()=>x(n);var z=D(t,!0);v(t),u(()=>{p(t,1,b(["mc-segmented-control__segment",o()===n&&"mc-segmented-control__segment--selected"]),"svelte-1p6odhf"),_(t,"tabindex",o()===n?0:-1),_(t,"aria-checked",o()===n?"true":"false"),q(z,A(f).label)}),h(e,t)}),v(s),G(s,e=>i=e,()=>i),u(()=>p(s,1,b(["mc-segmented-control",`mc-segmented-control--${m()}`,d()&&"mc-segmented-control--full"]),"svelte-1p6odhf")),h(g,s),S(y)}w(["click"]);customElements.define("m-segmented-control",C(K,{selected:{},full:{},size:{},segments:{}},[],[],!0));
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/components/segmentedcontrol/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/segmentedcontrol/SegmentedControl.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-segmented-control' }} />\n\n<script lang=\"ts\">\n  /**\n   * A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.\n   *\n   * @event change {CustomEvent<number>} - Emits when the selected segment changes.\n   */\n  interface Props {\n    /**\n     * The selected segment index, bound via v-model.\n     */\n    selected?: number;\n    /**\n     * if `true`, the segmented control take the full width.\n     */\n    full?: boolean;\n    /**\n     * Determines the size of the segmented control.\n     */\n    size?: 's' | 'm';\n    /**\n     * An array of objects that allows you to provide all the data needed to generate the content for each segment.\n     */\n    segments: Array<{\n      /**\n       * The label displayed for the segment.\n       */\n      label: string;\n    }>;\n  }\n\n  let { selected = $bindable(0), full, size = 's', segments }: Props = $props();\n  let element: HTMLElement;\n\n  const onClick = (index: number) => {\n    selected = index;\n\n    const event = new CustomEvent('change', {\n      detail: index,\n      bubbles: true,\n      composed: true,\n    });\n    element.dispatchEvent(event);\n  };\n</script>\n\n<div\n  class={[\n    'mc-segmented-control',\n    `mc-segmented-control--${size}`,\n    full && 'mc-segmented-control--full',\n  ]}\n  role=\"radiogroup\"\n  bind:this={element}\n>\n  {#each segments as segment, index (index)}\n    <button\n      type=\"button\"\n      class={[\n        'mc-segmented-control__segment',\n        selected === index && 'mc-segmented-control__segment--selected',\n      ]}\n      role=\"radio\"\n      tabindex={selected === index ? 0 : -1}\n      aria-checked={selected === index ? 'true' : 'false'}\n      onclick={() => onClick(index)}\n    >\n      {segment.label}\n    </button>\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/segmented-control';\n</style>\n"],"names":["selected","full","$.prop","$$props","size","segments","element","onClick","index","event","$.each","div","segment","button","$.set_attribute","$.set_text","text","$.get","$.bind_this","$$value"],"mappings":";;imDAAA,gBAgCQ,IAAAA,oBAAqB,CAAC,EAAGC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,eAAO,GAAG,EAAEC,EAAQH,EAAAC,EAAA,WAAA,CAAA,EACrDG,QAEEC,EAAWC,GAAkB,CACjCR,EAAWQ,CAAK,EAEV,MAAAC,EAAK,IAAO,YAAY,UAC5B,OAAQD,EACR,QAAS,GACT,SAAU,EAAI,CAAA,EAEhBF,EAAQ,cAAcG,CAAK,CAC7B,mDAZ2B,EAAC,0FAAgB,IAAG,uEAwBxCC,OAAAA,EAAAC,EAAA,GAAAN,OAAYO,EAAOJ,IAAA,WAUPK,EAAA,QAAA,IAAAN,EAAQC,CAAK,qCAN1B,gCACAR,EAAQ,IAAKQ,GAAS,8DAGdM,EAAAD,EAAA,WAAAb,EAAQ,IAAKQ,EAAQ,IAAM,EACvBM,EAAAD,EAAA,eAAAb,EAAQ,IAAKQ,EAAQ,OAAS,OAAO,EAGlDO,EAAAC,EAAAC,EAAAL,CAAO,EAAC,KAAK,kBAdPM,EAAAP,EAAAQ,GAAAb,QAAAA,CAAO,iBALhB,gDACyBF,EAAI,CAAA,GAC7BH,KAAQ,6DANZ"}

package/dist/components/segmentedcontrol/SegmentedControl.spec.js

@@ -0,0 +1,52 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import SegmentedControl from './SegmentedControl.svelte';
+describe('m-segmented-control component', () => {
+    const baseProps = {
+        segments: [{ label: 'Segment 1' }, { label: 'Segment 2' }, { label: 'Segment 3' }],
+        selected: 1,
+        size: 's',
+        full: false,
+    };
+    it('renders correct number of segments with labels', () => {
+        const { getAllByRole } = render(SegmentedControl, {
+            props: baseProps,
+        });
+        const buttons = getAllByRole('radio');
+        expect(buttons.length).toBe(3);
+        expect(buttons[0].textContent).toBe('Segment 1');
+        expect(buttons[1].textContent).toBe('Segment 2');
+        expect(buttons[2].textContent).toBe('Segment 3');
+    });
+    it('sets the correct initial selected segment', () => {
+        const { getAllByRole } = render(SegmentedControl, { props: baseProps });
+        const buttons = getAllByRole('radio');
+        expect(buttons[1].getAttribute('aria-checked')).toBe('true');
+        expect(buttons[1].tabIndex).toBe(0);
+        expect(buttons[0].getAttribute('aria-checked')).toBe('false');
+        expect(buttons[0].tabIndex).toBe(-1);
+    });
+    it('updates selected segment and dispatches event on click', async () => {
+        const { container, getAllByRole } = render(SegmentedControl, {
+            props: baseProps,
+        });
+        const buttons = getAllByRole('radio');
+        const handler = vi.fn();
+        container.firstChild?.addEventListener('change', handler);
+        await fireEvent.click(buttons[2]);
+        expect(handler).toHaveBeenCalledTimes(1);
+        expect(handler.mock.calls[0][0].detail).toBe(2);
+        expect(buttons[2].getAttribute('aria-checked')).toBe('true');
+        expect(buttons[2].tabIndex).toBe(0);
+        expect(buttons[1].getAttribute('aria-checked')).toBe('false');
+        expect(buttons[1].tabIndex).toBe(-1);
+    });
+    it('applies size and full classes correctly', () => {
+        const { container } = render(SegmentedControl, {
+            props: { ...baseProps, size: 'm', full: true },
+        });
+        const rootDiv = container.querySelector('.mc-segmented-control');
+        expect(rootDiv.classList.contains('mc-segmented-control--m')).toBe(true);
+        expect(rootDiv.classList.contains('mc-segmented-control--full')).toBe(true);
+    });
+});

package/dist/components/segmentedcontrol/SegmentedControl.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Size: Story;
+export declare const Full: Story;
+//# sourceMappingURL=SegmentedControl.stories.d.ts.map

package/dist/components/segmentedcontrol/SegmentedControl.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.stories.d.ts","sourceRoot":"","sources":["../../../src/components/segmentedcontrol/SegmentedControl.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IA2CX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC"}

package/dist/components/segmentedcontrol/SegmentedControl.stories.js

@@ -0,0 +1,54 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { action } from 'storybook/actions';
+const meta = {
+    title: 'Action/Segmented Control',
+    component: 'm-segmented-control',
+    argTypes: {
+        size: {
+            control: 'radio',
+            options: ['s', 'm'],
+        },
+        change: {
+            control: false,
+        },
+    },
+    args: {
+        segments: [
+            {
+                label: 'Label',
+            },
+            {
+                label: 'Label',
+            },
+            {
+                label: 'Label',
+            },
+            {
+                label: 'Label',
+            },
+        ],
+    },
+    render: (args) => {
+        const onChange = action('change');
+        return html `
+      <m-segmented-control
+        selected=${ifDefined(args.selected)}
+        full=${ifDefined(args.full)}
+        size=${ifDefined(args.size)}
+        .segments=${ifDefined(args.segments)}
+        @change=${(event) => {
+            onChange(event);
+        }}
+      ></m-segmented-control>
+    `;
+    },
+};
+export default meta;
+export const Default = {};
+export const Size = {
+    args: { size: 'm' },
+};
+export const Full = {
+    args: { full: true },
+};

package/dist/components/segmentedcontrol/SegmentedControl.svelte

@@ -0,0 +1,125 @@
+<svelte:options customElement={{ tag: 'm-segmented-control' }} />
+
+<script lang="ts">
+  /**
+   * A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.
+   *
+   * @event change {CustomEvent<number>} - Emits when the selected segment changes.
+   */
+  interface Props {
+    /**
+     * The selected segment index, bound via v-model.
+     */
+    selected?: number;
+    /**
+     * if `true`, the segmented control take the full width.
+     */
+    full?: boolean;
+    /**
+     * Determines the size of the segmented control.
+     */
+    size?: 's' | 'm';
+    /**
+     * An array of objects that allows you to provide all the data needed to generate the content for each segment.
+     */
+    segments: Array<{
+      /**
+       * The label displayed for the segment.
+       */
+      label: string;
+    }>;
+  }
+
+  let { selected = $bindable(0), full, size = 's', segments }: Props = $props();
+  let element: HTMLElement;
+
+  const onClick = (index: number) => {
+    selected = index;
+
+    const event = new CustomEvent('change', {
+      detail: index,
+      bubbles: true,
+      composed: true,
+    });
+    element.dispatchEvent(event);
+  };
+</script>
+
+<div
+  class={[
+    'mc-segmented-control',
+    `mc-segmented-control--${size}`,
+    full && 'mc-segmented-control--full',
+  ]}
+  role="radiogroup"
+  bind:this={element}
+>
+  {#each segments as segment, index (index)}
+    <button
+      type="button"
+      class={[
+        'mc-segmented-control__segment',
+        selected === index && 'mc-segmented-control__segment--selected',
+      ]}
+      role="radio"
+      tabindex={selected === index ? 0 : -1}
+      aria-checked={selected === index ? 'true' : 'false'}
+      onclick={() => onClick(index)}
+    >
+      {segment.label}
+    </button>
+  {/each}
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-segmented-control {
+  display: inline-flex;
+  background-color: var(--segmented-control-color-background-default, #ffffff);
+  border: 1px solid var(--segmented-control-color-border, #cccccc);
+  border-radius: 3rem;
+  height: 2rem;
+  padding: 0.25rem;
+  box-sizing: border-box;
+  gap: 0.25rem;
+}
+.mc-segmented-control__segment {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border: none;
+  color: var(--segmented-control-color-text-default, #666666);
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: var(--font-weight-semi-bold, 600);
+  font-size: var(--font-size-100, 0.875rem);
+  padding: 0 1rem;
+  border-radius: 3rem;
+  height: 1.5rem;
+  width: 100%;
+  transition: background-color 0.3s ease;
+}
+.mc-segmented-control__segment:not(.mc-segmented-control__segment--selected):hover {
+  background-color: var(--segmented-control-color-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-segmented-control__segment--selected {
+  color: var(--segmented-control-color-text-selected, #ffffff);
+  background-color: var(--segmented-control-color-background-selected, #464e63);
+}
+.mc-segmented-control__segment:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-segmented-control--m {
+  height: 3rem;
+  padding: 0.5rem;
+}
+.mc-segmented-control--m .mc-segmented-control__segment {
+  height: 2rem;
+}
+.mc-segmented-control--full {
+  display: flex;
+}</style>

package/dist/components/segmentedcontrol/SegmentedControl.svelte.d.ts

@@ -0,0 +1,32 @@
+/**
+ * A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.
+ *
+ * @event change {CustomEvent<number>} - Emits when the selected segment changes.
+ */
+interface Props {
+    /**
+     * The selected segment index, bound via v-model.
+     */
+    selected?: number;
+    /**
+     * if `true`, the segmented control take the full width.
+     */
+    full?: boolean;
+    /**
+     * Determines the size of the segmented control.
+     */
+    size?: 's' | 'm';
+    /**
+     * An array of objects that allows you to provide all the data needed to generate the content for each segment.
+     */
+    segments: Array<{
+        /**
+         * The label displayed for the segment.
+         */
+        label: string;
+    }>;
+}
+declare const SegmentedControl: import("svelte").Component<Props, {}, "selected">;
+type SegmentedControl = ReturnType<typeof SegmentedControl>;
+export default SegmentedControl;
+//# sourceMappingURL=SegmentedControl.svelte.d.ts.map

package/dist/components/segmentedcontrol/SegmentedControl.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/segmentedcontrol/SegmentedControl.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC;QACd;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;CACJ;AAwCH,QAAA,MAAM,gBAAgB,mDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/select/README.md

@@ -0,0 +1,18 @@
+# `m-select`
+
+A select component allows users to choose a single option from a predefined list within a native dropdown menu. It helps simplify input by displaying only relevant choices, reducing the need for manual text entry. Select components are commonly used in forms, settings, and filters where structured selection is required.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id*` | A unique identifier for the select, used to associate the label with the form element. | `string` |   |
+| `name` | The name attribute for the select element, used for form submission. | `string` |   |
+| `options*` | Define the available choices for the select element. | `Array<{ id?: string; text: string; value: string` `number; disabled?: boolean; }>` |   |
+| `value` | The current value of the select. | `string` `number` | `$bindable()` |
+| `placeholder` | Text displayed when the select has no selected value. | `string` |   |
+| `isinvalid` | If `true`, the select is marked as invalid. | `boolean` |   |
+| `disabled` | If `true`, the select is disabled and non-interactive. | `boolean` |   |
+| `size` | Determines the size of the select. | `'s'` `'m'` | `m` |
+| `readonly` | If `true`, the select is read-only (cannot be edited). | `boolean` |   |
+

package/dist/components/select/Select.js

@@ -1,7 +1,7 @@
-import{n as D,c as F,p as G,a as H,b as s,v as I,l as J,f as k,s as K,d as w,t as _,u as N,e as O,o as P,m as n,h as z,i as Q,j as t,r as y,w as R,g as j}from"../../custom-element.js";import{i as T}from"../../if.js";import{e as U,i as V}from"../../each.js";import{s as W,d as X}from"../../attributes.js";import{c as Y}from"../../custom-element-forward-events.js";var Z=k("<option disabled selected> </option>"),$=k("<option> </option>"),ee=k("<select><!><!></select>");const re={hash:"svelte-6nznl5",code:`/**
+import{c as j,p as A,a as D,b as a,f as _,d as g,s as F,t as p,i as x,j as q,k as t,r as w,h as E,e as G,g as H,m as n}from"../../custom-element.js";import{i as I}from"../../if.js";import{e as J,i as K}from"../../each.js";import{d as N,s as C}from"../../attributes.js";import{c as O}from"../../custom-element-forward-events.js";var P=_("<option disabled selected> </option>"),Q=_("<option> </option>"),R=_("<select><!><!></select>");const T={hash:"svelte-6nznl5",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-select.svelte-6nznl5 {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--radius-s, 0.25rem);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem;}.mc-select.svelte-6nznl5:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-select.svelte-6nznl5:focus {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-select.svelte-6nznl5:disabled {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}.mc-select--readonly.svelte-6nznl5 {border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none;}.mc-select.is-invalid.svelte-6nznl5 {border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid, #ea302d);}.mc-select.is-invalid.svelte-6nznl5:hover {border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-invalid-hover, #c61112);}.mc-select--s.svelte-6nznl5 {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);height:2rem;padding:0 2rem 0 0.5rem;background-position:right 0.5rem center;}
 
-/* stylelint-enable string-no-newline */`};function oe(E,o){G(o,!0),H(E,re);let c=s(o,"id",7),v=s(o,"valueselected",7,""),d=s(o,"placeholder",7),u=s(o,"size",7,"m"),m=s(o,"isvalid",7,!1),f=s(o,"isinvalid",7,!1),h=s(o,"disabled",7,!1),b=s(o,"required",7,!1),g=s(o,"options",7),p=s(o,"onchange",7),x=s(o,"onblur",7),C=I(J(v()));function B(e,r,a){const i=["mc-select"];return e&&i.push("is-valid"),r&&i.push("is-invalid"),a&&i.push(`mc-select--${a}`),i.join(" ")}var L={get id(){return c()},set id(e){c(e),t()},get valueselected(){return v()},set valueselected(e=""){v(e),t()},get placeholder(){return d()},set placeholder(e){d(e),t()},get size(){return u()},set size(e="m"){u(e),t()},get isvalid(){return m()},set isvalid(e=!1){m(e),t()},get isinvalid(){return f()},set isinvalid(e=!1){f(e),t()},get disabled(){return h()},set disabled(e=!1){h(e),t()},get required(){return b()},set required(e=!1){b(e),t()},get options(){return g()},set options(e){g(e),t()},get onchange(){return p()},set onchange(e){p(e),t()},get onblur(){return x()},set onblur(e){x(e),t()}},l=ee();l.__change=function(...e){var r;(r=p())==null||r.apply(this,e)};var q=w(l);{var M=e=>{var r=Z(),a=w(r);y(r),r.value=r.__value="",_(()=>j(a,`-- ${d()??""} --`)),z(e,r)};T(q,e=>{d()&&e(M)})}var A=K(q);return U(A,17,g,V,(e,r)=>{var a=$(),i=w(a,!0);y(a);var S={};_(()=>{a.disabled=n(r).disabled,j(i,n(r).text),S!==(S=n(r).value)&&(a.value=(a.__value=n(r).value)??"")}),z(e,a)}),y(l),_(e=>{W(l,"id",c()),O(l,1,e,"svelte-6nznl5"),l.disabled=h(),l.required=b()},[()=>N(B(m(),f(),u()))]),P("blur",l,function(...e){var r;(r=x())==null||r.apply(this,e)}),X(l,()=>n(C),e=>R(C,e)),z(E,l),Q(L)}D(["change"]);customElements.define("m-select",F(oe,{options:{attribute:"options",type:"Array"},id:{},valueselected:{},placeholder:{},size:{},isvalid:{},isinvalid:{},disabled:{},required:{},onchange:{},onblur:{}},[],[],!0,Y));
+/* stylelint-enable string-no-newline */`};function U(z,r){A(r,!0),D(z,T);let d=a(r,"id",7),c=a(r,"name",7),v=a(r,"value",15),i=a(r,"placeholder",7),m=a(r,"size",7,"m"),u=a(r,"isinvalid",7),f=a(r,"disabled",7),b=a(r,"readonly",7),h=a(r,"options",7);var B={get id(){return d()},set id(e){d(e),t()},get name(){return c()},set name(e){c(e),t()},get value(){return v()},set value(e){v(e),t()},get placeholder(){return i()},set placeholder(e){i(e),t()},get size(){return m()},set size(e="m"){m(e),t()},get isinvalid(){return u()},set isinvalid(e){u(e),t()},get disabled(){return f()},set disabled(e){f(e),t()},get readonly(){return b()},set readonly(e){b(e),t()},get options(){return h()},set options(e){h(e),t()}},l=R(),y=g(l);{var L=e=>{var o=P(),s=g(o);w(o),o.value=o.__value="",p(()=>E(s,`-- ${i()??""} --`)),x(e,o)};I(y,e=>{i()&&e(L)})}var M=F(y);return J(M,17,h,K,(e,o)=>{var s=Q(),S=g(s,!0);w(s);var k={};p(()=>{s.disabled=n(o).disabled,E(S,n(o).text),k!==(k=n(o).value)&&(s.value=(s.__value=n(o).value)??"")}),x(e,s)}),w(l),p(()=>{C(l,"id",d()),G(l,1,H(["mc-select",`mc-select--${m()}`,b()&&"mc-select--readonly",u()&&"is-invalid"]),"svelte-6nznl5"),C(l,"name",c()),l.disabled=f()}),N(l,v),x(z,l),q(B)}customElements.define("m-select",j(U,{options:{attribute:"options",type:"Array"},id:{},name:{},value:{},placeholder:{},size:{},isinvalid:{},disabled:{},readonly:{}},[],[],!0,O));
 //# sourceMappingURL=Select.js.map

package/dist/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-select',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  import type { SelectOption, SelectSize } from './select.types';\n\n  interface Props {\n    id: string;\n    name: string;\n    valueselected?: string;\n    placeholder: string;\n    size?: SelectSize;\n    isvalid?: boolean;\n    isinvalid?: boolean;\n    disabled?: boolean;\n    required?: boolean;\n    options: Array<SelectOption>;\n    onchange?: (event: Event) => void;\n    onblur?: (event: FocusEvent) => void;\n  }\n\n  let {\n    id,\n    valueselected = '',\n    placeholder,\n    size = 'm',\n    isvalid = false,\n    isinvalid = false,\n    disabled = false,\n    required = false,\n    options,\n    onchange,\n    onblur,\n  }: Props = $props();\n  let valueSelected = $state(valueselected);\n\n  function setClasses(isvalid: boolean, isinvalid: boolean, size: SelectSize): string {\n    const classes = ['mc-select'];\n\n    if(isvalid) {\n      classes.push('is-valid');\n    }\n\n    if (isinvalid) {\n      classes.push('is-invalid');\n    }\n    if (size) {\n      classes.push(`mc-select--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<select\n  {id}\n  class={setClasses(isvalid, isinvalid, size)}\n  {disabled}\n  {required}\n  bind:value={valueSelected}\n  {onchange}\n  {onblur}\n>\n  {#if placeholder}\n    <option value=\"\" disabled selected>\n      -- {placeholder} --\n    </option>\n  {/if}\n\n  {#each options as opt}\n    <option disabled={opt.disabled} value={opt.value}>\n      {opt.text}\n    </option>\n  {/each}\n</select>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","$.prop","$$props","valueselected","placeholder","size","isvalid","isinvalid","disabled","required","options","onchange","onblur","valueSelected","setClasses","classes","$$render","consequent","$.each","node_1","opt","option_1","$.get","$.set_text","text_1","option_1_value","$.clsx","$.bind_select_value","select","$$value","customElementForwardEvents"],"mappings":";;;;;2DAAA,qBA8BIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,wBAAgB,EAAE,EAClBC,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,eAAO,GAAG,EACVC,kBAAU,EAAK,EACfC,oBAAY,EAAK,EACjBC,mBAAW,EAAK,EAChBC,mBAAW,EAAK,EAChBC,EAAOT,EAAAC,EAAA,UAAA,CAAA,EACPS,EAAQV,EAAAC,EAAA,WAAA,CAAA,EACRU,EAAMX,EAAAC,EAAA,SAAA,CAAA,EAEJW,MAAuBV,EAAa,CAAA,CAAA,EAE/B,SAAAW,EAAWR,EAAkBC,EAAoBF,EAA0B,CAC5E,MAAAU,GAAW,WAAW,EAEzB,OAAAT,GACDS,EAAQ,KAAK,UAAU,EAGrBR,GACFQ,EAAQ,KAAK,YAAY,EAEvBV,GACFU,EAAQ,KAAI,cAAeV,CAAI,EAAA,EAG1BU,EAAQ,KAAK,GAAG,CACzB,qGA5BkB,GAAE,wGAEX,IAAG,mDACA,GAAK,uDACH,GAAK,qDACN,GAAK,qDACL,GAAK,6TAoCVX,KAAW,EAAA,KAAA,CAAA,kBAFdA,EAAW,GAAAY,EAAAC,CAAA,eAMTC,OAAAA,EAAAC,EAAA,GAAAT,OAAWU,IAAG,0CACDC,EAAA,SAAAC,EAAAF,CAAG,EAAC,SACnBG,EAAAC,EAAAF,EAAAF,CAAG,EAAC,IAAI,EAD4BK,KAAAA,EAAAH,EAAAF,CAAG,EAAC,SAAJC,EAAA,OAAAA,EAAA,QAAAC,EAAAF,CAAG,EAAC,QAAK,gGAd3C,CAAA,IAAAM,EAAAZ,EAAWR,EAAO,EAAEC,EAAS,EAAEF,EAAI,CAAA,CAAA,CAAA,oEAG9BsB,EAAAC,EAAA,IAAAN,EAAAT,CAAa,OAAbA,EAAagB,CAAA,CAAA,aAP3B,+NAtDYC"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-select',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  /**\n   * A select component allows users to choose a single option from a predefined list within a native dropdown menu. It helps simplify input by displaying only relevant choices, reducing the need for manual text entry. Select components are commonly used in forms, settings, and filters where structured selection is required.\n   */\n  interface Props {\n    /**\n     * A unique identifier for the select, used to associate the label with the form element.\n     */\n    id: string;\n    /**\n     * The name attribute for the select element, used for form submission.\n     */\n    name?: string;\n    /**\n     * Define the available choices for the select element.\n     */\n    options: Array<{\n      id?: string;\n      text: string;\n      value: string | number;\n      disabled?: boolean;\n    }>;\n    /**\n     * The current value of the select.\n     */\n    value?: string | number;\n    /**\n     * Text displayed when the select has no selected value.\n     */\n    placeholder?: string;\n    /**\n     * If `true`, the select is marked as invalid.\n     */\n    isinvalid?: boolean;\n    /**\n     * If `true`, the select is disabled and non-interactive.\n     */\n    disabled?: boolean;\n    /**\n     * Determines the size of the select.\n     */\n    size?: 's' | 'm';\n    /**\n     * If `true`, the select is read-only (cannot be edited).\n     */\n    readonly?: boolean;\n  }\n\n  let {\n    id,\n    name,\n    value = $bindable(),\n    placeholder,\n    size = 'm',\n    isinvalid,\n    disabled,\n    readonly,\n    options,\n  }: Props = $props();\n</script>\n\n<select\n  {id}\n  class={[\n    'mc-select',\n    `mc-select--${size}`,\n    readonly && 'mc-select--readonly',\n    isinvalid && 'is-invalid',\n  ]}\n  {name}\n  {disabled}\n  bind:value\n>\n  {#if placeholder}\n    <option value=\"\" disabled selected>\n      -- {placeholder} --\n    </option>\n  {/if}\n\n  {#each options as option, index (index)}\n    <option disabled={option.disabled} value={option.value}>\n      {option.text}\n    </option>\n  {/each}\n</select>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","$.prop","$$props","name","value","placeholder","size","isinvalid","disabled","readonly","options","$$render","consequent","$.each","node_1","option","option_2","$.get","$.set_text","text_1","option_2_value","customElementForwardEvents"],"mappings":";;;;;0DAAA,oBA4DIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAIF,EAAAC,EAAA,OAAA,CAAA,EACJE,EAAKH,EAAAC,EAAA,QAAA,EAAA,EACLG,EAAWJ,EAAAC,EAAA,cAAA,CAAA,EACXI,eAAO,GAAG,EACVC,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAQP,EAAAC,EAAA,WAAA,CAAA,EACRO,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACRQ,EAAOT,EAAAC,EAAA,UAAA,CAAA,2OAJA,IAAG,mTAsBJG,KAAW,EAAA,KAAA,CAAA,kBAFdA,EAAW,GAAAM,EAAAC,CAAA,eAMTC,OAAAA,EAAAC,EAAA,GAAAJ,OAAWK,IAAM,0CACJC,EAAA,SAAAC,EAAAF,CAAM,EAAC,SACtBG,EAAAC,EAAAF,EAAAF,CAAM,EAAC,IAAI,EAD4BK,KAAAA,EAAAH,EAAAF,CAAM,EAAC,SAAPC,EAAA,OAAAA,EAAA,QAAAC,EAAAF,CAAM,EAAC,QAAK,kDAhBtD,0BACcT,EAAI,CAAA,GAClBG,EAAQ,GAAI,sBACZF,KAAa,mFARjB,+KAhEYc"}

package/dist/components/select/Select.spec.js

@@ -0,0 +1,76 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Select from './Select.svelte';
+describe('m-select component', () => {
+    const baseProps = {
+        id: 'test-select',
+        name: 'test-name',
+        options: [
+            { text: 'Option 1', value: '1' },
+            { text: 'Option 2', value: '2', disabled: true },
+            { text: 'Option 3', value: '3' },
+        ],
+        value: '1',
+    };
+    it('renders a select element with correct options', () => {
+        const { container } = render(Select, { props: baseProps });
+        const select = container.querySelector('select');
+        const options = container.querySelectorAll('option');
+        expect(select).toBeTruthy();
+        expect(options.length).toBe(3);
+        expect(options[0].textContent).toBe('Option 1');
+        expect(options[0].value).toBe('1');
+        expect(options[1].disabled).toBe(true);
+        expect(options[2].value).toBe('3');
+    });
+    it('sets the correct initial value', () => {
+        const { container } = render(Select, { props: baseProps });
+        const select = container.querySelector('select');
+        expect(select.value).toBe('1');
+    });
+    it('updates value on change (with bind:value)', async () => {
+        const { container } = render(Select, {
+            props: { ...baseProps, value: '1' },
+        });
+        const select = container.querySelector('select');
+        await fireEvent.change(select, { target: { value: '3' } });
+        expect(select.value).toBe('3');
+    });
+    it('displays placeholder if provided', () => {
+        const { container } = render(Select, {
+            props: { ...baseProps, placeholder: 'Please select', value: '' },
+        });
+        const placeholderOption = container.querySelector('option');
+        expect(placeholderOption?.textContent).toContain('Please select');
+        expect(placeholderOption?.disabled).toBe(true);
+        expect(placeholderOption?.selected).toBe(true);
+    });
+    it('applies the disabled prop', () => {
+        const { container } = render(Select, {
+            props: { ...baseProps, disabled: true },
+        });
+        const select = container.querySelector('select');
+        expect(select.disabled).toBe(true);
+    });
+    it('applies the readonly class when readonly is true', () => {
+        const { container } = render(Select, {
+            props: { ...baseProps, readonly: true },
+        });
+        const select = container.querySelector('select');
+        expect(select.classList.contains('mc-select--readonly')).toBe(true);
+    });
+    it('applies the is-invalid class when isinvalid is true', () => {
+        const { container } = render(Select, {
+            props: { ...baseProps, isinvalid: true },
+        });
+        const select = container.querySelector('select');
+        expect(select.classList.contains('is-invalid')).toBe(true);
+    });
+    it('applies the correct size class', () => {
+        const { container } = render(Select, {
+            props: { ...baseProps, size: 's' },
+        });
+        const select = container.querySelector('select');
+        expect(select.classList.contains('mc-select--s')).toBe(true);
+    });
+});

package/dist/components/select/Select.stories.d.ts

@@ -1,15 +1,11 @@
-import type { Meta } from '@storybook/html-vite';
-/**
- * A select is a selection tool used in forms, allowing users to choose between multiple predefined options.
- *
- * The `MSelect` component is the **Svelte / WebComponent** implementation of the **Select** component of Mozaic Design System.
- * The full specification of this component is available in [the associated documentation](https://mozaic.adeo.cloud/components/form/select/).
- */
-declare const _default: Meta;
-export default _default;
-export declare const Default: any;
-export declare const Small: any;
-export declare const Disabled: any;
-export declare const Required: any;
-export declare const WithValue: any;
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const WithValue: Story;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
 //# sourceMappingURL=Select.stories.d.ts.map

package/dist/components/select/Select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAW,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBA0CE,IAAI;AAxCT,wBAwCU;AAqBV,eAAO,MAAM,OAAO,KAAoB,CAAC;AAUzC,eAAO,MAAM,KAAK,KAAoB,CAAC;AAOvC,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAQ1C,eAAO,MAAM,QAAQ,KAAoB,CAAC;AAQ1C,eAAO,MAAM,SAAS,KAAoB,CAAC"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/select/Select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,QAAA,MAAM,IAAI,EAAE,IAgEX,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}