bromcom-ui 2.10.1-rc.9 → 2.10.1

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

@@ -0,0 +1,253 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Generate } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
+import { FloatingUI } from "@bcm/utils";
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
+import { attendanceActionDropdownStyle } from "./attendance-actions-dropdown.style";
+export class BcmAttendanceActionsDropdown {
+  constructor() {
+    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: cs(dataItem(), this.selectedKey === item.key && selectedItem()), onClick: () => this.handleSelectItem(item) }, h("span", { class: key() }, item.key, " - "), h("span", null, item.value))))));
+  }
+  static get is() { return "bcm-attendance-actions-dropdown"; }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "size": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "SizeTypes",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Bcm.Size.medium"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "selectedKey": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-key",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "targetId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "target-id",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "isShow": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-show",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "data": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Bcm.InputDropdownData[]",
+          "resolved": "InputDropdownData[]",
+          "references": {
+            "Bcm": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "bcm-attendance-actions-dropdown-change",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleClickOutside",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,34 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const attendanceActionDropdownStyle = tv({
+  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"
+  },
+});

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

@@ -0,0 +1,363 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Generate } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
+import { Host, h } from "@stencil/core";
+import cs from "classnames";
+import { attendanceActionStyle } from "./attendance-actions.style";
+export class BcmAttendanceActions {
+  constructor() {
+    this._id = Generate.UID();
+    this.size = 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.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.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.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: cs(button(), mainButton()),
+      style: Object.assign({}, buttonStyle),
+      disabled,
+      type: "button",
+    };
+    const iconButtonAttributes = Object.assign(Object.assign({}, buttonAttributes), { class: cs(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 (h(Host, { class: host(), onKeyPress: this.handleKeyPress.bind(this) }, h("div", { class: buttonContainer() }, renderButtons === null || renderButtons === void 0 ? void 0 :
+      renderButtons.map(item => {
+        return (h("button", Object.assign({}, buttonAttributes, { onClick: () => this.handleSelectItem(item), title: item.value }), h("i", { class: cs(item.icon || "fa-solid fa-minus", "!tw-leading-[inherit]") }), item.selected && h("span", { class: "tw-truncate" }, item.value)));
+      }), h("button", Object.assign({ id: "attendance-dropdown-button-" + this._id }, iconButtonAttributes, { onClick: () => this.dropdownMenu(), title: "More" }), h("i", { class: cs("fa-solid fa-angle-down !tw-leading-[inherit]") }))), h("div", { id: "comment-area-" + this._id, class: cs(commentIcon(), {
+        "tw-cursor-default": !isShowCommentIcon,
+        "tw-cursor-pointer": isShowCommentIcon,
+      }), onClick: () => isShowCommentIcon && this.commentArea() }, h("i", { title: isShowCommentIcon ? commentTooltip : "", class: cs("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,
+      }) }))));
+  }
+  static get is() { return "bcm-attendance-actions"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["attendance-actions.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["attendance-actions.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "size": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "SizeTypes",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Bcm.Size.medium"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "data": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Bcm.InputDropdownData[]",
+          "resolved": "InputDropdownData[]",
+          "references": {
+            "Bcm": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[\n        { key: \"P\", value: \"Present\", color: \"emerald\", icon: \"fa-solid fa-check\", priority: 0 },\n        { key: \"A\", value: \"Absent\", color: \"red\", icon: \"fa-solid fa-times\", priority: 1 },\n        { key: \"L\", value: \"Late\", color: \"amber\", icon: \"fa-solid fa-clock\", priority: 2 },\n        { key: \"C\", value: \"Other Authorised Circumstance\", color: \"blue\", icon: \"fa-solid fa-question\" },\n        { key: \"E\", value: \"Exlude\", color: \"blue\", icon: \"fa-solid fa-minus\" },\n        { key: \"G\", value: \"Family Holiday\", color: \"blue\", icon: \"fa-solid fa-minus\" },\n        { key: \"H\", value: \"Family Holiday (Agreed)\", color: \"blue\", icon: \"fa-solid fa-minus\" },\n        { key: \"I\", value: \"Illness\", color: \"blue\", icon: \"fa-solid fa-minus\" },\n        { key: \"J\", value: \"Intervier\", color: \"blue\", icon: \"fa-solid fa-minus\" },\n        { key: \"M\", value: \"Medical / Dental\", color: \"blue\", icon: \"fa-solid fa-minus\" },\n        { key: \"N\", value: \"No Reason yet PRovided\", color: \"blue\", icon: \"fa-solid fa-minus\" },\n        { key: \"O\", value: \"Unauthrised Absence\", color: \"blue\", icon: \"fa-solid fa-minus\" },\n        { key: \"U\", value: \"Late after Reg. Closed\", color: \"blue\", icon: \"fa-solid fa-minus\" },\n        { key: \"X\", value: \"Non-comp School Age Absence\", color: \"blue\", icon: \"fa-solid fa-minus\" },\n    ]"
+      },
+      "lateKeys": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "late-keys",
+        "reflect": false,
+        "defaultValue": "\"L\""
+      },
+      "hideComment": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-comment",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "bcm-attendance-change",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "set": {
+        "complexType": {
+          "signature": "(key: string, triggerChange?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "get": {
+        "complexType": {
+          "signature": "() => Promise<Bcm.InputDropdownData>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Bcm": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          },
+          "return": "Promise<InputDropdownData>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}