@ds-mo/ui 0.7.4 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-checkbox.js.map +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-field.js.map +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-radio-group.js +1 -1
- package/dist/components/ds-scrollbar.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-surface.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-toast-provider.js +1 -1
- package/dist/components/ds-toggle.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/{p-DNEqvbOR.js → p-CIMd6yG3.js} +2 -2
- package/dist/types/.stencil/PanelNav/PanelNav.d.ts +57 -2
- package/dist/types/components.d.ts +37 -4
- package/package.json +4 -3
- package/src/angular/proxies.ts +2 -2
- /package/dist/components/{p-DNEqvbOR.js.map → p-CIMd6yG3.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,c as s,h as r,a
|
|
1
|
+
import{p as e,H as t,c as s,h as r,a,t as o}from"./index.js";const i=()=>`.sc-ds-table-h{display:block;width:100%}.table-wrapper.sc-ds-table{display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:var(--dimension-radius-075)}.table-scroll.sc-ds-table{overflow-x:auto;width:100%}.table.sc-ds-table{display:grid;width:100%;min-width:max-content}.header-row.sc-ds-table{display:contents}.header-cell.sc-ds-table{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075) var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);-webkit-user-select:none;user-select:none;position:sticky;top:0;z-index:2}.header-cell--sortable.sc-ds-table{cursor:pointer}.header-cell--sortable.sc-ds-table:hover{background-color:var(--color-background-translucent)}.header-cell--sortable.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:calc(var(--dimension-space-025) * -1)}.sort-indicator.sc-ds-table{font-size:12px;color:var(--color-foreground-secondary)}.row.sc-ds-table{display:contents}.row--clickable.sc-ds-table{cursor:pointer}.row.sc-ds-table:hover .cell.sc-ds-table{background-color:var(--color-interaction-hover)}.row--selected.sc-ds-table .cell.sc-ds-table{background-color:var(--color-background-faint-brand)}.row--clickable.sc-ds-table:focus-visible .cell.sc-ds-table{background-color:var(--color-interaction-hover);box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus)}.cell.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-075) var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);min-height:var(--dimension-size-500);background-color:var(--color-background-primary);transition:background-color var(--effect-motion-short-2)}.align-right.sc-ds-table{justify-content:flex-end;text-align:right}.align-center.sc-ds-table{justify-content:center;text-align:center}.cell-value.sc-ds-table{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.empty-row.sc-ds-table{display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-400);background-color:var(--color-background-primary)}.skeleton.sc-ds-table{height:14px;width:60%;background-color:var(--color-background-translucent);border-radius:var(--dimension-radius-050);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.table-pagination.sc-ds-table{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-100);padding:var(--dimension-space-100);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary);background-color:var(--color-background-primary)}.page-button.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-050) var(--dimension-space-100);background-color:transparent;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;transition:background-color var(--effect-motion-short-2)}.page-button.sc-ds-table:hover:not(:disabled){background-color:var(--color-interaction-hover)}.page-button.sc-ds-table:disabled{opacity:0.4;cursor:not-allowed}.page-button.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}`;function n(e,t){if(e.accessorKey)return t[e.accessorKey];if(e.accessor)return e.accessor(t);return undefined}function c(e,t,s){const r=s==="asc"?1:-1;if(e==null&&t==null)return 0;if(e==null)return r;if(t==null)return-r;if(typeof e==="number"&&typeof t==="number")return(e-t)*r;return String(e).localeCompare(String(t))*r}const d=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsSort=s(this,"dsSort");this.dsRowClick=s(this,"dsRowClick");this.dsPageChange=s(this,"dsPageChange");this.columns=[];this.data=[];this.loading=false;this.emptyMessage="No results found.";this.selectedRows="";this.pageSize=20}get activeSort(){return this.sortState??this.internalSort}get visibleCols(){return this.columns.filter((e=>!e.hide))}get gridTemplate(){return this.visibleCols.map((e=>{if(e.width)return typeof e.width==="number"?`${e.width}px`:e.width;return"minmax(120px, 1fr)"})).join(" ")}get sortedData(){const e=this.activeSort;if(!e)return this.data;const t=this.columns.find((t=>t.id===e.columnId));if(!t)return this.data;return[...this.data].sort(((s,r)=>c(n(t,s),n(t,r),e.direction)))}get pagedData(){if(this.pageIndex===undefined)return this.sortedData;const e=this.pageIndex*this.pageSize;return this.sortedData.slice(e,e+this.pageSize)}get totalPages(){if(this.pageIndex===undefined)return 1;return Math.ceil(this.sortedData.length/this.pageSize)}get selectedSet(){if(!this.selectedRows)return new Set;return new Set(this.selectedRows.split(",").map(Number).filter((e=>!isNaN(e))))}handleSort(e){this.dsSort.emit({columnId:e});if(!this.sortState){const t=this.internalSort;this.internalSort=t?.columnId===e?{columnId:e,direction:t.direction==="asc"?"desc":"asc"}:{columnId:e,direction:"asc"}}}render(){const{visibleCols:e,pagedData:t,totalPages:s,loading:o}=this;const i=!o&&t.length===0;const c=this.selectedSet;const d=this.activeSort;const l=this.pageIndex!==undefined&&s>1;return r(a,{key:"64193792ca5768f1bfbd478c9ff291fefd69f3e3"},r("div",{key:"af568862e9009e9971b36db5f120cd63ddf915fc",class:"table-wrapper","aria-busy":o||undefined},r("div",{key:"0488ff49eda2404afe0a1819e15076b9da214feb",class:"table-scroll"},r("div",{key:"0a3cca2bb914142c0808a8ba8574734972a90ff8",class:"table",style:{gridTemplateColumns:this.gridTemplate},role:"table"},r("div",{key:"aa977394e9d8ed01a710df96e44f611a0a27b4bd",class:"header-row",role:"row"},e.map((e=>{const t=d?.columnId===e.id;const s=e.sortable?t?d.direction==="asc"?"ascending":"descending":"none":undefined;return r("div",{key:e.id,class:{"header-cell":true,"header-cell--sortable":!!e.sortable,"align-right":e.align==="right","align-center":e.align==="center"},role:"columnheader","aria-sort":s,tabIndex:e.sortable?0:undefined,onClick:()=>e.sortable&&this.handleSort(e.id),onKeyDown:t=>{if(e.sortable&&(t.key==="Enter"||t.key===" ")){t.preventDefault();this.handleSort(e.id)}},style:e.minWidth?{minWidth:typeof e.minWidth==="number"?`${e.minWidth}px`:e.minWidth}:undefined},r("span",{class:"text-body-small-emphasis",style:{color:"var(--color-foreground-secondary)"}},e.header),t&&r("span",{class:"sort-indicator","aria-hidden":"true"},d.direction==="asc"?"↑":"↓"))}))),o&&Array.from({length:5}).map(((t,s)=>r("div",{key:`sk-${s}`,class:"row",role:s===0?"status":"row","aria-label":s===0?"Loading":undefined},e.map((e=>r("div",{key:e.id,class:"cell",role:"cell"},r("div",{class:"skeleton"}))))))),i&&r("div",{key:"36fbdb62400a7716dfb063da046948115a2ff75e",class:"empty-row",style:{gridColumn:"1 / -1"}},r("p",{key:"12c4f0b8188303e9308b9de6f9be67d9dc57c53c",class:"text-body-medium",style:{margin:"0",color:"var(--color-foreground-secondary)"}},this.emptyMessage)),!o&&t.map(((t,s)=>{const a=c.has(s);return r("div",{key:s,class:{row:true,"row--selected":a,"row--clickable":true},role:"row",tabIndex:0,"aria-selected":this.selectedRows?a:undefined,onClick:()=>this.dsRowClick.emit({row:t,rowIndex:s}),onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();this.dsRowClick.emit({row:t,rowIndex:s})}}},e.map((e=>r("div",{key:e.id,class:{cell:true,"align-right":e.align==="right","align-center":e.align==="center"},role:"cell"},r("span",{class:"text-body-medium cell-value"},String(n(e,t)??""))))))})))),l&&r("div",{key:"1abf66377ff5b07aaea30a62cda507a2871ec73c",class:"table-pagination"},r("button",{key:"d2955674cbd3272b80a869a76f3fc68b1f8c6f01",type:"button",class:"page-button",disabled:this.pageIndex===0,onClick:()=>{this.pageIndex=this.pageIndex-1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},r("span",{key:"d97e6409d20bf23e4303d32ea5eb5c6e8d1b97c3",class:"text-body-small"},"Previous")),r("span",{key:"2bfccc0e5b44e5383ef3983b2ed875a3d6153196",class:"text-body-small",style:{color:"var(--color-foreground-secondary)"}},"Page ",this.pageIndex+1," of ",s),r("button",{key:"98973bbd02e1a2a8789587689bd3d4ef329307ff",type:"button",class:"page-button",disabled:this.pageIndex>=s-1,onClick:()=>{this.pageIndex=this.pageIndex+1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},r("span",{key:"85f578e12590a39c0d7bc0e25e1d67794866eb7a",class:"text-body-small"},"Next")))))}static get style(){return i()}},[2,"ds-table",{columns:[16],data:[16],sortState:[16],loading:[4],emptyMessage:[1,"empty-message"],selectedRows:[1,"selected-rows"],pageIndex:[1026,"page-index"],pageSize:[2,"page-size"],internalSort:[32]}]);function l(){if(typeof customElements==="undefined"){return}const e=["ds-table"];e.forEach((e=>{switch(e){case"ds-table":if(!customElements.get(o(e))){customElements.define(o(e),d)}break}}))}l();const b=d;const u=l;export{b as DsTable,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tableCss","getCellValue","col","row","accessorKey","accessor","undefined","compareValues","a","b","dir","m","String","localeCompare","Table","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","columns","data","loading","emptyMessage","selectedRows","pageSize","activeSort","sortState","internalSort","visibleCols","filter","c","hide","gridTemplate","map","width","join","sortedData","sort","find","id","columnId","direction","pagedData","pageIndex","start","slice","totalPages","Math","ceil","length","selectedSet","Set","split","Number","n","isNaN","handleSort","dsSort","emit","cur","render","isEmpty","hasPagination","h","Host","key","class","style","gridTemplateColumns","role","isSorted","ariaSort","sortable","align","tabIndex","onClick","onKeyDown","e","preventDefault","minWidth","color","header","Array","from","_","i","gridColumn","margin","rowIndex","isSelected","has","dsRowClick","cell","type","disabled","dsPageChange"],"sources":["src/wc/components/Table/Table.css?tag=ds-table&encapsulation=scoped","src/wc/components/Table/Table.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.table-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n overflow: hidden;\n border-radius: var(--dimension-radius-075);\n}\n\n.table-scroll {\n overflow-x: auto;\n width: 100%;\n}\n\n.table {\n display: grid;\n width: 100%;\n min-width: max-content;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header-row {\n display: contents;\n}\n\n.header-cell {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-075) var(--dimension-space-100);\n background-color: var(--color-background-secondary);\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n -webkit-user-select: none;\n user-select: none;\n position: sticky;\n top: 0;\n z-index: 2;\n}\n\n.header-cell--sortable {\n cursor: pointer;\n}\n\n.header-cell--sortable:hover {\n background-color: var(--color-background-translucent);\n}\n\n.header-cell--sortable:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: calc(var(--dimension-space-025) * -1);\n}\n\n.sort-indicator {\n font-size: 12px;\n color: var(--color-foreground-secondary);\n}\n\n/* ─── Rows ──────────────────────────────────────────────────────────────────── */\n\n.row {\n display: contents;\n}\n\n.row--clickable {\n cursor: pointer;\n}\n\n.row:hover .cell {\n background-color: var(--color-interaction-hover);\n}\n\n.row--selected .cell {\n background-color: var(--color-background-faint-brand);\n}\n\n.row--clickable:focus-visible .cell {\n background-color: var(--color-interaction-hover);\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus);\n}\n\n/* ─── Cells ─────────────────────────────────────────────────────────────────── */\n\n.cell {\n display: flex;\n align-items: center;\n padding: var(--dimension-space-075) var(--dimension-space-100);\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n min-height: var(--dimension-size-500);\n background-color: var(--color-background-primary);\n transition: background-color var(--effect-motion-short-2);\n}\n\n.align-right {\n justify-content: flex-end;\n text-align: right;\n}\n\n.align-center {\n justify-content: center;\n text-align: center;\n}\n\n.cell-value {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.empty-row {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--dimension-space-400);\n background-color: var(--color-background-primary);\n}\n\n/* ─── Loading skeleton ──────────────────────────────────────────────────────── */\n\n.skeleton {\n height: 14px;\n width: 60%;\n background-color: var(--color-background-translucent);\n border-radius: var(--dimension-radius-050);\n animation: shimmer 1.5s infinite;\n}\n\n@keyframes shimmer {\n 0% { opacity: 0.5; }\n 50% { opacity: 1; }\n 100% { opacity: 0.5; }\n}\n\n/* ─── Pagination ────────────────────────────────────────────────────────────── */\n\n.table-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-100);\n padding: var(--dimension-space-100);\n border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n background-color: var(--color-background-primary);\n}\n\n.page-button {\n display: flex;\n align-items: center;\n padding: var(--dimension-space-050) var(--dimension-space-100);\n background-color: transparent;\n border: none;\n border-radius: var(--dimension-radius-075);\n cursor: pointer;\n transition: background-color var(--effect-motion-short-2);\n}\n\n.page-button:hover:not(:disabled) {\n background-color: var(--color-interaction-hover);\n}\n\n.page-button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.page-button:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-stroke-width-015);\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface SortState {\n columnId: string;\n direction: SortDirection;\n}\n\nexport interface TableColumn<T = unknown> {\n id: string;\n header: string;\n accessorKey?: string;\n accessor?: (row: T) => unknown;\n sortable?: boolean;\n align?: 'left' | 'right' | 'center';\n width?: string | number;\n minWidth?: string | number;\n hide?: boolean;\n}\n\nfunction getCellValue<T>(col: TableColumn<T>, row: T): unknown {\n if (col.accessorKey) return (row as Record<string, unknown>)[col.accessorKey];\n if (col.accessor) return col.accessor(row);\n return undefined;\n}\n\nfunction compareValues(a: unknown, b: unknown, dir: SortDirection): number {\n const m = dir === 'asc' ? 1 : -1;\n if (a == null && b == null) return 0;\n if (a == null) return m;\n if (b == null) return -m;\n if (typeof a === 'number' && typeof b === 'number') return (a - b) * m;\n return String(a).localeCompare(String(b)) * m;\n}\n\n@Component({\n tag: 'ds-table',\n styleUrl: 'Table.css',\n scoped: true,\n})\nexport class Table {\n @Prop() columns: TableColumn[] = [];\n @Prop() data: unknown[] = [];\n @Prop() sortState: SortState | undefined;\n @Prop() loading: boolean = false;\n @Prop() emptyMessage: string = 'No results found.';\n /** Comma-separated zero-based row indices that are selected. */\n @Prop() selectedRows: string = '';\n /** Page index (0-based). Enables built-in pagination when set alongside pageSize. */\n @Prop({ mutable: true }) pageIndex: number | undefined;\n @Prop() pageSize: number = 20;\n\n @State() private internalSort: SortState | undefined;\n\n @Event() dsSort!: EventEmitter<{ columnId: string }>;\n @Event() dsRowClick!: EventEmitter<{ row: unknown; rowIndex: number }>;\n @Event() dsPageChange!: EventEmitter<{ pageIndex: number }>;\n\n private get activeSort(): SortState | undefined {\n return this.sortState ?? this.internalSort;\n }\n\n private get visibleCols(): TableColumn[] {\n return this.columns.filter(c => !c.hide);\n }\n\n private get gridTemplate(): string {\n return this.visibleCols.map(col => {\n if (col.width) return typeof col.width === 'number' ? `${col.width}px` : col.width;\n return 'minmax(120px, 1fr)';\n }).join(' ');\n }\n\n private get sortedData(): unknown[] {\n const sort = this.activeSort;\n if (!sort) return this.data;\n const col = this.columns.find(c => c.id === sort.columnId);\n if (!col) return this.data;\n return [...this.data].sort((a, b) =>\n compareValues(getCellValue(col, a), getCellValue(col, b), sort.direction)\n );\n }\n\n private get pagedData(): unknown[] {\n if (this.pageIndex === undefined) return this.sortedData;\n const start = this.pageIndex * this.pageSize;\n return this.sortedData.slice(start, start + this.pageSize);\n }\n\n private get totalPages(): number {\n if (this.pageIndex === undefined) return 1;\n return Math.ceil(this.sortedData.length / this.pageSize);\n }\n\n private get selectedSet(): Set<number> {\n if (!this.selectedRows) return new Set();\n return new Set(this.selectedRows.split(',').map(Number).filter(n => !isNaN(n)));\n }\n\n private handleSort(columnId: string) {\n this.dsSort.emit({ columnId });\n // Toggle internal sort if consumer hasn't provided sortState\n if (!this.sortState) {\n const cur = this.internalSort;\n this.internalSort = cur?.columnId === columnId\n ? { columnId, direction: cur.direction === 'asc' ? 'desc' : 'asc' }\n : { columnId, direction: 'asc' };\n }\n }\n\n render() {\n const { visibleCols, pagedData, totalPages, loading } = this;\n const isEmpty = !loading && pagedData.length === 0;\n const selectedSet = this.selectedSet;\n const sort = this.activeSort;\n const hasPagination = this.pageIndex !== undefined && totalPages > 1;\n\n return (\n <Host>\n <div class=\"table-wrapper\" aria-busy={loading || undefined}>\n <div class=\"table-scroll\">\n <div class=\"table\" style={{ gridTemplateColumns: this.gridTemplate }} role=\"table\">\n\n {/* Header row */}\n <div class=\"header-row\" role=\"row\">\n {visibleCols.map(col => {\n const isSorted = sort?.columnId === col.id;\n const ariaSort = col.sortable\n ? (isSorted ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none')\n : undefined;\n return (\n <div\n key={col.id}\n class={{\n 'header-cell': true,\n 'header-cell--sortable': !!col.sortable,\n 'align-right': col.align === 'right',\n 'align-center': col.align === 'center',\n }}\n role=\"columnheader\"\n aria-sort={ariaSort}\n tabIndex={col.sortable ? 0 : undefined}\n onClick={() => col.sortable && this.handleSort(col.id)}\n onKeyDown={(e: KeyboardEvent) => {\n if (col.sortable && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault();\n this.handleSort(col.id);\n }\n }}\n style={col.minWidth ? { minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth as string } : undefined}\n >\n <span class=\"text-body-small-emphasis\" style={{ color: 'var(--color-foreground-secondary)' }}>\n {col.header}\n </span>\n {isSorted && (\n <span class=\"sort-indicator\" aria-hidden=\"true\">\n {sort.direction === 'asc' ? '↑' : '↓'}\n </span>\n )}\n </div>\n );\n })}\n </div>\n\n {/* Loading skeleton */}\n {loading && Array.from({ length: 5 }).map((_, i) => (\n <div\n key={`sk-${i}`}\n class=\"row\"\n role={i === 0 ? 'status' : 'row'}\n aria-label={i === 0 ? 'Loading' : undefined}\n >\n {visibleCols.map(col => (\n <div key={col.id} class=\"cell\" role=\"cell\">\n <div class=\"skeleton\" />\n </div>\n ))}\n </div>\n ))}\n\n {/* Empty state */}\n {isEmpty && (\n <div class=\"empty-row\" style={{ gridColumn: '1 / -1' }}>\n <p class=\"text-body-medium\" style={{ margin: '0', color: 'var(--color-foreground-secondary)' }}>\n {this.emptyMessage}\n </p>\n </div>\n )}\n\n {/* Data rows */}\n {!loading && pagedData.map((row, rowIndex) => {\n const isSelected = selectedSet.has(rowIndex);\n return (\n <div\n key={rowIndex}\n class={{\n 'row': true,\n 'row--selected': isSelected,\n 'row--clickable': true,\n }}\n role=\"row\"\n tabIndex={0}\n aria-selected={this.selectedRows ? isSelected : undefined}\n onClick={() => this.dsRowClick.emit({ row, rowIndex })}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.dsRowClick.emit({ row, rowIndex });\n }\n }}\n >\n {visibleCols.map(col => (\n <div\n key={col.id}\n class={{\n 'cell': true,\n 'align-right': col.align === 'right',\n 'align-center': col.align === 'center',\n }}\n role=\"cell\"\n >\n <span class=\"text-body-medium cell-value\">\n {String(getCellValue(col, row) ?? '')}\n </span>\n </div>\n ))}\n </div>\n );\n })}\n </div>\n </div>\n\n {/* Built-in pagination */}\n {hasPagination && (\n <div class=\"table-pagination\">\n <button\n type=\"button\"\n class=\"page-button\"\n disabled={this.pageIndex === 0}\n onClick={() => {\n this.pageIndex = this.pageIndex! - 1;\n this.dsPageChange.emit({ pageIndex: this.pageIndex });\n }}\n >\n <span class=\"text-body-small\">Previous</span>\n </button>\n <span class=\"text-body-small\" style={{ color: 'var(--color-foreground-secondary)' }}>\n Page {this.pageIndex! + 1} of {totalPages}\n </span>\n <button\n type=\"button\"\n class=\"page-button\"\n disabled={this.pageIndex! >= totalPages - 1}\n onClick={() => {\n this.pageIndex = this.pageIndex! + 1;\n this.dsPageChange.emit({ pageIndex: this.pageIndex });\n }}\n >\n <span class=\"text-body-small\">Next</span>\n </button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["tableCss","getCellValue","col","row","accessorKey","accessor","undefined","compareValues","a","b","dir","m","String","localeCompare","Table","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","columns","data","loading","emptyMessage","selectedRows","pageSize","activeSort","sortState","internalSort","visibleCols","filter","c","hide","gridTemplate","map","width","join","sortedData","sort","find","id","columnId","direction","pagedData","pageIndex","start","slice","totalPages","Math","ceil","length","selectedSet","Set","split","Number","n","isNaN","handleSort","dsSort","emit","cur","render","isEmpty","hasPagination","h","Host","key","class","style","gridTemplateColumns","role","isSorted","ariaSort","sortable","align","tabIndex","onClick","onKeyDown","e","preventDefault","minWidth","color","header","Array","from","_","i","gridColumn","margin","rowIndex","isSelected","has","dsRowClick","cell","type","disabled","dsPageChange"],"sources":["src/wc/components/Table/Table.css?tag=ds-table&encapsulation=scoped","src/wc/components/Table/Table.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.table-wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n overflow: hidden;\n border-radius: var(--dimension-radius-075);\n}\n\n.table-scroll {\n overflow-x: auto;\n width: 100%;\n}\n\n.table {\n display: grid;\n width: 100%;\n min-width: max-content;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header-row {\n display: contents;\n}\n\n.header-cell {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-075) var(--dimension-space-100);\n background-color: var(--color-background-secondary);\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n -webkit-user-select: none;\n user-select: none;\n position: sticky;\n top: 0;\n z-index: 2;\n}\n\n.header-cell--sortable {\n cursor: pointer;\n}\n\n.header-cell--sortable:hover {\n background-color: var(--color-background-translucent);\n}\n\n.header-cell--sortable:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: calc(var(--dimension-space-025) * -1);\n}\n\n.sort-indicator {\n font-size: 12px;\n color: var(--color-foreground-secondary);\n}\n\n/* ─── Rows ──────────────────────────────────────────────────────────────────── */\n\n.row {\n display: contents;\n}\n\n.row--clickable {\n cursor: pointer;\n}\n\n.row:hover .cell {\n background-color: var(--color-interaction-hover);\n}\n\n.row--selected .cell {\n background-color: var(--color-background-faint-brand);\n}\n\n.row--clickable:focus-visible .cell {\n background-color: var(--color-interaction-hover);\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus);\n}\n\n/* ─── Cells ─────────────────────────────────────────────────────────────────── */\n\n.cell {\n display: flex;\n align-items: center;\n padding: var(--dimension-space-075) var(--dimension-space-100);\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n min-height: var(--dimension-size-500);\n background-color: var(--color-background-primary);\n transition: background-color var(--effect-motion-short-2);\n}\n\n.align-right {\n justify-content: flex-end;\n text-align: right;\n}\n\n.align-center {\n justify-content: center;\n text-align: center;\n}\n\n.cell-value {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.empty-row {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--dimension-space-400);\n background-color: var(--color-background-primary);\n}\n\n/* ─── Loading skeleton ──────────────────────────────────────────────────────── */\n\n.skeleton {\n height: 14px;\n width: 60%;\n background-color: var(--color-background-translucent);\n border-radius: var(--dimension-radius-050);\n animation: shimmer 1.5s infinite;\n}\n\n@keyframes shimmer {\n 0% { opacity: 0.5; }\n 50% { opacity: 1; }\n 100% { opacity: 0.5; }\n}\n\n/* ─── Pagination ────────────────────────────────────────────────────────────── */\n\n.table-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--dimension-space-100);\n padding: var(--dimension-space-100);\n border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n background-color: var(--color-background-primary);\n}\n\n.page-button {\n display: flex;\n align-items: center;\n padding: var(--dimension-space-050) var(--dimension-space-100);\n background-color: transparent;\n border: none;\n border-radius: var(--dimension-radius-075);\n cursor: pointer;\n transition: background-color var(--effect-motion-short-2);\n}\n\n.page-button:hover:not(:disabled) {\n background-color: var(--color-interaction-hover);\n}\n\n.page-button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.page-button:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-stroke-width-015);\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface SortState {\n columnId: string;\n direction: SortDirection;\n}\n\nexport interface TableColumn<T = unknown> {\n id: string;\n header: string;\n accessorKey?: string;\n accessor?: (row: T) => unknown;\n sortable?: boolean;\n align?: 'left' | 'right' | 'center';\n width?: string | number;\n minWidth?: string | number;\n hide?: boolean;\n}\n\nfunction getCellValue<T>(col: TableColumn<T>, row: T): unknown {\n if (col.accessorKey) return (row as Record<string, unknown>)[col.accessorKey];\n if (col.accessor) return col.accessor(row);\n return undefined;\n}\n\nfunction compareValues(a: unknown, b: unknown, dir: SortDirection): number {\n const m = dir === 'asc' ? 1 : -1;\n if (a == null && b == null) return 0;\n if (a == null) return m;\n if (b == null) return -m;\n if (typeof a === 'number' && typeof b === 'number') return (a - b) * m;\n return String(a).localeCompare(String(b)) * m;\n}\n\n@Component({\n tag: 'ds-table',\n styleUrl: 'Table.css',\n scoped: true,\n})\nexport class Table {\n @Prop() columns: TableColumn[] = [];\n @Prop() data: unknown[] = [];\n @Prop() sortState: SortState | undefined;\n @Prop() loading: boolean = false;\n @Prop() emptyMessage: string = 'No results found.';\n /** Comma-separated zero-based row indices that are selected. */\n @Prop() selectedRows: string = '';\n /** Page index (0-based). Enables built-in pagination when set alongside pageSize. */\n @Prop({ mutable: true }) pageIndex: number | undefined;\n @Prop() pageSize: number = 20;\n\n @State() private internalSort: SortState | undefined;\n\n @Event() dsSort!: EventEmitter<{ columnId: string }>;\n @Event() dsRowClick!: EventEmitter<{ row: unknown; rowIndex: number }>;\n @Event() dsPageChange!: EventEmitter<{ pageIndex: number }>;\n\n private get activeSort(): SortState | undefined {\n return this.sortState ?? this.internalSort;\n }\n\n private get visibleCols(): TableColumn[] {\n return this.columns.filter(c => !c.hide);\n }\n\n private get gridTemplate(): string {\n return this.visibleCols.map(col => {\n if (col.width) return typeof col.width === 'number' ? `${col.width}px` : col.width;\n return 'minmax(120px, 1fr)';\n }).join(' ');\n }\n\n private get sortedData(): unknown[] {\n const sort = this.activeSort;\n if (!sort) return this.data;\n const col = this.columns.find(c => c.id === sort.columnId);\n if (!col) return this.data;\n return [...this.data].sort((a, b) =>\n compareValues(getCellValue(col, a), getCellValue(col, b), sort.direction)\n );\n }\n\n private get pagedData(): unknown[] {\n if (this.pageIndex === undefined) return this.sortedData;\n const start = this.pageIndex * this.pageSize;\n return this.sortedData.slice(start, start + this.pageSize);\n }\n\n private get totalPages(): number {\n if (this.pageIndex === undefined) return 1;\n return Math.ceil(this.sortedData.length / this.pageSize);\n }\n\n private get selectedSet(): Set<number> {\n if (!this.selectedRows) return new Set();\n return new Set(this.selectedRows.split(',').map(Number).filter(n => !isNaN(n)));\n }\n\n private handleSort(columnId: string) {\n this.dsSort.emit({ columnId });\n // Toggle internal sort if consumer hasn't provided sortState\n if (!this.sortState) {\n const cur = this.internalSort;\n this.internalSort = cur?.columnId === columnId\n ? { columnId, direction: cur.direction === 'asc' ? 'desc' : 'asc' }\n : { columnId, direction: 'asc' };\n }\n }\n\n render() {\n const { visibleCols, pagedData, totalPages, loading } = this;\n const isEmpty = !loading && pagedData.length === 0;\n const selectedSet = this.selectedSet;\n const sort = this.activeSort;\n const hasPagination = this.pageIndex !== undefined && totalPages > 1;\n\n return (\n <Host>\n <div class=\"table-wrapper\" aria-busy={loading || undefined}>\n <div class=\"table-scroll\">\n <div class=\"table\" style={{ gridTemplateColumns: this.gridTemplate }} role=\"table\">\n\n {/* Header row */}\n <div class=\"header-row\" role=\"row\">\n {visibleCols.map(col => {\n const isSorted = sort?.columnId === col.id;\n const ariaSort = col.sortable\n ? (isSorted ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none')\n : undefined;\n return (\n <div\n key={col.id}\n class={{\n 'header-cell': true,\n 'header-cell--sortable': !!col.sortable,\n 'align-right': col.align === 'right',\n 'align-center': col.align === 'center',\n }}\n role=\"columnheader\"\n aria-sort={ariaSort}\n tabIndex={col.sortable ? 0 : undefined}\n onClick={() => col.sortable && this.handleSort(col.id)}\n onKeyDown={(e: KeyboardEvent) => {\n if (col.sortable && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault();\n this.handleSort(col.id);\n }\n }}\n style={col.minWidth ? { minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth as string } : undefined}\n >\n <span class=\"text-body-small-emphasis\" style={{ color: 'var(--color-foreground-secondary)' }}>\n {col.header}\n </span>\n {isSorted && (\n <span class=\"sort-indicator\" aria-hidden=\"true\">\n {sort.direction === 'asc' ? '↑' : '↓'}\n </span>\n )}\n </div>\n );\n })}\n </div>\n\n {/* Loading skeleton */}\n {loading && Array.from({ length: 5 }).map((_, i) => (\n <div\n key={`sk-${i}`}\n class=\"row\"\n role={i === 0 ? 'status' : 'row'}\n aria-label={i === 0 ? 'Loading' : undefined}\n >\n {visibleCols.map(col => (\n <div key={col.id} class=\"cell\" role=\"cell\">\n <div class=\"skeleton\" />\n </div>\n ))}\n </div>\n ))}\n\n {/* Empty state */}\n {isEmpty && (\n <div class=\"empty-row\" style={{ gridColumn: '1 / -1' }}>\n <p class=\"text-body-medium\" style={{ margin: '0', color: 'var(--color-foreground-secondary)' }}>\n {this.emptyMessage}\n </p>\n </div>\n )}\n\n {/* Data rows */}\n {!loading && pagedData.map((row, rowIndex) => {\n const isSelected = selectedSet.has(rowIndex);\n return (\n <div\n key={rowIndex}\n class={{\n 'row': true,\n 'row--selected': isSelected,\n 'row--clickable': true,\n }}\n role=\"row\"\n tabIndex={0}\n aria-selected={this.selectedRows ? isSelected : undefined}\n onClick={() => this.dsRowClick.emit({ row, rowIndex })}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.dsRowClick.emit({ row, rowIndex });\n }\n }}\n >\n {visibleCols.map(col => (\n <div\n key={col.id}\n class={{\n 'cell': true,\n 'align-right': col.align === 'right',\n 'align-center': col.align === 'center',\n }}\n role=\"cell\"\n >\n <span class=\"text-body-medium cell-value\">\n {String(getCellValue(col, row) ?? '')}\n </span>\n </div>\n ))}\n </div>\n );\n })}\n </div>\n </div>\n\n {/* Built-in pagination */}\n {hasPagination && (\n <div class=\"table-pagination\">\n <button\n type=\"button\"\n class=\"page-button\"\n disabled={this.pageIndex === 0}\n onClick={() => {\n this.pageIndex = this.pageIndex! - 1;\n this.dsPageChange.emit({ pageIndex: this.pageIndex });\n }}\n >\n <span class=\"text-body-small\">Previous</span>\n </button>\n <span class=\"text-body-small\" style={{ color: 'var(--color-foreground-secondary)' }}>\n Page {this.pageIndex! + 1} of {totalPages}\n </span>\n <button\n type=\"button\"\n class=\"page-button\"\n disabled={this.pageIndex! >= totalPages - 1}\n onClick={() => {\n this.pageIndex = this.pageIndex! + 1;\n this.dsPageChange.emit({ pageIndex: this.pageIndex });\n }}\n >\n <span class=\"text-body-small\">Next</span>\n </button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as o,H as t,c as a,h as r,a as n,t as e}from"./index.js";const s=()=>`.sc-ds-tag-h{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-050);box-sizing:border-box;color:var(--color-foreground-primary);position:relative;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.tag--size-md.sc-ds-tag-h{height:calc(var(--dimension-size-base) * 7 / 2);padding:0 var(--dimension-space-075);gap:0}.tag--size-sm.sc-ds-tag-h{height:var(--dimension-size-250);padding:0 var(--dimension-space-050);gap:0}.tag--size-xs.sc-ds-tag-h{height:var(--dimension-size-150);padding:0 var(--dimension-space-012);gap:0}.tag--rounded.sc-ds-tag-h{border-radius:var(--dimension-radius-half)}.tag--rounded.tag--size-md.sc-ds-tag-h{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.tag--rounded.tag--size-sm.sc-ds-tag-h{padding-left:calc(var(--dimension-space-050) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-050) + var(--dimension-space-050))}.tag--rounded.tag--size-xs.sc-ds-tag-h{padding-left:calc(var(--dimension-space-012) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-012) + var(--dimension-space-050))}.tag--on-medium.sc-ds-tag-h{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed)}.tag--on-bold.sc-ds-tag-h{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed)}.tag--on-strong.sc-ds-tag-h{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed)}.tag--on-always-dark.sc-ds-tag-h{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed)}.tag--elevation-flat.sc-ds-tag-h{background-color:transparent !important;box-shadow:inset 0 0 0 var(--dimension-stroke-width-015) currentColor}.tag--elevation-elevated.sc-ds-tag-h{box-shadow:var(--effect-elevation-elevated-sm)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-positive)}.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-tag-h{cursor:pointer;user-select:none;outline:none}.tag--interactive.sc-ds-tag-h:hover{background-color:var(--_hover-bg)}.tag--interactive.sc-ds-tag-h:active{background-color:var(--_pressed-bg)}.tag--interactive.sc-ds-tag-h:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tag--pressed.sc-ds-tag-h{background-color:var(--color-background-faint-brand) !important;color:var(--color-foreground-bold-brand) !important}.tag__label.sc-ds-tag{line-height:0;padding:0 var(--dimension-space-050);white-space:nowrap;flex-shrink:0}.tag--size-sm.sc-ds-tag-h .tag__label.sc-ds-tag,.tag--size-xs.sc-ds-tag-h .tag__label.sc-ds-tag{padding:0 var(--dimension-space-025)}.tag__icon-slot.sc-ds-tag{display:contents}.tag--removable.sc-ds-tag-h{gap:var(--dimension-space-025)}.tag--size-xs.tag--removable.sc-ds-tag-h{gap:0}.tag__remove.sc-ds-tag{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;border-radius:var(--dimension-radius-050)}.tag__remove.sc-ds-tag::before{content:'';position:absolute;inset:-2px;border-radius:var(--dimension-radius-025);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-tag:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-tag:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:-1px;border-radius:3px}.tag--size-xs.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:0;border-radius:var(--dimension-radius-050)}.tag--rounded.sc-ds-tag-h .tag__remove.sc-ds-tag,.tag--rounded.sc-ds-tag-h .tag__remove.sc-ds-tag::before{border-radius:var(--dimension-radius-half)}.tag__remove-x.sc-ds-tag{display:inline-flex;line-height:0;font-size:inherit}.tag--inactive.sc-ds-tag-h{opacity:0.5;pointer-events:none;cursor:not-allowed}`;const i={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const c={md:20,sm:16,xs:12};const g=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsRemove=a(this,"dsRemove");this.dsClick=a(this,"dsClick");this.dsPressedChange=a(this,"dsPressedChange");this.intent="neutral";this.contrast="faint";this.elevation="none";this.size="md";this.rounded=false;this.removable=false;this.inactive=false;this.pressed=false;this.interactive=false;this.handleClick=()=>{if(this.inactive)return;this.pressed=!this.pressed;this.dsPressedChange.emit(this.pressed);this.dsClick.emit()};this.handleKeyDown=o=>{if(this.inactive)return;if(o.key==="Enter"||o.key===" "){o.preventDefault();this.handleClick()}};this.handleRemove=o=>{o.stopPropagation();this.dsRemove.emit()}}render(){const o=this.size.toUpperCase();const t=i[this.size];const a=c[this.size];const e=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;const s={tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--elevation-${this.elevation}`]:true,[`tag--size-${this.size}`]:true,"tag--rounded":this.rounded,"tag--rounded-no-icon-left":this.rounded,"tag--rounded-no-remove-right":this.rounded&&!this.removable,[`tag--icon-left-${o}`]:false,[`tag--icon-right-${o}`]:this.removable,"tag--removable":this.removable,"tag--interactive":this.interactive,"tag--inactive":this.inactive,"tag--pressed":this.pressed,"tag--on-medium":this.background==="medium","tag--on-bold":this.background==="bold","tag--on-strong":this.background==="strong","tag--on-always-dark":this.background==="always-dark"};return r(n,{key:"6540504a18d913e4e896d59eda894aa112ce33e0",class:s,style:e,onClick:this.interactive?this.handleClick:undefined,onKeyDown:this.interactive?this.handleKeyDown:undefined,role:this.interactive?"button":undefined,tabIndex:this.interactive?this.inactive?-1:0:undefined,"aria-pressed":this.interactive&&this.pressed!==undefined?String(this.pressed):undefined,"aria-disabled":this.inactive||undefined},r("span",{key:"13bb8ab0557463c4ce15cb037678d88f56f6229e",class:"tag__icon-slot",style:{fontSize:`${a}px`,lineHeight:"0"}},r("slot",{key:"e0db5a329cd99be3dae0cdcfe08852eea31bf159",name:"icon"})),r("span",{key:"86471ca5a32ff82d3c9c65072f739b8c0720e49c",class:{tag__label:true,[t]:true}},this.label),this.removable&&r("button",{key:"e52e00908d0fb2ba29e826bc8c923228d115f415",type:"button",class:"tag__remove",onClick:this.handleRemove,"aria-label":`Remove ${this.label}`,tabIndex:-1},r("slot",{key:"efee74567e679b98fa2faf17ae21dc4376f73a6d",name:"remove-icon"},r("span",{key:"f284f2bb5cdb4a1967ed49e2d8e25ad10346f439",class:"tag__remove-x",style:{fontSize:`${a}px`,lineHeight:"0"}},"✕"))))}static get style(){return s()}},[262,"ds-tag",{label:[1],intent:[1],contrast:[1],elevation:[1],size:[1],rounded:[4],removable:[4],maxWidth:[8,"max-width"],inactive:[4],background:[1],pressed:[1028],interactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const o=["ds-tag"];o.forEach((o=>{switch(o){case"ds-tag":if(!customElements.get(e(o))){customElements.define(e(o),g)}break}}))}d();const l=g;const u=d;export{l as DsTag,u as defineCustomElement};
|
|
1
|
+
import{p as o,H as t,c as a,h as r,a as n,t as e}from"./index.js";const s=()=>`.sc-ds-tag-h{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-050);box-sizing:border-box;color:var(--color-foreground-primary);position:relative;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.tag--size-md.sc-ds-tag-h{height:calc(var(--dimension-size-base) * 7 / 2);padding:0 var(--dimension-space-075);gap:0}.tag--size-sm.sc-ds-tag-h{height:var(--dimension-size-250);padding:0 var(--dimension-space-050);gap:0}.tag--size-xs.sc-ds-tag-h{height:var(--dimension-size-150);padding:0 var(--dimension-space-012);gap:0}.tag--rounded.sc-ds-tag-h{border-radius:var(--dimension-radius-half)}.tag--rounded.tag--size-md.sc-ds-tag-h{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.tag--rounded.tag--size-sm.sc-ds-tag-h{padding-left:calc(var(--dimension-space-050) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-050) + var(--dimension-space-050))}.tag--rounded.tag--size-xs.sc-ds-tag-h{padding-left:calc(var(--dimension-space-012) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-012) + var(--dimension-space-050))}.tag--on-medium.sc-ds-tag-h{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed)}.tag--on-bold.sc-ds-tag-h{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed)}.tag--on-strong.sc-ds-tag-h{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed)}.tag--on-always-dark.sc-ds-tag-h{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed)}.tag--elevation-flat.sc-ds-tag-h{background-color:transparent !important;box-shadow:inset 0 0 0 var(--dimension-stroke-width-015) currentColor}.tag--elevation-elevated.sc-ds-tag-h{box-shadow:var(--effect-elevation-elevated-sm)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-positive)}.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-tag-h{cursor:pointer;user-select:none;outline:none}.tag--interactive.sc-ds-tag-h:hover{background-color:var(--_hover-bg)}.tag--interactive.sc-ds-tag-h:active{background-color:var(--_pressed-bg)}.tag--interactive.sc-ds-tag-h:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tag--pressed.sc-ds-tag-h{background-color:var(--color-background-faint-brand) !important;color:var(--color-foreground-bold-brand) !important}.tag__label.sc-ds-tag{line-height:0;padding:0 var(--dimension-space-050);white-space:nowrap;flex-shrink:0}.tag--size-sm.sc-ds-tag-h .tag__label.sc-ds-tag,.tag--size-xs.sc-ds-tag-h .tag__label.sc-ds-tag{padding:0 var(--dimension-space-025)}.tag__icon-slot.sc-ds-tag{display:contents}.tag--removable.sc-ds-tag-h{gap:var(--dimension-space-025)}.tag--size-xs.tag--removable.sc-ds-tag-h{gap:0}.tag__remove.sc-ds-tag{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;border-radius:var(--dimension-radius-050)}.tag__remove.sc-ds-tag::before{content:'';position:absolute;inset:-2px;border-radius:var(--dimension-radius-025);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-tag:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-tag:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:-1px;border-radius:3px}.tag--size-xs.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:0;border-radius:var(--dimension-radius-050)}.tag--rounded.sc-ds-tag-h .tag__remove.sc-ds-tag,.tag--rounded.sc-ds-tag-h .tag__remove.sc-ds-tag::before{border-radius:var(--dimension-radius-half)}.tag__remove-x.sc-ds-tag{display:inline-flex;line-height:0;font-size:inherit}.tag--inactive.sc-ds-tag-h{opacity:0.5;pointer-events:none;cursor:not-allowed}`;const i={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const c={md:20,sm:16,xs:12};const g=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsRemove=a(this,"dsRemove");this.dsClick=a(this,"dsClick");this.dsPressedChange=a(this,"dsPressedChange");this.intent="neutral";this.contrast="faint";this.elevation="none";this.size="md";this.rounded=false;this.removable=false;this.inactive=false;this.pressed=false;this.interactive=false;this.handleClick=()=>{if(this.inactive)return;this.pressed=!this.pressed;this.dsPressedChange.emit(this.pressed);this.dsClick.emit()};this.handleKeyDown=o=>{if(this.inactive)return;if(o.key==="Enter"||o.key===" "){o.preventDefault();this.handleClick()}};this.handleRemove=o=>{o.stopPropagation();this.dsRemove.emit()}}render(){const o=this.size.toUpperCase();const t=i[this.size];const a=c[this.size];const e=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;const s={tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--elevation-${this.elevation}`]:true,[`tag--size-${this.size}`]:true,"tag--rounded":this.rounded,"tag--rounded-no-icon-left":this.rounded,"tag--rounded-no-remove-right":this.rounded&&!this.removable,[`tag--icon-left-${o}`]:false,[`tag--icon-right-${o}`]:this.removable,"tag--removable":this.removable,"tag--interactive":this.interactive,"tag--inactive":this.inactive,"tag--pressed":this.pressed,"tag--on-medium":this.background==="medium","tag--on-bold":this.background==="bold","tag--on-strong":this.background==="strong","tag--on-always-dark":this.background==="always-dark"};return r(n,{key:"c15d76091369aa19f250ce06a6970f0e9e29067f",class:s,style:e,onClick:this.interactive?this.handleClick:undefined,onKeyDown:this.interactive?this.handleKeyDown:undefined,role:this.interactive?"button":undefined,tabIndex:this.interactive?this.inactive?-1:0:undefined,"aria-pressed":this.interactive&&this.pressed!==undefined?String(this.pressed):undefined,"aria-disabled":this.inactive||undefined},r("span",{key:"d3e44293f32bc13f55d94386c5feb6325a0faba7",class:"tag__icon-slot",style:{fontSize:`${a}px`,lineHeight:"0"}},r("slot",{key:"f05ed0d687bf98f7dbb046409fc0a6645492a862",name:"icon"})),r("span",{key:"d6d4d25132eaec28ce377bb4416b0ff4c59bbabb",class:{tag__label:true,[t]:true}},this.label),this.removable&&r("button",{key:"b82be705895b1dae1fb5601dd766a8de7b717156",type:"button",class:"tag__remove",onClick:this.handleRemove,"aria-label":`Remove ${this.label}`,tabIndex:-1},r("slot",{key:"05e2ae73a48c4e85f9de10630dcbda37e2547228",name:"remove-icon"},r("span",{key:"11a2c700cd9c978e28fc249c79e8d90709d5a6b3",class:"tag__remove-x",style:{fontSize:`${a}px`,lineHeight:"0"}},"✕"))))}static get style(){return s()}},[262,"ds-tag",{label:[1],intent:[1],contrast:[1],elevation:[1],size:[1],rounded:[4],removable:[4],maxWidth:[8,"max-width"],inactive:[4],background:[1],pressed:[1028],interactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const o=["ds-tag"];o.forEach((o=>{switch(o){case"ds-tag":if(!customElements.get(e(o))){customElements.define(e(o),g)}break}}))}d();const l=g;const u=d;export{l as DsTag,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-tag.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{T as o,d as s}from"./p-
|
|
1
|
+
import{T as o,d as s}from"./p-CIMd6yG3.js";const t=o;const p=s;export{t as DsText,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-text.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as e,h as s,a as i,t as o}from"./index.js";let n=[];const r=new Set;let a=0;function c(){r.forEach((t=>t()))}function d(t){r.add(t);return()=>r.delete(t)}function l(){return n}const u={show(t){const e=`ds-toast-${++a}`;n=[...n,{id:e,intent:"neutral",duration:4e3,...t}];c();return e},success(t,e){return u.show({message:t,intent:"positive",...e})},error(t,e){return u.show({message:t,intent:"negative",...e})},warning(t,e){return u.show({message:t,intent:"warning",...e})},info(t,e){return u.show({message:t,intent:"neutral",...e})},dismiss(t){n=n.filter((e=>e.id!==t));c()},dismissAll(){n=[];c()}};const m=()=>`.toast.sc-ds-toast-provider{animation:toastSlideIn var(--effect-motion-short-3) ease-out;width:100%;max-width:420px}.toast--exit.sc-ds-toast-provider{animation:toastFadeOut 200ms ease-in forwards}.toast-dismiss.sc-ds-toast-provider{background:none;border:none;color:inherit;cursor:pointer;padding:var(--dimension-space-025);margin-left:auto;font-size:16px;line-height:1;opacity:0.7;border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);flex-shrink:0}.toast-dismiss.sc-ds-toast-provider:hover{opacity:1}@keyframes toastSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastFadeOut{from{opacity:1}to{opacity:0}}`;const p={neutral:"var(--color-background-bold-neutral)",brand:"var(--color-background-bold-brand)",positive:"var(--color-background-bold-positive)",negative:"var(--color-background-bold-negative)",warning:"var(--color-background-bold-warning)",caution:"var(--color-background-bold-caution)"};const f=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.position="top-center";this.items=[];this.unsubscribe=null}connectedCallback(){this.unsubscribe=d((()=>this.syncFromStore()));this.syncFromStore()}disconnectedCallback(){this.items.forEach((t=>{if(t.timer)clearTimeout(t.timer)}));this.unsubscribe?.()}syncFromStore(){const t=l();const e=new Set(this.items.map((t=>t.data.id)));const s=new Set(t.map((t=>t.id)));const i=this.items.filter((t=>s.has(t.data.id)));const o=t.filter((t=>!e.has(t.id))).map((t=>{const e={data:t,exiting:false,timer:null,remaining:t.duration,startedAt:0,paused:false};if(t.duration>0){e.startedAt=Date.now();e.timer=setTimeout((()=>this.dismissItem(t.id)),t.duration)}return e}));this.items=[...i,...o]}dismissItem(t){this.items=this.items.map((e=>e.data.id===t?{...e,exiting:true,timer:null}:e));setTimeout((()=>{this.items=this.items.filter((e=>e.data.id!==t));u.dismiss(t)}),200)}pauseItem(t){this.items=this.items.map((e=>{if(e.data.id!==t||e.paused||!e.timer)return e;clearTimeout(e.timer);const s=Date.now()-e.startedAt;return{...e,paused:true,timer:null,remaining:Math.max(0,e.remaining-s)}}))}resumeItem(t){this.items=this.items.map((e=>{if(e.data.id!==t||!e.paused||e.remaining<=0)return e;const s=setTimeout((()=>this.dismissItem(t)),e.remaining);return{...e,paused:false,timer:s,startedAt:Date.now()}}))}getPositionStyle(){const t={position:"fixed",zIndex:"9999",display:"flex",flexDirection:"column",gap:"var(--dimension-space-075)",pointerEvents:"none",padding:"var(--dimension-space-100)",maxWidth:"480px",width:"100%",boxSizing:"border-box"};switch(this.position){case"top-center":return{...t,top:"0",left:"50%",transform:"translateX(-50%)",alignItems:"center"};case"top-right":return{...t,top:"0",right:"0",alignItems:"flex-end"};case"bottom-center":return{...t,bottom:"0",left:"50%",transform:"translateX(-50%)",alignItems:"center"};case"bottom-right":return{...t,bottom:"0",right:"0",alignItems:"flex-end"}}}render(){return s(i,{key:"
|
|
1
|
+
import{p as t,H as e,h as s,a as i,t as o}from"./index.js";let n=[];const r=new Set;let a=0;function c(){r.forEach((t=>t()))}function d(t){r.add(t);return()=>r.delete(t)}function l(){return n}const u={show(t){const e=`ds-toast-${++a}`;n=[...n,{id:e,intent:"neutral",duration:4e3,...t}];c();return e},success(t,e){return u.show({message:t,intent:"positive",...e})},error(t,e){return u.show({message:t,intent:"negative",...e})},warning(t,e){return u.show({message:t,intent:"warning",...e})},info(t,e){return u.show({message:t,intent:"neutral",...e})},dismiss(t){n=n.filter((e=>e.id!==t));c()},dismissAll(){n=[];c()}};const m=()=>`.toast.sc-ds-toast-provider{animation:toastSlideIn var(--effect-motion-short-3) ease-out;width:100%;max-width:420px}.toast--exit.sc-ds-toast-provider{animation:toastFadeOut 200ms ease-in forwards}.toast-dismiss.sc-ds-toast-provider{background:none;border:none;color:inherit;cursor:pointer;padding:var(--dimension-space-025);margin-left:auto;font-size:16px;line-height:1;opacity:0.7;border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);flex-shrink:0}.toast-dismiss.sc-ds-toast-provider:hover{opacity:1}@keyframes toastSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastFadeOut{from{opacity:1}to{opacity:0}}`;const p={neutral:"var(--color-background-bold-neutral)",brand:"var(--color-background-bold-brand)",positive:"var(--color-background-bold-positive)",negative:"var(--color-background-bold-negative)",warning:"var(--color-background-bold-warning)",caution:"var(--color-background-bold-caution)"};const f=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.position="top-center";this.items=[];this.unsubscribe=null}connectedCallback(){this.unsubscribe=d((()=>this.syncFromStore()));this.syncFromStore()}disconnectedCallback(){this.items.forEach((t=>{if(t.timer)clearTimeout(t.timer)}));this.unsubscribe?.()}syncFromStore(){const t=l();const e=new Set(this.items.map((t=>t.data.id)));const s=new Set(t.map((t=>t.id)));const i=this.items.filter((t=>s.has(t.data.id)));const o=t.filter((t=>!e.has(t.id))).map((t=>{const e={data:t,exiting:false,timer:null,remaining:t.duration,startedAt:0,paused:false};if(t.duration>0){e.startedAt=Date.now();e.timer=setTimeout((()=>this.dismissItem(t.id)),t.duration)}return e}));this.items=[...i,...o]}dismissItem(t){this.items=this.items.map((e=>e.data.id===t?{...e,exiting:true,timer:null}:e));setTimeout((()=>{this.items=this.items.filter((e=>e.data.id!==t));u.dismiss(t)}),200)}pauseItem(t){this.items=this.items.map((e=>{if(e.data.id!==t||e.paused||!e.timer)return e;clearTimeout(e.timer);const s=Date.now()-e.startedAt;return{...e,paused:true,timer:null,remaining:Math.max(0,e.remaining-s)}}))}resumeItem(t){this.items=this.items.map((e=>{if(e.data.id!==t||!e.paused||e.remaining<=0)return e;const s=setTimeout((()=>this.dismissItem(t)),e.remaining);return{...e,paused:false,timer:s,startedAt:Date.now()}}))}getPositionStyle(){const t={position:"fixed",zIndex:"9999",display:"flex",flexDirection:"column",gap:"var(--dimension-space-075)",pointerEvents:"none",padding:"var(--dimension-space-100)",maxWidth:"480px",width:"100%",boxSizing:"border-box"};switch(this.position){case"top-center":return{...t,top:"0",left:"50%",transform:"translateX(-50%)",alignItems:"center"};case"top-right":return{...t,top:"0",right:"0",alignItems:"flex-end"};case"bottom-center":return{...t,bottom:"0",left:"50%",transform:"translateX(-50%)",alignItems:"center"};case"bottom-right":return{...t,bottom:"0",right:"0",alignItems:"flex-end"}}}render(){return s(i,{key:"8eacd2f05d83674f5e3cce1a0a44f0419649cf1e",style:{display:"contents"}},s("div",{key:"5a0f067c0b84af9bcbe3767d7452254a3301302b",class:"toast-container",role:"region","aria-label":"Notifications","aria-live":"polite",style:this.getPositionStyle()},this.items.map((t=>s("div",{key:t.data.id,class:{toast:true,"toast--exit":t.exiting},role:t.data.intent==="negative"?"alert":"status",style:{backgroundColor:p[t.data.intent],borderRadius:"var(--dimension-radius-125)",boxShadow:"var(--effect-elevation-elevated-floating)",display:"flex",alignItems:"center",gap:"var(--dimension-space-075)",padding:"var(--dimension-space-075) var(--dimension-space-100)",minHeight:"var(--dimension-size-400)",pointerEvents:"auto",color:"var(--color-foreground-on-bold-background-primary)",boxSizing:"border-box"},onMouseEnter:()=>this.pauseItem(t.data.id),onMouseLeave:()=>this.resumeItem(t.data.id)},s("span",{class:"text-body-medium",style:{flex:"1"}},t.data.message),s("button",{type:"button",class:"toast-dismiss",onClick:()=>this.dismissItem(t.data.id),"aria-label":"Dismiss"},"×"))))))}static get style(){return m()}},[2,"ds-toast-provider",{position:[1],items:[32]}]);function g(){if(typeof customElements==="undefined"){return}const t=["ds-toast-provider"];t.forEach((t=>{switch(t){case"ds-toast-provider":if(!customElements.get(o(t))){customElements.define(o(t),f)}break}}))}g();const h=f;const b=g;export{h as DsToastProvider,b as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-toast-provider.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as
|
|
1
|
+
import{p as e,H as t,c as o,h as i,a as s,t as n}from"./index.js";const r=()=>`:host{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;width:var(--dimension-size-400);height:var(--dimension-size-250);padding:0 var(--dimension-space-025);border:none;border-radius:var(--dimension-radius-half);cursor:pointer;user-select:none;outline:none;flex-shrink:0;background-color:var(--color-background-medium-neutral);box-shadow:var(--effect-highlight-depressed-sm);transition:background-color var(--effect-motion-short-2);box-sizing:border-box}:host::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-shadow-depressed-sm);pointer-events:none}:host(:focus-visible){outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}:host(.checked){background-color:var(--color-foreground-bold-brand)}:host(.inactive){cursor:not-allowed;opacity:0.5}.thumb{position:relative;flex-shrink:0;width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-sm);transition:transform var(--effect-motion-short-2);transform:translateX(0);z-index:1}.thumb::after{content:'';position:absolute;inset:0;background-color:transparent;border-radius:inherit;transition:background-color var(--effect-motion-instant, 100ms);pointer-events:none}:host(:hover:not(.inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.inactive)) .thumb{transform:translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}`;const a=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.dsChange=o(this,"dsChange");this.checked=false;this.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(this.inactive)return;if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleClick()}}}render(){return i(s,{key:"f15d358be3e75e350912bd3168308e9cbf7cae25",role:"switch","aria-checked":String(this.checked),"aria-disabled":this.inactive||undefined,tabIndex:this.inactive?-1:0,class:{toggle:true,checked:this.checked,inactive:this.inactive},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("span",{key:"e33f31d746b49b03b47b6ab5ceea7c61ee4fe314",class:"thumb"}))}static get style(){return r()}},[1,"ds-toggle",{checked:[1028],inactive:[4]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-toggle"];e.forEach((e=>{switch(e){case"ds-toggle":if(!customElements.get(n(e))){customElements.define(n(e),a)}break}}))}c();const d=a;const h=c;export{d as DsToggle,h as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-toggle.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as s,h as i,a as e,t as o}from"./index.js";const a=()=>`.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-elevated-floating);padding:var(--dimension-space-050);white-space:nowrap;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{display:flex;flex-direction:row;align-items:center;gap:var(--dimension-space-050)}.key-hint.sc-ds-tooltip{width:var(--dimension-size-200);height:var(--dimension-size-200);flex-shrink:0;display:flex;align-items:center;justify-content:center;border:var(--dimension-stroke-width-015) solid var(--color-foreground-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}`;const n=600;const h=300;const r=200;const
|
|
1
|
+
import{p as t,H as s,h as i,a as e,t as o}from"./index.js";const a=()=>`.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-elevated-floating);padding:var(--dimension-space-050);white-space:nowrap;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{display:flex;flex-direction:row;align-items:center;gap:var(--dimension-space-050)}.key-hint.sc-ds-tooltip{width:var(--dimension-size-200);height:var(--dimension-size-200);flex-shrink:0;display:flex;align-items:center;justify-content:center;border:var(--dimension-stroke-width-015) solid var(--color-foreground-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}`;const n=600;const h=300;const r=200;const d=4;let l=0;let c=0;const f=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.side="top";this.align="center";this.sideOffset=4;this.alignOffset=0;this.delay=n;this.shortcutKeyPosition="end";this.visible=false;this.closing=false;this.pos={x:0,y:0};this.tooltipId=`ds-tooltip-${++c}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.tooltipEl=null;this.mouseEnterHandler=()=>this.show();this.mouseLeaveHandler=()=>this.hide();this.focusHandler=()=>this.show();this.blurHandler=()=>this.hide()}componentDidLoad(){this.bindAnchor()}disconnectedCallback(){this.unbindAnchor();this.clearTimers()}onPositionPropsChange(){if(this.visible)this.calculatePosition()}bindAnchor(){const t=this.el.querySelector("slot");const s=t?.assignedElements?.()??[];const i=s[0]??this.el.firstElementChild;if(!i)return;this.anchor=i;i.setAttribute("aria-describedby",this.tooltipId);i.addEventListener("mouseenter",this.mouseEnterHandler);i.addEventListener("mouseleave",this.mouseLeaveHandler);i.addEventListener("focus",this.focusHandler);i.addEventListener("blur",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.anchor.removeAttribute("aria-describedby");this.anchor.removeEventListener("mouseenter",this.mouseEnterHandler);this.anchor.removeEventListener("mouseleave",this.mouseLeaveHandler);this.anchor.removeEventListener("focus",this.focusHandler);this.anchor.removeEventListener("blur",this.blurHandler);this.anchor=null}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}show(){this.clearTimers();const t=Date.now()-l<h;if(t){this.closing=false;this.visible=true;requestAnimationFrame((()=>this.calculatePosition()));return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;this.closing=false;this.visible=true;requestAnimationFrame((()=>this.calculatePosition()))}),this.delay)}hide(){this.clearTimers();if(!this.visible)return;l=Date.now();this.closing=true;this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.visible=false;this.closing=false}),r)}calculatePosition(){if(!this.anchor)return;const t=this.el.querySelector(".tooltip-popup");if(!t)return;const s=this.anchor.getBoundingClientRect();const i=t.offsetWidth||80;const e=t.offsetHeight||24;let o=0,a=0;switch(this.side){case"top":a=s.top-e-this.sideOffset;o=this.align==="start"?s.left+this.alignOffset:this.align==="end"?s.right-i+this.alignOffset:s.left+s.width/2-i/2+this.alignOffset;break;case"bottom":a=s.bottom+this.sideOffset;o=this.align==="start"?s.left+this.alignOffset:this.align==="end"?s.right-i+this.alignOffset:s.left+s.width/2-i/2+this.alignOffset;break;case"left":o=s.left-i-this.sideOffset;a=this.align==="start"?s.top+this.alignOffset:this.align==="end"?s.bottom-e+this.alignOffset:s.top+s.height/2-e/2+this.alignOffset;break;case"right":o=s.right+this.sideOffset;a=this.align==="start"?s.top+this.alignOffset:this.align==="end"?s.bottom-e+this.alignOffset:s.top+s.height/2-e/2+this.alignOffset;break}this.pos={x:Math.min(Math.max(o,d),window.innerWidth-i-d),y:Math.min(Math.max(a,d),window.innerHeight-e-d)}}render(){return i(e,{key:"89ca48258f0e38e9ebacb6794db00f64d3f6497b",style:{display:"contents"}},i("slot",{key:"4f9f694008af1929c117aa9f251e6b9222e8f967"}),(this.visible||this.closing)&&i("div",{key:"b08f40a6702fe3d4312dda658f70cd4c4a6b9b4b",id:this.tooltipId,class:{"tooltip-popup":true,"tooltip-popup--closing":this.closing},role:"tooltip",style:{position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"10000",pointerEvents:"none"}},i("div",{key:"bf1f48ab96bd4951a9d838bef67d8e489f36068f",class:"tooltip-inner"},this.shortcutKey&&this.shortcutKeyPosition==="start"&&i("div",{key:"98b378ad7697f544468d30d2640ada07a2bde86e",class:"key-hint","aria-hidden":"true"},i("span",{key:"c414078d2e7b7142fe7fa1135ca696abdaa667d6",class:"text-caption-emphasis"},this.shortcutKey)),i("span",{key:"3a459908e6bfac9e9609c901cd6aeb41922c67eb",class:"text-body-small"},this.label),this.shortcutKey&&this.shortcutKeyPosition==="end"&&i("div",{key:"b535b58577544a4b6c8d0601041eacf550ce30b3",class:"key-hint","aria-hidden":"true"},i("span",{key:"2f062978a8ea2625acdd6820f3d2e7570a7b9dbd",class:"text-caption-emphasis"},this.shortcutKey)))))}get el(){return this}static get watchers(){return{label:[{onPositionPropsChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}]}}static get style(){return a()}},[262,"ds-tooltip",{label:[1],side:[1],align:[1],sideOffset:[2,"side-offset"],alignOffset:[2,"align-offset"],delay:[2],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"],visible:[32],closing:[32],pos:[32]},undefined,{label:[{onPositionPropsChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(o(t))){customElements.define(o(t),f)}break}}))}p();const u=f;const b=p;export{u as DsTooltip,b as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-tooltip.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as e,h as o,a as r,t as s}from"./index.js";const i=()=>`.text.sc-ds-text{margin:0}.text--truncate-1.sc-ds-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--truncate-2.sc-ds-text,.text--truncate-3.sc-ds-text,.text--truncate-4.sc-ds-text,.text--truncate-5.sc-ds-text{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;text-overflow:ellipsis;word-break:break-word}.text--truncate-2.sc-ds-text{-webkit-line-clamp:2}.text--truncate-3.sc-ds-text{-webkit-line-clamp:3}.text--truncate-4.sc-ds-text{-webkit-line-clamp:4}.text--truncate-5.sc-ds-text{-webkit-line-clamp:5}.text--nowrap.sc-ds-text{white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}.text--balance.sc-ds-text{text-wrap:balance}.text--pretty.sc-ds-text{text-wrap:pretty}.text--color-primary.sc-ds-text{color:var(--color-foreground-primary)}.text--color-secondary.sc-ds-text{color:var(--color-foreground-secondary)}.text--color-tertiary.sc-ds-text{color:var(--color-foreground-tertiary)}.text--color-brand.sc-ds-text{color:var(--color-foreground-bold-brand)}.text--color-negative.sc-ds-text{color:var(--color-foreground-bold-negative)}.text--color-positive.sc-ds-text{color:var(--color-foreground-bold-positive)}.text--color-warning.sc-ds-text{color:var(--color-foreground-bold-warning)}.text--color-caution.sc-ds-text{color:var(--color-foreground-bold-caution)}.text--color-ai.sc-ds-text{color:var(--color-foreground-bold-ai)}.text--color-on-strong.sc-ds-text{color:var(--color-foreground-on-strong-background-primary)}.text--color-on-bold.sc-ds-text{color:var(--color-foreground-on-bold-background-primary)}.text--color-inherit.sc-ds-text{color:inherit}.text--decoration-underline.sc-ds-text{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}.text--decoration-dotted-underline.sc-ds-text{text-decoration:underline dotted;text-underline-offset:2px;text-decoration-thickness:1px}.text--italic.sc-ds-text{font-style:italic}.text--align-left.sc-ds-text{text-align:left}.text--align-center.sc-ds-text{text-align:center}.text--align-right.sc-ds-text{text-align:right}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.variant="text-body-medium";this.italic=false;this.lineTruncation="none";this.as="p"}render(){const t=this.as;const e=t=>typeof t==="string"&&t.startsWith("var(--");const s={[this.variant]:true,text:true,"text--nowrap":this.wrap==="nowrap","text--balance":this.wrap==="balance","text--pretty":this.wrap==="pretty","text--truncate-1":this.lineTruncation===1&&this.wrap!=="nowrap","text--truncate-2":this.lineTruncation===2&&this.wrap!=="nowrap","text--truncate-3":this.lineTruncation===3&&this.wrap!=="nowrap","text--truncate-4":this.lineTruncation===4&&this.wrap!=="nowrap","text--truncate-5":this.lineTruncation===5&&this.wrap!=="nowrap","text--color-primary":this.color==="primary","text--color-secondary":this.color==="secondary","text--color-tertiary":this.color==="tertiary","text--color-brand":this.color==="brand","text--color-negative":this.color==="negative","text--color-positive":this.color==="positive","text--color-warning":this.color==="warning","text--color-caution":this.color==="caution","text--color-ai":this.color==="ai","text--color-on-strong":this.color==="on-strong","text--color-on-bold":this.color==="on-bold","text--color-inherit":this.color==="inherit","text--decoration-underline":this.decoration==="underline","text--decoration-dotted-underline":this.decoration==="dotted-underline","text--italic":this.italic,"text--align-left":this.align==="left","text--align-center":this.align==="center","text--align-right":this.align==="right"};const i=this.color&&e(this.color)?{color:this.color}:undefined;const n={};if(this.as==="label"&&this.for)n["for"]=this.for;return o(r,{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as t,H as e,h as o,a as r,t as s}from"./index.js";const i=()=>`.text.sc-ds-text{margin:0}.text--truncate-1.sc-ds-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--truncate-2.sc-ds-text,.text--truncate-3.sc-ds-text,.text--truncate-4.sc-ds-text,.text--truncate-5.sc-ds-text{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;text-overflow:ellipsis;word-break:break-word}.text--truncate-2.sc-ds-text{-webkit-line-clamp:2}.text--truncate-3.sc-ds-text{-webkit-line-clamp:3}.text--truncate-4.sc-ds-text{-webkit-line-clamp:4}.text--truncate-5.sc-ds-text{-webkit-line-clamp:5}.text--nowrap.sc-ds-text{white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}.text--balance.sc-ds-text{text-wrap:balance}.text--pretty.sc-ds-text{text-wrap:pretty}.text--color-primary.sc-ds-text{color:var(--color-foreground-primary)}.text--color-secondary.sc-ds-text{color:var(--color-foreground-secondary)}.text--color-tertiary.sc-ds-text{color:var(--color-foreground-tertiary)}.text--color-brand.sc-ds-text{color:var(--color-foreground-bold-brand)}.text--color-negative.sc-ds-text{color:var(--color-foreground-bold-negative)}.text--color-positive.sc-ds-text{color:var(--color-foreground-bold-positive)}.text--color-warning.sc-ds-text{color:var(--color-foreground-bold-warning)}.text--color-caution.sc-ds-text{color:var(--color-foreground-bold-caution)}.text--color-ai.sc-ds-text{color:var(--color-foreground-bold-ai)}.text--color-on-strong.sc-ds-text{color:var(--color-foreground-on-strong-background-primary)}.text--color-on-bold.sc-ds-text{color:var(--color-foreground-on-bold-background-primary)}.text--color-inherit.sc-ds-text{color:inherit}.text--decoration-underline.sc-ds-text{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}.text--decoration-dotted-underline.sc-ds-text{text-decoration:underline dotted;text-underline-offset:2px;text-decoration-thickness:1px}.text--italic.sc-ds-text{font-style:italic}.text--align-left.sc-ds-text{text-align:left}.text--align-center.sc-ds-text{text-align:center}.text--align-right.sc-ds-text{text-align:right}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.variant="text-body-medium";this.italic=false;this.lineTruncation="none";this.as="p"}render(){const t=this.as;const e=t=>typeof t==="string"&&t.startsWith("var(--");const s={[this.variant]:true,text:true,"text--nowrap":this.wrap==="nowrap","text--balance":this.wrap==="balance","text--pretty":this.wrap==="pretty","text--truncate-1":this.lineTruncation===1&&this.wrap!=="nowrap","text--truncate-2":this.lineTruncation===2&&this.wrap!=="nowrap","text--truncate-3":this.lineTruncation===3&&this.wrap!=="nowrap","text--truncate-4":this.lineTruncation===4&&this.wrap!=="nowrap","text--truncate-5":this.lineTruncation===5&&this.wrap!=="nowrap","text--color-primary":this.color==="primary","text--color-secondary":this.color==="secondary","text--color-tertiary":this.color==="tertiary","text--color-brand":this.color==="brand","text--color-negative":this.color==="negative","text--color-positive":this.color==="positive","text--color-warning":this.color==="warning","text--color-caution":this.color==="caution","text--color-ai":this.color==="ai","text--color-on-strong":this.color==="on-strong","text--color-on-bold":this.color==="on-bold","text--color-inherit":this.color==="inherit","text--decoration-underline":this.decoration==="underline","text--decoration-dotted-underline":this.decoration==="dotted-underline","text--italic":this.italic,"text--align-left":this.align==="left","text--align-center":this.align==="center","text--align-right":this.align==="right"};const i=this.color&&e(this.color)?{color:this.color}:undefined;const n={};if(this.as==="label"&&this.for)n["for"]=this.for;return o(r,{key:"3e8a5022058aeb6d4dad5ec5e9aa2eff9c90795a",style:{display:"contents"}},o(t,{key:"253c70407b6aa64c943e20f5bd2e3d4678a1e9d3",class:s,style:i,...n},o("slot",{key:"ffe33814815aea44e1f3dd605709c83d8b5fbeb1"})))}static get style(){return i()}},[262,"ds-text",{variant:[1],color:[1],decoration:[1],italic:[4],align:[1],lineTruncation:[8,"line-truncation"],wrap:[1],as:[1],for:[1]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-text"];t.forEach((t=>{switch(t){case"ds-text":if(!customElements.get(s(t))){customElements.define(s(t),n)}break}}))}c();export{n as T,c as d};
|
|
2
|
+
//# sourceMappingURL=p-CIMd6yG3.js.map
|
|
@@ -7,6 +7,10 @@ export interface PanelNavItem {
|
|
|
7
7
|
/** Show a notification dot badge on the item */
|
|
8
8
|
dot?: boolean;
|
|
9
9
|
flag?: boolean;
|
|
10
|
+
/** When set, the item renders as an `<a>` element so any router that
|
|
11
|
+
* intercepts anchor clicks (Angular Router, React Router, etc.) handles
|
|
12
|
+
* navigation automatically. `dsNavSelect` still fires on click. */
|
|
13
|
+
href?: string;
|
|
10
14
|
}
|
|
11
15
|
export interface PanelNavGroup {
|
|
12
16
|
id?: string;
|
|
@@ -18,10 +22,22 @@ export declare class PanelNav {
|
|
|
18
22
|
variant: PanelNavVariant;
|
|
19
23
|
/** JSON string of `PanelNavGroup[]` */
|
|
20
24
|
groups: string;
|
|
21
|
-
/** ID of the currently active/selected nav item */
|
|
25
|
+
/** ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set. */
|
|
22
26
|
activeId: string;
|
|
23
|
-
/** Whether the nav is in collapsed (icon-only) state
|
|
27
|
+
/** Whether the nav is in collapsed (icon-only) state.
|
|
28
|
+
* When `storageKey` is set the component manages this internally —
|
|
29
|
+
* do not also bind it from outside in that mode. */
|
|
24
30
|
collapsed: boolean;
|
|
31
|
+
/** Viewport width (px) below which the nav auto-collapses to icon-only mode. 0 = disabled. */
|
|
32
|
+
breakpoint: number;
|
|
33
|
+
/** `localStorage` key used to persist the collapsed state across page loads.
|
|
34
|
+
* When set the component is self-managing for collapsed state; `dsNavToggle`
|
|
35
|
+
* still fires for consumers that want to observe the change. */
|
|
36
|
+
storageKey: string;
|
|
37
|
+
/** Current route URL (e.g. `window.location.pathname` or the router's active URL).
|
|
38
|
+
* When set the component derives the active item by matching item `href` values
|
|
39
|
+
* against this string (longest prefix wins), overriding `activeId`. */
|
|
40
|
+
currentUrl: string;
|
|
25
41
|
/** Display name for the footer user section */
|
|
26
42
|
userName: string;
|
|
27
43
|
/** Single character shown in the collapsed avatar */
|
|
@@ -35,14 +51,53 @@ export declare class PanelNav {
|
|
|
35
51
|
el: HTMLElement;
|
|
36
52
|
private parsedGroups;
|
|
37
53
|
private atBottom;
|
|
54
|
+
private isAnimating;
|
|
55
|
+
private rovingIndex;
|
|
56
|
+
private viewportNarrow;
|
|
57
|
+
private urlDerivedActiveId;
|
|
58
|
+
private transitionEndHandler?;
|
|
59
|
+
private resizeObserver?;
|
|
60
|
+
private isDragging;
|
|
61
|
+
private dragStartX;
|
|
62
|
+
private didSnap;
|
|
63
|
+
private lastDeltaX;
|
|
64
|
+
private edgeOverlayTimer;
|
|
65
|
+
private globalMouseMoveHandler?;
|
|
66
|
+
private globalMouseUpHandler?;
|
|
67
|
+
private showEdgeOverlay;
|
|
68
|
+
/** The ID that should be treated as active. `currentUrl` matching takes precedence
|
|
69
|
+
* over `activeId` when both are present. */
|
|
70
|
+
private get effectiveActiveId();
|
|
71
|
+
onCollapsedChange(): void;
|
|
72
|
+
onBreakpointChange(): void;
|
|
38
73
|
onGroupsChange(val: string): void;
|
|
74
|
+
onActiveIdChange(): void;
|
|
75
|
+
onCurrentUrlChange(): void;
|
|
39
76
|
componentWillLoad(): void;
|
|
40
77
|
componentDidLoad(): void;
|
|
78
|
+
disconnectedCallback(): void;
|
|
79
|
+
private startCollapseAnimation;
|
|
80
|
+
private connectResizeObserver;
|
|
81
|
+
private disconnectResizeObserver;
|
|
82
|
+
/** Derive active ID from the current URL by matching item `href` values.
|
|
83
|
+
* Uses longest-prefix match so `/fleet/detail` correctly activates `/fleet`. */
|
|
84
|
+
private syncActiveFromUrl;
|
|
85
|
+
/** Centralised toggle: always emits `dsNavToggle`; when `storageKey` is set
|
|
86
|
+
* also mutates `collapsed` directly and persists to `localStorage`. */
|
|
87
|
+
private applyToggle;
|
|
88
|
+
private getAllItems;
|
|
89
|
+
private syncRovingIndex;
|
|
90
|
+
private handleItemKeyDown;
|
|
41
91
|
private checkScroll;
|
|
42
92
|
private handleBodyScroll;
|
|
43
93
|
private handleItemClick;
|
|
44
94
|
private handleToggle;
|
|
45
95
|
private handleFooterAction;
|
|
96
|
+
private clearEdgeOverlayTimer;
|
|
97
|
+
private handleResizeHandleMouseEnter;
|
|
98
|
+
private handleResizeHandleMouseLeave;
|
|
99
|
+
private handleResizeHandleMouseDown;
|
|
100
|
+
private renderNavItem;
|
|
46
101
|
render(): any;
|
|
47
102
|
}
|
|
48
103
|
//# sourceMappingURL=PanelNav.d.ts.map
|
|
@@ -383,20 +383,35 @@ export namespace Components {
|
|
|
383
383
|
}
|
|
384
384
|
interface DsPanelNav {
|
|
385
385
|
/**
|
|
386
|
-
* ID of the currently active/selected nav item
|
|
386
|
+
* ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set.
|
|
387
387
|
* @default ''
|
|
388
388
|
*/
|
|
389
389
|
"activeId": string;
|
|
390
390
|
/**
|
|
391
|
-
*
|
|
391
|
+
* Viewport width (px) below which the nav auto-collapses to icon-only mode. 0 = disabled.
|
|
392
|
+
* @default 0
|
|
393
|
+
*/
|
|
394
|
+
"breakpoint": number;
|
|
395
|
+
/**
|
|
396
|
+
* Whether the nav is in collapsed (icon-only) state. When `storageKey` is set the component manages this internally — do not also bind it from outside in that mode.
|
|
392
397
|
* @default false
|
|
393
398
|
*/
|
|
394
399
|
"collapsed": boolean;
|
|
400
|
+
/**
|
|
401
|
+
* Current route URL (e.g. `window.location.pathname` or the router's active URL). When set the component derives the active item by matching item `href` values against this string (longest prefix wins), overriding `activeId`.
|
|
402
|
+
* @default ''
|
|
403
|
+
*/
|
|
404
|
+
"currentUrl": string;
|
|
395
405
|
/**
|
|
396
406
|
* JSON string of `PanelNavGroup[]`
|
|
397
407
|
* @default '[]'
|
|
398
408
|
*/
|
|
399
409
|
"groups": string;
|
|
410
|
+
/**
|
|
411
|
+
* `localStorage` key used to persist the collapsed state across page loads. When set the component is self-managing for collapsed state; `dsNavToggle` still fires for consumers that want to observe the change.
|
|
412
|
+
* @default ''
|
|
413
|
+
*/
|
|
414
|
+
"storageKey": string;
|
|
400
415
|
/**
|
|
401
416
|
* Single character shown in the collapsed avatar
|
|
402
417
|
* @default ''
|
|
@@ -1543,15 +1558,25 @@ declare namespace LocalJSX {
|
|
|
1543
1558
|
}
|
|
1544
1559
|
interface DsPanelNav {
|
|
1545
1560
|
/**
|
|
1546
|
-
* ID of the currently active/selected nav item
|
|
1561
|
+
* ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set.
|
|
1547
1562
|
* @default ''
|
|
1548
1563
|
*/
|
|
1549
1564
|
"activeId"?: string;
|
|
1550
1565
|
/**
|
|
1551
|
-
*
|
|
1566
|
+
* Viewport width (px) below which the nav auto-collapses to icon-only mode. 0 = disabled.
|
|
1567
|
+
* @default 0
|
|
1568
|
+
*/
|
|
1569
|
+
"breakpoint"?: number;
|
|
1570
|
+
/**
|
|
1571
|
+
* Whether the nav is in collapsed (icon-only) state. When `storageKey` is set the component manages this internally — do not also bind it from outside in that mode.
|
|
1552
1572
|
* @default false
|
|
1553
1573
|
*/
|
|
1554
1574
|
"collapsed"?: boolean;
|
|
1575
|
+
/**
|
|
1576
|
+
* Current route URL (e.g. `window.location.pathname` or the router's active URL). When set the component derives the active item by matching item `href` values against this string (longest prefix wins), overriding `activeId`.
|
|
1577
|
+
* @default ''
|
|
1578
|
+
*/
|
|
1579
|
+
"currentUrl"?: string;
|
|
1555
1580
|
/**
|
|
1556
1581
|
* JSON string of `PanelNavGroup[]`
|
|
1557
1582
|
* @default '[]'
|
|
@@ -1569,6 +1594,11 @@ declare namespace LocalJSX {
|
|
|
1569
1594
|
* Emitted when the collapse toggle is clicked. Detail = new collapsed state.
|
|
1570
1595
|
*/
|
|
1571
1596
|
"onDsNavToggle"?: (event: DsPanelNavCustomEvent<boolean>) => void;
|
|
1597
|
+
/**
|
|
1598
|
+
* `localStorage` key used to persist the collapsed state across page loads. When set the component is self-managing for collapsed state; `dsNavToggle` still fires for consumers that want to observe the change.
|
|
1599
|
+
* @default ''
|
|
1600
|
+
*/
|
|
1601
|
+
"storageKey"?: string;
|
|
1572
1602
|
/**
|
|
1573
1603
|
* Single character shown in the collapsed avatar
|
|
1574
1604
|
* @default ''
|
|
@@ -2023,6 +2053,9 @@ declare namespace LocalJSX {
|
|
|
2023
2053
|
"groups": string;
|
|
2024
2054
|
"activeId": string;
|
|
2025
2055
|
"collapsed": boolean;
|
|
2056
|
+
"breakpoint": number;
|
|
2057
|
+
"storageKey": string;
|
|
2058
|
+
"currentUrl": string;
|
|
2026
2059
|
"userName": string;
|
|
2027
2060
|
"userInitial": string;
|
|
2028
2061
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ds-mo/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "CompoMo — composable web components styled with TokoMo design tokens",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components",
|
|
@@ -58,12 +58,13 @@
|
|
|
58
58
|
}
|
|
59
59
|
},
|
|
60
60
|
"devDependencies": {
|
|
61
|
-
"@ds-mo/icons": "^4.3.
|
|
62
|
-
"@ds-mo/tokens": "^2.
|
|
61
|
+
"@ds-mo/icons": "^4.3.1",
|
|
62
|
+
"@ds-mo/tokens": "^2.8.0",
|
|
63
63
|
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
64
64
|
"@stencil/angular-output-target": "^1.3.1",
|
|
65
65
|
"@stencil/core": "^4.43.4",
|
|
66
66
|
"@storybook/addon-docs": "^8.6.18",
|
|
67
|
+
"@storybook/addon-toolbars": "^8.6.18",
|
|
67
68
|
"@storybook/web-components": "^8.6.18",
|
|
68
69
|
"@storybook/web-components-vite": "^8.6.18",
|
|
69
70
|
"concurrently": "^9.2.1",
|
package/src/angular/proxies.ts
CHANGED
|
@@ -484,14 +484,14 @@ export declare interface DsPagination extends Components.DsPagination {
|
|
|
484
484
|
|
|
485
485
|
|
|
486
486
|
@ProxyCmp({
|
|
487
|
-
inputs: ['activeId', 'collapsed', 'groups', 'userInitial', 'userName', 'variant']
|
|
487
|
+
inputs: ['activeId', 'breakpoint', 'collapsed', 'currentUrl', 'groups', 'storageKey', 'userInitial', 'userName', 'variant']
|
|
488
488
|
})
|
|
489
489
|
@Component({
|
|
490
490
|
selector: 'ds-panel-nav',
|
|
491
491
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
492
492
|
template: '<ng-content></ng-content>',
|
|
493
493
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
494
|
-
inputs: ['activeId', 'collapsed', 'groups', 'userInitial', 'userName', 'variant'],
|
|
494
|
+
inputs: ['activeId', 'breakpoint', 'collapsed', 'currentUrl', 'groups', 'storageKey', 'userInitial', 'userName', 'variant'],
|
|
495
495
|
outputs: ['dsNavSelect', 'dsNavToggle', 'dsNavFooterAction'],
|
|
496
496
|
standalone: false
|
|
497
497
|
})
|
|
File without changes
|