bromcom-ui 3.0.0-alpha.2 → 3.0.0-alpha.4

package/dist/collection/components/molecules/color-palette/color-palette.js

@@ -0,0 +1,114 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { h, Host } from "@stencil/core";
+import { ColorHelper } from "../../../helper/color-helper";
+import { colorPaletteStyle } from "./color-palette.style";
+/**
+ * A component that renders a grid of Tailwind CSS colors.
+ * It allows users to select a specific shade from various color palettes.
+ *
+ * @component bcm-color-palette
+ *
+ * @property {string} value - The currently selected color value (e.g., '#000000'). This prop is mutable and reflected.
+ * @property {string[]} paletteKeys - An array of Tailwind color names to display in the grid (e.g., ['blue', 'red']).
+ * @property {number[]} shades - An array of shade values to generate for each color key (e.g., [100, 200, ...]).
+ *
+ * @event bcm-change - Emitted when a color is selected. The event detail contains the selected hex color string.
+ *
+ * @example
+ * <bcm-color-palette value="#000000"></bcm-color-palette>
+ */
+export class BcmColorPalette {
+  constructor() {
+    this.onColorChange = (hex) => {
+      this.value = hex;
+      this.bcmChange.emit(hex);
+    };
+    this.value = undefined;
+    this.paletteKeys = ["orange", "yellow", "lime", "green", "teal", "cyan", "sky", "indigo", "violet", "purple", "fuchsia", "pink", "rose", "stone", "slate"];
+    this.shades = [950, 900, 800, 700, 600, 400, 300, 200, 100, 50];
+  }
+  render() {
+    const { host, column, box } = colorPaletteStyle();
+    return (h(Host, { class: host() }, this.paletteKeys.map((colorName) => (h("div", { class: column(), key: colorName }, this.shades.map((shade) => {
+      const colorKey = `${colorName}-${shade}`;
+      const hex = ColorHelper.getTwColorToHex(colorKey);
+      const isSelected = this.value === hex;
+      return (h("div", { key: colorKey, class: box({ selected: isSelected }), style: { backgroundColor: hex }, onClick: () => this.onColorChange(hex) }));
+    }))))));
+  }
+  static get is() { return "bcm-color-palette"; }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Selected color value (e.g. '#000000')"
+        },
+        "attribute": "value",
+        "reflect": true
+      },
+      "paletteKeys": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of tailwind color keys to display"
+        },
+        "defaultValue": "[\"orange\", \"yellow\", \"lime\", \"green\", \"teal\", \"cyan\", \"sky\", \"indigo\", \"violet\", \"purple\", \"fuchsia\", \"pink\", \"rose\", \"stone\", \"slate\"]"
+      },
+      "shades": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "number[]",
+          "resolved": "number[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of shades to display"
+        },
+        "defaultValue": "[950, 900, 800, 700, 600, 400, 300, 200, 100, 50]"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "bcmChange",
+        "name": "bcm-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a color is selected"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/collection/components/molecules/color-palette/color-palette.style.js

@@ -0,0 +1,25 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const colorPaletteStyle = tv({
+  slots: {
+    host: "tw-flex tw-gap-4 tw-p-3 tw-bg-color-base tw-border tw-rounded-md tw-box-border tw-w-fit tw-h-fit",
+    column: "tw-flex tw-flex-col tw-gap-4",
+    box: "tw-w-6 tw-h-6 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-flex tw-items-center tw-justify-center tw-border",
+  },
+  variants: {
+    selected: {
+      true: {
+        box: "tw-z-10 tw-ring-2 tw-ring-primary tw-ring-offset-2 tw-scale-100 tw-border-transparent",
+      },
+      false: {
+        box: "tw-border-transparent hover:tw-border-black/10 hover:tw-scale-110",
+      },
+    },
+  },
+  defaultVariants: {
+    selected: false,
+  },
+});

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

