@sula-tech/webcomponents 0.3.1 → 0.4.0

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

@@ -0,0 +1,243 @@
+import { Host, h } from "@stencil/core";
+import { SulaChipAppearance } from "./model/sula-chip.model";
+export class SulaChip {
+    constructor() {
+        /**
+         * Chip text
+         */
+        this.text = '';
+        /**
+         * Chip appearance
+         */
+        this.appearance = SulaChipAppearance.Default;
+        /**
+         * Chip is disabled
+         */
+        this.disabled = false;
+        /**
+         * Items for list
+         */
+        this.items = [];
+        this.isFocused = false;
+        this.showItems = false;
+        this.handleFocus = () => {
+            if (this.disabled)
+                return;
+            this.isFocused = true;
+        };
+        this.handleBlur = () => {
+            if (this.disabled)
+                return;
+            this.isFocused = false;
+        };
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.itemClicked.emit();
+            if (this.items.length > 0) {
+                this.showItems = !this.showItems;
+                this.isFocused = false;
+            }
+        };
+        this.handleItemSelected = (item) => {
+            this.menuItemSelected.emit(item.detail);
+            this.showItems = false;
+        };
+    }
+    handleDocumentClick(event) {
+        if (!this.node)
+            return;
+        const clickInside = this.node.contains(event.target);
+        if (!clickInside) {
+            this.showItems = false;
+        }
+    }
+    getIconClass() {
+        if (this.disabled)
+            return 'text-text-disabled';
+        if (this.appearance === SulaChipAppearance.Default) {
+            return 'text-text-primary';
+        }
+        else {
+            return 'text-negative-negative-2';
+        }
+    }
+    render() {
+        return (h(Host, { key: '0c92444ee99a6001fc4e660378a34d1edf35330a', ref: node => (this.node = node) }, h("div", { key: '99ed8d8663a3e99ccfa672a92526e86faeff7c63', class: "w-fit relative" }, h("div", { key: '602fa80f7d43c953d50eb4456361477532f04859', class: {
+                'flex justify-center items-center px-16 py-2 rounded-xxl min-h-40 w-fit outline-none': true,
+                'bg-surface-on-body hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed': this.appearance === SulaChipAppearance.Default && !this.disabled,
+                'bg-negative-negative-1 hover:bg-states-negative-hover active:bg-states-negative-pressed': this.appearance === SulaChipAppearance.Negative && !this.disabled,
+                'bg-states-bg-disabled cursor-not-allowed': this.disabled,
+                'cursor-pointer': !this.disabled,
+                'border border-line-input chip-opened': !this.disabled && this.showItems,
+                'chip-focus': this.isFocused,
+            }, tabIndex: 0, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: 'c8008a1bccf957ceb5e1b90edc5e90d67ec4258f', class: {
+                'text-base font-bold leading-4': true,
+                'text-text-primary': this.appearance === SulaChipAppearance.Default && !this.disabled,
+                'text-negative-negative-2': this.appearance === SulaChipAppearance.Negative && !this.disabled,
+                'text-text-disabled': this.disabled,
+            } }, this.text), this.items.length > 0 && (h("div", { key: '2c0deb381c6b12c174f1128130add11a9c7d1077', class: "flex items-center justify-center ml-8 leading-4" }, h("sula-icon", { key: '0938769d19c69368560f9e5812310580cf81f984', icon: `ph-bold ph-caret-${this.showItems ? 'up' : 'down'}`, customClass: this.getIconClass() })))), this.showItems && (h("div", { key: 'e422f0479abecc1b8e5cb7924b59b89f2349c960', class: "absolute z-50 top-40 left-0" }, h("sula-menu-select-list", { key: '6e9c82f9bed0832cb2e545ef56ea6b3b4789485b', items: this.items, onItemSelected: this.handleItemSelected }))))));
+    }
+    static get is() { return "sula-chip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sula-chip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sula-chip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "attribute": "text",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chip text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "appearance": {
+                "type": "string",
+                "attribute": "appearance",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaChipAppearance",
+                    "resolved": "SulaChipAppearance.Default | SulaChipAppearance.Negative",
+                    "references": {
+                        "SulaChipAppearance": {
+                            "location": "import",
+                            "path": "./model/sula-chip.model",
+                            "id": "src/components/sula-chip/model/sula-chip.model.ts::SulaChipAppearance"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chip appearance"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "SulaChipAppearance.Default"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chip is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "items": {
+                "type": "unknown",
+                "attribute": "items",
+                "mutable": true,
+                "complexType": {
+                    "original": "SulaMenuListItem[]",
+                    "resolved": "SulaMenuListItem[]",
+                    "references": {
+                        "SulaMenuListItem": {
+                            "location": "import",
+                            "path": "../sula-menu-select-list/model/sula-menu-select-list.model",
+                            "id": "src/components/sula-menu-select-list/model/sula-menu-select-list.model.ts::SulaMenuListItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Items for list"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocused": {},
+            "showItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemClicked",
+                "name": "itemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when chip is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "menuItemSelected",
+                "name": "menuItemSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when item is selected"
+                },
+                "complexType": {
+                    "original": "SulaMenuListItem",
+                    "resolved": "SulaMenuListItem",
+                    "references": {
+                        "SulaMenuListItem": {
+                            "location": "import",
+                            "path": "../sula-menu-select-list/model/sula-menu-select-list.model",
+                            "id": "src/components/sula-menu-select-list/model/sula-menu-select-list.model.ts::SulaMenuListItem"
+                        }
+                    }
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=sula-chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sula-chip.js","sourceRoot":"","sources":["../../../src/components/sula-chip/sula-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core';\nimport { SulaMenuListItem } from '../sula-menu-select-list/model/sula-menu-select-list.model';\nimport { SulaChipAppearance } from './model/sula-chip.model';\nimport { SulaMenuSelectListCustomEvent } from '../../components';\n\n@Component({\n  tag: 'sula-chip',\n  styleUrl: 'sula-chip.scss',\n  shadow: true,\n})\nexport class SulaChip {\n  /**\n   * Chip text\n   */\n  @Prop({ mutable: true })\n  text: string = '';\n\n  /**\n   * Chip appearance\n   */\n  @Prop({ mutable: true })\n  appearance: SulaChipAppearance = SulaChipAppearance.Default;\n\n  /**\n   * Chip is disabled\n   */\n  @Prop({ mutable: true })\n  disabled: boolean = false;\n\n  /**\n   * Items for list\n   */\n  @Prop({ mutable: true })\n  items: SulaMenuListItem[] = [];\n\n  /**\n   * Event emitted when chip is clicked\n   */\n  @Event()\n  itemClicked: EventEmitter<void>;\n\n  /**\n   * Event emitted when item is selected\n   */\n  @Event()\n  menuItemSelected: EventEmitter<SulaMenuListItem>;\n\n  @State()\n  isFocused = false;\n\n  @State()\n  showItems = false;\n\n  node?: HTMLElement;\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: Event) {\n    if (!this.node) return;\n\n    const clickInside = this.node.contains(event.target as Node);\n\n    if (!clickInside) {\n      this.showItems = false;\n    }\n  }\n\n  handleFocus = () => {\n    if (this.disabled) return;\n    this.isFocused = true;\n  };\n\n  handleBlur = () => {\n    if (this.disabled) return;\n    this.isFocused = false;\n  };\n\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.itemClicked.emit();\n\n    if (this.items.length > 0) {\n      this.showItems = !this.showItems;\n      this.isFocused = false;\n    }\n  };\n\n  handleItemSelected = (item: SulaMenuSelectListCustomEvent<SulaMenuListItem>) => {\n    this.menuItemSelected.emit(item.detail);\n    this.showItems = false;\n  };\n\n  getIconClass() {\n    if (this.disabled) return 'text-text-disabled';\n\n    if (this.appearance === SulaChipAppearance.Default) {\n      return 'text-text-primary';\n    } else {\n      return 'text-negative-negative-2';\n    }\n  }\n\n  render() {\n    return (\n      <Host ref={node => (this.node = node)}>\n        <div class=\"w-fit relative\">\n          <div\n            class={{\n              'flex justify-center items-center px-16 py-2 rounded-xxl min-h-40 w-fit outline-none': true,\n              'bg-surface-on-body hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed': this.appearance === SulaChipAppearance.Default && !this.disabled,\n              'bg-negative-negative-1 hover:bg-states-negative-hover active:bg-states-negative-pressed': this.appearance === SulaChipAppearance.Negative && !this.disabled,\n              'bg-states-bg-disabled cursor-not-allowed': this.disabled,\n              'cursor-pointer': !this.disabled,\n              'border border-line-input chip-opened': !this.disabled && this.showItems,\n              'chip-focus': this.isFocused,\n            }}\n            tabIndex={0}\n            onClick={this.handleClick}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          >\n            <span\n              class={{\n                'text-base font-bold leading-4': true,\n                'text-text-primary': this.appearance === SulaChipAppearance.Default && !this.disabled,\n                'text-negative-negative-2': this.appearance === SulaChipAppearance.Negative && !this.disabled,\n                'text-text-disabled': this.disabled,\n              }}\n            >\n              {this.text}\n            </span>\n\n            {this.items.length > 0 && (\n              <div class=\"flex items-center justify-center ml-8 leading-4\">\n                <sula-icon icon={`ph-bold ph-caret-${this.showItems ? 'up' : 'down'}`} customClass={this.getIconClass()}></sula-icon>\n              </div>\n            )}\n          </div>\n          {this.showItems && (\n            <div class=\"absolute z-50 top-40 left-0\">\n              <sula-menu-select-list items={this.items} onItemSelected={this.handleItemSelected}></sula-menu-select-list>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,125 @@
+import { SulaChipAppearance } from "./model/sula-chip.model";
+export default {
+    title: 'Components/sula-chip',
+    tags: ['autodocs'],
+    argTypes: {
+        text: {
+            control: 'text',
+            defaultValue: 'Chip Text',
+            description: 'Chip text',
+            type: {
+                required: false,
+            },
+        },
+        appearance: {
+            control: { type: 'select' },
+            options: Object.values(SulaChipAppearance),
+            defaultValue: SulaChipAppearance.Default,
+            description: 'Chip appearance',
+            type: {
+                required: false,
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            defaultValue: false,
+            description: 'Is chip disabled',
+            type: {
+                required: false,
+            },
+        },
+        items: {
+            control: 'object',
+            defaultValue: [],
+            description: 'Items for dropdown list',
+            type: {
+                required: false,
+            },
+        },
+        itemClicked: {
+            action: 'itemClicked',
+            description: 'Evento emitido quando o chip é clicado',
+        },
+        itemSelected: {
+            action: 'itemSelected',
+            description: 'Evento emitido quando um item é selecionado',
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: 'O componente Chip Sula Design System é utilizado como filtro, substituí botões pequenos e deve ser usado dentro de componentes de lista. ',
+            },
+        },
+    },
+};
+const Template = args => {
+    const container = document.createElement('div');
+    container.style.margin = '20px';
+    const el = document.createElement('sula-chip');
+    if (args.text)
+        el.setAttribute('text', args.text);
+    el.setAttribute('appearance', args.appearance);
+    el.setAttribute('disabled', args.disabled.toString());
+    if (args.items && args.items.length > 0) {
+        el.items = args.items;
+    }
+    el.addEventListener('itemClicked', args.itemClicked);
+    el.addEventListener('itemSelected', args.itemSelected);
+    container.appendChild(el);
+    return container;
+};
+export const Default = Template.bind({});
+Default.args = {
+    text: 'Default Chip',
+    appearance: SulaChipAppearance.Default,
+    disabled: false,
+    items: [],
+};
+export const NegativeAppearance = Template.bind({});
+NegativeAppearance.args = {
+    text: 'Negative Chip',
+    appearance: SulaChipAppearance.Negative,
+    disabled: false,
+    items: [],
+};
+export const DisabledChip = Template.bind({});
+DisabledChip.args = {
+    text: 'Disabled Chip',
+    appearance: SulaChipAppearance.Default,
+    disabled: true,
+    items: [],
+};
+export const ChipWithDropdown = Template.bind({});
+ChipWithDropdown.args = {
+    text: 'Chip with Options',
+    appearance: SulaChipAppearance.Default,
+    disabled: false,
+    items: [
+        { id: '1', title: 'Option 1' },
+        { id: '2', title: 'Option 2' },
+        { id: '3', title: 'Option 3' },
+    ],
+};
+export const NegativeChipWithDropdown = Template.bind({});
+NegativeChipWithDropdown.args = {
+    text: 'Negative with Options',
+    appearance: SulaChipAppearance.Negative,
+    disabled: false,
+    items: [
+        { id: '1', title: 'Remove Item 1' },
+        { id: '2', title: 'Remove Item 2' },
+        { id: '3', title: 'Remove Item 3' },
+    ],
+};
+export const DisabledChipWithItems = Template.bind({});
+DisabledChipWithItems.args = {
+    text: 'Disabled with Items',
+    appearance: SulaChipAppearance.Default,
+    disabled: true,
+    items: [
+        { id: '1', title: 'Option 1' },
+        { id: '2', title: 'Option 2' },
+    ],
+};
+//# sourceMappingURL=sula-chip.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sula-chip.stories.js","sourceRoot":"","sources":["../../../src/components/sula-chip/sula-chip.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { SulaChipAppearance } from './model/sula-chip.model';\n\nexport default {\n  title: 'Components/sula-chip',\n  tags: ['autodocs'],\n  argTypes: {\n    text: {\n      control: 'text',\n      defaultValue: 'Chip Text',\n      description: 'Chip text',\n      type: {\n        required: false,\n      },\n    },\n    appearance: {\n      control: { type: 'select' },\n      options: Object.values(SulaChipAppearance),\n      defaultValue: SulaChipAppearance.Default,\n      description: 'Chip appearance',\n      type: {\n        required: false,\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      defaultValue: false,\n      description: 'Is chip disabled',\n      type: {\n        required: false,\n      },\n    },\n    items: {\n      control: 'object',\n      defaultValue: [],\n      description: 'Items for dropdown list',\n      type: {\n        required: false,\n      },\n    },\n    itemClicked: {\n      action: 'itemClicked',\n      description: 'Evento emitido quando o chip é clicado',\n    },\n    itemSelected: {\n      action: 'itemSelected',\n      description: 'Evento emitido quando um item é selecionado',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: 'O componente Chip Sula Design System é utilizado como filtro, substituí botões pequenos e deve ser usado dentro de componentes de lista. ',\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const container = document.createElement('div');\n  container.style.margin = '20px';\n\n  const el = document.createElement('sula-chip');\n\n  if (args.text) el.setAttribute('text', args.text);\n  el.setAttribute('appearance', args.appearance);\n  el.setAttribute('disabled', args.disabled.toString());\n\n  if (args.items && args.items.length > 0) {\n    el.items = args.items;\n  }\n\n  el.addEventListener('itemClicked', args.itemClicked);\n  el.addEventListener('itemSelected', args.itemSelected);\n\n  container.appendChild(el);\n\n  return container;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  text: 'Default Chip',\n  appearance: SulaChipAppearance.Default,\n  disabled: false,\n  items: [],\n};\n\nexport const NegativeAppearance = Template.bind({});\nNegativeAppearance.args = {\n  text: 'Negative Chip',\n  appearance: SulaChipAppearance.Negative,\n  disabled: false,\n  items: [],\n};\n\nexport const DisabledChip = Template.bind({});\nDisabledChip.args = {\n  text: 'Disabled Chip',\n  appearance: SulaChipAppearance.Default,\n  disabled: true,\n  items: [],\n};\n\nexport const ChipWithDropdown = Template.bind({});\nChipWithDropdown.args = {\n  text: 'Chip with Options',\n  appearance: SulaChipAppearance.Default,\n  disabled: false,\n  items: [\n    { id: '1', title: 'Option 1' },\n    { id: '2', title: 'Option 2' },\n    { id: '3', title: 'Option 3' },\n  ],\n};\n\nexport const NegativeChipWithDropdown = Template.bind({});\nNegativeChipWithDropdown.args = {\n  text: 'Negative with Options',\n  appearance: SulaChipAppearance.Negative,\n  disabled: false,\n  items: [\n    { id: '1', title: 'Remove Item 1' },\n    { id: '2', title: 'Remove Item 2' },\n    { id: '3', title: 'Remove Item 3' },\n  ],\n};\n\nexport const DisabledChipWithItems = Template.bind({});\nDisabledChipWithItems.args = {\n  text: 'Disabled with Items',\n  appearance: SulaChipAppearance.Default,\n  disabled: true,\n  items: [\n    { id: '1', title: 'Option 1' },\n    { id: '2', title: 'Option 2' },\n  ],\n};\n"]}