bromcom-ui 2.10.1-rc.1 → 2.10.1-rc.10

package/dist/collection/components/molecules/number-input/number-input.js

@@ -0,0 +1,425 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Generate } from "@bcm/helpers";
+import { Host, h } from "@stencil/core";
+import { Bcm } from "@bcm/model";
+import { CaptionTemplate } from "@bcm/template";
+import { numberInputStyle } from "./number-input.style";
+export class NumberInput {
+  constructor() {
+    this.blockInvalidChar = e => {
+      return ["e", "E", "+", "-"].includes(e.key) && e.preventDefault();
+    };
+    this._id = Generate.UID();
+    this.size = Bcm.Size.medium;
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.placeholder = undefined;
+    this.label = undefined;
+    this.tooltip = undefined;
+    this.value = 0;
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.pattern = undefined;
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionType = Bcm.Status.default;
+    this.captionError = undefined;
+    this.customErrorMessage = undefined;
+    this.prefixIcon = undefined;
+    this.suffixIcon = undefined;
+    this.isFocus = false;
+    this.isError = false;
+  }
+  render() {
+    const { _id, value, min, max, step, tooltip, disabled, size, label, caption, captionType, required, noCaption, captionError, customErrorMessage, prefixIcon, suffixIcon, pattern } = this;
+    const { host, input, container, inputContainer, caretContainer, caretIcon, slotIcon } = numberInputStyle({ size, focus: this.isFocus });
+    return (h(Host, { class: host(), onClick: () => !disabled && this.nativeInput.focus() }, label && h("bcm-label", { tooltip: tooltip, "no-margin": true, type: captionType, value: label, required: required, htmlFor: _id }), h("div", { class: container() }, h("div", { class: inputContainer() }, prefixIcon && (h("span", { class: slotIcon() }, h("i", { class: prefixIcon }))), h("input", { type: "number", class: input(), min: min, max: max, step: step, value: value, inputmode: "numeric", pattern: pattern, ref: input => (this.nativeInput = input), onKeyPress: this.blockInvalidChar, onFocus: () => (this.isFocus = true), onBlur: () => (this.isFocus = false), onError: e => console.log(e), onErrorCapture: e => console.log(e) }), suffixIcon && (h("span", { class: slotIcon() }, h("i", { class: suffixIcon })))), h("div", { class: caretContainer() }, h("span", { class: caretIcon() }, h("i", { class: "fas fa-caret-up" })), h("span", { class: caretIcon() }, h("i", { class: "fas fa-caret-down" })))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: customErrorMessage })));
+  }
+  static get is() { return "bcm-number-input"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["number-input.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["number-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SizeTypes",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Bcm.Size.medium"
+      },
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "100"
+      },
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "step",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "tooltip": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tooltip",
+        "reflect": false
+      },
+      "value": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "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"
+      },
+      "pattern": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pattern",
+        "reflect": false
+      },
+      "caption": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption",
+        "reflect": false
+      },
+      "noCaption": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-caption",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "captionType": {
+        "type": "string",
+        "mutable": true,
+        "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": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption-error",
+        "reflect": false
+      },
+      "customErrorMessage": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "custom-error-message",
+        "reflect": false
+      },
+      "prefixIcon": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "prefix-icon",
+        "reflect": false
+      },
+      "suffixIcon": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "suffix-icon",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isFocus": {},
+      "isError": {}
+    };
+  }
+}

package/dist/collection/components/molecules/number-input/number-input.style.js

