@sula-tech/webcomponents 0.2.0 → 0.3.0

package/dist/collection/components/sula-checkbox/sula-checkbox.js

@@ -0,0 +1,233 @@
+import { Host, h } from "@stencil/core";
+import { SulaCheckboxType } from "./model/sula-checkbox.model";
+export class SulaCheckbox {
+    constructor() {
+        /**
+         * Checkbox type
+         */
+        this.type = SulaCheckboxType.Default;
+        /**
+         * Is checbox disabled
+         */
+        this.disabled = false;
+        /**
+         * Is checkbox checked
+         */
+        this.checked = false;
+        this.isFocus = false;
+        this.toggle = () => {
+            if (!this.disabled) {
+                this.checked = !this.checked;
+                this.valueChanged.emit(this.checked);
+            }
+        };
+        this.handleFocus = () => {
+            if (!this.disabled) {
+                this.isFocus = true;
+                this.focusedOn.emit();
+            }
+        };
+        this.handleBlur = () => {
+            if (!this.disabled) {
+                this.focusedOut.emit();
+                this.isFocus = false;
+            }
+        };
+    }
+    getIconColor() {
+        if (this.disabled) {
+            return 'text-icon-disabled';
+        }
+        return 'text-negative-negative-1';
+    }
+    render() {
+        return (h(Host, { key: '56a8c43bf6e8cdd4a687f5730b86485522486ded' }, h("div", { key: '924f574fecc6e3a92cfc82cd63b9e8345afbe11a', class: {
+                'outline-none': true,
+                'flex items-center space-x-12': !!this.label && this.type === SulaCheckboxType.Default,
+                'flex items-center justify-between bg-surface-on-body rounded-md w-[280px] min-h-[85px] px-24 py-16': this.type === SulaCheckboxType.List,
+                'hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed cursor-pointer': this.type === SulaCheckboxType.List && !this.disabled,
+                'container-focus': this.isFocus && this.type === SulaCheckboxType.List,
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.toggle, tabIndex: 0 }, this.type === SulaCheckboxType.List && (h("div", { key: '7b0ba9c45a7a6733fba4520e8fffe5e9cc1f775e', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: '61b673e866c72a33ab623f656fe882e3df4f04a3', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: '3b3a40d2a4fd14b943722a13c06e2478d19337c9', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: '03b6d405c2b7aadd113f1314bc12c99103bc72ac', tabIndex: 0, class: {
+                'flex justify-center items-center rounded-xs w-[27px] h-[27px] border outline-none flex-shrink-0': true,
+                'checkbox-focus': this.isFocus && this.type === SulaCheckboxType.Default,
+                'cursor-pointer active:bg-states-empty-bg-pressed': !this.disabled,
+                'bg-states-bg-disabled border-states-bg-disabled': this.disabled,
+                'bg-brand-primary border-brand-primary': this.checked,
+                'bg-surface-body border-line-input': !this.checked,
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.checked && (h("div", { key: 'ede285c57a75d7a12a4477b31b9c195cd42efca1', class: "flex justify-center items-center" }, h("sula-icon", { key: '5546613a4121659fadb2061e4701ab831dd3bbc6', icon: "ph-bold ph-check", customClass: `${this.getIconColor()} text-xl` })))), !!this.label && this.type === SulaCheckboxType.Default && h("label", { key: '5f1fa7508c159f4b486dad0d4392706e2ca704f1', class: "text-text-secondary text-base cursor-pointer break-words" }, this.label))));
+    }
+    static get is() { return "sula-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaCheckboxType",
+                    "resolved": "SulaCheckboxType.Default | SulaCheckboxType.List",
+                    "references": {
+                        "SulaCheckboxType": {
+                            "location": "import",
+                            "path": "./model/sula-checkbox.model",
+                            "id": "src/components/sula-checkbox/model/sula-checkbox.model.ts::SulaCheckboxType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox type"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "SulaCheckboxType.Default"
+            },
+            "label": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox label"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "subTitle": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Checkbox sub title (avaible when is `list` type)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "sub-title",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is checbox disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is checkbox checked"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when checkbox value changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "focusedOn",
+                "name": "focusedOn",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when checkbox is focused."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "focusedOut",
+                "name": "focusedOut",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when checkbox is focused out."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sula-checkbox.js.map

package/dist/collection/components/sula-checkbox/sula-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-checkbox.js","sourceRoot":"","sources":["../../../src/components/sula-checkbox/sula-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\nimport { SulaCheckboxType } from './model/sula-checkbox.model';\n\n@Component({\n  tag: 'sula-checkbox',\n  styleUrl: 'sula-checkbox.scss',\n  shadow: true,\n})\nexport class SulaCheckbox {\n  /**\n   * Checkbox type\n   */\n  @Prop({ mutable: true }) type: SulaCheckboxType = SulaCheckboxType.Default;\n\n  /**\n   * Checkbox label\n   */\n  @Prop({ mutable: true }) label?: string;\n\n  /**\n   * Checkbox sub title (avaible when is `list` type)\n   */\n  @Prop({ mutable: true }) subTitle?: string;\n\n  /**\n   * Is checbox disabled\n   */\n  @Prop({ mutable: true }) disabled: boolean = false;\n\n  /**\n   * Is checkbox checked\n   */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  /**\n   * Event emitted when checkbox value changes.\n   */\n  @Event()\n  valueChanged: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when checkbox is focused.\n   */\n  @Event()\n  focusedOn: EventEmitter<void>;\n\n  /**\n   * Event emitted when checkbox is focused out.\n   */\n  @Event()\n  focusedOut: EventEmitter<void>;\n\n  @State()\n  isFocus: boolean = false;\n\n  toggle = () => {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.valueChanged.emit(this.checked);\n    }\n  };\n\n  handleFocus = () => {\n    if (!this.disabled) {\n      this.isFocus = true;\n      this.focusedOn.emit();\n    }\n  };\n\n  handleBlur = () => {\n    if (!this.disabled) {\n      this.focusedOut.emit();\n      this.isFocus = false;\n    }\n  };\n\n  getIconColor() {\n    if (this.disabled) {\n      return 'text-icon-disabled';\n    }\n\n    return 'text-negative-negative-1';\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'outline-none': true,\n            'flex items-center space-x-12': !!this.label && this.type === SulaCheckboxType.Default,\n            'flex items-center justify-between bg-surface-on-body rounded-md w-[280px] min-h-[85px] px-24 py-16': this.type === SulaCheckboxType.List,\n            'hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed cursor-pointer': this.type === SulaCheckboxType.List && !this.disabled,\n            'container-focus': this.isFocus && this.type === SulaCheckboxType.List,\n          }}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          onClick={this.toggle}\n          tabIndex={0}\n        >\n          {this.type === SulaCheckboxType.List && (\n            <div class=\"flex flex-col flex-1 mr-16 overflow-hidden\">\n              {!!this.label && <label class=\"text-text-primary font-bold text-base cursor-pointer break-words\">{this.label}</label>}\n              {!!this.subTitle && <span class=\"text-text-secondary text-base break-words\">{this.subTitle}</span>}\n            </div>\n          )}\n\n          <div\n            tabIndex={0}\n            class={{\n              'flex justify-center items-center rounded-xs w-[27px] h-[27px] border outline-none flex-shrink-0': true,\n              'checkbox-focus': this.isFocus && this.type === SulaCheckboxType.Default,\n              'cursor-pointer active:bg-states-empty-bg-pressed': !this.disabled,\n              'bg-states-bg-disabled border-states-bg-disabled': this.disabled,\n              'bg-brand-primary border-brand-primary': this.checked,\n              'bg-surface-body border-line-input': !this.checked,\n            }}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          >\n            {this.checked && (\n              <div class=\"flex justify-center items-center\">\n                <sula-icon icon=\"ph-bold ph-check\" customClass={`${this.getIconColor()} text-xl`}></sula-icon>\n              </div>\n            )}\n          </div>\n          {!!this.label && this.type === SulaCheckboxType.Default && <label class=\"text-text-secondary text-base cursor-pointer break-words\">{this.label}</label>}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/sula-checkbox/sula-checkbox.stories.js

@@ -0,0 +1,113 @@
+import { SulaCheckboxType } from "./model/sula-checkbox.model";
+export default {
+    title: 'Components/sula-checkbox',
+    tags: ['autodocs'],
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: Object.values(SulaCheckboxType),
+            defaultValue: SulaCheckboxType.Default,
+            description: 'The checkbox type',
+            type: {
+                required: false,
+            },
+        },
+        label: {
+            control: 'text',
+            defaultValue: 'Label',
+            description: 'The checkbox label',
+            type: {
+                required: false,
+            },
+        },
+        subTitle: {
+            control: 'text',
+            defaultValue: '',
+            description: 'The checkbox subtitle (available when type is List)',
+            type: {
+                required: false,
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            defaultValue: false,
+            description: 'Whether the checkbox is disabled',
+            type: {
+                required: false,
+            },
+        },
+        checked: {
+            control: 'boolean',
+            defaultValue: false,
+            description: 'Whether the checkbox is checked',
+            type: {
+                required: false,
+            },
+        },
+        valueChanged: {
+            action: 'valueChanged',
+            description: 'Event emitted when checkbox value changes',
+        },
+        focusedOn: {
+            action: 'focusedOn',
+            description: 'Event emitted when checkbox is focused',
+        },
+        focusedOut: {
+            action: 'focusedOut',
+            description: 'Event emitted when checkbox loses focus',
+        },
+    },
+};
+const Template = args => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    container.style.display = 'flex';
+    container.style.flexDirection = 'column';
+    container.style.gap = '20px';
+    const el = document.createElement('sula-checkbox');
+    el.setAttribute('type', args.type);
+    if (args.label)
+        el.setAttribute('label', args.label);
+    if (args.subTitle)
+        el.setAttribute('sub-title', args.subTitle);
+    el.setAttribute('disabled', args.disabled.toString());
+    el.setAttribute('checked', args.checked.toString());
+    el.addEventListener('valueChanged', args.valueChanged);
+    el.addEventListener('focusedOn', args.focusedOn);
+    el.addEventListener('focusedOut', args.focusedOut);
+    container.appendChild(el);
+    return container;
+};
+export const Default = Template.bind({});
+Default.args = {
+    type: SulaCheckboxType.Default,
+    label: 'Aceitar termos e condições',
+    subTitle: '',
+    disabled: false,
+    checked: false,
+};
+export const DefaultChecked = Template.bind({});
+DefaultChecked.args = Object.assign(Object.assign({}, Default.args), { checked: true });
+export const DefaultDisabled = Template.bind({});
+DefaultDisabled.args = Object.assign(Object.assign({}, Default.args), { disabled: true });
+export const DefaultCheckedDisabled = Template.bind({});
+DefaultCheckedDisabled.args = Object.assign(Object.assign({}, Default.args), { checked: true, disabled: true });
+export const DefaultWithoutLabel = Template.bind({});
+DefaultWithoutLabel.args = Object.assign(Object.assign({}, Default.args), { label: '' });
+export const List = Template.bind({});
+List.args = {
+    type: SulaCheckboxType.List,
+    label: 'Opção de lista',
+    subTitle: 'Descrição adicional para esta opção',
+    disabled: false,
+    checked: false,
+};
+export const ListChecked = Template.bind({});
+ListChecked.args = Object.assign(Object.assign({}, List.args), { checked: true });
+export const ListDisabled = Template.bind({});
+ListDisabled.args = Object.assign(Object.assign({}, List.args), { disabled: true });
+export const ListCheckedDisabled = Template.bind({});
+ListCheckedDisabled.args = Object.assign(Object.assign({}, List.args), { checked: true, disabled: true });
+export const ListWithoutSubtitle = Template.bind({});
+ListWithoutSubtitle.args = Object.assign(Object.assign({}, List.args), { subTitle: '' });
+//# sourceMappingURL=sula-checkbox.stories.js.map

package/dist/collection/components/sula-checkbox/sula-checkbox.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sula-checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/sula-checkbox/sula-checkbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaCheckboxType } from './model/sula-checkbox.model';\n\nexport default {\n  title: 'Components/sula-checkbox',\n  tags: ['autodocs'],\n  argTypes: {\n    type: {\n      control: { type: 'select' },\n      options: Object.values(SulaCheckboxType),\n      defaultValue: SulaCheckboxType.Default,\n      description: 'The checkbox type',\n      type: {\n        required: false,\n      },\n    },\n    label: {\n      control: 'text',\n      defaultValue: 'Label',\n      description: 'The checkbox label',\n      type: {\n        required: false,\n      },\n    },\n    subTitle: {\n      control: 'text',\n      defaultValue: '',\n      description: 'The checkbox subtitle (available when type is List)',\n      type: {\n        required: false,\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      defaultValue: false,\n      description: 'Whether the checkbox is disabled',\n      type: {\n        required: false,\n      },\n    },\n    checked: {\n      control: 'boolean',\n      defaultValue: false,\n      description: 'Whether the checkbox is checked',\n      type: {\n        required: false,\n      },\n    },\n    valueChanged: {\n      action: 'valueChanged',\n      description: 'Event emitted when checkbox value changes',\n    },\n    focusedOn: {\n      action: 'focusedOn',\n      description: 'Event emitted when checkbox is focused',\n    },\n    focusedOut: {\n      action: 'focusedOut',\n      description: 'Event emitted when checkbox loses focus',\n    },\n  },\n};\n\nconst Template = args => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n  container.style.display = 'flex';\n  container.style.flexDirection = 'column';\n  container.style.gap = '20px';\n\n  const el = document.createElement('sula-checkbox');\n\n  el.setAttribute('type', args.type);\n  if (args.label) el.setAttribute('label', args.label);\n  if (args.subTitle) el.setAttribute('sub-title', args.subTitle);\n  el.setAttribute('disabled', args.disabled.toString());\n  el.setAttribute('checked', args.checked.toString());\n\n  el.addEventListener('valueChanged', args.valueChanged);\n  el.addEventListener('focusedOn', args.focusedOn);\n  el.addEventListener('focusedOut', args.focusedOut);\n\n  container.appendChild(el);\n\n  return container;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  type: SulaCheckboxType.Default,\n  label: 'Aceitar termos e condições',\n  subTitle: '',\n  disabled: false,\n  checked: false,\n};\n\nexport const DefaultChecked = Template.bind({});\nDefaultChecked.args = {\n  ...Default.args,\n  checked: true,\n};\n\nexport const DefaultDisabled = Template.bind({});\nDefaultDisabled.args = {\n  ...Default.args,\n  disabled: true,\n};\n\nexport const DefaultCheckedDisabled = Template.bind({});\nDefaultCheckedDisabled.args = {\n  ...Default.args,\n  checked: true,\n  disabled: true,\n};\n\nexport const DefaultWithoutLabel = Template.bind({});\nDefaultWithoutLabel.args = {\n  ...Default.args,\n  label: '',\n};\n\nexport const List = Template.bind({});\nList.args = {\n  type: SulaCheckboxType.List,\n  label: 'Opção de lista',\n  subTitle: 'Descrição adicional para esta opção',\n  disabled: false,\n  checked: false,\n};\n\nexport const ListChecked = Template.bind({});\nListChecked.args = {\n  ...List.args,\n  checked: true,\n};\n\nexport const ListDisabled = Template.bind({});\nListDisabled.args = {\n  ...List.args,\n  disabled: true,\n};\n\nexport const ListCheckedDisabled = Template.bind({});\nListCheckedDisabled.args = {\n  ...List.args,\n  checked: true,\n  disabled: true,\n};\n\nexport const ListWithoutSubtitle = Template.bind({});\nListWithoutSubtitle.args = {\n  ...List.args,\n  subTitle: '',\n};\n"]}