revotech-ui-kit 0.0.0 → 0.0.2-beta

package/dist/src/components/atoms/input/input.stories.js

@@ -0,0 +1,382 @@
+import { html } from 'lit';
+import './input.atom';
+import '../label/label.atom';
+import '../button/button.atom';
+import { expect, within, waitFor, fn, userEvent } from '@storybook/test';
+const validInputTypes = [
+    'hidden',
+    'text',
+    'search',
+    'tel',
+    'url',
+    'email',
+    'password',
+];
+const validInputSpeceficTypes = [
+    'hidden',
+    'date',
+    'month',
+    'week',
+    'time',
+    'datetime-local',
+    'number',
+    'range',
+    'color',
+    'file',
+];
+export default {
+    component: 'components/input',
+    tags: ['autodocs'],
+};
+const testInputBehavior = async (args, canvasElement, mockHandler) => {
+    const canvas = within(canvasElement);
+    const input = await waitFor(() => canvas.getByTestId('input-id'));
+    if (input.shadowRoot) {
+        const innerInput = input.shadowRoot.querySelector('[data-testchild="children-id"]');
+        if (args.type !== 'file') {
+            if (innerInput instanceof HTMLInputElement) {
+                innerInput.value = args.defaultValue;
+            }
+            expect(innerInput).toHaveAttribute('placeholder', args.placeholder);
+        }
+        // 1. Test: Input should have the correct `disabled` state based on args
+        if (args.disabled) {
+            expect(innerInput).toBeDisabled();
+        }
+        else {
+            expect(innerInput).not.toBeDisabled();
+        }
+        // 2. Test: `type` should be a valid InputType
+        expect(validInputTypes).toContain(args.type);
+        // 3. Test: Input should have correct type attribute
+        expect(innerInput).toHaveAttribute('type', args.type);
+        // 4. Test: Label should have correct `for` attribute linking to the input
+        if (args.label) {
+            const label = await waitFor(() => canvas.getByTestId('label-id'));
+            expect(label).toBeInTheDocument();
+        }
+        // 5.  Button should handle click events when not disabled
+        if (args.ButtonLabel) {
+            const button = await waitFor(() => canvas.getByTestId('button-id'));
+            expect(button).toBeInTheDocument();
+            const innerButton = button.querySelector('[data-testid="children-id"]');
+            if (!args.disabledButton && innerButton) {
+                await userEvent.click(innerButton);
+                if (mockHandler) {
+                    expect(mockHandler).toHaveBeenCalled();
+                }
+            }
+        }
+        // 6. Test: Button should not handle click events when disabled
+        if (args.disabledButton) {
+            expect(mockHandler).not.toHaveBeenCalled();
+        }
+    }
+};
+const testInputSpecificBehavior = async (args, canvasElement, mockHandler) => {
+    const canvas = within(canvasElement);
+    const input = await waitFor(() => canvas.getByTestId('input-id'));
+    if (input.shadowRoot) {
+        const innerInput = input.shadowRoot.querySelector('[data-testchild="children-id"]');
+        // 1. Test: Input should have the correct `disabled` state based on args
+        if (args.disabled) {
+            expect(innerInput).toBeDisabled();
+        }
+        else {
+            expect(innerInput).not.toBeDisabled();
+        }
+        // 2. Test: `type` should be a valid InputType
+        expect(validInputSpeceficTypes).toContain(args.type);
+        // 3. Test: Input should have correct type attribute
+        expect(innerInput).toHaveAttribute('type', args.type);
+        // 4. Test: Label should have correct `for` attribute linking to the input
+        if (args.label) {
+            const label = await waitFor(() => canvas.getByTestId('label-id'));
+            expect(label).toBeInTheDocument();
+        }
+        // 5.  Button should handle click events when not disabled
+        if (args.ButtonLabel) {
+            const button = await waitFor(() => canvas.getByTestId('button-id'));
+            expect(button).toBeInTheDocument();
+            const innerButton = button.querySelector('[data-testid="children-id"]');
+            if (!args.disabledButton && innerButton) {
+                await userEvent.click(innerButton);
+                if (mockHandler) {
+                    expect(mockHandler).toHaveBeenCalled();
+                }
+            }
+        }
+        // 6. Test: Button should not handle click events when disabled
+        if (args.disabledButton) {
+            expect(mockHandler).not.toHaveBeenCalled();
+        }
+    }
+};
+const mockOnClickHandler = fn(event => {
+    alert('Hello!');
+});
+const Template = ({ label, ButtonLabel, id, type, placeholder, disabled, disabledButton, defaultValue, }) => {
+    const inputValue = type !== 'file' ? defaultValue : '';
+    if (ButtonLabel && !label) {
+        return html `
+      <div style="display:flex">
+        <rtg-input
+          data-testid="input-id"
+          data-testchild="children-id"
+          id=${id}
+          type=${type}
+          placeholder=${placeholder}
+          ?disabled=${disabled}
+          .value=${inputValue}
+          style="min-width:50%"
+        ></rtg-input>
+        <rtg-button
+          data-testid="button-id"
+          style="margin-inline-start:4px"
+          size="default"
+          ?disabled=${disabledButton}
+          .click=${mockOnClickHandler}
+          >${ButtonLabel}</rtg-button
+        >
+      </div>
+    `;
+    }
+    else if (label && !ButtonLabel) {
+        return html `
+      <div>
+        <rtg-label data-testid="label-id" for="picture">${label}</rtg-label>
+        <rtg-input
+          data-testid="input-id"
+          data-testchild="children-id"
+          type=${type}
+          ?disabled=${disabled}
+          placeholder=${placeholder}
+          .value=${inputValue}
+          style="min-width:50%"
+        ></rtg-input>
+      </div>
+    `;
+    }
+    else if (label && ButtonLabel) {
+        return html `
+      <div style="display: flex; flex-direction: column;">
+        <rtg-label data-testid="label-id" for="picture">${label}</rtg-label>
+        <div style="display:flex">
+          <rtg-input
+            data-testid="input-id"
+            data-testchild="children-id"
+            id=${id}
+            type=${type}
+            placeholder=${placeholder}
+            ?disabled=${disabled}
+            .value=${inputValue}
+            style="min-width:50%"
+          ></rtg-input>
+          <rtg-button
+            data-testid="button-id"
+            style="margin-inline-start:4px"
+            size="default"
+            ?disabled=${disabledButton}
+            .click=${mockOnClickHandler}
+            >${ButtonLabel}</rtg-button
+          >
+        </div>
+      </div>
+    `;
+    }
+    else {
+        return html `
+      <rtg-input
+        data-testid="input-id"
+        data-testchild="children-id"
+        type=${type}
+        ?disabled=${disabled}
+        placeholder=${placeholder}
+        .value=${inputValue}
+        style="min-width:50%"
+      ></rtg-input>
+    `;
+    }
+};
+const TemplateSpecific = ({ label, ButtonLabel, id, type, value, disabled, disabledButton, }) => {
+    if (ButtonLabel && !label) {
+        return html `
+      <div style="display:flex">
+        <rtg-input
+          data-testid="input-id"
+          data-testchild="children-id"
+          id=${id}
+          type=${type}
+          ?disabled=${disabled}
+          .value=${value}
+          style="min-width:50%"
+        ></rtg-input>
+        <rtg-button
+          data-testid="button-id"
+          style="margin-inline-start:4px"
+          size="default"
+          ?disabled=${disabledButton}
+          .click=${mockOnClickHandler}
+          >${ButtonLabel}</rtg-button
+        >
+      </div>
+    `;
+    }
+    else if (label && !ButtonLabel) {
+        return html `
+      <div>
+        <rtg-label data-testid="label-id" for="picture">${label}</rtg-label>
+        <rtg-input
+          data-testid="input-id"
+          data-testchild="children-id"
+          type=${type}
+          ?disabled=${disabled}
+          .value=${value}
+          style="min-width:50%"
+        ></rtg-input>
+      </div>
+    `;
+    }
+    else if (label && ButtonLabel) {
+        return html `
+      <div style="display: flex; flex-direction: column;">
+        <rtg-label data-testid="label-id" for="picture">${label}</rtg-label>
+        <div style="display:flex">
+          <rtg-input
+            data-testid="input-id"
+            data-testchild="children-id"
+            id=${id}
+            type=${type}
+            ?disabled=${disabled}
+            .value=${value}
+            style="min-width:50%"
+          ></rtg-input>
+          <rtg-button
+            data-testid="button-id"
+            style="margin-inline-start:4px"
+            size="default"
+            ?disabled=${disabledButton}
+            .click=${mockOnClickHandler}
+            >${ButtonLabel}</rtg-button
+          >
+        </div>
+      </div>
+    `;
+    }
+    else {
+        return html `
+      <rtg-input
+        data-testid="input-id"
+        data-testchild="children-id"
+        type=${type}
+        ?disabled=${disabled}
+        .value=${value}
+        style="min-width:50%"
+      ></rtg-input>
+    `;
+    }
+};
+export const Input = Template.bind({});
+Input.args = {
+    disabled: false,
+    type: 'text',
+    placeholder: 'Enter text',
+    defaultValue: '',
+    label: '',
+    ButtonLabel: 'Subscribe',
+    disabledButton: false,
+    id: '',
+};
+Input.parameters = {
+    docs: {
+        source: {
+            transform: (code) => {
+                // Handling boolean attributes: if true, render without value, if false, omit the attribute
+                const updatedCode = code
+                    .replace(/disabled=""/g, 'disabled=true')
+                    .replace(/disabled="false"/g, '');
+                return updatedCode;
+            },
+        },
+    },
+};
+Input.argTypes = {
+    disabled: {
+        control: 'boolean',
+        description: 'Determines whether the input is disabled (unclickable).',
+        table: {
+            defaultValue: { summary: 'false' },
+        },
+    },
+    disabledButton: {
+        control: 'boolean',
+        description: 'Indicates whether the button should be disabled, preventing user interaction.',
+        table: {
+            defaultValue: { summary: 'false' },
+        },
+    },
+    type: {
+        control: { type: 'select' },
+        description: 'Specifies the type of the input, such as text, email, password, etc.',
+        options: validInputTypes,
+    },
+    placeholder: {
+        control: 'text',
+        description: 'Provides a short hint that describes the expected value of the input.',
+        if: { arg: 'type', neq: 'file' },
+    },
+    defaultValue: {
+        control: 'text',
+        description: 'Sets the initial value of the input field.',
+        if: { arg: 'type', neq: 'file' },
+    },
+    label: {
+        control: 'text',
+        description: 'Defines the label text for the input field.',
+    },
+    ButtonLabel: {
+        control: 'text',
+        description: 'Defines the label text for the associated button.',
+    },
+    id: {
+        control: 'text',
+        description: 'Unique identifier for the input element.',
+    },
+};
+Input.play = async ({ args, canvasElement }) => {
+    try {
+        await testInputBehavior(args, canvasElement, mockOnClickHandler);
+    }
+    catch (error) {
+        console.error('An error occurred during the play function:', error);
+    }
+};
+export const SpecificInput = TemplateSpecific.bind({});
+SpecificInput.args = {
+    disabled: false,
+    type: 'file',
+    label: '',
+    ButtonLabel: 'Subscribe',
+    disabledButton: false,
+    id: '',
+};
+SpecificInput.argTypes = {
+    disabled: { control: 'boolean' },
+    disabledButton: { control: 'boolean' },
+    type: {
+        control: { type: 'select' },
+        options: validInputSpeceficTypes,
+    },
+    label: { control: 'text' },
+    ButtonLabel: { control: 'text' },
+    id: { control: 'text' },
+};
+SpecificInput.play = async ({ args, canvasElement }) => {
+    try {
+        await testInputSpecificBehavior(args, canvasElement, mockOnClickHandler);
+    }
+    catch (error) {
+        console.error('An error occurred during the play function:', error);
+    }
+};
+//# sourceMappingURL=input.stories.js.map

