@telekom/scale-components
Version:
Scale is the digital design system for Telekom products and experiences.
1 lines • 6.31 kB
JavaScript
import{r as t,h as o,a,g as r}from"./p-d52b3602.js";import{c as e}from"./p-c608c6dc.js";import{s}from"./p-c5a89792.js";const i=class{constructor(o){t(this,o),this.showSort=!1,this.striped=!1,this.slots={}}componentWillLoad(){this.hostElement.querySelectorAll("th").forEach((t=>{t.insertAdjacentHTML("afterbegin",'\n <span class="scale-sort-indicator" aria-hidden="true">\n <scale-icon-content-sort-indicator-up class="scale-sort-indicator-icon up" size="16"></scale-icon-content-sort-indicator-up>\n <scale-icon-content-sort-indicator-down class="scale-sort-indicator-icon down" size="16"></scale-icon-content-sort-indicator-down>\n </span>')}))}componentDidLoad(){const t=this.hostElement.querySelectorAll("scale-progress-bar");t&&t.forEach((t=>{t.showStatus=!1}))}componentDidRender(){this.size&&s({tag:"deprecated",message:'Property "size" is deprecated. Please use css overwrites for a small version!',type:"warn",source:this.hostElement})}render(){return o(a,{class:this.getCssClassMap()},this.styles&&o("style",null,this.styles),o("slot",null))}getCssClassMap(){return e("table",this.showSort&&"table--sortable",this.striped&&"table--striped")}get hostElement(){return r(this)}};i.style="scale-table{--radius:var(--telekom-radius-standard) var(--telekom-radius-standard) 0 0;--background:var(--telekom-color-ui-state-fill-standard);--color:var(--telekom-color-text-and-icon-standard);--color-hover:var(--telekom-color-text-and-icon-primary-hovered);--color-active:var(--telekom-color-text-and-icon-primary-pressed);--font-size:var(--telekom-typography-font-size-small);--font-weight:var(--telekom-typography-font-weight-bold);--spacing-tbody-td:var(--telekom-spacing-composition-space-06)\n var(--telekom-spacing-composition-space-04);--border-bottom-tbody-td:var(--telekom-spacing-composition-space-01) solid\n var(--telekom-color-ui-faint);--background-tbody:var(--telekom-color-ui-state-fill-standard);--background-tbody-tr-hover:var(--telekom-color-ui-state-fill-hovered);--background-tfoot:var(--telekom-color-ui-state-fill-standard);--border-bottom-tfoot-td:var(--telekom-spacing-composition-space-01) solid\n var(--telekom-color-ui-extra-strong);--spacing-th-sortable:0 var(--telekom-spacing-composition-space-04) 0 0;--background-th-sortable-hover:var(--telekom-color-ui-subtle);--background-th-sortable-active:var(--telekom-color-ui-faint);--box-shadow-th-sortable-focus:inset 0 0 0\n var(--telekom-spacing-composition-space-02)\n var(--telekom-color-functional-focus-standard);--background-tr-striped:var(--telekom-color-ui-subtle);--padding:var(--telekom-spacing-composition-space-00)\n var(--telekom-spacing-composition-space-04)}.table{display:block;overflow:auto;border-radius:var(--radius);background:var(--background);color:var(--color)}.table table{width:100%;white-space:nowrap;border-spacing:0;border-collapse:collapse}.table th{padding:var(--padding);text-align:left;line-height:32px;color:var(--color);font-size:var(--font-size);background:var(--telekom-color-background-surface-subtle)}.table td{padding:var(--padding)}.table tbody tr td{padding:8px}.table tbody td{border-bottom:var(--border-bottom-tbody-td)}.table thead tr th:last-of-type,.table tbody tr td:last-of-type,.table tfoot tr td:last-of-type{padding-right:12px}.table tfoot{background:var(--background-tfoot)}.table tbody{background:var(--background-tbody)}.table tfoot tr td{padding:8px;font-weight:var(--font-weight);border-bottom:var(--border-bottom-tfoot-td)}.table .scale-sort-indicator-icon{display:none !important}.table tbody tr:hover{background:var(--background-tbody-tr-hover)}.table th:focus{outline:none}.table--size-default tbody tr td{padding:var(--spacing-tbody-td)}.table--sortable th{cursor:pointer;padding:var(--spacing-th-sortable)}.table--sortable th:hover{padding:var(--spacing-th-sortable);background:var(--background-th-sortable-hover)}.table--sortable th:active{background:var(--background-th-sortable-active)}.table--sortable th:focus{box-shadow:var(--box-shadow-th-sortable-focus);border-radius:var(--radius)}.table--sortable th .scale-sort-indicator-icon{display:inline-flex !important}.table--sortable th[aria-disabled]{padding:var(--padding);pointer-events:none}.table--sortable th:not([aria-sort]){padding:var(--padding)}.table--sortable th[aria-sort='none']{padding:var(--padding)}.table--sortable th[aria-sort='ascending'] .scale-sort-indicator .up{color:var(--color)}.table--sortable th:hover .scale-sort-indicator .up{color:var(--color-hover)}.table--sortable th:hover[aria-sort='ascending'] .scale-sort-indicator-icon.up{color:var(--color-hover)}.table--sortable th:active[aria-sort='ascending'] .scale-sort-indicator-icon.up{color:var(--color-active)}.table--sortable th[aria-sort='ascending'] .scale-sort-indicator{color:transparent}.table--sortable th:hover[aria-sort='ascending'] .scale-sort-indicator{color:transparent}.table--sortable th:active[aria-sort='ascending'] .scale-sort-indicator{color:transparent}.table--sortable th[aria-sort='descending'] .scale-sort-indicator-icon.up{color:transparent}.table--sortable th:hover[aria-sort='descending'] .scale-sort-indicator-icon.up{color:transparent}.table--sortable th:active[aria-sort='descending'] .scale-sort-indicator-icon.up{color:transparent}.table--sortable th[aria-sort='descending'] .scale-sort-indicator-icon{color:var(--color)}.table--sortable th:hover[aria-sort='descending'] .scale-sort-indicator-icon{color:var(--color-hover)}.table--sortable th:active[aria-sort='descending'] .scale-sort-indicator-icon{color:var(--color-active)}.table--sortable th .scale-sort-indicator{width:16px;height:16px;margin:0 0 0 4px;display:inline-block;position:relative}.table--sortable th .scale-sort-indicator-icon{top:4px;left:0;width:16px;height:16px;position:absolute}.table--sortable th .scale-sort-indicator{color:transparent}.table--sortable th[aria-sort='none']:hover{padding:0 8px 0 0}.table--sortable th[aria-sort='none'] .scale-sort-indicator{display:none}.table--sortable th:not([aria-sort]):hover{padding:0 8px 0 0}.table--sortable th:not([aria-sort]) .scale-sort-indicator{display:none}.table--sortable th:hover .scale-sort-indicator{display:inline-block}.table--striped table tr:nth-child(even){background:var(--background-tr-striped)}";export{i as scale_table}