bromcom-ui 2.12.1-test.1 → 3.0.0-preview.0

package/dist/collection/templates/checkbox-template.js

@@ -3,25 +3,20 @@
  * Copyright (c) Bromcom.
  */
 import { h } from '@stencil/core';
-import cs from 'classnames';
 import Bcm from '../models/bcm';
+import { checkboxStyle } from '../components/molecules/checkbox/checkbox.style';
 export const CheckboxTemplate = ({ disabled, checked, readonly, required, indeterminate, hidden, captionType, _id }) => {
-  // if ( indeterminate ) {
-  //   checked = indeterminate == 'determinate' ? true : false 
-  // }
-  const hostClasses = cs('bcm-checkbox', 'bcm-checkbox__type-default', `bcm-checkbox-size-medium`, {
-    // 'size-2': size === Bcm.Size.small || size === Bcm.Size.medium,
-    // 'size-3': optionType === 'button' && size === Bcm.Size.large,
-    'error': captionType == Bcm.Status.error,
-    hidden,
-    checked,
+  const { inputContainer, labelContainer, input, checkmark } = checkboxStyle({
+    size: "medium",
+    error: captionType === Bcm.Status.error,
     disabled,
-    required,
+    hidden,
     readonly,
+    indeterminate: indeterminate === Bcm.IndeterminateType.indeterminate,
+    checked: checked || indeterminate === Bcm.IndeterminateType.indeterminate,
+    noMargin: true
   });
-  const bcmCheckboxIconClass = cs('bcm-checkbox__label-icon', 'bcm-checkbox__label-icon-lite', 'bcm-checkbox__label-icon-' + indeterminate, {
-    'bcm-checkbox__label-icon-checked': checked,
-  });
-  const bcmCheckboxLabelClass = cs('bcm-checkbox__label');
-  return (h("div", { class: hostClasses }, h("input", { tabindex: "-1", id: _id, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly }), h("label", { class: bcmCheckboxLabelClass, htmlFor: _id }, h("span", { class: bcmCheckboxIconClass }, h("bcm-icon", { icon: "far fa-check" })))));
+  return (h("div", { class: inputContainer() }, h("input", { tabindex: "-1", id: _id, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly, class: input() }), h("label", { class: labelContainer(), htmlFor: _id }, h("span", { class: checkmark() }, indeterminate === Bcm.IndeterminateType.indeterminate
+    ? h("i", { class: "fa-sharp fa-regular fa-minus" })
+    : h("i", { class: "fa-sharp fa-regular fa-check" })))));
 };

package/dist/collection/templates/icon-template.js

@@ -2,23 +2,8 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h } from '@stencil/core';
-import cs from 'classnames';
-export const IconTemplate = ({ icon, hidden }) => {
-  const replaceIcon = (icon) => {
-    if (icon && icon.indexOf('fa-') > -1) {
-      const split = icon.split(" ");
-      let prefix = split[0].replace(/^fa/g, "bcm-fa");
-      let iconName = split[1].replace(/^fa-/g, "bcm-fa-");
-      if (split[2]) {
-        iconName += " " + split[2].replace(/^fa-/g, "bcm-fa-");
-      }
-      return prefix + " " + iconName;
-    }
-    return icon;
-  };
-  const hostClasses = cs('bcm-icon', replaceIcon(icon), {
-    hidden,
-  });
-  return (h("span", { class: hostClasses }));
+import { h } from "@stencil/core";
+import cs from "classnames";
+export const IconTemplate = ({ icon, className }) => {
+  return (h("span", { class: cs("before:tw-clear-both after:tw-clear-both", className) }, h("i", { class: cs("!tw-block tw-text-size-inherit", icon) })));
 };

package/dist/collection/templates/info-footer-template.js

@@ -7,5 +7,5 @@ import { pluralize } from '../utils/utils';
 export const InfoFooterTemplate = ({ selected, total, found, multiple, variableText }) => {
   total = total || 0;
   variableText = variableText ? pluralize(variableText, total) : 'items';
-  return (h("footer", { class: "bcm-info-footer" }, h("bcm-text", { scale: "size-1", color: "grey-8" }, (multiple && selected > 0) && ` ( ${selected} selected ) `, ` Total ${total} `, found != null && ` / ${found} `, ` ${variableText} found. `)));
+  return (h("footer", { class: "bcm-info-footer" }, (multiple && selected > 0) && ` ( ${selected} selected ) `, ` Total ${total} `, found != null && ` / ${found} `, ` ${variableText} found. `));
 };

package/dist/collection/templates/label-template.js

@@ -5,12 +5,13 @@
 import { h } from "@stencil/core";
 import cs from "classnames";
 import Bcm from "../models/bcm";
-export const LabelTemplate = ({ required, value, size, form, htmlFor, type, tooltip }) => {
+export const LabelTemplate = ({ required, value, size, form, htmlFor, type, tooltip, noMargin }) => {
   size = size || "medium";
   type = type || Bcm.Status.default;
-  return (h("label", { form: form, htmlFor: htmlFor, "aria-hidden": "true", class: cs("bcm-ui-element bcm-ui-feedback bcm-label bcm-label__text tw-mb-1 tw-font-medium tw-text-slate-600 ", {
-      "tw-text-1": size == "small",
-      "tw-text-2": size == "medium",
-      "tw-text-3": size == "large",
+  return (h("label", { form: form, htmlFor: htmlFor, "aria-hidden": "true", class: cs("bcm-ui-element bcm-ui-feedback bcm-label bcm-label__text tw-font-medium tw-text-color-label ", {
+      "tw-text-size-3": size == "small",
+      "tw-text-size-4": size == "medium",
+      "tw-text-size-5": size == "large",
+      "tw-mb-1": !noMargin,
     }) }, value, " ", required && "*", tooltip && (h("span", { class: "tw-ml-1" }, h("bcm-tooltip", { message: tooltip, placement: "top", trigger: "hover" }, h("bcm-icon", { icon: "fas fa-info-circle" }))))));
 };

package/dist/collection/templates/list-item-template.js

@@ -38,10 +38,11 @@ export const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size,
     // }
     !unClickable && !disabled && !readonly && (checkboxes ? checkedItem(item.id) : selectedItem(item.id));
   };
-  const collapseClick = () => {
+  const collapseClick = (e) => {
     // if (disabled) {
     //     return;
     // }
+    e.stopPropagation();
     item.open = item.isSearching;
     openGroup(item.id);
   };
@@ -50,6 +51,6 @@ export const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size,
     'bcm-list__item-' + size, {
       'bcm-list__item--group': !treeview && item.type == 'group',
       'bcm-list__item--readonly': readonly,
-    }) }, h("div", { class: cs('bcm-list__item-content', !checkboxes && item.selected && 'selected', { disabled, readonly }) }, treeview && (h("div", { class: "bcm-list__item-content-collapse-icon", onClick: () => collapseClick() }, isHaveChildren && h("bcm-icon", { icon: cs('fas fa-caret-' + (item.isSearching || item.open ? 'down' : 'right')) }))), h("div", { class: cs('bcm-list__item-content-text', { treeview }), onClick: (e) => itemClick(e) }, checkboxes && (treeview || (!treeview && item.type != 'group')) && (h("div", { class: "bcm-list__item-content-text-checkbox" }, h(CheckboxTemplate, { indeterminate: item.indeterminate, checked: item.checked, disabled: item.disabled }))), h("span", Object.assign({ class: "bcm-list__item-content-text-inner" }, (item.title && { "title": item.title }), { innerHTML: domText })))), (treeview || !treeview && item.type == "group") && isHaveChildren && (h("div", { class: "bcm-list__item-childs" }, (item.isSearching || item.open || (!treeview && item.type == "group")) &&
+    }) }, h("div", { class: cs('bcm-list__item-content', !checkboxes && item.selected && 'selected', { disabled, readonly }), onClick: (e) => itemClick(e) }, treeview && (h("div", { class: "bcm-list__item-content-collapse-icon", onClick: (e) => isHaveChildren && collapseClick(e) }, isHaveChildren && h("i", { class: cs('fa-regular fa-angle-' + (item.isSearching || item.open ? 'down' : 'right')) }))), h("div", { class: cs('bcm-list__item-content-text', { treeview }) }, checkboxes && (treeview || (!treeview && item.type != 'group')) && (h("div", { class: "bcm-list__item-content-text-checkbox" }, h(CheckboxTemplate, { indeterminate: item.indeterminate, checked: item.checked, disabled: item.disabled }))), h("span", Object.assign({ class: "bcm-list__item-content-text-inner" }, (item.title && { "title": item.title }), { innerHTML: domText })))), (treeview || !treeview && item.type == "group") && isHaveChildren && (h("div", { class: "bcm-list__item-childs" }, (item.isSearching || item.open || (!treeview && item.type == "group")) &&
     item.items.map((item) => (h(ListItemTemplate, { highlight: highlight, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, size: size, selectedItem: selectedItem, checkedItem: checkedItem, openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) })))))));
 };

package/dist/components/avatar.js

@@ -4,27 +4,26 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import './color-helper.js';
-import './validators.js';
+import './popover.style.js';
 import { G as Generate } from './generate.js';
 import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
-import { B as Bcm } from './bcm.js';
-import { c as ce } from './index5.js';
-import { d as defineCustomElement$2 } from './badge.js';
-import { d as defineCustomElement$1 } from './icon.js';
+import { a as Bcm } from './bcm.js';
+import { c as ce } from './index4.js';
+import { d as defineCustomElement$1 } from './badge.js';
 
 const avatarStyle = ce({
   slots: {
-    base: "bcm-avatar bcm-ui-element bcm-ui-content-display tw-uppercase tw-inline-flex tw-items-center tw-justify-center tw-bg-[--bcm-avatar-bg] tw-text-[--bcm-avatar-text]",
+    base: "bcm-avatar bcm-ui-element bcm-ui-content-display tw-uppercase tw-font-medium tw-inline-flex tw-items-center tw-justify-center tw-bg-[--bcm-avatar-bg] tw-text-[--bcm-avatar-text]",
     image: "tw-w-full tw-h-full",
     badge: "",
   },
   variants: {
     size: {
-      small: "bcm-avatar__size-small tw-text-1 tw-w-6 tw-h-6",
-      medium: "bcm-avatar__size-medium tw-text-2 tw-w-8 tw-h-8",
-      large: "bcm-avatar__size-large tw-text-3 tw-w-10 tw-h-10",
+      small: "bcm-avatar__size-small tw-text-size-4 tw-w-6 tw-h-6",
+      medium: "bcm-avatar__size-medium tw-text-size-5 tw-w-8 tw-h-8",
+      large: "bcm-avatar__size-large tw-text-size-6 tw-w-10 tw-h-10",
     },
     shape: {
       ellipse: {
@@ -33,8 +32,8 @@ const avatarStyle = ce({
         badge: "tw-top-0 tw-right-0",
       },
       square: {
-        base: "bcm-avatar__shape-square tw-rounded",
-        image: "tw-rounded",
+        base: "bcm-avatar__shape-square tw-rounded-[--bcm-ui-radius]",
+        image: "tw-rounded-[--bcm-ui-radius]",
         badge: "tw--top-0.5 tw--right-0.5",
       },
     },
@@ -52,6 +51,8 @@ const avatarStyle = ce({
   },
 });
 
+const avatarCss = "@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}:root{--bcm-avatar-bg:var(--bcm-ui-color-background);--bcm-avatar-text:var(--bcm-ui-color-text);--bcm-avatar-radius:50%}";
+
 const BcmAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -74,7 +75,7 @@ const BcmAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return initials.substring(0, 2);
   }
   renderDefaultIcon() {
-    return h("bcm-icon", { icon: this.icon });
+    return h("i", { class: this.icon });
   }
   render() {
     const { shape, size, status, color, blink } = this;
@@ -82,7 +83,7 @@ const BcmAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const dc = Generate.getTwColor({
       color: color,
       tones: {
-        200: ["bg"],
+        100: ["bg"],
         700: ["text"],
       },
       variable: "--bcm-avatar",
@@ -91,7 +92,7 @@ const BcmAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       ? {
         width: `${size}px`,
         height: `${size}px`,
-        fontSize: `${+size / 3}px`,
+        fontSize: `${+size / 2}px`,
       }
       : {};
     const RenderContent = () => {
@@ -116,6 +117,7 @@ const BcmAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h(Host, { role: "img", "aria-label": this.alt || this.name || "Avatar", class: base(), style: Object.assign(Object.assign({}, dc), customSize) }, h(RenderContent, null), status && h("bcm-badge", { class: badge(), status: status, blink: blink, "aria-hidden": "true" }), h("slot", null)));
   }
   get el() { return this; }
+  static get style() { return avatarCss; }
 }, [4, "bcm-avatar", {
     "_id": [513, "id"],
     "image": [1],
@@ -133,7 +135,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-avatar", "bcm-badge", "bcm-icon"];
+  const components = ["bcm-avatar", "bcm-badge"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-avatar":
       if (!customElements.get(tagName)) {
@@ -141,11 +143,6 @@ function defineCustomElement() {
       }
       break;
     case "bcm-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "bcm-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

package/dist/components/badge.js

@@ -4,13 +4,13 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { C as ColorHelper } from './color-helper.js';
-import './validators.js';
+import './popover.style.js';
 import { G as Generate } from './generate.js';
 import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
-import { B as Bcm } from './bcm.js';
-import { c as ce } from './index5.js';
+import { a as Bcm } from './bcm.js';
+import { c as ce } from './index4.js';
 
 const badgeStyle = ce({
   slots: {
@@ -20,26 +20,26 @@ const badgeStyle = ce({
       "tw-flex tw-items-center tw-justify-center tw-flex-row",
       "tw-rounded-full tw-text-center",
       "tw-bg-[--bcm-badge-bg] tw-text-[--bcm-badge-text]",
-      "tw-whitespace-nowrap",
+      "tw-whitespace-nowrap tw-font-medium",
     ],
     dotText: "empty:tw-hidden",
   },
   variants: {
     size: {
       small: {
-        host: "tw-text-2 tw-gap-1",
-        base: "bcm-badge__dot-size-small tw-text-1 tw-min-w-1.5 tw-min-h-1.5",
-        dotText: "tw-px-1.5 tw-min-w-4",
+        host: "tw-text-size-3 tw-gap-1",
+        base: "bcm-badge__dot-size-small  tw-min-w-1.5 tw-min-h-1.5",
+        dotText: "tw-px-1 tw-min-w-4",
       },
       medium: {
-        host: "tw-text-3 tw-gap-1.5",
-        base: "bcm-badge__dot-size-medium tw-text-2 tw-min-w-2 tw-min-h-2",
-        dotText: "tw-px-1.5 tw-min-w-5",
+        host: "tw-text-size-4 tw-gap-1.5",
+        base: "bcm-badge__dot-size-medium  tw-min-w-2 tw-min-h-2",
+        dotText: "tw-px-1.5 tw-py-0.5 tw-min-w-6",
       },
       large: {
-        host: "tw-text-4 tw-gap-2",
-        base: "bcm-badge__dot-size-large tw-text-3 tw-min-w-2.5 tw-min-h-2.5",
-        dotText: "tw-px-2 tw-min-w-6",
+        host: "tw-text-size-5 tw-gap-2",
+        base: "bcm-badge__dot-size-large  tw-min-w-2.5 tw-min-h-2.5",
+        dotText: "tw-px-2 tw-py-1 tw-min-w-8",
       },
     },
     blink: {
@@ -59,6 +59,8 @@ const badgeStyle = ce({
   },
 });
 
+const badgeCss = "@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}:root{--bcm-badge-bg:var(--bcm-ui-color-background);--bcm-badge-text:var(--bcm-ui-color-text)}";
+
 const BcmBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -92,6 +94,7 @@ const BcmBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h(Host, { class: host(), role: "status", "aria-live": "polite" }, h("div", { class: base(), style: style }, h("span", { class: dotText(), role: "presentation", "aria-hidden": "true" }, value), h("span", { class: "tw-sr-only" }, value)), h("slot", null)));
   }
   get el() { return this; }
+  static get style() { return badgeCss; }
 }, [4, "bcm-badge", {
     "_id": [513, "id"],
     "blink": [4],

package/dist/components/bcm-accordion.js

@@ -5,8 +5,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { G as Generate } from './generate.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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -59,13 +57,12 @@ const BcmAccordion$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     }
   }
   render() {
-    return (h(Host, { id: this._id }, h("slot", null)));
+    return (h(Host, { id: this._id, class: "tw-block" }, h("slot", null)));
   }
   get el() { return this; }
-  static get style() { return accordionCss; }
 }, [4, "bcm-accordion", {
-    "_id": [1537, "id"],
-    "multi": [1028]
+    "_id": [513, "id"],
+    "multi": [4]
   }, [[0, "bcm-open", "open"], [0, "bcm-is-load", "isLoad"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/bcm-alert.js

@@ -3,119 +3,130 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { G as Generate, s as snq, S as StatusProps, T as TypeProps } from './generate.js';
-import { c as classnames } from './index2.js';
-import { c as createStore } from './index4.js';
-import { S as StringHelper } from './string-helper.js';
-import { d as defineCustomElement$2 } from './icon.js';
+import { B as Bcm } from './bcm.js';
+import { c as ce } from './index4.js';
 
-const { state } = createStore({
-  value: new Map(),
-  setData: {},
-  removeData: {}
+const alertStyle = ce({
+  slots: {
+    host: "bcm-alert bcm-ui-element bcm-ui-content-display tw-rounded-lg tw-flex tw-flex-row tw-items-baseline tw-justify-between tw-w-full tw-px-3 tw-font-medium",
+    content: "bcm-alert-content tw-flex tw-flex-row tw-items-center tw-justify-start tw-w-fit tw-flex-1",
+    action: "bcm-alert__action empty:tw-hidden tw-flex tw-flex-row tw-items-center tw-justify-center tw-w-fit tw-gap-2 tw-text-inherit",
+    header: "bcm-alert__header-message empty:tw-hidden",
+  },
+  variants: {
+    size: {
+      small: {
+        host: "bcm-alert__size-small tw-py-1 tw-text-size-4 tw-gap-2",
+      },
+      medium: {
+        host: "bcm-alert__size-medium tw-py-2 tw-text-base tw-gap-2.5",
+      },
+      large: {
+        host: "bcm-alert__size-large tw-py-3 tw-text-lg tw-gap-3",
+      },
+    },
+    status: {
+      default: {
+        host: "bcm-alert__status-default tw-bg-color-default tw-text-color",
+      },
+      success: {
+        host: "bcm-alert__status-success tw-bg-color-palette-emerald tw-text-color-success",
+      },
+      warning: {
+        host: "bcm-alert__status-warning tw-bg-color-palette-amber tw-text-color-warning",
+      },
+      error: {
+        host: "bcm-alert__status-error tw-bg-color-palette-red tw-text-color-error",
+      },
+      info: {
+        host: "bcm-alert__status-info tw-bg-color-palette-blue tw-text-color-primary",
+      },
+    },
+    kind: {
+      filled: {
+        host: "bcm-alert__type-filled",
+      },
+      text: {
+        host: "!tw-bg-transparent bcm-alert__type-text",
+      },
+    },
+    hide: {
+      true: {
+        host: "tw-hidden",
+      },
+      false: {
+        host: "",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    kind: "filled",
+    status: "info",
+    hide: false,
+  },
 });
-const setValue = (val) => {
-  const data = Object.assign(Object.assign(Object.assign({}, val), { size: val.bigIcon ? 'medium' : 14, iconType: val.bigIcon ? 'outlined' : 'fill' }), Generate.getIconAttrWithStatusType(val.status));
-  state.value.set(data.id, data);
-};
-const removeValue = (_id) => {
-  state.value.delete(_id);
-};
-const getValue = (id) => snq(() => state.value.get(id), {});
-const alertStates = {
-  setValue,
-  removeValue,
-  getValue
-};
-
-const alertCss = "@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-alert{display:block;width:100%;max-width:400px;box-sizing:border-box;padding:8px 16px;box-shadow:0px 2px 4px rgba(0, 0, 0, 0.15);border-radius:2px;position:relative;grid-gap:8px}.bcm-alert.hidden{display:none}.bcm-alert.full-width{max-width:100%}.bcm-alert__status-info{border:1px solid var(--bcm-color-blue-3);background-color:var(--bcm-color-blue-1)}.bcm-alert__status-error{border:1px solid var(--bcm-color-red-3);background-color:var(--bcm-color-red-1)}.bcm-alert__status-warning{border:1px solid var(--bcm-color-warmyellow-3);background-color:var(--bcm-color-warmyellow-1)}.bcm-alert__status-success{border:1px solid var(--bcm-color-green-3);background-color:var(--bcm-color-green-1)}.bcm-alert__type-banner{border:none}.bcm-alert__header{display:flex;align-items:center;justify-content:space-between;padding:4px 0}.bcm-alert__header-message{display:flex;align-items:center;grid-gap:8px;color:var(--bcm-color-grey-8)}.bcm-alert__header-dismiss{display:flex;position:absolute;top:-1px;right:0;padding:16px;color:var(--bcm-color-grey-8)}.bcm-alert__header-dismiss:hover{cursor:pointer;color:var(--bcm-color-grey-9)}.bcm-alert__content{color:var(--bcm-color-grey-8)}.bcm-alert__content p{margin:0;padding:0}";
 
+const statusIcon = {
+  default: "fa-regular fa-circle-info",
+  info: "fa-regular fa-circle-info",
+  success: "fa-regular fa-circle-check",
+  warning: "fa-regular fa-triangle-exclamation",
+  error: "fa-regular fa-circle-x",
+};
 const BcmAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.alertdismissible = createEvent(this, "bcm-alert-dismissible", 7);
-    this.hidden = false;
-    this._id = Generate.UID();
-    this._title = undefined;
+    this.onViewClick = createEvent(this, "on-view-click", 3);
+    this.onClose = createEvent(this, "on-close", 3);
+    this.size = Bcm.Size.medium;
+    this.kind = "filled";
+    this.status = Bcm.Status.info;
+    this.customIcon = undefined;
     this.description = undefined;
-    this.status = StatusProps.info;
-    this.type = TypeProps.basic;
-    this.dismissible = undefined;
     this.icon = false;
-    this.bigIcon = false;
-    this.fullWidth = false;
-  }
-  componentWillRender() {
-    if (this.dismissible != undefined) {
-      if (this.dismissible == '') {
-        this.dismissible = true;
-      }
-      else if (typeof this.dismissible === 'string' && this.dismissible == 'false' || this.dismissible == 'true') {
-        this.dismissible = StringHelper.elementBooleanCheck(this.dismissible);
-      }
-      else {
-        return;
-      }
-    }
-    this.setData();
-  }
-  dismiss(e) {
-    this.alertdismissible.emit(e);
-    this.el.remove();
-  }
-  getStateData() {
-    return alertStates.getValue(this._id);
+    this.dismissible = false;
+    this.hide = false;
+    this.viewButton = false;
+    this.viewButtonText = "View";
   }
-  setData() {
-    const { status, type, bigIcon } = this;
-    alertStates.setValue({
-      id: this._id,
-      status,
-      type,
-      bigIcon,
-    });
+  onDismiss() {
+    this.hide = true;
+    this.onClose.emit();
   }
   render() {
-    const { fullWidth, status, type, icon, bigIcon, _title, hidden, dismissible, description } = this;
-    const hostClasses = classnames('bcm-alert', 'bcm-alert__type-' + type, 'bcm-alert__status-' + status, {
-      'full-width': fullWidth,
-      hidden,
-    });
-    const headerMessage = classnames('bcm-alert__header-message', !!description ? 'size-3' : 'size-2');
-    const state = this.getStateData();
-    return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null)), h("header", { class: "bcm-alert__header" }, h("span", { class: headerMessage }, (bigIcon || icon) && h("bcm-icon", { icon: state.icon }), _title), dismissible && (h("span", { class: "bcm-alert__header-dismiss", onClick: e => this.dismiss(e) }, typeof dismissible === 'string' ? dismissible : h("bcm-icon", { icon: "fal fa-times" })))), h("main", { class: "bcm-alert__content size-2" }, description && h("p", null, description), h("slot", null))));
+    // props
+    const { viewButton, viewButtonText, customIcon, icon, dismissible } = this;
+    // css variant props
+    const { size, kind, description, status, hide } = this;
+    const { host, content, action, header } = alertStyle({ size, kind, status, hide });
+    const iconClass = customIcon ? customIcon : icon ? statusIcon[status] : null;
+    return (h(Host, { class: host(), role: "alert" }, h("div", { class: header() }, iconClass && h("i", { class: `${iconClass}` })), h("div", { class: content() }, h("slot", null, description)), h("div", { class: action() }, viewButton && (h("a", { href: "javascript:void(0)", class: "tw-appearance-none tw-bg-transparent tw-text-inherit tw-no-underline", onClick: e => this.onViewClick.emit(e) }, viewButtonText)), dismissible && h("i", { class: "fa-regular fa-times tw-cursor-pointer tw-text-inherit", onClick: () => this.onDismiss() }))));
   }
-  get el() { return this; }
-  static get style() { return alertCss; }
 }, [4, "bcm-alert", {
-    "hidden": [1028],
-    "_id": [1537, "id"],
-    "_title": [1032],
-    "description": [1032],
-    "status": [1025],
-    "type": [1025],
-    "dismissible": [1032],
-    "icon": [1028],
-    "bigIcon": [1028, "big-icon"],
-    "fullWidth": [1028, "full-width"]
+    "size": [1],
+    "kind": [1],
+    "status": [1],
+    "customIcon": [1, "custom-icon"],
+    "description": [1],
+    "icon": [4],
+    "dismissible": [4],
+    "hide": [1028],
+    "viewButton": [4, "view-button"],
+    "viewButtonText": [1, "view-button-text"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-alert", "bcm-icon"];
+  const components = ["bcm-alert"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-alert":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, BcmAlert$1);
       }
       break;
-    case "bcm-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
   } });
 }
 

package/dist/components/{bcm-input-2.d.ts → bcm-arrow.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface BcmInput2 extends Components.BcmInput2, HTMLElement {}
-export const BcmInput2: {
-  prototype: BcmInput2;
-  new (): BcmInput2;
+interface BcmArrow extends Components.BcmArrow, HTMLElement {}
+export const BcmArrow: {
+  prototype: BcmArrow;
+  new (): BcmArrow;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/bcm-arrow.js

@@ -0,0 +1,47 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { G as Generate } from './generate.js';
+
+const arrowCss = "@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}.arrow{position:absolute;width:0;height:0;border-width:8px;border-style:solid;background-color:transparent}.arrow.top{border-color:transparent transparent var(--arrow-color) transparent;transform:translateX(-50%)}.arrow.bottom{border-color:var(--arrow-color) transparent transparent transparent;transform:translateX(-50%)}.arrow.right{border-color:transparent var(--arrow-color) transparent transparent;transform:translateY(-50%) rotate(180deg)}.arrow.left{border-color:transparent transparent transparent var(--arrow-color);transform:translateY(-50%) rotate(-180deg)}";
+
+const BcmArrow$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this._id = Generate.UID();
+    this.position = undefined;
+  }
+  render() {
+    const hostClasses = classnames({
+      [`arrow  ${this.position}`]: true,
+    });
+    return h(Host, { class: hostClasses });
+  }
+  get el() { return this; }
+  static get style() { return arrowCss; }
+}, [0, "bcm-arrow", {
+    "_id": [513, "id"],
+    "position": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-arrow"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-arrow":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmArrow$1);
+      }
+      break;
+  } });
+}
+
+const BcmArrow = BcmArrow$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmArrow, defineCustomElement };

package/dist/components/bcm-attendance-actions-comment.js

@@ -4,15 +4,15 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './color-helper.js';
-import './validators.js';
+import './popover.style.js';
 import { G as Generate } from './generate.js';
 import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
 import { d as delay } from './utils.js';
 import { F as FloatingUI } from './floating-ui.js';
-import { B as Bcm } from './bcm.js';
-import { c as ce } from './index5.js';
+import { a as Bcm } from './bcm.js';
+import { c as ce } from './index4.js';
 import { d as defineCustomElement$a } from './button.js';
 import { d as defineCustomElement$9 } from './colorful.js';
 import { d as defineCustomElement$8 } from './form.js';