@@ -0,0 +1,45 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const numberInputStyle = tv({
+  slots: {
+    host: "bcm-number-input bcm-ui-element tw-flex tw-flex-col tw-items-start tw-justify-start tw-max-w-[256px] tw-w-full",
+    container: "tw-flex tw-flex-row tw-items-center tw-justify-between tw-rounded tw-border tw-border-solid tw-border-slate-300 tw-w-full tw-min-h-full hover:tw-bg-slate-50",
+    inputContainer: "tw-flex tw-min-h-fit tw-w-full tw-flex-row tw-items-center tw-justify-center tw-gap-2 tw-px-3",
+    input: "tw-outline-none tw-appearance-none tw-flex-1 tw-bg-transparent tw-text-slate-400 tw-text-inherit tw-font-normal",
+    caretContainer: "tw-flex tw-flex-col tw-min-h-full tw-border-l tw-items-stretch tw-self-stretch tw-justify-center tw-border-l-slate-300 tw-select-none tw-w-[30px]",
+    caretIcon: "tw-flex tw-items-center tw-text-slate-500 tw-justify-center tw-h-full tw-cursor-pointer active:tw-bg-slate-400 last:tw-border-t last:tw-border-t-slate-300",
+    slotIcon: "tw-text-slate-500",
+  },
+  variants: {
+    size: {
+      small: {
+        host: "tw-gap-0.5 tw-text-xs",
+        slotIcon: "tw-text-[10px]",
+        inputContainer: "tw-py-[2px]",
+        caretIcon: "tw-text-[10px]",
+      },
+      medium: {
+        host: "tw-gap-1 tw-text-base",
+        slotIcon: "tw-text-xs",
+        inputContainer: "tw-py-[5px]",
+      },
+      large: {
+        host: "tw-gap-2 tw-text-base",
+        slotIcon: "tw-text-[14px]",
+        inputContainer: "tw-py-2",
+      },
+    },
+    focus: {
+      true: {
+        container: "tw-ring-1 tw-ring-blue-600",
+        input: "tw-text-slate-700",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});

package/dist/collection/components/molecules/switch/switch.css

@@ -202,6 +202,7 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
+  gap: 4px;
 }
 .bcm-switch__container--left, .bcm-switch__container--right {
   align-items: center;

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

@@ -561,6 +561,7 @@
   width: 100%;
 }
 .bcm-list__container.bcm-list__type-linked-component, .bcm-list__container.bcm-list__type-select, .bcm-list__container.bcm-list__type-autocomplete {
+  display: none;
   opacity: 0;
   visibility: hidden;
   position: absolute;
@@ -576,6 +577,7 @@
   transform: translateY(-10%);
 }
 .bcm-list__container.bcm-list__type-linked-component.is-open, .bcm-list__container.bcm-list__type-select.is-open, .bcm-list__container.bcm-list__type-autocomplete.is-open {
+  display: flex;
   opacity: 1;
   transform: translateY(0);
   visibility: visible;

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

@@ -98,6 +98,7 @@ export class BcmList {
       status: Bcm.Status.default,
       indeterminate: "uncheck",
     };
+    this.shouldTriggerChange = undefined;
     this.placement = Bcm.Placement["bottom-start"];
     this.disableChangeEvent = false;
     this.data = [];
@@ -140,7 +141,7 @@ export class BcmList {
       return (_a = this.value) === null || _a === void 0 ? void 0 : _a.map(item => ({
         value: item.id,
         label: StringHelper.textLimitter(item.text, 7),
-        text: item.tooltipMessage || item.tagTitle || item.text,
+        text: item.tooltipMessage || item.tagTitle || Generate.domParser(item.text),
       }));
     }, []);
   }
@@ -149,7 +150,7 @@ export class BcmList {
     // if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
     //     const list = this.el.querySelector(`#bcm-list-${this._id}`);
     //     if (list) {
-    //         document.body.appendChild(list); 
+    //         document.body.appendChild(list);
     //     }
     // }
   }
@@ -180,12 +181,13 @@ export class BcmList {
     if (this.checkboxes) {
       if (!Validators.compareTwoArrayIsSame(newVal, oldVal)) {
         this.bcmChecklist.emit(this.value);
-        !this.disableChangeEvent && this.change.emit(this.value);
+        !this.disableChangeEvent && this.change.emit([...this.value, { shouldTriggerChange: this.shouldTriggerChange }]);
       }
     }
     else {
       if ((newVal === null || newVal === void 0 ? void 0 : newVal.id) != (oldVal === null || oldVal === void 0 ? void 0 : oldVal.id)) {
-        !this.disableChangeEvent && this.change.emit(this.value);
+        !this.disableChangeEvent &&
+          this.change.emit(Object.assign(Object.assign({}, this.value), { shouldTriggerChange: this.shouldTriggerChange }));
       }
     }
   }
@@ -431,8 +433,9 @@ export class BcmList {
       }
     }
   }
