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

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/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;