@logosphere-ui/core 0.0.0-alpha.35 → 0.0.0-alpha.38
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/AGENTS.md +7 -2
- package/dist/AGENTS.md +7 -2
- package/dist/atoms/Checkbox/checkbox.d.ts +2 -1
- package/dist/{chatbot-p4CmxSdZ.js → chatbot-Cr6iOO7s.js} +1 -1
- package/dist/{chatbot-8etAVHNx.cjs → chatbot-Dl6P98Jq.cjs} +1 -1
- package/dist/chatbot.cjs +1 -1
- package/dist/chatbot.js +1 -1
- package/dist/checkbox-CX0LgsWP.js +148 -0
- package/dist/checkbox-DpbKHANK.cjs +53 -0
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/{combobox-CTqEZUg6.js → combobox-CFF30L-n.js} +67 -61
- package/dist/{combobox-BV4AKTqp.cjs → combobox-s7NFPAd3.cjs} +3 -2
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.js +1 -1
- package/dist/index.cjs +11 -7
- package/dist/index.d.ts +1 -0
- package/dist/index.js +179 -117
- package/dist/index.umd.js +80 -58
- package/dist/molecules/InputGroup/index.d.ts +1 -0
- package/dist/molecules/InputGroup/input-group.d.ts +40 -0
- package/dist/organisms/Tab/tab.d.ts +13 -1
- package/dist/{pagination-BLNrwUSO.js → pagination-DG56TV5n.js} +1 -1
- package/dist/{pagination-AclB9qi1.cjs → pagination-HyX0EAZr.cjs} +1 -1
- package/dist/pagination.cjs +1 -1
- package/dist/pagination.js +1 -1
- package/dist/tab-CDMcFHvP.cjs +41 -0
- package/dist/tab-CuBCFGoO.js +204 -0
- package/dist/tab.cjs +1 -1
- package/dist/tab.js +1 -1
- package/package.json +6 -1
- package/dist/checkbox-CdDTRdKV.cjs +0 -37
- package/dist/checkbox-g6kl2jGR.js +0 -119
- package/dist/tab-BmrITzOL.cjs +0 -40
- package/dist/tab-Ca_OyNqQ.js +0 -176
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { InputGroup } from "./input-group.js";
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* InputGroup — a layout wrapper that connects FormField-based components
|
|
4
|
+
* (Input, Combobox, Textarea) into a single visual unit by:
|
|
5
|
+
*
|
|
6
|
+
* • Adjusting each child's border-radius via --formfield-border-radius
|
|
7
|
+
* (cascades into the child's Shadow DOM through CSS custom property
|
|
8
|
+
* inheritance).
|
|
9
|
+
*
|
|
10
|
+
* • Suppressing the shared border between adjacent children via
|
|
11
|
+
* --formfield-border-right-width / --formfield-border-left-width
|
|
12
|
+
* so there is no double-border.
|
|
13
|
+
*
|
|
14
|
+
* Buttons and icon addons are handled via the prefix/suffix slots of
|
|
15
|
+
* the individual Input/Combobox components — no need to place them here.
|
|
16
|
+
*
|
|
17
|
+
* Usage:
|
|
18
|
+
* <logosphere-input-group>
|
|
19
|
+
* <logosphere-combobox ...></logosphere-combobox>
|
|
20
|
+
* <logosphere-input ...></logosphere-input>
|
|
21
|
+
* </logosphere-input-group>
|
|
22
|
+
*/
|
|
23
|
+
export declare class InputGroup extends LitElement {
|
|
24
|
+
static styles: import("lit").CSSResult[];
|
|
25
|
+
/** Stretch all children to the same height (default: true) */
|
|
26
|
+
stretch: boolean;
|
|
27
|
+
firstUpdated(): void;
|
|
28
|
+
disconnectedCallback(): void;
|
|
29
|
+
private _onSlotChange;
|
|
30
|
+
private _getChildren;
|
|
31
|
+
private _onFocusIn;
|
|
32
|
+
private _onFocusOut;
|
|
33
|
+
private _applyGroupStyles;
|
|
34
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
35
|
+
}
|
|
36
|
+
declare global {
|
|
37
|
+
interface HTMLElementTagNameMap {
|
|
38
|
+
"logosphere-input-group": InputGroup;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -13,14 +13,26 @@ export declare class LogosphereTab extends LitElement {
|
|
|
13
13
|
tabs: TabItem[];
|
|
14
14
|
activeTab: string;
|
|
15
15
|
lazy: boolean;
|
|
16
|
-
variant: "default" | "card";
|
|
16
|
+
variant: "default" | "card" | "segmented";
|
|
17
17
|
private _focusedIndex;
|
|
18
18
|
private _renderedTabs;
|
|
19
19
|
private tablist?;
|
|
20
|
+
private _pillInitialized;
|
|
21
|
+
private _pillResizeObserver?;
|
|
20
22
|
connectedCallback(): void;
|
|
23
|
+
disconnectedCallback(): void;
|
|
21
24
|
protected willUpdate(changedProperties: PropertyValues): void;
|
|
22
25
|
private handleTabClick;
|
|
23
26
|
private handleKeyDown;
|
|
27
|
+
protected updated(changedProperties: PropertyValues): void;
|
|
28
|
+
/**
|
|
29
|
+
* Observe the tablist so the pill is repositioned whenever the list gains or
|
|
30
|
+
* changes size — this covers the cases where the first render happens while
|
|
31
|
+
* the tab is hidden (nested/lazy panels) or before web fonts load, when
|
|
32
|
+
* layout measurements would otherwise be 0 / stale.
|
|
33
|
+
*/
|
|
34
|
+
private _ensurePillObserver;
|
|
35
|
+
private _updateSegmentPill;
|
|
24
36
|
private scrollTabIntoView;
|
|
25
37
|
private renderTabButton;
|
|
26
38
|
private renderTabPanel;
|
|
@@ -2,7 +2,7 @@ import { LitElement as h, unsafeCSS as b, css as v, html as i, nothing as p } fr
|
|
|
2
2
|
import { property as o, state as f, query as _ } from "lit/decorators.js";
|
|
3
3
|
import { live as y } from "lit/directives/live.js";
|
|
4
4
|
import "./ui-icon-Ctn4nGFa.js";
|
|
5
|
-
import "./combobox-
|
|
5
|
+
import "./combobox-CFF30L-n.js";
|
|
6
6
|
const x = ":host{display:block;width:100%}.pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4) var(--spacing-6);background-color:var(--color-body-bg);border-top:1px solid var(--color-border);font-family:var(--font-family-base);gap:var(--spacing-4)}.pagination--justify-end{justify-content:flex-end}.pagination--justify-start{justify-content:flex-start}.pagination--justify-center{justify-content:center}.pagination__nav{display:flex;align-items:center;gap:var(--spacing-1)}.pagination__nav-group{display:flex;align-items:center}.pagination__btn{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2);border:none;background:transparent;border-radius:var(--radius-base);cursor:pointer;color:var(--color-secondary);transition:background-color .15s ease,color .15s ease,opacity .15s ease}.pagination__btn:hover:not(:disabled){background-color:var(--color-body-bg-hover)}.pagination__btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.pagination__btn:disabled{opacity:.4;cursor:not-allowed}.pagination__btn--icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:var(--spacing-2);border:1px solid var(--color-border);background-color:var(--color-body-bg);border-radius:var(--radius-base);cursor:pointer;color:var(--color-secondary);transition:background-color .15s ease,border-color .15s ease,opacity .15s ease}.pagination__btn--icon:hover:not(:disabled){background-color:var(--color-body-bg-hover);border-color:var(--color-border-hover)}.pagination__btn--icon:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.pagination__btn--icon:disabled{opacity:.4;cursor:not-allowed}.pagination__btn--text{display:flex;align-items:center;justify-content:center;gap:var(--spacing-1);height:32px;min-width:100px;padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);background-color:var(--color-body-bg);border-radius:var(--radius-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-secondary);cursor:pointer;transition:all .15s ease}.pagination__btn--text:hover:not(:disabled){background-color:var(--color-body-bg-hover);border-color:var(--color-border-hover)}.pagination__btn--text:disabled{color:var(--color-secondary-disabled);cursor:not-allowed}.pagination__btn--number{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);background-color:var(--color-body-bg);border-radius:var(--radius-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-secondary);cursor:pointer;transition:all .15s ease}.pagination__btn--number:hover:not(:disabled):not(.pagination__btn--active){background-color:var(--color-body-bg-hover)}.pagination__btn--active{background-color:var(--color-secondary);border-color:var(--color-secondary);color:#fff;font-weight:var(--font-weight-semibold)}.pagination__btn--ellipsis{border:none;background:transparent;cursor:default;min-width:32px}.pagination__btn--ellipsis:hover{background:transparent}.pagination__input-container{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px}.pagination__input{width:100%;height:100%;min-width:32px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-base);background-color:var(--color-body-bg);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-body-text);text-align:center;outline:none;transition:border-color .15s ease}.pagination__input:focus{border-color:var(--color-primary)}.pagination__input::-webkit-outer-spin-button,.pagination__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pagination__input[type=number]{-moz-appearance:textfield}.pagination__separator{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-tertiary);line-height:18px;letter-spacing:-.12px;margin-right:var(--spacing-1)}.pagination__info{display:flex;align-items:center;gap:var(--spacing-2)}.pagination__page-info{display:flex;align-items:center;gap:var(--spacing-1);font-size:var(--font-size-xs);line-height:18px;letter-spacing:-.12px}.pagination__page-info-text{color:var(--color-secondary)}.pagination__page-info-separator{color:var(--color-tertiary)}.pagination__total{display:flex;align-items:center;gap:var(--spacing-1);font-size:var(--font-size-xs);line-height:18px;letter-spacing:-.12px}.pagination__total-separator{color:var(--color-tertiary)}.pagination__total-text{color:var(--color-secondary)}.pagination__page-size{display:flex;align-items:center}@media(max-width:768px){.pagination{flex-wrap:wrap;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4)}.pagination__btn--text{min-width:80px;font-size:var(--font-size-xs)}}@media(max-width:480px){.pagination__nav,.pagination__info{flex-wrap:wrap;justify-content:center}}";
|
|
7
7
|
var m = Object.defineProperty, n = (u, t, e, r) => {
|
|
8
8
|
for (var s = void 0, l = u.length - 1, g; l >= 0; l--)
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const a=require("lit"),n=require("lit/decorators.js"),h=require("lit/directives/live.js");require("./ui-icon-jKyMV1zp.cjs");require("./combobox-
|
|
1
|
+
"use strict";const a=require("lit"),n=require("lit/decorators.js"),h=require("lit/directives/live.js");require("./ui-icon-jKyMV1zp.cjs");require("./combobox-s7NFPAd3.cjs");const u=":host{display:block;width:100%}.pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4) var(--spacing-6);background-color:var(--color-body-bg);border-top:1px solid var(--color-border);font-family:var(--font-family-base);gap:var(--spacing-4)}.pagination--justify-end{justify-content:flex-end}.pagination--justify-start{justify-content:flex-start}.pagination--justify-center{justify-content:center}.pagination__nav{display:flex;align-items:center;gap:var(--spacing-1)}.pagination__nav-group{display:flex;align-items:center}.pagination__btn{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2);border:none;background:transparent;border-radius:var(--radius-base);cursor:pointer;color:var(--color-secondary);transition:background-color .15s ease,color .15s ease,opacity .15s ease}.pagination__btn:hover:not(:disabled){background-color:var(--color-body-bg-hover)}.pagination__btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.pagination__btn:disabled{opacity:.4;cursor:not-allowed}.pagination__btn--icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:var(--spacing-2);border:1px solid var(--color-border);background-color:var(--color-body-bg);border-radius:var(--radius-base);cursor:pointer;color:var(--color-secondary);transition:background-color .15s ease,border-color .15s ease,opacity .15s ease}.pagination__btn--icon:hover:not(:disabled){background-color:var(--color-body-bg-hover);border-color:var(--color-border-hover)}.pagination__btn--icon:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.pagination__btn--icon:disabled{opacity:.4;cursor:not-allowed}.pagination__btn--text{display:flex;align-items:center;justify-content:center;gap:var(--spacing-1);height:32px;min-width:100px;padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);background-color:var(--color-body-bg);border-radius:var(--radius-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-secondary);cursor:pointer;transition:all .15s ease}.pagination__btn--text:hover:not(:disabled){background-color:var(--color-body-bg-hover);border-color:var(--color-border-hover)}.pagination__btn--text:disabled{color:var(--color-secondary-disabled);cursor:not-allowed}.pagination__btn--number{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);background-color:var(--color-body-bg);border-radius:var(--radius-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-secondary);cursor:pointer;transition:all .15s ease}.pagination__btn--number:hover:not(:disabled):not(.pagination__btn--active){background-color:var(--color-body-bg-hover)}.pagination__btn--active{background-color:var(--color-secondary);border-color:var(--color-secondary);color:#fff;font-weight:var(--font-weight-semibold)}.pagination__btn--ellipsis{border:none;background:transparent;cursor:default;min-width:32px}.pagination__btn--ellipsis:hover{background:transparent}.pagination__input-container{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px}.pagination__input{width:100%;height:100%;min-width:32px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-base);background-color:var(--color-body-bg);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-body-text);text-align:center;outline:none;transition:border-color .15s ease}.pagination__input:focus{border-color:var(--color-primary)}.pagination__input::-webkit-outer-spin-button,.pagination__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pagination__input[type=number]{-moz-appearance:textfield}.pagination__separator{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-tertiary);line-height:18px;letter-spacing:-.12px;margin-right:var(--spacing-1)}.pagination__info{display:flex;align-items:center;gap:var(--spacing-2)}.pagination__page-info{display:flex;align-items:center;gap:var(--spacing-1);font-size:var(--font-size-xs);line-height:18px;letter-spacing:-.12px}.pagination__page-info-text{color:var(--color-secondary)}.pagination__page-info-separator{color:var(--color-tertiary)}.pagination__total{display:flex;align-items:center;gap:var(--spacing-1);font-size:var(--font-size-xs);line-height:18px;letter-spacing:-.12px}.pagination__total-separator{color:var(--color-tertiary)}.pagination__total-text{color:var(--color-secondary)}.pagination__page-size{display:flex;align-items:center}@media(max-width:768px){.pagination{flex-wrap:wrap;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4)}.pagination__btn--text{min-width:80px;font-size:var(--font-size-xs)}}@media(max-width:480px){.pagination__nav,.pagination__info{flex-wrap:wrap;justify-content:center}}";var b=Object.defineProperty,o=(d,t,e,r)=>{for(var s=void 0,l=d.length-1,p;l>=0;l--)(p=d[l])&&(s=p(t,e,s)||s);return s&&b(t,e,s),s};const c=class c extends a.LitElement{constructor(){super(...arguments),this.variant="default",this.page=1,this.pageSize=25,this.total=0,this.pageSizeOptions=[10,25,50,100],this.showPageSize=!0,this.showTotal=!0,this.disabled=!1,this.prevLabel="Önceki",this.nextLabel="Sonraki",this.pageLabel="Sayfa",this.perPageLabel="/ sayfa",this.totalLabel="kayıt",this.inputValue="1",this.goFirst=()=>{this.canGoPrev&&this.goToPage(1)},this.goPrev=()=>{this.canGoPrev&&this.goToPage(this.page-1)},this.goNext=()=>{this.canGoNext&&this.goToPage(this.page+1)},this.goLast=()=>{this.canGoNext&&this.goToPage(this.totalPages)},this.handleInputChange=t=>{const e=t.target;this.inputValue=e.value},this.handleInputBlur=()=>{const t=parseInt(this.inputValue,10);isNaN(t)?this.inputValue=String(this.page):this.goToPage(t)},this.handleInputKeydown=t=>{t.key==="Enter"&&t.target.blur()},this.handlePageSizeChange=t=>{const e=t.detail?.value?.[0];if(e){const r=e.value;r!==this.pageSize&&(this.pageSize=r,this.page=1,this.emitPageChange())}}}get totalPages(){return Math.max(1,Math.ceil(this.total/this.pageSize))}get canGoPrev(){return this.page>1&&!this.disabled}get canGoNext(){return this.page<this.totalPages&&!this.disabled}firstUpdated(){this.updateComboboxSelection()}updated(t){super.updated(t),t.has("page")&&(this.inputValue=String(this.page)),t.has("pageSize")&&this.updateComboboxSelection()}updateComboboxSelection(){this._combobox&&this.showPageSize&&this._combobox.setSelected(this.selectedPageSizeItem)}emitPageChange(){this.dispatchEvent(new CustomEvent("page-change",{bubbles:!0,composed:!0,detail:{page:this.page,pageSize:this.pageSize,totalPages:this.totalPages}}))}goToPage(t){const e=Math.max(1,Math.min(t,this.totalPages));e!==this.page&&(this.page=e,this.emitPageChange())}get pageSizeItems(){return this.pageSizeOptions.map(t=>({label:`${t} ${this.perPageLabel}`,value:t}))}get selectedPageSizeItem(){return[{label:`${this.pageSize} ${this.perPageLabel}`,value:this.pageSize}]}getPageNumbers(){const t=[],e=this.totalPages,r=this.page,s=1;if(e<=7)for(let l=1;l<=e;l++)t.push(l);else{t.push(1),r>3&&t.push("ellipsis");const l=Math.max(2,r-s),p=Math.min(e-1,r+s);for(let g=l;g<=p;g++)t.includes(g)||t.push(g);r<e-2&&t.push("ellipsis"),t.includes(e)||t.push(e)}return t}renderNavButtons(t=!1){const e=t?"pagination__btn--icon":"pagination__btn";return a.html`
|
|
2
2
|
<div class="pagination__nav-group">
|
|
3
3
|
<button
|
|
4
4
|
type="button"
|
package/dist/pagination.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./pagination-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./pagination-HyX0EAZr.cjs");exports.Pagination=i.Pagination;
|
package/dist/pagination.js
CHANGED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";const s=require("lit"),r=require("lit/decorators.js"),h=".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-light)}.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}.tab--segmented .tab__list{display:inline-flex;position:relative;border-bottom:none;background-color:var(--color-light);border-radius:var(--radius-base);padding:0;gap:0;overflow:visible}.tab__segment-pill{position:absolute;top:0;bottom:0;left:0;width:0;background-color:var(--color-white, #ffffff);border:1px solid var(--color-border);border-radius:var(--radius-base);pointer-events:none;z-index:0;transition:transform .22s cubic-bezier(.35,0,.25,1),width .22s cubic-bezier(.35,0,.25,1)}.tab--segmented .tab__button{position:relative;z-index:1;min-width:unset;height:32px;padding:var(--spacing-1) var(--spacing-3);border:1px solid transparent;border-bottom:1px solid transparent;border-radius:var(--radius-base);background:transparent;transition:color var(--transition-speed-base) var(--transition-timing)}.tab--segmented .tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:transparent}.tab--segmented .tab__button--active{background-color:transparent;border-color:transparent}.tab--segmented .tab__label{color:var(--color-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:20px;letter-spacing:-.14px}.tab--segmented .tab__label--inactive{color:var(--color-secondary)}.tab--segmented .tab__button--active .tab__label,.tab--segmented .tab__button--active .tab__label--inactive{color:var(--color-primary)}.tab--segmented .tab__icon{color:inherit;font-size:var(--font-size-base)}.tab--segmented .tab__panels{margin-top:var(--spacing-3)}.tab--segmented .tab__panel{padding:0}";var p=Object.defineProperty,_=Object.getOwnPropertyDescriptor,l=(b,t,i,e)=>{for(var a=e>1?void 0:e?_(t,i):t,o=b.length-1,n;o>=0;o--)(n=b[o])&&(a=(e?n(t,i,a):n(a))||a);return e&&a&&p(t,i,a),a};exports.LogosphereTab=class extends s.LitElement{constructor(){super(...arguments),this.tabs=[],this.activeTab="",this.lazy=!0,this.variant="default",this._focusedIndex=0,this._renderedTabs=new Set,this._pillInitialized=!1}connectedCallback(){super.connectedCallback(),!this.activeTab&&this.tabs.length>0&&(this.activeTab=this.tabs[0].id)}disconnectedCallback(){super.disconnectedCallback(),this._pillResizeObserver?.disconnect(),this._pillResizeObserver=void 0}willUpdate(t){if(super.willUpdate(t),t.has("activeTab")&&this.activeTab){this._renderedTabs.add(this.activeTab);const i=this.tabs.findIndex(e=>e.id===this.activeTab);i!==-1&&(this._focusedIndex=i)}t.has("tabs")&&this.tabs.length>0&&(this.tabs.some(e=>e.id===this.activeTab)||(this.activeTab=this.tabs[0].id),this._focusedIndex=this.tabs.findIndex(e=>e.id===this.activeTab))}handleTabClick(t,i){if(i)return;const e=this.activeTab;this.activeTab=t,this._focusedIndex=this.tabs.findIndex(a=>a.id===t),this.dispatchEvent(new CustomEvent("tab-change",{detail:{oldTab:e,newTab:t},bubbles:!0,composed:!0}))}handleKeyDown(t){const{tabs:i}=this;if(i.filter(o=>!o.disabled).length===0)return;let e=this._focusedIndex;const a=this._focusedIndex;switch(t.key){case"ArrowLeft":t.preventDefault();do e=e>0?e-1:i.length-1;while(i[e]?.disabled&&e!==a);break;case"ArrowRight":t.preventDefault();do e=e<i.length-1?e+1:0;while(i[e]?.disabled&&e!==a);break;case"Home":for(t.preventDefault(),e=0;i[e]?.disabled&&e<i.length-1;)e++;break;case"End":for(t.preventDefault(),e=i.length-1;i[e]?.disabled&&e>0;)e--;break;default:return}if(e!==this._focusedIndex&&!i[e]?.disabled){const o=this.activeTab;this._focusedIndex=e,this.activeTab=i[e].id,this.updateComplete.then(()=>{this.shadowRoot?.querySelector(`[role="tab"][data-tab-id="${i[e].id}"]`)?.focus()}),this.dispatchEvent(new CustomEvent("tab-change",{detail:{oldTab:o,newTab:i[e].id},bubbles:!0,composed:!0}))}}updated(t){super.updated(t),this.variant==="segmented"&&(this._ensurePillObserver(),this._updateSegmentPill())}_ensurePillObserver(){if(this._pillResizeObserver)return;const t=this.shadowRoot?.querySelector(".tab__list");!t||typeof ResizeObserver>"u"||(this._pillResizeObserver=new ResizeObserver(()=>this._updateSegmentPill()),this._pillResizeObserver.observe(t))}_updateSegmentPill(){const t=this.shadowRoot?.querySelector(".tab__segment-pill"),i=this.shadowRoot?.querySelector(".tab__button--active"),e=this.shadowRoot?.querySelector(".tab__list");if(!t||!i||!e)return;const a=e.getBoundingClientRect(),o=i.getBoundingClientRect();if(o.width===0)return;const n=parseFloat(getComputedStyle(e).paddingLeft)||0,d=o.left-a.left-e.clientLeft-n+e.scrollLeft,c=o.width;this._pillInitialized?(t.style.transform=`translateX(${d}px)`,t.style.width=`${c}px`):(t.style.transition="none",t.style.transform=`translateX(${d}px)`,t.style.width=`${c}px`,requestAnimationFrame(()=>{t.style.transition=""}),this._pillInitialized=!0)}scrollTabIntoView(t){this.updateComplete.then(()=>{const i=this.shadowRoot?.querySelector(`[role="tab"][data-tab-id="${t}"]`);if(i&&this.tablist){const e=this.tablist.getBoundingClientRect(),a=i.getBoundingClientRect();a.left<e.left?this.tablist.scrollLeft-=e.left-a.left+16:a.right>e.right&&(this.tablist.scrollLeft+=a.right-e.right+16)}})}renderTabButton(t,i){const e=this.activeTab===t.id,a=this._focusedIndex===i,o=["tab__button",e?"tab__button--active":"",t.disabled?"tab__button--disabled":""].filter(Boolean).join(" "),n=["tab__label",e?"":"tab__label--inactive"].filter(Boolean).join(" "),d=["tab__description",e?"tab__description--active":""].filter(Boolean).join(" ");return s.html`
|
|
2
|
+
<button
|
|
3
|
+
role="tab"
|
|
4
|
+
class=${o}
|
|
5
|
+
data-tab-id=${t.id}
|
|
6
|
+
aria-selected=${e?"true":"false"}
|
|
7
|
+
aria-controls="panel-${t.id}"
|
|
8
|
+
tabindex=${e||a?"0":"-1"}
|
|
9
|
+
?disabled=${t.disabled}
|
|
10
|
+
@click=${()=>this.handleTabClick(t.id,t.disabled)}
|
|
11
|
+
@focus=${()=>this.scrollTabIntoView(t.id)}
|
|
12
|
+
>
|
|
13
|
+
${t.icon?s.html`<i class="${t.icon} tab__icon"></i>`:s.nothing}
|
|
14
|
+
<div class="tab__content">
|
|
15
|
+
<span class=${n}>${t.label}</span>
|
|
16
|
+
${t.description?s.html`<span class=${d}>${t.description}</span>`:s.nothing}
|
|
17
|
+
</div>
|
|
18
|
+
</button>
|
|
19
|
+
`}renderTabPanel(t){const i=this.activeTab===t.id;if(!(!this.lazy||this._renderedTabs.has(t.id)))return s.nothing;const a=["tab__panel",i?"":"tab__panel--hidden"].filter(Boolean).join(" ");return s.html`
|
|
20
|
+
<div
|
|
21
|
+
role="tabpanel"
|
|
22
|
+
id="panel-${t.id}"
|
|
23
|
+
aria-labelledby="tab-${t.id}"
|
|
24
|
+
class=${a}
|
|
25
|
+
tabindex="0"
|
|
26
|
+
>
|
|
27
|
+
<slot name=${`panel-${t.id}`}>
|
|
28
|
+
${typeof t.content=="string"?s.html`${t.content}`:s.nothing}
|
|
29
|
+
</slot>
|
|
30
|
+
</div>
|
|
31
|
+
`}render(){return s.html`
|
|
32
|
+
<div class="tab tab--${this.variant}">
|
|
33
|
+
<div role="tablist" aria-label="Tabs" class="tab__list" @keydown=${this.handleKeyDown}>
|
|
34
|
+
${this.variant==="segmented"?s.html`<span class="tab__segment-pill" aria-hidden="true"></span>`:s.nothing}
|
|
35
|
+
${this.tabs.map((t,i)=>this.renderTabButton(t,i))}
|
|
36
|
+
</div>
|
|
37
|
+
<div class="tab__panels">${this.tabs.map(t=>this.renderTabPanel(t))}</div>
|
|
38
|
+
</div>
|
|
39
|
+
`}};exports.LogosphereTab.styles=[s.css`
|
|
40
|
+
${s.unsafeCSS(h)}
|
|
41
|
+
`];l([r.property({type:Array})],exports.LogosphereTab.prototype,"tabs",2);l([r.property({type:String})],exports.LogosphereTab.prototype,"activeTab",2);l([r.property({type:Boolean})],exports.LogosphereTab.prototype,"lazy",2);l([r.property({type:String})],exports.LogosphereTab.prototype,"variant",2);l([r.state()],exports.LogosphereTab.prototype,"_focusedIndex",2);l([r.state()],exports.LogosphereTab.prototype,"_renderedTabs",2);l([r.query('[role="tablist"]')],exports.LogosphereTab.prototype,"tablist",2);exports.LogosphereTab=l([r.customElement("logosphere-tab")],exports.LogosphereTab);
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
import { unsafeCSS as _, css as u, LitElement as v, nothing as b, html as d } from "lit";
|
|
2
|
+
import { property as c, state as h, query as f, customElement as g } from "lit/decorators.js";
|
|
3
|
+
const m = ".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-light)}.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}.tab--segmented .tab__list{display:inline-flex;position:relative;border-bottom:none;background-color:var(--color-light);border-radius:var(--radius-base);padding:0;gap:0;overflow:visible}.tab__segment-pill{position:absolute;top:0;bottom:0;left:0;width:0;background-color:var(--color-white, #ffffff);border:1px solid var(--color-border);border-radius:var(--radius-base);pointer-events:none;z-index:0;transition:transform .22s cubic-bezier(.35,0,.25,1),width .22s cubic-bezier(.35,0,.25,1)}.tab--segmented .tab__button{position:relative;z-index:1;min-width:unset;height:32px;padding:var(--spacing-1) var(--spacing-3);border:1px solid transparent;border-bottom:1px solid transparent;border-radius:var(--radius-base);background:transparent;transition:color var(--transition-speed-base) var(--transition-timing)}.tab--segmented .tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:transparent}.tab--segmented .tab__button--active{background-color:transparent;border-color:transparent}.tab--segmented .tab__label{color:var(--color-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:20px;letter-spacing:-.14px}.tab--segmented .tab__label--inactive{color:var(--color-secondary)}.tab--segmented .tab__button--active .tab__label,.tab--segmented .tab__button--active .tab__label--inactive{color:var(--color-primary)}.tab--segmented .tab__icon{color:inherit;font-size:var(--font-size-base)}.tab--segmented .tab__panels{margin-top:var(--spacing-3)}.tab--segmented .tab__panel{padding:0}";
|
|
4
|
+
var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (t, i, e, a) => {
|
|
5
|
+
for (var s = a > 1 ? void 0 : a ? w(i, e) : i, o = t.length - 1, r; o >= 0; o--)
|
|
6
|
+
(r = t[o]) && (s = (a ? r(i, e, s) : r(s)) || s);
|
|
7
|
+
return a && s && y(i, e, s), s;
|
|
8
|
+
};
|
|
9
|
+
let n = class extends v {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments), this.tabs = [], this.activeTab = "", this.lazy = !0, this.variant = "default", this._focusedIndex = 0, this._renderedTabs = /* @__PURE__ */ new Set(), this._pillInitialized = !1;
|
|
12
|
+
}
|
|
13
|
+
connectedCallback() {
|
|
14
|
+
super.connectedCallback(), !this.activeTab && this.tabs.length > 0 && (this.activeTab = this.tabs[0].id);
|
|
15
|
+
}
|
|
16
|
+
disconnectedCallback() {
|
|
17
|
+
super.disconnectedCallback(), this._pillResizeObserver?.disconnect(), this._pillResizeObserver = void 0;
|
|
18
|
+
}
|
|
19
|
+
willUpdate(t) {
|
|
20
|
+
if (super.willUpdate(t), t.has("activeTab") && this.activeTab) {
|
|
21
|
+
this._renderedTabs.add(this.activeTab);
|
|
22
|
+
const i = this.tabs.findIndex((e) => e.id === this.activeTab);
|
|
23
|
+
i !== -1 && (this._focusedIndex = i);
|
|
24
|
+
}
|
|
25
|
+
t.has("tabs") && this.tabs.length > 0 && (this.tabs.some((e) => e.id === this.activeTab) || (this.activeTab = this.tabs[0].id), this._focusedIndex = this.tabs.findIndex((e) => e.id === this.activeTab));
|
|
26
|
+
}
|
|
27
|
+
// ==================== EVENTS ====================
|
|
28
|
+
handleTabClick(t, i) {
|
|
29
|
+
if (i) return;
|
|
30
|
+
const e = this.activeTab;
|
|
31
|
+
this.activeTab = t, this._focusedIndex = this.tabs.findIndex((a) => a.id === t), this.dispatchEvent(
|
|
32
|
+
new CustomEvent("tab-change", {
|
|
33
|
+
detail: { oldTab: e, newTab: t },
|
|
34
|
+
bubbles: !0,
|
|
35
|
+
composed: !0
|
|
36
|
+
})
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
handleKeyDown(t) {
|
|
40
|
+
const { tabs: i } = this;
|
|
41
|
+
if (i.filter((s) => !s.disabled).length === 0) return;
|
|
42
|
+
let e = this._focusedIndex;
|
|
43
|
+
const a = this._focusedIndex;
|
|
44
|
+
switch (t.key) {
|
|
45
|
+
case "ArrowLeft":
|
|
46
|
+
t.preventDefault();
|
|
47
|
+
do
|
|
48
|
+
e = e > 0 ? e - 1 : i.length - 1;
|
|
49
|
+
while (i[e]?.disabled && e !== a);
|
|
50
|
+
break;
|
|
51
|
+
case "ArrowRight":
|
|
52
|
+
t.preventDefault();
|
|
53
|
+
do
|
|
54
|
+
e = e < i.length - 1 ? e + 1 : 0;
|
|
55
|
+
while (i[e]?.disabled && e !== a);
|
|
56
|
+
break;
|
|
57
|
+
case "Home":
|
|
58
|
+
for (t.preventDefault(), e = 0; i[e]?.disabled && e < i.length - 1; ) e++;
|
|
59
|
+
break;
|
|
60
|
+
case "End":
|
|
61
|
+
for (t.preventDefault(), e = i.length - 1; i[e]?.disabled && e > 0; ) e--;
|
|
62
|
+
break;
|
|
63
|
+
default:
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
if (e !== this._focusedIndex && !i[e]?.disabled) {
|
|
67
|
+
const s = this.activeTab;
|
|
68
|
+
this._focusedIndex = e, this.activeTab = i[e].id, this.updateComplete.then(() => {
|
|
69
|
+
this.shadowRoot?.querySelector(
|
|
70
|
+
`[role="tab"][data-tab-id="${i[e].id}"]`
|
|
71
|
+
)?.focus();
|
|
72
|
+
}), this.dispatchEvent(
|
|
73
|
+
new CustomEvent("tab-change", {
|
|
74
|
+
detail: { oldTab: s, newTab: i[e].id },
|
|
75
|
+
bubbles: !0,
|
|
76
|
+
composed: !0
|
|
77
|
+
})
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
updated(t) {
|
|
82
|
+
super.updated(t), this.variant === "segmented" && (this._ensurePillObserver(), this._updateSegmentPill());
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* Observe the tablist so the pill is repositioned whenever the list gains or
|
|
86
|
+
* changes size — this covers the cases where the first render happens while
|
|
87
|
+
* the tab is hidden (nested/lazy panels) or before web fonts load, when
|
|
88
|
+
* layout measurements would otherwise be 0 / stale.
|
|
89
|
+
*/
|
|
90
|
+
_ensurePillObserver() {
|
|
91
|
+
if (this._pillResizeObserver) return;
|
|
92
|
+
const t = this.shadowRoot?.querySelector(".tab__list");
|
|
93
|
+
!t || typeof ResizeObserver > "u" || (this._pillResizeObserver = new ResizeObserver(() => this._updateSegmentPill()), this._pillResizeObserver.observe(t));
|
|
94
|
+
}
|
|
95
|
+
_updateSegmentPill() {
|
|
96
|
+
const t = this.shadowRoot?.querySelector(".tab__segment-pill"), i = this.shadowRoot?.querySelector(".tab__button--active"), e = this.shadowRoot?.querySelector(".tab__list");
|
|
97
|
+
if (!t || !i || !e) return;
|
|
98
|
+
const a = e.getBoundingClientRect(), s = i.getBoundingClientRect();
|
|
99
|
+
if (s.width === 0) return;
|
|
100
|
+
const o = parseFloat(getComputedStyle(e).paddingLeft) || 0, r = s.left - a.left - e.clientLeft - o + e.scrollLeft, p = s.width;
|
|
101
|
+
this._pillInitialized ? (t.style.transform = `translateX(${r}px)`, t.style.width = `${p}px`) : (t.style.transition = "none", t.style.transform = `translateX(${r}px)`, t.style.width = `${p}px`, requestAnimationFrame(() => {
|
|
102
|
+
t.style.transition = "";
|
|
103
|
+
}), this._pillInitialized = !0);
|
|
104
|
+
}
|
|
105
|
+
scrollTabIntoView(t) {
|
|
106
|
+
this.updateComplete.then(() => {
|
|
107
|
+
const i = this.shadowRoot?.querySelector(
|
|
108
|
+
`[role="tab"][data-tab-id="${t}"]`
|
|
109
|
+
);
|
|
110
|
+
if (i && this.tablist) {
|
|
111
|
+
const e = this.tablist.getBoundingClientRect(), a = i.getBoundingClientRect();
|
|
112
|
+
a.left < e.left ? this.tablist.scrollLeft -= e.left - a.left + 16 : a.right > e.right && (this.tablist.scrollLeft += a.right - e.right + 16);
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
// ==================== RENDER ====================
|
|
117
|
+
renderTabButton(t, i) {
|
|
118
|
+
const e = this.activeTab === t.id, a = this._focusedIndex === i, s = [
|
|
119
|
+
"tab__button",
|
|
120
|
+
e ? "tab__button--active" : "",
|
|
121
|
+
t.disabled ? "tab__button--disabled" : ""
|
|
122
|
+
].filter(Boolean).join(" "), o = ["tab__label", e ? "" : "tab__label--inactive"].filter(Boolean).join(" "), r = ["tab__description", e ? "tab__description--active" : ""].filter(Boolean).join(" ");
|
|
123
|
+
return d`
|
|
124
|
+
<button
|
|
125
|
+
role="tab"
|
|
126
|
+
class=${s}
|
|
127
|
+
data-tab-id=${t.id}
|
|
128
|
+
aria-selected=${e ? "true" : "false"}
|
|
129
|
+
aria-controls="panel-${t.id}"
|
|
130
|
+
tabindex=${e || a ? "0" : "-1"}
|
|
131
|
+
?disabled=${t.disabled}
|
|
132
|
+
@click=${() => this.handleTabClick(t.id, t.disabled)}
|
|
133
|
+
@focus=${() => this.scrollTabIntoView(t.id)}
|
|
134
|
+
>
|
|
135
|
+
${t.icon ? d`<i class="${t.icon} tab__icon"></i>` : b}
|
|
136
|
+
<div class="tab__content">
|
|
137
|
+
<span class=${o}>${t.label}</span>
|
|
138
|
+
${t.description ? d`<span class=${r}>${t.description}</span>` : b}
|
|
139
|
+
</div>
|
|
140
|
+
</button>
|
|
141
|
+
`;
|
|
142
|
+
}
|
|
143
|
+
renderTabPanel(t) {
|
|
144
|
+
const i = this.activeTab === t.id;
|
|
145
|
+
if (!(!this.lazy || this._renderedTabs.has(t.id))) return b;
|
|
146
|
+
const a = ["tab__panel", i ? "" : "tab__panel--hidden"].filter(Boolean).join(" ");
|
|
147
|
+
return d`
|
|
148
|
+
<div
|
|
149
|
+
role="tabpanel"
|
|
150
|
+
id="panel-${t.id}"
|
|
151
|
+
aria-labelledby="tab-${t.id}"
|
|
152
|
+
class=${a}
|
|
153
|
+
tabindex="0"
|
|
154
|
+
>
|
|
155
|
+
<slot name=${`panel-${t.id}`}>
|
|
156
|
+
${typeof t.content == "string" ? d`${t.content}` : b}
|
|
157
|
+
</slot>
|
|
158
|
+
</div>
|
|
159
|
+
`;
|
|
160
|
+
}
|
|
161
|
+
render() {
|
|
162
|
+
return d`
|
|
163
|
+
<div class="tab tab--${this.variant}">
|
|
164
|
+
<div role="tablist" aria-label="Tabs" class="tab__list" @keydown=${this.handleKeyDown}>
|
|
165
|
+
${this.variant === "segmented" ? d`<span class="tab__segment-pill" aria-hidden="true"></span>` : b}
|
|
166
|
+
${this.tabs.map((t, i) => this.renderTabButton(t, i))}
|
|
167
|
+
</div>
|
|
168
|
+
<div class="tab__panels">${this.tabs.map((t) => this.renderTabPanel(t))}</div>
|
|
169
|
+
</div>
|
|
170
|
+
`;
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
n.styles = [
|
|
174
|
+
u`
|
|
175
|
+
${_(m)}
|
|
176
|
+
`
|
|
177
|
+
];
|
|
178
|
+
l([
|
|
179
|
+
c({ type: Array })
|
|
180
|
+
], n.prototype, "tabs", 2);
|
|
181
|
+
l([
|
|
182
|
+
c({ type: String })
|
|
183
|
+
], n.prototype, "activeTab", 2);
|
|
184
|
+
l([
|
|
185
|
+
c({ type: Boolean })
|
|
186
|
+
], n.prototype, "lazy", 2);
|
|
187
|
+
l([
|
|
188
|
+
c({ type: String })
|
|
189
|
+
], n.prototype, "variant", 2);
|
|
190
|
+
l([
|
|
191
|
+
h()
|
|
192
|
+
], n.prototype, "_focusedIndex", 2);
|
|
193
|
+
l([
|
|
194
|
+
h()
|
|
195
|
+
], n.prototype, "_renderedTabs", 2);
|
|
196
|
+
l([
|
|
197
|
+
f('[role="tablist"]')
|
|
198
|
+
], n.prototype, "tablist", 2);
|
|
199
|
+
n = l([
|
|
200
|
+
g("logosphere-tab")
|
|
201
|
+
], n);
|
|
202
|
+
export {
|
|
203
|
+
n as L
|
|
204
|
+
};
|
package/dist/tab.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tab-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tab-CDMcFHvP.cjs");Object.defineProperty(exports,"LogosphereTab",{enumerable:!0,get:()=>e.LogosphereTab});
|
package/dist/tab.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@logosphere-ui/core",
|
|
3
|
-
"version": "0.0.0-alpha.
|
|
3
|
+
"version": "0.0.0-alpha.38",
|
|
4
4
|
"description": "A modern, framework-agnostic UI component library built with Lit and Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -111,6 +111,11 @@
|
|
|
111
111
|
"import": "./dist/collapse.js",
|
|
112
112
|
"require": "./dist/collapse.cjs"
|
|
113
113
|
},
|
|
114
|
+
"./input-group": {
|
|
115
|
+
"types": "./dist/molecules/InputGroup/index.d.ts",
|
|
116
|
+
"import": "./dist/input-group.js",
|
|
117
|
+
"require": "./dist/input-group.cjs"
|
|
118
|
+
},
|
|
114
119
|
"./accordion": {
|
|
115
120
|
"types": "./dist/molecules/Accordion/index.d.ts",
|
|
116
121
|
"import": "./dist/accordion.js",
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use strict";const t=require("lit"),r=require("lit/decorators.js"),h=require("lit/directives/ref.js"),d='.checkbox-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.checkbox-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.checkbox-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.checkbox-control{width:16px;height:16px;flex-shrink:0;position:relative;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.checkbox-control--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--checked:after{content:"";position:absolute;top:50%;left:50%;width:9px;height:5px;border-left:2px solid #ffffff;border-bottom:2px solid #ffffff;transform:translate(-50%,-65%) rotate(-45deg)}.checkbox-control--indeterminate{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--indeterminate:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:2px;background-color:#fff;border-radius:1px;transform:translate(-50%,-50%)}.checkbox-label{font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-body-text)}.switch-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.switch-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.switch-track{width:36px;height:20px;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-border);position:relative;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked{background-color:var(--color-primary)}.switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--radius-full);background-color:#fff;box-shadow:var(--shadow-xs);transition:transform var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked .switch-thumb{transform:translate(16px)}';var p=Object.defineProperty,b=Object.getOwnPropertyDescriptor,i=(a,e,s,n)=>{for(var o=n>1?void 0:n?b(e,s):e,c=a.length-1,l;c>=0;c--)(l=a[c])&&(o=(n?l(e,s,o):l(o))||o);return n&&o&&p(e,s,o),o};exports.Checkbox=class extends t.LitElement{constructor(){super(...arguments),this.label="",this.value="",this.checked=!1,this.type="checkbox",this.disabled=!1,this.indeterminate=!1,this.internalChecked=!1}connectedCallback(){super.connectedCallback(),this.internalChecked=this.checked}firstUpdated(){this.setIndeterminate()}updated(e){e.has("indeterminate")&&this.setIndeterminate(),e.has("checked")&&(this.internalChecked=this.checked)}setIndeterminate(){this.inputElement&&(this.inputElement.indeterminate=this.indeterminate)}toggleChecked(){this.disabled||(this.indeterminate?(this.indeterminate=!1,this.internalChecked=!0):this.internalChecked=!this.internalChecked,this.dispatchEvent(new CustomEvent("lgsChange",{detail:{checked:this.internalChecked,indeterminate:this.indeterminate,value:this.value},bubbles:!0,composed:!0})))}renderCheckbox(){const e=["checkbox-control",this.internalChecked?"checkbox-control--checked":"",this.indeterminate?"checkbox-control--indeterminate":""].filter(Boolean).join(" ");return t.html`
|
|
2
|
-
<div
|
|
3
|
-
class="checkbox-wrapper ${this.disabled?"checkbox-wrapper--disabled":""}"
|
|
4
|
-
@click=${this.toggleChecked}
|
|
5
|
-
>
|
|
6
|
-
<input
|
|
7
|
-
type="checkbox"
|
|
8
|
-
class="checkbox-input"
|
|
9
|
-
.checked=${this.internalChecked}
|
|
10
|
-
?disabled=${this.disabled}
|
|
11
|
-
.value=${this.value}
|
|
12
|
-
${h.ref(s=>this.inputElement=s)}
|
|
13
|
-
/>
|
|
14
|
-
<span class="${e}"></span>
|
|
15
|
-
${this.label?t.html`<span class="checkbox-label">${this.label}</span>`:t.nothing}
|
|
16
|
-
</div>
|
|
17
|
-
`}renderSwitch(){return t.html`
|
|
18
|
-
<div
|
|
19
|
-
class="switch-wrapper ${this.disabled?"switch-wrapper--disabled":""}"
|
|
20
|
-
@click=${this.toggleChecked}
|
|
21
|
-
>
|
|
22
|
-
<input
|
|
23
|
-
type="checkbox"
|
|
24
|
-
class="checkbox-input"
|
|
25
|
-
.checked=${this.internalChecked}
|
|
26
|
-
?disabled=${this.disabled}
|
|
27
|
-
.value=${this.value}
|
|
28
|
-
${h.ref(e=>this.inputElement=e)}
|
|
29
|
-
/>
|
|
30
|
-
<div class="switch-track ${this.internalChecked?"switch-track--checked":""}">
|
|
31
|
-
<div class="switch-thumb"></div>
|
|
32
|
-
</div>
|
|
33
|
-
${this.label?t.html`<span class="checkbox-label">${this.label}</span>`:t.nothing}
|
|
34
|
-
</div>
|
|
35
|
-
`}render(){return this.type==="switch"?this.renderSwitch():this.renderCheckbox()}};exports.Checkbox.styles=[t.css`
|
|
36
|
-
${t.unsafeCSS(d)}
|
|
37
|
-
`];i([r.property({type:String})],exports.Checkbox.prototype,"label",2);i([r.property({type:String})],exports.Checkbox.prototype,"value",2);i([r.property({type:Boolean})],exports.Checkbox.prototype,"checked",2);i([r.property({type:String})],exports.Checkbox.prototype,"type",2);i([r.property({type:Boolean})],exports.Checkbox.prototype,"disabled",2);i([r.property({type:Boolean})],exports.Checkbox.prototype,"indeterminate",2);i([r.state()],exports.Checkbox.prototype,"internalChecked",2);exports.Checkbox=i([r.customElement("logosphere-checkbox")],exports.Checkbox);
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import { unsafeCSS as b, css as k, LitElement as f, nothing as d, html as a } from "lit";
|
|
2
|
-
import { property as n, state as u, customElement as m } from "lit/decorators.js";
|
|
3
|
-
import { ref as p } from "lit/directives/ref.js";
|
|
4
|
-
const v = '.checkbox-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.checkbox-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.checkbox-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.checkbox-control{width:16px;height:16px;flex-shrink:0;position:relative;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.checkbox-control--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--checked:after{content:"";position:absolute;top:50%;left:50%;width:9px;height:5px;border-left:2px solid #ffffff;border-bottom:2px solid #ffffff;transform:translate(-50%,-65%) rotate(-45deg)}.checkbox-control--indeterminate{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--indeterminate:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:2px;background-color:#fff;border-radius:1px;transform:translate(-50%,-50%)}.checkbox-label{font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-body-text)}.switch-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.switch-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.switch-track{width:36px;height:20px;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-border);position:relative;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked{background-color:var(--color-primary)}.switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--radius-full);background-color:#fff;box-shadow:var(--shadow-xs);transition:transform var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked .switch-thumb{transform:translate(16px)}';
|
|
5
|
-
var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (t, o, c, s) => {
|
|
6
|
-
for (var i = s > 1 ? void 0 : s ? g(o, c) : o, l = t.length - 1, h; l >= 0; l--)
|
|
7
|
-
(h = t[l]) && (i = (s ? h(o, c, i) : h(i)) || i);
|
|
8
|
-
return s && i && x(o, c, i), i;
|
|
9
|
-
};
|
|
10
|
-
let e = class extends f {
|
|
11
|
-
constructor() {
|
|
12
|
-
super(...arguments), this.label = "", this.value = "", this.checked = !1, this.type = "checkbox", this.disabled = !1, this.indeterminate = !1, this.internalChecked = !1;
|
|
13
|
-
}
|
|
14
|
-
connectedCallback() {
|
|
15
|
-
super.connectedCallback(), this.internalChecked = this.checked;
|
|
16
|
-
}
|
|
17
|
-
firstUpdated() {
|
|
18
|
-
this.setIndeterminate();
|
|
19
|
-
}
|
|
20
|
-
updated(t) {
|
|
21
|
-
t.has("indeterminate") && this.setIndeterminate(), t.has("checked") && (this.internalChecked = this.checked);
|
|
22
|
-
}
|
|
23
|
-
setIndeterminate() {
|
|
24
|
-
this.inputElement && (this.inputElement.indeterminate = this.indeterminate);
|
|
25
|
-
}
|
|
26
|
-
toggleChecked() {
|
|
27
|
-
this.disabled || (this.indeterminate ? (this.indeterminate = !1, this.internalChecked = !0) : this.internalChecked = !this.internalChecked, this.dispatchEvent(
|
|
28
|
-
new CustomEvent("lgsChange", {
|
|
29
|
-
detail: {
|
|
30
|
-
checked: this.internalChecked,
|
|
31
|
-
indeterminate: this.indeterminate,
|
|
32
|
-
value: this.value
|
|
33
|
-
},
|
|
34
|
-
bubbles: !0,
|
|
35
|
-
composed: !0
|
|
36
|
-
})
|
|
37
|
-
));
|
|
38
|
-
}
|
|
39
|
-
renderCheckbox() {
|
|
40
|
-
const t = [
|
|
41
|
-
"checkbox-control",
|
|
42
|
-
this.internalChecked ? "checkbox-control--checked" : "",
|
|
43
|
-
this.indeterminate ? "checkbox-control--indeterminate" : ""
|
|
44
|
-
].filter(Boolean).join(" ");
|
|
45
|
-
return a`
|
|
46
|
-
<div
|
|
47
|
-
class="checkbox-wrapper ${this.disabled ? "checkbox-wrapper--disabled" : ""}"
|
|
48
|
-
@click=${this.toggleChecked}
|
|
49
|
-
>
|
|
50
|
-
<input
|
|
51
|
-
type="checkbox"
|
|
52
|
-
class="checkbox-input"
|
|
53
|
-
.checked=${this.internalChecked}
|
|
54
|
-
?disabled=${this.disabled}
|
|
55
|
-
.value=${this.value}
|
|
56
|
-
${p((o) => this.inputElement = o)}
|
|
57
|
-
/>
|
|
58
|
-
<span class="${t}"></span>
|
|
59
|
-
${this.label ? a`<span class="checkbox-label">${this.label}</span>` : d}
|
|
60
|
-
</div>
|
|
61
|
-
`;
|
|
62
|
-
}
|
|
63
|
-
renderSwitch() {
|
|
64
|
-
return a`
|
|
65
|
-
<div
|
|
66
|
-
class="switch-wrapper ${this.disabled ? "switch-wrapper--disabled" : ""}"
|
|
67
|
-
@click=${this.toggleChecked}
|
|
68
|
-
>
|
|
69
|
-
<input
|
|
70
|
-
type="checkbox"
|
|
71
|
-
class="checkbox-input"
|
|
72
|
-
.checked=${this.internalChecked}
|
|
73
|
-
?disabled=${this.disabled}
|
|
74
|
-
.value=${this.value}
|
|
75
|
-
${p((t) => this.inputElement = t)}
|
|
76
|
-
/>
|
|
77
|
-
<div class="switch-track ${this.internalChecked ? "switch-track--checked" : ""}">
|
|
78
|
-
<div class="switch-thumb"></div>
|
|
79
|
-
</div>
|
|
80
|
-
${this.label ? a`<span class="checkbox-label">${this.label}</span>` : d}
|
|
81
|
-
</div>
|
|
82
|
-
`;
|
|
83
|
-
}
|
|
84
|
-
render() {
|
|
85
|
-
return this.type === "switch" ? this.renderSwitch() : this.renderCheckbox();
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
e.styles = [
|
|
89
|
-
k`
|
|
90
|
-
${b(v)}
|
|
91
|
-
`
|
|
92
|
-
];
|
|
93
|
-
r([
|
|
94
|
-
n({ type: String })
|
|
95
|
-
], e.prototype, "label", 2);
|
|
96
|
-
r([
|
|
97
|
-
n({ type: String })
|
|
98
|
-
], e.prototype, "value", 2);
|
|
99
|
-
r([
|
|
100
|
-
n({ type: Boolean })
|
|
101
|
-
], e.prototype, "checked", 2);
|
|
102
|
-
r([
|
|
103
|
-
n({ type: String })
|
|
104
|
-
], e.prototype, "type", 2);
|
|
105
|
-
r([
|
|
106
|
-
n({ type: Boolean })
|
|
107
|
-
], e.prototype, "disabled", 2);
|
|
108
|
-
r([
|
|
109
|
-
n({ type: Boolean })
|
|
110
|
-
], e.prototype, "indeterminate", 2);
|
|
111
|
-
r([
|
|
112
|
-
u()
|
|
113
|
-
], e.prototype, "internalChecked", 2);
|
|
114
|
-
e = r([
|
|
115
|
-
m("logosphere-checkbox")
|
|
116
|
-
], e);
|
|
117
|
-
export {
|
|
118
|
-
e as C
|
|
119
|
-
};
|