@taiga-ui/kit
Version:
Taiga UI Angular main components kit
117 lines (112 loc) • 20.9 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, contentChildren, ElementRef, Directive, input, model, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { WA_CSS } from '@ng-web-apis/common';
import { WaResizeObserverService } from '@ng-web-apis/resize-observer';
import { TUI_VERSION } from '@taiga-ui/cdk/constants';
import { tuiControlValue, tuiZonefree } from '@taiga-ui/cdk/observables';
import { tuiCreateOptions } from '@taiga-ui/cdk/utils/di';
import { tuiInjectElement, tuiIsHTMLElement } from '@taiga-ui/cdk/utils/dom';
import { tuiGenerateId, tuiPx } from '@taiga-ui/cdk/utils/miscellaneous';
import { tuiBadgeNotificationOptionsProvider } from '@taiga-ui/kit/components/badge-notification';
import { NgControl, RadioControlValueAccessor } from '@angular/forms';
import { RouterLinkActive } from '@angular/router';
import { switchMap, map } from 'rxjs';
class TuiSegmentedDirective {
constructor() {
this.component = inject(TuiSegmented);
this.el = tuiInjectElement();
this.links = contentChildren(RouterLinkActive);
this.elements = contentChildren(RouterLinkActive, { read: ElementRef });
this.controls = contentChildren(NgControl, { descendants: true });
this.controls$ = toObservable(this.controls);
this.radios = contentChildren(RadioControlValueAccessor, {
descendants: true,
});
}
ngAfterContentInit() {
this.controls$
.pipe(switchMap(([control]) => tuiControlValue(control)), map((value) => this.radios().findIndex((c) => c.value === value)))
.subscribe((index) => {
this.component.update(index);
});
}
ngAfterContentChecked() {
const index = this.links().findIndex(({ isActive }) => isActive);
if (index !== -1) {
this.update(this.elements()[index]?.nativeElement || null);
}
}
update(target) {
this.component.update(Array.from(this.el.children).findIndex((tab) => tab.contains(target)));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiSegmentedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.21", type: TuiSegmentedDirective, isStandalone: true, host: { listeners: { "click": "update($event.target)" } }, queries: [{ propertyName: "links", predicate: RouterLinkActive, isSignal: true }, { propertyName: "elements", predicate: RouterLinkActive, read: ElementRef, isSignal: true }, { propertyName: "controls", predicate: NgControl, descendants: true, isSignal: true }, { propertyName: "radios", predicate: RadioControlValueAccessor, descendants: true, isSignal: true }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiSegmentedDirective, decorators: [{
type: Directive,
args: [{ host: { '(click)': 'update($event.target)' } }]
}] });
const [TUI_SEGMENTED_OPTIONS, tuiSegmentedOptionsProvider] = tuiCreateOptions({
size: 's',
});
class TuiSegmented {
constructor() {
this.legacy = !inject(WA_CSS).supports('anchor-name', '--t-anchor');
this.el = tuiInjectElement();
this.anchorId = `--${tuiGenerateId()}`;
this.sub = inject(WaResizeObserverService, { self: true })
.pipe(tuiZonefree(), takeUntilDestroyed())
.subscribe(() => this.refresh());
this.size = input(inject(TUI_SEGMENTED_OPTIONS).size);
this.activeItemIndex = model(0);
this.disabled = input(false);
}
ngOnChanges() {
this.refresh();
}
update(activeItemIndex) {
if (activeItemIndex === this.activeItemIndex() || activeItemIndex < 0) {
return;
}
this.activeItemIndex.set(activeItemIndex);
this.refresh();
}
refresh() {
const el = this.el.children.item(this.activeItemIndex());
if (!tuiIsHTMLElement(el)) {
return;
}
Array.from(this.el.children).forEach((e) => e.classList.remove('tui-segmented_active'));
el.classList.add('tui-segmented_active');
if (!this.legacy) {
return;
}
const { offsetWidth, offsetLeft, offsetTop } = el;
this.el.style.setProperty('--t-top', tuiPx(offsetTop));
this.el.style.setProperty('--t-left', tuiPx(offsetLeft));
this.el.style.setProperty('--t-width', tuiPx(offsetWidth));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiSegmented, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: TuiSegmented, isStandalone: true, selector: "tui-segmented", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, activeItemIndex: { classPropertyName: "activeItemIndex", publicName: "activeItemIndex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemIndex: "activeItemIndexChange" }, host: { attributes: { "data-tui-version": "5.7.0" }, properties: { "attr.data-size": "size()", "attr.inert": "disabled() ? \"\" : null", "style.--t-anchor": "anchorId" } }, providers: [
WaResizeObserverService,
tuiBadgeNotificationOptionsProvider({ size: 's' }),
], usesOnChanges: true, hostDirectives: [{ directive: TuiSegmentedDirective }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["tui-segmented:where(*[data-tui-version=\"5.7.0\"]){position:relative;display:flex;flex-shrink:0;color:var(--tui-background-base);background:var(--tui-background-neutral-1);overflow:hidden;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}tui-segmented:where(*[data-tui-version=\"5.7.0\"])[data-size=s]{--t-padding: .5rem;--t-gap: .5rem;--t-margin: -.125rem;--t-height: var(--tui-height-s);font:var(--tui-typography-body-s);border-radius:var(--tui-radius-m)}tui-segmented:where(*[data-tui-version=\"5.7.0\"])[data-size=s] tui-icon{font-size:1rem}tui-segmented:where(*[data-tui-version=\"5.7.0\"])[data-size=m]{--t-padding: .875rem;--t-gap: 1rem;--t-margin: -.375rem;--t-height: var(--tui-height-m);font:var(--tui-typography-body-m);border-radius:var(--tui-radius-m)}tui-segmented:where(*[data-tui-version=\"5.7.0\"])[data-size=l]{--t-padding: 1.25rem;--t-gap: 1rem;--t-margin: -.375rem;--t-height: var(--tui-height-l);font:var(--tui-typography-body-l);border-radius:var(--tui-radius-l)}tui-segmented:where(*[data-tui-version=\"5.7.0\"])[data-size=l]>*:before{block-size:1.25rem}tui-segmented:where(*[data-tui-version=\"5.7.0\"])[inert]{opacity:var(--tui-disabled-opacity);pointer-events:none}tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]){transition-property:color,background,opacity,border-image;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;line-height:inherit;text-decoration:none;position:relative;display:flex;align-items:center;justify-content:center;block-size:var(--t-height);white-space:nowrap;gap:var(--t-gap);margin:0;padding:0 var(--t-padding);color:var(--tui-text-primary);overflow:hidden;cursor:pointer;font:inherit;border-radius:inherit;border:.125rem solid transparent;background-clip:padding-box;box-sizing:border-box;border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 0 0 100 .5;clip-path:polygon(-1rem calc(50% - .5rem),1px calc(50% - .5rem),1px 0,100% 0,100% 100%,1px 100%,1px calc(50% + .5rem),-1rem calc(50% + .5rem))}tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a>*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button>*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio])>*{margin:0 var(--t-margin)}tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a:focus-visible,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button:focus-visible,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label:focus-visible,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]):focus-visible{outline:.125rem solid var(--tui-border-focus);outline-offset:-.25rem}@media(hover:hover)and (pointer:fine){tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a:not(.tui-segmented_active):not(:active):hover,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button:not(.tui-segmented_active):not(:active):hover,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label:not(.tui-segmented_active):not(:active):hover,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover{background-color:var(--tui-background-neutral-1-hover)}tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a:not(.tui-segmented_active):not(:active):hover,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button:not(.tui-segmented_active):not(:active):hover,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label:not(.tui-segmented_active):not(:active):hover,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a:not(.tui-segmented_active):not(:active):hover+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button:not(.tui-segmented_active):not(:active):hover+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label:not(.tui-segmented_active):not(:active):hover+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover+*{border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 100 0 0 .5}}tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a:active,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button:active,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label:active,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]):active,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a:active+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button:active+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label:active+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]):active+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a.tui-segmented_active,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button.tui-segmented_active,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label.tui-segmented_active,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]).tui-segmented_active,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a.tui-segmented_active+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button.tui-segmented_active+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label.tui-segmented_active+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]).tui-segmented_active+*{border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 100 0 0 .5}tui-segmented:where(*[data-tui-version=\"5.7.0\"])>.tui-segmented_active{anchor-name:var(--t-anchor)}tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]){position:absolute;inset:-.125rem;background:transparent!important}tui-segmented:where(*[data-tui-version=\"5.7.0\"]):before{transition-property:inset,inline-size;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;inset:var(--t-top) auto auto var(--t-left);inset:anchor(start);position-anchor:var(--t-anchor);block-size:var(--t-height);inline-size:var(--t-width);inline-size:anchor-size(inline);border-radius:inherit;background:currentColor;background-clip:padding-box;border:.125rem solid transparent;box-sizing:border-box;filter:drop-shadow(0 .25rem 1.25rem rgba(0,0,0,.1))}@supports not (anchor-name: --t-anchor){[dir=rtl] tui-segmented:where(*[data-tui-version=\"5.7.0\"]):before{inset-inline:auto var(--t-left)}}[tuiTheme=dark] tui-segmented:where(*[data-tui-version=\"5.7.0\"]),tui-segmented[tuiTheme=dark]:where(*[data-tui-version=\"5.7.0\"]){--tui-background-base: var(--tui-background-neutral-1-hover)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiSegmented, decorators: [{
type: Component,
args: [{ selector: 'tui-segmented', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
WaResizeObserverService,
tuiBadgeNotificationOptionsProvider({ size: 's' }),
], hostDirectives: [TuiSegmentedDirective], host: {
'data-tui-version': TUI_VERSION,
'[attr.data-size]': 'size()',
'[attr.inert]': 'disabled() ? "" : null',
'[style.--t-anchor]': 'anchorId',
}, styles: ["tui-segmented:where(*[data-tui-version=\"5.7.0\"]){position:relative;display:flex;flex-shrink:0;color:var(--tui-background-base);background:var(--tui-background-neutral-1);overflow:hidden;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}tui-segmented:where(*[data-tui-version=\"5.7.0\"])[data-size=s]{--t-padding: .5rem;--t-gap: .5rem;--t-margin: -.125rem;--t-height: var(--tui-height-s);font:var(--tui-typography-body-s);border-radius:var(--tui-radius-m)}tui-segmented:where(*[data-tui-version=\"5.7.0\"])[data-size=s] tui-icon{font-size:1rem}tui-segmented:where(*[data-tui-version=\"5.7.0\"])[data-size=m]{--t-padding: .875rem;--t-gap: 1rem;--t-margin: -.375rem;--t-height: var(--tui-height-m);font:var(--tui-typography-body-m);border-radius:var(--tui-radius-m)}tui-segmented:where(*[data-tui-version=\"5.7.0\"])[data-size=l]{--t-padding: 1.25rem;--t-gap: 1rem;--t-margin: -.375rem;--t-height: var(--tui-height-l);font:var(--tui-typography-body-l);border-radius:var(--tui-radius-l)}tui-segmented:where(*[data-tui-version=\"5.7.0\"])[data-size=l]>*:before{block-size:1.25rem}tui-segmented:where(*[data-tui-version=\"5.7.0\"])[inert]{opacity:var(--tui-disabled-opacity);pointer-events:none}tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]){transition-property:color,background,opacity,border-image;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;line-height:inherit;text-decoration:none;position:relative;display:flex;align-items:center;justify-content:center;block-size:var(--t-height);white-space:nowrap;gap:var(--t-gap);margin:0;padding:0 var(--t-padding);color:var(--tui-text-primary);overflow:hidden;cursor:pointer;font:inherit;border-radius:inherit;border:.125rem solid transparent;background-clip:padding-box;box-sizing:border-box;border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 0 0 100 .5;clip-path:polygon(-1rem calc(50% - .5rem),1px calc(50% - .5rem),1px 0,100% 0,100% 100%,1px 100%,1px calc(50% + .5rem),-1rem calc(50% + .5rem))}tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a>*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button>*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio])>*{margin:0 var(--t-margin)}tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a:focus-visible,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button:focus-visible,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label:focus-visible,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]):focus-visible{outline:.125rem solid var(--tui-border-focus);outline-offset:-.25rem}@media(hover:hover)and (pointer:fine){tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a:not(.tui-segmented_active):not(:active):hover,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button:not(.tui-segmented_active):not(:active):hover,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label:not(.tui-segmented_active):not(:active):hover,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover{background-color:var(--tui-background-neutral-1-hover)}tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a:not(.tui-segmented_active):not(:active):hover,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button:not(.tui-segmented_active):not(:active):hover,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label:not(.tui-segmented_active):not(:active):hover,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a:not(.tui-segmented_active):not(:active):hover+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button:not(.tui-segmented_active):not(:active):hover+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label:not(.tui-segmented_active):not(:active):hover+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]):not(.tui-segmented_active):not(:active):hover+*{border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 100 0 0 .5}}tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a:active,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button:active,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label:active,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]):active,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a:active+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button:active+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label:active+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]):active+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a.tui-segmented_active,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button.tui-segmented_active,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label.tui-segmented_active,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]).tui-segmented_active,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>a.tui-segmented_active+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>button.tui-segmented_active+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label.tui-segmented_active+*,tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]).tui-segmented_active+*{border-image:linear-gradient(var(--tui-border-normal),transparent) 1 / 0 0 25% .5 / 100 0 0 .5}tui-segmented:where(*[data-tui-version=\"5.7.0\"])>.tui-segmented_active{anchor-name:var(--t-anchor)}tui-segmented:where(*[data-tui-version=\"5.7.0\"])>label>input:not([tuiRadio]){position:absolute;inset:-.125rem;background:transparent!important}tui-segmented:where(*[data-tui-version=\"5.7.0\"]):before{transition-property:inset,inline-size;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;inset:var(--t-top) auto auto var(--t-left);inset:anchor(start);position-anchor:var(--t-anchor);block-size:var(--t-height);inline-size:var(--t-width);inline-size:anchor-size(inline);border-radius:inherit;background:currentColor;background-clip:padding-box;border:.125rem solid transparent;box-sizing:border-box;filter:drop-shadow(0 .25rem 1.25rem rgba(0,0,0,.1))}@supports not (anchor-name: --t-anchor){[dir=rtl] tui-segmented:where(*[data-tui-version=\"5.7.0\"]):before{inset-inline:auto var(--t-left)}}[tuiTheme=dark] tui-segmented:where(*[data-tui-version=\"5.7.0\"]),tui-segmented[tuiTheme=dark]:where(*[data-tui-version=\"5.7.0\"]){--tui-background-base: var(--tui-background-neutral-1-hover)}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_SEGMENTED_OPTIONS, TuiSegmented, TuiSegmentedDirective, tuiSegmentedOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-segmented.mjs.map