revotech-ui-kit 0.0.11 → 0.0.12

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

@@ -1,382 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"file":"input.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/input/input.stories.ts"],"names":[],"mappings":"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","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

@@ -1,2 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1 +0,0 @@
-{"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

@@ -1,67 +0,0 @@
-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) {
-        if (e.defaultPrevented)
-            return;
-        const target = this.shadowRoot?.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

@@ -1 +0,0 @@
-{"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,IAAI,CAAC,UAAU,EAAE,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

@@ -1,85 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,3 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"]}