package/dist/src/components/atoms/input/input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/input/input.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,cAAc,CAAC;AACtB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,uBAAuB,CAAC;AAO/B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEzE,MAAM,eAAe,GAAsB;IACzC,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,KAAK;IACL,KAAK;IACL,OAAO;IACP,UAAU;CACX,CAAC;AAEF,MAAM,uBAAuB,GAAwB;IACnD,QAAQ;IACR,MAAM;IACN,OAAO;IACP,MAAM;IACN,MAAM;IACN,gBAAgB;IAChB,QAAQ;IACR,OAAO;IACP,OAAO;IACP,MAAM;CACP,CAAC;AAEF,eAAe;IACb,SAAS,EAAE,kBAAkB;IAC7B,IAAI,EAAE,CAAC,UAAU,CAAC;CACX,CAAC;AAEV,MAAM,iBAAiB,GAAG,KAAK,EAC7B,IAAe,EACf,aAA0B,EAC1B,WAAgB,EAChB,EAAE;IACF,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IACrC,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;IAElE,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;QACrB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAC/C,gCAAgC,CACjC,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,IAAI,UAAU,YAAY,gBAAgB,EAAE,CAAC;gBAC3C,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;YACvC,CAAC;YACD,MAAM,CAAC,UAAU,CAAC,CAAC,eAAe,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACtE,CAAC;QAED,wEAAwE;QACxE,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,MAAM,CAAC,UAAU,CAAC,CAAC,YAAY,EAAE,CAAC;QACpC,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;QACxC,CAAC;QAED,8CAA8C;QAC9C,MAAM,CAAC,eAAe,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE7C,oDAAoD;QACpD,MAAM,CAAC,UAAU,CAAC,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAEtD,0EAA0E;QAC1E,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;YAClE,MAAM,CAAC,KAAK,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACpC,CAAC;QAED,0DAA0D;QAC1D,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAM,MAAM,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC;YACpE,MAAM,CAAC,MAAM,CAAC,CAAC,iBAAiB,EAAE,CAAC;YACnC,MAAM,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;YACxE,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,WAAW,EAAE,CAAC;gBACxC,MAAM,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;gBACnC,IAAI,WAAW,EAAE,CAAC;oBAChB,MAAM,CAAC,WAAW,CAAC,CAAC,gBAAgB,EAAE,CAAC;gBACzC,CAAC;YACH,CAAC;QACH,CAAC;QAED,+DAA+D;QAC/D,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;QAC7C,CAAC;IACH,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,KAAK,EACrC,IAAuB,EACvB,aAA0B,EAC1B,WAAgB,EAChB,EAAE;IACF,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IACrC,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;IAElE,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;QACrB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAC/C,gCAAgC,CACjC,CAAC;QAEF,wEAAwE;QACxE,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,MAAM,CAAC,UAAU,CAAC,CAAC,YAAY,EAAE,CAAC;QACpC,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;QACxC,CAAC;QAED,8CAA8C;QAC9C,MAAM,CAAC,uBAAuB,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAErD,oDAAoD;QACpD,MAAM,CAAC,UAAU,CAAC,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAEtD,0EAA0E;QAC1E,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;YAClE,MAAM,CAAC,KAAK,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACpC,CAAC;QAED,0DAA0D;QAC1D,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAM,MAAM,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC;YACpE,MAAM,CAAC,MAAM,CAAC,CAAC,iBAAiB,EAAE,CAAC;YACnC,MAAM,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;YACxE,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,WAAW,EAAE,CAAC;gBACxC,MAAM,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;gBACnC,IAAI,WAAW,EAAE,CAAC;oBAChB,MAAM,CAAC,WAAW,CAAC,CAAC,gBAAgB,EAAE,CAAC;gBACzC,CAAC;YACH,CAAC;QACH,CAAC;QAED,+DAA+D;QAC/D,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;QAC7C,CAAC;IACH,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE;IACpC,KAAK,CAAC,QAAQ,CAAC,CAAC;AAClB,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAY,CAAC,EACzB,KAAK,EACL,WAAW,EACX,EAAE,EACF,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,cAAc,EACd,YAAY,GACb,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACvD,IAAI,WAAW,IAAI,CAAC,KAAK,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAA;;;;;eAKA,EAAE;iBACA,IAAI;wBACG,WAAW;sBACb,QAAQ;mBACX,UAAU;;;;;;;sBAOP,cAAc;mBACjB,kBAAkB;aACxB,WAAW;;;KAGnB,CAAC;IACJ,CAAC;SAAM,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;QACjC,OAAO,IAAI,CAAA;;0DAE2C,KAAK;;;;iBAI9C,IAAI;sBACC,QAAQ;wBACN,WAAW;mBAChB,UAAU;;;;KAIxB,CAAC;IACJ,CAAC;SAAM,IAAI,KAAK,IAAI,WAAW,EAAE,CAAC;QAChC,OAAO,IAAI,CAAA;;0DAE2C,KAAK;;;;;iBAK9C,EAAE;mBACA,IAAI;0BACG,WAAW;wBACb,QAAQ;qBACX,UAAU;;;;;;;wBAOP,cAAc;qBACjB,kBAAkB;eACxB,WAAW;;;;KAIrB,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,IAAI,CAAA;;;;eAIA,IAAI;oBACC,QAAQ;sBACN,WAAW;iBAChB,UAAU;;;KAGtB,CAAC;IACJ,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAY,CAAC,EACjC,KAAK,EACL,WAAW,EACX,EAAE,EACF,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,cAAc,GACf,EAAE,EAAE;IACH,IAAI,WAAW,IAAI,CAAC,KAAK,EAAE,CAAC;QAC1B,OAAO,IAAI,CAAA;;;;;eAKA,EAAE;iBACA,IAAI;sBACC,QAAQ;mBACX,KAAK;;;;;;;sBAOF,cAAc;mBACjB,kBAAkB;aACxB,WAAW;;;KAGnB,CAAC;IACJ,CAAC;SAAM,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;QACjC,OAAO,IAAI,CAAA;;0DAE2C,KAAK;;;;iBAI9C,IAAI;sBACC,QAAQ;mBACX,KAAK;;;;KAInB,CAAC;IACJ,CAAC;SAAM,IAAI,KAAK,IAAI,WAAW,EAAE,CAAC;QAChC,OAAO,IAAI,CAAA;;0DAE2C,KAAK;;;;;iBAK9C,EAAE;mBACA,IAAI;wBACC,QAAQ;qBACX,KAAK;;;;;;;wBAOF,cAAc;qBACjB,kBAAkB;eACxB,WAAW;;;;KAIrB,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,OAAO,IAAI,CAAA;;;;eAIA,IAAI;oBACC,QAAQ;iBACX,KAAK;;;KAGjB,CAAC;IACJ,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEvC,KAAK,CAAC,IAAI,GAAG;IACX,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,YAAY;IACzB,YAAY,EAAE,EAAE;IAChB,KAAK,EAAE,EAAE;IACT,WAAW,EAAE,WAAW;IACxB,cAAc,EAAE,KAAK;IACrB,EAAE,EAAE,EAAE;CACP,CAAC;AAEF,KAAK,CAAC,UAAU,GAAG;IACjB,IAAI,EAAE;QACJ,MAAM,EAAE;YACN,SAAS,EAAE,CAAC,IAAY,EAAE,EAAE;gBAC1B,2FAA2F;gBAC3F,MAAM,WAAW,GAAG,IAAI;qBACrB,OAAO,CAAC,cAAc,EAAE,eAAe,CAAC;qBACxC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;gBAEpC,OAAO,WAAW,CAAC;YACrB,CAAC;SACF;KACF;CACF,CAAC;AAEF,KAAK,CAAC,QAAQ,GAAG;IACf,QAAQ,EAAE;QACR,OAAO,EAAE,SAAS;QAClB,WAAW,EAAE,yDAAyD;QACtE,KAAK,EAAE;YACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;SACnC;KACF;IACD,cAAc,EAAE;QACd,OAAO,EAAE,SAAS;QAClB,WAAW,EACT,+EAA+E;QACjF,KAAK,EAAE;YACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;SACnC;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC3B,WAAW,EACT,sEAAsE;QACxE,OAAO,EAAE,eAAe;KACzB;IACD,WAAW,EAAE;QACX,OAAO,EAAE,MAAM;QACf,WAAW,EACT,uEAAuE;QACzE,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE;KACjC;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,MAAM;QACf,WAAW,EAAE,4CAA4C;QACzD,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE;KACjC;IACD,KAAK,EAAE;QACL,OAAO,EAAE,MAAM;QACf,WAAW,EAAE,6CAA6C;KAC3D;IACD,WAAW,EAAE;QACX,OAAO,EAAE,MAAM;QACf,WAAW,EAAE,mDAAmD;KACjE;IACD,EAAE,EAAE;QACF,OAAO,EAAE,MAAM;QACf,WAAW,EAAE,0CAA0C;KACxD;CACF,CAAC;AAEF,KAAK,CAAC,IAAI,GAAG,KAAK,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE;IAC7C,IAAI,CAAC;QACH,MAAM,iBAAiB,CACrB,IAAiB,EACjB,aAAa,EACb,kBAAkB,CACnB,CAAC;IACJ,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,6CAA6C,EAAE,KAAK,CAAC,CAAC;IACtE,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEvD,aAAa,CAAC,IAAI,GAAG;IACnB,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,EAAE;IACT,WAAW,EAAE,WAAW;IACxB,cAAc,EAAE,KAAK;IACrB,EAAE,EAAE,EAAE;CACP,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;IAChC,cAAc,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;IACtC,IAAI,EAAE;QACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;QAC3B,OAAO,EAAE,uBAAuB;KACjC;IACD,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IAC1B,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IAChC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;CACxB,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG,KAAK,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE;IACrD,IAAI,CAAC;QACH,MAAM,yBAAyB,CAC7B,IAAyB,EACzB,aAAa,EACb,kBAAkB,CACnB,CAAC;IACJ,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,6CAA6C,EAAE,KAAK,CAAC,CAAC;IACtE,CAAC;AACH,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport './input.atom';\nimport '../label/label.atom';\nimport '../button/button.atom';\nimport {\n  InputNormalType,\n  InputArgs,\n  InputSpecificType,\n  InputSpecificArgs,\n} from './input.type';\nimport { expect, within, waitFor, fn, userEvent } from '@storybook/test';\n\nconst validInputTypes: InputNormalType[] = [\n  'hidden',\n  'text',\n  'search',\n  'tel',\n  'url',\n  'email',\n  'password',\n];\n\nconst validInputSpeceficTypes: InputSpecificType[] = [\n  'hidden',\n  'date',\n  'month',\n  'week',\n  'time',\n  'datetime-local',\n  'number',\n  'range',\n  'color',\n  'file',\n];\n\nexport default {\n  component: 'components/input',\n  tags: ['autodocs'],\n} as Meta;\n\nconst testInputBehavior = async (\n  args: InputArgs,\n  canvasElement: HTMLElement,\n  mockHandler: any\n) => {\n  const canvas = within(canvasElement);\n  const input = await waitFor(() => canvas.getByTestId('input-id'));\n\n  if (input.shadowRoot) {\n    const innerInput = input.shadowRoot.querySelector(\n      '[data-testchild=\"children-id\"]'\n    );\n\n    if (args.type !== 'file') {\n      if (innerInput instanceof HTMLInputElement) {\n        innerInput.value = args.defaultValue;\n      }\n      expect(innerInput).toHaveAttribute('placeholder', args.placeholder);\n    }\n\n    // 1. Test: Input should have the correct `disabled` state based on args\n    if (args.disabled) {\n      expect(innerInput).toBeDisabled();\n    } else {\n      expect(innerInput).not.toBeDisabled();\n    }\n\n    // 2. Test: `type` should be a valid InputType\n    expect(validInputTypes).toContain(args.type);\n\n    // 3. Test: Input should have correct type attribute\n    expect(innerInput).toHaveAttribute('type', args.type);\n\n    // 4. Test: Label should have correct `for` attribute linking to the input\n    if (args.label) {\n      const label = await waitFor(() => canvas.getByTestId('label-id'));\n      expect(label).toBeInTheDocument();\n    }\n\n    // 5.  Button should handle click events when not disabled\n    if (args.ButtonLabel) {\n      const button = await waitFor(() => canvas.getByTestId('button-id'));\n      expect(button).toBeInTheDocument();\n      const innerButton = button.querySelector('[data-testid=\"children-id\"]');\n      if (!args.disabledButton && innerButton) {\n        await userEvent.click(innerButton);\n        if (mockHandler) {\n          expect(mockHandler).toHaveBeenCalled();\n        }\n      }\n    }\n\n    // 6. Test: Button should not handle click events when disabled\n    if (args.disabledButton) {\n      expect(mockHandler).not.toHaveBeenCalled();\n    }\n  }\n};\n\nconst testInputSpecificBehavior = async (\n  args: InputSpecificArgs,\n  canvasElement: HTMLElement,\n  mockHandler: any\n) => {\n  const canvas = within(canvasElement);\n  const input = await waitFor(() => canvas.getByTestId('input-id'));\n\n  if (input.shadowRoot) {\n    const innerInput = input.shadowRoot.querySelector(\n      '[data-testchild=\"children-id\"]'\n    );\n\n    // 1. Test: Input should have the correct `disabled` state based on args\n    if (args.disabled) {\n      expect(innerInput).toBeDisabled();\n    } else {\n      expect(innerInput).not.toBeDisabled();\n    }\n\n    // 2. Test: `type` should be a valid InputType\n    expect(validInputSpeceficTypes).toContain(args.type);\n\n    // 3. Test: Input should have correct type attribute\n    expect(innerInput).toHaveAttribute('type', args.type);\n\n    // 4. Test: Label should have correct `for` attribute linking to the input\n    if (args.label) {\n      const label = await waitFor(() => canvas.getByTestId('label-id'));\n      expect(label).toBeInTheDocument();\n    }\n\n    // 5.  Button should handle click events when not disabled\n    if (args.ButtonLabel) {\n      const button = await waitFor(() => canvas.getByTestId('button-id'));\n      expect(button).toBeInTheDocument();\n      const innerButton = button.querySelector('[data-testid=\"children-id\"]');\n      if (!args.disabledButton && innerButton) {\n        await userEvent.click(innerButton);\n        if (mockHandler) {\n          expect(mockHandler).toHaveBeenCalled();\n        }\n      }\n    }\n\n    // 6. Test: Button should not handle click events when disabled\n    if (args.disabledButton) {\n      expect(mockHandler).not.toHaveBeenCalled();\n    }\n  }\n};\n\nconst mockOnClickHandler = fn(event => {\n  alert('Hello!');\n});\n\nconst Template: StoryFn = ({\n  label,\n  ButtonLabel,\n  id,\n  type,\n  placeholder,\n  disabled,\n  disabledButton,\n  defaultValue,\n}) => {\n  const inputValue = type !== 'file' ? defaultValue : '';\n  if (ButtonLabel && !label) {\n    return html`\n      <div style=\"display:flex\">\n        <rtg-input\n          data-testid=\"input-id\"\n          data-testchild=\"children-id\"\n          id=${id}\n          type=${type}\n          placeholder=${placeholder}\n          ?disabled=${disabled}\n          .value=${inputValue}\n          style=\"min-width:50%\"\n        ></rtg-input>\n        <rtg-button\n          data-testid=\"button-id\"\n          style=\"margin-inline-start:4px\"\n          size=\"default\"\n          ?disabled=${disabledButton}\n          .click=${mockOnClickHandler}\n          >${ButtonLabel}</rtg-button\n        >\n      </div>\n    `;\n  } else if (label && !ButtonLabel) {\n    return html`\n      <div>\n        <rtg-label data-testid=\"label-id\" for=\"picture\">${label}</rtg-label>\n        <rtg-input\n          data-testid=\"input-id\"\n          data-testchild=\"children-id\"\n          type=${type}\n          ?disabled=${disabled}\n          placeholder=${placeholder}\n          .value=${inputValue}\n          style=\"min-width:50%\"\n        ></rtg-input>\n      </div>\n    `;\n  } else if (label && ButtonLabel) {\n    return html`\n      <div style=\"display: flex; flex-direction: column;\">\n        <rtg-label data-testid=\"label-id\" for=\"picture\">${label}</rtg-label>\n        <div style=\"display:flex\">\n          <rtg-input\n            data-testid=\"input-id\"\n            data-testchild=\"children-id\"\n            id=${id}\n            type=${type}\n            placeholder=${placeholder}\n            ?disabled=${disabled}\n            .value=${inputValue}\n            style=\"min-width:50%\"\n          ></rtg-input>\n          <rtg-button\n            data-testid=\"button-id\"\n            style=\"margin-inline-start:4px\"\n            size=\"default\"\n            ?disabled=${disabledButton}\n            .click=${mockOnClickHandler}\n            >${ButtonLabel}</rtg-button\n          >\n        </div>\n      </div>\n    `;\n  } else {\n    return html`\n      <rtg-input\n        data-testid=\"input-id\"\n        data-testchild=\"children-id\"\n        type=${type}\n        ?disabled=${disabled}\n        placeholder=${placeholder}\n        .value=${inputValue}\n        style=\"min-width:50%\"\n      ></rtg-input>\n    `;\n  }\n};\n\nconst TemplateSpecific: StoryFn = ({\n  label,\n  ButtonLabel,\n  id,\n  type,\n  value,\n  disabled,\n  disabledButton,\n}) => {\n  if (ButtonLabel && !label) {\n    return html`\n      <div style=\"display:flex\">\n        <rtg-input\n          data-testid=\"input-id\"\n          data-testchild=\"children-id\"\n          id=${id}\n          type=${type}\n          ?disabled=${disabled}\n          .value=${value}\n          style=\"min-width:50%\"\n        ></rtg-input>\n        <rtg-button\n          data-testid=\"button-id\"\n          style=\"margin-inline-start:4px\"\n          size=\"default\"\n          ?disabled=${disabledButton}\n          .click=${mockOnClickHandler}\n          >${ButtonLabel}</rtg-button\n        >\n      </div>\n    `;\n  } else if (label && !ButtonLabel) {\n    return html`\n      <div>\n        <rtg-label data-testid=\"label-id\" for=\"picture\">${label}</rtg-label>\n        <rtg-input\n          data-testid=\"input-id\"\n          data-testchild=\"children-id\"\n          type=${type}\n          ?disabled=${disabled}\n          .value=${value}\n          style=\"min-width:50%\"\n        ></rtg-input>\n      </div>\n    `;\n  } else if (label && ButtonLabel) {\n    return html`\n      <div style=\"display: flex; flex-direction: column;\">\n        <rtg-label data-testid=\"label-id\" for=\"picture\">${label}</rtg-label>\n        <div style=\"display:flex\">\n          <rtg-input\n            data-testid=\"input-id\"\n            data-testchild=\"children-id\"\n            id=${id}\n            type=${type}\n            ?disabled=${disabled}\n            .value=${value}\n            style=\"min-width:50%\"\n          ></rtg-input>\n          <rtg-button\n            data-testid=\"button-id\"\n            style=\"margin-inline-start:4px\"\n            size=\"default\"\n            ?disabled=${disabledButton}\n            .click=${mockOnClickHandler}\n            >${ButtonLabel}</rtg-button\n          >\n        </div>\n      </div>\n    `;\n  } else {\n    return html`\n      <rtg-input\n        data-testid=\"input-id\"\n        data-testchild=\"children-id\"\n        type=${type}\n        ?disabled=${disabled}\n        .value=${value}\n        style=\"min-width:50%\"\n      ></rtg-input>\n    `;\n  }\n};\n\nexport const Input = Template.bind({});\n\nInput.args = {\n  disabled: false,\n  type: 'text',\n  placeholder: 'Enter text',\n  defaultValue: '',\n  label: '',\n  ButtonLabel: 'Subscribe',\n  disabledButton: false,\n  id: '',\n};\n\nInput.parameters = {\n  docs: {\n    source: {\n      transform: (code: string) => {\n        // Handling boolean attributes: if true, render without value, if false, omit the attribute\n        const updatedCode = code\n          .replace(/disabled=\"\"/g, 'disabled=true')\n          .replace(/disabled=\"false\"/g, '');\n\n        return updatedCode;\n      },\n    },\n  },\n};\n\nInput.argTypes = {\n  disabled: {\n    control: 'boolean',\n    description: 'Determines whether the input is disabled (unclickable).',\n    table: {\n      defaultValue: { summary: 'false' },\n    },\n  },\n  disabledButton: {\n    control: 'boolean',\n    description:\n      'Indicates whether the button should be disabled, preventing user interaction.',\n    table: {\n      defaultValue: { summary: 'false' },\n    },\n  },\n  type: {\n    control: { type: 'select' },\n    description:\n      'Specifies the type of the input, such as text, email, password, etc.',\n    options: validInputTypes,\n  },\n  placeholder: {\n    control: 'text',\n    description:\n      'Provides a short hint that describes the expected value of the input.',\n    if: { arg: 'type', neq: 'file' },\n  },\n  defaultValue: {\n    control: 'text',\n    description: 'Sets the initial value of the input field.',\n    if: { arg: 'type', neq: 'file' },\n  },\n  label: {\n    control: 'text',\n    description: 'Defines the label text for the input field.',\n  },\n  ButtonLabel: {\n    control: 'text',\n    description: 'Defines the label text for the associated button.',\n  },\n  id: {\n    control: 'text',\n    description: 'Unique identifier for the input element.',\n  },\n};\n\nInput.play = async ({ args, canvasElement }) => {\n  try {\n    await testInputBehavior(\n      args as InputArgs,\n      canvasElement,\n      mockOnClickHandler\n    );\n  } catch (error) {\n    console.error('An error occurred during the play function:', error);\n  }\n};\n\nexport const SpecificInput = TemplateSpecific.bind({});\n\nSpecificInput.args = {\n  disabled: false,\n  type: 'file',\n  label: '',\n  ButtonLabel: 'Subscribe',\n  disabledButton: false,\n  id: '',\n};\n\nSpecificInput.argTypes = {\n  disabled: { control: 'boolean' },\n  disabledButton: { control: 'boolean' },\n  type: {\n    control: { type: 'select' },\n    options: validInputSpeceficTypes,\n  },\n  label: { control: 'text' },\n  ButtonLabel: { control: 'text' },\n  id: { control: 'text' },\n};\n\nSpecificInput.play = async ({ args, canvasElement }) => {\n  try {\n    await testInputSpecificBehavior(\n      args as InputSpecificArgs,\n      canvasElement,\n      mockOnClickHandler\n    );\n  } catch (error) {\n    console.error('An error occurred during the play function:', error);\n  }\n};\n"]}

package/dist/src/components/atoms/input/input.styles.js

@@ -0,0 +1,2 @@
+export const inputStyles = 'flex h-8 w-full rounded-sm border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 input-base';
+//# sourceMappingURL=input.styles.js.map

package/dist/src/components/atoms/input/input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.styles.js","sourceRoot":"","sources":["../../../../../src/components/atoms/input/input.styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GACtB,sTAAsT,CAAC","sourcesContent":["export const inputStyles =\n  'flex h-8 w-full rounded-sm border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 input-base';\n"]}

package/dist/src/components/atoms/input/input.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=input.type.js.map

package/dist/src/components/atoms/input/input.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.type.js","sourceRoot":"","sources":["../../../../../src/components/atoms/input/input.type.ts"],"names":[],"mappings":"","sourcesContent":["export type InputType =\n  | 'hidden'\n  | 'text'\n  | 'search'\n  | 'tel'\n  | 'url'\n  | 'email'\n  | 'password'\n  | 'date'\n  | 'month'\n  | 'week'\n  | 'time'\n  | 'datetime-local'\n  | 'number'\n  | 'range'\n  | 'color'\n  | 'file';\n\nexport type InputNormalType =\n  | 'hidden'\n  | 'text'\n  | 'search'\n  | 'tel'\n  | 'url'\n  | 'email'\n  | 'password';\n\nexport type InputSpecificType =\n  | 'hidden'\n  | 'date'\n  | 'month'\n  | 'week'\n  | 'time'\n  | 'datetime-local'\n  | 'number'\n  | 'range'\n  | 'color'\n  | 'file';\n\nexport type InputArgs = {\n  disabled: boolean;\n  disabledButton: boolean;\n  type: InputType;\n  placeholder: string;\n  label: string;\n  defaultValue: string;\n  ButtonLabel: string;\n  id: string;\n};\n\nexport type InputSpecificArgs = {\n  disabled: boolean;\n  disabledButton: boolean;\n  type: InputSpecificType;\n  label: string;\n  ButtonLabel: string;\n  id: string;\n};\n"]}

package/dist/src/components/atoms/label/label.atom.js

@@ -0,0 +1,68 @@
+var Label_1;
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { BaseElement, cn } from '../../../helpers';
+import { TWStyles } from '../../../styles';
+import { labelStyle } from './label.style';
+import { spread } from '@open-wc/lit-helpers';
+let Label = Label_1 = class Label extends BaseElement {
+    constructor() {
+        super(...arguments);
+        this.for = '';
+    }
+    firstUpdated(_changedProperties) {
+        const variables = ['--label-text-color,--label-padding'];
+        this.applyCustomClass(variables, 'label', 'label-base');
+    }
+    _onClick(e) {
+        var _a;
+        if (e.defaultPrevented)
+            return;
+        const target = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(this.for);
+        if (target) {
+            target.click();
+        }
+    }
+    getAttributesToExclude() {
+        return ['for', 'data-testid'];
+    }
+    render() {
+        const attributes = this.getFilteredAttributes();
+        return html `
+      <label
+        for="${this.for}"
+        @click="${this._onClick}"
+        @keydown="${this._onClick}"
+        class="${cn(Label_1.labelVariants({
+            className: this.className,
+        }))}"
+        ${spread(attributes)}
+      >
+        <slot></slot>
+      </label>
+    `;
+    }
+};
+Label.labelVariants = labelStyle;
+Label.styles = [
+    css `
+      :root {
+        --label-text-color: inherit;
+        --label-padding: inherit;
+      }
+      .label-base {
+        color: var(--label-text-color) !important;
+        padding: var(--label-padding) !important;
+      }
+    `,
+    TWStyles,
+];
+__decorate([
+    property({ type: String })
+], Label.prototype, "for", void 0);
+Label = Label_1 = __decorate([
+    customElement('rtg-label')
+], Label);
+export { Label };
+//# sourceMappingURL=label.atom.js.map

package/dist/src/components/atoms/label/label.atom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/label/label.atom.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAc,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGvC,IAAM,KAAK,aAAX,MAAM,KAAM,SAAQ,WAAW;IAA/B;;QAGuB,QAAG,GAAG,EAAE,CAAC;IAoDvC,CAAC;IApCW,YAAY,CAAC,kBAAkC;QACvD,MAAM,SAAS,GAAG,CAAC,oCAAoC,CAAC,CAAC;QACzD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC;IAC1D,CAAC;IAEO,QAAQ,CAAC,CAAQ;;QACvB,IAAI,CAAC,CAAC,gBAAgB;YAAE,OAAO;QAC/B,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACzD,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC;IACH,CAAC;IAES,sBAAsB;QAC9B,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAEhD,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,GAAG;kBACL,IAAI,CAAC,QAAQ;oBACX,IAAI,CAAC,QAAQ;iBAChB,EAAE,CACT,OAAK,CAAC,aAAa,CAAC;YAClB,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC,CACH;UACC,MAAM,CAAC,UAAU,CAAC;;;;KAIvB,CAAC;IACJ,CAAC;;AArDM,mBAAa,GAAG,UAAU,AAAb,CAAc;AAI3B,YAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;KASF;IACD,QAAQ;CACT,AAZY,CAYX;AAd0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kCAAU;AAH1B,KAAK;IADjB,aAAa,CAAC,WAAW,CAAC;GACd,KAAK,CAuDjB","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { BaseElement, cn } from '../../../helpers';\nimport { TWStyles } from '../../../styles';\nimport { labelStyle } from './label.style';\nimport { spread } from '@open-wc/lit-helpers';\n\n@customElement('rtg-label')\nexport class Label extends BaseElement {\n  static labelVariants = labelStyle;\n\n  @property({ type: String }) for = '';\n\n  static styles = [\n    css`\n      :root {\n        --label-text-color: inherit;\n        --label-padding: inherit;\n      }\n      .label-base {\n        color: var(--label-text-color) !important;\n        padding: var(--label-padding) !important;\n      }\n    `,\n    TWStyles,\n  ];\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    const variables = ['--label-text-color,--label-padding'];\n    this.applyCustomClass(variables, 'label', 'label-base');\n  }\n\n  private _onClick(e: Event) {\n    if (e.defaultPrevented) return;\n    const target = this.shadowRoot?.getElementById(this.for);\n    if (target) {\n      target.click();\n    }\n  }\n\n  protected getAttributesToExclude(): string[] {\n    return ['for', 'data-testid'];\n  }\n\n  render() {\n    const attributes = this.getFilteredAttributes();\n\n    return html`\n      <label\n        for=\"${this.for}\"\n        @click=\"${this._onClick}\"\n        @keydown=\"${this._onClick}\"\n        class=\"${cn(\n          Label.labelVariants({\n            className: this.className,\n          })\n        )}\"\n        ${spread(attributes)}\n      >\n        <slot></slot>\n      </label>\n    `;\n  }\n}\n"]}

package/dist/src/components/atoms/label/label.stories.js

@@ -0,0 +1,85 @@
+import { html } from 'lit';
+import './label.atom';
+import { expect, within, fn, waitFor, userEvent } from '@storybook/test';
+import { Label } from './label.atom';
+// Label Test Behavior
+const testLabelBehavior = async (args, canvasElement, mockHandler) => {
+    const canvas = within(canvasElement);
+    const label = await waitFor(() => canvas.getByTestId('label-id'));
+    if (label.shadowRoot) {
+        const innerLabel = label.shadowRoot.querySelector('label') || '';
+        // 1. Test: Label should have correct "for" attribute
+        expect(label).toHaveAttribute('for', args.for);
+        // 2. Test: Label should apply correct variant classes
+        const expectedClasses = Label.labelVariants({
+            className: '',
+        });
+        expect(innerLabel).toHaveClass(expectedClasses);
+        // 3. Test: Label should trigger associated input's click when clicked
+        if (!args.disabled) {
+            const targetInput = document.createElement('input');
+            targetInput.id = args.for;
+            label.shadowRoot.appendChild(targetInput);
+            targetInput.click = fn(); // Mock click behavior for test
+            await userEvent.click(innerLabel);
+            expect(targetInput.click).toHaveBeenCalled();
+            label.shadowRoot.removeChild(targetInput); // Clean up
+        }
+        // 4. Test: Ensure that label doesn't trigger input click when default is prevented
+        const event = new Event('click', { cancelable: true });
+        label.dispatchEvent(event);
+        if (!event.defaultPrevented) {
+            await userEvent.click(innerLabel);
+            expect(mockHandler).not.toHaveBeenCalled(); // should not trigger if default prevented
+        }
+    }
+};
+export default {
+    title: 'components/atoms/label',
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            type: 'string',
+            description: 'The text to display on the label.',
+            table: {
+                defaultValue: { summary: '' },
+            },
+        },
+        for: {
+            type: 'string',
+            description: "The text that the label is describing. This is typically the ID of the input element it's labeling.",
+            table: {
+                defaultValue: { summary: '' },
+            },
+        },
+    },
+};
+const Template = (args) => html ` <rtg-label
+    data-testchild="children-id"
+    data-testid="label-id"
+    for=${args.for}
+    >${args.label}</rtg-label
+  >`;
+const HtmlForTemplate = (args) => html ` <rtg-label
+    data-testchild="children-id"
+    data-testid="label-id"
+    for=${args.for}
+  >
+    ${args.label}
+    <input type="text" id=${args.for} />
+  </rtg-label>`;
+export const Default = Template.bind({});
+export const HtmlFor = HtmlForTemplate.bind({});
+Default.args = {
+    for: 'id',
+    label: 'Email address',
+};
+HtmlFor.args = {
+    for: 'id',
+    label: 'Email address',
+};
+Default.play = async ({ args, canvasElement }) => {
+    const mockHandler = fn();
+    await testLabelBehavior(args, canvasElement, mockHandler);
+};
+//# sourceMappingURL=label.stories.js.map

