@sankhyalabs/ezui 4.2.1 → 4.3.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/cjs/ez-badge.cjs.entry.js +120 -0
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/ez-badge/enum/sizes.js +9 -0
- package/dist/collection/components/ez-badge/ez-badge.css +165 -0
- package/dist/collection/components/ez-badge/ez-badge.js +211 -0
- package/dist/collection/components/ez-badge/interfaces/IPosition.js +1 -0
- package/dist/custom-elements/index.d.ts +6 -0
- package/dist/custom-elements/index.js +117 -1
- package/dist/esm/ez-badge.entry.js +116 -0
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-077a6943.entry.js +1 -0
- package/dist/types/components/ez-badge/enum/sizes.d.ts +8 -0
- package/dist/types/components/ez-badge/ez-badge.d.ts +35 -0
- package/dist/types/components/ez-badge/interfaces/IPosition.d.ts +4 -0
- package/dist/types/components.d.ts +54 -0
- package/package.json +1 -1
- package/react/components.d.ts +1 -0
- package/react/components.js +1 -0
- package/react/components.js.map +1 -1
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-892780f1.js');
|
|
6
|
+
const core = require('@sankhyalabs/core');
|
|
7
|
+
|
|
8
|
+
var Sizes;
|
|
9
|
+
(function (Sizes) {
|
|
10
|
+
Sizes["EXTRA_LARGE"] = "extra-large";
|
|
11
|
+
Sizes["LARGE"] = "large";
|
|
12
|
+
Sizes["MEDIUM"] = "medium";
|
|
13
|
+
Sizes["SMALL_MEDIUM"] = "small-medium";
|
|
14
|
+
Sizes["SMALL"] = "small";
|
|
15
|
+
Sizes["EXTRA_SMALL"] = "extra-small";
|
|
16
|
+
})(Sizes || (Sizes = {}));
|
|
17
|
+
|
|
18
|
+
const ezBadgeCss = ":host{--ez-badge--size-2xs:var(--space--2xs, 8px);--ez-badge--size-xs:var(--space--xs, 12px);--ez-badge--size-sm:var(--space--sm, 16px);--ez-badge--size-md:var(--space--md, 20px);--ez-badge--size-lg:var(--space--lg, 24px);--ez-badge--size-xl:var(--space--xl, 32px);--ez-badge--padding-2xs:0;--ez-badge--padding-xs:var(--space--nano, 2px);--ez-badge--padding-sm:calc(var(--space--nano, 2px) + 1px);--ez-badge--padding-md:var(--space--3xs, 4px);--ez-badge--padding-lg:calc(var(--space--3xs, 4px) + 2px);--ez-badge--padding-xl:var(--space--2xs);--ez-badge--border-radius:calc(var(--border--radius-medium, 12px) + 8px);--ez-badge--font-family:var(--font-pattern, Roboto);--ez-badge--font-weight-medium:var(--text-weight--medium, 400);--ez-badge--background-color:var(--color--primary, #008561);--ez-badge--border-none:0;--ez-badge--color:var(--text--inverted, #ffffff);--ez-badge--gap:calc(var(--ez-badge--padding-xs) + 1px);--ez-badge--font-size-md:var(--text--medium);--ez-badge--font-size-sm:var(--text--medium);--ez-badge--font-size-xs:var(--text--small)}ez-icon{--ez-icon--color:inherit}.badge{display:flex;justify-content:center;align-items:center;position:relative}.badge__content{font-family:var(--ez-badge--font-family, Roboto);font-weight:var(--ez-badge--font-weight-medium, 400);background-color:var(--ez-badge--background-color, #008561);border:var(--ez-badge--border-none, 0);color:var(--ez-badge--color, #ffffff);border-radius:var(--ez-badge--border-radius, 20px);gap:var(--ez-badge--gap, 3px);display:flex;justify-content:center;align-items:center}.badge__content--fill-xs{height:var(--ez-badge--size-xs, 12px);min-width:var(--ez-badge--size-xs, 12px)}.badge__content--fill-2xs{height:var(--ez-badge--size-2xs, 8px);min-width:var(--ez-badge--size-2xs, 8px)}.badge__content--text-md{height:calc(var(--ez-badge--size-md, 20px) - 2px);min-width:var(--ez-badge--size-sm, 20px);padding-top:var(--ez-badge--padding-sm);padding-bottom:var(--ez-badge--padding-sm);padding-right:var(--ez-badge--padding-xl);padding-left:var(--ez-badge--padding-xl);font-size:var(--ez-badge--font-size-md)}.badge__content--text-sm{height:calc(var(--ez-badge--size-sm, 16px) - 2px);min-width:var(--ez-badge--size-sm, 16px);padding-top:var(--ez-badge--padding-sm);padding-bottom:var(--ez-badge--padding-sm);padding-right:var(--ez-badge--padding-xl);padding-left:var(--ez-badge--padding-xl);font-size:var(--ez-badge--font-size-sm)}.badge__content--text-xs{height:var(--ez-badge--size-sm, 16px);min-width:var(--ez-badge--size-sm, 16px);padding-top:var(--ez-badge--padding-2xs);padding-bottom:var(--ez-badge--padding-2xs);padding-right:var(--ez-badge--padding-lg);padding-left:var(--ez-badge--padding-lg);font-size:var(--ez-badge--font-size-xs)}.badge__content--icon-lg{height:var(--ez-badge--size-lg, 24px);min-width:var(--ez-badge--size-lg, 24px);padding:var(--ez-badge--padding-md)}.badge__content--icon-md{height:var(--ez-badge--size-sm, 16px);min-width:var(--ez-badge--size-sm, 16px);padding:var(--ez-badge--padding-md)}.badge__content--icon-sm{height:var(--ez-badge--size-sm, 16px);min-width:var(--ez-badge--size-sm, 16px);padding:var(--ez-badge--padding-xs)}.badge__content--icon-xs{height:var(--ez-badge--size-xs, 12px);min-width:var(--ez-badge--size-xs, 12px);padding:var(--ez-badge--padding-xs)}.badge__content--fill{position:absolute;top:0;inset-inline-end:0;z-index:var(--most-visible, 2)}.badge__content--fill-top-right{transform:translate(50%, -50%);position:absolute;top:0;right:0}.badge__content--fill-top-left{transform:translate(-50%, -50%);position:absolute;top:0;left:0}.badge__content--fill-bottom-left{transform:translate(-50%, 50%);position:absolute;bottom:0;left:0}.badge__content--fill-bottom-right{transform:translate(50%, 50%);position:absolute;bottom:0;right:0}";
|
|
19
|
+
|
|
20
|
+
const EzBadge = class {
|
|
21
|
+
constructor(hostRef) {
|
|
22
|
+
index.registerInstance(this, hostRef);
|
|
23
|
+
this._sizes = {
|
|
24
|
+
[Sizes.EXTRA_LARGE]: {
|
|
25
|
+
sufix: "xl",
|
|
26
|
+
},
|
|
27
|
+
[Sizes.LARGE]: {
|
|
28
|
+
sufix: "lg",
|
|
29
|
+
},
|
|
30
|
+
[Sizes.MEDIUM]: {
|
|
31
|
+
sufix: "md",
|
|
32
|
+
},
|
|
33
|
+
[Sizes.SMALL_MEDIUM]: {
|
|
34
|
+
sufix: "sm",
|
|
35
|
+
},
|
|
36
|
+
[Sizes.SMALL]: {
|
|
37
|
+
sufix: "xs",
|
|
38
|
+
},
|
|
39
|
+
[Sizes.EXTRA_SMALL]: {
|
|
40
|
+
sufix: "2xs",
|
|
41
|
+
},
|
|
42
|
+
};
|
|
43
|
+
this.hasSlot = false;
|
|
44
|
+
this.size = "small";
|
|
45
|
+
this.label = undefined;
|
|
46
|
+
this.iconLeft = undefined;
|
|
47
|
+
this.iconRight = undefined;
|
|
48
|
+
this.position = { horizontal: "right", vertical: "top" };
|
|
49
|
+
}
|
|
50
|
+
getIconSize() {
|
|
51
|
+
switch (this.size) {
|
|
52
|
+
case "large":
|
|
53
|
+
return "large";
|
|
54
|
+
case "medium":
|
|
55
|
+
case "small-medium":
|
|
56
|
+
return "small";
|
|
57
|
+
case "small":
|
|
58
|
+
return "x-small";
|
|
59
|
+
default:
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
componentDidLoad() {
|
|
64
|
+
if (this._element) {
|
|
65
|
+
core.ElementIDUtils.addIDInfo(this._element);
|
|
66
|
+
}
|
|
67
|
+
if (this._badge) {
|
|
68
|
+
const dataInfo = { id: 'embedded' };
|
|
69
|
+
core.ElementIDUtils.addIDInfo(this._badge, 'ezBadge', dataInfo);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
handleSlotChange() {
|
|
73
|
+
this.hasSlot = true;
|
|
74
|
+
}
|
|
75
|
+
validateIconLeft() {
|
|
76
|
+
return (this.iconLeft) && this.iconLeft.trim() !== "";
|
|
77
|
+
}
|
|
78
|
+
validateIconRight() {
|
|
79
|
+
return (this.iconRight) && this.iconRight.trim() !== "";
|
|
80
|
+
}
|
|
81
|
+
validateLabel() {
|
|
82
|
+
return (this.label) && this.label.trim() !== "";
|
|
83
|
+
}
|
|
84
|
+
createContainerClassName() {
|
|
85
|
+
let sizeSufix = this._sizes[this.size].sufix;
|
|
86
|
+
let containerClassNames = ["badge__content"];
|
|
87
|
+
if (this.hasSlot) {
|
|
88
|
+
containerClassNames.push("badge__content--fill-" + sizeSufix);
|
|
89
|
+
if (this.position.vertical == "bottom" && this.position.horizontal == "right") {
|
|
90
|
+
containerClassNames.push("badge__content--fill-bottom-right");
|
|
91
|
+
}
|
|
92
|
+
if (this.position.vertical == "bottom" && this.position.horizontal == "left") {
|
|
93
|
+
containerClassNames.push("badge__content--fill-bottom-left");
|
|
94
|
+
}
|
|
95
|
+
if (this.position.vertical == "top" && this.position.horizontal == "right") {
|
|
96
|
+
containerClassNames.push("badge__content--fill-top-right");
|
|
97
|
+
}
|
|
98
|
+
if (this.position.vertical == "top" && this.position.horizontal == "left") {
|
|
99
|
+
containerClassNames.push("badge__content--fill-top-left");
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
if (this.label) {
|
|
103
|
+
containerClassNames.push("badge__content--text-" + sizeSufix);
|
|
104
|
+
}
|
|
105
|
+
else if (this.iconLeft || this.iconRight) {
|
|
106
|
+
containerClassNames.push("badge__content--icon-" + sizeSufix);
|
|
107
|
+
}
|
|
108
|
+
else {
|
|
109
|
+
containerClassNames.push("badge__content--fill-" + sizeSufix);
|
|
110
|
+
}
|
|
111
|
+
return containerClassNames.join(" ");
|
|
112
|
+
}
|
|
113
|
+
render() {
|
|
114
|
+
return (index.h(index.Host, null, index.h("div", { class: "badge" }, index.h("div", null, index.h("slot", { name: "child-badge", onSlotchange: () => { this.handleSlotChange(); } })), index.h("div", { class: this.createContainerClassName(), ref: (el) => this._badge = el }, this.validateIconLeft() && index.h("ez-icon", { class: "icon", iconName: this.iconLeft, size: this.getIconSize() }), this.validateLabel() && index.h("label", { title: this.label }, this.label), this.validateIconRight() && index.h("ez-icon", { class: "icon", iconName: this.iconRight, size: this.getIconSize() })))));
|
|
115
|
+
}
|
|
116
|
+
get _element() { return index.getElement(this); }
|
|
117
|
+
};
|
|
118
|
+
EzBadge.style = ezBadgeCss;
|
|
119
|
+
|
|
120
|
+
exports.ez_badge = EzBadge;
|
package/dist/cjs/ezui.cjs.js
CHANGED
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(options => {
|
|
20
|
-
return index.bootstrapLazy([["ez-actions-button.cjs",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-breadcrumb.cjs",[[1,"ez-breadcrumb",{"items":[1040],"fillMode":[1025,"fill-mode"],"maxItems":[1026,"max-items"],"positionEllipsis":[1026,"position-ellipsis"],"visibleItems":[32],"hiddenItems":[32],"showDropdown":[32],"collapseConfigPosition":[32]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-grid.cjs",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"_showSelectionCounter":[32],"_selectionCount":[32],"_selectionPageCount":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container.cjs",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-alert.cjs",[[1,"ez-alert",{"alertType":[513,"alert-type"]}]]],["ez-chip.cjs",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-file-item.cjs",[[1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-card-item.cjs",[[1,"ez-card-item",{"item":[16]}]]],["ez-list.cjs",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"hoverFeedback":[1028,"hover-feedback"],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar.cjs",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button.cjs",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"],"show":[64]}]]],["ez-view-stack.cjs",[[0,"ez-view-stack",{"show":[64],"getSelectedIndex":[64]}]]],["ez-
|
|
20
|
+
return index.bootstrapLazy([["ez-guide-navigator.cjs",[[1,"ez-guide-navigator",{"open":[1540],"selectedId":[1537,"selected-id"],"items":[16],"tooltipResolver":[16],"filterText":[32],"disableItem":[64],"enableItem":[64],"updateItem":[64],"getItem":[64],"getCurrentPath":[64],"selectGuide":[64],"getParent":[64]}]]],["ez-actions-button.cjs",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-breadcrumb.cjs",[[1,"ez-breadcrumb",{"items":[1040],"fillMode":[1025,"fill-mode"],"maxItems":[1026,"max-items"],"positionEllipsis":[1026,"position-ellipsis"],"visibleItems":[32],"hiddenItems":[32],"showDropdown":[32],"collapseConfigPosition":[32]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-grid.cjs",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"_showSelectionCounter":[32],"_selectionCount":[32],"_selectionPageCount":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container.cjs",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-alert.cjs",[[1,"ez-alert",{"alertType":[513,"alert-type"]}]]],["ez-badge.cjs",[[1,"ez-badge",{"size":[513],"label":[513],"iconLeft":[513,"icon-left"],"iconRight":[513,"icon-right"],"position":[1040],"hasSlot":[32]}]]],["ez-chip.cjs",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-file-item.cjs",[[1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-card-item.cjs",[[1,"ez-card-item",{"item":[16]}]]],["ez-list.cjs",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"hoverFeedback":[1028,"hover-feedback"],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar.cjs",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button.cjs",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"],"show":[64]}]]],["ez-view-stack.cjs",[[0,"ez-view-stack",{"show":[64],"getSelectedIndex":[64]}]]],["ez-dropdown.cjs",[[1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]}]]],["ez-tabselector.cjs",[[1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]]],["ez-text-input.cjs",[[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-collapsible-box.cjs",[[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32],"showHide":[64],"applyFocusTextEdit":[64],"cancelEdition":[64]}]]],["ez-search.cjs",[[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-input.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-time-input.cjs",[[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-check.cjs",[[1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[1540],"mode":[513],"getMode":[64],"setFocus":[64]}]]],["ez-text-area.cjs",[[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-upload.cjs",[[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64],"setFocus":[64],"setBlur":[64]}]]],["ez-text-edit.cjs",[[1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32],"applyFocusSelect":[64]}]]],["ez-combo-box.cjs",[[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-filter-input_4.cjs",[[1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"asyncSearch":[516,"async-search"],"setFocus":[64],"setBlur":[64],"isInvalid":[64],"setValue":[64],"endSearch":[64]}],[1,"ez-tree",{"items":[1040],"value":[1040],"selectedId":[1537,"selected-id"],"iconResolver":[16],"tooltipResolver":[16],"_tree":[32],"_waintingForLoad":[32],"selectItem":[64],"openItem":[64],"disableItem":[64],"enableItem":[64],"addChild":[64],"applyFilter":[64],"updateItem":[64],"getItem":[64],"getCurrentPath":[64],"getParent":[64]},[[2,"keydown","onKeyDownListener"]]],[1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]],[1,"ez-sidebar-button"]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-icon.cjs",[[1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]]],["ez-button.cjs",[[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513],"setFocus":[64],"setBlur":[64]},[[2,"click","clickListener"]]]]],["ez-form-view.cjs",[[2,"ez-form-view",{"fields":[16],"showUp":[64]}]]],["ez-form.cjs",[[2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"validate":[64]}]]]], options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
exports.setNonce = index.setNonce;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["ez-actions-button.cjs",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-breadcrumb.cjs",[[1,"ez-breadcrumb",{"items":[1040],"fillMode":[1025,"fill-mode"],"maxItems":[1026,"max-items"],"positionEllipsis":[1026,"position-ellipsis"],"visibleItems":[32],"hiddenItems":[32],"showDropdown":[32],"collapseConfigPosition":[32]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-grid.cjs",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"_showSelectionCounter":[32],"_selectionCount":[32],"_selectionPageCount":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container.cjs",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-alert.cjs",[[1,"ez-alert",{"alertType":[513,"alert-type"]}]]],["ez-chip.cjs",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-file-item.cjs",[[1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-card-item.cjs",[[1,"ez-card-item",{"item":[16]}]]],["ez-list.cjs",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"hoverFeedback":[1028,"hover-feedback"],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar.cjs",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button.cjs",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"],"show":[64]}]]],["ez-view-stack.cjs",[[0,"ez-view-stack",{"show":[64],"getSelectedIndex":[64]}]]],["ez-
|
|
17
|
+
return index.bootstrapLazy([["ez-guide-navigator.cjs",[[1,"ez-guide-navigator",{"open":[1540],"selectedId":[1537,"selected-id"],"items":[16],"tooltipResolver":[16],"filterText":[32],"disableItem":[64],"enableItem":[64],"updateItem":[64],"getItem":[64],"getCurrentPath":[64],"selectGuide":[64],"getParent":[64]}]]],["ez-actions-button.cjs",[[1,"ez-actions-button",{"enabled":[516],"actions":[1040],"size":[513],"showLabel":[516,"show-label"],"displayIcon":[513,"display-icon"],"checkOption":[516,"check-option"],"value":[513],"isTransparent":[516,"is-transparent"],"arrowActive":[516,"arrow-active"],"_selectedAction":[32],"hideActions":[64],"isOpened":[64]}]]],["ez-breadcrumb.cjs",[[1,"ez-breadcrumb",{"items":[1040],"fillMode":[1025,"fill-mode"],"maxItems":[1026,"max-items"],"positionEllipsis":[1026,"position-ellipsis"],"visibleItems":[32],"hiddenItems":[32],"showDropdown":[32],"collapseConfigPosition":[32]}]]],["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"show":[64]}]]],["ez-grid.cjs",[[6,"ez-grid",{"multipleSelection":[4,"multiple-selection"],"config":[1040],"serverUrl":[1,"server-url"],"dataUnit":[16],"statusResolver":[16],"_paginationInfo":[32],"_paginationChangedByKeyboard":[32],"_showSelectionCounter":[32],"_selectionCount":[32],"_selectionPageCount":[32],"setColumnsDef":[64],"addColumnMenuItem":[64],"setColumnsState":[64],"setData":[64],"getSelection":[64],"getColumnsState":[64],"getColumns":[64],"quickFilter":[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["ez-modal-container.cjs",[[6,"ez-modal-container",{"modalTitle":[1,"modal-title"],"modalSubTitle":[1,"modal-sub-title"],"showTitleBar":[4,"show-title-bar"],"cancelButtonLabel":[1,"cancel-button-label"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonStatus":[1,"cancel-button-status"],"okButtonStatus":[1,"ok-button-status"]}]]],["ez-alert.cjs",[[1,"ez-alert",{"alertType":[513,"alert-type"]}]]],["ez-badge.cjs",[[1,"ez-badge",{"size":[513],"label":[513],"iconLeft":[513,"icon-left"],"iconRight":[513,"icon-right"],"position":[1040],"hasSlot":[32]}]]],["ez-chip.cjs",[[1,"ez-chip",{"label":[513],"enabled":[516],"removePosition":[513,"remove-position"],"mode":[513],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-file-item.cjs",[[1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]]],["ez-application.cjs",[[0,"ez-application"]]],["ez-card-item.cjs",[[1,"ez-card-item",{"item":[16]}]]],["ez-list.cjs",[[1,"ez-list",{"dataSource":[1040],"useGroups":[1540,"use-groups"],"ezDraggable":[1028,"ez-draggable"],"ezSelectable":[1028,"ez-selectable"],"itemSlotBuilder":[1040],"hoverFeedback":[1028,"hover-feedback"],"_listItems":[32],"_listGroupItems":[32],"clearHistory":[64],"scrollToTop":[64],"setSelection":[64],"getSelection":[64],"getList":[64]}]]],["ez-loading-bar.cjs",[[1,"ez-loading-bar",{"_showLoading":[32],"hide":[64],"show":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[1028],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"innerElement":[1537,"inner-element"],"overlayType":[513,"overlay-type"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[516,"use-header"],"heightMode":[513,"height-mode"],"ezTitle":[1,"ez-title"]}]]],["ez-radio-button.cjs",[[1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"],"show":[64]}]]],["ez-view-stack.cjs",[[0,"ez-view-stack",{"show":[64],"getSelectedIndex":[64]}]]],["ez-dropdown.cjs",[[1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]}]]],["ez-tabselector.cjs",[[1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]]],["ez-text-input.cjs",[[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"mask":[1],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-collapsible-box.cjs",[[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headerSize":[513,"header-size"],"iconPlacement":[513,"icon-placement"],"headerAlign":[513,"header-align"],"removable":[516],"editable":[516],"conditionalSave":[16],"_activeEditText":[32],"showHide":[64],"applyFocusTextEdit":[64],"cancelEdition":[64]}]]],["ez-search.cjs",[[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-input.cjs",[[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-date-time-input.cjs",[[1,"ez-date-time-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"label":[1],"value":[1538],"enabled":[4],"errorMessage":[1537,"error-message"],"precision":[2],"prettyPrecision":[2,"pretty-precision"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-check.cjs",[[1,"ez-check",{"label":[513],"value":[1540],"enabled":[1540],"indeterminate":[1540],"mode":[513],"getMode":[64],"setFocus":[64]}]]],["ez-text-area.cjs",[[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-upload.cjs",[[1,"ez-upload",{"label":[1],"enabled":[4],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"requestHeaders":[8,"request-headers"],"urlUpload":[1,"url-upload"],"urlDelete":[1,"url-delete"],"value":[1040],"addFiles":[64],"setFocus":[64],"setBlur":[64]}]]],["ez-text-edit.cjs",[[1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32],"applyFocusSelect":[64]}]]],["ez-combo-box.cjs",[[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errorMessage":[1537,"error-message"],"searchMode":[4,"search-mode"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressSearch":[4,"suppress-search"],"optionLoader":[16],"suppressEmptyOption":[4,"suppress-empty-option"],"canShowError":[516,"can-show-error"],"mode":[513],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_criteria":[32],"setFocus":[64],"setBlur":[64],"isInvalid":[64]}]]],["ez-filter-input_4.cjs",[[1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"asyncSearch":[516,"async-search"],"setFocus":[64],"setBlur":[64],"isInvalid":[64],"setValue":[64],"endSearch":[64]}],[1,"ez-tree",{"items":[1040],"value":[1040],"selectedId":[1537,"selected-id"],"iconResolver":[16],"tooltipResolver":[16],"_tree":[32],"_waintingForLoad":[32],"selectItem":[64],"openItem":[64],"disableItem":[64],"enableItem":[64],"addChild":[64],"applyFilter":[64],"updateItem":[64],"getItem":[64],"getCurrentPath":[64],"getParent":[64]},[[2,"keydown","onKeyDownListener"]]],[1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]],[1,"ez-sidebar-button"]]],["ez-calendar.cjs",[[1,"ez-calendar",{"value":[1040],"floating":[516],"time":[516],"showSeconds":[516,"show-seconds"],"show":[64],"fitVertical":[64],"hide":[64]}]]],["ez-icon.cjs",[[1,"ez-icon",{"size":[513],"href":[513],"iconName":[513,"icon-name"]}]]],["ez-button.cjs",[[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513],"iconName":[513,"icon-name"],"size":[513],"setFocus":[64],"setBlur":[64]},[[2,"click","clickListener"]]]]],["ez-form-view.cjs",[[2,"ez-form-view",{"fields":[16],"showUp":[64]}]]],["ez-form.cjs",[[2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"validate":[64]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
"./components/ez-upload/ez-upload.js",
|
|
12
12
|
"./components/ez-alert/ez-alert.js",
|
|
13
13
|
"./components/ez-application/ez-application.js",
|
|
14
|
+
"./components/ez-badge/ez-badge.js",
|
|
14
15
|
"./components/ez-button/ez-button.js",
|
|
15
16
|
"./components/ez-calendar/ez-calendar.js",
|
|
16
17
|
"./components/ez-check/ez-check.js",
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export var Sizes;
|
|
2
|
+
(function (Sizes) {
|
|
3
|
+
Sizes["EXTRA_LARGE"] = "extra-large";
|
|
4
|
+
Sizes["LARGE"] = "large";
|
|
5
|
+
Sizes["MEDIUM"] = "medium";
|
|
6
|
+
Sizes["SMALL_MEDIUM"] = "small-medium";
|
|
7
|
+
Sizes["SMALL"] = "small";
|
|
8
|
+
Sizes["EXTRA_SMALL"] = "extra-small";
|
|
9
|
+
})(Sizes || (Sizes = {}));
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
--ez-badge--size-2xs: var(--space--2xs, 8px);
|
|
3
|
+
--ez-badge--size-xs: var(--space--xs, 12px);
|
|
4
|
+
--ez-badge--size-sm: var(--space--sm, 16px);
|
|
5
|
+
--ez-badge--size-md: var(--space--md, 20px);
|
|
6
|
+
--ez-badge--size-lg: var(--space--lg, 24px);
|
|
7
|
+
--ez-badge--size-xl: var(--space--xl, 32px);
|
|
8
|
+
|
|
9
|
+
--ez-badge--padding-2xs: 0;
|
|
10
|
+
--ez-badge--padding-xs: var(--space--nano, 2px);
|
|
11
|
+
--ez-badge--padding-sm: calc(var(--space--nano, 2px) + 1px);
|
|
12
|
+
--ez-badge--padding-md: var(--space--3xs, 4px);
|
|
13
|
+
--ez-badge--padding-lg: calc(var(--space--3xs, 4px) + 2px);
|
|
14
|
+
--ez-badge--padding-xl: var(--space--2xs);
|
|
15
|
+
|
|
16
|
+
--ez-badge--border-radius: calc(var(--border--radius-medium, 12px) + 8px);
|
|
17
|
+
--ez-badge--font-family: var(--font-pattern, Roboto);
|
|
18
|
+
--ez-badge--font-weight-medium: var(--text-weight--medium, 400);
|
|
19
|
+
--ez-badge--background-color: var(--color--primary, #008561);
|
|
20
|
+
--ez-badge--border-none: 0;
|
|
21
|
+
--ez-badge--color: var(--text--inverted, #ffffff);
|
|
22
|
+
--ez-badge--gap: calc(var(--ez-badge--padding-xs) + 1px);
|
|
23
|
+
|
|
24
|
+
--ez-badge--font-size-md: var(--text--medium);
|
|
25
|
+
--ez-badge--font-size-sm: var(--text--medium);
|
|
26
|
+
--ez-badge--font-size-xs: var(--text--small);
|
|
27
|
+
}
|
|
28
|
+
ez-icon {
|
|
29
|
+
--ez-icon--color: inherit;
|
|
30
|
+
}
|
|
31
|
+
.badge {
|
|
32
|
+
/*private*/
|
|
33
|
+
display: flex;
|
|
34
|
+
justify-content: center;
|
|
35
|
+
align-items: center;
|
|
36
|
+
position: relative;
|
|
37
|
+
}
|
|
38
|
+
.badge__content {
|
|
39
|
+
/*public*/
|
|
40
|
+
font-family: var(--ez-badge--font-family, Roboto);
|
|
41
|
+
font-weight: var(--ez-badge--font-weight-medium, 400);
|
|
42
|
+
background-color: var(--ez-badge--background-color, #008561);
|
|
43
|
+
border: var(--ez-badge--border-none, 0);
|
|
44
|
+
color: var(--ez-badge--color, #ffffff);
|
|
45
|
+
border-radius: var(--ez-badge--border-radius, 20px);
|
|
46
|
+
gap: var(--ez-badge--gap, 3px);
|
|
47
|
+
|
|
48
|
+
/*private*/
|
|
49
|
+
display: flex;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
align-items: center;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.badge__content--fill-xs {
|
|
55
|
+
/*public*/
|
|
56
|
+
height: var(--ez-badge--size-xs, 12px);
|
|
57
|
+
min-width: var(--ez-badge--size-xs, 12px);
|
|
58
|
+
}
|
|
59
|
+
.badge__content--fill-2xs {
|
|
60
|
+
/*public*/
|
|
61
|
+
height: var(--ez-badge--size-2xs, 8px);
|
|
62
|
+
min-width: var(--ez-badge--size-2xs, 8px);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.badge__content--text-md {
|
|
66
|
+
/*public*/
|
|
67
|
+
height: calc(var(--ez-badge--size-md, 20px) - 2px);
|
|
68
|
+
min-width: var(--ez-badge--size-sm, 20px);
|
|
69
|
+
padding-top: var(--ez-badge--padding-sm);
|
|
70
|
+
padding-bottom: var(--ez-badge--padding-sm);
|
|
71
|
+
padding-right: var(--ez-badge--padding-xl);
|
|
72
|
+
padding-left: var(--ez-badge--padding-xl);
|
|
73
|
+
font-size: var(--ez-badge--font-size-md);
|
|
74
|
+
}
|
|
75
|
+
.badge__content--text-sm {
|
|
76
|
+
/*public*/
|
|
77
|
+
height: calc(var(--ez-badge--size-sm, 16px) - 2px);
|
|
78
|
+
min-width: var(--ez-badge--size-sm, 16px);
|
|
79
|
+
padding-top: var(--ez-badge--padding-sm);
|
|
80
|
+
padding-bottom: var(--ez-badge--padding-sm);
|
|
81
|
+
padding-right: var(--ez-badge--padding-xl);
|
|
82
|
+
padding-left: var(--ez-badge--padding-xl);
|
|
83
|
+
font-size: var(--ez-badge--font-size-sm);
|
|
84
|
+
}
|
|
85
|
+
.badge__content--text-xs {
|
|
86
|
+
/*public*/
|
|
87
|
+
height: var(--ez-badge--size-sm, 16px);
|
|
88
|
+
min-width: var(--ez-badge--size-sm, 16px);
|
|
89
|
+
padding-top: var(--ez-badge--padding-2xs);
|
|
90
|
+
padding-bottom: var(--ez-badge--padding-2xs);
|
|
91
|
+
padding-right: var(--ez-badge--padding-lg);
|
|
92
|
+
padding-left: var(--ez-badge--padding-lg);
|
|
93
|
+
font-size: var(--ez-badge--font-size-xs);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.badge__content--icon-lg {
|
|
97
|
+
/*public*/
|
|
98
|
+
height: var(--ez-badge--size-lg, 24px);
|
|
99
|
+
min-width: var(--ez-badge--size-lg, 24px);
|
|
100
|
+
padding: var(--ez-badge--padding-md);
|
|
101
|
+
}
|
|
102
|
+
.badge__content--icon-md {
|
|
103
|
+
/*public*/
|
|
104
|
+
height: var(--ez-badge--size-sm, 16px);
|
|
105
|
+
min-width: var(--ez-badge--size-sm, 16px);
|
|
106
|
+
padding: var(--ez-badge--padding-md);
|
|
107
|
+
}
|
|
108
|
+
.badge__content--icon-sm {
|
|
109
|
+
/*public*/
|
|
110
|
+
height: var(--ez-badge--size-sm, 16px);
|
|
111
|
+
min-width: var(--ez-badge--size-sm, 16px);
|
|
112
|
+
padding: var(--ez-badge--padding-xs);
|
|
113
|
+
}
|
|
114
|
+
.badge__content--icon-xs {
|
|
115
|
+
/*public*/
|
|
116
|
+
height: var(--ez-badge--size-xs, 12px);
|
|
117
|
+
min-width: var(--ez-badge--size-xs, 12px);
|
|
118
|
+
padding: var(--ez-badge--padding-xs);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.badge__content--fill {
|
|
122
|
+
/*public*/
|
|
123
|
+
position: absolute;
|
|
124
|
+
top: 0;
|
|
125
|
+
inset-inline-end: 0;
|
|
126
|
+
|
|
127
|
+
/*private*/
|
|
128
|
+
z-index: var(--most-visible, 2);
|
|
129
|
+
}
|
|
130
|
+
.badge__content--fill-top-right {
|
|
131
|
+
/*public*/
|
|
132
|
+
transform: translate(50%, -50%);
|
|
133
|
+
|
|
134
|
+
/*private*/
|
|
135
|
+
position: absolute;
|
|
136
|
+
top: 0;
|
|
137
|
+
right: 0;
|
|
138
|
+
}
|
|
139
|
+
.badge__content--fill-top-left {
|
|
140
|
+
/*public*/
|
|
141
|
+
transform: translate(-50%, -50%);
|
|
142
|
+
|
|
143
|
+
/*private*/
|
|
144
|
+
position: absolute;
|
|
145
|
+
top: 0;
|
|
146
|
+
left: 0;
|
|
147
|
+
}
|
|
148
|
+
.badge__content--fill-bottom-left {
|
|
149
|
+
/*public*/
|
|
150
|
+
transform: translate(-50%, 50%);
|
|
151
|
+
|
|
152
|
+
/*private*/
|
|
153
|
+
position: absolute;
|
|
154
|
+
bottom: 0;
|
|
155
|
+
left: 0;
|
|
156
|
+
}
|
|
157
|
+
.badge__content--fill-bottom-right {
|
|
158
|
+
/*public*/
|
|
159
|
+
transform: translate(50%, 50%);
|
|
160
|
+
|
|
161
|
+
/*private*/
|
|
162
|
+
position: absolute;
|
|
163
|
+
bottom: 0;
|
|
164
|
+
right: 0;
|
|
165
|
+
}
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
import { ElementIDUtils } from "@sankhyalabs/core";
|
|
2
|
+
import { h, Host } from "@stencil/core";
|
|
3
|
+
import { Sizes } from "./enum/sizes";
|
|
4
|
+
export class EzBadge {
|
|
5
|
+
constructor() {
|
|
6
|
+
this._sizes = {
|
|
7
|
+
[Sizes.EXTRA_LARGE]: {
|
|
8
|
+
sufix: "xl",
|
|
9
|
+
},
|
|
10
|
+
[Sizes.LARGE]: {
|
|
11
|
+
sufix: "lg",
|
|
12
|
+
},
|
|
13
|
+
[Sizes.MEDIUM]: {
|
|
14
|
+
sufix: "md",
|
|
15
|
+
},
|
|
16
|
+
[Sizes.SMALL_MEDIUM]: {
|
|
17
|
+
sufix: "sm",
|
|
18
|
+
},
|
|
19
|
+
[Sizes.SMALL]: {
|
|
20
|
+
sufix: "xs",
|
|
21
|
+
},
|
|
22
|
+
[Sizes.EXTRA_SMALL]: {
|
|
23
|
+
sufix: "2xs",
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
this.hasSlot = false;
|
|
27
|
+
this.size = "small";
|
|
28
|
+
this.label = undefined;
|
|
29
|
+
this.iconLeft = undefined;
|
|
30
|
+
this.iconRight = undefined;
|
|
31
|
+
this.position = { horizontal: "right", vertical: "top" };
|
|
32
|
+
}
|
|
33
|
+
getIconSize() {
|
|
34
|
+
switch (this.size) {
|
|
35
|
+
case "large":
|
|
36
|
+
return "large";
|
|
37
|
+
case "medium":
|
|
38
|
+
case "small-medium":
|
|
39
|
+
return "small";
|
|
40
|
+
case "small":
|
|
41
|
+
return "x-small";
|
|
42
|
+
default:
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
componentDidLoad() {
|
|
47
|
+
if (this._element) {
|
|
48
|
+
ElementIDUtils.addIDInfo(this._element);
|
|
49
|
+
}
|
|
50
|
+
if (this._badge) {
|
|
51
|
+
const dataInfo = { id: 'embedded' };
|
|
52
|
+
ElementIDUtils.addIDInfo(this._badge, 'ezBadge', dataInfo);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
handleSlotChange() {
|
|
56
|
+
this.hasSlot = true;
|
|
57
|
+
}
|
|
58
|
+
validateIconLeft() {
|
|
59
|
+
return (this.iconLeft) && this.iconLeft.trim() !== "";
|
|
60
|
+
}
|
|
61
|
+
validateIconRight() {
|
|
62
|
+
return (this.iconRight) && this.iconRight.trim() !== "";
|
|
63
|
+
}
|
|
64
|
+
validateLabel() {
|
|
65
|
+
return (this.label) && this.label.trim() !== "";
|
|
66
|
+
}
|
|
67
|
+
createContainerClassName() {
|
|
68
|
+
let sizeSufix = this._sizes[this.size].sufix;
|
|
69
|
+
let containerClassNames = ["badge__content"];
|
|
70
|
+
if (this.hasSlot) {
|
|
71
|
+
containerClassNames.push("badge__content--fill-" + sizeSufix);
|
|
72
|
+
if (this.position.vertical == "bottom" && this.position.horizontal == "right") {
|
|
73
|
+
containerClassNames.push("badge__content--fill-bottom-right");
|
|
74
|
+
}
|
|
75
|
+
if (this.position.vertical == "bottom" && this.position.horizontal == "left") {
|
|
76
|
+
containerClassNames.push("badge__content--fill-bottom-left");
|
|
77
|
+
}
|
|
78
|
+
if (this.position.vertical == "top" && this.position.horizontal == "right") {
|
|
79
|
+
containerClassNames.push("badge__content--fill-top-right");
|
|
80
|
+
}
|
|
81
|
+
if (this.position.vertical == "top" && this.position.horizontal == "left") {
|
|
82
|
+
containerClassNames.push("badge__content--fill-top-left");
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
if (this.label) {
|
|
86
|
+
containerClassNames.push("badge__content--text-" + sizeSufix);
|
|
87
|
+
}
|
|
88
|
+
else if (this.iconLeft || this.iconRight) {
|
|
89
|
+
containerClassNames.push("badge__content--icon-" + sizeSufix);
|
|
90
|
+
}
|
|
91
|
+
else {
|
|
92
|
+
containerClassNames.push("badge__content--fill-" + sizeSufix);
|
|
93
|
+
}
|
|
94
|
+
return containerClassNames.join(" ");
|
|
95
|
+
}
|
|
96
|
+
render() {
|
|
97
|
+
return (h(Host, null, h("div", { class: "badge" }, h("div", null, h("slot", { name: "child-badge", onSlotchange: () => { this.handleSlotChange(); } })), h("div", { class: this.createContainerClassName(), ref: (el) => this._badge = el }, this.validateIconLeft() && h("ez-icon", { class: "icon", iconName: this.iconLeft, size: this.getIconSize() }), this.validateLabel() && h("label", { title: this.label }, this.label), this.validateIconRight() && h("ez-icon", { class: "icon", iconName: this.iconRight, size: this.getIconSize() })))));
|
|
98
|
+
}
|
|
99
|
+
static get is() { return "ez-badge"; }
|
|
100
|
+
static get encapsulation() { return "shadow"; }
|
|
101
|
+
static get originalStyleUrls() {
|
|
102
|
+
return {
|
|
103
|
+
"$": ["ez-badge.css"]
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
static get styleUrls() {
|
|
107
|
+
return {
|
|
108
|
+
"$": ["ez-badge.css"]
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
static get properties() {
|
|
112
|
+
return {
|
|
113
|
+
"size": {
|
|
114
|
+
"type": "string",
|
|
115
|
+
"mutable": false,
|
|
116
|
+
"complexType": {
|
|
117
|
+
"original": "\"extra-large\" | \"large\" | \"medium\" | \"small-medium\" | \"small\" | \"extra-small\"",
|
|
118
|
+
"resolved": "\"extra-large\" | \"extra-small\" | \"large\" | \"medium\" | \"small\" | \"small-medium\"",
|
|
119
|
+
"references": {}
|
|
120
|
+
},
|
|
121
|
+
"required": false,
|
|
122
|
+
"optional": false,
|
|
123
|
+
"docs": {
|
|
124
|
+
"tags": [],
|
|
125
|
+
"text": "Define o tamanho de acordo com o tipo utilizado pelo componente."
|
|
126
|
+
},
|
|
127
|
+
"attribute": "size",
|
|
128
|
+
"reflect": true,
|
|
129
|
+
"defaultValue": "\"small\""
|
|
130
|
+
},
|
|
131
|
+
"label": {
|
|
132
|
+
"type": "string",
|
|
133
|
+
"mutable": false,
|
|
134
|
+
"complexType": {
|
|
135
|
+
"original": "string",
|
|
136
|
+
"resolved": "string",
|
|
137
|
+
"references": {}
|
|
138
|
+
},
|
|
139
|
+
"required": false,
|
|
140
|
+
"optional": false,
|
|
141
|
+
"docs": {
|
|
142
|
+
"tags": [],
|
|
143
|
+
"text": "Define o conte\u00FAdo textual ou num\u00E9rico do componente."
|
|
144
|
+
},
|
|
145
|
+
"attribute": "label",
|
|
146
|
+
"reflect": true
|
|
147
|
+
},
|
|
148
|
+
"iconLeft": {
|
|
149
|
+
"type": "string",
|
|
150
|
+
"mutable": false,
|
|
151
|
+
"complexType": {
|
|
152
|
+
"original": "string",
|
|
153
|
+
"resolved": "string",
|
|
154
|
+
"references": {}
|
|
155
|
+
},
|
|
156
|
+
"required": false,
|
|
157
|
+
"optional": false,
|
|
158
|
+
"docs": {
|
|
159
|
+
"tags": [],
|
|
160
|
+
"text": "Define o \u00EDcone a ser usado no lado esquerdo do badge: [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html)"
|
|
161
|
+
},
|
|
162
|
+
"attribute": "icon-left",
|
|
163
|
+
"reflect": true
|
|
164
|
+
},
|
|
165
|
+
"iconRight": {
|
|
166
|
+
"type": "string",
|
|
167
|
+
"mutable": false,
|
|
168
|
+
"complexType": {
|
|
169
|
+
"original": "string",
|
|
170
|
+
"resolved": "string",
|
|
171
|
+
"references": {}
|
|
172
|
+
},
|
|
173
|
+
"required": false,
|
|
174
|
+
"optional": false,
|
|
175
|
+
"docs": {
|
|
176
|
+
"tags": [],
|
|
177
|
+
"text": "Define o \u00EDcone a ser usado no lado direito do badge: [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html)"
|
|
178
|
+
},
|
|
179
|
+
"attribute": "icon-right",
|
|
180
|
+
"reflect": true
|
|
181
|
+
},
|
|
182
|
+
"position": {
|
|
183
|
+
"type": "unknown",
|
|
184
|
+
"mutable": true,
|
|
185
|
+
"complexType": {
|
|
186
|
+
"original": "IPosition",
|
|
187
|
+
"resolved": "IPosition",
|
|
188
|
+
"references": {
|
|
189
|
+
"IPosition": {
|
|
190
|
+
"location": "import",
|
|
191
|
+
"path": "./interfaces/IPosition"
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
},
|
|
195
|
+
"required": false,
|
|
196
|
+
"optional": false,
|
|
197
|
+
"docs": {
|
|
198
|
+
"tags": [],
|
|
199
|
+
"text": "Define a posi\u00E7\u00E3o do \u00EDcone em rela\u00E7\u00E3o ao elemento filho."
|
|
200
|
+
},
|
|
201
|
+
"defaultValue": "{ horizontal: \"right\", vertical: \"top\" }"
|
|
202
|
+
}
|
|
203
|
+
};
|
|
204
|
+
}
|
|
205
|
+
static get states() {
|
|
206
|
+
return {
|
|
207
|
+
"hasSlot": {}
|
|
208
|
+
};
|
|
209
|
+
}
|
|
210
|
+
static get elementRef() { return "_element"; }
|
|
211
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|