bromcom-ui 2.10.1-rc.9 → 2.11.0

package/dist/collection/components/other/attendance-actions/attendance-actions.style.js

@@ -0,0 +1,143 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+// --bcm-attendance-actions-button-bg: #F1F5F9; /* slate-100 */
+// --bcm-attendance-actions-button-text: #334155; /* slate-700 */
+// --bcm-attendance-actions-button-border: #CBD5E1; /* slate-300 */
+// --bcm-attendance-actions-button-hover-bg: #E2E8F0; /* slate-200 */
+// --bcm-attendance-actions-button-active-bg: #CBD5E1; /* slate-300 */
+// --bcm-attendance-actions-button-disabled-bg: #CBD5E1; /* slate-300 */
+// --bcm-attendance-actions-button-disabled-text: #64748B; /* slate-500 */
+export const attendanceActionStyle = tv({
+  slots: {
+    host: ["tw-flex tw-flex-row tw-items-center tw-justify-center tw-w-full tw-max-w-48 tw-gap-2", "bcm-ui-element bcm-attendance-actions"],
+    base: "",
+    buttonContainer: "tw-flex tw-flex-row tw-items-center tw-justify-center tw-w-full tw-max-w-[168px]",
+    button: [
+      "",
+      "tw-button-reset",
+      "tw-flex-1 last:tw-flex-none",
+      "tw-bg-[--bcm-attendance-actions-button-bg]",
+      "tw-text-[--bcm-attendance-actions-button-text]",
+      "tw-border tw-border-solid tw-border-[--bcm-attendance-actions-button-border]",
+      "hover:tw-bg-[--bcm-attendance-actions-button-hover-bg]",
+      "active:tw-bg-[--bcm-attendance-actions-button-active-bg]",
+      "focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-z-10",
+      "tw-flex tw-flex-row tw-items-center tw-justify-center",
+      "first:tw-rounded-l last:tw-rounded-r",
+      "tw-font-medium",
+      "-tw-ml-[1px] first:tw-ml-0",
+    ],
+    dropdownButton: "",
+    mainButton: "",
+    commentIcon: "",
+  },
+  variants: {
+    selected: {
+      true: {
+        button: [
+          "tw-text-white tw-border-transparent last:tw-ml-[1px]",
+          "first:tw-justify-start",
+        ],
+        mainButton: [
+          "tw-min-w-[calc(theme(spacing.12)-1px)]"
+        ],
+      },
+      false: {
+        button: [
+          ""
+        ],
+      },
+    },
+    size: {
+      small: {
+        button: [
+          "tw-text-2",
+          "tw-min-h-6",
+          "tw-gap-2",
+        ],
+        mainButton: [
+          "tw-px-3",
+        ],
+        dropdownButton: [
+          "tw-px-2.5"
+        ],
+      },
+      medium: {
+        button: [
+          "tw-text-3",
+          "tw-min-h-8",
+          "tw-gap-2",
+        ],
+        mainButton: [
+          "tw-px-3",
+        ],
+        dropdownButton: [
+          "tw-px-2.5"
+        ],
+      },
+      large: {
+        button: [
+          "tw-text-4",
+          "tw-min-h-10",
+          "tw-gap-2.5",
+        ],
+        mainButton: [
+          "tw-px-3",
+        ],
+        dropdownButton: [
+          "tw-px-3"
+        ],
+      },
+    },
+    disabled: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      disabled: true,
+      class: {
+        buttonContainer: [
+          "tw-cursor-not-allowed tw-pointer-events-none",
+        ],
+        button: [
+          "tw-cursor-not-allowed",
+          "tw-bg-[--bcm-attendance-actions-button-disabled-bg]",
+          "tw-text-[--bcm-attendance-actions-button-disabled-text]",
+          "tw-border-transparent",
+          "hover:tw-bg-[--bcm-attendance-actions-button-disabled-bg]",
+        ],
+        mainButton: [
+          "tw-bg-[--bcm-attendance-actions-button-disabled-bg]",
+          "tw-text-[--bcm-attendance-actions-button-disabled-text]",
+          "tw-border-transparent",
+          "hover:tw-bg-[--bcm-attendance-actions-button-disabled-bg]",
+          "tw-cursor-not-allowed",
+        ],
+        host: [
+          "tw-cursor-not-allowed",
+        ],
+        commentIcon: [
+          "tw-cursor-not-allowed tw-pointer-events-none",
+        ],
+      }
+    },
+    {
+      disabled: false,
+      class: {
+        button: [
+          "tw-cursor-pointer",
+        ],
+      }
+    }
+  ],
+  defaultVariants: {
+    selected: false,
+    size: "medium",
+    disabled: false,
+  },
+});

