@lukso/web-components 1.86.0 → 1.88.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/index.cjs +9 -4
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +5 -4
- package/dist/components/lukso-button/index.cjs +10 -4
- package/dist/components/lukso-button/index.d.ts +1 -1
- package/dist/components/lukso-button/index.d.ts.map +1 -1
- package/dist/components/lukso-button/index.js +10 -4
- package/dist/components/lukso-button/lukso-button.stories.d.ts +4 -0
- package/dist/components/lukso-button/lukso-button.stories.d.ts.map +1 -1
- package/dist/components/lukso-card/index.cjs +3 -3
- package/dist/components/lukso-card/index.js +3 -3
- package/dist/components/lukso-checkbox/index.cjs +1 -1
- package/dist/components/lukso-checkbox/index.js +1 -1
- package/dist/components/lukso-dropdown/index.cjs +4 -4
- package/dist/components/lukso-dropdown/index.js +4 -4
- package/dist/components/lukso-dropdown-option/index.cjs +1 -1
- package/dist/components/lukso-dropdown-option/index.js +1 -1
- package/dist/components/lukso-footer/index.cjs +1 -1
- package/dist/components/lukso-footer/index.js +1 -1
- package/dist/components/lukso-icon/index.cjs +2 -2
- package/dist/components/lukso-icon/index.js +2 -2
- package/dist/components/lukso-image/index.cjs +2 -2
- package/dist/components/lukso-image/index.js +2 -2
- package/dist/components/lukso-input/index.cjs +2 -2
- package/dist/components/lukso-input/index.js +2 -2
- package/dist/components/lukso-modal/index.cjs +39 -29
- package/dist/components/lukso-modal/index.d.ts +1 -4
- package/dist/components/lukso-modal/index.d.ts.map +1 -1
- package/dist/components/lukso-modal/index.js +39 -29
- package/dist/components/lukso-navbar/index.cjs +3 -3
- package/dist/components/lukso-navbar/index.js +3 -3
- package/dist/components/lukso-pagination/index.cjs +2 -2
- package/dist/components/lukso-pagination/index.js +2 -2
- package/dist/components/lukso-profile/index.cjs +2 -2
- package/dist/components/lukso-profile/index.js +2 -2
- package/dist/components/lukso-progress/index.cjs +2 -2
- package/dist/components/lukso-progress/index.js +2 -2
- package/dist/components/lukso-sanitize/index.cjs +1 -1
- package/dist/components/lukso-sanitize/index.js +1 -1
- package/dist/components/lukso-search/index.cjs +4 -4
- package/dist/components/lukso-search/index.js +4 -4
- package/dist/components/lukso-select/index.cjs +4 -4
- package/dist/components/lukso-select/index.js +4 -4
- package/dist/components/lukso-share/index.cjs +1 -1
- package/dist/components/lukso-share/index.js +1 -1
- package/dist/components/lukso-switch/index.cjs +2 -2
- package/dist/components/lukso-switch/index.js +2 -2
- package/dist/components/lukso-tag/index.cjs +2 -2
- package/dist/components/lukso-tag/index.js +2 -2
- package/dist/components/lukso-terms/index.cjs +2 -2
- package/dist/components/lukso-terms/index.js +2 -2
- package/dist/components/lukso-test/index.cjs +1 -1
- package/dist/components/lukso-test/index.js +1 -1
- package/dist/components/lukso-textarea/index.cjs +361 -0
- package/dist/components/lukso-textarea/index.d.ts +46 -0
- package/dist/components/lukso-textarea/index.d.ts.map +1 -0
- package/dist/components/lukso-textarea/index.js +359 -0
- package/dist/components/lukso-textarea/lukso-textarea.stories.d.ts +23 -0
- package/dist/components/lukso-textarea/lukso-textarea.stories.d.ts.map +1 -0
- package/dist/components/lukso-tooltip/index.cjs +2 -2
- package/dist/components/lukso-tooltip/index.js +2 -2
- package/dist/components/lukso-username/index.cjs +2 -2
- package/dist/components/lukso-username/index.js +2 -2
- package/dist/components/lukso-wizard/index.cjs +1 -1
- package/dist/components/lukso-wizard/index.js +1 -1
- package/dist/{index-f1acf332.js → index-0f429f67.js} +1 -1
- package/dist/index-14baf4da.js +39 -0
- package/dist/{index-30881141.js → index-62e802f0.js} +1 -1
- package/dist/{index-bf97dd78.cjs → index-752774b2.cjs} +1 -1
- package/dist/{index-abf15ef1.cjs → index-8186b19a.cjs} +1 -1
- package/dist/index-8322d22b.cjs +46 -0
- package/dist/index.cjs +9 -4
- package/dist/index.js +5 -4
- package/dist/shared/tailwind-element/index.cjs +1 -1
- package/dist/shared/tailwind-element/index.js +1 -1
- package/dist/{style-map-7ce21e2c.cjs → style-map-272091aa.cjs} +1 -1
- package/dist/{style-map-6e8b083a.js → style-map-f7093d93.js} +1 -1
- package/package.json +6 -1
- package/dist/index-b2b49383.js +0 -39
- package/dist/index-df36fb06.cjs +0 -46
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
|
5
5
|
const components_luksoButton_index = require('./lukso-button/index.cjs');
|
|
6
6
|
const components_luksoCard_index = require('./lukso-card/index.cjs');
|
|
7
7
|
const components_luksoCheckbox_index = require('./lukso-checkbox/index.cjs');
|
|
8
|
-
const components_luksoDropdown_index = require('../index-
|
|
8
|
+
const components_luksoDropdown_index = require('../index-8186b19a.cjs');
|
|
9
9
|
const components_luksoDropdownOption_index = require('./lukso-dropdown-option/index.cjs');
|
|
10
10
|
const components_luksoFooter_index = require('./lukso-footer/index.cjs');
|
|
11
11
|
const components_luksoIcon_index = require('./lukso-icon/index.cjs');
|
|
@@ -24,19 +24,20 @@ const components_luksoSwitch_index = require('./lukso-switch/index.cjs');
|
|
|
24
24
|
const components_luksoTag_index = require('./lukso-tag/index.cjs');
|
|
25
25
|
const components_luksoTerms_index = require('./lukso-terms/index.cjs');
|
|
26
26
|
const components_luksoTest_index = require('./lukso-test/index.cjs');
|
|
27
|
+
const components_luksoTextarea_index = require('./lukso-textarea/index.cjs');
|
|
27
28
|
const components_luksoTooltip_index = require('./lukso-tooltip/index.cjs');
|
|
28
29
|
const components_luksoUsername_index = require('./lukso-username/index.cjs');
|
|
29
30
|
const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
|
|
30
|
-
const shared_tailwindElement_index = require('../index-
|
|
31
|
+
const shared_tailwindElement_index = require('../index-8322d22b.cjs');
|
|
31
32
|
require('../cn-5ceac001.cjs');
|
|
32
33
|
require('../query-assigned-elements-d5e45650.cjs');
|
|
33
34
|
require('../state-d9fb972b.cjs');
|
|
34
35
|
require('../index-1d3f4a5a.cjs');
|
|
35
36
|
require('../bundle-mjs-d58a83c6.cjs');
|
|
36
37
|
require('../tailwind-config.cjs');
|
|
37
|
-
require('../style-map-
|
|
38
|
+
require('../style-map-272091aa.cjs');
|
|
38
39
|
require('../directive-8278ab14.cjs');
|
|
39
|
-
require('../index-
|
|
40
|
+
require('../index-752774b2.cjs');
|
|
40
41
|
require('../index-e9668573.cjs');
|
|
41
42
|
|
|
42
43
|
|
|
@@ -129,6 +130,10 @@ Object.defineProperty(exports, 'LuksoTest', {
|
|
|
129
130
|
enumerable: true,
|
|
130
131
|
get: () => components_luksoTest_index.LuksoTest
|
|
131
132
|
});
|
|
133
|
+
Object.defineProperty(exports, 'LuksoTextarea', {
|
|
134
|
+
enumerable: true,
|
|
135
|
+
get: () => components_luksoTextarea_index.LuksoTextarea
|
|
136
|
+
});
|
|
132
137
|
Object.defineProperty(exports, 'LuksoTooltip', {
|
|
133
138
|
enumerable: true,
|
|
134
139
|
get: () => components_luksoTooltip_index.LuksoTooltip
|
|
@@ -20,6 +20,7 @@ export * from './lukso-switch/index';
|
|
|
20
20
|
export * from './lukso-tag/index';
|
|
21
21
|
export * from './lukso-terms/index';
|
|
22
22
|
export * from './lukso-test/index';
|
|
23
|
+
export * from './lukso-textarea/index';
|
|
23
24
|
export * from './lukso-tooltip/index';
|
|
24
25
|
export * from './lukso-username/index';
|
|
25
26
|
export * from './lukso-wizard/index';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA"}
|
package/dist/components/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { LuksoButton } from './lukso-button/index.js';
|
|
2
2
|
export { LuksoCard } from './lukso-card/index.js';
|
|
3
3
|
export { LuksoCheckbox } from './lukso-checkbox/index.js';
|
|
4
|
-
export { L as LuksoDropdown } from '../index-
|
|
4
|
+
export { L as LuksoDropdown } from '../index-62e802f0.js';
|
|
5
5
|
export { LuksoDropdownOption } from './lukso-dropdown-option/index.js';
|
|
6
6
|
export { LuksoFooter } from './lukso-footer/index.js';
|
|
7
7
|
export { LuksoIcon } from './lukso-icon/index.js';
|
|
@@ -20,17 +20,18 @@ export { LuksoSwitch } from './lukso-switch/index.js';
|
|
|
20
20
|
export { LuksoTag } from './lukso-tag/index.js';
|
|
21
21
|
export { LuksoTerms } from './lukso-terms/index.js';
|
|
22
22
|
export { LuksoTest } from './lukso-test/index.js';
|
|
23
|
+
export { LuksoTextarea } from './lukso-textarea/index.js';
|
|
23
24
|
export { LuksoTooltip } from './lukso-tooltip/index.js';
|
|
24
25
|
export { LuksoUsername } from './lukso-username/index.js';
|
|
25
26
|
export { LuksoWizard } from './lukso-wizard/index.js';
|
|
26
|
-
export { a as TailwindElement, T as TailwindStyledElement } from '../index-
|
|
27
|
+
export { a as TailwindElement, T as TailwindStyledElement } from '../index-14baf4da.js';
|
|
27
28
|
import '../cn-b54dcc61.js';
|
|
28
29
|
import '../query-assigned-elements-1c8c9e90.js';
|
|
29
30
|
import '../state-b9ca4e74.js';
|
|
30
31
|
import '../index-ca8e900d.js';
|
|
31
32
|
import '../bundle-mjs-fbc6e2a8.js';
|
|
32
33
|
import '../tailwind-config.js';
|
|
33
|
-
import '../style-map-
|
|
34
|
+
import '../style-map-f7093d93.js';
|
|
34
35
|
import '../directive-2bb7789e.js';
|
|
35
|
-
import '../index-
|
|
36
|
+
import '../index-0f429f67.js';
|
|
36
37
|
import '../index-5e194caf.js';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
7
|
const state = require('../../state-d9fb972b.cjs');
|
|
8
8
|
const index = require('../../index-1d3f4a5a.cjs');
|
|
@@ -78,7 +78,13 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
|
|
|
78
78
|
"nav-text": "bg-transparent border-none nav-apax-12-medium-uppercase text-purple-63 hover:text-purple-41 !text-12 transition",
|
|
79
79
|
success: `bg-green-54 border-green-54 text-neutral-100
|
|
80
80
|
disabled:hover:!bg-green-54 disabled:hover:!border-green-54
|
|
81
|
-
hover:bg-green-63 hover:border-green-63 before:bg-green-54
|
|
81
|
+
hover:bg-green-63 hover:border-green-63 before:bg-green-54`,
|
|
82
|
+
danger: `bg-red-55 border-red-55 text-neutral-100
|
|
83
|
+
disabled:hover:!bg-red-55 disabled:hover:!border-red-55
|
|
84
|
+
hover:bg-red-65 hover:border-red-65 before:bg-red-55`,
|
|
85
|
+
warning: `bg-yellow-55 border-yellow-55 text-neutral-100
|
|
86
|
+
disabled:hover:!bg-yellow-55 disabled:hover:!border-yellow-55
|
|
87
|
+
hover:bg-yellow-65 hover:border-yellow-65 before:bg-yellow-55`
|
|
82
88
|
},
|
|
83
89
|
size: {
|
|
84
90
|
medium: "h-[48px] px-6 paragraph-inter-16-semi-bold rounded-12",
|
|
@@ -118,7 +124,7 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
|
|
|
118
124
|
},
|
|
119
125
|
{
|
|
120
126
|
size: ["medium"],
|
|
121
|
-
color: ["primary", "landing", "success"],
|
|
127
|
+
color: ["primary", "landing", "success", "danger", "warning"],
|
|
122
128
|
class: "hover:shadow-button-medium-hover-primary active:shadow-button-medium-press-primary"
|
|
123
129
|
},
|
|
124
130
|
{
|
|
@@ -128,7 +134,7 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
|
|
|
128
134
|
},
|
|
129
135
|
{
|
|
130
136
|
size: ["small"],
|
|
131
|
-
color: ["primary", "landing", "success"],
|
|
137
|
+
color: ["primary", "landing", "success", "danger", "warning"],
|
|
132
138
|
class: "hover:shadow-button-small-hover-primary active:shadow-button-small-press-primary"
|
|
133
139
|
},
|
|
134
140
|
{
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { InputSize } from '../../shared/types';
|
|
2
|
-
export type ButtonVariant = 'primary' | 'secondary' | 'landing' | 'text' | 'nav-button' | 'nav-text' | 'link' | 'success';
|
|
2
|
+
export type ButtonVariant = 'primary' | 'secondary' | 'landing' | 'text' | 'nav-button' | 'nav-text' | 'link' | 'success' | 'danger' | 'warning';
|
|
3
3
|
export type ButtonType = 'submit' | 'reset' | 'button';
|
|
4
4
|
export type LinkTarget = '_blank' | '_self' | '_parent' | '_top';
|
|
5
5
|
declare const LuksoButton_base: typeof import("lit").LitElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-button/index.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,YAAY,GACZ,UAAU,GACV,MAAM,GACN,SAAS,CAAA;AACb,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;AACtD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;;AAIhE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,OAAO,EAAE,aAAa,CAAY;IAGlC,IAAI,EAAE,SAAS,CAAW;IAG1B,QAAQ,UAAQ;IAGhB,WAAW,UAAQ;IAGnB,WAAW,UAAQ;IAGnB,MAAM,UAAQ;IAGd,SAAS,UAAQ;IAGjB,IAAI,EAAE,UAAU,CAAW;IAG3B,IAAI,SAAK;IAGT,MAAM,EAAE,UAAU,CAAW;IAG7B,GAAG,SAAK;IAGR,WAAW,SAAK;IAGhB,WAAW,SAAK;IAGhB,QAAQ,UAAQ;IAGhB,KAAK,SAAK;IAGV,MAAM,UAAQ;IAGd,OAAO,CAAC,SAAS,CAAQ;IAGzB,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,KAAK,CAAI;IAEjB,OAAO,CAAC,aAAa,CAOnB;IAEF,OAAO,CAAC,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-button/index.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,YAAY,GACZ,UAAU,GACV,MAAM,GACN,SAAS,GACT,QAAQ,GACR,SAAS,CAAA;AACb,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;AACtD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;;AAIhE,qBACa,WAAY,SAAQ,gBAA4B;IAE3D,OAAO,EAAE,aAAa,CAAY;IAGlC,IAAI,EAAE,SAAS,CAAW;IAG1B,QAAQ,UAAQ;IAGhB,WAAW,UAAQ;IAGnB,WAAW,UAAQ;IAGnB,MAAM,UAAQ;IAGd,SAAS,UAAQ;IAGjB,IAAI,EAAE,UAAU,CAAW;IAG3B,IAAI,SAAK;IAGT,MAAM,EAAE,UAAU,CAAW;IAG7B,GAAG,SAAK;IAGR,WAAW,SAAK;IAGhB,WAAW,SAAK;IAGhB,QAAQ,UAAQ;IAGhB,KAAK,SAAK;IAGV,MAAM,UAAQ;IAGd,OAAO,CAAC,SAAS,CAAQ;IAGzB,OAAO,CAAC,YAAY,CAAQ;IAG5B,OAAO,CAAC,KAAK,CAAI;IAEjB,OAAO,CAAC,aAAa,CAOnB;IAEF,OAAO,CAAC,YAAY,CAwGlB;IAEF,OAAO,CAAC,aAAa,CAenB;IAEF,OAAO,CAAC,eAAe;IA2BvB,OAAO,CAAC,aAAa;IAcrB,eAAe;IAkBf,eAAe;IAQf,cAAc;IA8Bd,YAAY;IAuBZ,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x, A } from '../../index-
|
|
1
|
+
import { T as TailwindStyledElement, x, A } from '../../index-14baf4da.js';
|
|
2
2
|
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
3
|
import { t } from '../../state-b9ca4e74.js';
|
|
4
4
|
import { c as ce } from '../../index-ca8e900d.js';
|
|
@@ -74,7 +74,13 @@ let LuksoButton = class extends TailwindStyledElement(style) {
|
|
|
74
74
|
"nav-text": "bg-transparent border-none nav-apax-12-medium-uppercase text-purple-63 hover:text-purple-41 !text-12 transition",
|
|
75
75
|
success: `bg-green-54 border-green-54 text-neutral-100
|
|
76
76
|
disabled:hover:!bg-green-54 disabled:hover:!border-green-54
|
|
77
|
-
hover:bg-green-63 hover:border-green-63 before:bg-green-54
|
|
77
|
+
hover:bg-green-63 hover:border-green-63 before:bg-green-54`,
|
|
78
|
+
danger: `bg-red-55 border-red-55 text-neutral-100
|
|
79
|
+
disabled:hover:!bg-red-55 disabled:hover:!border-red-55
|
|
80
|
+
hover:bg-red-65 hover:border-red-65 before:bg-red-55`,
|
|
81
|
+
warning: `bg-yellow-55 border-yellow-55 text-neutral-100
|
|
82
|
+
disabled:hover:!bg-yellow-55 disabled:hover:!border-yellow-55
|
|
83
|
+
hover:bg-yellow-65 hover:border-yellow-65 before:bg-yellow-55`
|
|
78
84
|
},
|
|
79
85
|
size: {
|
|
80
86
|
medium: "h-[48px] px-6 paragraph-inter-16-semi-bold rounded-12",
|
|
@@ -114,7 +120,7 @@ let LuksoButton = class extends TailwindStyledElement(style) {
|
|
|
114
120
|
},
|
|
115
121
|
{
|
|
116
122
|
size: ["medium"],
|
|
117
|
-
color: ["primary", "landing", "success"],
|
|
123
|
+
color: ["primary", "landing", "success", "danger", "warning"],
|
|
118
124
|
class: "hover:shadow-button-medium-hover-primary active:shadow-button-medium-press-primary"
|
|
119
125
|
},
|
|
120
126
|
{
|
|
@@ -124,7 +130,7 @@ let LuksoButton = class extends TailwindStyledElement(style) {
|
|
|
124
130
|
},
|
|
125
131
|
{
|
|
126
132
|
size: ["small"],
|
|
127
|
-
color: ["primary", "landing", "success"],
|
|
133
|
+
color: ["primary", "landing", "success", "danger", "warning"],
|
|
128
134
|
class: "hover:shadow-button-small-hover-primary active:shadow-button-small-press-primary"
|
|
129
135
|
},
|
|
130
136
|
{
|
|
@@ -10,6 +10,10 @@ export declare const Secondary: any;
|
|
|
10
10
|
export declare const Landing: any;
|
|
11
11
|
/** Example of `success` variant. */
|
|
12
12
|
export declare const Success: any;
|
|
13
|
+
/** Example of `danger` variant. */
|
|
14
|
+
export declare const Danger: any;
|
|
15
|
+
/** Example of `warning` variant. */
|
|
16
|
+
export declare const Warning: any;
|
|
13
17
|
/** Example of `text` variant. */
|
|
14
18
|
export declare const Text: any;
|
|
15
19
|
/** Example of `nav-button` variant. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lukso-button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-button/lukso-button.stories.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAChB,OAAO,eAAe,CAAA;AAEtB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"lukso-button.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-button/lukso-button.stories.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,SAAS,CAAA;AAChB,OAAO,eAAe,CAAA;AAEtB,+DAA+D;AAC/D,QAAA,MAAM,IAAI,EAAE,IAoNX,CAAA;AAED,eAAe,IAAI,CAAA;AA2CnB,oDAAoD;AACpD,eAAO,MAAM,OAAO,KAAoB,CAAA;AAexC,sCAAsC;AACtC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAW1C,qCAAqC;AACrC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAWxC,qCAAqC;AACrC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,oCAAoC;AACpC,eAAO,MAAM,MAAM,KAAoB,CAAA;AAKvC,qCAAqC;AACrC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,kCAAkC;AAClC,eAAO,MAAM,IAAI,KAAoB,CAAA;AAWrC,wCAAwC;AACxC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,sCAAsC;AACtC,eAAO,MAAM,OAAO,KAAoB,CAAA;AAKxC,kCAAkC;AAClC,eAAO,MAAM,WAAW,KAAoB,CAAA;AAK5C,uCAAuC;AACvC,eAAO,MAAM,SAAS,KAAoB,CAAA;AAK1C,gGAAgG;AAChG,eAAO,MAAM,SAAS,KAAoB,CAAA;AAW1C,gEAAgE;AAChE,eAAO,MAAM,cAAc,KAAoB,CAAA;AAa/C,6GAA6G;AAC7G,eAAO,MAAM,UAAU,KAAoB,CAAA;AAe3C;;GAEG;AACH,eAAO,MAAM,eAAe,KAAoB,CAAA;AAahD;4FAC4F;AAC5F,eAAO,MAAM,IAAI,KAAoB,CAAA;AAerC;GACG;AACH,eAAO,MAAM,aAAa,KAAoB,CAAA;AAc9C,uEAAuE;AACvE,eAAO,MAAM,iBAAiB,KAAoB,CAAA;AAalD,iDAAiD;AACjD,eAAO,MAAM,aAAa,KAAoB,CAAA"}
|
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
7
|
const state = require('../../state-d9fb972b.cjs');
|
|
8
|
-
const styleMap = require('../../style-map-
|
|
8
|
+
const styleMap = require('../../style-map-272091aa.cjs');
|
|
9
9
|
const index = require('../../index-1d3f4a5a.cjs');
|
|
10
10
|
require('../lukso-profile/index.cjs');
|
|
11
11
|
require('../../tailwind-config.cjs');
|
|
12
12
|
const cn = require('../../cn-5ceac001.cjs');
|
|
13
|
-
const index$1 = require('../../index-
|
|
13
|
+
const index$1 = require('../../index-752774b2.cjs');
|
|
14
14
|
require('../lukso-image/index.cjs');
|
|
15
15
|
require('../../directive-8278ab14.cjs');
|
|
16
16
|
require('../../bundle-mjs-d58a83c6.cjs');
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x, A } from '../../index-
|
|
1
|
+
import { T as TailwindStyledElement, x, A } from '../../index-14baf4da.js';
|
|
2
2
|
import { n, l, e } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
3
|
import { t } from '../../state-b9ca4e74.js';
|
|
4
|
-
import { o } from '../../style-map-
|
|
4
|
+
import { o } from '../../style-map-f7093d93.js';
|
|
5
5
|
import { c as ce } from '../../index-ca8e900d.js';
|
|
6
6
|
import '../lukso-profile/index.js';
|
|
7
7
|
import '../../tailwind-config.js';
|
|
8
8
|
import { c as cn } from '../../cn-b54dcc61.js';
|
|
9
|
-
import { c as customStyleMap } from '../../index-
|
|
9
|
+
import { c as customStyleMap } from '../../index-0f429f67.js';
|
|
10
10
|
import '../lukso-image/index.js';
|
|
11
11
|
import '../../directive-2bb7789e.js';
|
|
12
12
|
import '../../bundle-mjs-fbc6e2a8.js';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
7
|
const state = require('../../state-d9fb972b.cjs');
|
|
8
8
|
const index = require('../../index-e9668573.cjs');
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as TailwindElement, x, A } from '../../index-
|
|
1
|
+
import { a as TailwindElement, x, A } from '../../index-14baf4da.js';
|
|
2
2
|
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
3
|
import { t } from '../../state-b9ca4e74.js';
|
|
4
4
|
import { c as customClassMap } from '../../index-5e194caf.js';
|
|
@@ -2,19 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
require('../../index-
|
|
5
|
+
require('../../index-8322d22b.cjs');
|
|
6
6
|
require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
7
|
require('../../state-d9fb972b.cjs');
|
|
8
8
|
require('../../index-1d3f4a5a.cjs');
|
|
9
9
|
require('../lukso-icon/index.cjs');
|
|
10
10
|
require('../lukso-profile/index.cjs');
|
|
11
11
|
require('../lukso-username/index.cjs');
|
|
12
|
-
const components_luksoDropdown_index = require('../../index-
|
|
12
|
+
const components_luksoDropdown_index = require('../../index-8186b19a.cjs');
|
|
13
13
|
require('../../bundle-mjs-d58a83c6.cjs');
|
|
14
|
-
require('../../style-map-
|
|
14
|
+
require('../../style-map-272091aa.cjs');
|
|
15
15
|
require('../../directive-8278ab14.cjs');
|
|
16
16
|
require('../lukso-image/index.cjs');
|
|
17
|
-
require('../../index-
|
|
17
|
+
require('../../index-752774b2.cjs');
|
|
18
18
|
require('../../tailwind-config.cjs');
|
|
19
19
|
require('../../cn-5ceac001.cjs');
|
|
20
20
|
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import '../../index-
|
|
1
|
+
import '../../index-14baf4da.js';
|
|
2
2
|
import '../../query-assigned-elements-1c8c9e90.js';
|
|
3
3
|
import '../../state-b9ca4e74.js';
|
|
4
4
|
import '../../index-ca8e900d.js';
|
|
5
5
|
import '../lukso-icon/index.js';
|
|
6
6
|
import '../lukso-profile/index.js';
|
|
7
7
|
import '../lukso-username/index.js';
|
|
8
|
-
export { L as LuksoDropdown } from '../../index-
|
|
8
|
+
export { L as LuksoDropdown } from '../../index-62e802f0.js';
|
|
9
9
|
import '../../bundle-mjs-fbc6e2a8.js';
|
|
10
|
-
import '../../style-map-
|
|
10
|
+
import '../../style-map-f7093d93.js';
|
|
11
11
|
import '../../directive-2bb7789e.js';
|
|
12
12
|
import '../lukso-image/index.js';
|
|
13
|
-
import '../../index-
|
|
13
|
+
import '../../index-0f429f67.js';
|
|
14
14
|
import '../../tailwind-config.js';
|
|
15
15
|
import '../../cn-b54dcc61.js';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
7
|
const index = require('../../index-1d3f4a5a.cjs');
|
|
8
8
|
require('../../bundle-mjs-d58a83c6.cjs');
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x } from '../../index-
|
|
1
|
+
import { T as TailwindStyledElement, x } from '../../index-14baf4da.js';
|
|
2
2
|
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
3
|
import { c as ce } from '../../index-ca8e900d.js';
|
|
4
4
|
import '../../bundle-mjs-fbc6e2a8.js';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
7
|
|
|
8
8
|
var __defProp = Object.defineProperty;
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
|
-
const styleMap = require('../../style-map-
|
|
7
|
+
const styleMap = require('../../style-map-272091aa.cjs');
|
|
8
8
|
require('../../directive-8278ab14.cjs');
|
|
9
9
|
|
|
10
10
|
const style = ":host {\n display: inline-flex\n}";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { x, T as TailwindStyledElement } from '../../index-
|
|
1
|
+
import { x, T as TailwindStyledElement } from '../../index-14baf4da.js';
|
|
2
2
|
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
|
-
import { o } from '../../style-map-
|
|
3
|
+
import { o } from '../../style-map-f7093d93.js';
|
|
4
4
|
import '../../directive-2bb7789e.js';
|
|
5
5
|
|
|
6
6
|
const style = ":host {\n display: inline-flex\n}";
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
7
|
const state = require('../../state-d9fb972b.cjs');
|
|
8
|
-
const styleMap = require('../../style-map-
|
|
8
|
+
const styleMap = require('../../style-map-272091aa.cjs');
|
|
9
9
|
const index = require('../../index-1d3f4a5a.cjs');
|
|
10
10
|
require('../../directive-8278ab14.cjs');
|
|
11
11
|
require('../../bundle-mjs-d58a83c6.cjs');
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { a as TailwindElement, x } from '../../index-
|
|
1
|
+
import { a as TailwindElement, x } from '../../index-14baf4da.js';
|
|
2
2
|
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
3
|
import { t } from '../../state-b9ca4e74.js';
|
|
4
|
-
import { o } from '../../style-map-
|
|
4
|
+
import { o } from '../../style-map-f7093d93.js';
|
|
5
5
|
import { c as ce } from '../../index-ca8e900d.js';
|
|
6
6
|
import '../../directive-2bb7789e.js';
|
|
7
7
|
import '../../bundle-mjs-fbc6e2a8.js';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
7
|
const state = require('../../state-d9fb972b.cjs');
|
|
8
8
|
const index = require('../../index-1d3f4a5a.cjs');
|
|
@@ -10,7 +10,7 @@ require('../../tailwind-config.cjs');
|
|
|
10
10
|
const cn = require('../../cn-5ceac001.cjs');
|
|
11
11
|
require('../lukso-icon/index.cjs');
|
|
12
12
|
require('../../bundle-mjs-d58a83c6.cjs');
|
|
13
|
-
require('../../style-map-
|
|
13
|
+
require('../../style-map-272091aa.cjs');
|
|
14
14
|
require('../../directive-8278ab14.cjs');
|
|
15
15
|
|
|
16
16
|
const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { T as TailwindStyledElement, x, A } from '../../index-
|
|
1
|
+
import { T as TailwindStyledElement, x, A } from '../../index-14baf4da.js';
|
|
2
2
|
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
3
|
import { t } from '../../state-b9ca4e74.js';
|
|
4
4
|
import { c as ce } from '../../index-ca8e900d.js';
|
|
@@ -6,7 +6,7 @@ import '../../tailwind-config.js';
|
|
|
6
6
|
import { c as cn } from '../../cn-b54dcc61.js';
|
|
7
7
|
import '../lukso-icon/index.js';
|
|
8
8
|
import '../../bundle-mjs-fbc6e2a8.js';
|
|
9
|
-
import '../../style-map-
|
|
9
|
+
import '../../style-map-f7093d93.js';
|
|
10
10
|
import '../../directive-2bb7789e.js';
|
|
11
11
|
|
|
12
12
|
const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
5
|
+
const shared_tailwindElement_index = require('../../index-8322d22b.cjs');
|
|
6
6
|
const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
|
|
7
|
-
const index = require('../../index-
|
|
8
|
-
require('../../
|
|
7
|
+
const index = require('../../index-1d3f4a5a.cjs');
|
|
8
|
+
require('../../bundle-mjs-d58a83c6.cjs');
|
|
9
9
|
|
|
10
10
|
var __defProp = Object.defineProperty;
|
|
11
11
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -23,10 +23,35 @@ exports.LuksoModal = class LuksoModal extends shared_tailwindElement_index.Tailw
|
|
|
23
23
|
super(...arguments);
|
|
24
24
|
this.isOpen = false;
|
|
25
25
|
this.size = "small";
|
|
26
|
-
this.
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
this.styles = index.ce({
|
|
27
|
+
slots: {
|
|
28
|
+
wrapper: "opacity-0 fixed z-[1000] transition-opacity top-0 left-0 p-6 animation-duration-200",
|
|
29
|
+
overlay: "bg-[rgba(196,202,206,0.6)] backdrop-blur-sm fixed top-0 left-0 w-[100vw] h-[100vh] z-[999] animate-fade-in animation-duration-200",
|
|
30
|
+
dialog: "bg-neutral-98 rounded-12 shadow-neutral-drop-shadow-3xl z-[1001]"
|
|
31
|
+
},
|
|
32
|
+
variants: {
|
|
33
|
+
isOpen: {
|
|
34
|
+
true: {
|
|
35
|
+
wrapper: "flex opacity-100 visible items-center justify-center w-[100vw] h-[100vh] animate-fade-in"
|
|
36
|
+
},
|
|
37
|
+
false: {
|
|
38
|
+
wrapper: "invisible"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
size: {
|
|
42
|
+
small: {
|
|
43
|
+
dialog: "w-[352px]"
|
|
44
|
+
},
|
|
45
|
+
medium: {
|
|
46
|
+
dialog: "w-[849px]"
|
|
47
|
+
},
|
|
48
|
+
full: {
|
|
49
|
+
dialog: "w-full"
|
|
50
|
+
},
|
|
51
|
+
auto: {}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
});
|
|
30
55
|
}
|
|
31
56
|
close() {
|
|
32
57
|
this.isOpen = false;
|
|
@@ -40,29 +65,14 @@ exports.LuksoModal = class LuksoModal extends shared_tailwindElement_index.Tailw
|
|
|
40
65
|
this.dispatchEvent(clickEvent);
|
|
41
66
|
}
|
|
42
67
|
render() {
|
|
68
|
+
const { wrapper, overlay, dialog } = this.styles({
|
|
69
|
+
isOpen: this.isOpen,
|
|
70
|
+
size: this.size
|
|
71
|
+
});
|
|
43
72
|
return shared_tailwindElement_index.x`
|
|
44
|
-
<div
|
|
45
|
-
|
|
46
|
-
class=${
|
|
47
|
-
[this.wrapperStyles]: true,
|
|
48
|
-
[this.openStyles]: this.isOpen,
|
|
49
|
-
["invisible"]: !this.isOpen
|
|
50
|
-
})}
|
|
51
|
-
>
|
|
52
|
-
<div
|
|
53
|
-
class=${index.customClassMap({
|
|
54
|
-
[this.overlayStyles]: true
|
|
55
|
-
})}
|
|
56
|
-
@click=${this.handleBackdropClick}
|
|
57
|
-
></div>
|
|
58
|
-
<div
|
|
59
|
-
class=${index.customClassMap({
|
|
60
|
-
[this.dialogStyles]: true,
|
|
61
|
-
["w-[352px]"]: this.size === "small",
|
|
62
|
-
["w-[849px]"]: this.size === "medium",
|
|
63
|
-
["w-full"]: this.size === "full"
|
|
64
|
-
})}
|
|
65
|
-
>
|
|
73
|
+
<div data-testid="modal" class=${wrapper()}>
|
|
74
|
+
<div class=${overlay()} @click=${this.handleBackdropClick}></div>
|
|
75
|
+
<div class=${dialog()}>
|
|
66
76
|
<slot></slot>
|
|
67
77
|
</div>
|
|
68
78
|
</div>
|
|
@@ -3,10 +3,7 @@ export type ModalSizes = 'small' | 'medium' | 'full' | 'auto';
|
|
|
3
3
|
export declare class LuksoModal extends TailwindElement {
|
|
4
4
|
isOpen: boolean;
|
|
5
5
|
size: ModalSizes;
|
|
6
|
-
private
|
|
7
|
-
private openStyles;
|
|
8
|
-
private overlayStyles;
|
|
9
|
-
private dialogStyles;
|
|
6
|
+
private styles;
|
|
10
7
|
private close;
|
|
11
8
|
private handleBackdropClick;
|
|
12
9
|
render(): import("lit-html").TemplateResult<1>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-modal/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-modal/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7D,qBACa,UAAW,SAAQ,eAAe;IAE7C,MAAM,UAAQ;IAGd,IAAI,EAAE,UAAU,CAAU;IAE1B,OAAO,CAAC,MAAM,CAgCZ;IAEF,OAAO,CAAC,KAAK;YAIC,mBAAmB;IASjC,MAAM;CAeP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { a as TailwindElement, x } from '../../index-
|
|
1
|
+
import { a as TailwindElement, x } from '../../index-14baf4da.js';
|
|
2
2
|
import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
|
|
3
|
-
import { c as
|
|
4
|
-
import '../../
|
|
3
|
+
import { c as ce } from '../../index-ca8e900d.js';
|
|
4
|
+
import '../../bundle-mjs-fbc6e2a8.js';
|
|
5
5
|
|
|
6
6
|
var __defProp = Object.defineProperty;
|
|
7
7
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -19,10 +19,35 @@ let LuksoModal = class extends TailwindElement {
|
|
|
19
19
|
super(...arguments);
|
|
20
20
|
this.isOpen = false;
|
|
21
21
|
this.size = "small";
|
|
22
|
-
this.
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
this.styles = ce({
|
|
23
|
+
slots: {
|
|
24
|
+
wrapper: "opacity-0 fixed z-[1000] transition-opacity top-0 left-0 p-6 animation-duration-200",
|
|
25
|
+
overlay: "bg-[rgba(196,202,206,0.6)] backdrop-blur-sm fixed top-0 left-0 w-[100vw] h-[100vh] z-[999] animate-fade-in animation-duration-200",
|
|
26
|
+
dialog: "bg-neutral-98 rounded-12 shadow-neutral-drop-shadow-3xl z-[1001]"
|
|
27
|
+
},
|
|
28
|
+
variants: {
|
|
29
|
+
isOpen: {
|
|
30
|
+
true: {
|
|
31
|
+
wrapper: "flex opacity-100 visible items-center justify-center w-[100vw] h-[100vh] animate-fade-in"
|
|
32
|
+
},
|
|
33
|
+
false: {
|
|
34
|
+
wrapper: "invisible"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
size: {
|
|
38
|
+
small: {
|
|
39
|
+
dialog: "w-[352px]"
|
|
40
|
+
},
|
|
41
|
+
medium: {
|
|
42
|
+
dialog: "w-[849px]"
|
|
43
|
+
},
|
|
44
|
+
full: {
|
|
45
|
+
dialog: "w-full"
|
|
46
|
+
},
|
|
47
|
+
auto: {}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
});
|
|
26
51
|
}
|
|
27
52
|
close() {
|
|
28
53
|
this.isOpen = false;
|
|
@@ -36,29 +61,14 @@ let LuksoModal = class extends TailwindElement {
|
|
|
36
61
|
this.dispatchEvent(clickEvent);
|
|
37
62
|
}
|
|
38
63
|
render() {
|
|
64
|
+
const { wrapper, overlay, dialog } = this.styles({
|
|
65
|
+
isOpen: this.isOpen,
|
|
66
|
+
size: this.size
|
|
67
|
+
});
|
|
39
68
|
return x`
|
|
40
|
-
<div
|
|
41
|
-
|
|
42
|
-
class=${
|
|
43
|
-
[this.wrapperStyles]: true,
|
|
44
|
-
[this.openStyles]: this.isOpen,
|
|
45
|
-
["invisible"]: !this.isOpen
|
|
46
|
-
})}
|
|
47
|
-
>
|
|
48
|
-
<div
|
|
49
|
-
class=${customClassMap({
|
|
50
|
-
[this.overlayStyles]: true
|
|
51
|
-
})}
|
|
52
|
-
@click=${this.handleBackdropClick}
|
|
53
|
-
></div>
|
|
54
|
-
<div
|
|
55
|
-
class=${customClassMap({
|
|
56
|
-
[this.dialogStyles]: true,
|
|
57
|
-
["w-[352px]"]: this.size === "small",
|
|
58
|
-
["w-[849px]"]: this.size === "medium",
|
|
59
|
-
["w-full"]: this.size === "full"
|
|
60
|
-
})}
|
|
61
|
-
>
|
|
69
|
+
<div data-testid="modal" class=${wrapper()}>
|
|
70
|
+
<div class=${overlay()} @click=${this.handleBackdropClick}></div>
|
|
71
|
+
<div class=${dialog()}>
|
|
62
72
|
<slot></slot>
|
|
63
73
|
</div>
|
|
64
74
|
</div>
|