-  async set(data) {
+  async set(data, trigger = true) {
     if (data) {
+      this.shouldTriggerChange = trigger;
       if (Array.isArray(data)) {
         this.addChecked(data);
       }
@@ -457,6 +460,9 @@ export class BcmList {
   async getValue() {
     return Promise.resolve(this.value);
   }
+  async triggerChange(action) {
+    this.shouldTriggerChange = action;
+  }
   async addChecked(ids = [], save = false, emit = true) {
     if (ids && ids.length > 0) {
       if (!save) {
@@ -575,7 +581,7 @@ export class BcmList {
     this.totalRootData = totalRoots;
     this.value = this.checkboxes ? (await this.getCheckedList()).checkedList : listState.selectedItem(this._id) ? listState.selectedItem(this._id)[0] : null;
     if (!this.checkboxes) {
-      this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
+      this.inputText = Generate.domParser((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
     }
     // checkli olan subparentların indeterminate kontrolü için
     if (this.checkboxes && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) > 0) {
@@ -630,7 +636,7 @@ export class BcmList {
     var _a;
     if (!this.checkboxes) {
       this.value = listState.selectedItem(this._id, itemId) ? listState.selectedItem(this._id, itemId)[0] : null;
-      this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
+      this.inputText = Generate.domParser((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
       this.isOpen = false;
       this.markForCheck();
       if (this.type == "autocomplete" && this.value) {
@@ -1638,7 +1644,8 @@ export class BcmList {
       "returnOtherData": {},
       "options": {},
       "tagContainerWidth": {},
-      "selectAllItem": {}
+      "selectAllItem": {},
+      "shouldTriggerChange": {}
     };
   }
   static get events() {
@@ -1753,10 +1760,13 @@ export class BcmList {
     return {
       "set": {
         "complexType": {
-          "signature": "(data: any) => Promise<void>",
+          "signature": "(data: any, trigger?: boolean) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
+            }, {
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {
@@ -1834,6 +1844,25 @@ export class BcmList {
           "tags": []
         }
       },
+      "triggerChange": {
+        "complexType": {
+          "signature": "(action: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
       "addChecked": {
         "complexType": {
           "signature": "(ids?: any[], save?: boolean, emit?: boolean) => Promise<any>",

package/dist/collection/helper/generate.js

@@ -33,6 +33,15 @@ if (isAllowedDomain()) {
   }
 })();
 export class Generate {
+  static prettify(input) {
+    const prettifiedObject = {};
+    for (const key in input) {
+      if (input.hasOwnProperty(key)) {
+        prettifiedObject[key] = input[key];
+      }
+    }
+    return prettifiedObject;
+  }
   /**
       const dc = Generate.getTwColor({
           color: "blue",
@@ -110,6 +119,11 @@ Generate.getIconAttrWithStatusType = (status, loading = false) => {
       return { icon: "far fa-check-circle" };
   }
 };
+Generate.domParser = (html) => {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, "text/html");
+  return doc.body.innerText;
+};
 Generate.createComponent = (el, props, area = "append-area") => {
   let container = area ? document.querySelector(area) : document.body;
   if (area && !container) {

package/dist/collection/templates/label-template.js

@@ -2,15 +2,15 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h } from '@stencil/core';
-import cs from 'classnames';
-import Bcm from '../models/bcm';
-export const LabelTemplate = ({ required, value, size, form, htmlFor, type }) => {
+import { h } from "@stencil/core";
+import cs from "classnames";
+import Bcm from "../models/bcm";
+export const LabelTemplate = ({ required, value, size, form, htmlFor, type, tooltip }) => {
   size = size || "medium";
   type = type || Bcm.Status.default;
-  return (h("label", { form: form, htmlFor: htmlFor, class: cs("bcm-ui-element bcm-ui-feedback bcm-label bcm-label__text tw-mb-1 tw-text-slate-600 tw-font-medium ", {
+  return (h("label", { form: form, htmlFor: htmlFor, class: cs("bcm-ui-element bcm-ui-feedback bcm-label bcm-label__text tw-mb-1 tw-font-medium tw-text-slate-600 ", {
       "tw-text-1": size == "small",
       "tw-text-2": size == "medium",
       "tw-text-3": size == "large",
-    }) }, value, " ", required && ('*')));
+    }) }, value, " ", required && "*", tooltip && (h("span", { class: "tw-ml-1" }, h("bcm-tooltip", { message: tooltip, placement: "top", trigger: "hover" }, h("bcm-icon", { icon: "fas fa-info-circle" }))))));
 };