package/dist/collection/components/other_deprecated/old-input/old-input.css

@@ -518,4 +518,51 @@ input[type=number] {
 
 .input-small {
   height: 24px;
+}
+
+.bcm-label {
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin-bottom: 4px;
+  font-weight: 500;
+  color: #475569;
+}
+.bcm-label.tw-text-1 {
+  font-size: 10px;
+  line-height: 18px;
+}
+.bcm-label.tw-text-2 {
+  font-size: 12px;
+  line-height: 20px;
+}
+.bcm-label.tw-text-3 {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.bcm-caption-area {
+  color: #dc2626;
+  font-weight: 400;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-direction: row;
+  min-height: 20px;
+  display: flex;
+  margin-top: 4px;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.bcm-caption-area.tw-text-1 {
+  font-size: 10px;
+  line-height: 18px;
+}
+.bcm-caption-area.tw-text-2 {
+  font-size: 12px;
+  line-height: 20px;
+}
+.bcm-caption-area.tw-text-3 {
+  font-size: 14px;
+  line-height: 22px;
 }

package/dist/collection/helper/generate.js

@@ -29,6 +29,7 @@ if (isAllowedDomain()) {
   if (!overlayContainer) {
     overlayContainer = document.createElement("div");
     overlayContainer.id = "bcm-overlay-container";
+    overlayContainer.classList.add("bcm-overlay-container");
     body.appendChild(overlayContainer);
   }
 })();
@@ -124,24 +125,15 @@ Generate.domParser = (html) => {
   const doc = parser.parseFromString(html, "text/html");
   return doc.body.innerText;
 };
-Generate.createComponent = (el, props, area = "append-area") => {
-  let container = area ? document.querySelector(area) : document.body;
-  if (area && !container) {
-    container = document.createElement("div");
-    container.id = "append-area";
-    document.body.appendChild(container);
-    container.style.visibility = "hidden";
-    container.style.opacity = "0";
-  }
+Generate.createComponent = (el, props) => {
   let element = document.getElementById(props.id);
   if (!element) {
     element = document.createElement(el);
   }
-  // debugger;
   Object.keys(props).forEach(key => {
     element[key] = props[key];
   });
-  container.appendChild(element);
+  document.getElementById("bcm-overlay-container").appendChild(element);
   return element;
 };
 Generate.createElement = (tag = "div", props) => {

package/dist/components/avatar.js

@@ -9,7 +9,7 @@ import { G as Generate } from './generate.js';
 import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { c as ce } from './index5.js';
 import { d as defineCustomElement$2 } from './badge.js';
 import { d as defineCustomElement$1 } from './icon.js';

package/dist/components/badge.js

@@ -9,7 +9,7 @@ import { G as Generate } from './generate.js';
 import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { c as ce } from './index5.js';
 
 const badgeStyle = ce({

package/dist/components/bcm-attendance-actions-comment.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmAttendanceActionsComment extends Components.BcmAttendanceActionsComment, HTMLElement {}
+export const BcmAttendanceActionsComment: {
+  prototype: BcmAttendanceActionsComment;
+  new (): BcmAttendanceActionsComment;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/bcm-attendance-actions-comment.js

@@ -0,0 +1,213 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './color-helper.js';
+import './validators.js';
+import { G as Generate } from './generate.js';
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
+import { d as delay } from './utils.js';
+import { F as FloatingUI } from './floating-ui.js';
+import { B as Bcm } from './bcm.js';
+import { c as ce } from './index5.js';
+import { d as defineCustomElement$a } from './button.js';
+import { d as defineCustomElement$9 } from './colorful.js';
+import { d as defineCustomElement$8 } from './form.js';
+import { d as defineCustomElement$7 } from './icon.js';
+import { d as defineCustomElement$6 } from './input.js';
+import { d as defineCustomElement$5 } from './label.js';
+import { d as defineCustomElement$4 } from './linked.js';
+import { d as defineCustomElement$3 } from './textarea.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const attendanceActionCommentStyle = ce({
+  slots: {
+    host: [
+      // "tw-flex tw-h-fit tw-w-full tw-min-w-[288px] tw-flex-col tw-items-start tw-rounded tw-p-4 tw-shadow-2",
+      "tw-w-fit",
+      "tw-absolute tw-left-0 tw-right-0 tw-z-tooltip tw-opacity-100 tw-transition-opacity tw-duration-300",
+      "tw-rounded tw-bg-white tw-shadow",
+      "bcm-ui-element bcm-attendance-actions tw-flex tw-flex-col tw-items-start tw-justify-start tw-p-4 tw-font-medium tw-text-slate-700",
+    ],
+    footer: ["tw-flex tw-w-full tw-flex-row tw-items-center tw-justify-end tw-gap-2 "],
+  },
+  variants: {
+    size: {
+      small: {},
+      medium: {},
+      large: {},
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+const BcmAttendanceActionsComment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.change = createEvent(this, "bcm-attendance-actions-comment-change", 3);
+    this.lateMinutes = null;
+    this.comment = null;
+    this._id = Generate.UID();
+    this.size = Bcm.Size.medium;
+    this.disabled = false;
+    this.selectedKey = null;
+    this.targetId = null;
+    this.isShow = false;
+    this.isLate = false;
+    this.selectedItem = null;
+  }
+  handleSave(lateMinutes, comment) {
+    this.change.emit({ lateMinutes, comment });
+    this.hide();
+  }
+  async show() {
+    const targetElement = document.getElementById(this.targetId);
+    FloatingUI({
+      ref: targetElement,
+      floating: this.el,
+      placement: "bottom-end",
+      offset: 8,
+      arrow: true,
+      arrowColor: "tw-bg-white",
+    });
+    this.isShow = true;
+    await delay(100);
+    if (this.isLate) {
+      this.focusInput();
+    }
+    else {
+      this.focusTextarea();
+    }
+  }
+  focusInput() {
+    const input = this.el.querySelector("bcm-input");
+    input === null || input === void 0 ? void 0 : input.onBcmSelect();
+  }
+  focusTextarea() {
+    const textarea = this.el.querySelector("bcm-textarea");
+    textarea === null || textarea === void 0 ? void 0 : textarea.onBcmSelect();
+  }
+  async hide() {
+    if (this.isShow) {
+      this.el.remove();
+    }
+  }
+  handleClickOutside(event) {
+    if (!Generate.findEventPath(event, this.el)) {
+      this.hide();
+    }
+  }
+  async formSubmit() {
+    var _a, _b, _c;
+    const { lateMinutes, comment, isLate } = this;
+    if (isLate) {
+      if (lateMinutes) {
+        if (!(lateMinutes >= 0 && lateMinutes <= 200)) {
+          return;
+        }
+      }
+    }
+    const { isValid } = await ((_a = this.el.querySelector("bcm-form")) === null || _a === void 0 ? void 0 : _a.submit());
+    if (!isValid)
+      return;
+    this.handleSave(lateMinutes || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.lateMin), comment || ((_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.comment));
+  }
+  render() {
+    var _a, _b;
+    const { size } = this;
+    const { host, footer } = attendanceActionCommentStyle({
+      size,
+    });
+    return (h(Host, { class: host(), onKeyDown: e => {
+        if (e.key === "Escape")
+          this.hide();
+      } }, h("bcm-form", { validation: true, style: { width: "256px" } }, this.isLate ? (h("bcm-input", { label: "Minus Late", required: true, name: "lateMin", id: this._id + "-input-dropdown-late-content-input", type: "number", size: this.size, autocomplete: false, "no-margin": true, min: 0, max: 200, value: (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.lateMin, placeholder: "Enter Minus Late", "onBcm-change": ({ detail }) => (this.lateMinutes = detail), onKeyDown: e => {
+        if (e.key === "Enter")
+          this.formSubmit();
+      } }, h("i", { slot: "prefix", class: "far fa-clock" }))) : null, h("bcm-textarea", { name: "comment", value: (_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.comment, size: this.size, "onBcm-change": ({ detail }) => (this.comment = detail), label: "Description", "no-caption": true, rows: 4, onKeyDown: e => {
+        if (e.key === "Enter")
+          this.formSubmit();
+      } }), h("footer", { class: footer() }, h("bcm-button", { class: "tw-order-2", icon: "fas fa-save", "icon-position": "prefix", size: this.size, onClick: () => this.formSubmit() }, "Save"), h("bcm-button", { class: "tw-order-1", icon: "fas fa-times", kind: "ghost", size: this.size, "icon-position": "prefix", onClick: () => this.hide() }, "Close")))));
+  }
+  get el() { return this; }
+}, [0, "bcm-attendance-actions-comment", {
+    "_id": [1537, "id"],
+    "size": [1025],
+    "disabled": [4],
+    "selectedKey": [1025, "selected-key"],
+    "targetId": [1, "target-id"],
+    "isShow": [1028, "is-show"],
+    "isLate": [4, "is-late"],
+    "selectedItem": [1040],
+    "show": [64],
+    "hide": [64]
+  }, [[8, "click", "handleClickOutside"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-attendance-actions-comment", "bcm-button", "bcm-colorful", "bcm-form", "bcm-icon", "bcm-input", "bcm-label", "bcm-linked", "bcm-textarea", "bcm-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-attendance-actions-comment":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmAttendanceActionsComment$1);
+      }
+      break;
+    case "bcm-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "bcm-colorful":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "bcm-form":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "bcm-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "bcm-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "bcm-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "bcm-linked":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "bcm-textarea":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "bcm-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const BcmAttendanceActionsComment = BcmAttendanceActionsComment$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmAttendanceActionsComment, defineCustomElement };

package/dist/components/bcm-attendance-actions-dropdown.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmAttendanceActionsDropdown extends Components.BcmAttendanceActionsDropdown, HTMLElement {}
+export const BcmAttendanceActionsDropdown: {
+  prototype: BcmAttendanceActionsDropdown;
+  new (): BcmAttendanceActionsDropdown;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/bcm-attendance-actions-dropdown.js

@@ -0,0 +1,118 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './color-helper.js';
+import './validators.js';
+import { G as Generate } from './generate.js';
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
+import { F as FloatingUI } from './floating-ui.js';
+import { B as Bcm } from './bcm.js';
+import { c as classnames } from './index2.js';
+import { c as ce } from './index5.js';
+
+const attendanceActionDropdownStyle = ce({
+  slots: {
+    host: [
+      "tw-w-fit",
+      "tw-absolute tw-left-0 tw-right-0 tw-z-tooltip tw-opacity-100 tw-transition-opacity tw-duration-300",
+      "tw-overscroll-contain  tw-scroll-smooth tw-rounded tw-bg-white tw-shadow tw-max-h-64 tw-overflow-y-auto",
+      "bcm-ui-element bcm-attendance-actions tw-flex tw-flex-col tw-items-start tw-justify-start tw-p-2 tw-font-medium tw-text-slate-700"
+    ],
+    dataItem: ["tw-flex tw-w-full tw-cursor-pointer tw-flex-row tw-items-start tw-justify-start tw-gap-2 tw-rounded  hover:tw-bg-blue-100"],
+    key: ["tw-font-mono tw-text-slate-600"],
+    selectedItem: ["tw-bg-blue-100"],
+  },
+  variants: {
+    size: {
+      small: {
+        dataItem: ["tw-text-2.5 tw-px-2.5 tw-py-2"],
+      },
+      medium: {
+        dataItem: ["tw-text-3 tw-px-3 tw-py-2"],
+      },
+      large: {
+        dataItem: ["tw-text-4 tw-px-4 tw-py-2"],
+      },
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  },
+});
+
+const BcmAttendanceActionsDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.change = createEvent(this, "bcm-attendance-actions-dropdown-change", 3);
+    this._id = Generate.UID();
+    this.size = Bcm.Size.medium;
+    this.disabled = false;
+    this.selectedKey = null;
+    this.targetId = null;
+    this.isShow = false;
+    this.data = [];
+  }
+  handleSelectItem(item) {
+    this.selectedKey = item.key;
+    this.change.emit(item);
+  }
+  async show() {
+    const targetElement = document.getElementById(this.targetId);
+    FloatingUI({
+      ref: targetElement,
+      floating: this.el,
+      placement: "bottom-end",
+      offset: 4,
+    });
+    this.isShow = true;
+  }
+  async hide() {
+    if (this.isShow) {
+      this.el.remove();
+    }
+  }
+  handleClickOutside() {
+    this.hide();
+  }
+  render() {
+    const { size } = this;
+    const { host, dataItem, selectedItem, key } = attendanceActionDropdownStyle({
+      size,
+    });
+    return (h(Host, { class: host() }, this.data.map((item) => (h("div", { class: classnames(dataItem(), this.selectedKey === item.key && selectedItem()), onClick: () => this.handleSelectItem(item) }, h("span", { class: key() }, item.key, " - "), h("span", null, item.value))))));
+  }
+  get el() { return this; }
+}, [0, "bcm-attendance-actions-dropdown", {
+    "_id": [1537, "id"],
+    "size": [1025],
+    "disabled": [4],
+    "selectedKey": [1025, "selected-key"],
+    "targetId": [1, "target-id"],
+    "isShow": [1028, "is-show"],
+    "data": [1040],
+    "show": [64],
+    "hide": [64]
+  }, [[8, "click", "handleClickOutside"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-attendance-actions-dropdown"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-attendance-actions-dropdown":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmAttendanceActionsDropdown$1);
+      }
+      break;
+  } });
+}
+
+const BcmAttendanceActionsDropdown = BcmAttendanceActionsDropdown$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmAttendanceActionsDropdown, defineCustomElement };

package/dist/components/bcm-attendance-actions.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmAttendanceActions extends Components.BcmAttendanceActions, HTMLElement {}
+export const BcmAttendanceActions: {
+  prototype: BcmAttendanceActions;
+  new (): BcmAttendanceActions;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;