@vertexvis/ui 0.1.0-testing.1 → 0.1.0-testing.3
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/button-edd366d8.js +67 -0
- package/dist/cjs/icon-button-f868bf06.js +43 -0
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/vertex-button.cjs.entry.js +1 -1
- package/dist/cjs/vertex-icon-button.cjs.entry.js +1 -1
- package/dist/collection/components/button/button.css +17 -3
- package/dist/collection/components/icon-button/icon-button.css +14 -3
- package/dist/components/components.esm.js +1 -1
- package/dist/components/index.esm.js +1 -1
- package/dist/components/p-64e8b92c.js +1 -0
- package/dist/components/p-ee8b96b2.js +1 -0
- package/dist/components/p-f900d0f4.entry.js +1 -0
- package/dist/components/p-fca52578.entry.js +1 -0
- package/dist/esm/button-547336b8.js +65 -0
- package/dist/esm/icon-button-25edf617.js +41 -0
- package/dist/esm/index.js +2 -2
- package/dist/esm/vertex-button.entry.js +1 -1
- package/dist/esm/vertex-icon-button.entry.js +1 -1
- package/package.json +3 -3
- package/dist/cjs/button-76a9db69.js +0 -67
- package/dist/cjs/icon-button-5e74c757.js +0 -43
- package/dist/components/p-2d065b0a.entry.js +0 -1
- package/dist/components/p-87de6fc5.js +0 -1
- package/dist/components/p-9a46c8b6.entry.js +0 -1
- package/dist/components/p-afd1c978.js +0 -1
- package/dist/esm/button-f9ac74e4.js +0 -65
- package/dist/esm/icon-button-3000a0dc.js +0 -41
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const index = require('./index-6a92256c.js');
|
|
4
|
+
const index$1 = require('./index-e1b40fa6.js');
|
|
5
|
+
|
|
6
|
+
const buttonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}a{text-decoration:none;font-family:var(--vertex-ui-font-family)}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed}:host([type]){-webkit-appearance:none !important}:host([disabled=\"\"]){pointer-events:none}.btn{display:flex;align-items:center;justify-content:center;border-radius:0.25rem;box-sizing:border-box;text-decoration:none;cursor:var(--enabled-cursor)}.btn-full{width:100%}.btn.disabled,.btn:not(.disabled):focus,.btn:not(.disabled):active{outline:none}.btn.disabled{cursor:var(--disabled-cursor)}.btn-sm{font-size:var(--vertex-ui-text-sm)}.btn-sm:not(.btn-plaintext){padding:0 0.25rem}.btn-md{font-size:var(--vertex-ui-text-base)}.btn-md:not(.btn-plaintext){padding:0.5rem 1rem}.btn-lg{font-size:var(--vertex-ui-text-lg)}.btn-lg:not(.btn-plaintext){padding:0.75rem 0.75rem}.btn-plaintext{color:var(--vertex-ui-neutral-800)}.btn-primary{color:white;background-color:var(--vertex-ui-blue-700)}.btn-primary:not(.disabled):hover{background-color:var(--vertex-ui-blue-500)}.btn-primary:not(.disabled):focus,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-primary:not(.disabled):active{box-shadow:none}.btn-primary.disabled{background-color:var(--vertex-ui-blue-200);cursor:var(--disabled-cursor)}.btn-secondary{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%)}.btn-secondary:not(.disabled):focus,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-secondary:not(.disabled):active{box-shadow:none}.btn-secondary.disabled{background-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-400)}.btn-danger{color:white;background-color:var(--vertex-ui-red-600)}.btn-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-400)}.btn-danger:not(.disabled):focus{background-color:var(--vertex-ui-red-500);box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-danger:not(.disabled):active{background-color:var(--vertex-ui-red-600);box-shadow:none}.btn-danger.disabled{background-color:var(--vertex-ui-red-200);box-shadow:none}.btn-txt-primary{color:var(--vertex-ui-blue-600)}.btn-txt-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-txt-primary:not(.disabled):focus,.btn-txt-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-txt-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-txt-primary:not(.disabled):active{box-shadow:none}.btn-txt-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-txt-secondary{color:var(--vertex-ui-neutral-700)}.btn-txt-secondary:not(.disabled):hover,.btn-txt-secondary:not(.disabled):active,.btn-txt-secondary:not(.disabled):focus{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-txt-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-txt-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-txt-danger{color:var(--vertex-ui-red-600)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active,.btn-txt-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-txt-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-txt-danger:not(.disabled):active{box-shadow:none}.btn-txt-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}";
|
|
7
|
+
|
|
8
|
+
const Button = class {
|
|
9
|
+
constructor(hostRef) {
|
|
10
|
+
index.registerInstance(this, hostRef);
|
|
11
|
+
this.type = undefined;
|
|
12
|
+
this.color = 'secondary';
|
|
13
|
+
this.variant = 'solid';
|
|
14
|
+
this.size = 'md';
|
|
15
|
+
this.expand = 'block';
|
|
16
|
+
this.href = undefined;
|
|
17
|
+
this.target = undefined;
|
|
18
|
+
this.disabled = undefined;
|
|
19
|
+
}
|
|
20
|
+
connectedCallback() {
|
|
21
|
+
if (this.hostElement != null && this.type === 'submit') {
|
|
22
|
+
const form = this.hostElement.closest('form');
|
|
23
|
+
if (form != null) {
|
|
24
|
+
this.fakeButton = document.createElement('button');
|
|
25
|
+
this.fakeButton.setAttribute('type', this.type);
|
|
26
|
+
this.fakeButton.setAttribute('style', 'display: none');
|
|
27
|
+
this.fakeButton.setAttribute('data-testid', 'vertex-fake-button');
|
|
28
|
+
form.appendChild(this.fakeButton);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
disconnectedCallback() {
|
|
33
|
+
if (this.hostElement != null && this.fakeButton != null) {
|
|
34
|
+
this.fakeButton.remove();
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
render() {
|
|
38
|
+
const classes = index$1.classnames('btn', {
|
|
39
|
+
'btn-full': this.expand === 'full',
|
|
40
|
+
'btn-sm': this.size === 'sm',
|
|
41
|
+
'btn-md': this.size === 'md',
|
|
42
|
+
'btn-lg': this.size === 'lg',
|
|
43
|
+
'btn-primary': this.color === 'primary' && this.variant === 'solid',
|
|
44
|
+
'btn-secondary': this.color === 'secondary' && this.variant === 'solid',
|
|
45
|
+
'btn-danger': this.color === 'danger' && this.variant === 'solid',
|
|
46
|
+
'btn-txt-primary': this.color === 'primary' && this.variant === 'text',
|
|
47
|
+
'btn-txt-secondary': this.color === 'secondary' && this.variant === 'text',
|
|
48
|
+
'btn-txt-danger': this.color === 'danger' && this.variant === 'text',
|
|
49
|
+
'btn-plaintext': this.variant === 'plaintext',
|
|
50
|
+
disabled: this.disabled,
|
|
51
|
+
});
|
|
52
|
+
if (this.href != null && this.type != null) {
|
|
53
|
+
console.warn('The type attribute is ignored when href is provided');
|
|
54
|
+
}
|
|
55
|
+
return (index.h(index.Host, { style: { pointerEvents: this.disabled ? 'none' : undefined } }, this.href != null && this.href !== '' ? (index.h("a", { href: this.href, target: this.target, class: classes, tabIndex: this.disabled ? -1 : 0 }, index.h("slot", null))) : (index.h("button", { class: classes, disabled: this.disabled, type: this.type, onClick: (event) => this.handleClick(event) }, index.h("slot", { name: "left" }), index.h("slot", null)))));
|
|
56
|
+
}
|
|
57
|
+
handleClick(event) {
|
|
58
|
+
if (this.fakeButton != null) {
|
|
59
|
+
event.preventDefault();
|
|
60
|
+
this.fakeButton.click();
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
get hostElement() { return index.getElement(this); }
|
|
64
|
+
};
|
|
65
|
+
Button.style = buttonCss;
|
|
66
|
+
|
|
67
|
+
exports.Button = Button;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const index = require('./index-6a92256c.js');
|
|
4
|
+
const index$1 = require('./index-e1b40fa6.js');
|
|
5
|
+
const iconHelper = require('./icon-helper-caf2699e.js');
|
|
6
|
+
|
|
7
|
+
const iconButtonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed;--hover-background-color:var(--vertex-ui-neutral-300);--active-background-color:var(--vertex-ui-neutral-400);--focus-background-color:var(--vertex-ui-neutral-400);--hover-box-shadow:0 2px 2px rgb(0 0 0 / 20%);--active-box-shadow:none;--focus-box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.container{display:flex;justify-content:center;align-items:center;outline:none;fill:currentColor;color:currentColor;cursor:var(--enabled-cursor)}.container:not(.plain){border-radius:4px;padding:0.25rem}.icon-button{display:flex;justify-content:center;align-items:center;fill:currentColor;height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.icon-button svg{width:100%;height:100%}.floating{background-color:var(--vertex-ui-neutral-100);box-shadow:var(--vertex-ui-overlay-shadow);color:var(--vertex-ui-neutral-700);fill:var(--vertex-ui-neutral-700);opacity:0.95}.floating.disabled{color:var(--vertex-ui-neutral-400);cursor:var(--disabled-cursor)}.container:not(.disabled):not(.plain):hover{background-color:var(--hover-background-color);box-shadow:var(--hover-box-shadow)}.container:not(.disabled):not(.plain):active{background-color:var(--active-background-color);box-shadow:var(--active-box-shadow)}.container:not(.disabled):not(.plain):focus-visible{background-color:var(--focus-background-color);box-shadow:var(--focus-box-shadow);color:var(--vertex-ui-neutral-900)}.container.disabled:not(.floating){cursor:var(--disabled-cursor);color:var(--vertex-ui-neutral-400)}.container.primary:not(.disabled){color:var(--vertex-ui-blue-700)}.container.secondary:not(.disabled){color:var(--vertex-ui-neutral-800)}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}";
|
|
8
|
+
|
|
9
|
+
const IconButton = class {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
index.registerInstance(this, hostRef);
|
|
12
|
+
this.iconName = undefined;
|
|
13
|
+
this.disabled = undefined;
|
|
14
|
+
this.variant = 'default';
|
|
15
|
+
this.iconColor = 'default';
|
|
16
|
+
this.iconSize = 'md';
|
|
17
|
+
}
|
|
18
|
+
render() {
|
|
19
|
+
return (index.h(index.Host, { onClick: (e) => this.handleClick(e) }, index.h("button", { ref: (el) => (this.buttonEl = el), disabled: this.disabled, class: index$1.classnames('container', {
|
|
20
|
+
disabled: this.disabled,
|
|
21
|
+
floating: this.variant === 'floating',
|
|
22
|
+
plain: this.variant === 'plain',
|
|
23
|
+
primary: this.iconColor === 'primary',
|
|
24
|
+
secondary: this.iconColor === 'secondary',
|
|
25
|
+
}) }, index.h("slot", { name: "left" }), index.h("div", { class: index$1.classnames('icon-button', {
|
|
26
|
+
xs: this.iconSize === 'xs',
|
|
27
|
+
sm: this.iconSize === 'sm',
|
|
28
|
+
md: this.iconSize === 'md',
|
|
29
|
+
lg: this.iconSize === 'lg',
|
|
30
|
+
}) }, iconHelper.getSvg(this.iconName)), index.h("slot", null))));
|
|
31
|
+
}
|
|
32
|
+
handleClick(event) {
|
|
33
|
+
var _a;
|
|
34
|
+
if (this.disabled) {
|
|
35
|
+
event.preventDefault();
|
|
36
|
+
event.stopPropagation();
|
|
37
|
+
}
|
|
38
|
+
(_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.blur();
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
IconButton.style = iconButtonCss;
|
|
42
|
+
|
|
43
|
+
exports.IconButton = IconButton;
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const autoResizeTextarea = require('./auto-resize-textarea-deb05359.js');
|
|
6
6
|
const avatar = require('./avatar-e69bb687.js');
|
|
7
7
|
const avatarGroup = require('./avatar-group-d2af53e4.js');
|
|
8
|
-
const button = require('./button-
|
|
8
|
+
const button = require('./button-edd366d8.js');
|
|
9
9
|
const card = require('./card-ae9e8a8f.js');
|
|
10
10
|
const cardGroup = require('./card-group-da93e610.js');
|
|
11
11
|
const chip = require('./chip-a3b2e8e0.js');
|
|
@@ -21,7 +21,7 @@ const dropdownMenu = require('./dropdown-menu-5ae03a72.js');
|
|
|
21
21
|
const expandable = require('./expandable-b1cd4f0b.js');
|
|
22
22
|
const helpTooltip = require('./help-tooltip-f72eccc7.js');
|
|
23
23
|
const icon = require('./icon-53d62a46.js');
|
|
24
|
-
const iconButton = require('./icon-button-
|
|
24
|
+
const iconButton = require('./icon-button-f868bf06.js');
|
|
25
25
|
const logoLoading = require('./logo-loading-4d49fedf.js');
|
|
26
26
|
const menu = require('./menu-d1ecf43b.js');
|
|
27
27
|
const menuDivider = require('./menu-divider-5bdebe5d.js');
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const iconButton = require('./icon-button-
|
|
5
|
+
const iconButton = require('./icon-button-f868bf06.js');
|
|
6
6
|
require('./index-6a92256c.js');
|
|
7
7
|
require('./index-e1b40fa6.js');
|
|
8
8
|
require('./icon-helper-caf2699e.js');
|
|
@@ -10,6 +10,20 @@ a {
|
|
|
10
10
|
font-family: var(--vertex-ui-font-family);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
+
:host {
|
|
14
|
+
/*
|
|
15
|
+
The cursor to display when the button is enabled.
|
|
16
|
+
Defaults to `pointer`.
|
|
17
|
+
*/
|
|
18
|
+
--enabled-cursor: pointer;
|
|
19
|
+
|
|
20
|
+
/*
|
|
21
|
+
The cursor to display when the button is disabled.
|
|
22
|
+
Defaults to `not-allowed`.
|
|
23
|
+
*/
|
|
24
|
+
--disabled-cursor: not-allowed;
|
|
25
|
+
}
|
|
26
|
+
|
|
13
27
|
/* some global styles set in a consuming app apply to the host element
|
|
14
28
|
and tailwind has a [type] selector that overrides the
|
|
15
29
|
attribute defined on this component */
|
|
@@ -28,7 +42,7 @@ a {
|
|
|
28
42
|
border-radius: 0.25rem;
|
|
29
43
|
box-sizing: border-box;
|
|
30
44
|
text-decoration: none;
|
|
31
|
-
cursor:
|
|
45
|
+
cursor: var(--enabled-cursor);
|
|
32
46
|
}
|
|
33
47
|
|
|
34
48
|
.btn-full {
|
|
@@ -42,7 +56,7 @@ a {
|
|
|
42
56
|
}
|
|
43
57
|
|
|
44
58
|
.btn.disabled {
|
|
45
|
-
cursor:
|
|
59
|
+
cursor: var(--disabled-cursor);
|
|
46
60
|
}
|
|
47
61
|
|
|
48
62
|
.btn-sm {
|
|
@@ -96,7 +110,7 @@ a {
|
|
|
96
110
|
|
|
97
111
|
.btn-primary.disabled {
|
|
98
112
|
background-color: var(--vertex-ui-blue-200);
|
|
99
|
-
cursor:
|
|
113
|
+
cursor: var(--disabled-cursor);
|
|
100
114
|
}
|
|
101
115
|
|
|
102
116
|
.btn-secondary {
|
|
@@ -6,6 +6,17 @@ button {
|
|
|
6
6
|
padding: 0;
|
|
7
7
|
}
|
|
8
8
|
:host {
|
|
9
|
+
/*
|
|
10
|
+
The cursor to display when the button is enabled.
|
|
11
|
+
Defaults to `pointer`.
|
|
12
|
+
*/
|
|
13
|
+
--enabled-cursor: pointer;
|
|
14
|
+
|
|
15
|
+
/*
|
|
16
|
+
The cursor to display when the button is disabled.
|
|
17
|
+
Defaults to `not-allowed`.
|
|
18
|
+
*/
|
|
19
|
+
--disabled-cursor: not-allowed;
|
|
9
20
|
/*
|
|
10
21
|
The background color of this button when hovered.
|
|
11
22
|
Defaults to neutral-300.
|
|
@@ -45,7 +56,7 @@ button {
|
|
|
45
56
|
outline: none;
|
|
46
57
|
fill: currentColor;
|
|
47
58
|
color: currentColor;
|
|
48
|
-
cursor:
|
|
59
|
+
cursor: var(--enabled-cursor);
|
|
49
60
|
}
|
|
50
61
|
|
|
51
62
|
.container:not(.plain) {
|
|
@@ -77,7 +88,7 @@ button {
|
|
|
77
88
|
|
|
78
89
|
.floating.disabled {
|
|
79
90
|
color: var(--vertex-ui-neutral-400);
|
|
80
|
-
cursor:
|
|
91
|
+
cursor: var(--disabled-cursor);
|
|
81
92
|
}
|
|
82
93
|
|
|
83
94
|
.container:not(.disabled):not(.plain):hover {
|
|
@@ -97,7 +108,7 @@ button {
|
|
|
97
108
|
}
|
|
98
109
|
|
|
99
110
|
.container.disabled:not(.floating) {
|
|
100
|
-
cursor:
|
|
111
|
+
cursor: var(--disabled-cursor);
|
|
101
112
|
color: var(--vertex-ui-neutral-400);
|
|
102
113
|
}
|
|
103
114
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{d as e,N as t,w as a,p as o,a as r,b as i}from"./p-6834631c.js";export{s as setNonce}from"./p-6834631c.js";(()=>{const i=Array.from(e.querySelectorAll("script")).find((e=>new RegExp(`/${t}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===t)),n={};return n.resourcesUrl=new URL(".",new URL(i.getAttribute("data-resources-url")||i.src,a.location.href)).href,((o,i)=>{const n=`__sc_import_${t.replace(/\s|-/g,"_")}`;try{a[n]=new Function("w",`return import(w);//${Math.random()}`)}catch(t){const l=new Map;a[n]=t=>{var c;const s=new URL(t,o).href;let p=l.get(s);if(!p){const t=e.createElement("script");t.type="module",t.crossOrigin=i.crossOrigin,t.src=URL.createObjectURL(new Blob([`import * as m from '${s}'; window.${n}.m = m;`],{type:"application/javascript"}));const o=null!==(c=r.t)&&void 0!==c?c:function(e){var t,a,o;return null!==(o=null===(a=null===(t=e.head)||void 0===t?void 0:t.querySelector('meta[name="csp-nonce"]'))||void 0===a?void 0:a.getAttribute("content"))&&void 0!==o?o:void 0}(e);null!=o&&t.setAttribute("nonce",o),p=new Promise((e=>{t.onload=()=>{e(a[n].m),t.remove()}})),l.set(s,p),e.head.appendChild(t)}return p}}})(n.resourcesUrl,i),a.customElements?o(n):__sc_import_components("./p-c3ec6642.js").then((()=>n))})().then((e=>i([["p-24c72960",[[6,"vertex-click-to-edit-textfield",{placeholder:[1],fontSize:[1,"font-size"],disabled:[516],multiline:[4],minRows:[2,"min-rows"],maxRows:[2,"max-rows"],value:[1032],autoFocus:[4,"auto-focus"],editing:[1540],hasError:[4,"has-error"]}]]],["p-226e83a6",[[1,"vertex-collapsible",{label:[1],open:[1540]}]]],["p-41ced35c",[[1,"vertex-context-menu",{targetSelector:[1,"target-selector"],animated:[4],position:[32],open:[32]}]]],["p-0f8b9ede",[[1,"vertex-dialog",{open:[1540],fullscreen:[4],resizable:[4],width:[32],height:[32],minWidth:[32],minHeight:[32],maxWidth:[32],maxHeight:[32],isResizing:[32]},[[4,"keydown","keyDownListener"]]]]],["p-e7336466",[[1,"vertex-draggable-popover",{position:[1],boundarySelector:[1,"boundary-selector"],boundaryPadding:[2,"boundary-padding"],anchorPosition:[32],lastPosition:[32],dragging:[32]}]]],["p-e3d0c2d1",[[1,"vertex-dropdown-menu",{animated:[4],placement:[1],open:[32]}]]],["p-fe7e7a74",[[1,"vertex-help-tooltip",{animated:[4],placement:[1],open:[32]}]]],["p-ae6a3c46",[[6,"vertex-search-bar",{variant:[1],resultItems:[16],triggerCharacters:[16],triggerCharacter:[1,"trigger-character"],breakCharacters:[16],debounce:[2],placeholder:[1],placement:[1],cursorPosition:[32],open:[32],triggerKey:[32],triggerRange:[32],replaceTriggeredValue:[64],getEditableContent:[64]}]]],["p-ebabee40",[[1,"vertex-select",{value:[513],placeholder:[513],disabled:[516],animated:[4],resizeObserverFactory:[16],open:[32],position:[32],displayValue:[32]}]]],["p-16719272",[[1,"vertex-slider",{min:[2],max:[2],valueLabelDisplay:[1,"value-label-display"],step:[8],size:[1],value:[1026],disabled:[4]}]]],["p-756c9977",[[1,"vertex-toast",{content:[1],placement:[1],duration:[2],animated:[4],open:[4],type:[1],isOpen:[32]}]]],["p-7f64b251",[[1,"vertex-color-circle-picker",{colors:[1],supplementalColors:[1,"supplemental-colors"],theme:[513],lightenPercentage:[2,"lighten-percentage"],darkenPercentage:[2,"darken-percentage"],selected:[1537],direction:[1]}]]],["p-35e7ab78",[[1,"vertex-color-picker",{value:[1537],disabled:[4]}]]],["p-53515813",[[1,"vertex-toggle",{variant:[1],disabled:[4],checked:[1540]}]]],["p-bca6275a",[[1,"vertex-avatar",{firstName:[1,"first-name"],lastName:[1,"last-name"],value:[1],active:[4],variant:[1]}]]],["p-91123ff6",[[1,"vertex-avatar-group"]]],["p-
|
|
1
|
+
import{d as e,N as t,w as a,p as o,a as r,b as i}from"./p-6834631c.js";export{s as setNonce}from"./p-6834631c.js";(()=>{const i=Array.from(e.querySelectorAll("script")).find((e=>new RegExp(`/${t}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===t)),n={};return n.resourcesUrl=new URL(".",new URL(i.getAttribute("data-resources-url")||i.src,a.location.href)).href,((o,i)=>{const n=`__sc_import_${t.replace(/\s|-/g,"_")}`;try{a[n]=new Function("w",`return import(w);//${Math.random()}`)}catch(t){const l=new Map;a[n]=t=>{var c;const s=new URL(t,o).href;let p=l.get(s);if(!p){const t=e.createElement("script");t.type="module",t.crossOrigin=i.crossOrigin,t.src=URL.createObjectURL(new Blob([`import * as m from '${s}'; window.${n}.m = m;`],{type:"application/javascript"}));const o=null!==(c=r.t)&&void 0!==c?c:function(e){var t,a,o;return null!==(o=null===(a=null===(t=e.head)||void 0===t?void 0:t.querySelector('meta[name="csp-nonce"]'))||void 0===a?void 0:a.getAttribute("content"))&&void 0!==o?o:void 0}(e);null!=o&&t.setAttribute("nonce",o),p=new Promise((e=>{t.onload=()=>{e(a[n].m),t.remove()}})),l.set(s,p),e.head.appendChild(t)}return p}}})(n.resourcesUrl,i),a.customElements?o(n):__sc_import_components("./p-c3ec6642.js").then((()=>n))})().then((e=>i([["p-24c72960",[[6,"vertex-click-to-edit-textfield",{placeholder:[1],fontSize:[1,"font-size"],disabled:[516],multiline:[4],minRows:[2,"min-rows"],maxRows:[2,"max-rows"],value:[1032],autoFocus:[4,"auto-focus"],editing:[1540],hasError:[4,"has-error"]}]]],["p-226e83a6",[[1,"vertex-collapsible",{label:[1],open:[1540]}]]],["p-41ced35c",[[1,"vertex-context-menu",{targetSelector:[1,"target-selector"],animated:[4],position:[32],open:[32]}]]],["p-0f8b9ede",[[1,"vertex-dialog",{open:[1540],fullscreen:[4],resizable:[4],width:[32],height:[32],minWidth:[32],minHeight:[32],maxWidth:[32],maxHeight:[32],isResizing:[32]},[[4,"keydown","keyDownListener"]]]]],["p-e7336466",[[1,"vertex-draggable-popover",{position:[1],boundarySelector:[1,"boundary-selector"],boundaryPadding:[2,"boundary-padding"],anchorPosition:[32],lastPosition:[32],dragging:[32]}]]],["p-e3d0c2d1",[[1,"vertex-dropdown-menu",{animated:[4],placement:[1],open:[32]}]]],["p-fe7e7a74",[[1,"vertex-help-tooltip",{animated:[4],placement:[1],open:[32]}]]],["p-ae6a3c46",[[6,"vertex-search-bar",{variant:[1],resultItems:[16],triggerCharacters:[16],triggerCharacter:[1,"trigger-character"],breakCharacters:[16],debounce:[2],placeholder:[1],placement:[1],cursorPosition:[32],open:[32],triggerKey:[32],triggerRange:[32],replaceTriggeredValue:[64],getEditableContent:[64]}]]],["p-ebabee40",[[1,"vertex-select",{value:[513],placeholder:[513],disabled:[516],animated:[4],resizeObserverFactory:[16],open:[32],position:[32],displayValue:[32]}]]],["p-16719272",[[1,"vertex-slider",{min:[2],max:[2],valueLabelDisplay:[1,"value-label-display"],step:[8],size:[1],value:[1026],disabled:[4]}]]],["p-756c9977",[[1,"vertex-toast",{content:[1],placement:[1],duration:[2],animated:[4],open:[4],type:[1],isOpen:[32]}]]],["p-7f64b251",[[1,"vertex-color-circle-picker",{colors:[1],supplementalColors:[1,"supplemental-colors"],theme:[513],lightenPercentage:[2,"lighten-percentage"],darkenPercentage:[2,"darken-percentage"],selected:[1537],direction:[1]}]]],["p-35e7ab78",[[1,"vertex-color-picker",{value:[1537],disabled:[4]}]]],["p-53515813",[[1,"vertex-toggle",{variant:[1],disabled:[4],checked:[1540]}]]],["p-bca6275a",[[1,"vertex-avatar",{firstName:[1,"first-name"],lastName:[1,"last-name"],value:[1],active:[4],variant:[1]}]]],["p-91123ff6",[[1,"vertex-avatar-group"]]],["p-fca52578",[[1,"vertex-button",{type:[1],color:[1],variant:[1],size:[1],expand:[1],href:[1],target:[1],disabled:[516]}]]],["p-6d4f055b",[[1,"vertex-card",{mode:[1]}]]],["p-211c1186",[[1,"vertex-card-group",{selected:[516],hovered:[516],expanded:[516]}]]],["p-d7c0c287",[[1,"vertex-chip",{variant:[1],color:[1]}]]],["p-a2018217",[[1,"vertex-logo-loading"]]],["p-cc2e3192",[[1,"vertex-menu-divider"]]],["p-573b8ec6",[[1,"vertex-menu-item",{disabled:[516]}]]],["p-33400eed",[[2,"vertex-radio",{disabled:[516],value:[513],label:[513],name:[513],checked:[516]}]]],["p-8b85ea4a",[[1,"vertex-radio-group",{name:[513],value:[1537]}]]],["p-ea4a2f74",[[1,"vertex-resizable",{horizontalDirection:[1,"horizontal-direction"],verticalDirection:[1,"vertical-direction"],initialHorizontalScale:[2,"initial-horizontal-scale"],initialVerticalScale:[2,"initial-vertical-scale"],initializeWithOffset:[4,"initialize-with-offset"],parentSelector:[1,"parent-selector"],verticalSiblingSelector:[1,"vertical-sibling-selector"],horizontalSiblingSelector:[1,"horizontal-sibling-selector"],contentSelector:[1,"content-selector"],position:[1],dimensionsComputed:[1540,"dimensions-computed"],width:[32],minWidth:[32],maxWidth:[32],height:[32],minHeight:[32],maxHeight:[32],left:[32],top:[32],hoveredLocation:[32],dragStartLocation:[32],updateDimensions:[64]}]]],["p-69375605",[[1,"vertex-spinner",{color:[1],size:[1]}]]],["p-80c989fa",[[1,"vertex-expandable",{expanded:[1540],expanding:[1540],collapsing:[1540],controlled:[516],expandType:[513,"expand-type"],animated:[4],contentScrollHeight:[32]}]]],["p-19318fee",[[1,"vertex-result-list",{items:[16],itemsJson:[1,"items"],viewportStartIndex:[1026,"viewport-start-index"],viewportEndIndex:[1026,"viewport-end-index"],resultHeight:[1026,"result-height"],overScanCount:[2,"over-scan-count"],placement:[1],position:[1],open:[4],listHeight:[32],parsedResults:[32],scrollTop:[32],lastStartIndex:[32],lastFocusedIndex:[32],stateMap:[32]}]]],["p-209db2ba",[[6,"vertex-textfield",{type:[1],name:[1],variant:[1],fontSize:[1,"font-size"],multiline:[4],minRows:[2,"min-rows"],maxRows:[2,"max-rows"],placeholder:[1],autoFocus:[4,"auto-focus"],autoComplete:[1,"auto-complete"],autoCorrect:[1,"auto-correct"],value:[1032],disabled:[516],hasError:[4,"has-error"],updateInput:[64],blurInput:[64],getInputValue:[64],selectAll:[64]}]]],["p-45cfd66e",[[1,"vertex-tooltip",{content:[1],disabled:[4],placement:[1],delay:[2],animated:[4],open:[32]}]]],["p-20a74d5d",[[1,"vertex-color-circle",{color:[513],supplementalColor:[513,"supplemental-color"],theme:[513],lightenPercentage:[2,"lighten-percentage"],darkenPercentage:[2,"darken-percentage"],lightened:[1537],darkened:[1537]}]]],["p-9c384f6c",[[1,"vertex-auto-resize-textarea",{textareaSelector:[1,"textarea-selector"],initialValue:[1,"initial-value"],minRows:[514,"min-rows"],maxRows:[514,"max-rows"],textValue:[32]}]]],["p-0517ca62",[[1,"vertex-menu",{animated:[4],open:[1540],placement:[1],fallbackPlacements:[16],backdrop:[4],position:[1040],popoverProps:[16]}]]],["p-f900d0f4",[[1,"vertex-icon-button",{iconName:[1,"icon-name"],disabled:[516],variant:[1],iconColor:[1,"icon-color"],iconSize:[1,"icon-size"]}]]],["p-79fd6fb6",[[1,"vertex-icon",{name:[1],size:[1]}]]],["p-e576818b",[[1,"vertex-popover",{open:[1540],placement:[1],position:[1025],anchorBounds:[16],backdrop:[4],animated:[4],anchorSelector:[1,"anchor-selector"],boundarySelector:[1,"boundary-selector"],resizeBehavior:[1,"resize-behavior"],overflowBehavior:[16],flipBehavior:[16],offsetBehavior:[2,"offset-behavior"],updateOnResize:[4,"update-on-resize"],opened:[32],computedPlacement:[32]}]]]],e)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AutoResizeTextArea}from"./p-bec53c3a.js";export{A as Avatar}from"./p-c2c076f1.js";export{A as AvatarGroup}from"./p-81cb4da4.js";export{B as Button}from"./p-
|
|
1
|
+
export{A as AutoResizeTextArea}from"./p-bec53c3a.js";export{A as Avatar}from"./p-c2c076f1.js";export{A as AvatarGroup}from"./p-81cb4da4.js";export{B as Button}from"./p-64e8b92c.js";export{C as Card}from"./p-a3c04bbd.js";export{C as CardGroup}from"./p-ff4a1c3a.js";export{C as Chip}from"./p-a6614625.js";export{C as ClickToEditTextField}from"./p-0e628c05.js";export{C as Collapsible}from"./p-8fe0084d.js";export{C as ColorCircle}from"./p-d9b9aebe.js";export{C as ColorCirclePicker}from"./p-9374ef6c.js";export{C as ColorPicker}from"./p-8434602f.js";export{C as ContextMenu}from"./p-f2bc7ec5.js";export{D as Dialog}from"./p-165aed7d.js";export{D as DraggablePopover}from"./p-41a7564c.js";export{D as DropdownMenu}from"./p-39133bc7.js";export{E as Expandable}from"./p-6a640a2c.js";export{H as HelpTooltip}from"./p-2cff3285.js";export{I as Icon}from"./p-17b97932.js";export{I as IconButton}from"./p-ee8b96b2.js";export{L as LogoLoading}from"./p-817bf6ff.js";export{M as Menu}from"./p-7b75e004.js";export{M as MenuDivider}from"./p-c939fa4e.js";export{M as MenuItem}from"./p-988058f9.js";export{P as Popover}from"./p-6505cdb3.js";export{R as Radio}from"./p-36c853c4.js";export{R as RadioGroup}from"./p-f693e6f8.js";export{R as Resizable}from"./p-6ec189d2.js";export{R as ResultList}from"./p-52739247.js";export{S as SearchBar}from"./p-4224c2ad.js";export{S as Select}from"./p-552c128f.js";export{S as Slider}from"./p-cd6ddb10.js";export{S as Spinner}from"./p-09ba50c3.js";export{T as TextField}from"./p-bd11e7d1.js";export{T as Toast}from"./p-3dd08a0f.js";export{T as Toggle}from"./p-59fb829f.js";export{T as Tooltip}from"./p-da0a7b57.js";import"./p-6834631c.js";import"./p-b2c7b113.js";import"./p-fe062eb0.js";import"./p-94168b92.js";import"./p-1356f525.js";import"./p-59032668.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,h as e,H as r,g as n}from"./p-6834631c.js";import{c as o}from"./p-fe062eb0.js";const a=class{constructor(e){t(this,e),this.type=void 0,this.color="secondary",this.variant="solid",this.size="md",this.expand="block",this.href=void 0,this.target=void 0,this.disabled=void 0}connectedCallback(){if(null!=this.hostElement&&"submit"===this.type){const t=this.hostElement.closest("form");null!=t&&(this.fakeButton=document.createElement("button"),this.fakeButton.setAttribute("type",this.type),this.fakeButton.setAttribute("style","display: none"),this.fakeButton.setAttribute("data-testid","vertex-fake-button"),t.appendChild(this.fakeButton))}}disconnectedCallback(){null!=this.hostElement&&null!=this.fakeButton&&this.fakeButton.remove()}render(){const t=o("btn",{"btn-full":"full"===this.expand,"btn-sm":"sm"===this.size,"btn-md":"md"===this.size,"btn-lg":"lg"===this.size,"btn-primary":"primary"===this.color&&"solid"===this.variant,"btn-secondary":"secondary"===this.color&&"solid"===this.variant,"btn-danger":"danger"===this.color&&"solid"===this.variant,"btn-txt-primary":"primary"===this.color&&"text"===this.variant,"btn-txt-secondary":"secondary"===this.color&&"text"===this.variant,"btn-txt-danger":"danger"===this.color&&"text"===this.variant,"btn-plaintext":"plaintext"===this.variant,disabled:this.disabled});return null!=this.href&&null!=this.type&&console.warn("The type attribute is ignored when href is provided"),e(r,{style:{pointerEvents:this.disabled?"none":void 0}},null!=this.href&&""!==this.href?e("a",{href:this.href,target:this.target,class:t,tabIndex:this.disabled?-1:0},e("slot",null)):e("button",{class:t,disabled:this.disabled,type:this.type,onClick:t=>this.handleClick(t)},e("slot",{name:"left"}),e("slot",null)))}handleClick(t){null!=this.fakeButton&&(t.preventDefault(),this.fakeButton.click())}get hostElement(){return n(this)}};a.style='button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}a{text-decoration:none;font-family:var(--vertex-ui-font-family)}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed}:host([type]){-webkit-appearance:none !important}:host([disabled=""]){pointer-events:none}.btn{display:flex;align-items:center;justify-content:center;border-radius:0.25rem;box-sizing:border-box;text-decoration:none;cursor:var(--enabled-cursor)}.btn-full{width:100%}.btn.disabled,.btn:not(.disabled):focus,.btn:not(.disabled):active{outline:none}.btn.disabled{cursor:var(--disabled-cursor)}.btn-sm{font-size:var(--vertex-ui-text-sm)}.btn-sm:not(.btn-plaintext){padding:0 0.25rem}.btn-md{font-size:var(--vertex-ui-text-base)}.btn-md:not(.btn-plaintext){padding:0.5rem 1rem}.btn-lg{font-size:var(--vertex-ui-text-lg)}.btn-lg:not(.btn-plaintext){padding:0.75rem 0.75rem}.btn-plaintext{color:var(--vertex-ui-neutral-800)}.btn-primary{color:white;background-color:var(--vertex-ui-blue-700)}.btn-primary:not(.disabled):hover{background-color:var(--vertex-ui-blue-500)}.btn-primary:not(.disabled):focus,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-primary:not(.disabled):active{box-shadow:none}.btn-primary.disabled{background-color:var(--vertex-ui-blue-200);cursor:var(--disabled-cursor)}.btn-secondary{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%)}.btn-secondary:not(.disabled):focus,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-secondary:not(.disabled):active{box-shadow:none}.btn-secondary.disabled{background-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-400)}.btn-danger{color:white;background-color:var(--vertex-ui-red-600)}.btn-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-400)}.btn-danger:not(.disabled):focus{background-color:var(--vertex-ui-red-500);box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-danger:not(.disabled):active{background-color:var(--vertex-ui-red-600);box-shadow:none}.btn-danger.disabled{background-color:var(--vertex-ui-red-200);box-shadow:none}.btn-txt-primary{color:var(--vertex-ui-blue-600)}.btn-txt-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-txt-primary:not(.disabled):focus,.btn-txt-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-txt-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-txt-primary:not(.disabled):active{box-shadow:none}.btn-txt-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-txt-secondary{color:var(--vertex-ui-neutral-700)}.btn-txt-secondary:not(.disabled):hover,.btn-txt-secondary:not(.disabled):active,.btn-txt-secondary:not(.disabled):focus{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-txt-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-txt-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-txt-danger{color:var(--vertex-ui-red-600)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active,.btn-txt-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-txt-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-txt-danger:not(.disabled):active{box-shadow:none}.btn-txt-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}';export{a as B}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r,h as o,H as e}from"./p-6834631c.js";import{c as i}from"./p-fe062eb0.js";import{g as a}from"./p-94168b92.js";const t=class{constructor(o){r(this,o),this.iconName=void 0,this.disabled=void 0,this.variant="default",this.iconColor="default",this.iconSize="md"}render(){return o(e,{onClick:r=>this.handleClick(r)},o("button",{ref:r=>this.buttonEl=r,disabled:this.disabled,class:i("container",{disabled:this.disabled,floating:"floating"===this.variant,plain:"plain"===this.variant,primary:"primary"===this.iconColor,secondary:"secondary"===this.iconColor})},o("slot",{name:"left"}),o("div",{class:i("icon-button",{xs:"xs"===this.iconSize,sm:"sm"===this.iconSize,md:"md"===this.iconSize,lg:"lg"===this.iconSize})},a(this.iconName)),o("slot",null)))}handleClick(r){var o;this.disabled&&(r.preventDefault(),r.stopPropagation()),null===(o=this.buttonEl)||void 0===o||o.blur()}};t.style="button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed;--hover-background-color:var(--vertex-ui-neutral-300);--active-background-color:var(--vertex-ui-neutral-400);--focus-background-color:var(--vertex-ui-neutral-400);--hover-box-shadow:0 2px 2px rgb(0 0 0 / 20%);--active-box-shadow:none;--focus-box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.container{display:flex;justify-content:center;align-items:center;outline:none;fill:currentColor;color:currentColor;cursor:var(--enabled-cursor)}.container:not(.plain){border-radius:4px;padding:0.25rem}.icon-button{display:flex;justify-content:center;align-items:center;fill:currentColor;height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.icon-button svg{width:100%;height:100%}.floating{background-color:var(--vertex-ui-neutral-100);box-shadow:var(--vertex-ui-overlay-shadow);color:var(--vertex-ui-neutral-700);fill:var(--vertex-ui-neutral-700);opacity:0.95}.floating.disabled{color:var(--vertex-ui-neutral-400);cursor:var(--disabled-cursor)}.container:not(.disabled):not(.plain):hover{background-color:var(--hover-background-color);box-shadow:var(--hover-box-shadow)}.container:not(.disabled):not(.plain):active{background-color:var(--active-background-color);box-shadow:var(--active-box-shadow)}.container:not(.disabled):not(.plain):focus-visible{background-color:var(--focus-background-color);box-shadow:var(--focus-box-shadow);color:var(--vertex-ui-neutral-900)}.container.disabled:not(.floating){cursor:var(--disabled-cursor);color:var(--vertex-ui-neutral-400)}.container.primary:not(.disabled){color:var(--vertex-ui-blue-700)}.container.secondary:not(.disabled){color:var(--vertex-ui-neutral-800)}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}";export{t as I}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{I as vertex_icon_button}from"./p-ee8b96b2.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-94168b92.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{B as vertex_button}from"./p-64e8b92c.js";import"./p-6834631c.js";import"./p-fe062eb0.js";
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement } from './index-72f28b71.js';
|
|
2
|
+
import { c as classnames } from './index-9c609209.js';
|
|
3
|
+
|
|
4
|
+
const buttonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}a{text-decoration:none;font-family:var(--vertex-ui-font-family)}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed}:host([type]){-webkit-appearance:none !important}:host([disabled=\"\"]){pointer-events:none}.btn{display:flex;align-items:center;justify-content:center;border-radius:0.25rem;box-sizing:border-box;text-decoration:none;cursor:var(--enabled-cursor)}.btn-full{width:100%}.btn.disabled,.btn:not(.disabled):focus,.btn:not(.disabled):active{outline:none}.btn.disabled{cursor:var(--disabled-cursor)}.btn-sm{font-size:var(--vertex-ui-text-sm)}.btn-sm:not(.btn-plaintext){padding:0 0.25rem}.btn-md{font-size:var(--vertex-ui-text-base)}.btn-md:not(.btn-plaintext){padding:0.5rem 1rem}.btn-lg{font-size:var(--vertex-ui-text-lg)}.btn-lg:not(.btn-plaintext){padding:0.75rem 0.75rem}.btn-plaintext{color:var(--vertex-ui-neutral-800)}.btn-primary{color:white;background-color:var(--vertex-ui-blue-700)}.btn-primary:not(.disabled):hover{background-color:var(--vertex-ui-blue-500)}.btn-primary:not(.disabled):focus,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-primary:not(.disabled):active{box-shadow:none}.btn-primary.disabled{background-color:var(--vertex-ui-blue-200);cursor:var(--disabled-cursor)}.btn-secondary{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%)}.btn-secondary:not(.disabled):focus,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-secondary:not(.disabled):active{box-shadow:none}.btn-secondary.disabled{background-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-400)}.btn-danger{color:white;background-color:var(--vertex-ui-red-600)}.btn-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-400)}.btn-danger:not(.disabled):focus{background-color:var(--vertex-ui-red-500);box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-danger:not(.disabled):active{background-color:var(--vertex-ui-red-600);box-shadow:none}.btn-danger.disabled{background-color:var(--vertex-ui-red-200);box-shadow:none}.btn-txt-primary{color:var(--vertex-ui-blue-600)}.btn-txt-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-txt-primary:not(.disabled):focus,.btn-txt-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-txt-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-txt-primary:not(.disabled):active{box-shadow:none}.btn-txt-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-txt-secondary{color:var(--vertex-ui-neutral-700)}.btn-txt-secondary:not(.disabled):hover,.btn-txt-secondary:not(.disabled):active,.btn-txt-secondary:not(.disabled):focus{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-txt-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-txt-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-txt-danger{color:var(--vertex-ui-red-600)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active,.btn-txt-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-txt-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-txt-danger:not(.disabled):active{box-shadow:none}.btn-txt-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}";
|
|
5
|
+
|
|
6
|
+
const Button = class {
|
|
7
|
+
constructor(hostRef) {
|
|
8
|
+
registerInstance(this, hostRef);
|
|
9
|
+
this.type = undefined;
|
|
10
|
+
this.color = 'secondary';
|
|
11
|
+
this.variant = 'solid';
|
|
12
|
+
this.size = 'md';
|
|
13
|
+
this.expand = 'block';
|
|
14
|
+
this.href = undefined;
|
|
15
|
+
this.target = undefined;
|
|
16
|
+
this.disabled = undefined;
|
|
17
|
+
}
|
|
18
|
+
connectedCallback() {
|
|
19
|
+
if (this.hostElement != null && this.type === 'submit') {
|
|
20
|
+
const form = this.hostElement.closest('form');
|
|
21
|
+
if (form != null) {
|
|
22
|
+
this.fakeButton = document.createElement('button');
|
|
23
|
+
this.fakeButton.setAttribute('type', this.type);
|
|
24
|
+
this.fakeButton.setAttribute('style', 'display: none');
|
|
25
|
+
this.fakeButton.setAttribute('data-testid', 'vertex-fake-button');
|
|
26
|
+
form.appendChild(this.fakeButton);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
disconnectedCallback() {
|
|
31
|
+
if (this.hostElement != null && this.fakeButton != null) {
|
|
32
|
+
this.fakeButton.remove();
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
render() {
|
|
36
|
+
const classes = classnames('btn', {
|
|
37
|
+
'btn-full': this.expand === 'full',
|
|
38
|
+
'btn-sm': this.size === 'sm',
|
|
39
|
+
'btn-md': this.size === 'md',
|
|
40
|
+
'btn-lg': this.size === 'lg',
|
|
41
|
+
'btn-primary': this.color === 'primary' && this.variant === 'solid',
|
|
42
|
+
'btn-secondary': this.color === 'secondary' && this.variant === 'solid',
|
|
43
|
+
'btn-danger': this.color === 'danger' && this.variant === 'solid',
|
|
44
|
+
'btn-txt-primary': this.color === 'primary' && this.variant === 'text',
|
|
45
|
+
'btn-txt-secondary': this.color === 'secondary' && this.variant === 'text',
|
|
46
|
+
'btn-txt-danger': this.color === 'danger' && this.variant === 'text',
|
|
47
|
+
'btn-plaintext': this.variant === 'plaintext',
|
|
48
|
+
disabled: this.disabled,
|
|
49
|
+
});
|
|
50
|
+
if (this.href != null && this.type != null) {
|
|
51
|
+
console.warn('The type attribute is ignored when href is provided');
|
|
52
|
+
}
|
|
53
|
+
return (h(Host, { style: { pointerEvents: this.disabled ? 'none' : undefined } }, this.href != null && this.href !== '' ? (h("a", { href: this.href, target: this.target, class: classes, tabIndex: this.disabled ? -1 : 0 }, h("slot", null))) : (h("button", { class: classes, disabled: this.disabled, type: this.type, onClick: (event) => this.handleClick(event) }, h("slot", { name: "left" }), h("slot", null)))));
|
|
54
|
+
}
|
|
55
|
+
handleClick(event) {
|
|
56
|
+
if (this.fakeButton != null) {
|
|
57
|
+
event.preventDefault();
|
|
58
|
+
this.fakeButton.click();
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
get hostElement() { return getElement(this); }
|
|
62
|
+
};
|
|
63
|
+
Button.style = buttonCss;
|
|
64
|
+
|
|
65
|
+
export { Button as B };
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-72f28b71.js';
|
|
2
|
+
import { c as classnames } from './index-9c609209.js';
|
|
3
|
+
import { g as getSvg } from './icon-helper-10a99d95.js';
|
|
4
|
+
|
|
5
|
+
const iconButtonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--enabled-cursor:pointer;--disabled-cursor:not-allowed;--hover-background-color:var(--vertex-ui-neutral-300);--active-background-color:var(--vertex-ui-neutral-400);--focus-background-color:var(--vertex-ui-neutral-400);--hover-box-shadow:0 2px 2px rgb(0 0 0 / 20%);--active-box-shadow:none;--focus-box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.container{display:flex;justify-content:center;align-items:center;outline:none;fill:currentColor;color:currentColor;cursor:var(--enabled-cursor)}.container:not(.plain){border-radius:4px;padding:0.25rem}.icon-button{display:flex;justify-content:center;align-items:center;fill:currentColor;height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.icon-button svg{width:100%;height:100%}.floating{background-color:var(--vertex-ui-neutral-100);box-shadow:var(--vertex-ui-overlay-shadow);color:var(--vertex-ui-neutral-700);fill:var(--vertex-ui-neutral-700);opacity:0.95}.floating.disabled{color:var(--vertex-ui-neutral-400);cursor:var(--disabled-cursor)}.container:not(.disabled):not(.plain):hover{background-color:var(--hover-background-color);box-shadow:var(--hover-box-shadow)}.container:not(.disabled):not(.plain):active{background-color:var(--active-background-color);box-shadow:var(--active-box-shadow)}.container:not(.disabled):not(.plain):focus-visible{background-color:var(--focus-background-color);box-shadow:var(--focus-box-shadow);color:var(--vertex-ui-neutral-900)}.container.disabled:not(.floating){cursor:var(--disabled-cursor);color:var(--vertex-ui-neutral-400)}.container.primary:not(.disabled){color:var(--vertex-ui-blue-700)}.container.secondary:not(.disabled){color:var(--vertex-ui-neutral-800)}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}";
|
|
6
|
+
|
|
7
|
+
const IconButton = class {
|
|
8
|
+
constructor(hostRef) {
|
|
9
|
+
registerInstance(this, hostRef);
|
|
10
|
+
this.iconName = undefined;
|
|
11
|
+
this.disabled = undefined;
|
|
12
|
+
this.variant = 'default';
|
|
13
|
+
this.iconColor = 'default';
|
|
14
|
+
this.iconSize = 'md';
|
|
15
|
+
}
|
|
16
|
+
render() {
|
|
17
|
+
return (h(Host, { onClick: (e) => this.handleClick(e) }, h("button", { ref: (el) => (this.buttonEl = el), disabled: this.disabled, class: classnames('container', {
|
|
18
|
+
disabled: this.disabled,
|
|
19
|
+
floating: this.variant === 'floating',
|
|
20
|
+
plain: this.variant === 'plain',
|
|
21
|
+
primary: this.iconColor === 'primary',
|
|
22
|
+
secondary: this.iconColor === 'secondary',
|
|
23
|
+
}) }, h("slot", { name: "left" }), h("div", { class: classnames('icon-button', {
|
|
24
|
+
xs: this.iconSize === 'xs',
|
|
25
|
+
sm: this.iconSize === 'sm',
|
|
26
|
+
md: this.iconSize === 'md',
|
|
27
|
+
lg: this.iconSize === 'lg',
|
|
28
|
+
}) }, getSvg(this.iconName)), h("slot", null))));
|
|
29
|
+
}
|
|
30
|
+
handleClick(event) {
|
|
31
|
+
var _a;
|
|
32
|
+
if (this.disabled) {
|
|
33
|
+
event.preventDefault();
|
|
34
|
+
event.stopPropagation();
|
|
35
|
+
}
|
|
36
|
+
(_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.blur();
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
IconButton.style = iconButtonCss;
|
|
40
|
+
|
|
41
|
+
export { IconButton as I };
|
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { A as AutoResizeTextArea } from './auto-resize-textarea-087fecdb.js';
|
|
2
2
|
export { A as Avatar } from './avatar-775455a5.js';
|
|
3
3
|
export { A as AvatarGroup } from './avatar-group-e5ca86bf.js';
|
|
4
|
-
export { B as Button } from './button-
|
|
4
|
+
export { B as Button } from './button-547336b8.js';
|
|
5
5
|
export { C as Card } from './card-1e8790aa.js';
|
|
6
6
|
export { C as CardGroup } from './card-group-4e8e0421.js';
|
|
7
7
|
export { C as Chip } from './chip-4e568eee.js';
|
|
@@ -17,7 +17,7 @@ export { D as DropdownMenu } from './dropdown-menu-1598ba20.js';
|
|
|
17
17
|
export { E as Expandable } from './expandable-b487cb00.js';
|
|
18
18
|
export { H as HelpTooltip } from './help-tooltip-c2f0d996.js';
|
|
19
19
|
export { I as Icon } from './icon-2630793d.js';
|
|
20
|
-
export { I as IconButton } from './icon-button-
|
|
20
|
+
export { I as IconButton } from './icon-button-25edf617.js';
|
|
21
21
|
export { L as LogoLoading } from './logo-loading-3c7fa23d.js';
|
|
22
22
|
export { M as Menu } from './menu-daa7f9c9.js';
|
|
23
23
|
export { M as MenuDivider } from './menu-divider-87c888cb.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vertexvis/ui",
|
|
3
|
-
"version": "0.1.0-testing.
|
|
3
|
+
"version": "0.1.0-testing.3",
|
|
4
4
|
"description": "The Vertex UI component library.",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -56,6 +56,7 @@
|
|
|
56
56
|
"@storybook/web-components-webpack5": "^7.4.0",
|
|
57
57
|
"@types/eslint": "^8.44.2",
|
|
58
58
|
"@types/estree": "^1.0.1",
|
|
59
|
+
"@types/faker": "5.5.9",
|
|
59
60
|
"@types/jest": "^27.0.3",
|
|
60
61
|
"@types/node": "^20.11.21",
|
|
61
62
|
"@vertexvis/eslint-config-vertexvis-typescript": "^0.5.1",
|
|
@@ -83,8 +84,7 @@
|
|
|
83
84
|
},
|
|
84
85
|
"dependencies": {
|
|
85
86
|
"@floating-ui/dom": "^1.6.5",
|
|
86
|
-
"@types/faker": "^5.5.9",
|
|
87
87
|
"@vertexvis/utils": "^0.21.0"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "7f66fef5ba20558d66ea86fb2f1443b21d81a146"
|
|
90
90
|
}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const index = require('./index-6a92256c.js');
|
|
4
|
-
const index$1 = require('./index-e1b40fa6.js');
|
|
5
|
-
|
|
6
|
-
const buttonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}a{text-decoration:none;font-family:var(--vertex-ui-font-family)}:host([type]){-webkit-appearance:none !important}:host([disabled=\"\"]){pointer-events:none}.btn{display:flex;align-items:center;justify-content:center;border-radius:0.25rem;box-sizing:border-box;text-decoration:none;cursor:pointer}.btn-full{width:100%}.btn.disabled,.btn:not(.disabled):focus,.btn:not(.disabled):active{outline:none}.btn.disabled{cursor:not-allowed}.btn-sm{font-size:var(--vertex-ui-text-sm)}.btn-sm:not(.btn-plaintext){padding:0 0.25rem}.btn-md{font-size:var(--vertex-ui-text-base)}.btn-md:not(.btn-plaintext){padding:0.5rem 1rem}.btn-lg{font-size:var(--vertex-ui-text-lg)}.btn-lg:not(.btn-plaintext){padding:0.75rem 0.75rem}.btn-plaintext{color:var(--vertex-ui-neutral-800)}.btn-primary{color:white;background-color:var(--vertex-ui-blue-700)}.btn-primary:not(.disabled):hover{background-color:var(--vertex-ui-blue-500)}.btn-primary:not(.disabled):focus,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-primary:not(.disabled):active{box-shadow:none}.btn-primary.disabled{background-color:var(--vertex-ui-blue-200);cursor:not-allowed}.btn-secondary{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%)}.btn-secondary:not(.disabled):focus,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-secondary:not(.disabled):active{box-shadow:none}.btn-secondary.disabled{background-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-400)}.btn-danger{color:white;background-color:var(--vertex-ui-red-600)}.btn-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-400)}.btn-danger:not(.disabled):focus{background-color:var(--vertex-ui-red-500);box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-danger:not(.disabled):active{background-color:var(--vertex-ui-red-600);box-shadow:none}.btn-danger.disabled{background-color:var(--vertex-ui-red-200);box-shadow:none}.btn-txt-primary{color:var(--vertex-ui-blue-600)}.btn-txt-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-txt-primary:not(.disabled):focus,.btn-txt-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-txt-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-txt-primary:not(.disabled):active{box-shadow:none}.btn-txt-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-txt-secondary{color:var(--vertex-ui-neutral-700)}.btn-txt-secondary:not(.disabled):hover,.btn-txt-secondary:not(.disabled):active,.btn-txt-secondary:not(.disabled):focus{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-txt-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-txt-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-txt-danger{color:var(--vertex-ui-red-600)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active,.btn-txt-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-txt-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-txt-danger:not(.disabled):active{box-shadow:none}.btn-txt-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}";
|
|
7
|
-
|
|
8
|
-
const Button = class {
|
|
9
|
-
constructor(hostRef) {
|
|
10
|
-
index.registerInstance(this, hostRef);
|
|
11
|
-
this.type = undefined;
|
|
12
|
-
this.color = 'secondary';
|
|
13
|
-
this.variant = 'solid';
|
|
14
|
-
this.size = 'md';
|
|
15
|
-
this.expand = 'block';
|
|
16
|
-
this.href = undefined;
|
|
17
|
-
this.target = undefined;
|
|
18
|
-
this.disabled = undefined;
|
|
19
|
-
}
|
|
20
|
-
connectedCallback() {
|
|
21
|
-
if (this.hostElement != null && this.type === 'submit') {
|
|
22
|
-
const form = this.hostElement.closest('form');
|
|
23
|
-
if (form != null) {
|
|
24
|
-
this.fakeButton = document.createElement('button');
|
|
25
|
-
this.fakeButton.setAttribute('type', this.type);
|
|
26
|
-
this.fakeButton.setAttribute('style', 'display: none');
|
|
27
|
-
this.fakeButton.setAttribute('data-testid', 'vertex-fake-button');
|
|
28
|
-
form.appendChild(this.fakeButton);
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
disconnectedCallback() {
|
|
33
|
-
if (this.hostElement != null && this.fakeButton != null) {
|
|
34
|
-
this.fakeButton.remove();
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
render() {
|
|
38
|
-
const classes = index$1.classnames('btn', {
|
|
39
|
-
'btn-full': this.expand === 'full',
|
|
40
|
-
'btn-sm': this.size === 'sm',
|
|
41
|
-
'btn-md': this.size === 'md',
|
|
42
|
-
'btn-lg': this.size === 'lg',
|
|
43
|
-
'btn-primary': this.color === 'primary' && this.variant === 'solid',
|
|
44
|
-
'btn-secondary': this.color === 'secondary' && this.variant === 'solid',
|
|
45
|
-
'btn-danger': this.color === 'danger' && this.variant === 'solid',
|
|
46
|
-
'btn-txt-primary': this.color === 'primary' && this.variant === 'text',
|
|
47
|
-
'btn-txt-secondary': this.color === 'secondary' && this.variant === 'text',
|
|
48
|
-
'btn-txt-danger': this.color === 'danger' && this.variant === 'text',
|
|
49
|
-
'btn-plaintext': this.variant === 'plaintext',
|
|
50
|
-
disabled: this.disabled,
|
|
51
|
-
});
|
|
52
|
-
if (this.href != null && this.type != null) {
|
|
53
|
-
console.warn('The type attribute is ignored when href is provided');
|
|
54
|
-
}
|
|
55
|
-
return (index.h(index.Host, { style: { pointerEvents: this.disabled ? 'none' : undefined } }, this.href != null && this.href !== '' ? (index.h("a", { href: this.href, target: this.target, class: classes, tabIndex: this.disabled ? -1 : 0 }, index.h("slot", null))) : (index.h("button", { class: classes, disabled: this.disabled, type: this.type, onClick: (event) => this.handleClick(event) }, index.h("slot", { name: "left" }), index.h("slot", null)))));
|
|
56
|
-
}
|
|
57
|
-
handleClick(event) {
|
|
58
|
-
if (this.fakeButton != null) {
|
|
59
|
-
event.preventDefault();
|
|
60
|
-
this.fakeButton.click();
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
get hostElement() { return index.getElement(this); }
|
|
64
|
-
};
|
|
65
|
-
Button.style = buttonCss;
|
|
66
|
-
|
|
67
|
-
exports.Button = Button;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const index = require('./index-6a92256c.js');
|
|
4
|
-
const index$1 = require('./index-e1b40fa6.js');
|
|
5
|
-
const iconHelper = require('./icon-helper-caf2699e.js');
|
|
6
|
-
|
|
7
|
-
const iconButtonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--hover-background-color:var(--vertex-ui-neutral-300);--active-background-color:var(--vertex-ui-neutral-400);--focus-background-color:var(--vertex-ui-neutral-400);--hover-box-shadow:0 2px 2px rgb(0 0 0 / 20%);--active-box-shadow:none;--focus-box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.container{display:flex;justify-content:center;align-items:center;outline:none;fill:currentColor;color:currentColor;cursor:pointer}.container:not(.plain){border-radius:4px;padding:0.25rem}.icon-button{display:flex;justify-content:center;align-items:center;fill:currentColor;height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.icon-button svg{width:100%;height:100%}.floating{background-color:var(--vertex-ui-neutral-100);box-shadow:var(--vertex-ui-overlay-shadow);color:var(--vertex-ui-neutral-700);fill:var(--vertex-ui-neutral-700);opacity:0.95}.floating.disabled{color:var(--vertex-ui-neutral-400);cursor:not-allowed}.container:not(.disabled):not(.plain):hover{background-color:var(--hover-background-color);box-shadow:var(--hover-box-shadow)}.container:not(.disabled):not(.plain):active{background-color:var(--active-background-color);box-shadow:var(--active-box-shadow)}.container:not(.disabled):not(.plain):focus-visible{background-color:var(--focus-background-color);box-shadow:var(--focus-box-shadow);color:var(--vertex-ui-neutral-900)}.container.disabled:not(.floating){cursor:not-allowed;color:var(--vertex-ui-neutral-400)}.container.primary:not(.disabled){color:var(--vertex-ui-blue-700)}.container.secondary:not(.disabled){color:var(--vertex-ui-neutral-800)}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}";
|
|
8
|
-
|
|
9
|
-
const IconButton = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.iconName = undefined;
|
|
13
|
-
this.disabled = undefined;
|
|
14
|
-
this.variant = 'default';
|
|
15
|
-
this.iconColor = 'default';
|
|
16
|
-
this.iconSize = 'md';
|
|
17
|
-
}
|
|
18
|
-
render() {
|
|
19
|
-
return (index.h(index.Host, { onClick: (e) => this.handleClick(e) }, index.h("button", { ref: (el) => (this.buttonEl = el), disabled: this.disabled, class: index$1.classnames('container', {
|
|
20
|
-
disabled: this.disabled,
|
|
21
|
-
floating: this.variant === 'floating',
|
|
22
|
-
plain: this.variant === 'plain',
|
|
23
|
-
primary: this.iconColor === 'primary',
|
|
24
|
-
secondary: this.iconColor === 'secondary',
|
|
25
|
-
}) }, index.h("slot", { name: "left" }), index.h("div", { class: index$1.classnames('icon-button', {
|
|
26
|
-
xs: this.iconSize === 'xs',
|
|
27
|
-
sm: this.iconSize === 'sm',
|
|
28
|
-
md: this.iconSize === 'md',
|
|
29
|
-
lg: this.iconSize === 'lg',
|
|
30
|
-
}) }, iconHelper.getSvg(this.iconName)), index.h("slot", null))));
|
|
31
|
-
}
|
|
32
|
-
handleClick(event) {
|
|
33
|
-
var _a;
|
|
34
|
-
if (this.disabled) {
|
|
35
|
-
event.preventDefault();
|
|
36
|
-
event.stopPropagation();
|
|
37
|
-
}
|
|
38
|
-
(_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.blur();
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
IconButton.style = iconButtonCss;
|
|
42
|
-
|
|
43
|
-
exports.IconButton = IconButton;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export{I as vertex_icon_button}from"./p-afd1c978.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-94168b92.js";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,h as e,H as r,g as n}from"./p-6834631c.js";import{c as o}from"./p-fe062eb0.js";const a=class{constructor(e){t(this,e),this.type=void 0,this.color="secondary",this.variant="solid",this.size="md",this.expand="block",this.href=void 0,this.target=void 0,this.disabled=void 0}connectedCallback(){if(null!=this.hostElement&&"submit"===this.type){const t=this.hostElement.closest("form");null!=t&&(this.fakeButton=document.createElement("button"),this.fakeButton.setAttribute("type",this.type),this.fakeButton.setAttribute("style","display: none"),this.fakeButton.setAttribute("data-testid","vertex-fake-button"),t.appendChild(this.fakeButton))}}disconnectedCallback(){null!=this.hostElement&&null!=this.fakeButton&&this.fakeButton.remove()}render(){const t=o("btn",{"btn-full":"full"===this.expand,"btn-sm":"sm"===this.size,"btn-md":"md"===this.size,"btn-lg":"lg"===this.size,"btn-primary":"primary"===this.color&&"solid"===this.variant,"btn-secondary":"secondary"===this.color&&"solid"===this.variant,"btn-danger":"danger"===this.color&&"solid"===this.variant,"btn-txt-primary":"primary"===this.color&&"text"===this.variant,"btn-txt-secondary":"secondary"===this.color&&"text"===this.variant,"btn-txt-danger":"danger"===this.color&&"text"===this.variant,"btn-plaintext":"plaintext"===this.variant,disabled:this.disabled});return null!=this.href&&null!=this.type&&console.warn("The type attribute is ignored when href is provided"),e(r,{style:{pointerEvents:this.disabled?"none":void 0}},null!=this.href&&""!==this.href?e("a",{href:this.href,target:this.target,class:t,tabIndex:this.disabled?-1:0},e("slot",null)):e("button",{class:t,disabled:this.disabled,type:this.type,onClick:t=>this.handleClick(t)},e("slot",{name:"left"}),e("slot",null)))}handleClick(t){null!=this.fakeButton&&(t.preventDefault(),this.fakeButton.click())}get hostElement(){return n(this)}};a.style='button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}a{text-decoration:none;font-family:var(--vertex-ui-font-family)}:host([type]){-webkit-appearance:none !important}:host([disabled=""]){pointer-events:none}.btn{display:flex;align-items:center;justify-content:center;border-radius:0.25rem;box-sizing:border-box;text-decoration:none;cursor:pointer}.btn-full{width:100%}.btn.disabled,.btn:not(.disabled):focus,.btn:not(.disabled):active{outline:none}.btn.disabled{cursor:not-allowed}.btn-sm{font-size:var(--vertex-ui-text-sm)}.btn-sm:not(.btn-plaintext){padding:0 0.25rem}.btn-md{font-size:var(--vertex-ui-text-base)}.btn-md:not(.btn-plaintext){padding:0.5rem 1rem}.btn-lg{font-size:var(--vertex-ui-text-lg)}.btn-lg:not(.btn-plaintext){padding:0.75rem 0.75rem}.btn-plaintext{color:var(--vertex-ui-neutral-800)}.btn-primary{color:white;background-color:var(--vertex-ui-blue-700)}.btn-primary:not(.disabled):hover{background-color:var(--vertex-ui-blue-500)}.btn-primary:not(.disabled):focus,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-primary:not(.disabled):active{box-shadow:none}.btn-primary.disabled{background-color:var(--vertex-ui-blue-200);cursor:not-allowed}.btn-secondary{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%)}.btn-secondary:not(.disabled):focus,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-secondary:not(.disabled):active{box-shadow:none}.btn-secondary.disabled{background-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-400)}.btn-danger{color:white;background-color:var(--vertex-ui-red-600)}.btn-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-400)}.btn-danger:not(.disabled):focus{background-color:var(--vertex-ui-red-500);box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-danger:not(.disabled):active{background-color:var(--vertex-ui-red-600);box-shadow:none}.btn-danger.disabled{background-color:var(--vertex-ui-red-200);box-shadow:none}.btn-txt-primary{color:var(--vertex-ui-blue-600)}.btn-txt-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-txt-primary:not(.disabled):focus,.btn-txt-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-txt-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-txt-primary:not(.disabled):active{box-shadow:none}.btn-txt-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-txt-secondary{color:var(--vertex-ui-neutral-700)}.btn-txt-secondary:not(.disabled):hover,.btn-txt-secondary:not(.disabled):active,.btn-txt-secondary:not(.disabled):focus{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-txt-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-txt-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-txt-danger{color:var(--vertex-ui-red-600)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active,.btn-txt-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-txt-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-txt-danger:not(.disabled):active{box-shadow:none}.btn-txt-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}';export{a as B}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export{B as vertex_button}from"./p-87de6fc5.js";import"./p-6834631c.js";import"./p-fe062eb0.js";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as o,h as r,H as e}from"./p-6834631c.js";import{c as i}from"./p-fe062eb0.js";import{g as t}from"./p-94168b92.js";const a=class{constructor(r){o(this,r),this.iconName=void 0,this.disabled=void 0,this.variant="default",this.iconColor="default",this.iconSize="md"}render(){return r(e,{onClick:o=>this.handleClick(o)},r("button",{ref:o=>this.buttonEl=o,disabled:this.disabled,class:i("container",{disabled:this.disabled,floating:"floating"===this.variant,plain:"plain"===this.variant,primary:"primary"===this.iconColor,secondary:"secondary"===this.iconColor})},r("slot",{name:"left"}),r("div",{class:i("icon-button",{xs:"xs"===this.iconSize,sm:"sm"===this.iconSize,md:"md"===this.iconSize,lg:"lg"===this.iconSize})},t(this.iconName)),r("slot",null)))}handleClick(o){var r;this.disabled&&(o.preventDefault(),o.stopPropagation()),null===(r=this.buttonEl)||void 0===r||r.blur()}};a.style="button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--hover-background-color:var(--vertex-ui-neutral-300);--active-background-color:var(--vertex-ui-neutral-400);--focus-background-color:var(--vertex-ui-neutral-400);--hover-box-shadow:0 2px 2px rgb(0 0 0 / 20%);--active-box-shadow:none;--focus-box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.container{display:flex;justify-content:center;align-items:center;outline:none;fill:currentColor;color:currentColor;cursor:pointer}.container:not(.plain){border-radius:4px;padding:0.25rem}.icon-button{display:flex;justify-content:center;align-items:center;fill:currentColor;height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.icon-button svg{width:100%;height:100%}.floating{background-color:var(--vertex-ui-neutral-100);box-shadow:var(--vertex-ui-overlay-shadow);color:var(--vertex-ui-neutral-700);fill:var(--vertex-ui-neutral-700);opacity:0.95}.floating.disabled{color:var(--vertex-ui-neutral-400);cursor:not-allowed}.container:not(.disabled):not(.plain):hover{background-color:var(--hover-background-color);box-shadow:var(--hover-box-shadow)}.container:not(.disabled):not(.plain):active{background-color:var(--active-background-color);box-shadow:var(--active-box-shadow)}.container:not(.disabled):not(.plain):focus-visible{background-color:var(--focus-background-color);box-shadow:var(--focus-box-shadow);color:var(--vertex-ui-neutral-900)}.container.disabled:not(.floating){cursor:not-allowed;color:var(--vertex-ui-neutral-400)}.container.primary:not(.disabled){color:var(--vertex-ui-blue-700)}.container.secondary:not(.disabled){color:var(--vertex-ui-neutral-800)}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}";export{a as I}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement } from './index-72f28b71.js';
|
|
2
|
-
import { c as classnames } from './index-9c609209.js';
|
|
3
|
-
|
|
4
|
-
const buttonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}a{text-decoration:none;font-family:var(--vertex-ui-font-family)}:host([type]){-webkit-appearance:none !important}:host([disabled=\"\"]){pointer-events:none}.btn{display:flex;align-items:center;justify-content:center;border-radius:0.25rem;box-sizing:border-box;text-decoration:none;cursor:pointer}.btn-full{width:100%}.btn.disabled,.btn:not(.disabled):focus,.btn:not(.disabled):active{outline:none}.btn.disabled{cursor:not-allowed}.btn-sm{font-size:var(--vertex-ui-text-sm)}.btn-sm:not(.btn-plaintext){padding:0 0.25rem}.btn-md{font-size:var(--vertex-ui-text-base)}.btn-md:not(.btn-plaintext){padding:0.5rem 1rem}.btn-lg{font-size:var(--vertex-ui-text-lg)}.btn-lg:not(.btn-plaintext){padding:0.75rem 0.75rem}.btn-plaintext{color:var(--vertex-ui-neutral-800)}.btn-primary{color:white;background-color:var(--vertex-ui-blue-700)}.btn-primary:not(.disabled):hover{background-color:var(--vertex-ui-blue-500)}.btn-primary:not(.disabled):focus,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-primary:not(.disabled):active{box-shadow:none}.btn-primary.disabled{background-color:var(--vertex-ui-blue-200);cursor:not-allowed}.btn-secondary{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%)}.btn-secondary:not(.disabled):focus,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-secondary:not(.disabled):active{box-shadow:none}.btn-secondary.disabled{background-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-400)}.btn-danger{color:white;background-color:var(--vertex-ui-red-600)}.btn-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-400)}.btn-danger:not(.disabled):focus{background-color:var(--vertex-ui-red-500);box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-danger:not(.disabled):active{background-color:var(--vertex-ui-red-600);box-shadow:none}.btn-danger.disabled{background-color:var(--vertex-ui-red-200);box-shadow:none}.btn-txt-primary{color:var(--vertex-ui-blue-600)}.btn-txt-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-txt-primary:not(.disabled):focus,.btn-txt-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-txt-primary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-txt-primary:not(.disabled):active{box-shadow:none}.btn-txt-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-txt-secondary{color:var(--vertex-ui-neutral-700)}.btn-txt-secondary:not(.disabled):hover,.btn-txt-secondary:not(.disabled):active,.btn-txt-secondary:not(.disabled):focus{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-300)}.btn-txt-secondary:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-txt-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-txt-danger{color:var(--vertex-ui-red-600)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active,.btn-txt-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-txt-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-txt-danger:not(.disabled):focus,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-txt-danger:not(.disabled):active{box-shadow:none}.btn-txt-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}";
|
|
5
|
-
|
|
6
|
-
const Button = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
this.type = undefined;
|
|
10
|
-
this.color = 'secondary';
|
|
11
|
-
this.variant = 'solid';
|
|
12
|
-
this.size = 'md';
|
|
13
|
-
this.expand = 'block';
|
|
14
|
-
this.href = undefined;
|
|
15
|
-
this.target = undefined;
|
|
16
|
-
this.disabled = undefined;
|
|
17
|
-
}
|
|
18
|
-
connectedCallback() {
|
|
19
|
-
if (this.hostElement != null && this.type === 'submit') {
|
|
20
|
-
const form = this.hostElement.closest('form');
|
|
21
|
-
if (form != null) {
|
|
22
|
-
this.fakeButton = document.createElement('button');
|
|
23
|
-
this.fakeButton.setAttribute('type', this.type);
|
|
24
|
-
this.fakeButton.setAttribute('style', 'display: none');
|
|
25
|
-
this.fakeButton.setAttribute('data-testid', 'vertex-fake-button');
|
|
26
|
-
form.appendChild(this.fakeButton);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
disconnectedCallback() {
|
|
31
|
-
if (this.hostElement != null && this.fakeButton != null) {
|
|
32
|
-
this.fakeButton.remove();
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
render() {
|
|
36
|
-
const classes = classnames('btn', {
|
|
37
|
-
'btn-full': this.expand === 'full',
|
|
38
|
-
'btn-sm': this.size === 'sm',
|
|
39
|
-
'btn-md': this.size === 'md',
|
|
40
|
-
'btn-lg': this.size === 'lg',
|
|
41
|
-
'btn-primary': this.color === 'primary' && this.variant === 'solid',
|
|
42
|
-
'btn-secondary': this.color === 'secondary' && this.variant === 'solid',
|
|
43
|
-
'btn-danger': this.color === 'danger' && this.variant === 'solid',
|
|
44
|
-
'btn-txt-primary': this.color === 'primary' && this.variant === 'text',
|
|
45
|
-
'btn-txt-secondary': this.color === 'secondary' && this.variant === 'text',
|
|
46
|
-
'btn-txt-danger': this.color === 'danger' && this.variant === 'text',
|
|
47
|
-
'btn-plaintext': this.variant === 'plaintext',
|
|
48
|
-
disabled: this.disabled,
|
|
49
|
-
});
|
|
50
|
-
if (this.href != null && this.type != null) {
|
|
51
|
-
console.warn('The type attribute is ignored when href is provided');
|
|
52
|
-
}
|
|
53
|
-
return (h(Host, { style: { pointerEvents: this.disabled ? 'none' : undefined } }, this.href != null && this.href !== '' ? (h("a", { href: this.href, target: this.target, class: classes, tabIndex: this.disabled ? -1 : 0 }, h("slot", null))) : (h("button", { class: classes, disabled: this.disabled, type: this.type, onClick: (event) => this.handleClick(event) }, h("slot", { name: "left" }), h("slot", null)))));
|
|
54
|
-
}
|
|
55
|
-
handleClick(event) {
|
|
56
|
-
if (this.fakeButton != null) {
|
|
57
|
-
event.preventDefault();
|
|
58
|
-
this.fakeButton.click();
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
get hostElement() { return getElement(this); }
|
|
62
|
-
};
|
|
63
|
-
Button.style = buttonCss;
|
|
64
|
-
|
|
65
|
-
export { Button as B };
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-72f28b71.js';
|
|
2
|
-
import { c as classnames } from './index-9c609209.js';
|
|
3
|
-
import { g as getSvg } from './icon-helper-10a99d95.js';
|
|
4
|
-
|
|
5
|
-
const iconButtonCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{--hover-background-color:var(--vertex-ui-neutral-300);--active-background-color:var(--vertex-ui-neutral-400);--focus-background-color:var(--vertex-ui-neutral-400);--hover-box-shadow:0 2px 2px rgb(0 0 0 / 20%);--active-box-shadow:none;--focus-box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.container{display:flex;justify-content:center;align-items:center;outline:none;fill:currentColor;color:currentColor;cursor:pointer}.container:not(.plain){border-radius:4px;padding:0.25rem}.icon-button{display:flex;justify-content:center;align-items:center;fill:currentColor;height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.icon-button svg{width:100%;height:100%}.floating{background-color:var(--vertex-ui-neutral-100);box-shadow:var(--vertex-ui-overlay-shadow);color:var(--vertex-ui-neutral-700);fill:var(--vertex-ui-neutral-700);opacity:0.95}.floating.disabled{color:var(--vertex-ui-neutral-400);cursor:not-allowed}.container:not(.disabled):not(.plain):hover{background-color:var(--hover-background-color);box-shadow:var(--hover-box-shadow)}.container:not(.disabled):not(.plain):active{background-color:var(--active-background-color);box-shadow:var(--active-box-shadow)}.container:not(.disabled):not(.plain):focus-visible{background-color:var(--focus-background-color);box-shadow:var(--focus-box-shadow);color:var(--vertex-ui-neutral-900)}.container.disabled:not(.floating){cursor:not-allowed;color:var(--vertex-ui-neutral-400)}.container.primary:not(.disabled){color:var(--vertex-ui-blue-700)}.container.secondary:not(.disabled){color:var(--vertex-ui-neutral-800)}.xs{height:var(--icon-size, 0.75rem);width:var(--icon-size, 0.75rem)}.sm{height:var(--icon-size, 1rem);width:var(--icon-size, 1rem)}.md{height:var(--icon-size, 1.5rem);width:var(--icon-size, 1.5rem)}.lg{height:var(--icon-size, 2rem);width:var(--icon-size, 2rem)}";
|
|
6
|
-
|
|
7
|
-
const IconButton = class {
|
|
8
|
-
constructor(hostRef) {
|
|
9
|
-
registerInstance(this, hostRef);
|
|
10
|
-
this.iconName = undefined;
|
|
11
|
-
this.disabled = undefined;
|
|
12
|
-
this.variant = 'default';
|
|
13
|
-
this.iconColor = 'default';
|
|
14
|
-
this.iconSize = 'md';
|
|
15
|
-
}
|
|
16
|
-
render() {
|
|
17
|
-
return (h(Host, { onClick: (e) => this.handleClick(e) }, h("button", { ref: (el) => (this.buttonEl = el), disabled: this.disabled, class: classnames('container', {
|
|
18
|
-
disabled: this.disabled,
|
|
19
|
-
floating: this.variant === 'floating',
|
|
20
|
-
plain: this.variant === 'plain',
|
|
21
|
-
primary: this.iconColor === 'primary',
|
|
22
|
-
secondary: this.iconColor === 'secondary',
|
|
23
|
-
}) }, h("slot", { name: "left" }), h("div", { class: classnames('icon-button', {
|
|
24
|
-
xs: this.iconSize === 'xs',
|
|
25
|
-
sm: this.iconSize === 'sm',
|
|
26
|
-
md: this.iconSize === 'md',
|
|
27
|
-
lg: this.iconSize === 'lg',
|
|
28
|
-
}) }, getSvg(this.iconName)), h("slot", null))));
|
|
29
|
-
}
|
|
30
|
-
handleClick(event) {
|
|
31
|
-
var _a;
|
|
32
|
-
if (this.disabled) {
|
|
33
|
-
event.preventDefault();
|
|
34
|
-
event.stopPropagation();
|
|
35
|
-
}
|
|
36
|
-
(_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.blur();
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
IconButton.style = iconButtonCss;
|
|
40
|
-
|
|
41
|
-
export { IconButton as I };
|