@@ -102,6 +102,7 @@ export class BcmList {
     this.shouldTriggerChange = undefined;
     this.placement = Bcm.Placement["bottom-start"];
     this.disableChangeEvent = false;
+    this.autoFocusSelected = false;
     this.data = [];
     window.addEventListener("scroll", this.handleWheel.bind(this), true);
     window.addEventListener("wheel", this.handleWheel.bind(this), true);
@@ -214,6 +215,7 @@ export class BcmList {
     }
   }
   async handleOpen() {
+    const isAutoSelected = this.autoFocusSelected && this.type == "select" && !this.checkboxes && this.value;
     if (this.isOpen) {
       this.detectClone();
       if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
@@ -228,10 +230,15 @@ export class BcmList {
       this.onSelectSearch();
       await delay(50);
       this.isOpenAnimation = true;
+      if (isAutoSelected) {
+        this.focusSelectedElement();
+      }
     }
     else {
+      if (!isAutoSelected) {
+        this.listScrollToTop();
+      }
       this.isOpenAnimation = false;
-      this.listScrollToTop();
       this.close.emit();
       this.listClose.emit();
       await delay(100);
@@ -584,22 +591,33 @@ export class BcmList {
     this.markForCheck();
   }
   async initState() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     this.onClearSearch();
     await listState.setValue({
       id: this._id,
       dataSource: this.data && snq(() => (typeof this.data == "string" ? JSON.parse(this.data) : this.data), []),
       options: this,
     });
-    const { totalRoots, totalItems } = listState.getValue(this._id);
+    const { totalRoots, totalItems, dataSource } = listState.getValue(this._id);
     this.totalData = (totalItems === null || totalItems === void 0 ? void 0 : totalItems.total) || 0;
     this.totalRootData = totalRoots || 0;
     this.value = this.checkboxes ? (await this.getCheckedList()).checkedList : listState.selectedItem(this._id) ? listState.selectedItem(this._id)[0] : null;
+    /** @description Focus selected element * BUG 282262 */
+    if (this.autoFocusSelected && this.type == "select" && this.value && !this.checkboxes) {
+      const selectedId = Array.isArray(this.value) ? (_a = this.value[0]) === null || _a === void 0 ? void 0 : _a.id : (_b = this.value) === null || _b === void 0 ? void 0 : _b.id;
+      if (selectedId && dataSource) {
+        const selectedIndex = dataSource.findIndex(item => item.id === selectedId);
+        if (selectedIndex !== -1 && selectedIndex >= this.limit) {
+          this.limit = selectedIndex + 5;
+          this.searchResultLimit = this.limit;
+        }
+      }
+    }
     if (!this.checkboxes) {
-      this.inputText = Generate.domParser((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
+      this.inputText = Generate.domParser((_c = this.value) === null || _c === void 0 ? void 0 : _c.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) {
+    if (this.checkboxes && ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) > 0) {
       const checkedIDs = [];
       this.value.forEach(item => {
         if (!item.items || item.items.length === 0) {
@@ -608,7 +626,7 @@ export class BcmList {
       });
       await this.addChecked(checkedIDs, false, false);
     }
-    await this.handleIndeterminate((_c = this.value) === null || _c === void 0 ? void 0 : _c.length, this.totalData);
+    await this.handleIndeterminate((_e = this.value) === null || _e === void 0 ? void 0 : _e.length, this.totalData);
     await this.markForCheck();
   }
   async markForCheck() {
@@ -691,20 +709,16 @@ export class BcmList {
   getAutoCompleteInput() {
     return document.getElementById(`bcm-list-input-tag-container-${this._id}-autocomplete-input`);
   }
+  /** @description Fixes the issue where the list appears empty during fast scrolling. */
   dataScrollEvent(event) {
-    let count = 0;
-    let io = new IntersectionObserver((data) => {
-      if (count === 0) {
-        count++;
-        if (data[0].isIntersecting) {
-          this.limit += 15;
-          this.searchResultLimit += 15;
-          io.disconnect();
-          io = null;
-        }
-      }
-    }, this.options);
-    io.observe(event.target.lastElementChild);
+    var _a, _b;
+    const itemHeight = this.size === 'small' ? 28 : this.size === 'large' ? 48 : 36;
+    const currentScrollBottom = ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.scrollTop) + ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.clientHeight);
+    const requiredItems = Math.ceil(currentScrollBottom / itemHeight) + 20;
+    if (requiredItems > this.limit) {
+      this.limit = requiredItems;
+      this.searchResultLimit = requiredItems;
+    }
   }
   async calculateLocation() {
     var _a, _b;
@@ -774,6 +788,28 @@ export class BcmList {
       this.listOpen.emit();
     }
   }
+  /** @description Focus selected element * BUG 282262 */
+  focusSelectedElement() {
+    var _a;
+    const listElement = document.querySelector(`#bcm-list-${this._id}`);
+    if (!listElement)
+      return;
+    const selectedId = (_a = this.value) === null || _a === void 0 ? void 0 : _a.id;
+    if (selectedId) {
+      const targetItem = listElement.querySelector(`[id*="${selectedId}"]`);
+      if (targetItem) {
+        targetItem.scrollIntoView({
+          block: 'center',
+          inline: 'nearest',
+          behavior: 'auto'
+        });
+        targetItem.focus();
+        const items = listElement.querySelectorAll(".bcm-list__item");
+        items.forEach(i => i.classList.remove("focused"));
+        targetItem.classList.add("focused");
+      }
+    }
+  }
   render() {
     const { checkboxes, treeview, label, size, disabled, readonly, required, hidden, fullWidth, searchable } = this.getOptions();
     const hostClasses = cs("bcm-list", `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === "large" ? "size-3" : "size-2", {
@@ -802,7 +838,7 @@ export class BcmList {
         "--min-height": openedType ? "inherit" : this.minHeight,
       } }, h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (h("div", null, h("bcm-label", { tooltip: this.tooltip, size: this.size, type: this.captionType, value: label, required: required, htmlFor: this._id })))), this.type == "select" && (h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput }, h("span", { class: cs("bcm-list__input-container", { "type-single": !checkboxes, "value-empty": !this.value }) }, this.checkboxes ? (this.value && this.value.length > 0 ? (h("bcm-rc-overflow", { data: this.tagData, maxCount: this.tagCount })) : (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))) : this.value ? (this.inputText) : (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))), h("span", { class: cs("bcm-list__input-buttons", {
         disabled: disabled,
-      }) }, this.clearable && this.value && (h("div", { class: "bcm-list__input-buttons-button" }, h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && "caret-is-open"}` }, h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === "autocomplete" && (h("div", { id: `bcm-list-input-${this._id}`, class: cs(bcmListInput, { "bcm-list__input-autocomplete": this.type == "autocomplete" }) }, h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), h(ListTemplate, { type: this.type, highlight: this.highlightText, searchable: this.type == "autocomplete" ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, tempId: this.tempId, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon, handleTransitionEnd: e => this.handleTransitionEnd(e) }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
+      }) }, this.clearable && this.value && (h("div", { class: "bcm-list__input-buttons-button" }, h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && "caret-is-open"}` }, h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === "autocomplete" && (h("div", { id: `bcm-list-input-${this._id}`, class: cs(bcmListInput, { "bcm-list__input-autocomplete": this.type == "autocomplete" }) }, h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), h(ListTemplate, { type: this.type, highlight: this.highlightText, searchable: this.type == "autocomplete" ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, tempId: this.tempId, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon, handleTransitionEnd: e => this.handleTransitionEnd(e), disabled: disabled, readonly: readonly }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
   }
   static get is() { return "bcm-list"; }
   static get originalStyleUrls() {
@@ -1620,6 +1656,24 @@ export class BcmList {
         "reflect": false,
         "defaultValue": "false"
       },
+      "autoFocusSelected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auto-focus-selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "data": {
         "type": "any",
         "mutable": true,

package/dist/collection/components/other/segmented-picker/segment.component.js

@@ -0,0 +1,200 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { h, Host } from '@stencil/core';
+import cs from "classnames";
+/**
+ * Individual segment option component
+ * @slot - Default slot for segment label content
+ */
+export class BcmSegment {
+  constructor() {
+    this.handleClick = () => {
+      if (!this.disabled) {
+        this.bcmSegmentClick.emit(this.value);
+      }
+    };
+    this.value = undefined;
+    this.disabled = false;
+    this.selected = false;
+    this.size = 'medium';
+    this.index = 0;
+    this.activeIndex = 0;
+    this.totalSegments = 0;
+  }
+  render() {
+    const isLastSegment = this.totalSegments > 0 && this.index === this.totalSegments - 1;
+    const hideDivider = isLastSegment || this.selected || this.index === this.activeIndex - 1;
+    return (h(Host, { role: "radio", "aria-checked": this.selected.toString() }, h("button", { class: cs("bcm-ui-element bcm-segment__button tw-relative tw-z-20 tw-px-3 tw-text-center tw-font-medium tw-transition-colors tw-border-none tw-bg-transparent tw-select-none", {
+        "tw-text-2 tw-py-px": this.size === "small",
+        "tw-text-3 tw-py-1": this.size === "medium",
+        "tw-text-4 tw-py-2": this.size === "large",
+      }, {
+        "tw-text-color-header": this.selected,
+        "tw-text-color-helper": !this.selected,
+      }, {
+        "tw-cursor-not-allowed tw-opacity-50": this.disabled,
+        "tw-cursor-pointer hover:tw-text-color-header": !this.disabled,
+      }), onClick: this.handleClick, disabled: this.disabled, type: "button" }, h("slot", null)), h("div", { class: `bcm-segment__divider ${hideDivider ? 'bcm-segment__divider--hidden' : ''}` })));
+  }
+  static get is() { return "bcm-segment"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["segment.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["segment.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Unique identifier for this segment"
+        },
+        "attribute": "value",
+        "reflect": true
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disabled state"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Selected state (controlled by parent)"
+        },
+        "attribute": "selected",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant (inherited from parent)"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'medium'"
+      },
+      "index": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Index of this segment (inherited from parent)"
+        },
+        "attribute": "index",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "activeIndex": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Index of currently active segment (inherited from parent)"
+        },
+        "attribute": "active-index",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "totalSegments": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Total number of segments (inherited from parent)"
+        },
+        "attribute": "total-segments",
+        "reflect": false,
+        "defaultValue": "0"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "bcmSegmentClick",
+        "name": "bcm-segment-click",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": false,
+        "docs": {
+          "tags": [],
+          "text": "Internal event emitted when segment is clicked"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/other/segmented-picker/segment.css

@@ -0,0 +1,28 @@
+bcm-segment {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+}
+
+.bcm-segment__button {
+  white-space: nowrap;
+  flex: 1;
+  width: 100%;
+}
+
+.bcm-segment__divider {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 20px;
+  background-color: var(--bcm-ui-color-border-default);
+  transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+}
+
+.bcm-segment__divider--hidden {
+  opacity: 0;
+}