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

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

@@ -34,6 +34,7 @@ export class BcmDatePicker {
     this.placeholder = undefined;
     this.disabledDates = '';
     this.disabled = false;
+    this.noMargin = false;
     this.noCaption = false;
     this.caption = '';
     this.captionError = undefined;
@@ -154,7 +155,7 @@ export class BcmDatePicker {
       'full-width': this.fullWidth,
       'linked-component': this.linkedComponent,
     });
-    return (h(Host, { class: hostClasses }, h("bcm-datetime-picker", { "linked-component": this.linkedComponent, id: this._id, name: this.name, type: this.range ? 'range' : 'date', date: this.date, placeholder: this.placeholder, fullWidth: this.fullWidth, ref: el => (this.picker = el), required: this.required, clearable: this.clearable, label: this.label, "end-date": this.endDate, disabled: this.disabled, disabledDates: this.disabledDates, "on-bcm-load": () => this.handlePickerLoad(), "on-bcm-change": (e) => this.handlePickerChange(e), noCaption: this.noCaption, caption: this.caption, captionError: this.captionError, captionType: this.captionType, alignment: this.alignment, placement: this.placement })));
+    return (h(Host, { class: hostClasses }, h("bcm-datetime-picker", { "linked-component": this.linkedComponent, id: this._id, name: this.name, type: this.range ? 'range' : 'date', date: this.date, placeholder: this.placeholder, fullWidth: this.fullWidth, ref: el => (this.picker = el), required: this.required, clearable: this.clearable, label: this.label, "end-date": this.endDate, disabled: this.disabled, disabledDates: this.disabledDates, "on-bcm-load": () => this.handlePickerLoad(), "on-bcm-change": (e) => this.handlePickerChange(e), noCaption: this.noCaption, caption: this.caption, captionError: this.captionError, captionType: this.captionType, alignment: this.alignment, placement: this.placement, noMargin: this.noMargin })));
   }
   static get is() { return "bcm-date-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -408,6 +409,24 @@ export class BcmDatePicker {
         "reflect": false,
         "defaultValue": "false"
       },
+      "noMargin": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-margin",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "noCaption": {
         "type": "boolean",
         "mutable": true,

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

@@ -281,7 +281,8 @@
 }
 
 :host {
-  display: inline-block;
+  display: inline-flex;
+  flex-direction: column;
   position: relative;
   width: 100%;
   max-width: 256px;
@@ -293,6 +294,10 @@
   max-width: 100%;
 }
 
+:host(.no-margin) {
+  margin: 0;
+}
+
 :host(.hidden) {
   display: none;
 }
@@ -676,4 +681,11 @@
   border-right: 0;
   pointer-events: none;
   box-sizing: border-box;
+}
+
+.picker-input-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: stretch;
 }

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

