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

package/dist/collection/components/molecules/modal/modal.css

@@ -1,5 +1,4 @@
 @import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap");
 .size-1 {
   font-size: 12px;
   line-height: 20px;
@@ -123,154 +122,17 @@
   margin-right: 8px;
 }
 
-* {
-  box-sizing: border-box;
-}
-
 .bcm-modal {
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  line-height: calc(14px + 8px);
-  font-weight: 400;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  flex-wrap: nowrap;
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  z-index: -1;
-  opacity: 0;
-  top: 0;
-  left: 0;
-  visibility: hidden;
-  overflow: auto;
-  padding: 24px;
   transition: opacity 0.5s ease, visibility 0.4s ease-in-out, 0.3s z-index;
 }
 .bcm-modal__show {
-  opacity: 1;
-  z-index: 10500;
-  visibility: visible;
   transition: opacity 0.2s ease, visibility 0.4s ease-in-out, 0.3s z-index;
 }
 .bcm-modal__show .bcm-modal__container {
   transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
   transform: translateY(0);
 }
-.bcm-modal .overlay {
-  position: fixed;
-  width: 100vw;
-  height: 100vh;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  opacity: 0.6;
-  background-color: var(--bcm-new-ds-color-slate-900);
-}
 .bcm-modal__container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  box-shadow: 0 2px 6px 1px rgba(17, 24, 38, 0.1);
-  border-radius: 8px;
-  background-color: var(--bcm-new-ds-color-white);
-  z-index: 2;
-  transform: translateY(-50px);
+  transform: translateY(-100px);
   transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
-}
-.bcm-modal__container.portrait {
-  max-width: 312px;
-}
-.bcm-modal__container.landscape {
-  max-width: 475px;
-}
-.bcm-modal__container.small {
-  max-width: 576px;
-}
-.bcm-modal__container.medium {
-  max-width: 768px;
-}
-.bcm-modal__container.large {
-  max-width: 992px;
-}
-.bcm-modal__container.xlarge {
-  max-width: 1024px;
-}
-.bcm-modal__container.xxlarge {
-  max-width: 1200px;
-}
-.bcm-modal__container.xxxlarge {
-  max-width: 1700px;
-}
-.bcm-modal__container.full-width {
-  width: 100%;
-  max-width: 100%;
-}
-.bcm-modal__container.custom-size main {
-  overflow: auto;
-  height: 100%;
-  width: 100%;
-}
-.bcm-modal__container-main {
-  color: var(--bcm-color-grey-8);
-  padding: 0;
-}
-.bcm-modal__container-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: nowrap;
-  padding: 12px 24px;
-  font-size: 16px;
-  line-height: calc(16px + 8px);
-  font-weight: 500;
-  color: var(--bcm-new-ds-color-slate-600);
-  background-color: var(--bcm-new-ds-color-slate-100);
-  position: relative;
-}
-.bcm-modal__container-header span.full-width {
-  width: 100%;
-}
-.bcm-modal__container-header-close {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: nowrap;
-  padding: 8px;
-  cursor: pointer;
-  color: var(--bcm-new-ds-color-slate-500);
-  transition: color 0.1s ease-in-out;
-}
-.bcm-modal__container-header-close:hover {
-  color: var(--bcm-new-ds-color-slate-600);
-}
-.bcm-modal__container-header-close:active {
-  color: var(--bcm-new-ds-color-slate-700);
-}
-.bcm-modal__container-header-close:focus-visible {
-  color: var(--bcm-new-ds-color-slate-800);
-}
-.bcm-modal__container-header:after {
-  border-radius: 8px 8px 0 0;
-  content: "";
-  display: block;
-  width: 100%;
-  height: 4px;
-  background-color: var(--bcm-color-primary-500);
-  position: absolute;
-  top: -4px;
-  left: 0;
-}
-.bcm-modal__container-footer-content {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: flex-end;
-  flex-wrap: nowrap;
-  padding: 12px 24px 24px;
-  grid-gap: 8px;
 }

package/dist/collection/components/molecules/modal/modal.js

@@ -3,11 +3,11 @@
  * Copyright (c) Bromcom.
  */
 import { h, Host } from '@stencil/core';
-import cs from 'classnames';
 import Bcm from '../../../models/bcm';
 import { StringHelper } from '../../../helper/string-helper';
 import { SlotTemplate } from '../../../templates/slot-template';
 import { Generate } from '../../../helper/generate';
