@logosphere-ui/core 0.0.0-alpha.6 → 0.0.0-alpha.8
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/index.js +3207 -32
- package/package.json +16 -31
- package/dist/badge-BbhaO73N.cjs +0 -13
- package/dist/badge-DE7Tgd8Z.js +0 -71
- package/dist/badge.cjs +0 -1
- package/dist/badge.js +0 -4
- package/dist/breadcrumb-B-4yqoJZ.js +0 -41
- package/dist/breadcrumb-Cop-B1J7.cjs +0 -12
- package/dist/breadcrumb.cjs +0 -1
- package/dist/breadcrumb.js +0 -4
- package/dist/button-C1EwOosO.js +0 -58
- package/dist/button-CDRccsk9.cjs +0 -10
- package/dist/button.cjs +0 -1
- package/dist/button.js +0 -4
- package/dist/card-CUhlTJyJ.js +0 -97
- package/dist/card-n8ka8Zk-.cjs +0 -43
- package/dist/card.cjs +0 -1
- package/dist/card.js +0 -4
- package/dist/chatbot-Da_itUdJ.cjs +0 -160
- package/dist/chatbot-zkxngMRH.js +0 -481
- package/dist/chatbot.cjs +0 -1
- package/dist/chatbot.js +0 -4
- package/dist/checkbox-7Rb3WKGx.js +0 -119
- package/dist/checkbox-CdDTRdKV.cjs +0 -37
- package/dist/checkbox.cjs +0 -1
- package/dist/checkbox.js +0 -4
- package/dist/combobox-BJbI-Tgi.js +0 -268
- package/dist/combobox-pmE7bgEL.cjs +0 -99
- package/dist/combobox.cjs +0 -1
- package/dist/combobox.js +0 -4
- package/dist/datepicker-DFJx45C-.js +0 -750
- package/dist/datepicker-b9JGTTMx.cjs +0 -115
- package/dist/datepicker.cjs +0 -1
- package/dist/datepicker.js +0 -4
- package/dist/download-manager-A4fOxGWJ.js +0 -381
- package/dist/download-manager-BSIMTGaK.cjs +0 -97
- package/dist/download-manager.cjs +0 -1
- package/dist/download-manager.js +0 -4
- package/dist/formfield-D_7NFFoe.cjs +0 -27
- package/dist/formfield-d8fp9FTV.js +0 -118
- package/dist/formfield.cjs +0 -1
- package/dist/formfield.js +0 -4
- package/dist/index.cjs +0 -1
- package/dist/input-BcnI1w3_.cjs +0 -46
- package/dist/input-Bj_7u8Iv.js +0 -192
- package/dist/input.cjs +0 -1
- package/dist/input.js +0 -4
- package/dist/modal-Bfc6WQSL.js +0 -110
- package/dist/modal-DQ8VFL-P.cjs +0 -39
- package/dist/modal.cjs +0 -1
- package/dist/modal.js +0 -4
- package/dist/popover-B7tCqk3R.js +0 -140
- package/dist/popover-C2p5Pmts.cjs +0 -30
- package/dist/popover.cjs +0 -1
- package/dist/popover.js +0 -4
- package/dist/switch-Cpl53nRW.js +0 -64
- package/dist/switch-Rnnn10bn.cjs +0 -17
- package/dist/switch.cjs +0 -1
- package/dist/switch.js +0 -4
- package/dist/tab-BKdN4xAz.js +0 -176
- package/dist/tab-DcjAlXzU.cjs +0 -40
- package/dist/tab.cjs +0 -1
- package/dist/tab.js +0 -4
- package/dist/text-area-BkHdLnZj.cjs +0 -44
- package/dist/text-area-CC24lj8v.js +0 -204
- package/dist/textarea.cjs +0 -1
- package/dist/textarea.js +0 -4
package/dist/modal-Bfc6WQSL.js
DELETED
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import { LitElement as p, html as r, unsafeCSS as h, css as m } from "lit";
|
|
2
|
-
import { property as n, customElement as f } from "lit/decorators.js";
|
|
3
|
-
const u = ".modal__backdrop{position:fixed;inset:0;z-index:var(--z-index-modal-backdrop);display:flex;align-items:center;justify-content:center;background-color:#00000080;padding:var(--spacing-4);font-family:var(--font-family-base)}.modal__dialog{width:100%;max-width:720px;border-radius:var(--radius-lg);border:1px solid var(--color-border);overflow:hidden;box-shadow:var(--shadow-xl);background-color:var(--color-body-bg);display:grid;grid-template-rows:auto 1fr auto}.modal__header{padding:var(--spacing-4) var(--spacing-4) var(--spacing-2);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--spacing-2)}.modal__header-content{flex:1;min-width:0}.modal__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-body-text);margin:0}.modal__body{padding:var(--spacing-4)}.modal__footer{padding:var(--spacing-4);display:flex;flex-wrap:wrap;gap:var(--spacing-3);justify-content:flex-end;border-top:1px solid var(--color-border)}";
|
|
4
|
-
var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (e, s, i, l) => {
|
|
5
|
-
for (var a = l > 1 ? void 0 : l ? g(s, i) : s, d = e.length - 1, c; d >= 0; d--)
|
|
6
|
-
(c = e[d]) && (a = (l ? c(s, i, a) : c(a)) || a);
|
|
7
|
-
return l && a && v(s, i, a), a;
|
|
8
|
-
};
|
|
9
|
-
let o = class extends p {
|
|
10
|
-
constructor() {
|
|
11
|
-
super(...arguments), this.open = !1, this.title = "", this.closeOnEsc = !0, this.closeOnBackdrop = !0, this.showBack = !1, this.showClose = !1, this.hasFooterContent = !1, this.onKeyDown = (e) => {
|
|
12
|
-
this.open && this.closeOnEsc && e.key === "Escape" && this.setOpen(!1);
|
|
13
|
-
}, this.onBackdropClick = (e) => {
|
|
14
|
-
if (!this.closeOnBackdrop) return;
|
|
15
|
-
const s = this.shadowRoot?.querySelector(".__modal-content");
|
|
16
|
-
s && !s.contains(e.target) && this.setOpen(!1);
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
|
-
connectedCallback() {
|
|
20
|
-
super.connectedCallback(), document.addEventListener("keydown", this.onKeyDown);
|
|
21
|
-
}
|
|
22
|
-
disconnectedCallback() {
|
|
23
|
-
super.disconnectedCallback(), document.removeEventListener("keydown", this.onKeyDown);
|
|
24
|
-
}
|
|
25
|
-
openModal() {
|
|
26
|
-
this.setOpen(!0);
|
|
27
|
-
}
|
|
28
|
-
closeModal() {
|
|
29
|
-
this.setOpen(!1);
|
|
30
|
-
}
|
|
31
|
-
setOpen(e) {
|
|
32
|
-
this.open !== e && (this.open = e, this.dispatchEvent(new CustomEvent(e ? "modal-open" : "modal-close", { bubbles: !0 })));
|
|
33
|
-
}
|
|
34
|
-
checkFooterContent() {
|
|
35
|
-
const e = this.shadowRoot?.querySelector('slot[name="footer"]');
|
|
36
|
-
e && (this.hasFooterContent = e.assignedNodes().length > 0);
|
|
37
|
-
}
|
|
38
|
-
updated(e) {
|
|
39
|
-
super.updated(e), this.checkFooterContent();
|
|
40
|
-
}
|
|
41
|
-
render() {
|
|
42
|
-
return this.open ? r`
|
|
43
|
-
<div
|
|
44
|
-
class="modal__backdrop"
|
|
45
|
-
role="presentation"
|
|
46
|
-
aria-hidden="false"
|
|
47
|
-
@mousedown=${this.onBackdropClick}
|
|
48
|
-
>
|
|
49
|
-
<div
|
|
50
|
-
class="__modal-content modal__dialog"
|
|
51
|
-
role="dialog"
|
|
52
|
-
aria-modal="true"
|
|
53
|
-
>
|
|
54
|
-
${this.showBack || this.showClose ? r`
|
|
55
|
-
<div class="modal__header">
|
|
56
|
-
${this.showBack ? r`
|
|
57
|
-
<logosphere-button variant="text" size="sm" @click=${() => this.setOpen(!1)}>←</logosphere-button>
|
|
58
|
-
` : ""}
|
|
59
|
-
<div class="modal__header-content">
|
|
60
|
-
${this.title ? r`<h2 class="modal__title">${this.title}</h2>` : ""}
|
|
61
|
-
<slot name="header"></slot>
|
|
62
|
-
</div>
|
|
63
|
-
${this.showClose ? r`
|
|
64
|
-
<logosphere-button variant="text" size="sm" @click=${() => this.setOpen(!1)}>×</logosphere-button>
|
|
65
|
-
` : ""}
|
|
66
|
-
</div>
|
|
67
|
-
` : ""}
|
|
68
|
-
|
|
69
|
-
<div class="modal__body">
|
|
70
|
-
<slot></slot>
|
|
71
|
-
</div>
|
|
72
|
-
|
|
73
|
-
${this.hasFooterContent ? r`
|
|
74
|
-
<div class="modal__footer">
|
|
75
|
-
<slot name="footer"></slot>
|
|
76
|
-
</div>
|
|
77
|
-
` : ""}
|
|
78
|
-
</div>
|
|
79
|
-
</div>
|
|
80
|
-
` : r``;
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
o.styles = [m`${h(u)}`];
|
|
84
|
-
t([
|
|
85
|
-
n({ type: Boolean, reflect: !0 })
|
|
86
|
-
], o.prototype, "open", 2);
|
|
87
|
-
t([
|
|
88
|
-
n({ type: String })
|
|
89
|
-
], o.prototype, "title", 2);
|
|
90
|
-
t([
|
|
91
|
-
n({ type: Boolean })
|
|
92
|
-
], o.prototype, "closeOnEsc", 2);
|
|
93
|
-
t([
|
|
94
|
-
n({ type: Boolean })
|
|
95
|
-
], o.prototype, "closeOnBackdrop", 2);
|
|
96
|
-
t([
|
|
97
|
-
n({ type: Boolean })
|
|
98
|
-
], o.prototype, "showBack", 2);
|
|
99
|
-
t([
|
|
100
|
-
n({ type: Boolean })
|
|
101
|
-
], o.prototype, "showClose", 2);
|
|
102
|
-
t([
|
|
103
|
-
n({ type: Boolean, state: !0 })
|
|
104
|
-
], o.prototype, "hasFooterContent", 2);
|
|
105
|
-
o = t([
|
|
106
|
-
f("logosphere-modal")
|
|
107
|
-
], o);
|
|
108
|
-
export {
|
|
109
|
-
o as M
|
|
110
|
-
};
|
package/dist/modal-DQ8VFL-P.cjs
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
"use strict";const e=require("lit"),t=require("lit/decorators.js"),p=".modal__backdrop{position:fixed;inset:0;z-index:var(--z-index-modal-backdrop);display:flex;align-items:center;justify-content:center;background-color:#00000080;padding:var(--spacing-4);font-family:var(--font-family-base)}.modal__dialog{width:100%;max-width:720px;border-radius:var(--radius-lg);border:1px solid var(--color-border);overflow:hidden;box-shadow:var(--shadow-xl);background-color:var(--color-body-bg);display:grid;grid-template-rows:auto 1fr auto}.modal__header{padding:var(--spacing-4) var(--spacing-4) var(--spacing-2);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--spacing-2)}.modal__header-content{flex:1;min-width:0}.modal__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-body-text);margin:0}.modal__body{padding:var(--spacing-4)}.modal__footer{padding:var(--spacing-4);display:flex;flex-wrap:wrap;gap:var(--spacing-3);justify-content:flex-end;border-top:1px solid var(--color-border)}";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,s=(n,o,r,l)=>{for(var a=l>1?void 0:l?h(o,r):o,i=n.length-1,d;i>=0;i--)(d=n[i])&&(a=(l?d(o,r,a):d(a))||a);return l&&a&&c(o,r,a),a};exports.Modal=class extends e.LitElement{constructor(){super(...arguments),this.open=!1,this.title="",this.closeOnEsc=!0,this.closeOnBackdrop=!0,this.showBack=!1,this.showClose=!1,this.hasFooterContent=!1,this.onKeyDown=o=>{this.open&&this.closeOnEsc&&o.key==="Escape"&&this.setOpen(!1)},this.onBackdropClick=o=>{if(!this.closeOnBackdrop)return;const r=this.shadowRoot?.querySelector(".__modal-content");r&&!r.contains(o.target)&&this.setOpen(!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.onKeyDown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.onKeyDown)}openModal(){this.setOpen(!0)}closeModal(){this.setOpen(!1)}setOpen(o){this.open!==o&&(this.open=o,this.dispatchEvent(new CustomEvent(o?"modal-open":"modal-close",{bubbles:!0})))}checkFooterContent(){const o=this.shadowRoot?.querySelector('slot[name="footer"]');o&&(this.hasFooterContent=o.assignedNodes().length>0)}updated(o){super.updated(o),this.checkFooterContent()}render(){return this.open?e.html`
|
|
2
|
-
<div
|
|
3
|
-
class="modal__backdrop"
|
|
4
|
-
role="presentation"
|
|
5
|
-
aria-hidden="false"
|
|
6
|
-
@mousedown=${this.onBackdropClick}
|
|
7
|
-
>
|
|
8
|
-
<div
|
|
9
|
-
class="__modal-content modal__dialog"
|
|
10
|
-
role="dialog"
|
|
11
|
-
aria-modal="true"
|
|
12
|
-
>
|
|
13
|
-
${this.showBack||this.showClose?e.html`
|
|
14
|
-
<div class="modal__header">
|
|
15
|
-
${this.showBack?e.html`
|
|
16
|
-
<logosphere-button variant="text" size="sm" @click=${()=>this.setOpen(!1)}>←</logosphere-button>
|
|
17
|
-
`:""}
|
|
18
|
-
<div class="modal__header-content">
|
|
19
|
-
${this.title?e.html`<h2 class="modal__title">${this.title}</h2>`:""}
|
|
20
|
-
<slot name="header"></slot>
|
|
21
|
-
</div>
|
|
22
|
-
${this.showClose?e.html`
|
|
23
|
-
<logosphere-button variant="text" size="sm" @click=${()=>this.setOpen(!1)}>×</logosphere-button>
|
|
24
|
-
`:""}
|
|
25
|
-
</div>
|
|
26
|
-
`:""}
|
|
27
|
-
|
|
28
|
-
<div class="modal__body">
|
|
29
|
-
<slot></slot>
|
|
30
|
-
</div>
|
|
31
|
-
|
|
32
|
-
${this.hasFooterContent?e.html`
|
|
33
|
-
<div class="modal__footer">
|
|
34
|
-
<slot name="footer"></slot>
|
|
35
|
-
</div>
|
|
36
|
-
`:""}
|
|
37
|
-
</div>
|
|
38
|
-
</div>
|
|
39
|
-
`:e.html``}};exports.Modal.styles=[e.css`${e.unsafeCSS(p)}`];s([t.property({type:Boolean,reflect:!0})],exports.Modal.prototype,"open",2);s([t.property({type:String})],exports.Modal.prototype,"title",2);s([t.property({type:Boolean})],exports.Modal.prototype,"closeOnEsc",2);s([t.property({type:Boolean})],exports.Modal.prototype,"closeOnBackdrop",2);s([t.property({type:Boolean})],exports.Modal.prototype,"showBack",2);s([t.property({type:Boolean})],exports.Modal.prototype,"showClose",2);s([t.property({type:Boolean,state:!0})],exports.Modal.prototype,"hasFooterContent",2);exports.Modal=s([t.customElement("logosphere-modal")],exports.Modal);
|
package/dist/modal.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./modal-DQ8VFL-P.cjs");Object.defineProperty(exports,"Modal",{enumerable:!0,get:()=>e.Modal});
|
package/dist/modal.js
DELETED
package/dist/popover-B7tCqk3R.js
DELETED
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
import { LitElement as h, html as d, unsafeCSS as v, css as f } from "lit";
|
|
2
|
-
import { property as i, query as c, customElement as g } from "lit/decorators.js";
|
|
3
|
-
import { createPopper as m } from "@popperjs/core";
|
|
4
|
-
const u = '.popover__wrapper{position:relative;display:inline-block;font-family:var(--font-family-base)}.popover__trigger{display:inline-flex}.popover__panel{position:relative;overflow:visible;z-index:var(--z-index-popover);min-width:240px;border-radius:var(--radius-md);border:1px solid var(--color-border);background-color:var(--color-body-bg);box-shadow:var(--shadow-md)}.popover__content{position:relative;z-index:1;background-color:var(--color-body-bg);border-radius:var(--radius-md);overflow:hidden}.popover__content:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background-color:var(--color-body-bg);border-radius:var(--radius-md) var(--radius-md) 0 0;z-index:1;pointer-events:none}.popover__content>*{position:relative;z-index:2}.popover__title{padding:10px var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-body-text)}.popover__body{padding:var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-secondary)}.popover__body--with-border{border-top:1px solid var(--color-border)}.popper-arrow{position:absolute;width:12px;height:12px;pointer-events:none;z-index:0}.popper-arrow:before{content:"";position:absolute;inset:0;background:var(--color-border);transform:rotate(45deg)}.popper-arrow:after{content:"";position:absolute;inset:1px;background:var(--color-body-bg);transform:rotate(45deg)}[data-popper]{position:relative;overflow:visible}[data-popper-placement^=bottom]>.popper-arrow{top:-6px;left:50%;transform:translate(-50%,-50%)}[data-popper-placement^=top]>.popper-arrow{bottom:-6px;left:50%;transform:translate(-50%,50%)}[data-popper-placement^=left]>.popper-arrow{right:-6px;top:50%;transform:translate(50%,-50%)}[data-popper-placement^=right]>.popper-arrow{left:-6px;top:50%;transform:translate(-50%,-50%)}';
|
|
5
|
-
var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (e, r, s, n) => {
|
|
6
|
-
for (var p = n > 1 ? void 0 : n ? y(r, s) : r, a = e.length - 1, l; a >= 0; a--)
|
|
7
|
-
(l = e[a]) && (p = (n ? l(r, s, p) : l(p)) || p);
|
|
8
|
-
return n && p && b(r, s, p), p;
|
|
9
|
-
};
|
|
10
|
-
let t = class extends h {
|
|
11
|
-
constructor() {
|
|
12
|
-
super(...arguments), this.title = "", this.trigger = "click", this.placement = "bottom", this.offset = 8, this.open = !1, this.closeOnOutsideClick = !0, this.handleDocumentClick = (e) => {
|
|
13
|
-
!this.open || !this.closeOnOutsideClick || e.composedPath().includes(this) || this.setOpen(!1);
|
|
14
|
-
}, this.toggle = (e) => {
|
|
15
|
-
(this.trigger === "click" || this.trigger === "both") && (e?.stopPropagation(), this.setOpen(!this.open));
|
|
16
|
-
}, this.handleMouseEnter = () => {
|
|
17
|
-
(this.trigger === "hover" || this.trigger === "both") && this.setOpen(!0);
|
|
18
|
-
}, this.handleMouseLeave = () => {
|
|
19
|
-
(this.trigger === "hover" || this.trigger === "both") && this.setOpen(!1);
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
connectedCallback() {
|
|
23
|
-
super.connectedCallback(), document.addEventListener("click", this.handleDocumentClick, { capture: !0 });
|
|
24
|
-
}
|
|
25
|
-
disconnectedCallback() {
|
|
26
|
-
super.disconnectedCallback(), document.removeEventListener("click", this.handleDocumentClick, { capture: !0 }), this.destroyPopper();
|
|
27
|
-
}
|
|
28
|
-
updated(e) {
|
|
29
|
-
super.updated(e);
|
|
30
|
-
const r = e.has("placement"), s = e.has("open") && this.open;
|
|
31
|
-
if (e.has("open") && !this.open) {
|
|
32
|
-
this.destroyPopper();
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
35
|
-
(s || r) && this.open && this.updatePopper();
|
|
36
|
-
}
|
|
37
|
-
setOpen(e) {
|
|
38
|
-
this.open !== e && (this.open = e, this.dispatchEvent(new CustomEvent(e ? "popover-open" : "popover-close", {
|
|
39
|
-
bubbles: !0,
|
|
40
|
-
composed: !0
|
|
41
|
-
})));
|
|
42
|
-
}
|
|
43
|
-
updatePopper() {
|
|
44
|
-
if (!this.isConnected || !this.open) return;
|
|
45
|
-
const e = this.triggerElement, r = this.popperElement;
|
|
46
|
-
if (!(!e || !r)) {
|
|
47
|
-
if (this.popperInstance) {
|
|
48
|
-
this.popperInstance.setOptions({
|
|
49
|
-
placement: this.placement,
|
|
50
|
-
modifiers: this.getPopperModifiers(),
|
|
51
|
-
strategy: "fixed"
|
|
52
|
-
}), this.popperInstance.update();
|
|
53
|
-
return;
|
|
54
|
-
}
|
|
55
|
-
this.popperInstance = m(e, r, {
|
|
56
|
-
placement: this.placement,
|
|
57
|
-
strategy: "fixed",
|
|
58
|
-
modifiers: this.getPopperModifiers()
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
getPopperModifiers() {
|
|
63
|
-
return [
|
|
64
|
-
{ name: "offset", options: { offset: [0, this.offset] } },
|
|
65
|
-
{ name: "arrow", options: { element: this.popperArrowElement, padding: 8 } },
|
|
66
|
-
{ name: "preventOverflow", options: { padding: 8 } },
|
|
67
|
-
{ name: "flip", options: { padding: 8 } }
|
|
68
|
-
];
|
|
69
|
-
}
|
|
70
|
-
destroyPopper() {
|
|
71
|
-
this.popperInstance && (this.popperInstance.destroy(), this.popperInstance = void 0);
|
|
72
|
-
}
|
|
73
|
-
render() {
|
|
74
|
-
const e = !!this.title;
|
|
75
|
-
return d`
|
|
76
|
-
<div
|
|
77
|
-
class="popover__wrapper"
|
|
78
|
-
@mouseenter=${this.handleMouseEnter}
|
|
79
|
-
@mouseleave=${this.handleMouseLeave}
|
|
80
|
-
>
|
|
81
|
-
<div class="popover__trigger" part="trigger" @click=${this.toggle}>
|
|
82
|
-
<slot name="trigger"></slot>
|
|
83
|
-
</div>
|
|
84
|
-
|
|
85
|
-
${this.open ? d`
|
|
86
|
-
<div
|
|
87
|
-
data-popper
|
|
88
|
-
class="popover__panel"
|
|
89
|
-
role="dialog"
|
|
90
|
-
aria-hidden=${this.open ? "false" : "true"}
|
|
91
|
-
>
|
|
92
|
-
<div data-popper-arrow class="popper-arrow"></div>
|
|
93
|
-
<div class="popover__content">
|
|
94
|
-
${this.title ? d`
|
|
95
|
-
<div class="popover__title">${this.title}</div>
|
|
96
|
-
` : null}
|
|
97
|
-
<div class="popover__body ${e ? "popover__body--with-border" : ""}">
|
|
98
|
-
<slot></slot>
|
|
99
|
-
</div>
|
|
100
|
-
</div>
|
|
101
|
-
</div>
|
|
102
|
-
` : null}
|
|
103
|
-
</div>
|
|
104
|
-
`;
|
|
105
|
-
}
|
|
106
|
-
};
|
|
107
|
-
t.styles = [f`${v(u)}`];
|
|
108
|
-
o([
|
|
109
|
-
i({ type: String })
|
|
110
|
-
], t.prototype, "title", 2);
|
|
111
|
-
o([
|
|
112
|
-
i({ type: String })
|
|
113
|
-
], t.prototype, "trigger", 2);
|
|
114
|
-
o([
|
|
115
|
-
i({ type: String })
|
|
116
|
-
], t.prototype, "placement", 2);
|
|
117
|
-
o([
|
|
118
|
-
i({ type: Number })
|
|
119
|
-
], t.prototype, "offset", 2);
|
|
120
|
-
o([
|
|
121
|
-
i({ type: Boolean, reflect: !0 })
|
|
122
|
-
], t.prototype, "open", 2);
|
|
123
|
-
o([
|
|
124
|
-
i({ type: Boolean })
|
|
125
|
-
], t.prototype, "closeOnOutsideClick", 2);
|
|
126
|
-
o([
|
|
127
|
-
c('[part="trigger"]')
|
|
128
|
-
], t.prototype, "triggerElement", 2);
|
|
129
|
-
o([
|
|
130
|
-
c("[data-popper]")
|
|
131
|
-
], t.prototype, "popperElement", 2);
|
|
132
|
-
o([
|
|
133
|
-
c("[data-popper-arrow]")
|
|
134
|
-
], t.prototype, "popperArrowElement", 2);
|
|
135
|
-
t = o([
|
|
136
|
-
g("logosphere-popover")
|
|
137
|
-
], t);
|
|
138
|
-
export {
|
|
139
|
-
t as P
|
|
140
|
-
};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
"use strict";const s=require("lit"),o=require("lit/decorators.js"),d=require("@popperjs/core"),c='.popover__wrapper{position:relative;display:inline-block;font-family:var(--font-family-base)}.popover__trigger{display:inline-flex}.popover__panel{position:relative;overflow:visible;z-index:var(--z-index-popover);min-width:240px;border-radius:var(--radius-md);border:1px solid var(--color-border);background-color:var(--color-body-bg);box-shadow:var(--shadow-md)}.popover__content{position:relative;z-index:1;background-color:var(--color-body-bg);border-radius:var(--radius-md);overflow:hidden}.popover__content:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background-color:var(--color-body-bg);border-radius:var(--radius-md) var(--radius-md) 0 0;z-index:1;pointer-events:none}.popover__content>*{position:relative;z-index:2}.popover__title{padding:10px var(--spacing-3);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-body-text)}.popover__body{padding:var(--spacing-3);font-size:var(--font-size-sm);color:var(--color-secondary)}.popover__body--with-border{border-top:1px solid var(--color-border)}.popper-arrow{position:absolute;width:12px;height:12px;pointer-events:none;z-index:0}.popper-arrow:before{content:"";position:absolute;inset:0;background:var(--color-border);transform:rotate(45deg)}.popper-arrow:after{content:"";position:absolute;inset:1px;background:var(--color-body-bg);transform:rotate(45deg)}[data-popper]{position:relative;overflow:visible}[data-popper-placement^=bottom]>.popper-arrow{top:-6px;left:50%;transform:translate(-50%,-50%)}[data-popper-placement^=top]>.popper-arrow{bottom:-6px;left:50%;transform:translate(-50%,50%)}[data-popper-placement^=left]>.popper-arrow{right:-6px;top:50%;transform:translate(50%,-50%)}[data-popper-placement^=right]>.popper-arrow{left:-6px;top:50%;transform:translate(-50%,-50%)}';var v=Object.defineProperty,h=Object.getOwnPropertyDescriptor,t=(n,e,r,i)=>{for(var p=i>1?void 0:i?h(e,r):e,a=n.length-1,l;a>=0;a--)(l=n[a])&&(p=(i?l(e,r,p):l(p))||p);return i&&p&&v(e,r,p),p};exports.Popover=class extends s.LitElement{constructor(){super(...arguments),this.title="",this.trigger="click",this.placement="bottom",this.offset=8,this.open=!1,this.closeOnOutsideClick=!0,this.handleDocumentClick=e=>{!this.open||!this.closeOnOutsideClick||e.composedPath().includes(this)||this.setOpen(!1)},this.toggle=e=>{(this.trigger==="click"||this.trigger==="both")&&(e?.stopPropagation(),this.setOpen(!this.open))},this.handleMouseEnter=()=>{(this.trigger==="hover"||this.trigger==="both")&&this.setOpen(!0)},this.handleMouseLeave=()=>{(this.trigger==="hover"||this.trigger==="both")&&this.setOpen(!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleDocumentClick,{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleDocumentClick,{capture:!0}),this.destroyPopper()}updated(e){super.updated(e);const r=e.has("placement"),i=e.has("open")&&this.open;if(e.has("open")&&!this.open){this.destroyPopper();return}(i||r)&&this.open&&this.updatePopper()}setOpen(e){this.open!==e&&(this.open=e,this.dispatchEvent(new CustomEvent(e?"popover-open":"popover-close",{bubbles:!0,composed:!0})))}updatePopper(){if(!this.isConnected||!this.open)return;const e=this.triggerElement,r=this.popperElement;if(!(!e||!r)){if(this.popperInstance){this.popperInstance.setOptions({placement:this.placement,modifiers:this.getPopperModifiers(),strategy:"fixed"}),this.popperInstance.update();return}this.popperInstance=d.createPopper(e,r,{placement:this.placement,strategy:"fixed",modifiers:this.getPopperModifiers()})}}getPopperModifiers(){return[{name:"offset",options:{offset:[0,this.offset]}},{name:"arrow",options:{element:this.popperArrowElement,padding:8}},{name:"preventOverflow",options:{padding:8}},{name:"flip",options:{padding:8}}]}destroyPopper(){this.popperInstance&&(this.popperInstance.destroy(),this.popperInstance=void 0)}render(){const e=!!this.title;return s.html`
|
|
2
|
-
<div
|
|
3
|
-
class="popover__wrapper"
|
|
4
|
-
@mouseenter=${this.handleMouseEnter}
|
|
5
|
-
@mouseleave=${this.handleMouseLeave}
|
|
6
|
-
>
|
|
7
|
-
<div class="popover__trigger" part="trigger" @click=${this.toggle}>
|
|
8
|
-
<slot name="trigger"></slot>
|
|
9
|
-
</div>
|
|
10
|
-
|
|
11
|
-
${this.open?s.html`
|
|
12
|
-
<div
|
|
13
|
-
data-popper
|
|
14
|
-
class="popover__panel"
|
|
15
|
-
role="dialog"
|
|
16
|
-
aria-hidden=${this.open?"false":"true"}
|
|
17
|
-
>
|
|
18
|
-
<div data-popper-arrow class="popper-arrow"></div>
|
|
19
|
-
<div class="popover__content">
|
|
20
|
-
${this.title?s.html`
|
|
21
|
-
<div class="popover__title">${this.title}</div>
|
|
22
|
-
`:null}
|
|
23
|
-
<div class="popover__body ${e?"popover__body--with-border":""}">
|
|
24
|
-
<slot></slot>
|
|
25
|
-
</div>
|
|
26
|
-
</div>
|
|
27
|
-
</div>
|
|
28
|
-
`:null}
|
|
29
|
-
</div>
|
|
30
|
-
`}};exports.Popover.styles=[s.css`${s.unsafeCSS(c)}`];t([o.property({type:String})],exports.Popover.prototype,"title",2);t([o.property({type:String})],exports.Popover.prototype,"trigger",2);t([o.property({type:String})],exports.Popover.prototype,"placement",2);t([o.property({type:Number})],exports.Popover.prototype,"offset",2);t([o.property({type:Boolean,reflect:!0})],exports.Popover.prototype,"open",2);t([o.property({type:Boolean})],exports.Popover.prototype,"closeOnOutsideClick",2);t([o.query('[part="trigger"]')],exports.Popover.prototype,"triggerElement",2);t([o.query("[data-popper]")],exports.Popover.prototype,"popperElement",2);t([o.query("[data-popper-arrow]")],exports.Popover.prototype,"popperArrowElement",2);exports.Popover=t([o.customElement("logosphere-popover")],exports.Popover);
|
package/dist/popover.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./popover-C2p5Pmts.cjs");Object.defineProperty(exports,"Popover",{enumerable:!0,get:()=>e.Popover});
|
package/dist/popover.js
DELETED
package/dist/switch-Cpl53nRW.js
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { LitElement as l, html as d, unsafeCSS as p, css as _ } from "lit";
|
|
2
|
-
import { property as n, query as w, customElement as b } from "lit/decorators.js";
|
|
3
|
-
const u = ":host{display:block}.switch{display:inline-block;position:relative}.switch--md{width:36px;height:20px}.switch--sm{width:32px;height:18px}.switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.switch__track{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--radius-full);cursor:pointer;transition:background-color var(--transition-speed-base) var(--transition-timing);background-color:var(--color-gray-300)}.switch__track--on{background-color:var(--color-primary)}.switch__track--disabled{cursor:not-allowed}.switch__track--disabled-on{background-color:color-mix(in srgb,var(--color-primary) 30%,transparent)}.switch__track--disabled-off{background-color:var(--color-gray-200)}.switch__thumb{position:absolute;background-color:#fff;border-radius:var(--radius-full);box-shadow:var(--shadow-xs);top:2px;left:2px;transform:translate(0);transition:transform var(--transition-speed-base) var(--transition-timing)}.switch--md .switch__thumb{width:16px;height:16px}.switch--sm .switch__thumb{width:14px;height:14px}.switch__thumb--on.switch--md .switch__thumb,.switch__track--on~.switch__thumb{transform:translate(16px)}.switch__track--on+.switch__thumb{transform:translate(16px)}";
|
|
4
|
-
var m = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, t, r, c) => {
|
|
5
|
-
for (var s = c > 1 ? void 0 : c ? k(t, r) : t, o = e.length - 1, h; o >= 0; o--)
|
|
6
|
-
(h = e[o]) && (s = (c ? h(t, r, s) : h(s)) || s);
|
|
7
|
-
return c && s && m(t, r, s), s;
|
|
8
|
-
};
|
|
9
|
-
let i = class extends l {
|
|
10
|
-
constructor() {
|
|
11
|
-
super(...arguments), this.checked = !1, this.disabled = !1, this.size = "md";
|
|
12
|
-
}
|
|
13
|
-
onChange(e) {
|
|
14
|
-
const t = e.target;
|
|
15
|
-
this.checked = t.checked, this.dispatchEvent(new CustomEvent("change", {
|
|
16
|
-
detail: { checked: this.checked }
|
|
17
|
-
}));
|
|
18
|
-
}
|
|
19
|
-
render() {
|
|
20
|
-
const e = `switch switch--${this.size}`, t = [
|
|
21
|
-
"switch__track",
|
|
22
|
-
this.checked && !this.disabled ? "switch__track--on" : "",
|
|
23
|
-
this.disabled ? "switch__track--disabled" : "",
|
|
24
|
-
this.disabled && this.checked ? "switch__track--disabled-on" : "",
|
|
25
|
-
this.disabled && !this.checked ? "switch__track--disabled-off" : ""
|
|
26
|
-
].filter(Boolean).join(" "), r = this.checked ? "translateX(16px)" : "translateX(0)";
|
|
27
|
-
return d`
|
|
28
|
-
<label class="${e}">
|
|
29
|
-
<input
|
|
30
|
-
class="switch__input"
|
|
31
|
-
type="checkbox"
|
|
32
|
-
?checked=${this.checked}
|
|
33
|
-
?disabled=${this.disabled}
|
|
34
|
-
@change=${this.onChange}
|
|
35
|
-
/>
|
|
36
|
-
<div class="${t}">
|
|
37
|
-
<span
|
|
38
|
-
class="switch__thumb"
|
|
39
|
-
style="transform: ${r}"
|
|
40
|
-
></span>
|
|
41
|
-
</div>
|
|
42
|
-
</label>
|
|
43
|
-
`;
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
i.styles = [_`${p(u)}`];
|
|
47
|
-
a([
|
|
48
|
-
n({ type: Boolean })
|
|
49
|
-
], i.prototype, "checked", 2);
|
|
50
|
-
a([
|
|
51
|
-
n({ type: Boolean })
|
|
52
|
-
], i.prototype, "disabled", 2);
|
|
53
|
-
a([
|
|
54
|
-
n({ type: String })
|
|
55
|
-
], i.prototype, "size", 2);
|
|
56
|
-
a([
|
|
57
|
-
w("input")
|
|
58
|
-
], i.prototype, "inputElement", 2);
|
|
59
|
-
i = a([
|
|
60
|
-
b("logosphere-switch")
|
|
61
|
-
], i);
|
|
62
|
-
export {
|
|
63
|
-
i as S
|
|
64
|
-
};
|
package/dist/switch-Rnnn10bn.cjs
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";const a=require("lit"),r=require("lit/decorators.js"),d=":host{display:block}.switch{display:inline-block;position:relative}.switch--md{width:36px;height:20px}.switch--sm{width:32px;height:18px}.switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.switch__track{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--radius-full);cursor:pointer;transition:background-color var(--transition-speed-base) var(--transition-timing);background-color:var(--color-gray-300)}.switch__track--on{background-color:var(--color-primary)}.switch__track--disabled{cursor:not-allowed}.switch__track--disabled-on{background-color:color-mix(in srgb,var(--color-primary) 30%,transparent)}.switch__track--disabled-off{background-color:var(--color-gray-200)}.switch__thumb{position:absolute;background-color:#fff;border-radius:var(--radius-full);box-shadow:var(--shadow-xs);top:2px;left:2px;transform:translate(0);transition:transform var(--transition-speed-base) var(--transition-timing)}.switch--md .switch__thumb{width:16px;height:16px}.switch--sm .switch__thumb{width:14px;height:14px}.switch__thumb--on.switch--md .switch__thumb,.switch__track--on~.switch__thumb{transform:translate(16px)}.switch__track--on+.switch__thumb{transform:translate(16px)}";var l=Object.defineProperty,p=Object.getOwnPropertyDescriptor,c=(o,t,s,e)=>{for(var i=e>1?void 0:e?p(t,s):t,h=o.length-1,n;h>=0;h--)(n=o[h])&&(i=(e?n(t,s,i):n(i))||i);return e&&i&&l(t,s,i),i};exports.Switch=class extends a.LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.size="md"}onChange(t){const s=t.target;this.checked=s.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked}}))}render(){const t=`switch switch--${this.size}`,s=["switch__track",this.checked&&!this.disabled?"switch__track--on":"",this.disabled?"switch__track--disabled":"",this.disabled&&this.checked?"switch__track--disabled-on":"",this.disabled&&!this.checked?"switch__track--disabled-off":""].filter(Boolean).join(" "),e=this.checked?"translateX(16px)":"translateX(0)";return a.html`
|
|
2
|
-
<label class="${t}">
|
|
3
|
-
<input
|
|
4
|
-
class="switch__input"
|
|
5
|
-
type="checkbox"
|
|
6
|
-
?checked=${this.checked}
|
|
7
|
-
?disabled=${this.disabled}
|
|
8
|
-
@change=${this.onChange}
|
|
9
|
-
/>
|
|
10
|
-
<div class="${s}">
|
|
11
|
-
<span
|
|
12
|
-
class="switch__thumb"
|
|
13
|
-
style="transform: ${e}"
|
|
14
|
-
></span>
|
|
15
|
-
</div>
|
|
16
|
-
</label>
|
|
17
|
-
`}};exports.Switch.styles=[a.css`${a.unsafeCSS(d)}`];c([r.property({type:Boolean})],exports.Switch.prototype,"checked",2);c([r.property({type:Boolean})],exports.Switch.prototype,"disabled",2);c([r.property({type:String})],exports.Switch.prototype,"size",2);c([r.query("input")],exports.Switch.prototype,"inputElement",2);exports.Switch=c([r.customElement("logosphere-switch")],exports.Switch);
|
package/dist/switch.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./switch-Rnnn10bn.cjs");Object.defineProperty(exports,"Switch",{enumerable:!0,get:()=>e.Switch});
|
package/dist/switch.js
DELETED
package/dist/tab-BKdN4xAz.js
DELETED
|
@@ -1,176 +0,0 @@
|
|
|
1
|
-
import { LitElement as p, nothing as c, html as r, unsafeCSS as f, css as v } from "lit";
|
|
2
|
-
import { property as b, state as h, query as _, customElement as u } from "lit/decorators.js";
|
|
3
|
-
const y = ".tab{width:100%;font-family:var(--font-family-base)}.tab__list{display:flex;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--color-border);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.tab__list::-webkit-scrollbar{display:none}.tab__button{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);min-width:120px;position:relative;cursor:pointer;border:none;border-bottom:2px solid transparent;background:transparent;font-family:var(--font-family-base);white-space:nowrap;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing)}.tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:var(--color-tertiary-bg)}.tab__button--active{border-bottom-color:var(--color-primary)}.tab__button--disabled{cursor:not-allowed;opacity:.4;pointer-events:none}.tab__icon{font-size:var(--font-size-xl);flex-shrink:0;color:inherit;line-height:1}.tab__content{display:flex;flex-direction:column;align-items:flex-start}.tab__label{font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);color:var(--color-body-text)}.tab__label--inactive{color:var(--color-tertiary)}.tab__description{font-size:var(--font-size-xs);text-align:left;color:var(--color-tertiary)}.tab__description--active{color:var(--color-secondary)}.tab__panel{padding:var(--spacing-4);outline:none}.tab__panel--hidden{display:none}";
|
|
4
|
-
var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, i, t, a) => {
|
|
5
|
-
for (var s = a > 1 ? void 0 : a ? w(i, t) : i, l = e.length - 1, d; l >= 0; l--)
|
|
6
|
-
(d = e[l]) && (s = (a ? d(i, t, s) : d(s)) || s);
|
|
7
|
-
return a && s && g(i, t, s), s;
|
|
8
|
-
};
|
|
9
|
-
let o = class extends p {
|
|
10
|
-
constructor() {
|
|
11
|
-
super(...arguments), this.tabs = [], this.activeTab = "", this.lazy = !0, this.variant = "default", this._focusedIndex = 0, this._renderedTabs = /* @__PURE__ */ new Set();
|
|
12
|
-
}
|
|
13
|
-
connectedCallback() {
|
|
14
|
-
super.connectedCallback(), !this.activeTab && this.tabs.length > 0 && (this.activeTab = this.tabs[0].id);
|
|
15
|
-
}
|
|
16
|
-
willUpdate(e) {
|
|
17
|
-
if (super.willUpdate(e), e.has("activeTab") && this.activeTab) {
|
|
18
|
-
this._renderedTabs.add(this.activeTab);
|
|
19
|
-
const i = this.tabs.findIndex((t) => t.id === this.activeTab);
|
|
20
|
-
i !== -1 && (this._focusedIndex = i);
|
|
21
|
-
}
|
|
22
|
-
e.has("tabs") && this.tabs.length > 0 && (this.tabs.some((t) => t.id === this.activeTab) || (this.activeTab = this.tabs[0].id), this._focusedIndex = this.tabs.findIndex((t) => t.id === this.activeTab));
|
|
23
|
-
}
|
|
24
|
-
// ==================== EVENTS ====================
|
|
25
|
-
handleTabClick(e, i) {
|
|
26
|
-
if (i) return;
|
|
27
|
-
const t = this.activeTab;
|
|
28
|
-
this.activeTab = e, this._focusedIndex = this.tabs.findIndex((a) => a.id === e), this.dispatchEvent(
|
|
29
|
-
new CustomEvent("tab-change", {
|
|
30
|
-
detail: { oldTab: t, newTab: e },
|
|
31
|
-
bubbles: !0,
|
|
32
|
-
composed: !0
|
|
33
|
-
})
|
|
34
|
-
);
|
|
35
|
-
}
|
|
36
|
-
handleKeyDown(e) {
|
|
37
|
-
const { tabs: i } = this;
|
|
38
|
-
if (i.filter((s) => !s.disabled).length === 0) return;
|
|
39
|
-
let t = this._focusedIndex;
|
|
40
|
-
const a = this._focusedIndex;
|
|
41
|
-
switch (e.key) {
|
|
42
|
-
case "ArrowLeft":
|
|
43
|
-
e.preventDefault();
|
|
44
|
-
do
|
|
45
|
-
t = t > 0 ? t - 1 : i.length - 1;
|
|
46
|
-
while (i[t]?.disabled && t !== a);
|
|
47
|
-
break;
|
|
48
|
-
case "ArrowRight":
|
|
49
|
-
e.preventDefault();
|
|
50
|
-
do
|
|
51
|
-
t = t < i.length - 1 ? t + 1 : 0;
|
|
52
|
-
while (i[t]?.disabled && t !== a);
|
|
53
|
-
break;
|
|
54
|
-
case "Home":
|
|
55
|
-
for (e.preventDefault(), t = 0; i[t]?.disabled && t < i.length - 1; ) t++;
|
|
56
|
-
break;
|
|
57
|
-
case "End":
|
|
58
|
-
for (e.preventDefault(), t = i.length - 1; i[t]?.disabled && t > 0; ) t--;
|
|
59
|
-
break;
|
|
60
|
-
default:
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
if (t !== this._focusedIndex && !i[t]?.disabled) {
|
|
64
|
-
const s = this.activeTab;
|
|
65
|
-
this._focusedIndex = t, this.activeTab = i[t].id, this.updateComplete.then(() => {
|
|
66
|
-
this.shadowRoot?.querySelector(
|
|
67
|
-
`[role="tab"][data-tab-id="${i[t].id}"]`
|
|
68
|
-
)?.focus();
|
|
69
|
-
}), this.dispatchEvent(
|
|
70
|
-
new CustomEvent("tab-change", {
|
|
71
|
-
detail: { oldTab: s, newTab: i[t].id },
|
|
72
|
-
bubbles: !0,
|
|
73
|
-
composed: !0
|
|
74
|
-
})
|
|
75
|
-
);
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
scrollTabIntoView(e) {
|
|
79
|
-
this.updateComplete.then(() => {
|
|
80
|
-
const i = this.shadowRoot?.querySelector(
|
|
81
|
-
`[role="tab"][data-tab-id="${e}"]`
|
|
82
|
-
);
|
|
83
|
-
if (i && this.tablist) {
|
|
84
|
-
const t = this.tablist.getBoundingClientRect(), a = i.getBoundingClientRect();
|
|
85
|
-
a.left < t.left ? this.tablist.scrollLeft -= t.left - a.left + 16 : a.right > t.right && (this.tablist.scrollLeft += a.right - t.right + 16);
|
|
86
|
-
}
|
|
87
|
-
});
|
|
88
|
-
}
|
|
89
|
-
// ==================== RENDER ====================
|
|
90
|
-
renderTabButton(e, i) {
|
|
91
|
-
const t = this.activeTab === e.id, a = this._focusedIndex === i, s = [
|
|
92
|
-
"tab__button",
|
|
93
|
-
t ? "tab__button--active" : "",
|
|
94
|
-
e.disabled ? "tab__button--disabled" : ""
|
|
95
|
-
].filter(Boolean).join(" "), l = ["tab__label", t ? "" : "tab__label--inactive"].filter(Boolean).join(" "), d = ["tab__description", t ? "tab__description--active" : ""].filter(Boolean).join(" ");
|
|
96
|
-
return r`
|
|
97
|
-
<button
|
|
98
|
-
role="tab"
|
|
99
|
-
class=${s}
|
|
100
|
-
data-tab-id=${e.id}
|
|
101
|
-
aria-selected=${t ? "true" : "false"}
|
|
102
|
-
aria-controls="panel-${e.id}"
|
|
103
|
-
tabindex=${t || a ? "0" : "-1"}
|
|
104
|
-
?disabled=${e.disabled}
|
|
105
|
-
@click=${() => this.handleTabClick(e.id, e.disabled)}
|
|
106
|
-
@focus=${() => this.scrollTabIntoView(e.id)}
|
|
107
|
-
>
|
|
108
|
-
${e.icon ? r`<i class="${e.icon} tab__icon"></i>` : c}
|
|
109
|
-
<div class="tab__content">
|
|
110
|
-
<span class=${l}>${e.label}</span>
|
|
111
|
-
${e.description ? r`<span class=${d}>${e.description}</span>` : c}
|
|
112
|
-
</div>
|
|
113
|
-
</button>
|
|
114
|
-
`;
|
|
115
|
-
}
|
|
116
|
-
renderTabPanel(e) {
|
|
117
|
-
const i = this.activeTab === e.id;
|
|
118
|
-
if (!(!this.lazy || this._renderedTabs.has(e.id))) return c;
|
|
119
|
-
const a = ["tab__panel", i ? "" : "tab__panel--hidden"].filter(Boolean).join(" ");
|
|
120
|
-
return r`
|
|
121
|
-
<div
|
|
122
|
-
role="tabpanel"
|
|
123
|
-
id="panel-${e.id}"
|
|
124
|
-
aria-labelledby="tab-${e.id}"
|
|
125
|
-
class=${a}
|
|
126
|
-
tabindex="0"
|
|
127
|
-
>
|
|
128
|
-
<slot name=${`panel-${e.id}`}>
|
|
129
|
-
${typeof e.content == "string" ? r`${e.content}` : c}
|
|
130
|
-
</slot>
|
|
131
|
-
</div>
|
|
132
|
-
`;
|
|
133
|
-
}
|
|
134
|
-
render() {
|
|
135
|
-
return r`
|
|
136
|
-
<div class="tab">
|
|
137
|
-
<div role="tablist" aria-label="Tabs" class="tab__list" @keydown=${this.handleKeyDown}>
|
|
138
|
-
${this.tabs.map((e, i) => this.renderTabButton(e, i))}
|
|
139
|
-
</div>
|
|
140
|
-
<div class="tab__panels">${this.tabs.map((e) => this.renderTabPanel(e))}</div>
|
|
141
|
-
</div>
|
|
142
|
-
`;
|
|
143
|
-
}
|
|
144
|
-
};
|
|
145
|
-
o.styles = [
|
|
146
|
-
v`
|
|
147
|
-
${f(y)}
|
|
148
|
-
`
|
|
149
|
-
];
|
|
150
|
-
n([
|
|
151
|
-
b({ type: Array })
|
|
152
|
-
], o.prototype, "tabs", 2);
|
|
153
|
-
n([
|
|
154
|
-
b({ type: String })
|
|
155
|
-
], o.prototype, "activeTab", 2);
|
|
156
|
-
n([
|
|
157
|
-
b({ type: Boolean })
|
|
158
|
-
], o.prototype, "lazy", 2);
|
|
159
|
-
n([
|
|
160
|
-
b({ type: String })
|
|
161
|
-
], o.prototype, "variant", 2);
|
|
162
|
-
n([
|
|
163
|
-
h()
|
|
164
|
-
], o.prototype, "_focusedIndex", 2);
|
|
165
|
-
n([
|
|
166
|
-
h()
|
|
167
|
-
], o.prototype, "_renderedTabs", 2);
|
|
168
|
-
n([
|
|
169
|
-
_('[role="tablist"]')
|
|
170
|
-
], o.prototype, "tablist", 2);
|
|
171
|
-
o = n([
|
|
172
|
-
u("logosphere-tab")
|
|
173
|
-
], o);
|
|
174
|
-
export {
|
|
175
|
-
o as L
|
|
176
|
-
};
|