@jigisha_ruparel/taf-client-tabs-angular 0.1.0 → 0.1.1
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.
|
@@ -113,7 +113,7 @@ class TafTabsComponent {
|
|
|
113
113
|
|
|
114
114
|
<ng-content select="[tafTabsEnd]"></ng-content>
|
|
115
115
|
</div>
|
|
116
|
-
`, isInline: true, styles: ["
|
|
116
|
+
`, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
117
117
|
}
|
|
118
118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: TafTabsComponent, decorators: [{
|
|
119
119
|
type: Component,
|
|
@@ -165,7 +165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
|
|
|
165
165
|
|
|
166
166
|
<ng-content select="[tafTabsEnd]"></ng-content>
|
|
167
167
|
</div>
|
|
168
|
-
`, styles: ["
|
|
168
|
+
`, styles: [":host{display:contents}\n"] }]
|
|
169
169
|
}], propDecorators: { stripRef: [{
|
|
170
170
|
type: ViewChild,
|
|
171
171
|
args: ['strip']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jigisha_ruparel-taf-client-tabs-angular.mjs","sources":["../../src/taf-tabs.component.ts","../../src/jigisha_ruparel-taf-client-tabs-angular.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n ViewChild,\n booleanAttribute,\n inject,\n} from '@angular/core';\nimport type { AfterViewInit } from '@angular/core';\n\n/** One tab. `key` is what `active` matches and what the outputs emit. */\nexport interface TafTab {\n key: string;\n label: string;\n /** A count beside the label — how many rows sit behind this tab. */\n count?: number;\n /** A leading glyph or icon ligature. */\n icon?: string;\n disabled?: boolean;\n /** Shows a ✕ on this tab; closing is the host's decision, via `(closeTab)`. */\n closeable?: boolean;\n /** A title attribute, where the label is truncated. */\n hint?: string;\n}\n\n/**\n * `<taf-tabs>` — the strip of tabs above a panel. It renders the strip only; the host still decides\n * what the active tab shows, which is how these screens are already written.\n *\n * The strip owns no state: it renders `[active]` and emits `(activeChange)`, so a host keeps the\n * signal or route param it already has. Closing is the same — `(closeTab)` fires and the host\n * decides whether the tab actually goes.\n *\n * `scrollable` adds the overflow affordance a long strip needs: the arrows appear only when the\n * strip actually overflows, and scroll it by roughly a tab's width.\n *\n * Ships NO theme — `taf-tabs__*` class hooks plus `data-active` / `data-variant`, so the host app\n * decides whether a tab reads as an underline, a pill or a filled strip.\n */\n@Component({\n selector: 'taf-tabs',\n standalone: true,\n imports: [CommonModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <div class=\"taf-tabs\" [attr.data-variant]=\"variant || null\">\n <button\n *ngIf=\"scrollable && overflowing\"\n type=\"button\"\n class=\"taf-tabs__arrow taf-tabs__arrow--start\"\n aria-label=\"Scroll tabs left\"\n (click)=\"scrollBy(-1)\"\n >‹</button>\n\n <div class=\"taf-tabs__strip\" role=\"tablist\" #strip (scroll)=\"syncOverflow()\">\n <button\n *ngFor=\"let t of tabs; trackBy: trackKey\"\n type=\"button\"\n role=\"tab\"\n class=\"taf-tabs__tab\"\n [attr.data-key]=\"t.key\"\n [attr.data-active]=\"t.key === active ? '' : null\"\n [attr.aria-selected]=\"t.key === active\"\n [attr.title]=\"t.hint || null\"\n [disabled]=\"!!t.disabled\"\n (click)=\"pick(t)\"\n >\n <span class=\"taf-tabs__icon\" *ngIf=\"t.icon\" aria-hidden=\"true\">{{ t.icon }}</span>\n <span class=\"taf-tabs__label\">{{ t.label }}</span>\n <span class=\"taf-tabs__count\" *ngIf=\"t.count !== undefined\">{{ t.count }}</span>\n <span\n *ngIf=\"t.closeable && !readonly\"\n class=\"taf-tabs__close\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"'Close ' + t.label\"\n (click)=\"close($event, t)\"\n (keydown.enter)=\"close($event, t)\"\n >✕</span>\n </button>\n </div>\n\n <button\n *ngIf=\"scrollable && overflowing\"\n type=\"button\"\n class=\"taf-tabs__arrow taf-tabs__arrow--end\"\n aria-label=\"Scroll tabs right\"\n (click)=\"scrollBy(1)\"\n >›</button>\n\n <ng-content select=\"[tafTabsEnd]\"></ng-content>\n </div>\n `,\n styles: [\n `\n taf-tabs { display: contents; }\n `,\n ],\n})\nexport class TafTabsComponent implements AfterViewInit {\n @ViewChild('strip') private stripRef?: ElementRef<HTMLElement>;\n private readonly cdr = inject(ChangeDetectorRef);\n\n @Input() tabs: readonly TafTab[] = [];\n /** The active tab's `key`. */\n @Input() active = '';\n /** Surfaces as `data-variant` — the host theme decides what each looks like. */\n @Input() variant = '';\n /** Show arrows and scroll the strip when it overflows. */\n @Input({ transform: booleanAttribute }) scrollable = false;\n /** Hide every close affordance, for a strip the user may read but not change. */\n @Input({ transform: booleanAttribute }) readonly = false;\n\n @Output() readonly activeChange = new EventEmitter<string>();\n /** A tab's ✕ was pressed. The host decides whether it closes. */\n @Output() readonly closeTab = new EventEmitter<string>();\n\n protected overflowing = false;\n\n protected trackKey = (_: number, t: TafTab) => t.key;\n\n ngAfterViewInit(): void {\n this.syncOverflow();\n }\n\n protected syncOverflow(): void {\n const el = this.stripRef?.nativeElement;\n if (!el) return;\n const next = el.scrollWidth > el.clientWidth + 1;\n if (next !== this.overflowing) {\n this.overflowing = next;\n // OnPush: the arrows appear as a result of a measurement, not of an input changing.\n this.cdr.markForCheck();\n }\n }\n\n protected scrollBy(direction: 1 | -1): void {\n const el = this.stripRef?.nativeElement;\n if (!el) return;\n const tab = el.querySelector<HTMLElement>('.taf-tabs__tab');\n el.scrollBy({ left: direction * (tab?.offsetWidth ?? 120), behavior: 'smooth' });\n }\n\n protected pick(t: TafTab): void {\n if (t.disabled || t.key === this.active) return;\n this.activeChange.emit(t.key);\n }\n\n protected close(event: Event, t: TafTab): void {\n event.stopPropagation();\n this.closeTab.emit(t.key);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AA8BA;;;;;;;;;;;;;AAaG;
|
|
1
|
+
{"version":3,"file":"jigisha_ruparel-taf-client-tabs-angular.mjs","sources":["../../src/taf-tabs.component.ts","../../src/jigisha_ruparel-taf-client-tabs-angular.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n Output,\n ViewChild,\n booleanAttribute,\n inject,\n} from '@angular/core';\nimport type { AfterViewInit } from '@angular/core';\n\n/** One tab. `key` is what `active` matches and what the outputs emit. */\nexport interface TafTab {\n key: string;\n label: string;\n /** A count beside the label — how many rows sit behind this tab. */\n count?: number;\n /** A leading glyph or icon ligature. */\n icon?: string;\n disabled?: boolean;\n /** Shows a ✕ on this tab; closing is the host's decision, via `(closeTab)`. */\n closeable?: boolean;\n /** A title attribute, where the label is truncated. */\n hint?: string;\n}\n\n/**\n * `<taf-tabs>` — the strip of tabs above a panel. It renders the strip only; the host still decides\n * what the active tab shows, which is how these screens are already written.\n *\n * The strip owns no state: it renders `[active]` and emits `(activeChange)`, so a host keeps the\n * signal or route param it already has. Closing is the same — `(closeTab)` fires and the host\n * decides whether the tab actually goes.\n *\n * `scrollable` adds the overflow affordance a long strip needs: the arrows appear only when the\n * strip actually overflows, and scroll it by roughly a tab's width.\n *\n * Ships NO theme — `taf-tabs__*` class hooks plus `data-active` / `data-variant`, so the host app\n * decides whether a tab reads as an underline, a pill or a filled strip.\n */\n@Component({\n selector: 'taf-tabs',\n standalone: true,\n imports: [CommonModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <div class=\"taf-tabs\" [attr.data-variant]=\"variant || null\">\n <button\n *ngIf=\"scrollable && overflowing\"\n type=\"button\"\n class=\"taf-tabs__arrow taf-tabs__arrow--start\"\n aria-label=\"Scroll tabs left\"\n (click)=\"scrollBy(-1)\"\n >‹</button>\n\n <div class=\"taf-tabs__strip\" role=\"tablist\" #strip (scroll)=\"syncOverflow()\">\n <button\n *ngFor=\"let t of tabs; trackBy: trackKey\"\n type=\"button\"\n role=\"tab\"\n class=\"taf-tabs__tab\"\n [attr.data-key]=\"t.key\"\n [attr.data-active]=\"t.key === active ? '' : null\"\n [attr.aria-selected]=\"t.key === active\"\n [attr.title]=\"t.hint || null\"\n [disabled]=\"!!t.disabled\"\n (click)=\"pick(t)\"\n >\n <span class=\"taf-tabs__icon\" *ngIf=\"t.icon\" aria-hidden=\"true\">{{ t.icon }}</span>\n <span class=\"taf-tabs__label\">{{ t.label }}</span>\n <span class=\"taf-tabs__count\" *ngIf=\"t.count !== undefined\">{{ t.count }}</span>\n <span\n *ngIf=\"t.closeable && !readonly\"\n class=\"taf-tabs__close\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"'Close ' + t.label\"\n (click)=\"close($event, t)\"\n (keydown.enter)=\"close($event, t)\"\n >✕</span>\n </button>\n </div>\n\n <button\n *ngIf=\"scrollable && overflowing\"\n type=\"button\"\n class=\"taf-tabs__arrow taf-tabs__arrow--end\"\n aria-label=\"Scroll tabs right\"\n (click)=\"scrollBy(1)\"\n >›</button>\n\n <ng-content select=\"[tafTabsEnd]\"></ng-content>\n </div>\n `,\n styles: [\n `\n /* :host, NOT the element name. Under the default emulated encapsulation Angular rewrites\n a style's selector by appending [_ngcontent-<id>], and a component host never carries its\n OWN _ngcontent -- it carries _nghost-<own> plus its PARENT's _ngcontent. So writing the\n element name here compiled to a selector that could not match, so this host fell back to\n its initial display for every release up to this one -- inline in block flow, and\n blockified to block inside a flex or grid parent, which is a shorter distance from\n contents than inline is and is why measuring found nothing moves. Confirmed in a\n built bundle: the injected stylesheet was taf-tabs[_ngcontent-%COMP%]{display:contents}, while\n the bare rule that also appears there is in the dev-only setClassMetadata block and is\n never applied. :host becomes [_nghost-<own>], which does match.\n (Backticks are deliberately absent from this comment: it sits inside a template literal,\n and a backtick here would terminate it -- which is exactly how this edit failed once.) */\n :host { display: contents; }\n `,\n ],\n})\nexport class TafTabsComponent implements AfterViewInit {\n @ViewChild('strip') private stripRef?: ElementRef<HTMLElement>;\n private readonly cdr = inject(ChangeDetectorRef);\n\n @Input() tabs: readonly TafTab[] = [];\n /** The active tab's `key`. */\n @Input() active = '';\n /** Surfaces as `data-variant` — the host theme decides what each looks like. */\n @Input() variant = '';\n /** Show arrows and scroll the strip when it overflows. */\n @Input({ transform: booleanAttribute }) scrollable = false;\n /** Hide every close affordance, for a strip the user may read but not change. */\n @Input({ transform: booleanAttribute }) readonly = false;\n\n @Output() readonly activeChange = new EventEmitter<string>();\n /** A tab's ✕ was pressed. The host decides whether it closes. */\n @Output() readonly closeTab = new EventEmitter<string>();\n\n protected overflowing = false;\n\n protected trackKey = (_: number, t: TafTab) => t.key;\n\n ngAfterViewInit(): void {\n this.syncOverflow();\n }\n\n protected syncOverflow(): void {\n const el = this.stripRef?.nativeElement;\n if (!el) return;\n const next = el.scrollWidth > el.clientWidth + 1;\n if (next !== this.overflowing) {\n this.overflowing = next;\n // OnPush: the arrows appear as a result of a measurement, not of an input changing.\n this.cdr.markForCheck();\n }\n }\n\n protected scrollBy(direction: 1 | -1): void {\n const el = this.stripRef?.nativeElement;\n if (!el) return;\n const tab = el.querySelector<HTMLElement>('.taf-tabs__tab');\n el.scrollBy({ left: direction * (tab?.offsetWidth ?? 120), behavior: 'smooth' });\n }\n\n protected pick(t: TafTab): void {\n if (t.disabled || t.key === this.active) return;\n this.activeChange.emit(t.key);\n }\n\n protected close(event: Event, t: TafTab): void {\n event.stopPropagation();\n this.closeTab.emit(t.key);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED