bromcom-ui 3.0.0-alpha.3 → 3.0.0-alpha.5

package/dist/components/bcm-toast.js

@@ -5,7 +5,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 import { G as Generate } from './generate.js';
-import { S as StringHelper } from './string-helper.js';
 import { a as Bcm } from './bcm.js';
 import { d as delay } from './utils.js';
 
@@ -29,6 +28,13 @@ const BcmToast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.visible = false;
     this.visibleContainer = false;
   }
+  renderMultiline(text) {
+    if (!text) {
+      return null;
+    }
+    const lines = text.split("\n");
+    return lines.map((line, index) => [index > 0 && h("br", null), line]);
+  }
   async show() {
     const toast = document.getElementById(this._id + "-container");
     if (toast) {
@@ -84,7 +90,7 @@ const BcmToast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return container;
   }
   render() {
-    return (h(Host, { class: "tw-hidden" }, h("div", { class: classnames({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: classnames("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-color-default tw-bg-white tw-text-color-default", {
+    return (h(Host, { class: "tw-hidden" }, h("div", { class: classnames({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: classnames("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-transform tw-transition tw-duration-300 tw-ease-in-out ", {
@@ -92,11 +98,11 @@ const BcmToast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         "tw-opacity-0": !this.visibleContainer,
         "tw-translate-y-[-100%]": !this.visibleContainer && this.position.split("-")[0] === "top",
         "tw-translate-y-[100%]": !this.visibleContainer && this.position.split("-")[0] === "bottom",
-      }) }, h("div", { class: "tw-flex tw-items-center tw-justify-between tw-gap-5" }, h("div", { class: "tw-flex tw-items-center tw-gap-3 " }, this.status && (h("i", { class: classnames("tw-text-6", this.messageIcon ? this.messageIcon : "far", {
-        "tw-text-color-success": this.status === "success",
-        "tw-text-color-error": this.status === "error",
-        "tw-text-color-warning": this.status === "warning",
-        "tw-text-color-info": this.status === "info",
+      }) }, h("div", { class: "tw-flex tw-items-start tw-justify-between tw-gap-5" }, h("div", { class: "tw-flex tw-items-start tw-gap-3 " }, this.status && (h("i", { class: classnames("tw-text-6 tw-pt-0.5", this.messageIcon ? this.messageIcon : "far", {
+        "tw-text-emerald-500": this.status === "success",
+        "tw-text-red-500": this.status === "error",
+        "tw-text-amber-500": this.status === "warning",
+        "tw-text-blue-500": this.status === "info",
       }, {
         "fa-check-circle": !this.messageIcon && this.status === "success",
         "fa-exclamation-circle": !this.messageIcon && this.status === "error",
@@ -105,9 +111,9 @@ const BcmToast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }) })), h("span", { class: classnames({
         "tw-text-4": !this.description,
         "tw-text-6 tw-font-medium": this.description,
-      }) }, !this.description && this.status && h("span", null, StringHelper.capitalize(this.status), ": "), this.message)), h("div", { class: "tw-flex tw-items-baseline tw-gap-2" }, this.viewButton && (h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: classnames("tw-appearance-none tw-outline-0 tw-border-none tw-cursor-pointer tw-rounded tw-bg-transparent tw-p-0 tw-px-1 tw-text-4 tw-text-inherit", "hover:tw-bg-color-default-hover", "active:tw-bg-color-default-active", "tw-transition tw-duration-300 tw-ease-in-out", {
+      }) }, this.renderMultiline(this.message))), h("div", { class: "tw-flex tw-items-baseline tw-gap-2" }, this.viewButton && (h("button", { onClick: () => this.bcmToastView.emit(), title: "View details", class: classnames("tw-cursor-pointer tw-rounded tw-bg-transparent tw-p-0 tw-px-1 tw-text-4 tw-text-inherit", "hover:tw-bg-gray-100 hover:tw-text-slate-800", "active:tw-bg-gray-200", "tw-transition tw-duration-300 tw-ease-in-out", {
         "tw-font-medium": this.description,
-      }) }, "View")), this.closeButton && (h("button", { title: "Close", onClick: () => this.hide(), class: classnames("tw-appearance-none tw-outline-0 tw-border-none tw-cursor-pointer", "tw-rounded tw-bg-transparent tw-p-0", "tw-flex tw-h-6 tw-w-6 tw-cursor-pointer tw-items-center tw-justify-center tw-text-3 tw-text-inherit", "hover:tw-bg-color-default-hover", "active:tw-bg-color-default-active") }, h("i", { class: "fal fa-times" }))))), this.description && h("div", { class: "tw-text-size-5 font-medium" }, this.description), h("slot", null)))));
+      }) }, "View")), this.closeButton && (h("button", { title: "Close", onClick: () => this.hide(), class: classnames("tw-rounded tw-bg-transparent tw-p-0", "tw-flex tw-h-6 tw-w-6 tw-cursor-pointer tw-items-center tw-justify-center tw-text-3 tw-text-inherit", "hover:tw-bg-gray-100 hover:tw-text-slate-800", "active:tw-bg-gray-200") }, h("i", { class: "fal fa-times" }))))), this.description && h("div", { class: "tw-text-3 " }, this.renderMultiline(this.description)), h("slot", null)))));
   }
   get el() { return this; }
 }, [4, "bcm-toast", {

package/dist/components/button.js

@@ -148,6 +148,12 @@ const variantOptions = {
     icon: 'far fa-download',
     iconPosition: 'prefix',
   },
+  upload: {
+    text: 'Upload',
+    color: 'blue',
+    icon: 'far fa-cloud-arrow-up',
+    iconPosition: 'prefix',
+  },
 };
 var VariantProps;
 (function (VariantProps) {
@@ -174,6 +180,7 @@ var VariantProps;
   VariantProps["update"] = "update";
   VariantProps["reset"] = "Reset";
   VariantProps["download"] = "download";
+  VariantProps["upload"] = "upload";
 })(VariantProps || (VariantProps = {}));
 
 const { state } = createStore({

package/dist/components/color-palette.js

@@ -37,8 +37,8 @@ const BcmColorPalette = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       this.bcmChange.emit(hex);
     };
     this.value = undefined;
-    this.paletteKeys = ["orange", "yellow", "lime", "green", "teal", "cyan", "sky", "indigo", "violet", "purple", "fuchsia", "pink"];
-    this.shades = [900, 800, 700, 600, 500, 400, 300, 200, 100];
+    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();

package/dist/components/form.js

@@ -88,6 +88,7 @@ const BcmForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         CHECKBOX: 'checkbox',
         RADIO_GROUP: 'radio-group',
         CHECKBOX_GROUP: 'checkbox-group',
+        FILE_UPLOAD: 'file-upload',
         RANGE: 'range',
         // sadece value fırlatıyor
         FORM: 'form',

package/dist/components/generate.js

@@ -5,7 +5,7 @@
 import { Build } from '@stencil/core/internal/client';
 import { c as colors } from './colors2.js';
 
-const version = "3.0.0-alpha.2";
+const version = "3.0.0-alpha.4";
 
 /**
  * 'status' prop predefined values

package/dist/components/index.d.ts

@@ -36,6 +36,7 @@ export { BcmDropdown as BcmDropdown } from '../types/components/molecules/dropdo
 export { BcmEmpty as BcmEmpty } from '../types/components/molecules/empty/empty';
 export { BcmErrorLayout as BcmErrorLayout } from '../types/components/molecules/error-layout/error-layout';
 export { BcmExpansionPanel as BcmExpansionPanel } from '../types/components/molecules/expansion-panel/expansion-panel';
+export { BcmFileUpload as BcmFileUpload } from '../types/components/molecules/upload/file-upload.component';
 export { BcmForm as BcmForm } from '../types/components/organism/form/form';
 export { BcmForm2 as BcmForm2 } from '../types/components/organism/form-2/form-2';
 export { BcmFormGroup as BcmFormGroup } from '../types/components/organism/form/form-group';

package/dist/components/index.js

@@ -44,6 +44,7 @@ export { BcmDropdown, defineCustomElement as defineCustomElementBcmDropdown } fr
 export { BcmEmpty, defineCustomElement as defineCustomElementBcmEmpty } from './bcm-empty.js';
 export { BcmErrorLayout, defineCustomElement as defineCustomElementBcmErrorLayout } from './bcm-error-layout.js';
 export { BcmExpansionPanel, defineCustomElement as defineCustomElementBcmExpansionPanel } from './bcm-expansion-panel.js';
+export { BcmFileUpload, defineCustomElement as defineCustomElementBcmFileUpload } from './bcm-file-upload.js';
 export { BcmForm, defineCustomElement as defineCustomElementBcmForm } from './bcm-form.js';
 export { BcmForm2, defineCustomElement as defineCustomElementBcmForm2 } from './bcm-form-2.js';
 export { BcmFormGroup, defineCustomElement as defineCustomElementBcmFormGroup } from './bcm-form-group.js';

package/dist/components/linked.js

@@ -13,11 +13,95 @@ import { d as delay } from './utils.js';
 import { F as FloatingUI } from './floating-ui.js';
 import { B as Bcm } from './bcm.js';
 
+class LinkedFocusManager {
+  constructor() {
+    this.focusableSelector = [
+      "a[href]",
+      "area[href]",
+      "button:not([disabled])",
+      "input:not([disabled]):not([type='hidden'])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      "iframe",
+      "object",
+      "embed",
+      "[contenteditable='true']",
+      "[tabindex]:not([tabindex='-1'])",
+    ].join(",");
+  }
+  getFocusableElements(linkedElement) {
+    return Array.from(linkedElement.querySelectorAll(this.focusableSelector)).filter(item => {
+      const style = window.getComputedStyle(item);
+      return style.display !== "none" && style.visibility !== "hidden";
+    });
+  }
+  handleKeyboardNavigation(params) {
+    const { event, isOpen, canKeyboardOpen, linkedElement, targetElement, openLinked, hideLinked } = params;
+    const keyCode = event.keyCode || event.which;
+    const isSpaceKey = event.key === " " || event.key === "Spacebar" || keyCode === 32;
+    const isEnterKey = event.key === "Enter" || keyCode === 13;
+    const activeElement = document.activeElement;
+    const isTargetFocused = activeElement === targetElement;
+    const isFocusInsideTarget = !!(activeElement && targetElement.contains(activeElement));
+    const isFocusInsideLinked = !!activeElement && linkedElement.contains(activeElement);
+    const isTriggerFocused = isTargetFocused || isFocusInsideTarget;
+    if (!isOpen && canKeyboardOpen && isTriggerFocused) {
+      if (isSpaceKey || isEnterKey) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        openLinked();
+        return;
+      }
+    }
+    if (!isOpen)
+      return;
+    if (event.key === "Escape") {
+      if (isTriggerFocused || isFocusInsideLinked) {
+        event.preventDefault();
+        hideLinked();
+        targetElement.focus();
+      }
+      return;
+    }
+    if (event.key !== "Tab")
+      return;
+    const focusableElements = this.getFocusableElements(linkedElement);
+    const firstFocusableElement = focusableElements[0];
+    const lastFocusableElement = focusableElements[focusableElements.length - 1];
+    if (!event.shiftKey && isTargetFocused) {
+      event.preventDefault();
+      if (firstFocusableElement) {
+        firstFocusableElement.focus();
+      }
+      else {
+        linkedElement.focus();
+      }
+      return;
+    }
+    if (event.shiftKey && isFocusInsideLinked && firstFocusableElement && activeElement === firstFocusableElement) {
+      event.preventDefault();
+      targetElement.focus();
+      return;
+    }
+    if (!event.shiftKey && isFocusInsideLinked && lastFocusableElement && activeElement === lastFocusableElement) {
+      event.preventDefault();
+      firstFocusableElement.focus();
+      return;
+    }
+    if (focusableElements.length === 0 && isFocusInsideLinked) {
+      event.preventDefault();
+      targetElement.focus();
+    }
+  }
+}
+
 const BcmLinked = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.bcmOpen = createEvent(this, "bcm-open", 7);
+    this.focusManager = new LinkedFocusManager();
     this._id = Generate.UID();
     this.placement = Bcm.Placement["bottom-start"];
     this.trigger = Bcm.TriggerType.click;
@@ -155,6 +239,9 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     return this.isOpen;
   }
+  async updateLayout() {
+    this.calculatePosition();
+  }
   async toggle(wait = true) {
     return this.isOpen ? await this.hide(wait) : await this.show(wait);
   }
@@ -202,9 +289,24 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.isMouseOverLink = false;
     this.show();
   }
+  keyboardNavigation(e) {
+    const target = this.target();
+    if (!target)
+      return;
+    const canKeyboardOpen = this.trigger !== Bcm.TriggerType.hover && this.trigger !== Bcm.TriggerType.custom;
+    this.focusManager.handleKeyboardNavigation({
+      event: e,
+      isOpen: this.isOpen,
+      canKeyboardOpen,
+      linkedElement: this.el,
+      targetElement: target,
+      openLinked: () => this.show(false),
+      hideLinked: () => this.hide(false),
+    });
+  }
   render() {
     const openStyle = this.isOpen ? { visibility: "visible", opacity: "1" } : { visibility: "hidden", opacity: "0" };
-    return (h(Host, { class: "tw-invisible tw-absolute tw-left-0 tw-top-0 tw-z-tooltip  tw-block tw-overscroll-contain  tw-scroll-smooth tw-rounded tw-bg-white  tw-opacity-0 tw-shadow tw-transition-opacity tw-duration-100", style: Object.assign(Object.assign({}, openStyle), { overflow: "auto" }) }, h("slot", null)));
+    return (h(Host, { class: "tw-invisible tw-absolute tw-left-0 tw-top-0 tw-z-tooltip  tw-block tw-overscroll-contain  tw-scroll-smooth tw-rounded tw-bg-white  tw-opacity-0 tw-shadow tw-transition-opacity tw-duration-100", tabindex: "-1", style: Object.assign(Object.assign({}, openStyle), { overflow: "auto" }) }, h("slot", null)));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -225,8 +327,9 @@ const BcmLinked = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "isMouseOverLink": [32],
     "show": [64],
     "hide": [64],
+    "updateLayout": [64],
     "toggle": [64]
-  }, [[4, "linked-data-dismiss", "onLinkedDataDismis"], [4, "bcm-floating-is-hide", "onBcmFloatingIsHide"], [6, "click", "clickListener"]]]);
+  }, [[4, "linked-data-dismiss", "onLinkedDataDismis"], [4, "bcm-floating-is-hide", "onBcmFloatingIsHide"], [6, "click", "clickListener"], [6, "keydown", "keyboardNavigation"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;