@@ -50,6 +50,7 @@ export class BcmDatetimePicker {
     this.minYear = 1900;
     this.maxYear = 2200;
     this.noCaption = false;
+    this.noMargin = false;
     this.captionError = undefined;
     this.caption = '';
     this.captionType = 'default';
@@ -1363,6 +1364,7 @@ export class BcmDatetimePicker {
     const hostClasses = cs(this.hidden ? 'hidden' : null, {
       'full-width': this.fullWidth,
       'linked-component': this.linkedComponent,
+      'no-margin': this.noMargin,
     });
     const toggleClasses = cs('toggle', {
       disabled: this.disabled
@@ -1371,7 +1373,7 @@ export class BcmDatetimePicker {
     const calendarIcon = `<svg style="fill: #595959; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>`;
     const errorIcon = `<svg style="fill: #ef4444; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm42-104c0 23.2-18.8 42-42 42s-42-18.8-42-42 18.8-42 42-42 42 18.8 42 42zm-81.4-211.4l6.8 136c.3 6.4 5.6 11.4 12 11.4h41.2c6.4 0 11.7-5.1 12-11.4l6.8-136c.3-6.9-5.1-12.6-12-12.6h-54.8c-6.9 0-12.4 5.7-12 12.6z"/></svg>`;
     const inputIcon = this.type == "time" ? clockIcon : calendarIcon;
-    return (h(Host, { class: hostClasses, "bcm-internal-id": this.inputId }, this.label && (h("div", { class: "picker-label", onClick: () => this.openToggle() }, h(LabelTemplate, { size: "medium", type: this.captionType, value: this.label, required: this.required, htmlFor: this._id }))), h("bcm-old-input", { ref: el => (this.inputElement = el), placeholder: this.placeholder || 'Select ' + (this.type === Types.datetime ? 'date and time' : '') + (this.type === Types.date ? 'date' : '') + (this.type === Types.time ? 'time' : '') + (this.type === Types.range ? 'date range' : ''), value: this.valueText, required: this.required, fullWidth: this.fullWidth, disabled: this.disabled, name: this.name, id: this.inputId, clearable: this.clearable, onClick: () => this.openPicker(), disableWatchValue: true, "on-bcm-clear": () => this.handleInputClear(), "on-bcm-change": (e) => this.handleInputChange(e),
+    return (h(Host, { class: hostClasses, "bcm-internal-id": this.inputId }, this.label && (h("div", { class: "picker-label", onClick: () => this.openToggle() }, h(LabelTemplate, { size: "medium", type: this.captionType, value: this.label, required: this.required, htmlFor: this._id }))), h("bcm-old-input", { ref: el => (this.inputElement = el), placeholder: this.placeholder || 'Select ' + (this.type === Types.datetime ? 'date and time' : '') + (this.type === Types.date ? 'date' : '') + (this.type === Types.time ? 'time' : '') + (this.type === Types.range ? 'date range' : ''), value: this.valueText, required: this.required, fullWidth: this.fullWidth, disabled: this.disabled, name: this.name, id: this.inputId, clearable: this.clearable, onClick: () => this.openPicker(), noMargin: this.noMargin, disableWatchValue: true, "on-bcm-clear": () => this.handleInputClear(), "on-bcm-change": (e) => this.handleInputChange(e),
       // on-bcm-input={(e: CustomEvent) => this.handleInputInput(e.detail)}
       noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType }, this.error && (h("span", { slot: "suffix" }, h("span", { id: "error-icon", class: toggleClasses, innerHTML: errorIcon, title: this.errorText }))), h("span", { slot: "suffix", onClick: () => this.openPicker() }, h("span", { id: "calender-icon", class: toggleClasses, innerHTML: inputIcon }))), h("div", { id: "picker-vp-" + this._id, class: datetimePickerClasses, onWheel: (e) => this.handleWheel(e) }, h("div", { class: "modules" }, this.hasDateModule && (h("div", { class: "date-container" }, h("div", { class: "bcm-datetime-picker__header" }, h("span", null), h("div", { class: "month-year" }, h("button", { onClick: () => this.getPrevMonth() }, h("bcm-icon", { icon: "far fa-chevron-left" })), h("div", { class: "month-year-wrapper" }, h("span", { class: "month" }, this.getMonthText()), ",", h("span", { class: "year" }, this.date.getFullYear())), h("button", { onClick: () => this.getNextMonth() }, h("bcm-icon", { icon: "far fa-chevron-right" }))), h("span", { class: "today", onClick: () => this.setDateToday() }, "Today")), h("div", { class: "bcm-datetime-picker__content" }, h("div", { class: "years", ref: el => (this.yearsWrapperElement = el) }, h("div", { class: "items", ref: el => (this.yearsElement = el) }, this.years.map((year, idx) => h("span", { onClick: () => this.yearClick(idx) }, year))), h("div", { class: "select-strip", ref: el => (this.yearsStripElement = el) })), h("div", { class: "days" }, h("div", { class: "day-labels" }, h("span", null, "Mo"), h("span", null, "Tu"), h("span", null, "We"), h("span", null, "Th"), h("span", null, "Fr"), h("span", null, "Sa"), h("span", null, "Su")), h("div", { class: dayNumbersClasses }, this.dayNumbers.map(day => (h("span", { class: {
         'is-disabled-date': (this.type === Types.date || this.type === Types.datetime) && this.isDisabledDate(day.date),
@@ -1714,6 +1716,24 @@ export class BcmDatetimePicker {
         "reflect": false,
         "defaultValue": "false"
       },
+      "noMargin": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-margin",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "captionError": {
         "type": "string",
         "mutable": true,

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

@@ -750,7 +750,7 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding: 4px 4px 0 4px;
+  padding: 0 4px 0 4px;
   font-size: 16px;
   color: var(--bcm-new-ds-color-slate-500);
 }

package/dist/collection/components/organism/time-picker/time-picker.css

@@ -123,7 +123,7 @@
 }
 
 :host {
-  display: inline-block;
+  display: inline-flex;
   width: 100%;
   max-width: 256px;
 }

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

@@ -30,6 +30,7 @@ export class BcmTimePicker {
     this.label = undefined;
     this.placeholder = undefined;
     this.disabled = false;
+    this.noMargin = false;
     this.noCaption = false;
     this.caption = '';
     this.captionError = undefined;
@@ -126,7 +127,7 @@ export class BcmTimePicker {
     const hostClasses = cs(this.hidden ? 'hidden' : null, {
       'full-width': this.fullWidth
     });
-    return (h(Host, { class: hostClasses }, h("bcm-datetime-picker", { "linked-component": this.linkedComponent, id: this._id, fullWidth: this.fullWidth, required: this.required, label: this.label, name: this.name, placeholder: this.placeholder, type: "time", clearable: this.clearable, date: this.time, ref: el => (this.picker = el), disabled: this.disabled, "on-bcm-load": () => this.handlePickerLoad(), "on-bcm-change": (e) => this.handlePickerChange(e), noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType, alignment: this.alignment, placement: this.placement })));
+    return (h(Host, { class: hostClasses }, h("bcm-datetime-picker", { "linked-component": this.linkedComponent, id: this._id, fullWidth: this.fullWidth, required: this.required, label: this.label, name: this.name, placeholder: this.placeholder, type: "time", clearable: this.clearable, date: this.time, ref: el => (this.picker = el), disabled: this.disabled, "on-bcm-load": () => this.handlePickerLoad(), "on-bcm-change": (e) => this.handlePickerChange(e), noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType, alignment: this.alignment, placement: this.placement, noMargin: this.noMargin })));
   }
   static get is() { return "bcm-time-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -322,6 +323,24 @@ export class BcmTimePicker {
         "reflect": false,
         "defaultValue": "false"
       },
+      "noMargin": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-margin",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "noCaption": {
         "type": "boolean",
         "mutable": true,

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

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, Host } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import cs from "classnames";
 import { Generate } from "../../../helper/generate";
 import { StringHelper } from "../../../helper/string-helper";
@@ -23,9 +23,10 @@ export class BcmToast {
     this.visibleContainer = false;
   }
   async show() {
-    const container = document.getElementById(this._id + "-container");
-    if (container) {
-      document.body.appendChild(container);
+    const toast = document.getElementById(this._id + "-container");
+    if (toast) {
+      const container = this.createContainer(this.position);
+      container.appendChild(toast);
     }
     this.visible = true;
     await delay(50);
@@ -52,17 +53,30 @@ export class BcmToast {
       this.timer = setTimeout(() => this.hide(), 1000);
     }
   }
+  createContainer(position) {
+    const containerId = "bcm-toast-container-" + position;
+    let container = document.getElementById(containerId);
+    if (!container) {
+      container = document.createElement("div");
+      container.id = containerId;
+      const classlist = cs("tw-pointer-events-none tw-overflow-hidden tw-z-50", "tw-fixed tw-flex", "tw-p-4 tw-gap-4", {
+        "tw-flex-col-reverse tw-inset-x-0 tw-top-4 tw-mx-auto": this.position === Bcm.Placement.top,
+        "tw-flex-col tw-inset-x-0 tw-bottom-4 tw-mx-auto": this.position === Bcm.Placement.bottom,
+        "tw-flex-col-reverse tw-top-4 tw-left-4": this.position === Bcm.Placement["top-start"],
+        "tw-flex-col-reverse tw-top-4 tw-right-4": this.position === Bcm.Placement["top-end"],
+        "tw-flex-col tw-bottom-4 tw-left-4": this.position === Bcm.Placement["bottom-start"],
+        "tw-flex-col tw-bottom-4 tw-right-4": this.position === Bcm.Placement["bottom-end"],
+      });
+      container.classList.add(...classlist.split(" "));
+      document.body.appendChild(container);
+    }
+    return container;
+  }
   render() {
     return (h(Host, { class: "tw-hidden" }, h("div", { class: cs({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: cs("tw-pointer-events-auto tw-transform tw-transition tw-duration-300 tw-ease-in-out", "tw-flex tw-min-w-[256px] tw-max-w-[420px] tw-flex-col tw-gap-2 tw-rounded-lg tw-border tw-font-sans tw-font-normal tw-shadow-2", "tw-border-gray-300 tw-bg-white tw-text-slate-600", {
         "tw-p-4": !this.description,
         "tw-p-6": this.description,
-      }, "tw-fixed tw-z-50", "tw-transform tw-transition tw-duration-300 tw-ease-in-out ", {
-        "tw-inset-x-0 tw-top-4 tw-mx-auto": this.position === Bcm.Placement.top,
-        "tw-inset-x-0 tw-bottom-4 tw-mx-auto": this.position === Bcm.Placement.bottom,
-        "tw-top-4 tw-left-4": this.position === Bcm.Placement["top-start"],
-        "tw-top-4 tw-right-4": this.position === Bcm.Placement["top-end"],
-        "tw-bottom-4 tw-left-4": this.position === Bcm.Placement["bottom-start"],
-        "tw-bottom-4 tw-right-4": this.position === Bcm.Placement["bottom-end"],
+      }, "tw-transform tw-transition tw-duration-300 tw-ease-in-out ", {
         "tw-translate-y-0 tw-opacity-100 ": this.visibleContainer,
         "tw-opacity-0": !this.visibleContainer,
         "tw-translate-y-[-100%]": !this.visibleContainer && this.position.split("-")[0] === "top",

package/dist/collection/helper/string-helper.js

@@ -40,10 +40,10 @@ StringHelper.slugify = (str) => slugify(str, {
   trim: false, // trim leading and trailing replacement chars, defaults to `true`
 });
 StringHelper.highlight = (str, search) => {
-  const searchText = search;
-  const regex = new RegExp(searchText, 'gi');
   let text = str;
   text = text.replace(/(<mark>|<\/mark>)/gim, '');
+  const escapedSearch = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); // Özel karakterleri kaçış dizileri ile kaçır
+  const regex = new RegExp(escapedSearch, 'gi');
   const newText = text.replace(regex, '<mark>$&</mark>');
   return newText;
 };

package/dist/components/avatar.js

@@ -10,7 +10,8 @@ import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
 import { a as Bcm } from './bcm.js';
-import { c as ce, d as defineCustomElement$2 } from './badge.js';
+import { c as ce } from './index5.js';
+import { d as defineCustomElement$2 } from './badge.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 const avatarStyle = ce({