bromcom-ui 2.12.3-rc.2 → 2.12.3

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

@@ -0,0 +1,74 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c591ecec.js');
+const generate = require('./generate-b43c3d3b.js');
+require('./package-033055fc.js');
+require('./colors-250d0982.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+
+const accordionCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.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}:host{display:block}";
+
+const BcmAccordion = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._id = generate.Generate.UID();
+    this.multi = false;
+  }
+  componentDidRender() {
+    if (!this.multi)
+      this.checkExpandedCount();
+  }
+  checkExpandedCount() {
+    var _a, _b;
+    const accordion = this.el.querySelectorAll('.bcm-expansion-panel');
+    if (accordion) {
+      const checkExpandedCount = Array.from(accordion)
+        .map((accordion) => accordion.expanded)
+        .filter(Boolean).length;
+      if (checkExpandedCount > 1) {
+        const getLastExpandedId = (_b = (_a = Array.from(accordion).filter((accordion) => accordion.expanded)) === null || _a === void 0 ? void 0 : _a.pop()) === null || _b === void 0 ? void 0 : _b.id;
+        Array.from(accordion).forEach((accordion) => {
+          if (accordion.id !== getLastExpandedId) {
+            accordion.expanded = false;
+          }
+        });
+      }
+    }
+  }
+  open(event) {
+    if (this.multi)
+      return;
+    const id = event.detail;
+    const accordion = this.el.querySelectorAll('.bcm-expansion-panel');
+    if (accordion) {
+      accordion.forEach((accordion) => {
+        if (accordion.id !== id) {
+          accordion.expanded = false;
+        }
+      });
+    }
+  }
+  isLoad(event) {
+    var _a, _b, _c;
+    if (!this.multi) {
+      var parentId = ((_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id) || null;
+      var nodeName = ((_c = event === null || event === void 0 ? void 0 : event.target) === null || _c === void 0 ? void 0 : _c.nodeName) || null;
+      if (nodeName == 'BCM-EXPANSION-PANEL' && this._id == parentId) {
+        this.checkExpandedCount();
+      }
+    }
+  }
+  render() {
+    return (index.h(index.Host, { id: this._id }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+BcmAccordion.style = accordionCss;
+
+exports.bcm_accordion = BcmAccordion;

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

@@ -7,11 +7,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c591ecec.js');
-const generate = require('./generate-beac9c8d.js');
+const generate = require('./generate-b43c3d3b.js');
 const index$2 = require('./index-95ae50d0.js');
 const index = require('./index-d321de96.js');
 const stringHelper = require('./string-helper-9cdfb273.js');
-require('./package-e6628eb2.js');
+require('./package-033055fc.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 require('./bcm-1d1fcf21.js');

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

@@ -9,10 +9,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index$1 = require('./index-c591ecec.js');
 require('./color-helper-dc98a2ca.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-beac9c8d.js');
-require('./number-helper-46c7892f.js');
+const generate = require('./generate-b43c3d3b.js');
+require('./number-helper-a708fa79.js');
 require('./string-helper-9cdfb273.js');
-require('./validators-27568118.js');
+require('./validators-84d8ae28.js');
 require('./element-dragger-a8562f82.js');
 const utils = require('./utils-fc077139.js');
 const floatingUi = require('./floating-ui-5b396838.js');
@@ -21,7 +21,7 @@ const index = require('./index-5279dea2.js');
 require('./colors-56282b00.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-e6628eb2.js');
+require('./package-033055fc.js');
 
 const attendanceActionCommentStyle = index.ce({
   slots: {

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

@@ -9,10 +9,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index$1 = require('./index-c591ecec.js');
 require('./color-helper-dc98a2ca.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-beac9c8d.js');
-require('./number-helper-46c7892f.js');
+const generate = require('./generate-b43c3d3b.js');
+require('./number-helper-a708fa79.js');
 require('./string-helper-9cdfb273.js');
-require('./validators-27568118.js');
+require('./validators-84d8ae28.js');
 require('./element-dragger-a8562f82.js');
 const floatingUi = require('./floating-ui-5b396838.js');
 const bcm = require('./bcm-1d1fcf21.js');
@@ -22,7 +22,7 @@ require('./colors-56282b00.js');
 require('./utils-fc077139.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-e6628eb2.js');
+require('./package-033055fc.js');
 
 const attendanceActionDropdownStyle = index.ce({
   slots: {

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

@@ -0,0 +1,330 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-c591ecec.js');
+require('./color-helper-dc98a2ca.js');
+require('./datetime-helper-eaf4fadb.js');
+const generate = require('./generate-b43c3d3b.js');
+require('./number-helper-a708fa79.js');
+require('./string-helper-9cdfb273.js');
+require('./validators-84d8ae28.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');
+require('./colors-56282b00.js');
+require('./utils-fc077139.js');
+require('./colors-250d0982.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+require('./package-033055fc.js');
+
+// --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;
+
+exports.bcm_attendance_actions = BcmAttendanceActions;

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

@@ -0,0 +1,35 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c591ecec.js');
+const generate = require('./generate-b43c3d3b.js');
+require('./package-033055fc.js');
+require('./colors-250d0982.js');
+require('./_commonjsHelpers-ed84c3ca.js');
+
+const attendanceCss = "@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-attendance{width:fit-content;display:inline-flex;align-items:center;flex-direction:row;gap:4px}.bcm-attendance__item{display:flex;flex-direction:row;align-items:center;gap:1px}.bcm-attendance__item-am,.bcm-attendance__item-pm{display:block;width:calc( calc( 12px + 1px ) / 2 );height:calc( 12px + 1px );background-color:var(--bcm-new-ds-color-blue-500)}.bcm-attendance__item-am:hover,.bcm-attendance__item-pm:hover{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-attendance__item-am{border-top-left-radius:100px;border-bottom-left-radius:100px}.bcm-attendance__item-pm{border-top-right-radius:100px;border-bottom-right-radius:100px}.bcm-attendance__item-status-present{background-color:var(--bcm-new-ds-color-emerald-500)}.bcm-attendance__item-status-present:hover{background-color:var(--bcm-new-ds-color-emerald-600)}.bcm-attendance__item-status-late{background-color:var(--bcm-new-ds-color-amber-500)}.bcm-attendance__item-status-late:hover{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-attendance__item-status-absent{background-color:var(--bcm-new-ds-color-red-500)}.bcm-attendance__item-status-absent:hover{background-color:var(--bcm-new-ds-color-red-600)}.bcm-attendance__item-status-default{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-attendance__item-status-default:hover{background-color:var(--bcm-new-ds-color-slate-400)}";
+
+const BcmAttendance = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._id = generate.Generate.UID();
+    this.data = [];
+  }
+  render() {
+    const { data } = this;
+    const classPrefix = 'bcm-attendance';
+    return (index.h(index.Host, { class: classPrefix }, index.h("span", { hidden: true }, index.h("slot", null)), data.map(item => {
+      var _a, _b;
+      return index.h("div", { class: `${classPrefix}__item` }, index.h("bcm-tooltip", { trigger: "hover", message: `${item.weekday || null} / AM`, "aria-label": `${item.weekday || null} / AM` }, index.h("span", { class: `${classPrefix}__item-am ${classPrefix}__item-status-${(_a = item.am) !== null && _a !== void 0 ? _a : 'default'}` })), index.h("bcm-tooltip", { trigger: "hover", message: `${item.weekday || null} / PM`, "aria-label": `${item.weekday || null} / PM` }, index.h("span", { class: `${classPrefix}__item-pm ${classPrefix}__item-status-${(_b = item.pm) !== null && _b !== void 0 ? _b : 'default'}` })));
+    })));
+  }
+  get el() { return index.getElement(this); }
+};
+BcmAttendance.style = attendanceCss;
+
+exports.bcm_attendance = BcmAttendance;