bromcom-ui 2.8.1 → 2.9.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bromcom-ui/bromcom-ui.esm.js +1 -1
- package/dist/bromcom-ui/{p-4899fba4.entry.js → p-0906c9b4.entry.js} +1 -1
- package/dist/bromcom-ui/{p-e7028542.entry.js → p-0ee4e283.entry.js} +1 -1
- package/dist/bromcom-ui/{p-4dac52f8.entry.js → p-0fdbbbe8.entry.js} +1 -1
- package/dist/bromcom-ui/p-14378828.entry.js +5 -0
- package/dist/bromcom-ui/{p-251bfa4c.entry.js → p-15fa3329.entry.js} +1 -1
- package/dist/bromcom-ui/{p-9c9babdd.entry.js → p-1c5a2111.entry.js} +1 -1
- package/dist/bromcom-ui/{p-e0618f5d.entry.js → p-20ac20d4.entry.js} +1 -1
- package/dist/bromcom-ui/p-24aefda6.js +1 -1
- package/dist/bromcom-ui/p-2cb4a196.entry.js +5 -0
- package/dist/bromcom-ui/p-2ea24a6e.js +1 -1
- package/dist/bromcom-ui/{p-0ee1ff83.entry.js → p-344a4674.entry.js} +1 -1
- package/dist/bromcom-ui/p-3ad545f0.entry.js +5 -0
- package/dist/bromcom-ui/{p-90894817.entry.js → p-40a5e4fc.entry.js} +1 -1
- package/dist/bromcom-ui/p-440afdfa.entry.js +5 -0
- package/dist/bromcom-ui/{p-94293d46.entry.js → p-4b34b3f9.entry.js} +1 -1
- package/dist/bromcom-ui/{p-a3aa9b2a.entry.js → p-55001c80.entry.js} +1 -1
- package/dist/bromcom-ui/{p-625af6e2.entry.js → p-5f288af5.entry.js} +1 -1
- package/dist/bromcom-ui/{p-274465b7.entry.js → p-70b428e8.entry.js} +1 -1
- package/dist/bromcom-ui/p-89b21290.entry.js +5 -0
- package/dist/bromcom-ui/p-8d0ca8c2.js +1 -1
- package/dist/bromcom-ui/{p-e82340a2.entry.js → p-9b10d955.entry.js} +1 -1
- package/dist/bromcom-ui/{p-47b69111.entry.js → p-9c7e9b5d.entry.js} +1 -1
- package/dist/bromcom-ui/p-a0a3fd94.entry.js +5 -0
- package/dist/bromcom-ui/{p-f4f4e410.entry.js → p-a2046742.entry.js} +1 -1
- package/dist/bromcom-ui/p-a429e85b.js +1 -1
- package/dist/bromcom-ui/p-a97ee69d.entry.js +19 -0
- package/dist/bromcom-ui/{p-2fc1ab9a.entry.js → p-ab55def1.entry.js} +1 -1
- package/dist/bromcom-ui/p-b60bcecf.js +1 -1
- package/dist/bromcom-ui/{p-a8a4460a.entry.js → p-c9b10de5.entry.js} +1 -1
- package/dist/bromcom-ui/{p-160ef457.entry.js → p-cad8f786.entry.js} +1 -1
- package/dist/bromcom-ui/{p-140b10d1.entry.js → p-e008411a.entry.js} +1 -1
- package/dist/bromcom-ui/p-e0f440b4.js +1 -1
- package/dist/bromcom-ui/{p-c15e0e77.entry.js → p-e3cafc0d.entry.js} +1 -1
- package/dist/bromcom-ui/{p-0d693b8b.entry.js → p-e606c42b.entry.js} +1 -1
- package/dist/bromcom-ui/{p-86b8672d.entry.js → p-e66821e5.entry.js} +1 -1
- package/dist/cjs/{bcm-634604e3.js → bcm-ab921827.js} +4 -4
- package/dist/cjs/bcm-alert.cjs.entry.js +2 -2
- package/dist/cjs/{bcm-colorful_2.cjs.entry.js → bcm-avatar_15.cjs.entry.js} +6232 -149
- package/dist/cjs/bcm-button-group.cjs.entry.js +5 -5
- package/dist/cjs/bcm-card.cjs.entry.js +3 -3
- package/dist/cjs/bcm-checkbox-group.cjs.entry.js +416 -0
- package/dist/cjs/bcm-checkbox-lite_9.cjs.entry.js +4 -4
- package/dist/cjs/bcm-checkbox_2.cjs.entry.js +193 -0
- package/dist/cjs/bcm-color-input.cjs.entry.js +2 -2
- package/dist/cjs/bcm-date-picker.cjs.entry.js +2 -2
- package/dist/cjs/bcm-datetime-picker.cjs.entry.js +7 -7
- package/dist/cjs/bcm-drawer.cjs.entry.js +4 -4
- package/dist/cjs/bcm-dropdown.cjs.entry.js +4 -4
- package/dist/cjs/bcm-expansion-panel.cjs.entry.js +2 -2
- package/dist/cjs/bcm-form-2.cjs.entry.js +4 -3
- package/dist/cjs/bcm-item.cjs.entry.js +2 -2
- package/dist/cjs/bcm-items.cjs.entry.js +2 -2
- package/dist/cjs/bcm-link.cjs.entry.js +3 -3
- package/dist/cjs/bcm-menu.cjs.entry.js +4 -4
- package/dist/cjs/bcm-modal-2-footer.cjs.entry.js +2 -2
- package/dist/cjs/bcm-modal-2-header.cjs.entry.js +2 -2
- package/dist/cjs/bcm-modal-2.cjs.entry.js +3 -3
- package/dist/cjs/bcm-modal.cjs.entry.js +5 -5
- package/dist/cjs/bcm-popconfirm-box.cjs.entry.js +3 -3
- package/dist/cjs/bcm-popconfirm.cjs.entry.js +3 -3
- package/dist/cjs/bcm-popover.cjs.entry.js +5 -5
- package/dist/cjs/bcm-progress.cjs.entry.js +2 -2
- package/dist/cjs/bcm-radio-group.cjs.entry.js +6 -6
- package/dist/cjs/bcm-radio.cjs.entry.js +9 -9
- package/dist/cjs/bcm-range.cjs.entry.js +4 -4
- package/dist/cjs/bcm-select.cjs.entry.js +2 -2
- package/dist/cjs/bcm-stepper.cjs.entry.js +4 -4
- package/dist/cjs/bcm-switch.cjs.entry.js +7 -7
- package/dist/cjs/bcm-tab-group.cjs.entry.js +3 -3
- package/dist/cjs/bcm-tab-item-header.cjs.entry.js +6 -6
- package/dist/cjs/bcm-tab-item.cjs.entry.js +2 -2
- package/dist/cjs/bcm-tag.cjs.entry.js +12 -12
- package/dist/cjs/bcm-text.cjs.entry.js +3 -3
- package/dist/cjs/bcm-textarea.cjs.entry.js +5 -5
- package/dist/cjs/bcm-time-picker.cjs.entry.js +2 -2
- package/dist/cjs/bcm-toast.cjs.entry.js +9 -9
- package/dist/cjs/bromcom-ui.cjs.js +1 -1
- package/dist/cjs/{floating-ui-74eb26d6.js → floating-ui-c9fc2202.js} +2 -2
- package/dist/cjs/{input-template-4617f909.js → input-template-1441e468.js} +5 -5
- package/dist/cjs/{label-template-cc69bc21.js → label-template-4d5f99a5.js} +3 -3
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/old-bcm-popover-box.cjs.entry.js +4 -4
- package/dist/cjs/old-bcm-popover.cjs.entry.js +3 -3
- package/dist/cjs/{popover-placement-3c8f3a72.js → popover-placement-ccb40073.js} +1 -1
- package/dist/cjs/{slot-template-3e59d7d8.js → slot-template-d70ea082.js} +1 -1
- package/dist/cjs/{string-helper-45cffee0.js → string-helper-d681e5c7.js} +2 -2
- package/dist/cjs/{tooltip-helper-2e8b879b.js → tooltip-helper-235b26ea.js} +6 -6
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/atoms/chip/chip-group.js +292 -0
- package/dist/collection/components/atoms/chip/chip.js +107 -26
- package/dist/collection/components/organism/form/form.js +1 -0
- package/dist/collection/components/organism/form-2/bcm-form-components.js +1 -0
- package/dist/collection/components/organism/list/list.css +3 -0
- package/dist/components/bcm-chip-group.d.ts +11 -0
- package/dist/components/bcm-chip-group.js +174 -0
- package/dist/components/bcm-chip.js +1 -100
- package/dist/components/bcm-form-2.js +1 -0
- package/dist/components/bcm-form.js +1 -0
- package/dist/components/bcm-list.js +1 -1702
- package/dist/{esm/bcm-chip.entry.js → components/chip.js} +110 -33
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/{esm/bcm-list.entry.js → components/list.js} +136 -31
- package/dist/esm/bcm-9f50af9c.js +1 -1
- package/dist/esm/{bcm-colorful_2.entry.js → bcm-avatar_15.entry.js} +6219 -149
- package/dist/esm/bcm-button-group.entry.js +1 -1
- package/dist/esm/bcm-checkbox-group.entry.js +412 -0
- package/dist/esm/bcm-checkbox-lite_9.entry.js +1 -1
- package/dist/esm/bcm-checkbox_2.entry.js +188 -0
- package/dist/esm/bcm-date-picker.entry.js +1 -1
- package/dist/esm/bcm-datetime-picker.entry.js +1 -1
- package/dist/esm/bcm-drawer.entry.js +1 -1
- package/dist/esm/bcm-dropdown.entry.js +1 -1
- package/dist/esm/bcm-form-2.entry.js +2 -1
- package/dist/esm/bcm-item.entry.js +1 -1
- package/dist/esm/bcm-link.entry.js +1 -1
- package/dist/esm/bcm-modal-2.entry.js +1 -1
- package/dist/esm/bcm-modal.entry.js +1 -1
- package/dist/esm/bcm-popconfirm.entry.js +1 -1
- package/dist/esm/bcm-popover.entry.js +1 -1
- package/dist/esm/bcm-progress.entry.js +1 -1
- package/dist/esm/bcm-radio-group.entry.js +1 -1
- package/dist/esm/bcm-radio.entry.js +1 -1
- package/dist/esm/bcm-range.entry.js +1 -1
- package/dist/esm/bcm-stepper.entry.js +1 -1
- package/dist/esm/bcm-switch.entry.js +1 -1
- package/dist/esm/bcm-tab-group.entry.js +1 -1
- package/dist/esm/bcm-tab-item-header.entry.js +1 -1
- package/dist/esm/bcm-tag.entry.js +1 -1
- package/dist/esm/bcm-textarea.entry.js +1 -1
- package/dist/esm/bcm-time-picker.entry.js +1 -1
- package/dist/esm/bcm-toast.entry.js +1 -1
- package/dist/esm/bromcom-ui.js +1 -1
- package/dist/esm/floating-ui-e7341329.js +1 -1
- package/dist/esm/input-template-e1df6efd.js +1 -1
- package/dist/esm/label-template-d74fe788.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/old-bcm-popover.entry.js +1 -1
- package/dist/esm/string-helper-6bd24967.js +1 -1
- package/dist/esm/tooltip-helper-10b64c23.js +1 -1
- package/dist/types/components/atoms/chip/chip-group.d.ts +22 -0
- package/dist/types/components/atoms/chip/chip.d.ts +18 -13
- package/dist/types/components.d.ts +47 -4
- package/package.json +1 -1
- package/dist/bromcom-ui/p-111c4b6a.entry.js +0 -5
- package/dist/bromcom-ui/p-121eca04.entry.js +0 -5
- package/dist/bromcom-ui/p-1eabd5dc.js +0 -10
- package/dist/bromcom-ui/p-55837df1.entry.js +0 -5
- package/dist/bromcom-ui/p-8c62e1ca.entry.js +0 -5
- package/dist/bromcom-ui/p-9d23288e.entry.js +0 -5
- package/dist/bromcom-ui/p-b4f40047.entry.js +0 -5
- package/dist/bromcom-ui/p-b5ba17a4.entry.js +0 -13
- package/dist/bromcom-ui/p-b85bdadc.entry.js +0 -5
- package/dist/bromcom-ui/p-cbb3c1f0.entry.js +0 -5
- package/dist/bromcom-ui/p-d155cf69.entry.js +0 -5
- package/dist/bromcom-ui/p-f3d550ed.entry.js +0 -5
- package/dist/bromcom-ui/p-fdc8effc.entry.js +0 -5
- package/dist/cjs/bcm-avatar_2.cjs.entry.js +0 -139
- package/dist/cjs/bcm-button_7.cjs.entry.js +0 -1521
- package/dist/cjs/bcm-chip.cjs.entry.js +0 -74
- package/dist/cjs/bcm-input.cjs.entry.js +0 -370
- package/dist/cjs/bcm-list.cjs.entry.js +0 -1607
- package/dist/cjs/bcm-rc-overflow_2.cjs.entry.js +0 -2443
- package/dist/cjs/bcm-typography.cjs.entry.js +0 -21
- package/dist/cjs/index-906fb4e5.js +0 -540
- package/dist/esm/bcm-avatar_2.entry.js +0 -134
- package/dist/esm/bcm-button_7.entry.js +0 -1511
- package/dist/esm/bcm-input.entry.js +0 -366
- package/dist/esm/bcm-rc-overflow_2.entry.js +0 -2438
- package/dist/esm/bcm-typography.entry.js +0 -17
- package/dist/esm/index-6310a048.js +0 -537
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Built with Stencil
|
|
3
|
-
* Copyright (c) Bromcom.
|
|
4
|
-
*/
|
|
5
|
-
import{r as i,h as e,H as t,g as n}from"./p-da1055cb.js";import{c as s}from"./p-d65a1e21.js";import{B as a}from"./p-a429e85b.js";import"./p-6f56f8ca.js";const o=class{constructor(e){i(this,e),this.hidden=!1,this.href=void 0,this.target=void 0,this.icon=void 0,this.disabled=!1,this.iconPosition=a.IconPosition.prefix}handleOnClick(i){this.disabled&&(i.preventDefault(),i.stopPropagation())}linkIsExternal(i){return i&&!(!i.startsWith("http")&&!i.startsWith("//"))}render(){const{href:i,icon:n,hidden:o,target:l,iconPosition:r,disabled:p}=this,c=s("bcm-link",{disabled:p,hidden:o}),h=s("bcm-link__anchor",r,{suffix:this.linkIsExternal(i)});return e(t,{disabled:p,class:c},e(i?"a":"span",{class:h,href:i,target:this.linkIsExternal(i)?"_blank":l},n&&r===a.IconPosition.prefix&&e("bcm-icon",{class:"prefix-icon",icon:n}),e("slot",null),this.linkIsExternal(i)&&e("bcm-icon",{class:"suffix-icon",icon:"far fa-external-link-alt"})))}get el(){return n(this)}};o.style='@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}.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}*{box-sizing:border-box}.bcm-link{font-family:"Inter", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline;color:var(--bcm-new-ds-color-blue-500)}.bcm-link.hidden{display:none}.bcm-link.disabled{pointer-events:none;opacity:0.5;cursor:not-allowed}.bcm-link__anchor{display:inline-flex;align-items:baseline;font-size:inherit;color:inherit}.bcm-link__anchor.prefix .prefix-icon{margin-right:4px}.bcm-link__anchor.suffix .suffix-icon{margin-left:4px}.bcm-link__anchor:hover,.bcm-link__anchor:focus,.bcm-link__anchor:active,.bcm-link__anchor:focus-visible{outline:none}.bcm-link__anchor:hover{color:var(--bcm-new-ds-color-blue-600)}.bcm-link__anchor:active{color:var(--bcm-new-ds-color-blue-700)}.bcm-link__anchor:focus-visible{color:var(--bcm-new-ds-color-blue-800)}';export{o as bcm_link}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Built with Stencil
|
|
3
|
-
* Copyright (c) Bromcom.
|
|
4
|
-
*/
|
|
5
|
-
import{r as e,h as t,H as i,g as a}from"./p-da1055cb.js";import{C as s}from"./p-843905c8.js";import"./p-626a65e9.js";import{G as r}from"./p-d3cb8d25.js";import{N as o}from"./p-80a43b79.js";import"./p-8d0ca8c2.js";import"./p-b94fa326.js";import"./p-7e44e6b5.js";import{a as p}from"./p-a429e85b.js";import{c as n}from"./p-d65a1e21.js";import{S as c}from"./p-79fd816c.js";import"./p-436364c8.js";import"./p-8c018ae0.js";import"./p-4aa0e6b1.js";import"./p-6f56f8ca.js";const l=class{constructor(t){e(this,t),this._id=r.UID(),this.hidden=!1,this.image=void 0,this.name=void 0,this.alt=void 0,this.shape=p.Shape.ellipse,this.size=p.Size.medium,this.color=void 0,this.status=void 0,this.isFallback=!1}componentWillLoad(){this.name=this.name&&this.name.trim()||""}handleError(){this.isFallback=!0}getCustomSizes(e){return Math.round(parseInt(e)/3)}getFirstLetters(e){const t=e.split(" ");return 1===t.length?t[0].substring(0,2):t[0].charAt(0)+t[t.length-1].charAt(0)}setStyleVariables(){const{size:e}=this;let{color:t}=this;!t&&(t="slate");let i=o.toNumber(e),a=Math.round(parseInt(i)/3);const r="--bcm-avatar";return{[`${r}-color`]:s.dsColor(`${t}-600`),[`${r}-background-color`]:s.dsColor(`${t}-100`),[`${r}-height`]:`${i}px`,[`${r}-font-size`]:`${a}px`}}render(){const{image:e,name:a,alt:s,hidden:r,shape:o,size:c,status:l}=this,h=!Object.keys(p.BaseSize).includes(c),x=n("bcm-avatar",`bcm-avatar__shape-${o}`,`bcm-avatar__size-${h?"custom":c}`,{hidden:r,"bcm-avatar__status":!!l}),m=()=>t("bcm-icon",{icon:"fas fa-user"});return t(i,{class:x,style:this.setStyleVariables()},t("span",{hidden:!0},t("slot",null)),this.isFallback?this.name?this.getFirstLetters(this.name):m():e?t("img",{onError:()=>this.handleError(),src:e,alt:s}):a?this.getFirstLetters(a):m(),l&&t("bcm-badge",{status:l}))}get el(){return a(this)}};l.style='@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}.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}*{box-sizing:border-box}.bcm-avatar{--bcm-avatar-color:var(--bcm-new-ds-color-slate-600);--bcm-avatar-background-color:var(--bcm-new-ds-color-slate-100);--prefix-height:40px;--prefix-font-size:font-size(2);font-family:"Inter", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;background-color:var(--bcm-avatar-background-color);color:var(--bcm-avatar-color);text-transform:uppercase}.bcm-avatar.hidden{display:none}.bcm-avatar img{width:100%;height:100%}.bcm-avatar__shape-ellipse,.bcm-avatar__shape-ellipse>img{border-radius:100px}.bcm-avatar__shape-square,.bcm-avatar__shape-square>img{border-radius:4px}.bcm-avatar__shape-ellipse .bcm-badge{top:0px;right:0px}.bcm-avatar__shape-square .bcm-badge{top:-2px;right:-2px}.bcm-avatar__size-small{font-size:10px;line-height:calc(10px + 8px);height:24px;width:24px}.bcm-avatar__size-medium{font-size:12px;line-height:calc(12px + 8px);height:32px;width:32px}.bcm-avatar__size-large{font-size:14px;line-height:calc(14px + 8px);height:40px;width:40px}.bcm-avatar__size-custom{font-size:var(--bcm-avatar-font-size);line-height:calc(var(--bcm-avatar-font-size) + 8px);height:var(--bcm-avatar-height);width:var(--bcm-avatar-height)}.bcm-avatar__status{position:relative}.bcm-avatar__status .bcm-badge{position:absolute}';const h=class{constructor(t){e(this,t),this._id=r.UID(),this.hidden=!1,this.blink=!1,this.value=void 0,this.color=void 0,this.size=p.Size.medium,this.status=void 0,this._slot=void 0}setStyleVariables(){const{status:e,value:t}=this;let{color:i}=this;e&&(i={info:"blue",error:"red",warning:"amber",success:"emerald",default:"slate"}[e]),!i&&(i="slate");const a="--bcm-badge",r=t&&t.length>1?"8":"4";return{[`${a}-color`]:s.reverseColor(s.dsColor(`${i}`)),[`${a}-background-color`]:s.dsColor(`${i}`),[`${a}-spacing`]:`${r}px`}}render(){let{blink:e,value:a,size:s,_slot:r,hidden:o}=this;const p=n("bcm-badge__dot","bcm-badge__dot-size-"+s,{"bcm-badge__dot-blink":e}),l=n("bcm-badge",{hidden:o});return t(i,{class:l,style:this.setStyleVariables()},t("span",{hidden:!0},t("slot",null)),t("div",{class:p},!!a&&t("span",{class:"bcm-badge__dot-text"},a)),t(c,{value:r}))}get el(){return a(this)}};h.style='@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}.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}*{box-sizing:border-box}.bcm-badge{--bcm-badge-color:var(--bcm-new-ds-color-white);--bcm-badge-background-color:var(--bcm-new-ds-color-slate-400);--bcm-badge-spacing:4px;font-family:"Inter", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:4px}.bcm-badge.hidden{display:none}.bcm-badge span:empty{display:none}.bcm-badge__dot{color:var(--bcm-badge-color);background-color:var(--bcm-badge-background-color);display:inline-block;border-radius:100px;position:relative}.bcm-badge__dot-text{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;padding:0 var(--bcm-badge-spacing);z-index:2;color:var(--bcm-badge-color)}.bcm-badge__dot-size-small{font-size:10px;line-height:calc(10px + 8px);min-width:6px;min-height:6px}.bcm-badge__dot-size-small .bcm-badge__dot-text{min-width:calc(10px + 8px)}.bcm-badge__dot-size-medium{font-size:12px;line-height:calc(12px + 8px);min-width:8px;min-height:8px}.bcm-badge__dot-size-medium .bcm-badge__dot-text{min-width:calc(12px + 8px)}.bcm-badge__dot-size-large{font-size:14px;line-height:calc(14px + 8px);min-width:10px;min-height:10px}.bcm-badge__dot-size-large .bcm-badge__dot-text{min-width:calc(14px + 8px)}.bcm-badge__dot-blink{position:relative;z-index:1}.bcm-badge__dot-blink:after{content:"";position:absolute;z-index:-1;top:0;left:0;background:var(--bcm-badge-background-color);border-radius:100px;opacity:0.7;box-shadow:0 0 0 0 rgba(0, 0, 0, 0);transform:scale(1);width:100%;height:100%}.bcm-badge__dot:after{background-color:var(--bcm-badge-background-color);animation:badge-pulse 2s infinite}@keyframes badge-pulse{0%{transform:scale(0.95);box-shadow:0 0 0 0 var(--bcm-badge-background-color)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}';export{l as bcm_avatar,h as bcm_badge}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Built with Stencil
|
|
3
|
-
* Copyright (c) Bromcom.
|
|
4
|
-
*/
|
|
5
|
-
import{r as t,c as e,f as i,h as s,H as a,g as o}from"./p-da1055cb.js";import{I as n}from"./p-c23b6240.js";import{G as r,s as h}from"./p-d3cb8d25.js";import{S as p}from"./p-8d0ca8c2.js";import{B as c}from"./p-a429e85b.js";import"./p-4aa0e6b1.js";import"./p-6f56f8ca.js";const l=["BCM-INPUT","BCM-TEXTAREA","BCM-SWITCH","BCM-CHECKBOX","BCM-RADIO-GROUP","BCM-CHECKBOX-GROUP","BCM-RANGE","BCM-FORM","BCM-FORM-GROUP","BCM-LIST","BCM-COLORPICKER","BCM-DATE-PICKER","BCM-TIME-PICKER","BCM-DATETIME-PICKER","BCM-SELECT","BCM-LISTBOX"];const x=class{constructor(i){t(this,i),this.bcmForm=e(this,"bcm-form",7),this.isLoad=!1,this.formData={},this.formObj=new Map,this._id=r.UID(),this.validation=!1}componentDidLoad(){this.isLoad=!0,i(this)}componentIsValid(t){if(!t.hidden){this.checkIsGroup(t);const e=["bcm-checkbox","bcm-switch"].includes(p.lowercase(t.tagName))?0==t.value:p.isNullOrEmpty(t.value);t.required&&(e?(t.captionError=c.FormErrorMessages.required,t.captionType="error",this.formObj.set(t.id,{name:t.name,valid:!1,errorDetails:t.captionError})):(t.captionError=null,t.captionType="default",this.formObj.delete(t.id)))}}isGroup(t){return["bcm-checkbox-group"].includes(p.lowercase(t.tagName))}checkIsGroup(t){if(this.isGroup(t))for(let e of Array.from(t.querySelectorAll("bcm-checkbox")))e&&this.componentIsValid(e)}changeCheckboxGroup(t){const e=t.target,{changed:i}=t.detail,s=Array.from(e.querySelectorAll("bcm-checkbox"));for(let t of s)t.id==i.element.id&&(t.value=i.event.value,this.componentIsValid(t))}bcmComponentList(){return h((()=>Array.from(this.el.querySelectorAll("*")).filter((t=>l.includes(t.tagName)&&(!t["s-hn"]||"BCM-FORM-2"==t["s-hn"]))).filter(Boolean)),[])}formResponse(){const t={formData:this.formData,isValid:0==this.formObj.size,errorDetails:Object.assign({},this.formObj.size>0&&Array.from(this.formObj).map((([t,e])=>({[e.name]:e.errorDetails})))),message:0==this.formObj.size?"":"Please fill in all inputs"};return this.bcmForm.emit(t),t}async setMethodType(t){const{isLoad:e,validation:i}=this;if(e)for(const e of this.bcmComponentList())try{await e[t](),"setClear"==t&&i&&this.componentIsValid(e)}catch(i){console.error(e.nodeName,t,i)}return Promise.resolve()}async submit(){const{isLoad:t,validation:e}=this;if(t)for(const t of this.bcmComponentList()){const{name:i,value:s}=t;this.formData[i]=p.isNullOrEmpty(s)?null:s,e&&this.componentIsValid(t)}return Promise.resolve(this.formResponse())}async set(t){var e,i,s;if(this.isLoad&&t&&(null===(e=this.bcmComponentList())||void 0===e?void 0:e.length)>0)for(let e of Object.keys(t)){const a=null!==(s=null===(i=this.bcmComponentList())||void 0===i?void 0:i.find((t=>t.name==e)))&&void 0!==s?s:{};if(a)try{await a.set(t[e]),this.componentIsValid(a)}catch(t){console.warn("set: ",e,a.nodeName)}}}async get(){var t;let e={};if((null===(t=this.bcmComponentList())||void 0===t?void 0:t.length)>0)for(let t of this.bcmComponentList()){const i=await t.get();e=Object.assign(Object.assign({},e),{[t.name]:p.isNullOrEmpty(i)?null:i})}return Promise.resolve(e)}async resetCaption(){return Promise.resolve(await this.setMethodType("resetCaption"))}async setClear(){return this.formData={},this.formObj=new Map,Promise.resolve(await this.setMethodType("setClear"))}onChange(t){const{isLoad:e,validation:i}=this;if(e){const e=t.target,s=e&&e.tagName.toLowerCase().startsWith("bcm-");if(i&&s){if(this.isGroup(e))return this.changeCheckboxGroup(t);this.componentIsValid(e)}}}render(){return s(a,null,s("slot",null))}get el(){return o(this)}};(function(t,e,i,s){var a,o=arguments.length,n=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,s);else for(var r=t.length-1;r>=0;r--)(a=t[r])&&(n=(o<3?a(n):o>3?a(e,i,n):a(e,i))||n);o>3&&n&&Object.defineProperty(e,i,n)})([n()],x.prototype,"el",void 0),x.style='@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}';export{x as bcm_form_2}
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* Built with Stencil
|
|
3
|
-
* Copyright (c) Bromcom.
|
|
4
|
-
*/
|
|
5
|
-
'use strict';
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
8
|
-
|
|
9
|
-
const index = require('./index-ddfd6d8f.js');
|
|
10
|
-
const colorHelper = require('./color-helper-d6d2028b.js');
|
|
11
|
-
require('./datetime-helper-eaf4fadb.js');
|
|
12
|
-
const generate = require('./generate-21143214.js');
|
|
13
|
-
const numberHelper = require('./number-helper-08a7ff70.js');
|
|
14
|
-
require('./string-helper-45cffee0.js');
|
|
15
|
-
require('./validators-6a0077a8.js');
|
|
16
|
-
require('./element-dragger-a8562f82.js');
|
|
17
|
-
const bcm = require('./bcm-634604e3.js');
|
|
18
|
-
const index$1 = require('./index-fdbf5226.js');
|
|
19
|
-
const slotTemplate = require('./slot-template-3e59d7d8.js');
|
|
20
|
-
require('./colors-56282b00.js');
|
|
21
|
-
require('./utils-fc077139.js');
|
|
22
|
-
require('./colors-e1d142ad.js');
|
|
23
|
-
require('./_commonjsHelpers-bd20f4c0.js');
|
|
24
|
-
|
|
25
|
-
const avatarCss = "@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}.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}*{box-sizing:border-box}.bcm-avatar{--bcm-avatar-color:var(--bcm-new-ds-color-slate-600);--bcm-avatar-background-color:var(--bcm-new-ds-color-slate-100);--prefix-height:40px;--prefix-font-size:font-size(2);font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;background-color:var(--bcm-avatar-background-color);color:var(--bcm-avatar-color);text-transform:uppercase}.bcm-avatar.hidden{display:none}.bcm-avatar img{width:100%;height:100%}.bcm-avatar__shape-ellipse,.bcm-avatar__shape-ellipse>img{border-radius:100px}.bcm-avatar__shape-square,.bcm-avatar__shape-square>img{border-radius:4px}.bcm-avatar__shape-ellipse .bcm-badge{top:0px;right:0px}.bcm-avatar__shape-square .bcm-badge{top:-2px;right:-2px}.bcm-avatar__size-small{font-size:10px;line-height:calc(10px + 8px);height:24px;width:24px}.bcm-avatar__size-medium{font-size:12px;line-height:calc(12px + 8px);height:32px;width:32px}.bcm-avatar__size-large{font-size:14px;line-height:calc(14px + 8px);height:40px;width:40px}.bcm-avatar__size-custom{font-size:var(--bcm-avatar-font-size);line-height:calc(var(--bcm-avatar-font-size) + 8px);height:var(--bcm-avatar-height);width:var(--bcm-avatar-height)}.bcm-avatar__status{position:relative}.bcm-avatar__status .bcm-badge{position:absolute}";
|
|
26
|
-
|
|
27
|
-
const BcmAvatar = class {
|
|
28
|
-
constructor(hostRef) {
|
|
29
|
-
index.registerInstance(this, hostRef);
|
|
30
|
-
this._id = generate.Generate.UID();
|
|
31
|
-
this.hidden = false;
|
|
32
|
-
this.image = undefined;
|
|
33
|
-
this.name = undefined;
|
|
34
|
-
this.alt = undefined;
|
|
35
|
-
this.shape = bcm.Bcm$1.Shape.ellipse;
|
|
36
|
-
this.size = bcm.Bcm$1.Size.medium;
|
|
37
|
-
this.color = undefined;
|
|
38
|
-
this.status = undefined;
|
|
39
|
-
this.isFallback = false;
|
|
40
|
-
}
|
|
41
|
-
componentWillLoad() {
|
|
42
|
-
this.name = this.name && this.name.trim() || '';
|
|
43
|
-
}
|
|
44
|
-
handleError() {
|
|
45
|
-
this.isFallback = true;
|
|
46
|
-
}
|
|
47
|
-
getCustomSizes(customSize) {
|
|
48
|
-
return Math.round(parseInt(customSize) / 3);
|
|
49
|
-
}
|
|
50
|
-
getFirstLetters(name) {
|
|
51
|
-
const splitted = name.split(' ');
|
|
52
|
-
if (splitted.length === 1)
|
|
53
|
-
return splitted[0].substring(0, 2);
|
|
54
|
-
return splitted[0].charAt(0) + splitted[splitted.length - 1].charAt(0);
|
|
55
|
-
}
|
|
56
|
-
setStyleVariables() {
|
|
57
|
-
const { size } = this;
|
|
58
|
-
let { color } = this;
|
|
59
|
-
!color && (color = 'slate');
|
|
60
|
-
let height = numberHelper.NumberHelper.toNumber(size);
|
|
61
|
-
let fontSize = Math.round(parseInt(height) / 3);
|
|
62
|
-
const prefix = `--bcm-avatar`;
|
|
63
|
-
return {
|
|
64
|
-
[`${prefix}-color`]: colorHelper.ColorHelper.dsColor(`${color}-600`),
|
|
65
|
-
[`${prefix}-background-color`]: colorHelper.ColorHelper.dsColor(`${color}-100`),
|
|
66
|
-
[`${prefix}-height`]: `${height}px`,
|
|
67
|
-
[`${prefix}-font-size`]: `${fontSize}px`
|
|
68
|
-
};
|
|
69
|
-
}
|
|
70
|
-
render() {
|
|
71
|
-
const { image, name, alt, hidden, shape, size, status } = this;
|
|
72
|
-
const isCustom = !Object.keys(bcm.Bcm$1.BaseSize).includes(size);
|
|
73
|
-
const hostClasses = index$1.classnames('bcm-avatar', `bcm-avatar__shape-${shape}`, `bcm-avatar__size-${isCustom ? 'custom' : size}`, {
|
|
74
|
-
'hidden': hidden,
|
|
75
|
-
'bcm-avatar__status': !!status
|
|
76
|
-
});
|
|
77
|
-
const GetIcon = () => index.h("bcm-icon", { icon: "fas fa-user" });
|
|
78
|
-
return (index.h(index.Host, { class: hostClasses, style: this.setStyleVariables() }, index.h("span", { hidden: true }, index.h("slot", null)), this.isFallback ? (this.name ? this.getFirstLetters(this.name) : GetIcon())
|
|
79
|
-
: image
|
|
80
|
-
? index.h("img", { onError: () => this.handleError(), src: image, alt: alt })
|
|
81
|
-
: name ? this.getFirstLetters(name)
|
|
82
|
-
: GetIcon(), status && index.h("bcm-badge", { status: status })));
|
|
83
|
-
}
|
|
84
|
-
get el() { return index.getElement(this); }
|
|
85
|
-
};
|
|
86
|
-
BcmAvatar.style = avatarCss;
|
|
87
|
-
|
|
88
|
-
const badgeCss = "@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}.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}*{box-sizing:border-box}.bcm-badge{--bcm-badge-color:var(--bcm-new-ds-color-white);--bcm-badge-background-color:var(--bcm-new-ds-color-slate-400);--bcm-badge-spacing:4px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:4px}.bcm-badge.hidden{display:none}.bcm-badge span:empty{display:none}.bcm-badge__dot{color:var(--bcm-badge-color);background-color:var(--bcm-badge-background-color);display:inline-block;border-radius:100px;position:relative}.bcm-badge__dot-text{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;padding:0 var(--bcm-badge-spacing);z-index:2;color:var(--bcm-badge-color)}.bcm-badge__dot-size-small{font-size:10px;line-height:calc(10px + 8px);min-width:6px;min-height:6px}.bcm-badge__dot-size-small .bcm-badge__dot-text{min-width:calc(10px + 8px)}.bcm-badge__dot-size-medium{font-size:12px;line-height:calc(12px + 8px);min-width:8px;min-height:8px}.bcm-badge__dot-size-medium .bcm-badge__dot-text{min-width:calc(12px + 8px)}.bcm-badge__dot-size-large{font-size:14px;line-height:calc(14px + 8px);min-width:10px;min-height:10px}.bcm-badge__dot-size-large .bcm-badge__dot-text{min-width:calc(14px + 8px)}.bcm-badge__dot-blink{position:relative;z-index:1}.bcm-badge__dot-blink:after{content:\"\";position:absolute;z-index:-1;top:0;left:0;background:var(--bcm-badge-background-color);border-radius:100px;opacity:0.7;box-shadow:0 0 0 0 rgba(0, 0, 0, 0);transform:scale(1);width:100%;height:100%}.bcm-badge__dot:after{background-color:var(--bcm-badge-background-color);animation:badge-pulse 2s infinite}@keyframes badge-pulse{0%{transform:scale(0.95);box-shadow:0 0 0 0 var(--bcm-badge-background-color)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}";
|
|
89
|
-
|
|
90
|
-
const BcmBadge = class {
|
|
91
|
-
constructor(hostRef) {
|
|
92
|
-
index.registerInstance(this, hostRef);
|
|
93
|
-
this._id = generate.Generate.UID();
|
|
94
|
-
this.hidden = false;
|
|
95
|
-
this.blink = false;
|
|
96
|
-
this.value = undefined;
|
|
97
|
-
this.color = undefined;
|
|
98
|
-
this.size = bcm.Bcm$1.Size.medium;
|
|
99
|
-
this.status = undefined;
|
|
100
|
-
this._slot = undefined;
|
|
101
|
-
}
|
|
102
|
-
setStyleVariables() {
|
|
103
|
-
const { status, value } = this;
|
|
104
|
-
let { color } = this;
|
|
105
|
-
const statusColors = {
|
|
106
|
-
'info': 'blue',
|
|
107
|
-
'error': 'red',
|
|
108
|
-
'warning': 'amber',
|
|
109
|
-
'success': 'emerald',
|
|
110
|
-
'default': 'slate'
|
|
111
|
-
};
|
|
112
|
-
!!status && (color = statusColors[status]);
|
|
113
|
-
!color && (color = 'slate');
|
|
114
|
-
const prefix = `--bcm-badge`;
|
|
115
|
-
const spacing = !!value && value.length > 1 ? '8' : '4';
|
|
116
|
-
return {
|
|
117
|
-
[`${prefix}-color`]: colorHelper.ColorHelper.reverseColor(colorHelper.ColorHelper.dsColor(`${color}`)),
|
|
118
|
-
[`${prefix}-background-color`]: colorHelper.ColorHelper.dsColor(`${color}`),
|
|
119
|
-
[`${prefix}-spacing`]: `${spacing}px`
|
|
120
|
-
};
|
|
121
|
-
}
|
|
122
|
-
render() {
|
|
123
|
-
let { blink, value, size, _slot, hidden } = this;
|
|
124
|
-
const dotClass = index$1.classnames('bcm-badge__dot', 'bcm-badge__dot-size-' + size,
|
|
125
|
-
// 'size-2',
|
|
126
|
-
{
|
|
127
|
-
'bcm-badge__dot-blink': blink
|
|
128
|
-
});
|
|
129
|
-
const hostClasses = index$1.classnames('bcm-badge', {
|
|
130
|
-
hidden
|
|
131
|
-
});
|
|
132
|
-
return (index.h(index.Host, { class: hostClasses, style: this.setStyleVariables() }, index.h("span", { hidden: true }, index.h("slot", null)), index.h("div", { class: dotClass }, !!value && index.h("span", { class: "bcm-badge__dot-text" }, value)), index.h(slotTemplate.SlotTemplate, { value: _slot })));
|
|
133
|
-
}
|
|
134
|
-
get el() { return index.getElement(this); }
|
|
135
|
-
};
|
|
136
|
-
BcmBadge.style = badgeCss;
|
|
137
|
-
|
|
138
|
-
exports.bcm_avatar = BcmAvatar;
|
|
139
|
-
exports.bcm_badge = BcmBadge;
|