+import { modalStyle } from './modal.style';
 export class BcmModal {
   constructor() {
     this.modalSlots = {};
@@ -25,8 +25,6 @@ export class BcmModal {
     if (bcmSlots) {
       bcmSlots.forEach(el => {
         let slotName = StringHelper.lowercase(StringHelper.split(el.nodeName, '-').pop());
-        el.slot = slotName;
-        el.classList.add(`bcm-modal__container-${slotName}-content`);
         this.modalSlots[slotName] = el;
       });
     }
@@ -112,25 +110,20 @@ export class BcmModal {
     document.body.classList.remove(disableScrollClass);
   }
   render() {
-    const { isShow, size, fullWidth, hidden, width, height } = this;
-    const bcmModalContainer = cs('bcm-modal__container', size, {
-      'custom-size': width || height,
-      'full-width': fullWidth,
-      'bcm-modal__show': isShow,
+    const { isShow, size, fullWidth, width, height } = this;
+    const { host, container, main, headerHost, headerClose, footerHost, overlay, } = modalStyle({
+      size,
+      isShow,
+      fullWidth,
     });
-    const bcmModalHostClasses = cs('bcm-modal', {
-      hidden,
-      'bcm-modal__show': isShow,
-    });
-    const mainClasses = cs('bcm-modal__container-main', 'size-2');
     const FooterTemplate = () => {
-      return (this.modalSlots['footer'] && (h("footer", { class: "bcm-modal__container-footer" }, h("slot", { name: "footer" }))));
+      return (this.modalSlots['footer'] && (h("footer", { class: footerHost() }, h("slot", { name: "footer" }))));
     };
     const HeaderTemplate = () => {
-      return (this.modalSlots['header'] && (h("header", { class: "bcm-modal__container-header" }, h(SlotTemplate, { name: "header", className: 'full-width' }), h("div", { class: "bcm-modal__container-header-close", onClick: () => this.hide() }, h("bcm-icon", { icon: "far fa-times" })))));
+      return (this.modalSlots['header'] && (h("header", { class: headerHost() }, h("slot", { name: "header" }), h("div", { class: headerClose(), onClick: () => this.hide() }, h("i", { class: "fa-solid fa-xmark" })))));
     };
     const customStyle = Object.assign(Object.assign({}, (width && { width: width })), (height && { height: height }));
-    return (h(Host, { class: `tw-overscroll-contain  ${bcmModalHostClasses}` }, h("div", { class: "overlay", onClick: () => this.handleBackdrop() }), h("div", { class: bcmModalContainer, style: customStyle }, h(HeaderTemplate, null), h("main", { class: mainClasses }, h("article", null, h(SlotTemplate, null))), h(FooterTemplate, null))));
+    return (h(Host, { class: host() }, h("div", { class: overlay(), onClick: () => this.handleBackdrop() }), h("div", { class: container(), style: customStyle }, h(HeaderTemplate, null), h("main", { class: main() }, h("article", null, h(SlotTemplate, null))), h(FooterTemplate, null))));
   }
   static get is() { return "bcm-modal"; }
   static get originalStyleUrls() {

package/dist/collection/components/molecules/modal/modal.style.js

@@ -0,0 +1,111 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const modalStyle = tv({
+  slots: {
+    host: [
+      "bcm-modal bcm-ui-element bcm-ui-content-display",
+      "tw-flex tw-flex-col tw-items-center tw-justify-start",
+      "tw-w-full tw-h-full",
+      "tw-fixed tw-top-0 tw-left-0",
+      "tw-z-modal",
+      "tw-overflow-auto tw-p-6"
+    ],
+    overlay: "overlay tw-fixed tw-top-0 tw-left-0 tw-w-full tw-h-full tw-bg-color-transparent-background",
+    container: [
+      "bcm-modal__container",
+      "tw-flex tw-flex-col tw-w-full",
+      "tw-shadow-2",
+      "tw-rounded-modals",
+      "tw-bg-color-surface-modal",
+    ],
+    main: ["bcm-modal__container-main tw-text-color tw-p-0"],
+    headerHost: [
+      "bcm-modal__container-header",
+      "tw-flex tw-items-center tw-justify-between",
+      "tw-py-3 tw-px-4",
+      "tw-text-size-6 tw-font-semibold",
+      "tw-text-color tw-bg-color-default",
+      "tw-relative",
+      "after:tw-rounded-t-lg after:tw-block after:tw-w-full after:tw-w-full after:tw-h-1 after:tw-bg-[--bcm-color-primary-500] after:tw-absolute after:-tw-top-1 after:tw-left-0"
+    ],
+    headerClose: [
+      "bcm-modal__container-header-close",
+      "tw-flex tw-items-center tw-justify-center",
+      "tw-p-2 tw-text-color tw-text-size-5",
+      "tw-cursor-pointer",
+      "tw-transition tw-duration-100 tw-ease-in-out",
+      "hover:tw-text-gray-800 focus-visible:tw-text-gray-900"
+    ],
+    footerHost: [
+      "bcm-modal__container-footer"
+    ],
+    footerContent: [
+      "bcm-modal__container-footer-content",
+      "tw-flex tw-flex-row tw-items-start tw-justify-end",
+      "tw-p-4 tw-gap-2"
+    ],
+  },
+  variants: {
+    size: {
+      portrait: {
+        container: "portrait tw-max-w-[312px]"
+      },
+      landscape: {
+        container: "landscape tw-max-w-[475px]"
+      },
+      small: {
+        container: "small tw-max-w-xl",
+      },
+      medium: {
+        container: "medium tw-max-w-3xl",
+      },
+      large: {
+        container: "large tw-max-w-[992px]",
+      },
+      xlarge: {
+        container: "xlarge tw-max-w-5xl",
+      },
+      xxlarge: {
+        container: "xxlarge tw-max-w-[1200px]",
+      },
+      xxxlarge: {
+        container: "xxxlarge tw-max-w-[1700px]",
+      },
+      customSize: {
+        container: "custom-size",
+        main: "tw-overflow-auto tw-w-full tw-h-full",
+      },
+    },
+    isShow: {
+      true: {
+        host: [
+          "bcm-modal__show",
+          "tw-opacity-100 tw-visible",
+        ],
+        container: [
+          "bcm-modal__show",
+          "tw-transform tw-translate-y-0",
+        ],
+      },
+      false: {
+        host: ["tw-opacity-0  tw-invisible tw-user-select-none"],
+      },
+    },
+    fullWidth: {
+      true: {
+        container: "full-width !tw-max-w-full !tw-w-full",
+      },
+      false: {
+        container: "",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    isShow: false,
+    fullWidth: false,
+  },
+});

package/dist/collection/components/molecules/number-input/number-input.js

@@ -260,7 +260,7 @@ export class NumberInput {
         this.value = floatValue;
         this._onChange.emit(e);
       } });
-    return (h(Host, { class: host() }, label && h("bcm-label", { size: size, type: captionType, value: label, required: required, htmlFor: _id + "-base-input", id: _id + "-label" }), h("div", { class: inputContainer() }, h("div", { class: slotClass() }, h("slot", { name: "prefix" }, _prefix && _prefix.length > 0 && h("span", { innerHTML: _prefix }))), h("bcm-react-number", { disabled: disabled, class: "tw-flex-1", options: generalProps }), h("div", { class: slotClass() }, !disabled && isActiveClearable && (h("button", { class: clearButton(), onClick: event => this.handleClear(event) }, h("i", { class: "far fa-times" }))), h("slot", { name: "suffix" }, _suffix && _suffix.length > 0 && h("span", { innerHTML: _suffix })), h("div", { class: controls() }, h("button", { type: "button", disabled: disabled, class: cs(controlsBtn(), controlsBtnUp()), onClick: this.up.bind(this), "aria-label": "Increase value" }, h("i", { class: "fas fa-caret-up" })), h("div", { class: controlsDivider() }), h("button", { type: "button", disabled: disabled, class: cs(controlsBtn(), controlsBtnDown()), onClick: this.down.bind(this), "aria-label": "Decrease value" }, h("i", { class: "fas fa-caret-down" }))))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage })));
+    return (h(Host, { class: host() }, label && h("bcm-label", { size: size, type: captionType, value: label, required: required, htmlFor: _id + "-base-input", id: _id + "-label" }), h("div", { class: inputContainer(), id: _id + "-container" }, h("div", { class: slotClass() }, h("slot", { name: "prefix" }, _prefix && _prefix.length > 0 && h("span", { innerHTML: _prefix }))), h("bcm-react-number", { disabled: disabled, class: "tw-flex-1", options: generalProps }), h("div", { class: slotClass() }, !disabled && isActiveClearable && (h("button", { class: clearButton(), onClick: event => this.handleClear(event) }, h("i", { class: "far fa-times" }))), h("slot", { name: "suffix" }, _suffix && _suffix.length > 0 && h("span", { innerHTML: _suffix })), h("div", { class: controls() }, h("button", { tabindex: "-1", type: "button", disabled: disabled, class: cs(controlsBtn(), controlsBtnUp()), onClick: this.up.bind(this), "aria-label": "Increase value" }, h("i", { class: "fas fa-caret-up" })), h("div", { class: controlsDivider() }), h("button", { tabindex: "-1", type: "button", disabled: disabled, class: cs(controlsBtn(), controlsBtnDown()), onClick: this.down.bind(this), "aria-label": "Decrease value" }, h("i", { class: "fas fa-caret-down" }))))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage })));
   }
   static get is() { return "bcm-number-input"; }
   static get properties() {

package/dist/collection/components/molecules/number-input/react-input.js

@@ -76,7 +76,7 @@ export class BcmReactNumber {
         "mutable": true,
         "complexType": {
           "original": "ExtendedNumericPropsType",
-          "resolved": "InternalNumberFormatBase & { thousandSeparator?: string | boolean; decimalSeparator?: string; allowedDecimalSeparators?: string[]; thousandsGroupStyle?: \"none\" | \"thousand\" | \"lakh\" | \"wan\"; decimalScale?: number; fixedDecimalScale?: boolean; allowNegative?: boolean; allowLeadingZeros?: boolean; suffix?: string; prefix?: string; } & Omit<InputAttributes, \"prefix\" | \"form\" | \"slot\" | \"style\" | \"title\" | \"pattern\" | \"color\" | \"dir\" | \"width\" | \"height\" | \"name\" | \"id\" | \"hidden\" | \"size\" | \"className\" | \"type\" | \"disabled\" | \"autoFocus\" | \"formAction\" | \"formEncType\" | \"formMethod\" | \"formNoValidate\" | \"formTarget\" | \"aria-label\" | \"maxLength\" | \"onClick\" | \"checked\" | \"required\" | \"multiple\" | \"placeholder\" | \"accept\" | \"alt\" | \"aria-labelledby\" | \"aria-hidden\" | \"onSelect\" | \"accessKey\" | \"role\" | \"aria-live\" | \"readOnly\" | \"onFocus\" | \"onBlur\" | \"minLength\" | \"min\" | \"max\" | \"step\" | \"autoComplete\" | \"capture\" | \"crossOrigin\" | \"enterKeyHint\" | \"list\" | \"src\" | \"onChange\" | \"defaultChecked\" | \"suppressContentEditableWarning\" | \"suppressHydrationWarning\" | \"contentEditable\" | \"contextMenu\" | \"draggable\" | \"lang\" | \"nonce\" | \"spellCheck\" | \"tabIndex\" | \"translate\" | \"radioGroup\" | \"about\" | \"datatype\" | \"inlist\" | \"property\" | \"resource\" | \"typeof\" | \"vocab\" | \"autoCapitalize\" | \"autoCorrect\" | \"autoSave\" | \"itemProp\" | \"itemScope\" | \"itemType\" | \"itemID\" | \"itemRef\" | \"results\" | \"security\" | \"unselectable\" | \"inputMode\" | \"is\" | \"aria-activedescendant\" | \"aria-atomic\" | \"aria-autocomplete\" | \"aria-busy\" | \"aria-checked\" | \"aria-colcount\" | \"aria-colindex\" | \"aria-colspan\" | \"aria-controls\" | \"aria-current\" | \"aria-describedby\" | \"aria-details\" | \"aria-disabled\" | \"aria-dropeffect\" | \"aria-errormessage\" | \"aria-expanded\" | \"aria-flowto\" | \"aria-grabbed\" | \"aria-haspopup\" | \"aria-invalid\" | \"aria-keyshortcuts\" | \"aria-level\" | \"aria-modal\" | \"aria-multiline\" | \"aria-multiselectable\" | \"aria-orientation\" | \"aria-owns\" | \"aria-placeholder\" | \"aria-posinset\" | \"aria-pressed\" | \"aria-readonly\" | \"aria-relevant\" | \"aria-required\" | \"aria-roledescription\" | \"aria-rowcount\" | \"aria-rowindex\" | \"aria-rowspan\" | \"aria-selected\" | \"aria-setsize\" | \"aria-sort\" | \"aria-valuemax\" | \"aria-valuemin\" | \"aria-valuenow\" | \"aria-valuetext\" | \"dangerouslySetInnerHTML\" | \"onCopy\" | \"onCopyCapture\" | \"onCut\" | \"onCutCapture\" | \"onPaste\" | \"onPasteCapture\" | \"onCompositionEnd\" | \"onCompositionEndCapture\" | \"onCompositionStart\" | \"onCompositionStartCapture\" | \"onCompositionUpdate\" | \"onCompositionUpdateCapture\" | \"onFocusCapture\" | \"onBlurCapture\" | \"onChangeCapture\" | \"onBeforeInput\" | \"onBeforeInputCapture\" | \"onInput\" | \"onInputCapture\" | \"onReset\" | \"onResetCapture\" | \"onSubmit\" | \"onSubmitCapture\" | \"onInvalid\" | \"onInvalidCapture\" | \"onLoad\" | \"onLoadCapture\" | \"onError\" | \"onErrorCapture\" | \"onKeyDown\" | \"onKeyDownCapture\" | \"onKeyPress\" | \"onKeyPressCapture\" | \"onKeyUp\" | \"onKeyUpCapture\" | \"onAbort\" | \"onAbortCapture\" | \"onCanPlay\" | \"onCanPlayCapture\" | \"onCanPlayThrough\" | \"onCanPlayThroughCapture\" | \"onDurationChange\" | \"onDurationChangeCapture\" | \"onEmptied\" | \"onEmptiedCapture\" | \"onEncrypted\" | \"onEncryptedCapture\" | \"onEnded\" | \"onEndedCapture\" | \"onLoadedData\" | \"onLoadedDataCapture\" | \"onLoadedMetadata\" | \"onLoadedMetadataCapture\" | \"onLoadStart\" | \"onLoadStartCapture\" | \"onPause\" | \"onPauseCapture\" | \"onPlay\" | \"onPlayCapture\" | \"onPlaying\" | \"onPlayingCapture\" | \"onProgress\" | \"onProgressCapture\" | \"onRateChange\" | \"onRateChangeCapture\" | \"onResize\" | \"onResizeCapture\" | \"onSeeked\" | \"onSeekedCapture\" | \"onSeeking\" | \"onSeekingCapture\" | \"onStalled\" | \"onStalledCapture\" | \"onSuspend\" | \"onSuspendCapture\" | \"onTimeUpdate\" | \"onTimeUpdateCapture\" | \"onVolumeChange\" | \"onVolumeChangeCapture\" | \"onWaiting\" | \"onWaitingCapture\" | \"onAuxClick\" | \"onAuxClickCapture\" | \"onClickCapture\" | \"onContextMenu\" | \"onContextMenuCapture\" | \"onDoubleClick\" | \"onDoubleClickCapture\" | \"onDrag\" | \"onDragCapture\" | \"onDragEnd\" | \"onDragEndCapture\" | \"onDragEnter\" | \"onDragEnterCapture\" | \"onDragExit\" | \"onDragExitCapture\" | \"onDragLeave\" | \"onDragLeaveCapture\" | \"onDragOver\" | \"onDragOverCapture\" | \"onDragStart\" | \"onDragStartCapture\" | \"onDrop\" | \"onDropCapture\" | \"onMouseDown\" | \"onMouseDownCapture\" | \"onMouseEnter\" | \"onMouseLeave\" | \"onMouseMove\" | \"onMouseMoveCapture\" | \"onMouseOut\" | \"onMouseOutCapture\" | \"onMouseOver\" | \"onMouseOverCapture\" | \"onMouseUp\" | \"onMouseUpCapture\" | \"onSelectCapture\" | \"onTouchCancel\" | \"onTouchCancelCapture\" | \"onTouchEnd\" | \"onTouchEndCapture\" | \"onTouchMove\" | \"onTouchMoveCapture\" | \"onTouchStart\" | \"onTouchStartCapture\" | \"onPointerDown\" | \"onPointerDownCapture\" | \"onPointerMove\" | \"onPointerMoveCapture\" | \"onPointerUp\" | \"onPointerUpCapture\" | \"onPointerCancel\" | \"onPointerCancelCapture\" | \"onPointerEnter\" | \"onPointerEnterCapture\" | \"onPointerLeave\" | \"onPointerLeaveCapture\" | \"onPointerOver\" | \"onPointerOverCapture\" | \"onPointerOut\" | \"onPointerOutCapture\" | \"onGotPointerCapture\" | \"onGotPointerCaptureCapture\" | \"onLostPointerCapture\" | \"onLostPointerCaptureCapture\" | \"onScroll\" | \"onScrollCapture\" | \"onWheel\" | \"onWheelCapture\" | \"onAnimationStart\" | \"onAnimationStartCapture\" | \"onAnimationEnd\" | \"onAnimationEndCapture\" | \"onAnimationIteration\" | \"onAnimationIterationCapture\" | \"onTransitionEnd\" | \"onTransitionEndCapture\"> & Omit<InputAttributes, \"prefix\" | \"suffix\" | \"ref\" | \"value\" | \"type\" | \"defaultValue\" | \"onFocus\" | \"onBlur\" | \"thousandSeparator\" | \"decimalSeparator\" | \"decimalScale\" | \"fixedDecimalScale\" | \"allowNegative\" | \"allowLeadingZeros\" | \"onChange\" | \"inputMode\" | \"onKeyDown\" | \"onMouseUp\" | \"displayType\" | \"renderText\" | \"getInputRef\" | \"valueIsNumericString\" | \"onValueChange\" | \"isAllowed\" | \"isCharacterSame\" | \"allowedDecimalSeparators\" | \"thousandsGroupStyle\"> & { customInput?: ComponentType<InputAttributes>; } & { mode: \"strict\" | \"none\"; onValueChange?: (e: NumberFormatValues) => void; }",
+          "resolved": "InternalNumberFormatBase & { thousandSeparator?: string | boolean; decimalSeparator?: string; allowedDecimalSeparators?: string[]; thousandsGroupStyle?: \"none\" | \"thousand\" | \"lakh\" | \"wan\"; decimalScale?: number; fixedDecimalScale?: boolean; allowNegative?: boolean; allowLeadingZeros?: boolean; suffix?: string; prefix?: string; } & Omit<InputAttributes, \"prefix\" | \"form\" | \"slot\" | \"style\" | \"title\" | \"pattern\" | \"color\" | \"dir\" | \"width\" | \"height\" | \"name\" | \"id\" | \"hidden\" | \"size\" | \"className\" | \"type\" | \"disabled\" | \"autoFocus\" | \"formAction\" | \"formEncType\" | \"formMethod\" | \"formNoValidate\" | \"formTarget\" | \"aria-label\" | \"maxLength\" | \"onClick\" | \"checked\" | \"required\" | \"multiple\" | \"placeholder\" | \"accept\" | \"alt\" | \"aria-labelledby\" | \"aria-hidden\" | \"onSelect\" | \"accessKey\" | \"role\" | \"aria-live\" | \"aria-disabled\" | \"onFocus\" | \"onBlur\" | \"minLength\" | \"min\" | \"max\" | \"step\" | \"autoComplete\" | \"capture\" | \"crossOrigin\" | \"enterKeyHint\" | \"list\" | \"readOnly\" | \"src\" | \"onChange\" | \"defaultChecked\" | \"suppressContentEditableWarning\" | \"suppressHydrationWarning\" | \"contentEditable\" | \"contextMenu\" | \"draggable\" | \"lang\" | \"nonce\" | \"spellCheck\" | \"tabIndex\" | \"translate\" | \"radioGroup\" | \"about\" | \"datatype\" | \"inlist\" | \"property\" | \"resource\" | \"typeof\" | \"vocab\" | \"autoCapitalize\" | \"autoCorrect\" | \"autoSave\" | \"itemProp\" | \"itemScope\" | \"itemType\" | \"itemID\" | \"itemRef\" | \"results\" | \"security\" | \"unselectable\" | \"inputMode\" | \"is\" | \"aria-activedescendant\" | \"aria-atomic\" | \"aria-autocomplete\" | \"aria-busy\" | \"aria-checked\" | \"aria-colcount\" | \"aria-colindex\" | \"aria-colspan\" | \"aria-controls\" | \"aria-current\" | \"aria-describedby\" | \"aria-details\" | \"aria-dropeffect\" | \"aria-errormessage\" | \"aria-expanded\" | \"aria-flowto\" | \"aria-grabbed\" | \"aria-haspopup\" | \"aria-invalid\" | \"aria-keyshortcuts\" | \"aria-level\" | \"aria-modal\" | \"aria-multiline\" | \"aria-multiselectable\" | \"aria-orientation\" | \"aria-owns\" | \"aria-placeholder\" | \"aria-posinset\" | \"aria-pressed\" | \"aria-readonly\" | \"aria-relevant\" | \"aria-required\" | \"aria-roledescription\" | \"aria-rowcount\" | \"aria-rowindex\" | \"aria-rowspan\" | \"aria-selected\" | \"aria-setsize\" | \"aria-sort\" | \"aria-valuemax\" | \"aria-valuemin\" | \"aria-valuenow\" | \"aria-valuetext\" | \"dangerouslySetInnerHTML\" | \"onCopy\" | \"onCopyCapture\" | \"onCut\" | \"onCutCapture\" | \"onPaste\" | \"onPasteCapture\" | \"onCompositionEnd\" | \"onCompositionEndCapture\" | \"onCompositionStart\" | \"onCompositionStartCapture\" | \"onCompositionUpdate\" | \"onCompositionUpdateCapture\" | \"onFocusCapture\" | \"onBlurCapture\" | \"onChangeCapture\" | \"onBeforeInput\" | \"onBeforeInputCapture\" | \"onInput\" | \"onInputCapture\" | \"onReset\" | \"onResetCapture\" | \"onSubmit\" | \"onSubmitCapture\" | \"onInvalid\" | \"onInvalidCapture\" | \"onLoad\" | \"onLoadCapture\" | \"onError\" | \"onErrorCapture\" | \"onKeyDown\" | \"onKeyDownCapture\" | \"onKeyPress\" | \"onKeyPressCapture\" | \"onKeyUp\" | \"onKeyUpCapture\" | \"onAbort\" | \"onAbortCapture\" | \"onCanPlay\" | \"onCanPlayCapture\" | \"onCanPlayThrough\" | \"onCanPlayThroughCapture\" | \"onDurationChange\" | \"onDurationChangeCapture\" | \"onEmptied\" | \"onEmptiedCapture\" | \"onEncrypted\" | \"onEncryptedCapture\" | \"onEnded\" | \"onEndedCapture\" | \"onLoadedData\" | \"onLoadedDataCapture\" | \"onLoadedMetadata\" | \"onLoadedMetadataCapture\" | \"onLoadStart\" | \"onLoadStartCapture\" | \"onPause\" | \"onPauseCapture\" | \"onPlay\" | \"onPlayCapture\" | \"onPlaying\" | \"onPlayingCapture\" | \"onProgress\" | \"onProgressCapture\" | \"onRateChange\" | \"onRateChangeCapture\" | \"onResize\" | \"onResizeCapture\" | \"onSeeked\" | \"onSeekedCapture\" | \"onSeeking\" | \"onSeekingCapture\" | \"onStalled\" | \"onStalledCapture\" | \"onSuspend\" | \"onSuspendCapture\" | \"onTimeUpdate\" | \"onTimeUpdateCapture\" | \"onVolumeChange\" | \"onVolumeChangeCapture\" | \"onWaiting\" | \"onWaitingCapture\" | \"onAuxClick\" | \"onAuxClickCapture\" | \"onClickCapture\" | \"onContextMenu\" | \"onContextMenuCapture\" | \"onDoubleClick\" | \"onDoubleClickCapture\" | \"onDrag\" | \"onDragCapture\" | \"onDragEnd\" | \"onDragEndCapture\" | \"onDragEnter\" | \"onDragEnterCapture\" | \"onDragExit\" | \"onDragExitCapture\" | \"onDragLeave\" | \"onDragLeaveCapture\" | \"onDragOver\" | \"onDragOverCapture\" | \"onDragStart\" | \"onDragStartCapture\" | \"onDrop\" | \"onDropCapture\" | \"onMouseDown\" | \"onMouseDownCapture\" | \"onMouseEnter\" | \"onMouseLeave\" | \"onMouseMove\" | \"onMouseMoveCapture\" | \"onMouseOut\" | \"onMouseOutCapture\" | \"onMouseOver\" | \"onMouseOverCapture\" | \"onMouseUp\" | \"onMouseUpCapture\" | \"onSelectCapture\" | \"onTouchCancel\" | \"onTouchCancelCapture\" | \"onTouchEnd\" | \"onTouchEndCapture\" | \"onTouchMove\" | \"onTouchMoveCapture\" | \"onTouchStart\" | \"onTouchStartCapture\" | \"onPointerDown\" | \"onPointerDownCapture\" | \"onPointerMove\" | \"onPointerMoveCapture\" | \"onPointerUp\" | \"onPointerUpCapture\" | \"onPointerCancel\" | \"onPointerCancelCapture\" | \"onPointerEnter\" | \"onPointerEnterCapture\" | \"onPointerLeave\" | \"onPointerLeaveCapture\" | \"onPointerOver\" | \"onPointerOverCapture\" | \"onPointerOut\" | \"onPointerOutCapture\" | \"onGotPointerCapture\" | \"onGotPointerCaptureCapture\" | \"onLostPointerCapture\" | \"onLostPointerCaptureCapture\" | \"onScroll\" | \"onScrollCapture\" | \"onWheel\" | \"onWheelCapture\" | \"onAnimationStart\" | \"onAnimationStartCapture\" | \"onAnimationEnd\" | \"onAnimationEndCapture\" | \"onAnimationIteration\" | \"onAnimationIterationCapture\" | \"onTransitionEnd\" | \"onTransitionEndCapture\"> & Omit<InputAttributes, \"prefix\" | \"suffix\" | \"ref\" | \"value\" | \"type\" | \"defaultValue\" | \"onFocus\" | \"onBlur\" | \"thousandSeparator\" | \"decimalSeparator\" | \"decimalScale\" | \"fixedDecimalScale\" | \"allowNegative\" | \"allowLeadingZeros\" | \"onChange\" | \"inputMode\" | \"onKeyDown\" | \"onMouseUp\" | \"displayType\" | \"renderText\" | \"getInputRef\" | \"valueIsNumericString\" | \"onValueChange\" | \"isAllowed\" | \"isCharacterSame\" | \"allowedDecimalSeparators\" | \"thousandsGroupStyle\"> & { customInput?: ComponentType<InputAttributes>; } & { mode: \"strict\" | \"none\"; onValueChange?: (e: NumberFormatValues) => void; }",
           "references": {
             "ExtendedNumericPropsType": {
               "location": "global"

package/dist/collection/components/molecules/popconfirm/popconfirm-box.css

@@ -160,18 +160,19 @@
   font-weight: 400;
   font-size: 10px;
   line-height: calc(10px + 8px);
-  box-shadow: 0 4px 12px 2px rgba(17, 24, 38, 0.1);
-  border-radius: 4px;
+  box-shadow: var(--bcm-ui-box-shadow-4);
+  border-radius: var(--bcm-ui-radius);
   position: absolute;
   box-sizing: border-box;
   background-color: #FFFFFF;
   border: 1px solid #FFFFFF;
+  color: var(--bcm-ui-color-text-default);
   z-index: -99999;
   overflow: hidden;
   visibility: hidden;
-  width: 230px;
+  width: 256px;
   filter: drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25));
-  padding: 8px 16px;
+  padding: var(--bcm-ui-spacing-4);
 }
 .bcm-popconfirm-box .bcm-pop-box .bcm-pop-content {
   display: flex;
@@ -179,8 +180,20 @@
   align-items: flex-start;
 }
 .bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-icon {
-  margin-right: 8px;
+  margin-right: var(--bcm-ui-spacing-2-5);
   min-width: 16px;
+  color: var(--bcm-ui-color-text-default);
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
+}
+.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-icon.error {
+  color: var(--bcm-ui-color-text-error);
+}
+.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-icon.warning {
+  color: var(--bcm-ui-color-text-warning);
+}
+.bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-icon.info {
+  color: var(--bcm-ui-color-text-primary);
 }
 .bcm-popconfirm-box .bcm-pop-box .bcm-pop-content-text {
   display: flex;
@@ -188,11 +201,14 @@
   align-items: center;
   text-align: left;
   padding-top: 1px;
+  color: var(--bcm-ui-color-text-default);
+  font-size: var(--bcm-ui-font-size-4);
+  line-height: var(--bcm-ui-line-height-4);
 }
 .bcm-popconfirm-box .bcm-pop-box .bcm-pop-buttons {
   display: flex;
   justify-content: flex-end;
-  margin-top: 8px;
+  margin-top: var(--bcm-ui-spacing-6);
 }
 .bcm-popconfirm-box .bcm-pop-box .bcm-pop-buttons bcm-button:first-child {
   margin-right: 8px;

package/dist/collection/components/molecules/popconfirm/popconfirm-box.js

@@ -4,14 +4,9 @@
  */
 import { h, Host } from '@stencil/core';
 import cs from 'classnames';
-import { ColorHelper } from '../../../helper/color-helper';
 import { Generate } from '../../../helper/generate';
 import { StringHelper } from '../../../helper/string-helper';
 import { setPosition } from '../../../utils/popover-placement';
-const statuses = {
-  error: ['fal fa-times-circle', 'red-6'],
-  warning: ['fal fa-exclamation-circle', 'warmyellow-6'],
-};
 export class BcmPopconfirmBox {
   constructor() {
     this._id = Generate.UID();
@@ -84,12 +79,19 @@ export class BcmPopconfirmBox {
   }
   render() {
     const { message, cancelText, okeyText, open, placement_string, status } = this;
-    const statusies = statuses[status];
+    // const statuses = {
+    //     error: ['fa-solid fa-circle-xmark', 'red-6'],
+    //     warning: ['fa-solid fa-triangle-exclamation', 'warmyellow-6'],
+    // }
     const boxClasses = cs('bcm-pop-box');
     const hostClasses = cs('bcm-popconfirm-box', placement_string, {
       'bcm-pop-open': open,
     });
-    return (h(Host, { class: hostClasses }, h("div", { class: boxClasses }, h("div", { class: "bcm-pop-content" }, h("div", { class: "bcm-pop-content-icon size-3", style: { color: ColorHelper.convertColorToHex(statusies[1]) } }, h("bcm-icon", { icon: statusies[0] })), h("div", { class: "bcm-pop-content-text" }, h("bcm-text", { scale: "size-2", innerHTML: message }))), h("div", { class: "bcm-pop-buttons" }, h("bcm-button", { size: "small", onClick: () => this.handleCancel(), outline: true }, cancelText), h("bcm-button", { size: "small", onClick: () => this.handleConfirm() }, okeyText)))));
+    return (h(Host, { class: hostClasses }, h("div", { class: boxClasses }, h("div", { class: "bcm-pop-content" }, h("div", { class: cs('bcm-pop-content-icon', status) }, h("i", { class: cs({
+        'fa-solid fa-circle-xmark': status === 'error',
+        'fa-solid fa-triangle-exclamation': status === 'warning',
+        'fa-solid fa-info-circle': status === 'info',
+      }) })), h("div", { class: "bcm-pop-content-text" }, message)), h("div", { class: "bcm-pop-buttons" }, h("bcm-button", { size: "small", onClick: () => this.handleCancel(), outline: true }, cancelText), h("bcm-button", { size: "small", onClick: () => this.handleConfirm() }, okeyText)))));
   }
   static get is() { return "bcm-popconfirm-box"; }
   static get originalStyleUrls() {
@@ -160,8 +162,8 @@ export class BcmPopconfirmBox {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "'warning' | 'error'",
-          "resolved": "\"error\" | \"warning\"",
+          "original": "'warning' | 'error' | 'info'",
+          "resolved": "\"error\" | \"info\" | \"warning\"",
           "references": {}
         },
         "required": false,