bromcom-ui 2.8.1 → 2.9.0-rc.1

package/dist/collection/components/atoms/chip/chip-group.js

@@ -0,0 +1,336 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Generate } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
+import { CaptionTemplate, LabelTemplate } from "@bcm/template";
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
+export class BcmChipGroup {
+  constructor() {
+    this._id = Generate.UID();
+    this.name = undefined;
+    this.value = undefined;
+    this.required = false;
+    this.size = "medium";
+    this.label = undefined;
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionType = Bcm.Status.default;
+    this.captionError = undefined;
+  }
+  handleSelectItem(e) {
+    const target = e === null || e === void 0 ? void 0 : e.target;
+    if (target instanceof HTMLElement) {
+      const data = e.detail;
+      const chipItem = document.createElement("bcm-chip");
+      // chipItem.setAttribute("type", "dismissable");
+      chipItem.setAttribute("value", data.id);
+      chipItem.innerHTML = data.text;
+      target.parentNode.insertBefore(chipItem, target);
+      this.setSelect(data.id);
+    }
+  }
+  handleDismiss(e) {
+    const target = e === null || e === void 0 ? void 0 : e.target;
+    if (target instanceof HTMLElement) {
+      target.remove();
+      this.setSelect();
+    }
+  }
+  handleSelect(e) {
+    const target = e === null || e === void 0 ? void 0 : e.target;
+    if (target instanceof HTMLElement) {
+      if (target.type === "addable") {
+        this.showListComponent(target.id);
+      }
+      else {
+        this.setSelect(target.value);
+      }
+    }
+  }
+  showListComponent(id) {
+    const listComponent = document.getElementById(id + "-list");
+    if (listComponent) {
+      listComponent.show();
+    }
+  }
+  getSlots() {
+    return this.el.querySelectorAll("bcm-chip");
+  }
+  setSelect(val = this.value, noEvent = false) {
+    const slots = this.getSlots();
+    if ((slots === null || slots === void 0 ? void 0 : slots.length) === 0)
+      return;
+    const slotArray = Array.from(slots);
+    const selectedSlot = slotArray.find(slot => slot.value === val);
+    if (!selectedSlot) {
+      this.value = slotArray[0].value;
+    }
+    else {
+      this.value = val;
+    }
+    slotArray.forEach(slot => {
+      slot.selected = slot.value === this.value;
+    });
+    if (!noEvent) {
+      this.change.emit(this.value);
+    }
+  }
+  setAttr() {
+    const slots = this.getSlots();
+    if ((slots === null || slots === void 0 ? void 0 : slots.length) === 0)
+      return;
+    const slotArray = Array.from(slots);
+    slotArray.forEach(slot => {
+      slot.setAttribute("size", this.size);
+    });
+  }
+  componentWillLoad() {
+    this.setSelect();
+  }
+  componentDidRender() {
+    this.setAttr();
+  }
+  render() {
+    const { label, required, noCaption, captionType, captionError, caption } = this;
+    const hostClasses = cs("bcm-chip-group");
+    return (h(Host, { class: hostClasses }, label && (h("div", null, h(LabelTemplate, { type: captionType, value: label, required: required }))), h("div", { class: "tw-flex tw-flex-wrap tw-gap-1" }, h("slot", null)), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
+  }
+  static get is() { return "bcm-chip-group"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["chip-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["chip-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "value": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"small\" | \"medium\" | \"large\"",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"medium\""
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "caption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption",
+        "reflect": false
+      },
+      "noCaption": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-caption",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "captionType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StatusTypes",
+          "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+          "references": {
+            "StatusTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption-type",
+        "reflect": false,
+        "defaultValue": "Bcm.Status.default"
+      },
+      "captionError": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption-error",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "bcm-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "bcm-chip-select-item",
+        "method": "handleSelectItem",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "bcm-chip-dismiss",
+        "method": "handleDismiss",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "bcm-chip-select",
+        "method": "handleSelect",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/atoms/chip/chip.css

@@ -185,6 +185,9 @@
   width: 14px;
   height: 14px;
 }
+.bcm-chip__size-small .bcm-chip--selected-icon {
+  width: 8px;
+}
 .bcm-chip__size-medium {
   font-size: 12px;
   line-height: calc(12px + 8px);
@@ -193,6 +196,9 @@
   width: 16px;
   height: 16px;
 }
+.bcm-chip__size-medium .bcm-chip--selected-icon {
+  width: 10px;
+}
 .bcm-chip__size-large {
   font-size: 14px;
   line-height: calc(14px + 8px);
@@ -200,4 +206,7 @@
 .bcm-chip__size-large .bcm-avatar {
   width: 18px;
   height: 18px;
+}
+.bcm-chip__size-large .bcm-chip--selected-icon {
+  width: 12px;
 }

package/dist/collection/components/atoms/chip/chip.js

@@ -2,36 +2,39 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, Host } from '@stencil/core';
-import { Generate } from '../../../helper/generate';
-import cs from 'classnames';
-import { ColorHelper } from '../../../helper/color-helper';
+import { h, Host } from "@stencil/core";
+import cs from "classnames";
+import { ColorHelper } from "../../../helper/color-helper";
+import { Generate } from "../../../helper/generate";
 export class BcmChip {
   constructor() {
     this._id = Generate.UID();
-    this.type = 'default';
-    this.size = 'medium';
+    this.type = "default";
+    this.size = "medium";
     this.avatar = undefined;
     this.icon = undefined;
     this.disabled = undefined;
     this.color = undefined;
+    this.selected = false;
+    this.value = undefined;
+    this.data = [];
   }
   // @ts-ignore
   setColor() {
-    if (!this.color)
+    if (!this.color && !this.selected)
       return;
-    const color = this.color;
+    const color = this.selected ? "indigo" : this.color; // Important: Find a solution for this in V3! ( selected ? this.color : "indigo" )
     return {
-      '--bcm-chip-color': ColorHelper.dsColor(color + '-500'),
-      '--bcm-chip-color-hover': ColorHelper.dsColor(color + '-500'),
-      '--bcm-chip-color-focus': ColorHelper.dsColor(color + '-600'),
-      '--bcm-chip-color-active': ColorHelper.dsColor(color + '-700'),
-      '--bcm-chip-color-disabled': ColorHelper.dsColor('slate' + '-300'),
-      '--bcm-chip-background-color': ColorHelper.dsColor(color + '-100'),
-      '--bcm-chip-background-color-hover': ColorHelper.dsColor(color + '-200'),
-      '--bcm-chip-background-color-focus': ColorHelper.dsColor(color + '-300'),
-      '--bcm-chip-background-color-active': ColorHelper.dsColor(color + '-200'),
-      '--bcm-chip-background-color-disabled': ColorHelper.dsColor('slate' + '-100'),
+      "--bcm-chip-color": ColorHelper.dsColor(color + "-500"),
+      "--bcm-chip-color-hover": ColorHelper.dsColor(color + "-500"),
+      "--bcm-chip-color-focus": ColorHelper.dsColor(color + "-600"),
+      "--bcm-chip-color-active": ColorHelper.dsColor(color + "-700"),
+      "--bcm-chip-color-disabled": ColorHelper.dsColor("slate" + "-300"),
+      "--bcm-chip-background-color": ColorHelper.dsColor(color + "-100"),
+      "--bcm-chip-background-color-hover": ColorHelper.dsColor(color + "-200"),
+      "--bcm-chip-background-color-focus": ColorHelper.dsColor(color + "-300"),
+      "--bcm-chip-background-color-active": ColorHelper.dsColor(color + "-200"),
+      "--bcm-chip-background-color-disabled": ColorHelper.dsColor("slate" + "-100"),
     };
   }
   handleDismiss(e) {
@@ -44,13 +47,25 @@ export class BcmChip {
     e.preventDefault();
     this.bcmChipAddable.emit(this.el);
   }
+  listSelectedItems(e) {
+    // To be added to v3
+    e.stopPropagation();
+    e.preventDefault();
+    if (e.detail) {
+      this.bcmChipSelectItem.emit(e.detail);
+      e.target.setClear();
+      this.data = this.data.filter(item => item.id !== e.detail.id);
+    }
+  }
   render() {
     const { type, size, avatar, disabled, color } = this;
-    const hostClasses = cs('bcm-chip', `bcm-chip__type-${type}`, `bcm-chip__size-${size}`, {
-      'bcm-chip--disabled': disabled,
-      'bcm-chip--avatar': avatar,
+    const hostClasses = cs("bcm-chip", `bcm-chip__type-${type}`, `bcm-chip__size-${size}`, {
+      "bcm-chip--disabled": disabled,
+      "bcm-chip--avatar": avatar,
     });
-    return (h(Host, { class: hostClasses, tabindex: "0", disabled: disabled, style: this.setColor(), onClick: e => this.bcmChipSelect.emit(e) }, avatar && h("bcm-avatar", Object.assign({ size: size }, (color && { color }), (avatar && { image: avatar }))), type === 'addable' && (h("span", { class: "bcm-chip__left" }, h("bcm-icon", { onClick: e => this.handleAddable(e), icon: "far fa-plus" }))), h("slot", null), type === 'dismissable' && (h("span", { class: "bcm-chip__type-dismissable-icon" }, h("bcm-icon", { onClick: e => this.handleDismiss(e), icon: "fal fa-times" })))));
+    return (h(Host, { class: hostClasses, tabindex: "0", disabled: disabled, style: this.setColor(), onClick: e => this.bcmChipSelect.emit(e) }, h("div", { class: cs(this.selected ? "bcm-chip--selected-icon" : "tw-hidden tw-w-0") }, h("bcm-icon", { icon: "fal fa-check" })), avatar && h("bcm-avatar", Object.assign({ size: size }, (color && { color }), (avatar && { image: avatar }))), type === "addable" && (h("span", { class: "bcm-chip__left" }, h("bcm-icon", { onClick: e => this.handleAddable(e), icon: "far fa-plus" }))), h("slot", null), type === "dismissable" && (h("span", { class: "bcm-chip__type-dismissable-icon" }, h("bcm-icon", { onClick: e => this.handleDismiss(e), icon: "fal fa-times" }))), this.data &&
+      this.data.length > 0 && ( // To be added to v3
+    h("bcm-list", { "onBcm-change": e => this.listSelectedItems(e), id: this._id + "-list", data: this.data, linkedComponent: this._id, searchable: true, highlight: true }))));
   }
   static get is() { return "bcm-chip"; }
   static get originalStyleUrls() {
@@ -87,7 +102,7 @@ export class BcmChip {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "'default' | 'dismissable' | 'addable' | 'checkable'",
+          "original": "\"default\" | \"dismissable\" | \"addable\" | \"checkable\"",
           "resolved": "\"addable\" | \"checkable\" | \"default\" | \"dismissable\"",
           "references": {}
         },
@@ -99,13 +114,13 @@ export class BcmChip {
         },
         "attribute": "type",
         "reflect": false,
-        "defaultValue": "'default'"
+        "defaultValue": "\"default\""
       },
       "size": {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "'small' | 'medium' | 'large'",
+          "original": "\"small\" | \"medium\" | \"large\"",
           "resolved": "\"large\" | \"medium\" | \"small\"",
           "references": {}
         },
@@ -117,7 +132,7 @@ export class BcmChip {
         },
         "attribute": "size",
         "reflect": false,
-        "defaultValue": "'medium'"
+        "defaultValue": "\"medium\""
       },
       "avatar": {
         "type": "any",
@@ -186,6 +201,59 @@ export class BcmChip {
         },
         "attribute": "color",
         "reflect": false
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "data": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data",
+        "reflect": false,
+        "defaultValue": "[]"
       }
     };
   }
@@ -235,6 +303,21 @@ export class BcmChip {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "bcmChipSelectItem",
+        "name": "bcm-chip-select-item",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
       }];
   }
   static get elementRef() { return "el"; }

package/dist/collection/components/organism/form/form.js

@@ -30,6 +30,7 @@ export class BcmForm {
         targetFormNotExist: 'target form is not exist --> ',
       },
       inputComponents: {
+        CHIP_GROUP: 'chip-group',
         // Birbirinin aynısı
         INPUT: 'input',
         TEXTAREA: 'textarea',

package/dist/collection/components/organism/form-2/bcm-form-components.js

@@ -19,6 +19,7 @@ export const BcmFormComponents = [
   'BCM-DATETIME-PICKER',
   'BCM-SELECT',
   'BCM-LISTBOX',
+  'BCM-CHIP-GROUP', // to be added to v3
 ];
 export const BcmFormGroupComponents = [
   'BCM-FORM-GROUP',

package/dist/collection/components/organism/list/list.css

@@ -670,6 +670,9 @@
   visibility: visible;
   transition: visibility 0s linear 0s, opacity 100ms, transform 100ms;
 }
+.bcm-list__container.bcm-list__type-linked-component {
+  margin-top: 2px;
+}
 .bcm-list__label {
   line-height: 1;
 }

package/dist/components/bcm-chip-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmChipGroup extends Components.BcmChipGroup, HTMLElement {}
+export const BcmChipGroup: {
+  prototype: BcmChipGroup;
+  new (): BcmChipGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;