bromcom-ui 2.9.0-rc.2 → 2.9.0-rc.20

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

@@ -0,0 +1,73 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const inputDropdownStyle = tv({
+  slots: {
+    base: "tw-font-sans tw-flex tw-flex-col tw-items-start tw-justify-start tw-gap-2",
+    content: "tw-flex tw-flex-row tw-items-center tw-justify-start tw-gap-3",
+    inputArea: "tw-flex tw-flex-row tw-items-center tw-justify-start tw-gap-1 tw-box-content tw-border tw-border-solid tw-max-w-[100px]  tw-uppercase tw-font-medium tw-text-center tw-border-gray-300 tw-rounded",
+    input: "tw-flex-1 tw-text-inherit tw-uppercase tw-font-semibold tw-text-center tw-border-none tw-bg-transparent tw-outline-none tw-w-full",
+    button: [
+      "input-dropdown-button tw-flex tw-flex-row tw-items-center tw-justify-center tw-gap-1 tw-rounded tw-outline-none tw-bg-slate-100",
+      "tw-border tw-border-solid tw-border-slate-300 tw-font-medium tw-text-slate-600",
+      "hover:tw-border-slate-400 hover:tw-bg-slate-200",
+      "tw-min-w-[32px]",
+      "tw-cursor-pointer",
+      "disabled:tw-cursor-not-allowed disabled:tw-text-slate-400 disabled:tw-pointer-events-none",
+      "readonly:tw-text-slate-700 readonly:tw-cursor-text",
+    ],
+    menu: "tw-mt-1 tw-flex tw-flex-col tw-items-start tw-justify-center tw-gap-2 tw-overflow-auto tw-bg-white tw-p-3  tw-font-sans tw-text-3 tw-text-slate-700",
+    menuItem: "tw-flex tw-w-full tw-cursor-pointer tw-flex-row tw-items-start tw-gap-1 tw-rounded tw-px-3 tw-py-1  tw-text-slate-700 hover:tw-bg-blue-100",
+    selectedItem: "tw-flex tw-w-full tw-flex-row tw-items-start tw-gap-1 tw-rounded tw-px-3 tw-py-1  tw-text-slate-700 tw-bg-primary-200",
+    disabledItem: "tw-flex tw-w-full tw-flex-row tw-items-start tw-gap-1 tw-rounded tw-px-3 tw-py-1  tw-cursor-not-allowed tw-text-slate-400 tw-bg-slate-100 hover:tw-bg-slate-100 tw-list-none",
+    commentArea: "tw-flex tw-h-fit tw-w-full tw-min-w-[288px] tw-flex-col tw-items-start tw-gap-3 tw-rounded tw-p-4 tw-shadow-2",
+  },
+  variants: {
+    size: {
+      small: {
+        button: "tw-h-[18px] tw-text-1 tw-leading-none",
+      },
+      medium: {
+        button: "tw-h-[24px] tw-text-2",
+        inputArea: "tw-p-0.5",
+        input: "tw-text-4",
+      },
+      large: {
+        button: "tw-h-[30px] tw-text-2",
+        inputArea: "tw-p-1",
+        input: "tw-text-6",
+      },
+    },
+    invalid: {
+      true: {
+        inputArea: "tw-border-red-600 tw-bg-red-50",
+        input: "tw-text-red-500",
+      },
+    },
+    disabled: {
+      true: {
+        base: "tw-opacity-50 tw-cursor-not-allowed",
+        input: "tw-cursor-not-allowed",
+      },
+    },
+    hideComment: {
+      true: {
+        base: "tw-min-w-[98px]",
+      },
+      false: {
+        base: "tw-min-w-[128px] ",
+      },
+    },
+    label: {
+      true: "",
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    invalid: false,
+    hideComment: false,
+    disabled: false,
+  },
+});

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

@@ -18,6 +18,9 @@ export class BcmLinked {
     this.isOpen = false;
     this.hideDelay = 500;
     this.isMouseOverLink = false;
+    window.addEventListener("scroll", () => this.calculatePosition(), true);
+    window.addEventListener("wheel", () => this.calculatePosition(), true);
+    window.addEventListener("resize", () => this.calculatePosition(), true);
   }
   target() {
     const target = document.querySelectorAll(`[id="${this.targetId}"]`);
@@ -31,6 +34,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 +115,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 +146,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);
@@ -152,15 +167,6 @@ export class BcmLinked {
       isTarget && this.show(false);
     }
   }
-  resizeListener() {
-    this.calculatePosition();
-  }
-  scrollListener() {
-    this.calculatePosition();
-  }
-  wheelListener() {
-    this.calculatePosition();
-  }
   listenMouseOver() {
     var _a, _b;
     this.el.addEventListener("mouseover", () => (this.isMouseOverLink = true));
@@ -234,7 +240,7 @@ export class BcmLinked {
         "mutable": false,
         "complexType": {
           "original": "TrigglerTypes",
-          "resolved": "\"click\" | \"focus\" | \"hover\"",
+          "resolved": "\"click\" | \"custom\" | \"focus\" | \"hover\"",
           "references": {
             "TrigglerTypes": {
               "location": "import",
@@ -473,24 +479,6 @@ export class BcmLinked {
         "target": "document",
         "capture": true,
         "passive": false
-      }, {
-        "name": "resize",
-        "method": "resizeListener",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "scroll",
-        "method": "scrollListener",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "wheel",
-        "method": "wheelListener",
-        "target": "window",
-        "capture": false,
-        "passive": true
       }];
   }
 }

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/date-picker/date-picker.css

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

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';
@@ -969,6 +970,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 +996,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);
@@ -1349,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
@@ -1357,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(), "no-margin": true, 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),
@@ -1700,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/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.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);
 }