bromcom-ui 2.11.1-rc.3 → 2.11.1-rc.5

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-c3a819ea.js');
+require('./datetime-helper-eaf4fadb.js');
+const generate = require('./generate-96559082.js');
+require('./number-helper-152e8340.js');
+require('./string-helper-f9184277.js');
+require('./validators-d6a13946.js');
+require('./element-dragger-a8562f82.js');
+const bcm = require('./bcm-489c9b1a.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-3357f14d.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$1.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

@@ -7,8 +7,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
-const generate = require('./generate-794c57b1.js');
-require('./package-38271f86.js');
+const generate = require('./generate-96559082.js');
+require('./package-3357f14d.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 

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

@@ -9,18 +9,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index$1 = require('./index-c591ecec.js');
 const colorHelper = require('./color-helper-c3a819ea.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-794c57b1.js');
-require('./number-helper-9d81ab60.js');
-require('./string-helper-9cdfb273.js');
-require('./validators-b8329cff.js');
+const generate = require('./generate-96559082.js');
+require('./number-helper-152e8340.js');
+require('./string-helper-f9184277.js');
+require('./validators-d6a13946.js');
 require('./element-dragger-a8562f82.js');
-const bcm = require('./bcm-1d1fcf21.js');
+const bcm = require('./bcm-489c9b1a.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-38271f86.js');
+require('./package-3357f14d.js');
 
 const avatarStyle = index.ce({
   slots: {
@@ -67,8 +67,8 @@ const BcmAvatar = class {
     this.image = undefined;
     this.name = undefined;
     this.alt = undefined;
-    this.shape = bcm.Bcm.Shape.ellipse;
-    this.size = bcm.Bcm.Size.medium;
+    this.shape = bcm.Bcm$1.Shape.ellipse;
+    this.size = bcm.Bcm$1.Size.medium;
     this.color = undefined;
     this.icon = "fas fa-user";
     this.status = undefined;
@@ -94,7 +94,7 @@ const BcmAvatar = class {
       },
       variable: "--bcm-avatar",
     });
-    const customSize = !Object.keys(bcm.Bcm.BaseSize).includes(size)
+    const customSize = !Object.keys(bcm.Bcm$1.BaseSize).includes(size)
       ? {
         width: `${size}px`,
         height: `${size}px`,
@@ -185,7 +185,7 @@ const BcmBadge = class {
     this.blink = false;
     this.value = undefined;
     this.color = undefined;
-    this.size = bcm.Bcm.Size.medium;
+    this.size = bcm.Bcm$1.Size.medium;
     this.status = undefined;
   }
   render() {

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

@@ -8,9 +8,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
-const generate = require('./generate-794c57b1.js');
+const generate = require('./generate-96559082.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-38271f86.js');
+require('./package-3357f14d.js');
 require('./colors-078851ec.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/cjs/bcm-button-group.cjs.entry.js

@@ -7,11 +7,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
-const generate = require('./generate-794c57b1.js');
-const bcm = require('./bcm-1d1fcf21.js');
+const generate = require('./generate-96559082.js');
+const bcm = require('./bcm-489c9b1a.js');
 const index$1 = require('./index-95ae50d0.js');
-const stringHelper = require('./string-helper-9cdfb273.js');
-require('./package-38271f86.js');
+const stringHelper = require('./string-helper-f9184277.js');
+require('./package-3357f14d.js');
 require('./colors-078851ec.js');
 require('./_commonjsHelpers-ed84c3ca.js');
 
@@ -22,11 +22,11 @@ const BcmButtonGroup = class {
     index.registerInstance(this, hostRef);
     this.bcmChange = index.createEvent(this, "bcm-change", 7);
     this._id = generate.Generate.UID();
-    this.size = bcm.Bcm$1.Size.medium;
+    this.size = bcm.Bcm.Size.medium;
     this.type = 'button';
     this.color = undefined;
     this.disabled = undefined;
-    this.direction = bcm.Bcm$1.Direction.horizontal;
+    this.direction = bcm.Bcm.Direction.horizontal;
   }
   componentWillLoad() {
     const { size, color } = this;
@@ -81,7 +81,7 @@ const BcmButtonGroup = class {
   }
   render() {
     const hostClasses = index$1.classnames('bcm-button-group', {
-      'bcm-button-group__vertical': this.direction === bcm.Bcm$1.Direction.vertical,
+      'bcm-button-group__vertical': this.direction === bcm.Bcm.Direction.vertical,
     });
     return (index.h(index.Host, { class: hostClasses }, index.h("slot", null)));
   }