bromcom-ui 2.8.1 → 2.9.0-rc.1

package/dist/components/bcm-chip-group.js

@@ -0,0 +1,194 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './color-helper.js';
+import './validators.js';
+import { G as Generate } from './generate.js';
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
+import { a as Bcm } from './bcm.js';
+import { C as CaptionTemplate } from './caption-template.js';
+import { c as classnames } from './index2.js';
+import './types.js';
+import { L as LabelTemplate } from './label-template.js';
+import './types2.js';
+import { d as defineCustomElement$9 } from './avatar.js';
+import { d as defineCustomElement$8 } from './badge.js';
+import { d as defineCustomElement$7 } from './chip.js';
+import { d as defineCustomElement$6 } from './icon.js';
+import { d as defineCustomElement$5 } from './list.js';
+import { d as defineCustomElement$4 } from './rc-overflow.js';
+import { d as defineCustomElement$3 } from './search.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const chipGroupCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-chip-group .bcm-chip{cursor:pointer}";
+
+const BcmChipGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.change = createEvent(this, "bcm-change", 7);
+    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 = classnames("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 })));
+  }
+  get el() { return this; }
+  static get style() { return chipGroupCss; }
+}, [4, "bcm-chip-group", {
+    "_id": [1537, "id"],
+    "name": [1],
+    "value": [1032],
+    "required": [4],
+    "size": [1],
+    "label": [1],
+    "caption": [1],
+    "noCaption": [4, "no-caption"],
+    "captionType": [1, "caption-type"],
+    "captionError": [1, "caption-error"]
+  }, [[0, "bcm-chip-select-item", "handleSelectItem"], [0, "bcm-chip-dismiss", "handleDismiss"], [0, "bcm-chip-select", "handleSelect"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-chip-group", "bcm-avatar", "bcm-badge", "bcm-chip", "bcm-icon", "bcm-list", "bcm-rc-overflow", "bcm-search", "bcm-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-chip-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmChipGroup$1);
+      }
+      break;
+    case "bcm-avatar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "bcm-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "bcm-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "bcm-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "bcm-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "bcm-rc-overflow":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "bcm-search":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "bcm-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const BcmChipGroup = BcmChipGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmChipGroup, defineCustomElement };

package/dist/components/bcm-chip.js

@@ -2,106 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { G as Generate } from './generate.js';
-import { c as classnames } from './index2.js';
-import { C as ColorHelper } from './color-helper.js';
-import { d as defineCustomElement$4 } from './avatar.js';
-import { d as defineCustomElement$3 } from './badge.js';
-import { d as defineCustomElement$2 } from './icon.js';
-
-const chipCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-chip{--bcm-chip-color:var(--bcm-new-ds-color-slate-500);--bcm-chip-color-hover:var(--bcm-new-ds-color-slate-500);--bcm-chip-color-focus:var(--bcm-new-ds-color-slate-700);--bcm-chip-color-active:var(--bcm-new-ds-color-slate-700);--bcm-chip-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-chip-background-color:var(--bcm-new-ds-color-slate-200);--bcm-chip-background-color-hover:var(--bcm-new-ds-color-slate-300);--bcm-chip-background-color-focus:var(--bcm-new-ds-color-slate-300);--bcm-chip-background-color-active:var(--bcm-new-ds-color-slate-400);--bcm-chip-background-color-disabled:var(--bcm-new-ds-color-slate-100);display:inline-flex;justify-content:center;align-items:center;width:fit-content;height:fit-content;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;padding:0 8px;gap:4px;color:var(--bcm-chip-color);background-color:var(--bcm-chip-background-color);border-radius:100px;transition:background-color 0.1s ease-in-out;outline:none}.bcm-chip:not(.bcm-chip--disabled):hover{background-color:var(--bcm-chip-background-color-hover)}.bcm-chip:not(.bcm-chip--disabled):focus{background-color:var(--bcm-chip-background-color-focus);color:var(--bcm-chip-color-focus)}.bcm-chip:not(.bcm-chip--disabled):active{background-color:var(--bcm-chip-background-color-active);color:var(--bcm-chip-color-active)}.bcm-chip--disabled{color:var(--bcm-chip-color-disabled);background-color:var(--bcm-chip-background-color-disabled)}.bcm-chip--avatar{padding-left:2px}.bcm-chip__type-dismissable-icon:hover{cursor:pointer;color:var(--bcm-chip-color-active)}.bcm-chip__size-small{font-size:10px;line-height:calc(10px + 8px)}.bcm-chip__size-small .bcm-avatar{width:14px;height:14px}.bcm-chip__size-medium{font-size:12px;line-height:calc(12px + 8px)}.bcm-chip__size-medium .bcm-avatar{width:16px;height:16px}.bcm-chip__size-large{font-size:14px;line-height:calc(14px + 8px)}.bcm-chip__size-large .bcm-avatar{width:18px;height:18px}";
-
-const BcmChip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.bcmChipDismiss = createEvent(this, "bcm-chip-dismiss", 7);
-    this.bcmChipSelect = createEvent(this, "bcm-chip-select", 7);
-    this.bcmChipAddable = createEvent(this, "bcm-chip-addable", 7);
-    this._id = Generate.UID();
-    this.type = 'default';
-    this.size = 'medium';
-    this.avatar = undefined;
-    this.icon = undefined;
-    this.disabled = undefined;
-    this.color = undefined;
-  }
-  // @ts-ignore
-  setColor() {
-    if (!this.color)
-      return;
-    const color = this.color;
-    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'),
-    };
-  }
-  handleDismiss(e) {
-    e.stopPropagation();
-    e.preventDefault();
-    this.bcmChipDismiss.emit(this.el);
-  }
-  handleAddable(e) {
-    e.stopPropagation();
-    e.preventDefault();
-    this.bcmChipAddable.emit(this.el);
-  }
-  render() {
-    const { type, size, avatar, disabled, color } = this;
-    const hostClasses = classnames('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" })))));
-  }
-  get el() { return this; }
-  static get style() { return chipCss; }
-}, [4, "bcm-chip", {
-    "_id": [1537, "id"],
-    "type": [1025],
-    "size": [1025],
-    "avatar": [1032],
-    "icon": [1032],
-    "disabled": [1028],
-    "color": [1032]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["bcm-chip", "bcm-avatar", "bcm-badge", "bcm-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "bcm-chip":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, BcmChip$1);
-      }
-      break;
-    case "bcm-avatar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "bcm-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "bcm-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { B as BcmChip$1, d as defineCustomElement$1 } from './chip.js';
 
 const BcmChip = BcmChip$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -25,6 +25,7 @@ const BcmFormComponents = [
   'BCM-DATETIME-PICKER',
   'BCM-SELECT',
   'BCM-LISTBOX',
+  'BCM-CHIP-GROUP', // to be added to v3
 ];
 
 const form2Css = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:block}";

package/dist/components/bcm-form.js

@@ -79,6 +79,7 @@ const BcmForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         targetFormNotExist: 'target form is not exist --> ',
       },
       inputComponents: {
+        CHIP_GROUP: 'chip-group',
         // Birbirinin aynısı
         INPUT: 'input',
         TEXTAREA: 'textarea',