bromcom-ui 2.11.0 → 2.11.1-rc.1

package/dist/cjs/{bcm-3c58a6d5.js → bcm-1d1fcf21.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-exports.Bcm$1 = void 0;
+exports.Bcm = void 0;
 (function (Bcm) {
   (function (HtmlElementType) {
     HtmlElementType["div"] = "div";
@@ -381,34 +381,34 @@ exports.Bcm$1 = void 0;
     KeyCode[KeyCode["a"] = 65] = "a";
   })(Bcm.KeyCode || (Bcm.KeyCode = {}));
   Bcm.FormErrorMessages = {
-    "email": "Please enter a valid email address.",
-    "password": "Please enter a valid password.",
-    "url": "Please enter a valid URL.",
-    "phone": "Please enter a valid phone number.",
-    "search": "Please enter a valid search term.",
-    "number": "Please enter a valid number.",
-    "text": "Please enter a valid text.",
-    "required": "This field is required.",
-    "minlength": "Must be at least {0} chars long.",
-    "maxlength": "Must be at most {0} chars long.",
-    "betweenlength": "Must be between {0} and {1} chars long.",
-    "min": "This field must be at least {0}.",
-    "max": "This field must be at most {0}.",
-    "between": "This field must be between {0} and {1}.",
-    "pattern": "Please use a valid format.",
-    "date": "Please enter a valid date.",
-    "time": "Please enter a valid time.",
-    "datetime": "Please enter a valid date and time.",
-    "datetime-local": "Please enter a valid date and time.",
-    "month": "Please enter a valid month.",
-    "week": "Please enter a valid week.",
-    "color": "Please enter a valid color.",
-    "file": "Please enter a valid file.",
-    "range": "Please enter a valid range.",
-    "radio": "Please select a valid option.",
-    "checkbox": "Please select a valid option.",
-    "select": "Please select a valid option.",
-    "multiple": "Please select a valid option.",
+    "email": "Please enter a valid email address",
+    "password": "Please enter a valid password",
+    "url": "Please enter a valid URL",
+    "phone": "Please enter a valid phone number",
+    "search": "Please enter a valid search term",
+    "number": "Please enter a valid number",
+    "text": "Please enter a valid text",
+    "required": "This field is required",
+    "minlength": "Must be at least {0} chars long",
+    "maxlength": "Must be at most {0} chars long",
+    "betweenlength": "Must be between {0} and {1} chars long",
+    "min": "This field must be at least {0}",
+    "max": "This field must be at most {0}",
+    "between": "This field must be between {0} and {1}",
+    "pattern": "Please use a valid format",
+    "date": "Please enter a valid date",
+    "time": "Please enter a valid time",
+    "datetime": "Please enter a valid date and time",
+    "datetime-local": "Please enter a valid date and time",
+    "month": "Please enter a valid month",
+    "week": "Please enter a valid week",
+    "color": "Please enter a valid color",
+    "file": "Please enter a valid file",
+    "range": "Please enter a valid range",
+    "radio": "Please select a valid option",
+    "checkbox": "Please select a valid option",
+    "select": "Please select a valid option",
+    "multiple": "Please select a valid option",
   };
   (function (IndeterminateType) {
     IndeterminateType["uncheck"] = "uncheck";
@@ -446,7 +446,7 @@ exports.Bcm$1 = void 0;
     ListType["select"] = "select";
     ListType["autocomplete"] = "autocomplete";
   })(Bcm.ListType || (Bcm.ListType = {}));
-})(exports.Bcm$1 || (exports.Bcm$1 = {}));
-const Bcm = exports.Bcm$1;
+})(exports.Bcm || (exports.Bcm = {}));
+const Bcm = exports.Bcm;
 
-exports.Bcm = Bcm;
+exports.Bcm$1 = Bcm;

package/dist/cjs/bcm-accordion.cjs.entry.js

