@telcomdev/ui 0.1.41 → 0.1.43
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.
|
@@ -8350,6 +8350,8 @@ class TdTabs {
|
|
|
8350
8350
|
panelFocusable = false;
|
|
8351
8351
|
contentHeight = null;
|
|
8352
8352
|
scrollableContent = false;
|
|
8353
|
+
/** Mantiene fijo el encabezado y limita el scroll al panel activo. */
|
|
8354
|
+
scrollMode = 'auto';
|
|
8353
8355
|
actionsPlacement = 'header';
|
|
8354
8356
|
selectedIndexChange = new EventEmitter();
|
|
8355
8357
|
tabChange = new EventEmitter();
|
|
@@ -8468,16 +8470,18 @@ class TdTabs {
|
|
|
8468
8470
|
}
|
|
8469
8471
|
}
|
|
8470
8472
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8471
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdTabs, isStandalone: true, selector: "td-tabs", inputs: { selectedIndex: "selectedIndex", variant: "variant", alignment: "alignment", stretch: "stretch", dark: "dark", ariaLabel: "ariaLabel", panelFocusable: "panelFocusable", contentHeight: "contentHeight", scrollableContent: "scrollableContent", actionsPlacement: "actionsPlacement" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, queries: [{ propertyName: "tabQuery", predicate: TdTab }], viewQueries: [{ propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true }, { propertyName: "tabButtons", predicate: ["tabButton"], descendants: true }], ngImport: i0, template: `
|
|
8473
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdTabs, isStandalone: true, selector: "td-tabs", inputs: { selectedIndex: "selectedIndex", variant: "variant", alignment: "alignment", stretch: "stretch", dark: "dark", ariaLabel: "ariaLabel", panelFocusable: "panelFocusable", contentHeight: "contentHeight", scrollableContent: "scrollableContent", scrollMode: "scrollMode", actionsPlacement: "actionsPlacement" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, queries: [{ propertyName: "tabQuery", predicate: TdTab }], viewQueries: [{ propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true }, { propertyName: "tabButtons", predicate: ["tabButton"], descendants: true }], ngImport: i0, template: `
|
|
8472
8474
|
<section
|
|
8473
8475
|
class="td-tabs"
|
|
8474
8476
|
[class.td-tabs--dark]="dark"
|
|
8475
8477
|
[class.td-tabs--stretch]="stretch"
|
|
8476
8478
|
[class.td-tabs--panel-scrollable]="scrollableContent"
|
|
8479
|
+
[class.td-tabs--scroll-content]="scrollMode === 'content'"
|
|
8477
8480
|
[class.td-tabs--actions-footer]="actionsPlacement === 'footer'"
|
|
8478
8481
|
[class]="'td-tabs td-tabs--' + variant + ' td-tabs--align-' + alignment +
|
|
8479
8482
|
(dark ? ' td-tabs--dark' : '') + (stretch ? ' td-tabs--stretch' : '') +
|
|
8480
8483
|
(scrollableContent ? ' td-tabs--panel-scrollable' : '') +
|
|
8484
|
+
(scrollMode === 'content' ? ' td-tabs--scroll-content' : '') +
|
|
8481
8485
|
(actionsPlacement === 'footer' ? ' td-tabs--actions-footer' : '')"
|
|
8482
8486
|
[style.--td-tabs-panel-height]="contentHeight"
|
|
8483
8487
|
>
|
|
@@ -8536,7 +8540,7 @@ class TdTabs {
|
|
|
8536
8540
|
<ng-content select="[tdTabsActions]" />
|
|
8537
8541
|
</div>
|
|
8538
8542
|
</section>
|
|
8539
|
-
`, isInline: true, styles: ["
|
|
8543
|
+
`, isInline: true, styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: var(--td-color-surface, #fff);--td-tabs-soft: var(--td-color-surface-soft, #f7f8fb);--td-tabs-border: var(--td-color-border, #e3e7ef);--td-tabs-text: var(--td-color-text, #263147);--td-tabs-muted: var(--td-color-text-muted, #748096);--td-tabs-accent: var(--td-color-primary, #5746d8);display:grid;grid-template-columns:minmax(0,1fr) auto;min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: var(--td-color-surface, #19191f);--td-tabs-soft: var(--td-color-surface-soft, #202028);--td-tabs-border: var(--td-color-border, #303039);--td-tabs-text: var(--td-color-text, #ededf0);--td-tabs-muted: var(--td-color-text-muted, #a1a1aa);--td-tabs-accent: var(--td-color-primary, #b9b0fa)}.td-tabs__header{grid-column:1;grid-row:1;display:flex;min-width:0;align-items:center;gap:.75rem}.td-tabs__list{display:flex;width:100%;min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.5rem;scroll-snap-type:inline proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:safe center}.td-tabs--align-fin .td-tabs__list{justify-content:safe flex-end}.td-tabs__actions{grid-row:1;display:inline-flex;flex:0 0 auto;align-items:center;gap:.45rem;min-width:0;padding-inline:.25rem}.td-tabs__actions:empty{display:none}.td-tabs__actions--header{grid-column:2;align-self:center;justify-content:flex-end}.td-tabs__actions--footer{grid-column:1/-1;grid-row:3;justify-content:flex-end;padding:.5rem 0 0}.td-tabs--actions-footer .td-tabs__header{grid-column:1/-1}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .78rem/1 var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;scroll-snap-align:start;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:var(--td-radius-pill, 999px);padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__header,.td-tabs--linea .td-tabs__actions--header{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:var(--td-radius-pill, 999px) var(--td-radius-pill, 999px) 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:var(--td-radius-lg, .8rem);padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:var(--td-shadow-sm, 0 3px 10px rgba(15, 23, 42, .08))}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:var(--td-radius-lg, .9rem);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{padding:0 .45rem;background:transparent}.td-tabs--contenida .td-tabs__header{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:transparent}.td-tabs--contenida .td-tabs__panel{padding:1rem 1.25rem}.td-tabs--contenida .td-tabs__actions--footer{border-top:1px solid var(--td-tabs-border);padding:.6rem 1.25rem .85rem}.td-tabs__panel{grid-column:1/-1;grid-row:2;min-width:0;min-height:0;height:var(--td-tabs-panel-height, auto);padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}.td-tabs--panel-scrollable .td-tabs__panel{overflow:auto;overscroll-behavior:contain}.td-tabs--scroll-content .td-tabs__panel{height:var(--td-tabs-panel-height, auto);max-height:var(--td-tabs-panel-height, min(60dvh, 36rem));overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.td-tabs--actions-footer .td-tabs__panel{height:auto;max-height:var(--td-tabs-panel-height, none)}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}@media(max-width:600px){.td-tabs{grid-template-columns:minmax(0,1fr)}.td-tabs__header{grid-column:1/-1;flex-wrap:wrap;gap:.5rem}.td-tabs__list{flex-basis:100%;justify-content:flex-start!important}.td-tabs__actions--header{grid-column:1/-1;grid-row:1;width:100%;justify-content:flex-start;overflow-x:auto;padding-inline:0;scrollbar-width:none}.td-tabs:not(.td-tabs--actions-footer) .td-tabs__header{grid-row:2}.td-tabs__actions::-webkit-scrollbar{display:none}.td-tabs__actions--footer{flex-wrap:wrap;justify-content:stretch;padding-top:.75rem}.td-tabs__actions--footer ::ng-deep td-button{flex:1 1 auto}.td-tabs--stretch .td-tabs__tab{min-width:max-content;min-height:2.75rem;flex:0 0 auto}.td-tabs--contenida .td-tabs__list{padding-inline:.25rem}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8540
8544
|
}
|
|
8541
8545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdTabs, decorators: [{
|
|
8542
8546
|
type: Component,
|
|
@@ -8546,10 +8550,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
8546
8550
|
[class.td-tabs--dark]="dark"
|
|
8547
8551
|
[class.td-tabs--stretch]="stretch"
|
|
8548
8552
|
[class.td-tabs--panel-scrollable]="scrollableContent"
|
|
8553
|
+
[class.td-tabs--scroll-content]="scrollMode === 'content'"
|
|
8549
8554
|
[class.td-tabs--actions-footer]="actionsPlacement === 'footer'"
|
|
8550
8555
|
[class]="'td-tabs td-tabs--' + variant + ' td-tabs--align-' + alignment +
|
|
8551
8556
|
(dark ? ' td-tabs--dark' : '') + (stretch ? ' td-tabs--stretch' : '') +
|
|
8552
8557
|
(scrollableContent ? ' td-tabs--panel-scrollable' : '') +
|
|
8558
|
+
(scrollMode === 'content' ? ' td-tabs--scroll-content' : '') +
|
|
8553
8559
|
(actionsPlacement === 'footer' ? ' td-tabs--actions-footer' : '')"
|
|
8554
8560
|
[style.--td-tabs-panel-height]="contentHeight"
|
|
8555
8561
|
>
|
|
@@ -8608,7 +8614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
8608
8614
|
<ng-content select="[tdTabsActions]" />
|
|
8609
8615
|
</div>
|
|
8610
8616
|
</section>
|
|
8611
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["
|
|
8617
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";:host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: var(--td-color-surface, #fff);--td-tabs-soft: var(--td-color-surface-soft, #f7f8fb);--td-tabs-border: var(--td-color-border, #e3e7ef);--td-tabs-text: var(--td-color-text, #263147);--td-tabs-muted: var(--td-color-text-muted, #748096);--td-tabs-accent: var(--td-color-primary, #5746d8);display:grid;grid-template-columns:minmax(0,1fr) auto;min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: var(--td-color-surface, #19191f);--td-tabs-soft: var(--td-color-surface-soft, #202028);--td-tabs-border: var(--td-color-border, #303039);--td-tabs-text: var(--td-color-text, #ededf0);--td-tabs-muted: var(--td-color-text-muted, #a1a1aa);--td-tabs-accent: var(--td-color-primary, #b9b0fa)}.td-tabs__header{grid-column:1;grid-row:1;display:flex;min-width:0;align-items:center;gap:.75rem}.td-tabs__list{display:flex;width:100%;min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.5rem;scroll-snap-type:inline proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:safe center}.td-tabs--align-fin .td-tabs__list{justify-content:safe flex-end}.td-tabs__actions{grid-row:1;display:inline-flex;flex:0 0 auto;align-items:center;gap:.45rem;min-width:0;padding-inline:.25rem}.td-tabs__actions:empty{display:none}.td-tabs__actions--header{grid-column:2;align-self:center;justify-content:flex-end}.td-tabs__actions--footer{grid-column:1/-1;grid-row:3;justify-content:flex-end;padding:.5rem 0 0}.td-tabs--actions-footer .td-tabs__header{grid-column:1/-1}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .78rem/1 var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;scroll-snap-align:start;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:var(--td-radius-pill, 999px);padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__header,.td-tabs--linea .td-tabs__actions--header{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:var(--td-radius-pill, 999px) var(--td-radius-pill, 999px) 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:var(--td-radius-lg, .8rem);padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:var(--td-shadow-sm, 0 3px 10px rgba(15, 23, 42, .08))}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:var(--td-radius-lg, .9rem);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{padding:0 .45rem;background:transparent}.td-tabs--contenida .td-tabs__header{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:transparent}.td-tabs--contenida .td-tabs__panel{padding:1rem 1.25rem}.td-tabs--contenida .td-tabs__actions--footer{border-top:1px solid var(--td-tabs-border);padding:.6rem 1.25rem .85rem}.td-tabs__panel{grid-column:1/-1;grid-row:2;min-width:0;min-height:0;height:var(--td-tabs-panel-height, auto);padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}.td-tabs--panel-scrollable .td-tabs__panel{overflow:auto;overscroll-behavior:contain}.td-tabs--scroll-content .td-tabs__panel{height:var(--td-tabs-panel-height, auto);max-height:var(--td-tabs-panel-height, min(60dvh, 36rem));overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.td-tabs--actions-footer .td-tabs__panel{height:auto;max-height:var(--td-tabs-panel-height, none)}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}@media(max-width:600px){.td-tabs{grid-template-columns:minmax(0,1fr)}.td-tabs__header{grid-column:1/-1;flex-wrap:wrap;gap:.5rem}.td-tabs__list{flex-basis:100%;justify-content:flex-start!important}.td-tabs__actions--header{grid-column:1/-1;grid-row:1;width:100%;justify-content:flex-start;overflow-x:auto;padding-inline:0;scrollbar-width:none}.td-tabs:not(.td-tabs--actions-footer) .td-tabs__header{grid-row:2}.td-tabs__actions::-webkit-scrollbar{display:none}.td-tabs__actions--footer{flex-wrap:wrap;justify-content:stretch;padding-top:.75rem}.td-tabs__actions--footer ::ng-deep td-button{flex:1 1 auto}.td-tabs--stretch .td-tabs__tab{min-width:max-content;min-height:2.75rem;flex:0 0 auto}.td-tabs--contenida .td-tabs__list{padding-inline:.25rem}}\n"] }]
|
|
8612
8618
|
}], propDecorators: { tabQuery: [{
|
|
8613
8619
|
type: ContentChildren,
|
|
8614
8620
|
args: [TdTab]
|
|
@@ -8636,6 +8642,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
8636
8642
|
type: Input
|
|
8637
8643
|
}], scrollableContent: [{
|
|
8638
8644
|
type: Input
|
|
8645
|
+
}], scrollMode: [{
|
|
8646
|
+
type: Input
|
|
8639
8647
|
}], actionsPlacement: [{
|
|
8640
8648
|
type: Input
|
|
8641
8649
|
}], selectedIndexChange: [{
|