@vertexvis/ui 0.1.5-canary.3 → 0.1.5-canary.4
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-e63d25b1.js → button-0bf9ea53.js} +1 -1
- package/dist/cjs/{icon-button-9312d7b7.js → icon-button-41b8715e.js} +2 -1
- 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 +1 -1
- package/dist/collection/components/icon-button/icon-button.css +5 -2
- package/dist/collection/components/icon-button/icon-button.js +3 -2
- package/dist/components/components.esm.js +1 -1
- package/dist/components/icon-button.js +2 -1
- package/dist/components/index.esm.js +1 -1
- package/dist/components/p-258c3672.entry.js +1 -0
- package/dist/components/p-bf8ca296.entry.js +1 -0
- package/dist/components/{p-1e645c1f.js → p-d5b514a6.js} +1 -1
- package/dist/components/p-ee300283.js +1 -0
- package/dist/components/vertex-button.js +1 -1
- package/dist/esm/{button-81207236.js → button-ddf9a563.js} +1 -1
- package/dist/esm/{icon-button-40ee07a6.js → icon-button-a1a4a40d.js} +2 -1
- 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/dist/types/components/icon-button/icon-button.d.ts +2 -2
- package/dist/types/components.d.ts +2 -2
- package/package.json +2 -2
- package/dist/components/p-8b058a18.js +0 -1
- package/dist/components/p-b3f12c76.entry.js +0 -1
- package/dist/components/p-f6f2bc86.entry.js +0 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
const index = require('./index-6a92256c.js');
|
|
4
4
|
const index$1 = require('./index-e1b40fa6.js');
|
|
5
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-visible,.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-visible,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus-visible{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-visible,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus-visible{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-visible{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-visible,.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-visible{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-visible{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-
|
|
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-visible,.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-visible,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus-visible{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-visible,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus-visible{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-visible{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-visible,.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-visible{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-visible{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-200)}.btn-txt-secondary:not(.disabled):focus-visible{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-visible,.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-visible,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus-visible{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}.btn-outline-primary{color:var(--vertex-ui-blue-600);border:1px solid var(--vertex-ui-blue-600)}.btn-outline-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-outline-primary:not(.disabled):focus-visible,.btn-outline-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-outline-primary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-outline-primary:not(.disabled):active{box-shadow:none}.btn-outline-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-outline-secondary{color:var(--vertex-ui-neutral-700);border:1px solid var(--vertex-ui-neutral-700)}.btn-outline-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%);background-color:var(--vertex-ui-neutral-300)}.btn-outline-secondary:not(.disabled):focus-visible,.btn-outline-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-outline-secondary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-outline-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-outline-danger{color:var(--vertex-ui-red-600);border:1px solid var(--vertex-ui-red-600)}.btn-outline-danger:not(.disabled):focus-visible,.btn-outline-danger:not(.disabled):active,.btn-outline-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-outline-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-outline-danger:not(.disabled):focus-visible,.btn-outline-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-outline-danger:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-outline-danger:not(.disabled):active{box-shadow:none}.btn-outline-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}";
|
|
7
7
|
|
|
8
8
|
const Button = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ const index = require('./index-6a92256c.js');
|
|
|
4
4
|
const index$1 = require('./index-e1b40fa6.js');
|
|
5
5
|
const iconHelper = require('./icon-helper-4dea7d26.js');
|
|
6
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-
|
|
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-200);--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);--icon-margin:0px}.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;position:relative;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%;margin:var(--icon-margin, 0px)}.badge{position:absolute;top:0px;right:4px;justify-content:flex-end;align-items:flex-end}.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)}.container:not(.disabled):not(.plain):not(.inline):hover{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
8
|
|
|
9
9
|
const IconButton = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -20,6 +20,7 @@ const IconButton = class {
|
|
|
20
20
|
disabled: this.disabled,
|
|
21
21
|
floating: this.variant === 'floating',
|
|
22
22
|
plain: this.variant === 'plain',
|
|
23
|
+
inline: this.variant === 'inline',
|
|
23
24
|
primary: this.iconColor === 'primary',
|
|
24
25
|
secondary: this.iconColor === 'secondary',
|
|
25
26
|
}) }, index.h("slot", { name: "left" }), index.h("div", { class: index$1.classnames('icon-button', {
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -7,7 +7,7 @@ const avatar = require('./avatar-e69bb687.js');
|
|
|
7
7
|
const avatarGroup = require('./avatar-group-d2af53e4.js');
|
|
8
8
|
const badge = require('./badge-d39ac1fc.js');
|
|
9
9
|
const banner = require('./banner-f5f86bf3.js');
|
|
10
|
-
const button = require('./button-
|
|
10
|
+
const button = require('./button-0bf9ea53.js');
|
|
11
11
|
const card = require('./card-ae9e8a8f.js');
|
|
12
12
|
const cardGroup = require('./card-group-da93e610.js');
|
|
13
13
|
const chip = require('./chip-a3b2e8e0.js');
|
|
@@ -23,7 +23,7 @@ const dropdownMenu = require('./dropdown-menu-5ae03a72.js');
|
|
|
23
23
|
const expandable = require('./expandable-b1cd4f0b.js');
|
|
24
24
|
const helpTooltip = require('./help-tooltip-f72eccc7.js');
|
|
25
25
|
const icon = require('./icon-ffd07435.js');
|
|
26
|
-
const iconButton = require('./icon-button-
|
|
26
|
+
const iconButton = require('./icon-button-41b8715e.js');
|
|
27
27
|
const logoLoading = require('./logo-loading-4d49fedf.js');
|
|
28
28
|
const menu = require('./menu-bfc03108.js');
|
|
29
29
|
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-41b8715e.js');
|
|
6
6
|
require('./index-6a92256c.js');
|
|
7
7
|
require('./index-e1b40fa6.js');
|
|
8
8
|
require('./icon-helper-4dea7d26.js');
|
|
@@ -199,7 +199,7 @@ a {
|
|
|
199
199
|
.btn-txt-secondary:not(.disabled):active,
|
|
200
200
|
.btn-txt-secondary:not(.disabled):focus-visible {
|
|
201
201
|
color: var(--vertex-ui-neutral-800);
|
|
202
|
-
background-color: var(--vertex-ui-neutral-
|
|
202
|
+
background-color: var(--vertex-ui-neutral-200);
|
|
203
203
|
}
|
|
204
204
|
|
|
205
205
|
.btn-txt-secondary:not(.disabled):focus-visible {
|
|
@@ -19,9 +19,9 @@ button {
|
|
|
19
19
|
--disabled-cursor: not-allowed;
|
|
20
20
|
/*
|
|
21
21
|
The background color of this button when hovered.
|
|
22
|
-
Defaults to neutral-
|
|
22
|
+
Defaults to neutral-200.
|
|
23
23
|
*/
|
|
24
|
-
--hover-background-color: var(--vertex-ui-neutral-
|
|
24
|
+
--hover-background-color: var(--vertex-ui-neutral-200);
|
|
25
25
|
/*
|
|
26
26
|
The background color of this button when active.
|
|
27
27
|
Defaults to neutral-400.
|
|
@@ -108,6 +108,9 @@ button {
|
|
|
108
108
|
|
|
109
109
|
.container:not(.disabled):not(.plain):hover {
|
|
110
110
|
background-color: var(--hover-background-color);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.container:not(.disabled):not(.plain):not(.inline):hover {
|
|
111
114
|
box-shadow: var(--hover-box-shadow);
|
|
112
115
|
}
|
|
113
116
|
|
|
@@ -14,6 +14,7 @@ export class IconButton {
|
|
|
14
14
|
disabled: this.disabled,
|
|
15
15
|
floating: this.variant === 'floating',
|
|
16
16
|
plain: this.variant === 'plain',
|
|
17
|
+
inline: this.variant === 'inline',
|
|
17
18
|
primary: this.iconColor === 'primary',
|
|
18
19
|
secondary: this.iconColor === 'secondary',
|
|
19
20
|
}) }, h("slot", { name: "left" }), h("div", { class: classNames('icon-button', {
|
|
@@ -89,7 +90,7 @@ export class IconButton {
|
|
|
89
90
|
"mutable": false,
|
|
90
91
|
"complexType": {
|
|
91
92
|
"original": "IconButtonVariant",
|
|
92
|
-
"resolved": "\"default\" | \"floating\" | \"plain\"",
|
|
93
|
+
"resolved": "\"default\" | \"floating\" | \"inline\" | \"plain\"",
|
|
93
94
|
"references": {
|
|
94
95
|
"IconButtonVariant": {
|
|
95
96
|
"location": "local"
|
|
@@ -100,7 +101,7 @@ export class IconButton {
|
|
|
100
101
|
"optional": false,
|
|
101
102
|
"docs": {
|
|
102
103
|
"tags": [],
|
|
103
|
-
"text": "The variant of this <vertex-icon-button>.\nCan be \"default\", \"floating\", or \"plain\" and defaults to \"default\".\n\nSetting this to \"plain\" will disable hover, active, and focus\nbackgrounds or box shadows."
|
|
104
|
+
"text": "The variant of this <vertex-icon-button>.\nCan be \"default\", \"floating\", \"inline\", or \"plain\" and defaults to \"default\".\n\nSetting this to \"plain\" will disable hover, active, and focus\nbackgrounds or box shadows."
|
|
104
105
|
},
|
|
105
106
|
"attribute": "variant",
|
|
106
107
|
"reflect": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{d as e,N as t,w as a,p as r,a as o,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,((r,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,r).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 r=null!==(c=o.t)&&void 0!==c?c:function(e){var t,a,r;return null!==(r=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!==r?r:void 0}(e);null!=r&&t.setAttribute("nonce",r),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?r(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-2930bcb0",[[1,"vertex-color-circle-picker",{colors:[1],labels:[1],labelPlacement:[1,"label-placement"],size:[1],supplementalColors:[1,"supplemental-colors"],theme:[513],lightenPercentage:[2,"lighten-percentage"],darkenPercentage:[2,"darken-percentage"],selected:[1537],direction:[1],colorArray:[32],supplementaryColorArray:[32],labelMap:[32]}]]],["p-6ee5f83f",[[1,"vertex-banner",{content:[1],placement:[1],duration:[2],animated:[4],open:[4],type:[1],isOpen:[32]}]]],["p-41ced35c",[[1,"vertex-context-menu",{targetSelector:[1,"target-selector"],animated:[4],position:[32],open:[32]}]]],["p-22ec9b78",[[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-ea8f3750",[[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-6a49c365",[[6,"vertex-search-bar",{variant:[1],disabled:[4],triggerCharacter:[1,"trigger-character"],breakCharacters:[16],resultItems:[16],placement:[1],value:[1],placeholder:[1],replacements:[1040],replacementUriType:[1,"replacement-uri-type"],cursorPosition:[32],displayedElements:[32],hasTriggered:[32]}]]],["p-4e3ba3df",[[1,"vertex-select",{value:[513],placeholder:[513],disabled:[516],animated:[4],hideSelected:[4,"hide-selected"],resizeObserverFactory:[16],open:[32],position:[32],displayValue:[32]}]]],["p-01d4be1d",[[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-dfe98f07",[[1,"vertex-color-picker",{value:[1537],size:[513],variant:[513],expand:[513],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-0b4406fa",[[1,"vertex-badge",{badgeText:[1,"badge-text"],badgeColor:[1,"badge-color"]}]]],["p-
|
|
1
|
+
import{d as e,N as t,w as a,p as r,a as o,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,((r,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,r).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 r=null!==(c=o.t)&&void 0!==c?c:function(e){var t,a,r;return null!==(r=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!==r?r:void 0}(e);null!=r&&t.setAttribute("nonce",r),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?r(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-2930bcb0",[[1,"vertex-color-circle-picker",{colors:[1],labels:[1],labelPlacement:[1,"label-placement"],size:[1],supplementalColors:[1,"supplemental-colors"],theme:[513],lightenPercentage:[2,"lighten-percentage"],darkenPercentage:[2,"darken-percentage"],selected:[1537],direction:[1],colorArray:[32],supplementaryColorArray:[32],labelMap:[32]}]]],["p-6ee5f83f",[[1,"vertex-banner",{content:[1],placement:[1],duration:[2],animated:[4],open:[4],type:[1],isOpen:[32]}]]],["p-41ced35c",[[1,"vertex-context-menu",{targetSelector:[1,"target-selector"],animated:[4],position:[32],open:[32]}]]],["p-22ec9b78",[[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-ea8f3750",[[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-6a49c365",[[6,"vertex-search-bar",{variant:[1],disabled:[4],triggerCharacter:[1,"trigger-character"],breakCharacters:[16],resultItems:[16],placement:[1],value:[1],placeholder:[1],replacements:[1040],replacementUriType:[1,"replacement-uri-type"],cursorPosition:[32],displayedElements:[32],hasTriggered:[32]}]]],["p-4e3ba3df",[[1,"vertex-select",{value:[513],placeholder:[513],disabled:[516],animated:[4],hideSelected:[4,"hide-selected"],resizeObserverFactory:[16],open:[32],position:[32],displayValue:[32]}]]],["p-01d4be1d",[[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-dfe98f07",[[1,"vertex-color-picker",{value:[1537],size:[513],variant:[513],expand:[513],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-0b4406fa",[[1,"vertex-badge",{badgeText:[1,"badge-text"],badgeColor:[1,"badge-color"]}]]],["p-258c3672",[[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-16fc9e9a",[[1,"vertex-radio-group",{name:[513],value:[1537]}]]],["p-95358d00",[[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-2ae8175d",[[1,"vertex-tab",{label:[1],active:[4]}]]],["p-8d83dfff",[[1,"vertex-tabs",{active:[1025],labels:[32],activeBounds:[32],activeButtonEl:[32]}]]],["p-80c989fa",[[1,"vertex-expandable",{expanded:[1540],expanding:[1540],collapsing:[1540],controlled:[516],expandType:[513,"expand-type"],animated:[4],contentScrollHeight:[32]}]]],["p-ee496965",[[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-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-406e73da",[[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-606596de",[[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"],resizeObserverFactory:[16],opened:[32],computedPlacement:[32]}]]],["p-3b794014",[[1,"vertex-tooltip",{content:[1],disabled:[4],placement:[1],delay:[2],animated:[4],open:[32]}]]],["p-7e6ca4fb",[[1,"vertex-color-swatch",{variant:[513],size:[513],color:[513],supplementalColor:[513,"supplemental-color"],theme:[513],lightenPercentage:[2,"lighten-percentage"],darkenPercentage:[2,"darken-percentage"],lightened:[1537],darkened:[1537]}]]],["p-0de26b21",[[1,"vertex-menu",{animated:[4],open:[1540],placement:[1],fallbackPlacements:[16],backdrop:[4],persistent:[4],position:[1040],popoverProps:[16]}]]],["p-e9efa3f8",[[1,"vertex-icon",{name:[1],size:[1]}]]],["p-bf8ca296",[[1,"vertex-icon-button",{iconName:[1,"icon-name"],disabled:[516],variant:[1],iconColor:[1,"icon-color"],iconSize:[1,"icon-size"]}]]]],e)));
|
|
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
|
|
|
2
2
|
import { c as classnames } from './index2.js';
|
|
3
3
|
import { g as getSvg } from './icon-helper.js';
|
|
4
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-
|
|
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-200);--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);--icon-margin:0px}.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;position:relative;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%;margin:var(--icon-margin, 0px)}.badge{position:absolute;top:0px;right:4px;justify-content:flex-end;align-items:flex-end}.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)}.container:not(.disabled):not(.plain):not(.inline):hover{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
6
|
|
|
7
7
|
const IconButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
8
8
|
constructor() {
|
|
@@ -20,6 +20,7 @@ const IconButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
20
20
|
disabled: this.disabled,
|
|
21
21
|
floating: this.variant === 'floating',
|
|
22
22
|
plain: this.variant === 'plain',
|
|
23
|
+
inline: this.variant === 'inline',
|
|
23
24
|
primary: this.iconColor === 'primary',
|
|
24
25
|
secondary: this.iconColor === 'secondary',
|
|
25
26
|
}) }, h("slot", { name: "left" }), h("div", { class: classnames('icon-button', {
|
|
@@ -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 Badge}from"./p-29d7697f.js";export{B as Banner}from"./p-c0443d8c.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 Badge}from"./p-29d7697f.js";export{B as Banner}from"./p-c0443d8c.js";export{B as Button}from"./p-d5b514a6.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 ColorCirclePicker}from"./p-90931a94.js";export{C as ColorPicker}from"./p-8c69bb83.js";export{C as ColorSwatch}from"./p-e3ea44b2.js";export{C as ContextMenu}from"./p-f2bc7ec5.js";export{D as Dialog}from"./p-90cf31d2.js";export{D as DraggablePopover}from"./p-8b211d6f.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-ec6af16c.js";export{I as IconButton}from"./p-ee300283.js";export{L as LogoLoading}from"./p-817bf6ff.js";export{M as Menu}from"./p-ec7be8df.js";export{M as MenuDivider}from"./p-c939fa4e.js";export{M as MenuItem}from"./p-988058f9.js";export{P as Popover}from"./p-c2706288.js";export{R as Radio}from"./p-36c853c4.js";export{R as RadioGroup}from"./p-f55574fb.js";export{R as Resizable}from"./p-c9a967d9.js";export{R as ResultList}from"./p-6b862967.js";export{S as SearchBar}from"./p-6b6c2260.js";export{S as Select}from"./p-0541e2b0.js";export{S as Slider}from"./p-18ed73e9.js";export{S as Spinner}from"./p-09ba50c3.js";export{T as Tab}from"./p-96f55673.js";export{T as Tabs}from"./p-48629bf1.js";export{T as TextField}from"./p-43b1b3f9.js";export{T as Toast}from"./p-3dd08a0f.js";export{T as Toggle}from"./p-59fb829f.js";export{T as Tooltip}from"./p-5fb1724f.js";import"./p-6834631c.js";import"./p-b2c7b113.js";import"./p-fe062eb0.js";import"./p-98e6e51d.js";import"./p-3438c441.js";import"./p-65f9817e.js";import"./p-1356f525.js";import"./p-59032668.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{B as vertex_button}from"./p-d5b514a6.js";import"./p-6834631c.js";import"./p-fe062eb0.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{I as vertex_icon_button}from"./p-ee300283.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-98e6e51d.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as e,h as t,H as r,g as o}from"./p-6834631c.js";import{c as n}from"./p-fe062eb0.js";const i=class{constructor(t){e(this,t),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 e=this.hostElement.closest("form");null!=e&&(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"),e.appendChild(this.fakeButton))}}disconnectedCallback(){null!=this.hostElement&&null!=this.fakeButton&&this.fakeButton.remove()}render(){const e=n("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-outline-primary":"primary"===this.color&&"outline"===this.variant,"btn-outline-secondary":"secondary"===this.color&&"outline"===this.variant,"btn-outline-danger":"danger"===this.color&&"outline"===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"),t(r,{style:{pointerEvents:this.disabled?"none":void 0}},null!=this.href&&""!==this.href?t("a",{href:this.href,target:this.target,class:e,tabIndex:this.disabled?-1:0},t("slot",null)):t("button",{class:e,disabled:this.disabled,type:this.type,onClick:e=>this.handleClick(e)},t("slot",{name:"left"}),t("slot",null)))}handleClick(e){null!=this.fakeButton&&(e.preventDefault(),this.fakeButton.click())}get hostElement(){return o(this)}};i.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-visible,.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-visible,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus-visible{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-visible,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus-visible{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-visible{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-visible,.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-visible{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-visible{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-
|
|
1
|
+
import{r as e,h as t,H as r,g as o}from"./p-6834631c.js";import{c as n}from"./p-fe062eb0.js";const i=class{constructor(t){e(this,t),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 e=this.hostElement.closest("form");null!=e&&(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"),e.appendChild(this.fakeButton))}}disconnectedCallback(){null!=this.hostElement&&null!=this.fakeButton&&this.fakeButton.remove()}render(){const e=n("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-outline-primary":"primary"===this.color&&"outline"===this.variant,"btn-outline-secondary":"secondary"===this.color&&"outline"===this.variant,"btn-outline-danger":"danger"===this.color&&"outline"===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"),t(r,{style:{pointerEvents:this.disabled?"none":void 0}},null!=this.href&&""!==this.href?t("a",{href:this.href,target:this.target,class:e,tabIndex:this.disabled?-1:0},t("slot",null)):t("button",{class:e,disabled:this.disabled,type:this.type,onClick:e=>this.handleClick(e)},t("slot",{name:"left"}),t("slot",null)))}handleClick(e){null!=this.fakeButton&&(e.preventDefault(),this.fakeButton.click())}get hostElement(){return o(this)}};i.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-visible,.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-visible,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus-visible{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-visible,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus-visible{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-visible{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-visible,.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-visible{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-visible{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-200)}.btn-txt-secondary:not(.disabled):focus-visible{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-visible,.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-visible,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus-visible{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}.btn-outline-primary{color:var(--vertex-ui-blue-600);border:1px solid var(--vertex-ui-blue-600)}.btn-outline-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-outline-primary:not(.disabled):focus-visible,.btn-outline-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-outline-primary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-outline-primary:not(.disabled):active{box-shadow:none}.btn-outline-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-outline-secondary{color:var(--vertex-ui-neutral-700);border:1px solid var(--vertex-ui-neutral-700)}.btn-outline-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%);background-color:var(--vertex-ui-neutral-300)}.btn-outline-secondary:not(.disabled):focus-visible,.btn-outline-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-outline-secondary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-outline-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-outline-danger{color:var(--vertex-ui-red-600);border:1px solid var(--vertex-ui-red-600)}.btn-outline-danger:not(.disabled):focus-visible,.btn-outline-danger:not(.disabled):active,.btn-outline-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-outline-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-outline-danger:not(.disabled):focus-visible,.btn-outline-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-outline-danger:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-outline-danger:not(.disabled):active{box-shadow:none}.btn-outline-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}';export{i as B}
|
|
@@ -0,0 +1 @@
|
|
|
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 a}from"./p-98e6e51d.js";const t=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,inline:"inline"===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})},a(this.iconName),r("div",{class:"badge"},r("slot",{name:"badge"}))),r("slot",null)))}handleClick(o){var r;this.disabled&&(o.preventDefault(),o.stopPropagation()),null===(r=this.buttonEl)||void 0===r||r.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-200);--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);--icon-margin:0px}.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;position:relative;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%;margin:var(--icon-margin, 0px)}.badge{position:absolute;top:0px;right:4px;justify-content:flex-end;align-items:flex-end}.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)}.container:not(.disabled):not(.plain):not(.inline):hover{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}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { c as classnames } from './index2.js';
|
|
3
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-visible,.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-visible,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus-visible{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-visible,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus-visible{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-visible{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-visible,.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-visible{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-visible{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-
|
|
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-visible,.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-visible,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus-visible{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-visible,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus-visible{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-visible{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-visible,.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-visible{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-visible{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-200)}.btn-txt-secondary:not(.disabled):focus-visible{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-visible,.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-visible,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus-visible{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}.btn-outline-primary{color:var(--vertex-ui-blue-600);border:1px solid var(--vertex-ui-blue-600)}.btn-outline-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-outline-primary:not(.disabled):focus-visible,.btn-outline-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-outline-primary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-outline-primary:not(.disabled):active{box-shadow:none}.btn-outline-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-outline-secondary{color:var(--vertex-ui-neutral-700);border:1px solid var(--vertex-ui-neutral-700)}.btn-outline-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%);background-color:var(--vertex-ui-neutral-300)}.btn-outline-secondary:not(.disabled):focus-visible,.btn-outline-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-outline-secondary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-outline-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-outline-danger{color:var(--vertex-ui-red-600);border:1px solid var(--vertex-ui-red-600)}.btn-outline-danger:not(.disabled):focus-visible,.btn-outline-danger:not(.disabled):active,.btn-outline-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-outline-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-outline-danger:not(.disabled):focus-visible,.btn-outline-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-outline-danger:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-outline-danger:not(.disabled):active{box-shadow:none}.btn-outline-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}";
|
|
5
5
|
|
|
6
6
|
const Button = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-72f28b71.js';
|
|
2
2
|
import { c as classnames } from './index-9c609209.js';
|
|
3
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-visible,.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-visible,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus-visible{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-visible,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus-visible{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-visible{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-visible,.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-visible{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-visible{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-
|
|
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-visible,.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-visible,.btn-primary:not(.disabled):active{background-color:var(--vertex-ui-blue-600)}.btn-primary:not(.disabled):focus-visible{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-visible,.btn-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-secondary:not(.disabled):focus-visible{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-visible{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-visible,.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-visible{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-visible{color:var(--vertex-ui-neutral-800);background-color:var(--vertex-ui-neutral-200)}.btn-txt-secondary:not(.disabled):focus-visible{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-visible,.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-visible,.btn-txt-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-txt-danger:not(.disabled):focus-visible{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}.btn-outline-primary{color:var(--vertex-ui-blue-600);border:1px solid var(--vertex-ui-blue-600)}.btn-outline-primary:not(.disabled):hover{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-200)}.btn-outline-primary:not(.disabled):focus-visible,.btn-outline-primary:not(.disabled):active{color:var(--vertex-ui-blue-800);background-color:var(--vertex-ui-blue-300)}.btn-outline-primary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-blue-900)}.btn-outline-primary:not(.disabled):active{box-shadow:none}.btn-outline-primary.disabled{color:var(--vertex-ui-blue-300);box-shadow:none}.btn-outline-secondary{color:var(--vertex-ui-neutral-700);border:1px solid var(--vertex-ui-neutral-700)}.btn-outline-secondary:not(.disabled):hover{box-shadow:0 2px 2px rgb(0 0 0 / 20%);background-color:var(--vertex-ui-neutral-300)}.btn-outline-secondary:not(.disabled):focus-visible,.btn-outline-secondary:not(.disabled):active{background-color:var(--vertex-ui-neutral-400)}.btn-outline-secondary:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-neutral-900)}.btn-outline-secondary.disabled{color:var(--vertex-ui-neutral-300);box-shadow:none}.btn-outline-danger{color:var(--vertex-ui-red-600);border:1px solid var(--vertex-ui-red-600)}.btn-outline-danger:not(.disabled):focus-visible,.btn-outline-danger:not(.disabled):active,.btn-outline-danger:not(.disabled):hover{color:var(--vertex-ui-red-800)}.btn-outline-danger:not(.disabled):hover{background-color:var(--vertex-ui-red-200)}.btn-outline-danger:not(.disabled):focus-visible,.btn-outline-danger:not(.disabled):active{background-color:var(--vertex-ui-red-300)}.btn-outline-danger:not(.disabled):focus-visible{box-shadow:0 0 0 1px var(--vertex-ui-red-900)}.btn-outline-danger:not(.disabled):active{box-shadow:none}.btn-outline-danger.disabled{color:var(--vertex-ui-red-300);box-shadow:none}";
|
|
5
5
|
|
|
6
6
|
const Button = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host } from './index-72f28b71.js';
|
|
|
2
2
|
import { c as classnames } from './index-9c609209.js';
|
|
3
3
|
import { g as getSvg } from './icon-helper-76e116b1.js';
|
|
4
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-
|
|
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-200);--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);--icon-margin:0px}.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;position:relative;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%;margin:var(--icon-margin, 0px)}.badge{position:absolute;top:0px;right:4px;justify-content:flex-end;align-items:flex-end}.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)}.container:not(.disabled):not(.plain):not(.inline):hover{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
6
|
|
|
7
7
|
const IconButton = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -18,6 +18,7 @@ const IconButton = class {
|
|
|
18
18
|
disabled: this.disabled,
|
|
19
19
|
floating: this.variant === 'floating',
|
|
20
20
|
plain: this.variant === 'plain',
|
|
21
|
+
inline: this.variant === 'inline',
|
|
21
22
|
primary: this.iconColor === 'primary',
|
|
22
23
|
secondary: this.iconColor === 'secondary',
|
|
23
24
|
}) }, h("slot", { name: "left" }), h("div", { class: classnames('icon-button', {
|
package/dist/esm/index.js
CHANGED
|
@@ -3,7 +3,7 @@ export { A as Avatar } from './avatar-775455a5.js';
|
|
|
3
3
|
export { A as AvatarGroup } from './avatar-group-e5ca86bf.js';
|
|
4
4
|
export { B as Badge } from './badge-6d27ca92.js';
|
|
5
5
|
export { B as Banner } from './banner-bf9b7454.js';
|
|
6
|
-
export { B as Button } from './button-
|
|
6
|
+
export { B as Button } from './button-ddf9a563.js';
|
|
7
7
|
export { C as Card } from './card-1e8790aa.js';
|
|
8
8
|
export { C as CardGroup } from './card-group-4e8e0421.js';
|
|
9
9
|
export { C as Chip } from './chip-4e568eee.js';
|
|
@@ -19,7 +19,7 @@ export { D as DropdownMenu } from './dropdown-menu-1598ba20.js';
|
|
|
19
19
|
export { E as Expandable } from './expandable-b487cb00.js';
|
|
20
20
|
export { H as HelpTooltip } from './help-tooltip-c2f0d996.js';
|
|
21
21
|
export { I as Icon } from './icon-079417a6.js';
|
|
22
|
-
export { I as IconButton } from './icon-button-
|
|
22
|
+
export { I as IconButton } from './icon-button-a1a4a40d.js';
|
|
23
23
|
export { L as LogoLoading } from './logo-loading-3c7fa23d.js';
|
|
24
24
|
export { M as Menu } from './menu-49420f98.js';
|
|
25
25
|
export { M as MenuDivider } from './menu-divider-87c888cb.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { h } from '../../stencil-public-runtime';
|
|
2
2
|
import { IconName, IconSize } from '../../types/icon';
|
|
3
|
-
export type IconButtonVariant = 'default' | 'floating' | 'plain';
|
|
3
|
+
export type IconButtonVariant = 'default' | 'floating' | 'plain' | 'inline';
|
|
4
4
|
export type IconButtonIconColor = 'secondary' | 'primary' | 'default';
|
|
5
5
|
export declare class IconButton {
|
|
6
6
|
/**
|
|
@@ -13,7 +13,7 @@ export declare class IconButton {
|
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
/**
|
|
15
15
|
* The variant of this <vertex-icon-button>.
|
|
16
|
-
* Can be "default", "floating", or "plain" and defaults to "default".
|
|
16
|
+
* Can be "default", "floating", "inline", or "plain" and defaults to "default".
|
|
17
17
|
*
|
|
18
18
|
* Setting this to "plain" will disable hover, active, and focus
|
|
19
19
|
* backgrounds or box shadows.
|
|
@@ -441,7 +441,7 @@ export namespace Components {
|
|
|
441
441
|
*/
|
|
442
442
|
"iconSize": IconSize;
|
|
443
443
|
/**
|
|
444
|
-
* The variant of this <vertex-icon-button>. Can be "default", "floating", or "plain" and defaults to "default". Setting this to "plain" will disable hover, active, and focus backgrounds or box shadows.
|
|
444
|
+
* The variant of this <vertex-icon-button>. Can be "default", "floating", "inline", or "plain" and defaults to "default". Setting this to "plain" will disable hover, active, and focus backgrounds or box shadows.
|
|
445
445
|
*/
|
|
446
446
|
"variant": IconButtonVariant;
|
|
447
447
|
}
|
|
@@ -1764,7 +1764,7 @@ declare namespace LocalJSX {
|
|
|
1764
1764
|
*/
|
|
1765
1765
|
"iconSize"?: IconSize;
|
|
1766
1766
|
/**
|
|
1767
|
-
* The variant of this <vertex-icon-button>. Can be "default", "floating", or "plain" and defaults to "default". Setting this to "plain" will disable hover, active, and focus backgrounds or box shadows.
|
|
1767
|
+
* The variant of this <vertex-icon-button>. Can be "default", "floating", "inline", or "plain" and defaults to "default". Setting this to "plain" will disable hover, active, and focus backgrounds or box shadows.
|
|
1768
1768
|
*/
|
|
1769
1769
|
"variant"?: IconButtonVariant;
|
|
1770
1770
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vertexvis/ui",
|
|
3
|
-
"version": "0.1.5-canary.
|
|
3
|
+
"version": "0.1.5-canary.4",
|
|
4
4
|
"description": "The Vertex UI component library.",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"@vertexvis/utils": "^0.23.2",
|
|
88
88
|
"fast-deep-equal": "^3.1.3"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "e7b60329e644e335cfe44831c7bad1b09f3fc0eb"
|
|
91
91
|
}
|
|
@@ -1 +0,0 @@
|
|
|
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-98e6e51d.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("div",{class:"badge"},o("slot",{name:"badge"}))),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);--icon-margin:0px}.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;position:relative;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%;margin:var(--icon-margin, 0px)}.badge{position:absolute;top:0px;right:4px;justify-content:flex-end;align-items:flex-end}.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}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export{I as vertex_icon_button}from"./p-8b058a18.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-98e6e51d.js";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export{B as vertex_button}from"./p-1e645c1f.js";import"./p-6834631c.js";import"./p-fe062eb0.js";
|