@@ -7,8 +7,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
-const generate = require('./generate-183405cb.js');
-require('./package-4c68d5f8.js');
+const generate = require('./generate-1a4751ab.js');
+require('./package-c4cc1dcb.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 

package/dist/cjs/bcm-alert.cjs.entry.js

@@ -7,14 +7,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c591ecec.js');
-const generate = require('./generate-183405cb.js');
+const generate = require('./generate-1a4751ab.js');
 const index$2 = require('./index-95ae50d0.js');
 const index = require('./index-d321de96.js');
-const stringHelper = require('./string-helper-3212f4ea.js');
-require('./package-4c68d5f8.js');
+const stringHelper = require('./string-helper-9cdfb273.js');
+require('./package-c4cc1dcb.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./bcm-3c58a6d5.js');
+require('./bcm-1d1fcf21.js');
 
 const { state } = index.createStore({
   value: new Map(),

package/dist/cjs/bcm-attendance-actions-comment.cjs.entry.js

@@ -9,19 +9,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index$1 = require('./index-c591ecec.js');
 require('./color-helper-c3a819ea.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-183405cb.js');
-require('./number-helper-ca52fadf.js');
-require('./string-helper-3212f4ea.js');
-require('./validators-a31b53a5.js');
+const generate = require('./generate-1a4751ab.js');
+require('./number-helper-c0ba116e.js');
+require('./string-helper-9cdfb273.js');
+require('./validators-73d9a8d7.js');
 require('./element-dragger-a8562f82.js');
 const utils = require('./utils-fc077139.js');
-const floatingUi = require('./floating-ui-555cd3d4.js');
-const bcm = require('./bcm-3c58a6d5.js');
+const floatingUi = require('./floating-ui-5b396838.js');
+const bcm = require('./bcm-1d1fcf21.js');
 const index = require('./index-5279dea2.js');
 require('./colors-56282b00.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-4c68d5f8.js');
+require('./package-c4cc1dcb.js');
 
 const attendanceActionCommentStyle = index.ce({
   slots: {
@@ -53,7 +53,7 @@ const BcmAttendanceActionsComment = class {
     this.lateMinutes = null;
     this.comment = null;
     this._id = generate.Generate.UID();
-    this.size = bcm.Bcm$1.Size.medium;
+    this.size = bcm.Bcm.Size.medium;
     this.disabled = false;
     this.selectedKey = null;
     this.targetId = null;

package/dist/cjs/bcm-attendance-actions-dropdown.cjs.entry.js

@@ -9,20 +9,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index$1 = require('./index-c591ecec.js');
 require('./color-helper-c3a819ea.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-183405cb.js');
-require('./number-helper-ca52fadf.js');
-require('./string-helper-3212f4ea.js');
-require('./validators-a31b53a5.js');
+const generate = require('./generate-1a4751ab.js');
+require('./number-helper-c0ba116e.js');
+require('./string-helper-9cdfb273.js');
+require('./validators-73d9a8d7.js');
 require('./element-dragger-a8562f82.js');
-const floatingUi = require('./floating-ui-555cd3d4.js');
-const bcm = require('./bcm-3c58a6d5.js');
+const floatingUi = require('./floating-ui-5b396838.js');
+const bcm = require('./bcm-1d1fcf21.js');
 const index$2 = require('./index-95ae50d0.js');
 const index = require('./index-5279dea2.js');
 require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-4c68d5f8.js');
+require('./package-c4cc1dcb.js');
 
 const attendanceActionDropdownStyle = index.ce({
   slots: {
@@ -59,7 +59,7 @@ const BcmAttendanceActionsDropdown = class {
     index$1.registerInstance(this, hostRef);
     this.change = index$1.createEvent(this, "bcm-attendance-actions-dropdown-change", 3);
     this._id = generate.Generate.UID();
-    this.size = bcm.Bcm$1.Size.medium;
+    this.size = bcm.Bcm.Size.medium;
     this.disabled = false;
     this.selectedKey = null;
     this.targetId = null;

package/dist/cjs/{bcm-button.cjs.entry.js → bcm-attendance-actions_2.cjs.entry.js}

@@ -6,35 +6,328 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c591ecec.js');
-const generate = require('./generate-183405cb.js');
-const bcm = require('./bcm-3c58a6d5.js');
-const index$2 = require('./index-95ae50d0.js');
-const index$1 = require('./index-d321de96.js');
-const slotTemplate = require('./slot-template-80b019d5.js');
+const index$1 = require('./index-c591ecec.js');
 const colorHelper = require('./color-helper-c3a819ea.js');
-require('./package-4c68d5f8.js');
-require('./colors-078851ec.js');
-require('./_commonjsHelpers-ed84c3ca.js');
-require('./string-helper-3212f4ea.js');
+require('./datetime-helper-eaf4fadb.js');
+const generate = require('./generate-1a4751ab.js');
+require('./number-helper-c0ba116e.js');
+require('./string-helper-9cdfb273.js');
+require('./validators-73d9a8d7.js');
+require('./element-dragger-a8562f82.js');
+const bcm = require('./bcm-1d1fcf21.js');
+const index$2 = require('./index-95ae50d0.js');
+const index = require('./index-5279dea2.js');
+const index$3 = require('./index-d321de96.js');
+const slotTemplate = require('./slot-template-df7b5b59.js');
 require('./colors-56282b00.js');
 require('./utils-fc077139.js');
+require('./colors-078851ec.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-c4cc1dcb.js');
 
-const ButtonTemplate = ({ value, type, componentClass, disabled, href, target, loading, isIconOnly, icon, iconPosition, id }) => {
-  const ButtonTagType = (href) ? bcm.Bcm.HtmlElementType.a : bcm.Bcm.HtmlElementType.button;
-  return (index.h(ButtonTagType, Object.assign({ id: id }, (type == bcm.Bcm.HtmlElementType.button && { type }), { class: componentClass, disabled: disabled, href: href, target: target, tabindex: "0" }),
-    index.h("span", { hidden: true },
-      index.h("slot", null)),
-    loading && index.h("span", { class: "bcm-button__container-loading" },
-      " ",
-      index.h("span", { class: "bcm-button__container-icon" },
-        index.h("i", { class: "far fa-spinner-third fa-spin" }),
-        " ")),
-    icon && index.h("span", { class: `${iconPosition} bcm-button__container-icon` },
-      index.h("i", { class: `${icon}` })),
-    !isIconOnly && (index.h(slotTemplate.SlotTemplate, { className: "bcm-button__container-text", value: value })),
-    index.h("slot", { name: "suffix" })));
+// --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 */
+const attendanceActionStyle = index.ce({
+  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,
+  },
+});
+
+const attendanceActionsCss = "";
+
+const BcmAttendanceActions = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.change = index$1.createEvent(this, "bcm-attendance-change", 3);
+    this._id = generate.Generate.UID();
+    this.size = bcm.Bcm.Size.medium;
+    this.disabled = false;
+    this.data = [
+      { key: "P", value: "Present", color: "emerald", icon: "fa-solid fa-check", priority: 0 },
+      { key: "A", value: "Absent", color: "red", icon: "fa-solid fa-times", priority: 1 },
+      { key: "L", value: "Late", color: "amber", icon: "fa-solid fa-clock", priority: 2 },
+      { key: "C", value: "Other Authorised Circumstance", color: "blue", icon: "fa-solid fa-question" },
+      { key: "E", value: "Exlude", color: "blue", icon: "fa-solid fa-minus" },
+      { key: "G", value: "Family Holiday", color: "blue", icon: "fa-solid fa-minus" },
+      { key: "H", value: "Family Holiday (Agreed)", color: "blue", icon: "fa-solid fa-minus" },
+      { key: "I", value: "Illness", color: "blue", icon: "fa-solid fa-minus" },
+      { key: "J", value: "Intervier", color: "blue", icon: "fa-solid fa-minus" },
+      { key: "M", value: "Medical / Dental", color: "blue", icon: "fa-solid fa-minus" },
+      { key: "N", value: "No Reason yet PRovided", color: "blue", icon: "fa-solid fa-minus" },
+      { key: "O", value: "Unauthrised Absence", color: "blue", icon: "fa-solid fa-minus" },
+      { key: "U", value: "Late after Reg. Closed", color: "blue", icon: "fa-solid fa-minus" },
+      { key: "X", value: "Non-comp School Age Absence", color: "blue", icon: "fa-solid fa-minus" },
+    ];
+    this.lateKeys = "L";
+    this.hideComment = false;
+  }
+  get selectedItem() {
+    return this.data.find(item => item.selected);
+  }
+  get priorityButtons() {
+    return this.data.filter(item => item.priority !== undefined).sort((a, b) => a.priority - b.priority);
+  }
+  get renderButtons() {
+    const { selectedItem, priorityButtons } = this;
+    return [...(selectedItem ? [selectedItem] : priorityButtons.length ? priorityButtons : this.data.slice(0, 3))];
+  }
+  get lateKeysMap() {
+    return this.lateKeys.toLocaleLowerCase().split(",");
+  }
+  get isLate() {
+    var _a, _b;
+    return this.lateKeysMap.includes((_b = (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.key) === null || _b === void 0 ? void 0 : _b.toLocaleLowerCase());
+  }
+  get dropdownMenuElement() {
+    return document.getElementById("attendance-dropdown-" + this._id);
+  }
+  get commentAreaElement() {
+    return document.getElementById("comment-" + this._id);
+  }
+  handleSelectItem(item, triggerChange = true, showComment = true) {
+    var _a, _b;
+    this.data = [...this.data.map(data => { var _a, _b; return (Object.assign(Object.assign({}, data), { selected: ((_a = item.key) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) === ((_b = data.key) === null || _b === void 0 ? void 0 : _b.toLocaleLowerCase()) })); })];
+    (_a = this.dropdownMenuElement) === null || _a === void 0 ? void 0 : _a.hide();
+    (_b = this.commentAreaElement) === null || _b === void 0 ? void 0 : _b.hide();
+    if (!this.isLate)
+      return triggerChange && this.changed();
+    !this.hideComment && showComment && this.commentArea();
+  }
+  changed() {
+    this.change.emit(this.selectedItem);
+  }
+  hasDataForKey(key) {
+    return !!this.data.find(item => item.key.toLocaleLowerCase() === key.toLocaleLowerCase());
+  }
+  handleKeyPress({ key }) {
+    if (!this.hasDataForKey(key))
+      return;
+    const item = this.data.find(item => { var _a; return ((_a = item.key) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) === (key === null || key === void 0 ? void 0 : key.toLocaleLowerCase()); });
+    this.handleSelectItem(item);
+  }
+  handleSave(lateMinutes, comment) {
+    this.data = [...this.data].map(item => {
+      var _a, _b, _c;
+      if (((_a = item.key) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) === ((_c = (_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.key) === null || _c === void 0 ? void 0 : _c.toLocaleLowerCase())) {
+        return Object.assign(Object.assign({}, item), { lateMin: lateMinutes, comment });
+      }
+      return item;
+    });
+    this.changed();
+  }
+  dropdownMenu() {
+    var _a;
+    const dropdownMenu = generate.Generate.createComponent("bcm-attendance-actions-dropdown", {
+      id: "attendance-dropdown-" + this._id,
+      size: this.size,
+      data: this.data,
+      selectedKey: (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.key,
+      targetId: "attendance-dropdown-button-" + this._id,
+    });
+    dropdownMenu.addEventListener("bcm-attendance-actions-dropdown-change", ({ detail }) => {
+      this.handleSelectItem(detail);
+    });
+    dropdownMenu.show();
+  }
+  commentArea() {
+    var _a, _b;
+    const commentArea = generate.Generate.createComponent("bcm-attendance-actions-comment", {
+      id: "comment-" + this._id,
+      size: this.size,
+      isLate: this.isLate,
+      targetId: "comment-area-" + this._id,
+      selectedItem: this.selectedItem,
+      lateMinutes: (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.lateMin,
+      comment: (_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.comment,
+    });
+    commentArea.addEventListener("bcm-attendance-actions-comment-change", ({ detail }) => {
+      this.handleSave(detail.lateMinutes, detail.comment);
+    });
+    commentArea.show();
+  }
+  async set(key, triggerChange = true) {
+    if (!this.hasDataForKey(key))
+      return;
+    const item = this.data.find(item => { var _a; return ((_a = item.key) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) === (key === null || key === void 0 ? void 0 : key.toLocaleLowerCase()); });
+    this.handleSelectItem(item, triggerChange, false);
+  }
+  async get() {
+    return this.selectedItem;
+  }
+  render() {
+    var _a, _b, _c;
+    const { selectedItem, renderButtons, disabled, hideComment, size } = this;
+    const { host, buttonContainer, button, dropdownButton, commentIcon, mainButton } = attendanceActionStyle({
+      selected: !!selectedItem,
+      size,
+      disabled,
+    });
+    const buttonStyle = !!selectedItem
+      ? generate.Generate.getTwColor({
+        color: (_a = selectedItem.color) !== null && _a !== void 0 ? _a : "blue",
+        tones: {
+          600: ["bg"],
+          700: ["hover-bg"],
+          800: ["active-bg"],
+        },
+        variable: "--bcm-attendance-actions-button",
+      })
+      : {};
+    const buttonAttributes = {
+      class: index$2.classnames(button(), mainButton()),
+      style: Object.assign({}, buttonStyle),
+      disabled,
+      type: "button",
+    };
+    const iconButtonAttributes = Object.assign(Object.assign({}, buttonAttributes), { class: index$2.classnames(button(), dropdownButton()) });
+    const isShowCommentIcon = !hideComment && !!selectedItem;
+    const commentTooltip = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.comment) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.lateMin) ? `${(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.comment) || ""}${(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.lateMin) ? ` (${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.lateMin} min) ` : ""}` : "";
+    return (index$1.h(index$1.Host, { class: host(), onKeyPress: this.handleKeyPress.bind(this) }, index$1.h("div", { class: buttonContainer() }, renderButtons === null || renderButtons === void 0 ? void 0 :
+      renderButtons.map(item => {
+        return (index$1.h("button", Object.assign({}, buttonAttributes, { onClick: () => this.handleSelectItem(item), title: item.value }), index$1.h("i", { class: index$2.classnames(item.icon || "fa-solid fa-minus", "!tw-leading-[inherit]") }), item.selected && index$1.h("span", { class: "tw-truncate" }, item.value)));
+      }), index$1.h("button", Object.assign({ id: "attendance-dropdown-button-" + this._id }, iconButtonAttributes, { onClick: () => this.dropdownMenu(), title: "More" }), index$1.h("i", { class: index$2.classnames("fa-solid fa-angle-down !tw-leading-[inherit]") }))), index$1.h("div", { id: "comment-area-" + this._id, class: index$2.classnames(commentIcon(), {
+        "tw-cursor-default": !isShowCommentIcon,
+        "tw-cursor-pointer": isShowCommentIcon,
+      }), onClick: () => isShowCommentIcon && this.commentArea() }, index$1.h("i", { title: isShowCommentIcon ? commentTooltip : "", class: index$2.classnames("fa-solid fa-comment", {
+        "tw-text-gray-400": !(((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.comment) || ((_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.lateMin)),
+        "tw-visible": isShowCommentIcon,
+        "tw-invisible": !isShowCommentIcon,
+      }) }))));
+  }
+  get el() { return index$1.getElement(this); }
 };
+BcmAttendanceActions.style = attendanceActionsCss;
 
 const variantOptions = {
   save: {
@@ -203,7 +496,7 @@ var VariantProps;
   VariantProps["download"] = "download";
 })(VariantProps || (VariantProps = {}));
 
-const { state } = index$1.createStore({
+const { state } = index$3.createStore({
   value: new Map(),
   setData: {},
   removeData: {}
@@ -212,7 +505,7 @@ const setValue = (val) => {
   const data = Object.assign(Object.assign({}, val), (variantOptions[val.variant] && {
     icon: variantOptions[val.variant].icon,
     value: variantOptions[val.variant].text,
-    iconPosition: bcm.Bcm.IconPosition[variantOptions[val.variant].iconPosition],
+    iconPosition: bcm.Bcm$1.IconPosition[variantOptions[val.variant].iconPosition],
     variantColor: variantOptions[val.variant].color
   }));
   state.value.set(data.id, data);
@@ -227,18 +520,34 @@ const buttonState = {
   getValue
 };
 
+const ButtonTemplate = ({ value, type, componentClass, disabled, href, target, loading, isIconOnly, icon, iconPosition, id }) => {
+  const ButtonTagType = (href) ? bcm.Bcm$1.HtmlElementType.a : bcm.Bcm$1.HtmlElementType.button;
+  return (index$1.h(ButtonTagType, Object.assign({ id: id }, (type == bcm.Bcm$1.HtmlElementType.button && { type }), { class: componentClass, disabled: disabled, href: href, target: target, tabindex: "0" }),
+    index$1.h("span", { hidden: true },
+      index$1.h("slot", null)),
+    loading && index$1.h("span", { class: "bcm-button__container-loading" },
+      " ",
+      index$1.h("span", { class: "bcm-button__container-icon" },
+        index$1.h("i", { class: "far fa-spinner-third fa-spin" }),
+        " ")),
+    icon && index$1.h("span", { class: `${iconPosition} bcm-button__container-icon` },
+      index$1.h("i", { class: `${icon}` })),
+    !isIconOnly && (index$1.h(slotTemplate.SlotTemplate, { className: "bcm-button__container-text", value: value })),
+    index$1.h("slot", { name: "suffix" })));
+};
+
 const buttonCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-button{display:inline-flex;width:fit-content;height:fit-content;--bcm-button-solid-color-default:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-default:var(--bcm-new-ds-color-blue-500);--bcm-button-solid-border-default:var(--bcm-new-ds-color-blue-500);--bcm-button-solid-color-hover:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-solid-border-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-solid-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-border-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-color-active:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-border-active:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-color-disabled:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-solid-border-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-default:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-default:var(--bcm-new-ds-color-slate-100);--bcm-button-ghost-border-default:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-color-hover:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-hover:var(--bcm-new-ds-color-slate-200);--bcm-button-ghost-border-hover:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-focus-visible:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-focus-visible:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-border-focus-visible:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-color-active:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-active:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-border-active:var(--bcm-new-ds-color-slate-500);--bcm-button-ghost-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-background-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-button-ghost-border-disabled:var(--bcm-new-ds-color-slate-200);--bcm-button-link-color-default:var(--bcm-new-ds-color-blue-500);--bcm-button-link-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-link-background-color-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-link-background-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-link-background-color-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-link-background-color-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-default:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-border-default:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-hover:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-hover:var(--bcm-new-ds-color-slate-200);--bcm-button-ghost-link-border-hover:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-focus-visible:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-focus-visible:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-link-border-focus-visible:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-active:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-active:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-link-border-active:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-disabled:var(--bcm-new-ds-color-slate-500);--bcm-button-ghost-link-background-color-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-border-disabled:var(--bcm-new-ds-color-transparent)}.bcm-button.full-width{width:100%}.bcm-button.full-width .bcm-button__container{width:100%}.bcm-button:after,.bcm-button:before{content:\"\";clear:both}.bcm-button__container{border:none;color:inherit;background-color:inherit;padding:0;margin:0;font:inherit;cursor:pointer;outline:none;text-decoration:none;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:4px 12px;outline:none;border-radius:4px;transition:background-color 0.1s ease-in-out;position:relative;min-width:40px;border-width:1px;border-style:solid;border-color:initial}.bcm-button__container:hover,.bcm-button__container:focus,.bcm-button__container:active{outline:none;text-decoration:none}.bcm-button__container-loading{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;display:flex;align-items:center;justify-content:center}.bcm-button__container-kind-solid{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-solid:hover{color:var(--bcm-button-solid-color-hover);background-color:var(--bcm-button-solid-background-color-hover);border-color:var(--bcm-button-solid-border-hover)}.bcm-button__container-kind-solid:focus-visible{color:var(--bcm-button-solid-color-focus-visible);background-color:var(--bcm-button-solid-background-color-focus-visible);border-color:var(--bcm-button-solid-border-focus-visible)}.bcm-button__container-kind-solid:active{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid:disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid.checked{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid.disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid .bcm-button__container-loading{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-ghost{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-ghost:not([disabled]) .bcm-icon{color:var(--bcm-new-ds-color-slate-500)}.bcm-button__container-kind-ghost:hover{color:var(--bcm-button-ghost-color-hover);background-color:var(--bcm-button-ghost-background-color-hover);border-color:var(--bcm-button-ghost-border-hover)}.bcm-button__container-kind-ghost:focus-visible{color:var(--bcm-button-ghost-color-focus-visible);background-color:var(--bcm-button-ghost-background-color-focus-visible);border-color:var(--bcm-button-ghost-border-focus-visible)}.bcm-button__container-kind-ghost:active{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost:disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost.checked{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost.disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost .bcm-button__container-loading{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-link{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container-kind-link:hover{color:var(--bcm-button-link-color-hover);background-color:var(--bcm-button-link-background-color-hover);border-color:var(--bcm-button-link-border-hover)}.bcm-button__container-kind-link:focus-visible{color:var(--bcm-button-link-color-focus-visible);background-color:var(--bcm-button-link-background-color-focus-visible);border-color:var(--bcm-button-link-border-focus-visible)}.bcm-button__container-kind-link:active{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link:disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link.checked{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link.disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link .bcm-button__container-loading{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container-kind-ghost-link{color:var(--bcm-button-ghost-link-color-default);background-color:var(--bcm-button-ghost-link-background-color-default);border-color:var(--bcm-button-ghost-link-border-default)}.bcm-button__container-kind-ghost-link:hover{color:var(--bcm-button-ghost-link-color-hover);background-color:var(--bcm-button-ghost-link-background-color-hover);border-color:var(--bcm-button-ghost-link-border-hover)}.bcm-button__container-kind-ghost-link:focus-visible{color:var(--bcm-button-ghost-link-color-focus-visible);background-color:var(--bcm-button-ghost-link-background-color-focus-visible);border-color:var(--bcm-button-ghost-link-border-focus-visible)}.bcm-button__container-kind-ghost-link:active{color:var(--bcm-button-ghost-link-color-active);background-color:var(--bcm-button-ghost-link-background-color-active);border-color:var(--bcm-button-ghost-link-border-active)}.bcm-button__container-kind-ghost-link:disabled{color:var(--bcm-button-ghost-link-color-disabled);background-color:var(--bcm-button-ghost-link-background-color-disabled);border-color:var(--bcm-button-ghost-link-border-disabled)}.bcm-button__container-kind-ghost-link.checked{color:var(--bcm-button-ghost-link-color-active);background-color:var(--bcm-button-ghost-link-background-color-active);border-color:var(--bcm-button-ghost-link-border-active)}.bcm-button__container-kind-ghost-link.disabled{color:var(--bcm-button-ghost-link-color-disabled);background-color:var(--bcm-button-ghost-link-background-color-disabled);border-color:var(--bcm-button-ghost-link-border-disabled)}.bcm-button__container-kind-ghost-link .bcm-button__container-loading{color:var(--bcm-button-ghost-link-color-default);background-color:var(--bcm-button-ghost-link-background-color-default);border-color:var(--bcm-button-ghost-link-border-default)}.bcm-button__container[disabled]{cursor:not-allowed}.bcm-button__container-text{order:3;display:flex;align-items:center;gap:8px;white-space:nowrap}.bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-icon.prefix{order:2}.bcm-button__container-icon.suffix{order:4}.bcm-button__container-size-small{font-size:12px;line-height:calc(12px + 8px);padding:calc(4px - 3px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px - 2px)) * 2)}.bcm-button__container-size-small .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-medium{font-size:calc(12px + 1px);line-height:calc(12px + 8px);padding:calc(4px + 1px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px + 2px)) * 2)}.bcm-button__container-size-medium .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-large{font-size:16px;line-height:calc(16px + 8px);padding:calc(8px - 1px) 12px;min-height:calc(calc(16px + 8px) + (calc(8px) * 2))}.bcm-button__container-size-large .bcm-button__container-icon{min-height:calc(16px + 8px)}";
 
 const BcmButton = class {
   constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.bcmClick = index.createEvent(this, "bcm-click", 7);
+    index$1.registerInstance(this, hostRef);
+    this.bcmClick = index$1.createEvent(this, "bcm-click", 7);
     this._id = generate.Generate.UID();
     this.hidden = false;
-    this.type = bcm.Bcm.ButtonType.button;
-    this.size = bcm.Bcm.Size.medium;
+    this.type = bcm.Bcm$1.ButtonType.button;
+    this.size = bcm.Bcm$1.Size.medium;
     this.disabled = false;
-    this.kind = bcm.Bcm.Kind.solid;
+    this.kind = bcm.Bcm$1.Kind.solid;
     this.outline = false;
     this.icon = undefined;
     this.href = undefined;
@@ -248,7 +557,7 @@ const BcmButton = class {
     this.variant = undefined;
     this.dataDismiss = false;
     this.fullWidth = false;
-    this.iconPosition = bcm.Bcm.IconPosition.prefix;
+    this.iconPosition = bcm.Bcm$1.IconPosition.prefix;
     this.color = undefined;
     this.checked = false;
   }
@@ -363,10 +672,11 @@ const BcmButton = class {
       hidden,
       'full-width': fullWidth,
     });
-    return (index.h(index.Host, { class: hostClasses, style: this.setColor(variantColor), onClick: () => !disabled && this.bcmClick.emit(this.el) }, index.h(ButtonTemplate, { type: type, value: value, componentClass: componentClass, disabled: disabled, href: href, target: target, icon: icon, loading: loading, iconSize: iconSize, isIconOnly: isIconOnly, iconPosition: iconPosition })));
+    return (index$1.h(index$1.Host, { class: hostClasses, style: this.setColor(variantColor), onClick: () => !disabled && this.bcmClick.emit(this.el) }, index$1.h(ButtonTemplate, { type: type, value: value, componentClass: componentClass, disabled: disabled, href: href, target: target, icon: icon, loading: loading, iconSize: iconSize, isIconOnly: isIconOnly, iconPosition: iconPosition })));
   }
-  get el() { return index.getElement(this); }
+  get el() { return index$1.getElement(this); }
 };
 BcmButton.style = buttonCss;
 
+exports.bcm_attendance_actions = BcmAttendanceActions;
 exports.bcm_button = BcmButton;