bromcom-ui 2.9.0-rc.1 → 2.9.0-rc.11

package/dist/collection/components/molecules/items/items.js

@@ -22,7 +22,7 @@ export class BcmItems {
     const item = element;
     const textContent = (_a = item === null || item === void 0 ? void 0 : item.innerHTML) === null || _a === void 0 ? void 0 : _a.replace(/<bcm-item>.*<\/bcm-item>/g, '').replace(/<bcm-item .*>.*<\/bcm-item>/g, '').replace(/<!--(.|\s)*?-->/g, '').trim();
     const checkAttr = (attr) => StringHelper.elementBooleanCheck(element.getAttribute(attr));
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ id: element.getAttribute('id') || Generate.UID(), text: element.getAttribute('text') || textContent }, (element.innerHTML.trim() && { isHtmlContent: element.textContent.length > 0 ? (element.innerHTML.trim()) : null })), (checkAttr('disabled') && { disabled: checkAttr('disabled') })), (checkAttr('selected') && { selected: checkAttr('selected') })), (checkAttr('checked') && { checked: checkAttr('checked') })), (checkAttr('readonly') && { readonly: checkAttr('readonly') })), (checkAttr('active') && { active: checkAttr('active') })), (checkAttr('icon') && { icon: element.getAttribute('icon') })), (checkAttr('link') && { link: element.getAttribute('link') }));
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ id: element.getAttribute('id') || Generate.UID(), text: element.getAttribute('text') || textContent }, (element.innerHTML.trim() && { isHtmlContent: element.textContent.length > 0 ? (element.innerHTML.trim()) : null })), (checkAttr('disabled') && { disabled: checkAttr('disabled') })), (checkAttr('selected') && { selected: checkAttr('selected') })), (checkAttr('hidden') && { hidden: checkAttr('hidden') })), (checkAttr('checked') && { checked: checkAttr('checked') })), (checkAttr('readonly') && { readonly: checkAttr('readonly') })), (checkAttr('active') && { active: checkAttr('active') })), (checkAttr('icon') && { icon: element.getAttribute('icon') })), (checkAttr('link') && { link: element.getAttribute('link') }));
   }
   nestedItems(element) {
     return snq(() => Array.from(element === null || element === void 0 ? void 0 : element.children).map((child) => {

package/dist/collection/components/molecules/linked/linked.js

@@ -31,6 +31,17 @@ export class BcmLinked {
       return null;
     }
   }
+  detectClone() {
+    const linked = document.querySelectorAll(`[target-id="${this.targetId}"]`);
+    if (linked.length > 0) {
+      linked.forEach((item) => {
+        if (item.id !== this._id) {
+          console.warn(`[bcm-linked] - id="${this._id}" was removed from the dom because id="${this.targetId}" is duplicated.`);
+          item.remove();
+        }
+      });
+    }
+  }
   dismissEvent() {
     document.dispatchEvent(new CustomEvent("linked-data-dismiss", { detail: { id: this._id } }));
   }
@@ -101,6 +112,7 @@ export class BcmLinked {
   }
   async show(wait = true) {
     wait && (await delay(50));
+    this.detectClone();
     const target = this.target();
     if (target) {
       const bcmOverlayContainer = document.querySelector("#bcm-overlay-container");
@@ -131,7 +143,7 @@ export class BcmLinked {
   clickListener(e) {
     if (!this.target())
       return;
-    if (this.trigger === Bcm.TriggerType.hover)
+    if (this.trigger === Bcm.TriggerType.hover || this.trigger === Bcm.TriggerType.custom)
       return;
     const isTarget = Generate.findEventPath(e, this.target());
     const isSelf = Generate.findEventPath(e, this.el);
@@ -234,7 +246,7 @@ export class BcmLinked {
         "mutable": false,
         "complexType": {
           "original": "TrigglerTypes",
-          "resolved": "\"click\" | \"focus\" | \"hover\"",
+          "resolved": "\"click\" | \"custom\" | \"focus\" | \"hover\"",
           "references": {
             "TrigglerTypes": {
               "location": "import",

package/dist/collection/components/molecules/menu/menu.js

@@ -94,6 +94,7 @@ export class BcmMenu {
       }
       return (h("a", { id: 'bcm-menu__item-' + this._id + '-' + item.id, onMouseEnter: () => this.collapse && this.getTooltip(item.id, item.text).show(), onMouseLeave: () => this.collapse && this.getTooltip(item.id, item.text).hide(), key: index, href: !item.disabled ? item.link || 'javascript:void(0)' : 'javascript:void(0)', tabindex: item.disabled ? '-1' : '0', class: cs('bcm-menu__item', {
           'bcm-menu__item--is-sub': subItems && item.isOpen,
+          'hidden tw-hidden': item.hidden,
         }) }, h("span", { class: cs('bcm-menu__item-link', `bcm-menu__item-link--${this.mode}`, {
           'bcm-menu__item-link--active': this.selectable && (this.activeItemId ? this.activeItemId === item.id : item.active),
           'bcm-menu__item-link--disabled': item.disabled,

package/dist/collection/components/molecules/popconfirm/popconfirm.js

@@ -210,7 +210,7 @@ export class BcmPopconfirm {
         "mutable": true,
         "complexType": {
           "original": "TrigglerTypes",
-          "resolved": "\"click\" | \"focus\" | \"hover\"",
+          "resolved": "\"click\" | \"custom\" | \"focus\" | \"hover\"",
           "references": {
             "TrigglerTypes": {
               "location": "import",

package/dist/collection/components/molecules/popover/popover.js

@@ -69,7 +69,7 @@ export class BcmPopover {
     this.popover.toggle();
   }
   render() {
-    return (h(Host, { "aria-describedby": "popover", class: "tw-inline-flex tw-h-fit tw-w-fit" }, h("slot", null)));
+    return (h(Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip", "aria-hidden": "true" }, h("slot", null)));
   }
   static get is() { return "bcm-popover"; }
   static get properties() {
@@ -156,7 +156,7 @@ export class BcmPopover {
         "mutable": false,
         "complexType": {
           "original": "TrigglerTypes",
-          "resolved": "\"click\" | \"focus\" | \"hover\"",
+          "resolved": "\"click\" | \"custom\" | \"focus\" | \"hover\"",
           "references": {
             "TrigglerTypes": {
               "location": "import",

package/dist/collection/components/molecules/tab-group/tab-group.js

@@ -178,7 +178,11 @@ export class BcmTabGroup {
   }
   render() {
     const { color } = this;
-    return (h(Host, { role: "tablist", "aria-label": "Tab Group", class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, h("div", { class: `tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between`, id: "tab-header" }, h("div", { id: "ink-bar", class: `tw-bg-${color}-500 tw-absolute tw-bottom-0 tw-left-0 tw-mt-[-2px] tw-h-[2px] tw-rounded-sm tw-transition-transform` })), h("slot", null)));
+    const dc = Generate.getTwColor({
+      color: color,
+      tones: [500]
+    });
+    return (h(Host, { role: "tablist", "aria-label": "Tab Group", class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, h("div", { class: `tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between`, id: "tab-header", style: dc }, h("div", { id: "ink-bar", class: `tw-bg-default-500 tw-absolute tw-bottom-0 tw-left-0 tw-mt-[-2px] tw-h-[2px] tw-rounded-sm tw-transition-transform` })), h("slot", null)));
   }
   static get is() { return "bcm-tab-group"; }
   static get properties() {

package/dist/collection/components/molecules/tab-group/tab-item-header.js

@@ -23,33 +23,18 @@ export class BcmTabItemHeader {
   }
   render() {
     const { color, size, active, disabled } = this;
-    let fontSize, padding, gap;
-    switch (size) {
-      case Bcm.Size.small:
-        fontSize = "2";
-        padding = "1";
-        gap = "2";
-        break;
-      case Bcm.Size.medium:
-        fontSize = "3";
-        padding = "2";
-        gap = "3";
-        break;
-      case Bcm.Size.large:
-        fontSize = "4";
-        padding = "3";
-        gap = "4";
-        break;
-      default:
-        fontSize = "3";
-        padding = "2";
-        gap = "3";
-        break;
-    }
     const disabledClass = "tw-cursor-not-allowed tw-text-gray-400 tw-opacity-50";
-    return (h(Host, { onClick: () => this.handleClick(), class: cs(`tw-text-${fontSize} tw-py-${padding} tw-flex tw-flex-1 tw-items-center tw-justify-center tw-border-b-[2px] tw-border-b-slate-300  tw-transition-font tw-gap-${gap} tw-focus:outline-none tw-mb-${padding}]`, disabled ? disabledClass : "tw-cursor-pointer", active
-        ? `tw-text-${color}-500 enabled:hover:tw-text-${color}-600 enabled:active:tw-text-${color}-700 enabled:focus-visible:tw-text-${color}-800`
-        : "tw-text-slate-400 enabled:hover:tw-text-slate-500 enabled:focus-visible:tw-text-slate-700 enabled:active:tw-text-slate-600") }));
+    const dc = Generate.getTwColor({
+      color: color,
+      tones: [500, 600, 700, 800]
+    });
+    return (h(Host, { onClick: () => this.handleClick(), class: cs(`tw-flex tw-flex-1 tw-items-center tw-justify-center tw-border-b-[2px] tw-border-b-slate-300  tw-transition-font tw-focus:outline-none`, {
+        "tw-text-2 tw-py-1 tw-gap-2": size === Bcm.Size.small,
+        "tw-text-3 tw-py-2 tw-gap-3": size === Bcm.Size.medium,
+        "tw-text-4 tw-py-3 tw-gap-4": size === Bcm.Size.large,
+      }, disabled ? disabledClass : "tw-cursor-pointer", active
+        ? `tw-text-default-500 enabled:hover:tw-text-default-600 enabled:active:tw-text-default-700 enabled:focus-visible:tw-text-default-800`
+        : "tw-text-slate-400 enabled:hover:tw-text-slate-500 enabled:focus-visible:tw-text-slate-700 enabled:active:tw-text-slate-600"), style: dc }));
   }
   static get is() { return "bcm-tab-item-header"; }
   static get properties() {

package/dist/collection/components/molecules/tooltip/tooltip.js

@@ -68,7 +68,7 @@ export class BcmTooltip {
     this.tooltip.toggle();
   }
   render() {
-    return (h(Host, { "aria-describedby": "tooltip", class: "tw-inline-flex tw-h-fit tw-w-fit" }, h("slot", null)));
+    return (h(Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip", "aria-hidden": "true" }, h("slot", null)));
   }
   static get is() { return "bcm-tooltip"; }
   static get properties() {
@@ -137,7 +137,7 @@ export class BcmTooltip {
         "mutable": false,
         "complexType": {
           "original": "TrigglerTypes",
-          "resolved": "\"click\" | \"focus\" | \"hover\"",
+          "resolved": "\"click\" | \"custom\" | \"focus\" | \"hover\"",
           "references": {
             "TrigglerTypes": {
               "location": "import",

package/dist/collection/components/organism/datetime-picker/datetime-picker.js

@@ -969,6 +969,20 @@ export class BcmDatetimePicker {
     this.setDataFromText(text);
     return text;
   }
+  parseDate(input) {
+    var parts = input.split('/');
+    var day = parseInt(parts[0], 10);
+    var month = parseInt(parts[1], 10) - 1;
+    var year = parseInt(parts[2], 10);
+    if (isNaN(day) || isNaN(month) || isNaN(year)) {
+      return 'invalid date';
+    }
+    var date = new Date(year, month, day);
+    if (date.getDate() !== day || date.getMonth() !== month || date.getFullYear() !== year) {
+      return 'invalid date';
+    }
+    return date;
+  }
   /**
    * @desc
    * @param dateStr
@@ -981,7 +995,7 @@ export class BcmDatetimePicker {
     const sectionTime = this.type === Types.datetime ? sections[1] : sections[0];
     const date = new Date(sectionDate);
     const date2 = new Date(sectionDate2);
-    const dateCheck = date.toString().toLowerCase() !== 'invalid date';
+    const dateCheck = date.toString().toLowerCase() !== 'invalid date' && this.parseDate(dateStr) !== 'invalid date';
     const dateCheck2 = date2.toString().toLowerCase() !== 'invalid date';
     const regDate = /^((0?[1-9]|1[0-2])(-|\/)(0?[1-9]|[12]\d|3[01])(-|\/)[12]\d{3})$/;
     const regDateCheck = regDate.test(sectionDate);

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

@@ -47,6 +47,7 @@ export class BcmForm {
         LIST: 'list',
         //
         COLORPICKER: 'colorpicker',
+        DATE: 'date',
         // picker aslında tek komponent hepsi datetimepicker
         DATE_PICKER: 'date-picker',
         TIME_PICKER: 'time-picker',

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

@@ -14,12 +14,15 @@ export const BcmFormComponents = [
   'BCM-FORM-GROUP',
   'BCM-LIST',
   'BCM-COLORPICKER',
+  'BCM-DATE',
   'BCM-DATE-PICKER',
   'BCM-TIME-PICKER',
   'BCM-DATETIME-PICKER',
   'BCM-SELECT',
   'BCM-LISTBOX',
-  'BCM-CHIP-GROUP', // to be added to v3
+  'BCM-CHIP-GROUP',
+  'BCM-INPUT-DROPDOWN'
+  //... to be added to v3
 ];
 export const BcmFormGroupComponents = [
   'BCM-FORM-GROUP',

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

@@ -96,6 +96,7 @@ export class BcmList {
       indeterminate: "uncheck",
     };
     this.placement = Bcm.Placement["bottom-start"];
+    this.disableChangeEvent = false;
     this.data = [];
   }
   connectedCallback() {
@@ -173,12 +174,12 @@ export class BcmList {
     if (this.checkboxes) {
       if (!Validators.compareTwoArrayIsSame(newVal, oldVal)) {
         this.bcmChecklist.emit(this.value);
-        this.change.emit(this.value);
+        !this.disableChangeEvent && this.change.emit(this.value);
       }
     }
     else {
       if ((newVal === null || newVal === void 0 ? void 0 : newVal.id) != (oldVal === null || oldVal === void 0 ? void 0 : oldVal.id)) {
-        this.change.emit(this.value);
+        !this.disableChangeEvent && this.change.emit(this.value);
       }
     }
   }
@@ -1492,6 +1493,24 @@ export class BcmList {
         "reflect": false,
         "defaultValue": "Bcm.Placement[\"bottom-start\"]"
       },
+      "disableChangeEvent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disable-change-event",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "data": {
         "type": "any",
         "mutable": true,

package/dist/collection/components/other/typography/typography.js

@@ -5,7 +5,7 @@
 import { h, Host } from '@stencil/core';
 export class BcmTypography {
   render() {
-    return (h(Host, null, h("slot", null)));
+    return (h(Host, { class: "bcm-ui-element bcm-ui-content-display" }, h("slot", null)));
   }
   static get is() { return "bcm-typography"; }
   static get elementRef() { return "el"; }

package/dist/collection/components/other_deprecated/old-popover/old-popover.js

@@ -166,7 +166,7 @@ export class OldBcmPopover {
         "mutable": true,
         "complexType": {
           "original": "TrigglerTypes",
-          "resolved": "\"click\" | \"focus\" | \"hover\"",
+          "resolved": "\"click\" | \"custom\" | \"focus\" | \"hover\"",
           "references": {
             "TrigglerTypes": {
               "location": "import",