bromcom-ui 2.11.1-rc.2 → 2.11.1-rc.4

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

@@ -0,0 +1,326 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
+import './color-helper-c4fa9ebc.js';
+import './datetime-helper-df25808a.js';
+import { G as Generate } from './generate-80faf723.js';
+import './number-helper-b1a0b969.js';
+import './string-helper-85990695.js';
+import './validators-cc82d552.js';
+import './element-dragger-7ea06c76.js';
+import { a as Bcm } from './bcm-a50d55ba.js';
+import { c as classnames } from './index-b84bc8c9.js';
+import { c as ce } from './index-3bc8c6e3.js';
+import './colors-1d7854ea.js';
+import './utils-b3338faf.js';
+import './colors-e1c31f79.js';
+import './_commonjsHelpers-be0d4ec8.js';
+import './package-20190b9f.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 = 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) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "bcm-attendance-change", 3);
+    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: classnames(button(), mainButton()),
+      style: Object.assign({}, buttonStyle),
+      disabled,
+      type: "button",
+    };
+    const iconButtonAttributes = Object.assign(Object.assign({}, buttonAttributes), { class: 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 (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: classnames(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: classnames("fa-solid fa-angle-down !tw-leading-[inherit]") }))), h("div", { id: "comment-area-" + this._id, class: classnames(commentIcon(), {
+        "tw-cursor-default": !isShowCommentIcon,
+        "tw-cursor-pointer": isShowCommentIcon,
+      }), onClick: () => isShowCommentIcon && this.commentArea() }, h("i", { title: isShowCommentIcon ? commentTooltip : "", class: 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 getElement(this); }
+};
+BcmAttendanceActions.style = attendanceActionsCss;
+
+export { BcmAttendanceActions as bcm_attendance_actions };

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

@@ -3,8 +3,8 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, h, H as Host, g as getElement } from './index-4614b7f0.js';
-import { G as Generate } from './generate-36ecd760.js';
-import './package-04b74cb7.js';
+import { G as Generate } from './generate-80faf723.js';
+import './package-20190b9f.js';
 import './colors-e1c31f79.js';
 import './_commonjsHelpers-be0d4ec8.js';
 

package/dist/esm/bcm-avatar_2.entry.js

@@ -5,18 +5,18 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-4614b7f0.js';
 import { C as ColorHelper } from './color-helper-c4fa9ebc.js';
 import './datetime-helper-df25808a.js';
-import { G as Generate } from './generate-36ecd760.js';
-import './number-helper-24710d93.js';
+import { G as Generate } from './generate-80faf723.js';
+import './number-helper-b1a0b969.js';
 import './string-helper-85990695.js';
-import './validators-c00416de.js';
+import './validators-cc82d552.js';
 import './element-dragger-7ea06c76.js';
-import { B as Bcm } from './bcm-a50d55ba.js';
+import { a as Bcm } from './bcm-a50d55ba.js';
 import { c as ce } from './index-3bc8c6e3.js';
 import './colors-1d7854ea.js';
 import './utils-b3338faf.js';
 import './colors-e1c31f79.js';
 import './_commonjsHelpers-be0d4ec8.js';
-import './package-04b74cb7.js';
+import './package-20190b9f.js';
 
 const avatarStyle = ce({
   slots: {

package/dist/esm/bcm-breadcrumb.entry.js

@@ -4,9 +4,9 @@
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
 import { c as classnames } from './index-b84bc8c9.js';
-import { G as Generate } from './generate-36ecd760.js';
+import { G as Generate } from './generate-80faf723.js';
 import './_commonjsHelpers-be0d4ec8.js';
-import './package-04b74cb7.js';
+import './package-20190b9f.js';
 import './colors-e1c31f79.js';
 
 const breadcrumbCss = "@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}.bcm-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;color:var(--bcm-color-grey-7)}.bcm-breadcrumb__item{display:flex;align-items:center}.bcm-breadcrumb .seperator{cursor:default;display:inline-flex;align-items:center;justify-content:center;margin-left:8px;margin-right:8px;color:var(--bcm-color-grey-7)}.bcm-breadcrumb bcm-link:hover{color:var(--bcm-color-grey-7)}.bcm-breadcrumb .active{color:var(--bcm-color-grey-8)}.bcm-breadcrumb .active:hover{color:var(--bcm-color-grey-8)}.bcm-breadcrumb .is-link:hover{color:var(--bcm-color-prime-blue-6)}.bcm-breadcrumb .is-link:hover bcm-link,.bcm-breadcrumb .is-link:hover bcm-icon{color:var(--bcm-color-prime-blue-6)}.bcm-breadcrumb__dropdown-item{position:relative;display:inline-flex}.bcm-breadcrumb__dropdown-item summary{display:inline-flex;align-items:center;cursor:pointer}.bcm-breadcrumb__dropdown-item summary>span{display:inline-flex;align-items:center}.bcm-breadcrumb__dropdown-item summary::-webkit-details-marker{display:none}.bcm-breadcrumb__dropdown-item summary:focus{outline:none}.bcm-breadcrumb__dropdown-item summary.open bcm-link,.bcm-breadcrumb__dropdown-item summary.open bcm-icon{color:var(--bcm-color-prime-blue-6)}.bcm-breadcrumb__dropdown-item summary .down-icon{margin-left:4px}.bcm-breadcrumb__dropdown-submenu{position:absolute;min-width:140px;background-color:var(--bcm-color-grey-1);box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);margin-top:4px}.bcm-breadcrumb__dropdown-submenu .dropdown-item{display:flex;padding:4px 8px}.bcm-breadcrumb__dropdown-submenu .dropdown-item bcm-link{width:100%}";

package/dist/esm/bcm-button-group.entry.js

@@ -3,11 +3,11 @@
  * Copyright (c) Bromcom.
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4614b7f0.js';
-import { G as Generate, s as snq } from './generate-36ecd760.js';
-import { a as Bcm } from './bcm-a50d55ba.js';
+import { G as Generate, s as snq } from './generate-80faf723.js';
+import { B as Bcm } from './bcm-a50d55ba.js';
 import { c as classnames } from './index-b84bc8c9.js';
 import { S as StringHelper } from './string-helper-85990695.js';
-import './package-04b74cb7.js';
+import './package-20190b9f.js';
 import './colors-e1c31f79.js';
 import './_commonjsHelpers-be0d4ec8.js';