package/dist/src/components/atoms/label/label.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/label/label.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport './label.atom';\n\nimport { expect, within, fn, waitFor, userEvent } from '@storybook/test';\nimport { Label } from './label.atom';\n\n// Label Test Behavior\nconst testLabelBehavior = async (\n  args: any,\n  canvasElement: any,\n  mockHandler: any\n) => {\n  const canvas = within(canvasElement);\n  const label = await waitFor(() => canvas.getByTestId('label-id'));\n  if (label.shadowRoot) {\n    const innerLabel =\n      label.shadowRoot.querySelector('label') || ('' as unknown as Element);\n    // 1. Test: Label should have correct \"for\" attribute\n    expect(label).toHaveAttribute('for', args.for);\n\n    // 2. Test: Label should apply correct variant classes\n    const expectedClasses = Label.labelVariants({\n      className: '',\n    });\n    expect(innerLabel).toHaveClass(expectedClasses);\n\n    // 3. Test: Label should trigger associated input's click when clicked\n    if (!args.disabled) {\n      const targetInput = document.createElement('input');\n      targetInput.id = args.for;\n      label.shadowRoot.appendChild(targetInput);\n      targetInput.click = fn(); // Mock click behavior for test\n      await userEvent.click(innerLabel);\n      expect(targetInput.click).toHaveBeenCalled();\n      label.shadowRoot.removeChild(targetInput); // Clean up\n    }\n\n    // 4. Test: Ensure that label doesn't trigger input click when default is prevented\n    const event = new Event('click', { cancelable: true });\n    label.dispatchEvent(event);\n    if (!event.defaultPrevented) {\n      await userEvent.click(innerLabel);\n      expect(mockHandler).not.toHaveBeenCalled(); // should not trigger if default prevented\n    }\n  }\n};\n\nexport default {\n  title: 'components/atoms/label',\n  tags: ['autodocs'],\n  argTypes: {\n    label: {\n      type: 'string',\n      description: 'The text to display on the label.',\n      table: {\n        defaultValue: { summary: '' },\n      },\n    },\n    for: {\n      type: 'string',\n      description:\n        \"The text that the label is describing. This is typically the ID of the input element it's labeling.\",\n      table: {\n        defaultValue: { summary: '' },\n      },\n    },\n  },\n} as Meta;\n\nconst Template: StoryFn = (args: any) =>\n  html` <rtg-label\n    data-testchild=\"children-id\"\n    data-testid=\"label-id\"\n    for=${args.for}\n    >${args.label}</rtg-label\n  >`;\n\nconst HtmlForTemplate: StoryFn = (args: any) =>\n  html` <rtg-label\n    data-testchild=\"children-id\"\n    data-testid=\"label-id\"\n    for=${args.for}\n  >\n    ${args.label}\n    <input type=\"text\" id=${args.for} />\n  </rtg-label>`;\nexport const Default = Template.bind({});\nexport const HtmlFor = HtmlForTemplate.bind({});\n\nDefault.args = {\n  for: 'id',\n  label: 'Email address',\n};\nHtmlFor.args = {\n  for: 'id',\n  label: 'Email address',\n};\nDefault.play = async ({ args, canvasElement }) => {\n  const mockHandler = fn();\n  await testLabelBehavior(args, canvasElement, mockHandler);\n};\n"]}

package/dist/src/components/atoms/label/label.style.js

@@ -0,0 +1,3 @@
+import { cva } from 'class-variance-authority';
+export const labelStyle = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
+//# sourceMappingURL=label.style.js.map

package/dist/src/components/atoms/label/label.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.style.js","sourceRoot":"","sources":["../../../../../src/components/atoms/label/label.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAC3B,4FAA4F,CAC7F,CAAC","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const labelStyle = cva(\n  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'\n);\n"]}