@sula-tech/webcomponents 0.10.0 → 0.11.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/loader.cjs.js +1 -1
- package/dist/cjs/{sula-avatar_20.cjs.entry.js → sula-avatar_21.cjs.entry.js} +78 -40
- package/dist/cjs/sula-avatar_21.cjs.entry.js.map +1 -0
- package/dist/cjs/webcomponents.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/sula-breadcrumb/model/sula-breadcrumb.model.js +2 -0
- package/dist/collection/components/sula-breadcrumb/model/sula-breadcrumb.model.js.map +1 -0
- package/dist/collection/components/sula-breadcrumb/sula-breadcrumb.css +1 -0
- package/dist/collection/components/sula-breadcrumb/sula-breadcrumb.js +98 -0
- package/dist/collection/components/sula-breadcrumb/sula-breadcrumb.js.map +1 -0
- package/dist/collection/components/sula-breadcrumb/sula-breadcrumb.stories.js +116 -0
- package/dist/collection/components/sula-breadcrumb/sula-breadcrumb.stories.js.map +1 -0
- package/dist/collection/components/sula-button/sula-button.js +1 -1
- package/dist/collection/components/sula-checkbox/sula-checkbox.js +3 -3
- package/dist/collection/components/sula-chip/sula-chip.js +3 -3
- package/dist/collection/components/sula-dropdown/sula-dropdown.js +3 -3
- package/dist/collection/components/sula-icon/sula-icon.css +1 -1
- package/dist/collection/components/sula-icon/sula-icon.js +1 -1
- package/dist/collection/components/sula-loader/sula-loader.js +1 -1
- package/dist/collection/components/sula-menu-select-list/sula-menu-select-list.js +1 -1
- package/dist/collection/components/sula-progress-bar/sula-progress-bar.js +2 -2
- package/dist/collection/components/sula-radio-button/sula-radio-button.js +2 -2
- package/dist/collection/components/sula-search-bar/sula-search-bar.js +2 -2
- package/dist/collection/components/sula-segmented-control/sula-segmented-control.js +1 -1
- package/dist/collection/components/sula-switch/sula-switch.js +4 -4
- package/dist/collection/components/sula-tag/sula-tag.js +3 -3
- package/dist/collection/components/sula-textarea/sula-textarea.js +6 -6
- package/dist/collection/components/sula-textfield/sula-textfield.js +2 -2
- package/dist/collection/components/sula-tiles/sula-tiles.js +1 -1
- package/dist/collection/components/sula-timeline-list/sula-timeline-list.js +1 -1
- package/dist/components/{p-BZgImhEG.js → p-CD0__3qt.js} +5 -5
- package/dist/components/{p-BZgImhEG.js.map → p-CD0__3qt.js.map} +1 -1
- package/dist/components/{p-QU2wuzIe.js → p-CFhhi4NQ.js} +3 -3
- package/dist/components/{p-QU2wuzIe.js.map → p-CFhhi4NQ.js.map} +1 -1
- package/dist/components/{p-BUnU7bjf.js → p-CkPiwCwQ.js} +3 -3
- package/dist/components/{p-BUnU7bjf.js.map → p-CkPiwCwQ.js.map} +1 -1
- package/dist/components/{p-BuA_ueQn.js → p-DO7voMbe.js} +4 -4
- package/dist/components/{p-BuA_ueQn.js.map → p-DO7voMbe.js.map} +1 -1
- package/dist/components/sula-avatar.js +1 -1
- package/dist/components/sula-badge.js +1 -1
- package/dist/components/sula-breadcrumb.d.ts +11 -0
- package/dist/components/sula-breadcrumb.js +70 -0
- package/dist/components/sula-breadcrumb.js.map +1 -0
- package/dist/components/sula-button.js +1 -1
- package/dist/components/sula-checkbox.js +4 -4
- package/dist/components/sula-chip.js +5 -5
- package/dist/components/sula-dropdown.js +5 -5
- package/dist/components/sula-icon.js +1 -1
- package/dist/components/sula-loader.js +1 -1
- package/dist/components/sula-menu-select-list.js +1 -1
- package/dist/components/sula-modal.js +3 -3
- package/dist/components/sula-progress-bar.js +3 -3
- package/dist/components/sula-radio-button.js +2 -2
- package/dist/components/sula-search-bar.js +3 -3
- package/dist/components/sula-segmented-control.js +2 -2
- package/dist/components/sula-switch.js +4 -4
- package/dist/components/sula-tag.js +4 -4
- package/dist/components/sula-textarea.js +6 -6
- package/dist/components/sula-textfield.js +3 -3
- package/dist/components/sula-tiles.js +2 -2
- package/dist/components/sula-timeline-list.js +2 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{sula-avatar_20.entry.js → sula-avatar_21.entry.js} +78 -41
- package/dist/{cjs/sula-avatar_20.cjs.entry.js.map → esm/sula-avatar_21.entry.js.map} +1 -1
- package/dist/esm/webcomponents.js +1 -1
- package/dist/types/components/sula-breadcrumb/model/sula-breadcrumb.model.d.ts +5 -0
- package/dist/types/components/sula-breadcrumb/sula-breadcrumb.d.ts +14 -0
- package/dist/types/components/sula-breadcrumb/sula-breadcrumb.stories.d.ts +39 -0
- package/dist/types/components.d.ts +44 -0
- package/dist/webcomponents/{p-fbc8b4d8.entry.js → p-491c4d76.entry.js} +246 -189
- package/dist/webcomponents/p-491c4d76.entry.js.map +1 -0
- package/dist/webcomponents/webcomponents.esm.js +3 -1
- package/package.json +1 -1
- package/dist/esm/sula-avatar_20.entry.js.map +0 -1
- package/dist/webcomponents/p-fbc8b4d8.entry.js.map +0 -1
|
@@ -7,7 +7,7 @@ export class SulaIcon {
|
|
|
7
7
|
this.customClass = '';
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: 'ed3e8bbf3b6b0850a11ec9f06cc7ee970d003588' }, h("i", { key: '60ff6cb3fce52bfd14b54ecc51d912ccac05fe3f', class: `${this.icon} ${this.customClass} sula-icon` })));
|
|
11
11
|
}
|
|
12
12
|
static get is() { return "sula-icon"; }
|
|
13
13
|
static get originalStyleUrls() {
|
|
@@ -45,7 +45,7 @@ export class SulaLoader {
|
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
47
|
const { width, height } = this.getDimensions();
|
|
48
|
-
return (h(Host, { key: '
|
|
48
|
+
return (h(Host, { key: 'abd6665256f4e7173603ccc791b20f884bf9e9b6' }, h("div", { key: '41f9fb073388d7fc2a1585231fb8c257e5996847', ref: el => (this.containerRef = el), style: {
|
|
49
49
|
width: width,
|
|
50
50
|
height: height,
|
|
51
51
|
} })));
|
|
@@ -14,7 +14,7 @@ export class SulaMenuSelectList {
|
|
|
14
14
|
};
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
return (h(Host, { key: '
|
|
17
|
+
return (h(Host, { key: 'e2ebd128ad92b6e8a88a068f2b50797c2388659d' }, h("ul", { key: '4609da5d501bf2ee036ef846f26476c94e6a1910', class: {
|
|
18
18
|
'bg-surface-body border border-line-general sula-menu-select-list rounded-sm py-12 max-h-[260px] overflow-auto': true,
|
|
19
19
|
'w-300': !this.fullWidth,
|
|
20
20
|
'w-full': this.fullWidth,
|
|
@@ -53,10 +53,10 @@ export class SulaProgressBar {
|
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
render() {
|
|
56
|
-
return (h(Host, { key: '
|
|
56
|
+
return (h(Host, { key: 'd584c2e2c020ec016a426650fa48fcd843f0c523' }, h("div", { key: 'f2b4e9940cde1280934377ad3db3bab063a5d28d', class: "flex flex-col w-full space-y-8" }, h("div", { key: '8b597aa608fdb404d98f2cbf8022efb539bf999d', class: "flex justify-between items-center" }, h("label", { key: '73763e3827e31b967310142c65b67a0587691711', class: "text-sm text-text-secondary leading-[14px]" }, this.topLabel), this.getProgressBarStateElement()), h("div", { key: 'd240b3850e4dfccea231fbdda5bd8366c8c0cc05', style: { width: `${this.progress}%` }, class: {
|
|
57
57
|
'h-12 rounded-xxl': true,
|
|
58
58
|
[this.getProgressBarStyle()]: true,
|
|
59
|
-
} }), h("label", { key: '
|
|
59
|
+
} }), h("label", { key: 'ffe21db4a0c39f1272370acc780b2d3ba061cd53', class: "text-sm text-text-secondary leading-[14px]" }, this.bottomLabel))));
|
|
60
60
|
}
|
|
61
61
|
static get is() { return "sula-progress-bar"; }
|
|
62
62
|
static get encapsulation() { return "shadow"; }
|
|
@@ -34,14 +34,14 @@ export class SulaRadioButton {
|
|
|
34
34
|
};
|
|
35
35
|
}
|
|
36
36
|
render() {
|
|
37
|
-
return (h(Host, { key: '
|
|
37
|
+
return (h(Host, { key: '5427806e9da1752271b0b4be480ab0a2039a8ee0' }, h("div", { key: '0f6a35b1263d47bd28aa54dd895976abe8d48159', class: { 'w-fit': true, 'flex items-center': !!this.label }, onClick: this.handleClick }, h("div", { key: 'cf61f1205714408193621f4c8455adecf2798dcb', class: {
|
|
38
38
|
'min-w-[30px] min-h-[30px] rounded-full flex justify-center items-center outline-none': true,
|
|
39
39
|
'active:bg-states-empty-bg-pressed cursor-pointer': !this.disabled,
|
|
40
40
|
'bg-brand-primary': this.checked,
|
|
41
41
|
'border border-line-input': !this.checked,
|
|
42
42
|
'container-focus': this.radioIsFocus,
|
|
43
43
|
'bg-states-bg-disabled border-2 border-states-bg-disabled cursor-not-allowed': this.disabled,
|
|
44
|
-
}, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleFocusOut }, this.checked && h("div", { key: '
|
|
44
|
+
}, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleFocusOut }, this.checked && h("div", { key: 'e8c87ab372235aac8ce7258d1a91081b63a519eb', class: "bg-transparent border-2 border-negative-negative-1 w-[18px] h-[18px] rounded-full" })), this.label && h("label", { key: 'b7fdb7bdf9e8aaa5e5049cac408b24e912a4399a', class: { 'ml-16 text-base text-text-primary': true, 'cursor-pointer': !this.disabled } }, this.label))));
|
|
45
45
|
}
|
|
46
46
|
static get is() { return "sula-radio-button"; }
|
|
47
47
|
static get encapsulation() { return "shadow"; }
|
|
@@ -43,11 +43,11 @@ export class SulaSearchBar {
|
|
|
43
43
|
return style[this.searchBarStyle];
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
|
-
return (h(Host, { key: '
|
|
46
|
+
return (h(Host, { key: 'e5d8f7608d743e75d2071dde601f3bbb295cc415' }, h("div", { key: '84e01e17c71129cce09372b1a76ed486ce3d168b', class: {
|
|
47
47
|
'flex flex-row items-center space-x-12 px-16 rounded-xxl h-44 caret-brand-primary outline-none group': true,
|
|
48
48
|
[this.getStyleClass()]: true,
|
|
49
49
|
'search-bar-focus': this.isFocused,
|
|
50
|
-
}, tabIndex: 0, onFocus: this.handleInputFocus, onClick: this.handleInputFocus }, !this.isFocused && this.leftIcon && (h("div", { key: '
|
|
50
|
+
}, tabIndex: 0, onFocus: this.handleInputFocus, onClick: this.handleInputFocus }, !this.isFocused && this.leftIcon && (h("div", { key: 'f8f61d01078eea0273ca1eabdea401f841a7931a', class: "flex justify-center items-center leading-6" }, h("sula-icon", { key: '6567a11f541d140dac9303607371c7e2f8b04f96', icon: this.leftIcon, customClass: "text-2xl text-icon-primary group-hover:text-brand-primary" }))), h("input", { key: '69dc721e94529cb2f6c22baa9fd917754d7e0dff', ref: node => (this.inputElement = node), type: "text", class: "outline-none border-none w-full bg-transparent text-text-primary", placeholder: this.placeholder, onBlur: this.handleInputBlur, value: this.value, onInput: this.handleValueChanges }), this.rightIcon && (h("div", { key: '5b3b9aca94cf85dcef78605738e05900838efcf6', class: "flex justify-center items-center leading-6 cursor-pointer", onClick: this.handleRightIconClick, onMouseDown: e => e.preventDefault() }, h("sula-icon", { key: '04a65741683ccf50852e3015c085ffc5714bb0f6', icon: this.rightIcon, customClass: "text-2xl text-icon-primary" }))))));
|
|
51
51
|
}
|
|
52
52
|
static get is() { return "sula-search-bar"; }
|
|
53
53
|
static get encapsulation() { return "shadow"; }
|
|
@@ -36,7 +36,7 @@ export class SulaSegmentedControl {
|
|
|
36
36
|
return item.selected ? 'text-brand-primary' : 'text-text-primary';
|
|
37
37
|
}
|
|
38
38
|
render() {
|
|
39
|
-
return (h(Host, { key: '
|
|
39
|
+
return (h(Host, { key: '047229bea44614f1b7570d405d342c1924e7f368' }, h("div", { key: '14df0e4cf5316c609a5961c7b5a9e2adf75efdda', class: {
|
|
40
40
|
'flex flex-row items-center rounded-xxl p-2 w-fit backdrop-blur-[20px]': true,
|
|
41
41
|
'bg-opacity-on-body': this.color === SulaSegmentedControlColor.Gray,
|
|
42
42
|
'bg-opacity-body': this.color === SulaSegmentedControlColor.White,
|
|
@@ -35,23 +35,23 @@ export class SulaSwitch {
|
|
|
35
35
|
};
|
|
36
36
|
}
|
|
37
37
|
render() {
|
|
38
|
-
return (h(Host, { key: '
|
|
38
|
+
return (h(Host, { key: '5147ccb90d8e6a9b3de3eaa1ceefb3dd4e655f37' }, h("div", { key: 'ebae10c01afe26b23afcbaa86bab531fe56e617f', class: {
|
|
39
39
|
'outline-none': true,
|
|
40
40
|
'flex items-center space-x-12': !!this.label && this.type === SulaSwitchType.Default,
|
|
41
41
|
'flex items-center justify-between bg-surface-on-body rounded-md w-[280px] min-h-[85px] px-24 py-16': this.type === SulaSwitchType.List,
|
|
42
42
|
'hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed cursor-pointer': this.type === SulaSwitchType.List && !this.disabled,
|
|
43
43
|
'container-focus': this.isFocus && this.type === SulaSwitchType.List,
|
|
44
|
-
}, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, tabIndex: 0 }, this.type === SulaSwitchType.List && (h("div", { key: '
|
|
44
|
+
}, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, tabIndex: 0 }, this.type === SulaSwitchType.List && (h("div", { key: '6e3132438518dee7a1337db52a204387d2828ec3', class: "flex flex-col flex-1 mr-16 overflow-hidden" }, !!this.label && h("label", { key: '830b2c235cc07efb236f6a86d90dd7d62b3b776a', class: "text-text-primary font-bold text-base cursor-pointer break-words" }, this.label), !!this.subTitle && h("span", { key: 'd085e4e303aad5b75d275d894f03b0e9ea201a47', class: "text-text-secondary text-base break-words" }, this.subTitle))), h("div", { key: 'ff6f20db45aa6c0050b233ff541f8973cd5f4244', class: {
|
|
45
45
|
'switch-container w-56 h-32 flex items-center rounded-xxl p-2 outline-none': true,
|
|
46
46
|
'switch-on bg-brand-primary justify-end': this.active,
|
|
47
47
|
'switch-off bg-neutral-neutral-3 justify-start': !this.active,
|
|
48
48
|
'cursor-not-allowed bg-states-bg-disabled': this.disabled,
|
|
49
49
|
'switch-focus': this.isFocus && this.type === SulaSwitchType.Default,
|
|
50
|
-
}, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '
|
|
50
|
+
}, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'e43cca2e88a20a524201ed0d785a8ba81ed8a4f7', class: {
|
|
51
51
|
'switch-thumb w-[28px] h-[28px] rounded-full flex justify-center items-center': true,
|
|
52
52
|
'bg-negative-negative-1': !this.disabled,
|
|
53
53
|
'bg-states-bg-disabled shadow-md': this.disabled,
|
|
54
|
-
} }, h("div", { key: '
|
|
54
|
+
} }, h("div", { key: '248043d5d4e7e53718563cc722937644362c47bf', class: {
|
|
55
55
|
'switch-indicator rounded-full': true,
|
|
56
56
|
'switch-indicator-on w-12 h-12 bg-brand-primary': this.active,
|
|
57
57
|
'switch-indicator-off w-[10px] h-4 bg-neutral-neutral-4': !this.active,
|
|
@@ -72,14 +72,14 @@ export class SulaTag {
|
|
|
72
72
|
return iconStatusStyles[this.iconStatus];
|
|
73
73
|
}
|
|
74
74
|
render() {
|
|
75
|
-
return (h(Host, { key: '
|
|
75
|
+
return (h(Host, { key: '7adccbc8b3035550420d5e0eac1d46f68052526d' }, h("div", { key: '65526b32c1e2db8888d70b79732526e7b0e20812', class: {
|
|
76
76
|
'flex items-center rounded-xxl w-fit': true,
|
|
77
77
|
[this.getSizeClass()]: true,
|
|
78
78
|
[this.getAppearanceClass()]: true,
|
|
79
|
-
} }, this.icon && (h("div", { key: '
|
|
79
|
+
} }, this.icon && (h("div", { key: '3808e66f0596f2e2f73520bfccb7504f4b20b6cf', class: {
|
|
80
80
|
'flex justify-center items-center mr-8 rounded-full leading-4 px-2 py-1': true,
|
|
81
81
|
[this.getIconStatusClass()]: true,
|
|
82
|
-
} }, h("sula-icon", { key: '
|
|
82
|
+
} }, h("sula-icon", { key: '88a00ebd5e3692d72f832d6fe5a1db74cb608334', icon: this.icon, "custom-class": "text-base text-negative-negative-1 leading-4" }))), h("span", { key: 'a8bfa714580e86bbc9972320a6ae9f9820076f5b', class: {
|
|
83
83
|
'text-base leading-4': true,
|
|
84
84
|
[this.getTextColorClass()]: true,
|
|
85
85
|
[this.getTextWeightClass()]: true,
|
|
@@ -124,32 +124,32 @@ export class SulaTextarea {
|
|
|
124
124
|
}
|
|
125
125
|
render() {
|
|
126
126
|
const containerHeight = this.rows * 24 + 48;
|
|
127
|
-
return (h(Host, { key: '
|
|
127
|
+
return (h(Host, { key: 'f920e3734338d888531522bf9140c8d3982e2f69', ref: node => (this.node = node) }, h("div", { key: '2afeec5069358b61d7e5b26cb9aac627dd76f845' }, h("div", { key: '79273334d739ddf9d9be0ed536497764fa877ffc', id: "textarea-container", class: {
|
|
128
128
|
'relative border rounded-sm px-16 py-12 outline-none caret-brand-primary': true,
|
|
129
129
|
'textarea-focus': this.textareaIsFocused && !this.disabled && this.status === SulaTextareaStatus.Default,
|
|
130
130
|
'textarea-error': this.status === SulaTextareaStatus.Error && !this.disabled,
|
|
131
131
|
'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
|
|
132
132
|
'bg-surface-body border-line-input cursor-text': !this.disabled,
|
|
133
|
-
}, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: '
|
|
133
|
+
}, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: '10b0a9b82f07d8c9b8267d49f3c2d32e3c508bd8', class: {
|
|
134
134
|
'text-base top-16 left-12 absolute transition-all duration-200 ease-in-out pointer-events-none z-10 w-[85%]': true,
|
|
135
135
|
'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
|
|
136
136
|
'text-text-disabled': this.disabled,
|
|
137
137
|
'bg-surface-body': !this.disabled && this.isActive,
|
|
138
|
-
}, ref: node => (this.labelElement = node) }, this.label), h("label", { key: '
|
|
138
|
+
}, ref: node => (this.labelElement = node) }, this.label), h("label", { key: 'e3bed9dc020446dceb4149a667b60af5dc55bff3', class: {
|
|
139
139
|
'absolute font-bold transition-all duration-200 ease-in-out pointer-events-none z-10 active-label hidden from-down': true,
|
|
140
140
|
'text-sm top-12 left-16': this.isActive,
|
|
141
141
|
'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
|
|
142
142
|
'text-text-disabled': this.disabled,
|
|
143
143
|
'bg-surface-body': !this.disabled && this.isActive,
|
|
144
|
-
}, ref: node => (this.activeLabelElement = node) }, this.label), h("textarea", { key: '
|
|
144
|
+
}, ref: node => (this.activeLabelElement = node) }, this.label), h("textarea", { key: '1ba336d4bcf9c276b69b65c8165edc1b30a2490b', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
|
|
145
145
|
'w-full h-full outline-none text-base bg-transparent border-none resize-none': true,
|
|
146
146
|
'text-text-primary': !this.disabled,
|
|
147
147
|
'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,
|
|
148
|
-
}, style: { paddingTop: this.isActive ? `${this.labelPadding}px` : '0' }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: '
|
|
148
|
+
}, style: { paddingTop: this.isActive ? `${this.labelPadding}px` : '0' }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: '359a206d17995cec9bdbd3c9832de597827e1d0f', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: '64e46f682c87605bd793d0fffe0f74eea16931c3', id: "textarea-help-text", class: {
|
|
149
149
|
'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
|
|
150
150
|
'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
|
|
151
151
|
'text-text-disabled': this.disabled,
|
|
152
|
-
} }, this.helpText)), this.maxLength && (h("div", { key: '
|
|
152
|
+
} }, this.helpText)), this.maxLength && (h("div", { key: '761b430f847ea583d720570320f7fdbed53a5d6f', id: "max-length-container", class: {
|
|
153
153
|
'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
|
|
154
154
|
'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
|
|
155
155
|
'text-text-disabled': this.disabled,
|
|
@@ -129,14 +129,14 @@ export class SulaTextfield {
|
|
|
129
129
|
return this.icon;
|
|
130
130
|
}
|
|
131
131
|
render() {
|
|
132
|
-
return (h(Host, { key: '
|
|
132
|
+
return (h(Host, { key: '40a7bb18169b3d8970b45c694c1893ff9f64bbab', ref: node => (this.node = node) }, h("div", { key: '6777fa4dd7436443969d0c0e1142be8c4eb284e7' }, h("div", { key: 'd3d7789d4d36d65adedf1ad6b6e62c8957ebb680', id: "button-container", class: {
|
|
133
133
|
'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,
|
|
134
134
|
'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,
|
|
135
135
|
'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,
|
|
136
136
|
'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,
|
|
137
137
|
'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
|
|
138
138
|
'bg-surface-body border-line-input cursor-pointer': !this.disabled,
|
|
139
|
-
}, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h("div", { key: '
|
|
139
|
+
}, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h("div", { key: '956eadf48754f760e062d83663e32c47fcff1337', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: '99e202b916e25409144476a9c57fe75e0753f4ff', class: "font-bold text-sm text-text-primary from-down" }, this.label), h("input", { key: '1bac9e8fff8f951ca2dd2fcbc60b5efe97757254', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: "outline-none text-base text-text-primary bg-transparent", onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.textValue }))), h("div", { key: 'cb1626373a04dda96120a28bb982b72db41e3b4e', id: "textfield-label", class: { 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, ref: node => (this.labelElement = node) }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && (h("div", { key: '09050fd2dc99bc07a73565804a5332bddfa2883c', class: "flex items-center justify-center", onClick: this.handleIconClick }, h("sula-icon", { key: '120077ac071a88964d824f66117eb9b4a97ca93c', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h("div", { key: 'e1cf2bd5e34d00125807f12d853c0630e1061434', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'fd485e6cd34d4a90df9f15e33359e5ed02c4bf82', id: "textfield-help-text", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.helpText)), this.maxLength && (h("div", { key: '70b2df0825f91a40db9e2e111c83947e8df6c7e9', id: "max-length-container", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
|
|
140
140
|
}
|
|
141
141
|
static get is() { return "sula-textfield"; }
|
|
142
142
|
static get encapsulation() { return "shadow"; }
|
|
@@ -121,7 +121,7 @@ export class SulaTiles {
|
|
|
121
121
|
return (h("div", { class: this.getTextContainerClasses() }, h("span", { class: this.getTextClasses(true), title: this.ellipsis ? this.text : undefined }, this.text), this.hasSubText && (h("span", { class: this.getTextClasses(false), title: this.ellipsis ? this.subText : undefined }, this.subText))));
|
|
122
122
|
}
|
|
123
123
|
render() {
|
|
124
|
-
return (h(Host, { key: '
|
|
124
|
+
return (h(Host, { key: '77ee1e56a324ab1971d9e81288222087363bb4b6' }, h("div", { key: '88acc4015fcf2cbe96ad300b17428b6e06d713e1', class: this.getContainerClasses(), tabIndex: this.getTabIndex(this.isSquare), onClick: this.handleClick }, this.renderIcon(), this.renderText())));
|
|
125
125
|
}
|
|
126
126
|
static get is() { return "sula-tiles"; }
|
|
127
127
|
static get encapsulation() { return "shadow"; }
|
|
@@ -37,7 +37,7 @@ export class SulaTimelineList {
|
|
|
37
37
|
return iconByStatus[status];
|
|
38
38
|
}
|
|
39
39
|
render() {
|
|
40
|
-
return (h(Host, { key: '
|
|
40
|
+
return (h(Host, { key: '7dc177fdc19ba097bd9cf686036817c883f25051' }, h("div", { key: '265a172c85656bdbd04ab2517f50b7fe5d558f82', class: "flex flex-col bg-surface-on-body px-24 py-32 w-fit rounded-md" }, this.sulaTimelineList.map((item, index) => {
|
|
41
41
|
const isLastItem = index === this.sulaTimelineList.length - 1;
|
|
42
42
|
return (h("div", { class: {
|
|
43
43
|
'relative timeline-item': true,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
|
|
2
|
-
import { d as defineCustomElement$1, a as SulaLoaderSize } from './p-
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
2
|
+
import { d as defineCustomElement$1, a as SulaLoaderSize } from './p-CkPiwCwQ.js';
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-DO7voMbe.js';
|
|
4
4
|
|
|
5
5
|
var SulaButtonAppearance;
|
|
6
6
|
(function (SulaButtonAppearance) {
|
|
@@ -184,7 +184,7 @@ const SulaButton = /*@__PURE__*/ proxyCustomElement(class SulaButton extends H {
|
|
|
184
184
|
return SulaLoaderSize.Medium;
|
|
185
185
|
}
|
|
186
186
|
render() {
|
|
187
|
-
return (h(Host, { key: '
|
|
187
|
+
return (h(Host, { key: '1c1409076f20518df6a3a722d40f3ea80ca66f76' }, h("button", { key: '418ecd2a69e07eeccd8f9f42951ef4e7739e10d9', id: "button-container", class: this.getBaseButtonClass(), disabled: this.buttonDisabled || this.loading, onClick: this.handleClick }, this.loading && (h("div", { key: 'b3e1dce8d48638856806552e2dc1cd4d135673f6' }, h("sula-loader", { key: 'af9ea685849daf30b45518c6f13b71b9e9e48509', size: this.getLoadingSize() }))), !this.loading && (h("div", { key: 'f865dbf7286efb931c89b4fc366c2b2410b82516', class: "flex w-full justify-center items-center" }, this.leftIcon && h("sula-icon", { key: '24ced9ecfd42c590f884226ffb0d135164febeed', icon: this.leftIcon, customClass: "text-lg mr-8" }), this.renderIconContent(), this.renderTextContent(), this.renderArrowIcon(), this.rightIcon && h("sula-icon", { key: 'def421acb1a2d3e66fd0556e20ba9ddb7f2789e3', icon: this.rightIcon, customClass: "text-lg ml-8" }))))));
|
|
188
188
|
}
|
|
189
189
|
static get style() { return sulaButtonCss; }
|
|
190
190
|
}, [1, "sula-button", {
|
|
@@ -226,6 +226,6 @@ function defineCustomElement() {
|
|
|
226
226
|
defineCustomElement();
|
|
227
227
|
|
|
228
228
|
export { SulaButton as S, SulaButtonAppearance as a, defineCustomElement as d };
|
|
229
|
-
//# sourceMappingURL=p-
|
|
229
|
+
//# sourceMappingURL=p-CD0__3qt.js.map
|
|
230
230
|
|
|
231
|
-
//# sourceMappingURL=p-
|
|
231
|
+
//# sourceMappingURL=p-CD0__3qt.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-BZgImhEG.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-button/model/sula-button.model.ts","src/components/sula-button/sula-button.scss?tag=sula-button&encapsulation=shadow","src/components/sula-button/sula-button.tsx"],"sourcesContent":["export enum SulaButtonAppearance {\n Default = 'default',\n Secondary = 'secondary',\n Text = 'text',\n}\n\nexport enum SulaButtonSize {\n Large = 'large',\n Default = 'default',\n Cta = 'cta',\n}\n\nexport enum SulaButtonStatus {\n Primary = 'primary',\n Danger = 'danger',\n Negative = 'negative',\n}\n\nexport enum SulaButtonType {\n Icon = 'icon',\n Text = 'text',\n}\n",":host {\n display: block;\n}\n\nbutton {\n &:focus {\n outline: 2px solid var(--color-feedback-informational) !important;\n outline-offset: 2px !important;\n }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { SulaButtonAppearance, SulaButtonSize, SulaButtonStatus, SulaButtonType } from './model/sula-button.model';\nimport { SulaLoaderSize } from '../sula-loader/model/sula-loader.model';\n\n@Component({\n tag: 'sula-button',\n styleUrl: 'sula-button.scss',\n shadow: true,\n})\nexport class SulaButton {\n /**\n * Button text when is text type\n */\n @Prop({ mutable: true }) text: string;\n\n /**\n * Button icon when is Icon type\n */\n @Prop({ mutable: true }) icon: string;\n\n /**\n * Button left icon\n */\n @Prop({ mutable: true }) leftIcon: string;\n\n /**\n * Button right icon\n */\n @Prop({ mutable: true }) rightIcon: string;\n\n /**\n * Button appearance\n */\n @Prop({ mutable: true }) appearance: SulaButtonAppearance = SulaButtonAppearance.Default;\n\n /**\n * Button type\n */\n @Prop({ mutable: true }) type: SulaButtonType = SulaButtonType.Text;\n\n /**\n * Button size\n */\n @Prop({ mutable: true }) size: SulaButtonSize = SulaButtonSize.Default;\n\n /**\n * Button status\n */\n @Prop({ mutable: true }) status: SulaButtonStatus = SulaButtonStatus.Primary;\n\n /**\n * Is button loading\n */\n @Prop({ mutable: true }) loading: boolean = false;\n\n /**\n * Is button disabled\n */\n @Prop({ mutable: true }) buttonDisabled: boolean = false;\n\n /**\n * If true, button will take the full width of its container\n */\n @Prop({ mutable: true, attribute: 'full-width' }) fullWidth: boolean = false;\n\n /**\n * Event emitted when button is clicked.\n * @note If button is disabled event won't be emitted\n */\n @Event()\n buttonClicked: EventEmitter<void>;\n\n private getAppearanceClass() {\n if (this.loading) return;\n const appearanceStyles = {\n [SulaButtonAppearance.Default]: this.getDefaultButtonStyles(),\n [SulaButtonAppearance.Secondary]: `border ${this.getSecondaryButtonStyles()}`,\n [SulaButtonAppearance.Text]: `flex items-center space-x-8 ${this.getTextButtonStyles()}`,\n };\n\n return appearanceStyles[this.appearance];\n }\n\n private getButtonDisabledClass() {\n return this.appearance === SulaButtonAppearance.Text ? 'text-text-disabled' : 'bg-states-bg-disabled text-text-disabled border-none';\n }\n\n private getDefaultButtonStyles() {\n if (this.buttonDisabled) {\n return this.getButtonDisabledClass();\n }\n\n const statusStyles = {\n [SulaButtonStatus.Primary]: 'bg-brand-primary text-white hover:bg-states-primary-hover active:bg-states-primary-pressed',\n [SulaButtonStatus.Danger]: 'bg-feedback-error text-white hover:bg-states-danger-hover active:bg-opacity-85 active:bg-states-danger-pressed',\n [SulaButtonStatus.Negative]: 'bg-negative-negative-1 text-negative-negative-2 hover:bg-states-negative-hover active:bg-states-negative-pressed',\n };\n\n return statusStyles[this.status];\n }\n\n private getSecondaryButtonStyles() {\n if (this.buttonDisabled) {\n return this.getButtonDisabledClass();\n }\n\n const statusStyles = {\n [SulaButtonStatus.Primary]: 'border-brand-primary text-brand-primary hover:bg-states-empty-bg-hover bg-white active:bg-states-empty-bg-pressed',\n [SulaButtonStatus.Danger]: 'border-feedback-error text-feedback-error hover:bg-states-empty-bg-hover bg-white active:bg-states-empty-bg-pressed',\n [SulaButtonStatus.Negative]: 'border-negative-negative-1 text-negative-negative-1 bg-transparent hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed',\n };\n\n return statusStyles[this.status];\n }\n\n private getTextButtonStyles() {\n if (this.buttonDisabled) {\n return this.getButtonDisabledClass();\n }\n\n const statusStyles = {\n [SulaButtonStatus.Primary]: 'text-brand-primary',\n [SulaButtonStatus.Danger]: 'text-feedback-error',\n [SulaButtonStatus.Negative]: 'text-negative-negative-1',\n };\n\n return statusStyles[this.status];\n }\n\n private getTextTypeSizeClass() {\n const sizeClasses = {\n [SulaButtonSize.Default]: 'py-4 h-[40px]',\n [SulaButtonSize.Large]: 'py-4 h-[56px]',\n };\n\n return sizeClasses[this.size];\n }\n\n private getButtonSizeByTypeClass() {\n if (this.loading) {\n if (this.type === SulaButtonType.Icon) {\n return {\n 'w-[40px] h-[40px] p-8': this.size === SulaButtonSize.Default,\n 'w-[56px] h-[56px] p-16': this.size === SulaButtonSize.Large,\n };\n }\n\n return {\n 'w-[56px] h-[44px]': this.size === SulaButtonSize.Default,\n 'w-[64px] h-[56px]': this.size === SulaButtonSize.Large,\n };\n }\n if (this.type === SulaButtonType.Text) {\n return this.appearance === SulaButtonAppearance.Text\n ? { [this.getTextTypeSizeClass()]: true }\n : {\n ['px-16 py-4 min-w-[120px] h-[40px]']: this.size === SulaButtonSize.Default,\n ['px-16 py-4 min-w-[120px] h-[56px]']: this.size === SulaButtonSize.Large,\n };\n }\n\n return {\n 'flex justify-center items-center': true,\n ['p-8 h-[40px] min-w-[40px]']: this.size === SulaButtonSize.Default,\n ['p-16 py-4 min-w-[56px] h-[56px]']: this.size === SulaButtonSize.Large,\n };\n }\n\n private getArrowIconContainerClass() {\n return {\n 'flex items-center justify-center w-24 h-24 rounded-xxl': true,\n 'group-hover:bg-states-empty-bg-hover': !this.buttonDisabled && this.type === SulaButtonType.Text,\n 'text-icon-primary': !this.buttonDisabled,\n 'text-icon-disabled': this.buttonDisabled,\n };\n }\n\n private getBaseButtonClass() {\n return {\n [this.getAppearanceClass()]: true,\n ...this.getButtonSizeByTypeClass(),\n 'rounded-xxl': this.appearance !== SulaButtonAppearance.Text,\n 'rounded-xs focus:bg-states-empty-bg-hover': this.appearance === SulaButtonAppearance.Text,\n 'font-bold text-base group': true,\n 'disabled': this.buttonDisabled,\n 'bg-states-empty-bg-pressed flex justify-center items-center': this.loading,\n 'w-full': this.fullWidth,\n };\n }\n\n private renderIconContent() {\n if (this.type === SulaButtonType.Icon) {\n return <sula-icon id=\"button-icon\" icon={this.icon} customClass=\"text-2xl\" class=\"flex leading-6\"></sula-icon>;\n }\n return null;\n }\n\n private renderTextContent() {\n if (this.text && this.type === SulaButtonType.Text) {\n return <div id=\"button-text\">{this.text}</div>;\n }\n return null;\n }\n\n private renderArrowIcon() {\n if (this.appearance === SulaButtonAppearance.Text) {\n return (\n <div class={this.getArrowIconContainerClass()}>\n <sula-icon icon=\"ph-bold ph-caret-right\" customClass=\"text-lg\"></sula-icon>\n </div>\n );\n }\n return null;\n }\n\n getLoadingSize() {\n if (this.type === SulaButtonType.Icon || this.size === SulaButtonSize.Default) {\n return SulaLoaderSize.Small;\n }\n\n return SulaLoaderSize.Medium;\n }\n\n handleClick = () => {\n if (!this.buttonDisabled && !this.loading) {\n this.buttonClicked.emit();\n }\n };\n\n render() {\n return (\n <Host>\n <button id=\"button-container\" class={this.getBaseButtonClass()} disabled={this.buttonDisabled || this.loading} onClick={this.handleClick}>\n {this.loading && (\n <div>\n <sula-loader size={this.getLoadingSize()}></sula-loader>\n </div>\n )}\n {!this.loading && (\n <div class=\"flex w-full justify-center items-center\">\n {this.leftIcon && <sula-icon icon={this.leftIcon} customClass=\"text-lg mr-8\"></sula-icon>}\n {this.renderIconContent()}\n {this.renderTextContent()}\n {this.renderArrowIcon()}\n {this.rightIcon && <sula-icon icon={this.rightIcon} customClass=\"text-lg ml-8\"></sula-icon>}\n </div>\n )}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-CD0__3qt.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-button/model/sula-button.model.ts","src/components/sula-button/sula-button.scss?tag=sula-button&encapsulation=shadow","src/components/sula-button/sula-button.tsx"],"sourcesContent":["export enum SulaButtonAppearance {\n Default = 'default',\n Secondary = 'secondary',\n Text = 'text',\n}\n\nexport enum SulaButtonSize {\n Large = 'large',\n Default = 'default',\n Cta = 'cta',\n}\n\nexport enum SulaButtonStatus {\n Primary = 'primary',\n Danger = 'danger',\n Negative = 'negative',\n}\n\nexport enum SulaButtonType {\n Icon = 'icon',\n Text = 'text',\n}\n",":host {\n display: block;\n}\n\nbutton {\n &:focus {\n outline: 2px solid var(--color-feedback-informational) !important;\n outline-offset: 2px !important;\n }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { SulaButtonAppearance, SulaButtonSize, SulaButtonStatus, SulaButtonType } from './model/sula-button.model';\nimport { SulaLoaderSize } from '../sula-loader/model/sula-loader.model';\n\n@Component({\n tag: 'sula-button',\n styleUrl: 'sula-button.scss',\n shadow: true,\n})\nexport class SulaButton {\n /**\n * Button text when is text type\n */\n @Prop({ mutable: true }) text: string;\n\n /**\n * Button icon when is Icon type\n */\n @Prop({ mutable: true }) icon: string;\n\n /**\n * Button left icon\n */\n @Prop({ mutable: true }) leftIcon: string;\n\n /**\n * Button right icon\n */\n @Prop({ mutable: true }) rightIcon: string;\n\n /**\n * Button appearance\n */\n @Prop({ mutable: true }) appearance: SulaButtonAppearance = SulaButtonAppearance.Default;\n\n /**\n * Button type\n */\n @Prop({ mutable: true }) type: SulaButtonType = SulaButtonType.Text;\n\n /**\n * Button size\n */\n @Prop({ mutable: true }) size: SulaButtonSize = SulaButtonSize.Default;\n\n /**\n * Button status\n */\n @Prop({ mutable: true }) status: SulaButtonStatus = SulaButtonStatus.Primary;\n\n /**\n * Is button loading\n */\n @Prop({ mutable: true }) loading: boolean = false;\n\n /**\n * Is button disabled\n */\n @Prop({ mutable: true }) buttonDisabled: boolean = false;\n\n /**\n * If true, button will take the full width of its container\n */\n @Prop({ mutable: true, attribute: 'full-width' }) fullWidth: boolean = false;\n\n /**\n * Event emitted when button is clicked.\n * @note If button is disabled event won't be emitted\n */\n @Event()\n buttonClicked: EventEmitter<void>;\n\n private getAppearanceClass() {\n if (this.loading) return;\n const appearanceStyles = {\n [SulaButtonAppearance.Default]: this.getDefaultButtonStyles(),\n [SulaButtonAppearance.Secondary]: `border ${this.getSecondaryButtonStyles()}`,\n [SulaButtonAppearance.Text]: `flex items-center space-x-8 ${this.getTextButtonStyles()}`,\n };\n\n return appearanceStyles[this.appearance];\n }\n\n private getButtonDisabledClass() {\n return this.appearance === SulaButtonAppearance.Text ? 'text-text-disabled' : 'bg-states-bg-disabled text-text-disabled border-none';\n }\n\n private getDefaultButtonStyles() {\n if (this.buttonDisabled) {\n return this.getButtonDisabledClass();\n }\n\n const statusStyles = {\n [SulaButtonStatus.Primary]: 'bg-brand-primary text-white hover:bg-states-primary-hover active:bg-states-primary-pressed',\n [SulaButtonStatus.Danger]: 'bg-feedback-error text-white hover:bg-states-danger-hover active:bg-opacity-85 active:bg-states-danger-pressed',\n [SulaButtonStatus.Negative]: 'bg-negative-negative-1 text-negative-negative-2 hover:bg-states-negative-hover active:bg-states-negative-pressed',\n };\n\n return statusStyles[this.status];\n }\n\n private getSecondaryButtonStyles() {\n if (this.buttonDisabled) {\n return this.getButtonDisabledClass();\n }\n\n const statusStyles = {\n [SulaButtonStatus.Primary]: 'border-brand-primary text-brand-primary hover:bg-states-empty-bg-hover bg-white active:bg-states-empty-bg-pressed',\n [SulaButtonStatus.Danger]: 'border-feedback-error text-feedback-error hover:bg-states-empty-bg-hover bg-white active:bg-states-empty-bg-pressed',\n [SulaButtonStatus.Negative]: 'border-negative-negative-1 text-negative-negative-1 bg-transparent hover:bg-states-empty-bg-hover active:bg-states-empty-bg-pressed',\n };\n\n return statusStyles[this.status];\n }\n\n private getTextButtonStyles() {\n if (this.buttonDisabled) {\n return this.getButtonDisabledClass();\n }\n\n const statusStyles = {\n [SulaButtonStatus.Primary]: 'text-brand-primary',\n [SulaButtonStatus.Danger]: 'text-feedback-error',\n [SulaButtonStatus.Negative]: 'text-negative-negative-1',\n };\n\n return statusStyles[this.status];\n }\n\n private getTextTypeSizeClass() {\n const sizeClasses = {\n [SulaButtonSize.Default]: 'py-4 h-[40px]',\n [SulaButtonSize.Large]: 'py-4 h-[56px]',\n };\n\n return sizeClasses[this.size];\n }\n\n private getButtonSizeByTypeClass() {\n if (this.loading) {\n if (this.type === SulaButtonType.Icon) {\n return {\n 'w-[40px] h-[40px] p-8': this.size === SulaButtonSize.Default,\n 'w-[56px] h-[56px] p-16': this.size === SulaButtonSize.Large,\n };\n }\n\n return {\n 'w-[56px] h-[44px]': this.size === SulaButtonSize.Default,\n 'w-[64px] h-[56px]': this.size === SulaButtonSize.Large,\n };\n }\n if (this.type === SulaButtonType.Text) {\n return this.appearance === SulaButtonAppearance.Text\n ? { [this.getTextTypeSizeClass()]: true }\n : {\n ['px-16 py-4 min-w-[120px] h-[40px]']: this.size === SulaButtonSize.Default,\n ['px-16 py-4 min-w-[120px] h-[56px]']: this.size === SulaButtonSize.Large,\n };\n }\n\n return {\n 'flex justify-center items-center': true,\n ['p-8 h-[40px] min-w-[40px]']: this.size === SulaButtonSize.Default,\n ['p-16 py-4 min-w-[56px] h-[56px]']: this.size === SulaButtonSize.Large,\n };\n }\n\n private getArrowIconContainerClass() {\n return {\n 'flex items-center justify-center w-24 h-24 rounded-xxl': true,\n 'group-hover:bg-states-empty-bg-hover': !this.buttonDisabled && this.type === SulaButtonType.Text,\n 'text-icon-primary': !this.buttonDisabled,\n 'text-icon-disabled': this.buttonDisabled,\n };\n }\n\n private getBaseButtonClass() {\n return {\n [this.getAppearanceClass()]: true,\n ...this.getButtonSizeByTypeClass(),\n 'rounded-xxl': this.appearance !== SulaButtonAppearance.Text,\n 'rounded-xs focus:bg-states-empty-bg-hover': this.appearance === SulaButtonAppearance.Text,\n 'font-bold text-base group': true,\n 'disabled': this.buttonDisabled,\n 'bg-states-empty-bg-pressed flex justify-center items-center': this.loading,\n 'w-full': this.fullWidth,\n };\n }\n\n private renderIconContent() {\n if (this.type === SulaButtonType.Icon) {\n return <sula-icon id=\"button-icon\" icon={this.icon} customClass=\"text-2xl\" class=\"flex leading-6\"></sula-icon>;\n }\n return null;\n }\n\n private renderTextContent() {\n if (this.text && this.type === SulaButtonType.Text) {\n return <div id=\"button-text\">{this.text}</div>;\n }\n return null;\n }\n\n private renderArrowIcon() {\n if (this.appearance === SulaButtonAppearance.Text) {\n return (\n <div class={this.getArrowIconContainerClass()}>\n <sula-icon icon=\"ph-bold ph-caret-right\" customClass=\"text-lg\"></sula-icon>\n </div>\n );\n }\n return null;\n }\n\n getLoadingSize() {\n if (this.type === SulaButtonType.Icon || this.size === SulaButtonSize.Default) {\n return SulaLoaderSize.Small;\n }\n\n return SulaLoaderSize.Medium;\n }\n\n handleClick = () => {\n if (!this.buttonDisabled && !this.loading) {\n this.buttonClicked.emit();\n }\n };\n\n render() {\n return (\n <Host>\n <button id=\"button-container\" class={this.getBaseButtonClass()} disabled={this.buttonDisabled || this.loading} onClick={this.handleClick}>\n {this.loading && (\n <div>\n <sula-loader size={this.getLoadingSize()}></sula-loader>\n </div>\n )}\n {!this.loading && (\n <div class=\"flex w-full justify-center items-center\">\n {this.leftIcon && <sula-icon icon={this.leftIcon} customClass=\"text-lg mr-8\"></sula-icon>}\n {this.renderIconContent()}\n {this.renderTextContent()}\n {this.renderArrowIcon()}\n {this.rightIcon && <sula-icon icon={this.rightIcon} customClass=\"text-lg ml-8\"></sula-icon>}\n </div>\n )}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -21,7 +21,7 @@ const SulaMenuSelectList = /*@__PURE__*/ proxyCustomElement(class SulaMenuSelect
|
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
23
|
render() {
|
|
24
|
-
return (h(Host, { key: '
|
|
24
|
+
return (h(Host, { key: 'e2ebd128ad92b6e8a88a068f2b50797c2388659d' }, h("ul", { key: '4609da5d501bf2ee036ef846f26476c94e6a1910', class: {
|
|
25
25
|
'bg-surface-body border border-line-general sula-menu-select-list rounded-sm py-12 max-h-[260px] overflow-auto': true,
|
|
26
26
|
'w-300': !this.fullWidth,
|
|
27
27
|
'w-full': this.fullWidth,
|
|
@@ -56,6 +56,6 @@ function defineCustomElement() {
|
|
|
56
56
|
defineCustomElement();
|
|
57
57
|
|
|
58
58
|
export { SulaMenuSelectList as S, defineCustomElement as d };
|
|
59
|
-
//# sourceMappingURL=p-
|
|
59
|
+
//# sourceMappingURL=p-CFhhi4NQ.js.map
|
|
60
60
|
|
|
61
|
-
//# sourceMappingURL=p-
|
|
61
|
+
//# sourceMappingURL=p-CFhhi4NQ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-CFhhi4NQ.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,s8XAAs8X;;MCQv9X,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;AAL/B,IAAA,WAAA,GAAA;;;;;AAME;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAuB,EAAE;AAE9B;;AAEG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAcjB,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,IAAsB,KAAI;AACvC,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;AAC9B,SAAC;AAgCF;IA9BC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,+GAA+G,EAAE,IAAI;AACrH,gBAAA,OAAO,EAAE,CAAC,IAAI,CAAC,SAAS;gBACxB,QAAQ,EAAE,IAAI,CAAC,SAAS;aACzB,EAEA,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAG;AACrB,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE;AAC1E,YAAA,QACE,CACE,CAAA,IAAA,EAAA,EAAA,KAAK,EAAE;AACL,oBAAA,sFAAsF,EAAE,IAAI;oBAC5F,mBAAmB,EAAE,CAAC,UAAU;AAChC,oBAAA,2BAA2B,EAAE,UAAU;iBACxC,EACD,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAA,EAEpC,IAAI,CAAC,KAAK,CACR;AAET,SAAC,CAAC,CACC,CACA;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-menu-select-list/sula-menu-select-list.scss?tag=sula-menu-select-list&encapsulation=shadow","src/components/sula-menu-select-list/sula-menu-select-list.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.sula-menu-select-list {\n box-shadow: 0px 8px 16px 0px #0000000a;\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { SulaMenuListItem } from './model/sula-menu-select-list.model';\n\n@Component({\n tag: 'sula-menu-select-list',\n styleUrl: 'sula-menu-select-list.scss',\n shadow: true,\n})\nexport class SulaMenuSelectList {\n /**\n * Items for list\n */\n @Prop({ mutable: true })\n items: SulaMenuListItem[] = [];\n\n /**\n * Menu is full width\n */\n @Prop()\n fullWidth = false;\n\n /**\n * Selected value\n */\n @Prop()\n selectedValue?: SulaMenuListItem;\n\n /**\n * Event emitted when item is selected\n */\n @Event()\n itemSelected: EventEmitter<SulaMenuListItem>;\n\n handleClick = (item: SulaMenuListItem) => {\n this.itemSelected.emit(item);\n };\n\n render() {\n return (\n <Host>\n <ul\n class={{\n 'bg-surface-body border border-line-general sula-menu-select-list rounded-sm py-12 max-h-[260px] overflow-auto': true,\n 'w-300': !this.fullWidth,\n 'w-full': this.fullWidth,\n }}\n >\n {this.items.map(item => {\n const isSelected = this.selectedValue && this.selectedValue.id === item.id;\n return (\n <li \n class={{\n 'w-full px-24 py-16 text-base leading-4 hover:bg-states-empty-bg-hover cursor-pointer': true,\n 'text-text-primary': !isSelected,\n 'text-text-brand font-bold': isSelected,\n }} \n key={item.id} \n onClick={() => this.handleClick(item)}\n >\n {item.title}\n </li>\n );\n })}\n </ul>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -27094,7 +27094,7 @@ const SulaLoader = /*@__PURE__*/ proxyCustomElement(class SulaLoader extends H {
|
|
|
27094
27094
|
}
|
|
27095
27095
|
render() {
|
|
27096
27096
|
const { width, height } = this.getDimensions();
|
|
27097
|
-
return (h$1(Host, { key: '
|
|
27097
|
+
return (h$1(Host, { key: 'abd6665256f4e7173603ccc791b20f884bf9e9b6' }, h$1("div", { key: '41f9fb073388d7fc2a1585231fb8c257e5996847', ref: el => (this.containerRef = el), style: {
|
|
27098
27098
|
width: width,
|
|
27099
27099
|
height: height,
|
|
27100
27100
|
} })));
|
|
@@ -27121,6 +27121,6 @@ function defineCustomElement() {
|
|
|
27121
27121
|
defineCustomElement();
|
|
27122
27122
|
|
|
27123
27123
|
export { SulaLoader as S, SulaLoaderSize as a, defineCustomElement as d };
|
|
27124
|
-
//# sourceMappingURL=p-
|
|
27124
|
+
//# sourceMappingURL=p-CkPiwCwQ.js.map
|
|
27125
27125
|
|
|
27126
|
-
//# sourceMappingURL=p-
|
|
27126
|
+
//# sourceMappingURL=p-CkPiwCwQ.js.map
|