@taiga-ui/kit
Version:
Taiga UI Angular main components kit
58 lines • 8.06 kB
JavaScript
import { computed, Directive, inject, Input, signal } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { WaMutationObserverService, WA_MUTATION_OBSERVER_INIT, } from '@ng-web-apis/mutation-observer';
import { tuiWatch } from '@taiga-ui/cdk/observables';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { map } from 'rxjs';
import * as i0 from "@angular/core";
class TuiProgressColorSegments {
constructor() {
this.colors = signal([]);
this.el = tuiInjectElement();
this.position = toSignal(inject(WaMutationObserverService, { self: true }).pipe(map(() => this.el.position), tuiWatch()), { initialValue: this.el.position });
this.color = computed(() => {
const colors = this.colors();
const position = this.position();
if (!colors.length || position <= 0) {
return null;
}
const colorsString = colors.reduce((acc, color, i) => `${acc}, ${color} calc(${i} / ${colors.length} * 100% / ${position}) calc(${i + 1} / ${colors.length} * 100% / ${position})`, '');
return `linear-gradient(to right${colorsString})`;
});
}
set colorsSetter(colors) {
this.colors.set(colors);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiProgressColorSegments, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiProgressColorSegments, isStandalone: true, selector: "progress[tuiProgressBar][tuiProgressColorSegments]", inputs: { colorsSetter: ["tuiProgressColorSegments", "colorsSetter"] }, host: { properties: { "style.--tui-progress-color": "color()" } }, providers: [
WaMutationObserverService,
{
provide: WA_MUTATION_OBSERVER_INIT,
useValue: {
attributeOldValue: true,
},
},
], ngImport: i0 }); }
}
export { TuiProgressColorSegments };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiProgressColorSegments, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'progress[tuiProgressBar][tuiProgressColorSegments]',
providers: [
WaMutationObserverService,
{
provide: WA_MUTATION_OBSERVER_INIT,
useValue: {
attributeOldValue: true,
},
},
],
host: { '[style.--tui-progress-color]': 'color()' },
}]
}], propDecorators: { colorsSetter: [{
type: Input,
args: ['tuiProgressColorSegments']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MtY29sb3Itc2VnbWVudHMuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvcHJvZ3Jlc3MvcHJvZ3Jlc3MtYmFyL3Byb2dyZXNzLWNvbG9yLXNlZ21lbnRzLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsUUFBUSxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN6RSxPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0sNEJBQTRCLENBQUM7QUFDcEQsT0FBTyxFQUNILHlCQUF5QixFQUN6Qix5QkFBeUIsR0FDNUIsTUFBTSxnQ0FBZ0MsQ0FBQztBQUN4QyxPQUFPLEVBQUMsUUFBUSxFQUFDLE1BQU0sMkJBQTJCLENBQUM7QUFDbkQsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDekQsT0FBTyxFQUFDLEdBQUcsRUFBQyxNQUFNLE1BQU0sQ0FBQzs7QUFFekIsTUFjYSx3QkFBd0I7SUFkckM7UUFlcUIsV0FBTSxHQUFHLE1BQU0sQ0FBb0IsRUFBRSxDQUFDLENBQUM7UUFDdkMsT0FBRSxHQUFHLGdCQUFnQixFQUF1QixDQUFDO1FBQzdDLGFBQVEsR0FBRyxRQUFRLENBQ2hDLE1BQU0sQ0FBQyx5QkFBeUIsRUFBRSxFQUFDLElBQUksRUFBRSxJQUFJLEVBQUMsQ0FBQyxDQUFDLElBQUksQ0FDaEQsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsUUFBUSxDQUFDLEVBQzNCLFFBQVEsRUFBRSxDQUNiLEVBQ0QsRUFBQyxZQUFZLEVBQUUsSUFBSSxDQUFDLEVBQUUsQ0FBQyxRQUFRLEVBQUMsQ0FDbkMsQ0FBQztRQUVpQixVQUFLLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUNyQyxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7WUFDN0IsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBRWpDLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxJQUFJLFFBQVEsSUFBSSxDQUFDLEVBQUU7Z0JBQ2pDLE9BQU8sSUFBSSxDQUFDO2FBQ2Y7WUFFRCxNQUFNLFlBQVksR0FBRyxNQUFNLENBQUMsTUFBTSxDQUM5QixDQUFDLEdBQUcsRUFBRSxLQUFLLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FDZCxHQUFHLEdBQUcsS0FBSyxLQUFLLFNBQVMsQ0FBQyxNQUFNLE1BQU0sQ0FBQyxNQUFNLGFBQWEsUUFBUSxVQUFVLENBQUMsR0FBRyxDQUFDLE1BQU0sTUFBTSxDQUFDLE1BQU0sYUFBYSxRQUFRLEdBQUcsRUFDaEksRUFBRSxDQUNMLENBQUM7WUFFRixPQUFPLDJCQUEyQixZQUFZLEdBQUcsQ0FBQztRQUN0RCxDQUFDLENBQUMsQ0FBQztLQU1OO0lBSkcsSUFDVyxZQUFZLENBQUMsTUFBeUI7UUFDN0MsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDNUIsQ0FBQzsrR0EvQlEsd0JBQXdCO21HQUF4Qix3QkFBd0IsNE9BWHRCO1lBQ1AseUJBQXlCO1lBQ3pCO2dCQUNJLE9BQU8sRUFBRSx5QkFBeUI7Z0JBQ2xDLFFBQVEsRUFBRTtvQkFDTixpQkFBaUIsRUFBRSxJQUFJO2lCQUMxQjthQUNKO1NBQ0o7O1NBR1Esd0JBQXdCOzRGQUF4Qix3QkFBd0I7a0JBZHBDLFNBQVM7bUJBQUM7b0JBQ1AsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLFFBQVEsRUFBRSxvREFBb0Q7b0JBQzlELFNBQVMsRUFBRTt3QkFDUCx5QkFBeUI7d0JBQ3pCOzRCQUNJLE9BQU8sRUFBRSx5QkFBeUI7NEJBQ2xDLFFBQVEsRUFBRTtnQ0FDTixpQkFBaUIsRUFBRSxJQUFJOzZCQUMxQjt5QkFDSjtxQkFDSjtvQkFDRCxJQUFJLEVBQUUsRUFBQyw4QkFBOEIsRUFBRSxTQUFTLEVBQUM7aUJBQ3BEOzhCQThCYyxZQUFZO3NCQUR0QixLQUFLO3VCQUFDLDBCQUEwQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Y29tcHV0ZWQsIERpcmVjdGl2ZSwgaW5qZWN0LCBJbnB1dCwgc2lnbmFsfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7dG9TaWduYWx9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvcnhqcy1pbnRlcm9wJztcbmltcG9ydCB7XG4gICAgV2FNdXRhdGlvbk9ic2VydmVyU2VydmljZSxcbiAgICBXQV9NVVRBVElPTl9PQlNFUlZFUl9JTklULFxufSBmcm9tICdAbmctd2ViLWFwaXMvbXV0YXRpb24tb2JzZXJ2ZXInO1xuaW1wb3J0IHt0dWlXYXRjaH0gZnJvbSAnQHRhaWdhLXVpL2Nkay9vYnNlcnZhYmxlcyc7XG5pbXBvcnQge3R1aUluamVjdEVsZW1lbnR9IGZyb20gJ0B0YWlnYS11aS9jZGsvdXRpbHMvZG9tJztcbmltcG9ydCB7bWFwfSBmcm9tICdyeGpzJztcblxuQERpcmVjdGl2ZSh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ3Byb2dyZXNzW3R1aVByb2dyZXNzQmFyXVt0dWlQcm9ncmVzc0NvbG9yU2VnbWVudHNdJyxcbiAgICBwcm92aWRlcnM6IFtcbiAgICAgICAgV2FNdXRhdGlvbk9ic2VydmVyU2VydmljZSxcbiAgICAgICAge1xuICAgICAgICAgICAgcHJvdmlkZTogV0FfTVVUQVRJT05fT0JTRVJWRVJfSU5JVCxcbiAgICAgICAgICAgIHVzZVZhbHVlOiB7XG4gICAgICAgICAgICAgICAgYXR0cmlidXRlT2xkVmFsdWU6IHRydWUsXG4gICAgICAgICAgICB9LFxuICAgICAgICB9LFxuICAgIF0sXG4gICAgaG9zdDogeydbc3R5bGUuLS10dWktcHJvZ3Jlc3MtY29sb3JdJzogJ2NvbG9yKCknfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpUHJvZ3Jlc3NDb2xvclNlZ21lbnRzIHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGNvbG9ycyA9IHNpZ25hbDxyZWFkb25seSBzdHJpbmdbXT4oW10pO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgZWwgPSB0dWlJbmplY3RFbGVtZW50PEhUTUxQcm9ncmVzc0VsZW1lbnQ+KCk7XG4gICAgcHJpdmF0ZSByZWFkb25seSBwb3NpdGlvbiA9IHRvU2lnbmFsKFxuICAgICAgICBpbmplY3QoV2FNdXRhdGlvbk9ic2VydmVyU2VydmljZSwge3NlbGY6IHRydWV9KS5waXBlKFxuICAgICAgICAgICAgbWFwKCgpID0+IHRoaXMuZWwucG9zaXRpb24pLFxuICAgICAgICAgICAgdHVpV2F0Y2goKSxcbiAgICAgICAgKSxcbiAgICAgICAge2luaXRpYWxWYWx1ZTogdGhpcy5lbC5wb3NpdGlvbn0sXG4gICAgKTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSBjb2xvciA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICAgICAgY29uc3QgY29sb3JzID0gdGhpcy5jb2xvcnMoKTtcbiAgICAgICAgY29uc3QgcG9zaXRpb24gPSB0aGlzLnBvc2l0aW9uKCk7XG5cbiAgICAgICAgaWYgKCFjb2xvcnMubGVuZ3RoIHx8IHBvc2l0aW9uIDw9IDApIHtcbiAgICAgICAgICAgIHJldHVybiBudWxsO1xuICAgICAgICB9XG5cbiAgICAgICAgY29uc3QgY29sb3JzU3RyaW5nID0gY29sb3JzLnJlZHVjZShcbiAgICAgICAgICAgIChhY2MsIGNvbG9yLCBpKSA9PlxuICAgICAgICAgICAgICAgIGAke2FjY30sICR7Y29sb3J9IGNhbGMoJHtpfSAvICR7Y29sb3JzLmxlbmd0aH0gKiAxMDAlIC8gJHtwb3NpdGlvbn0pIGNhbGMoJHtpICsgMX0gLyAke2NvbG9ycy5sZW5ndGh9ICogMTAwJSAvICR7cG9zaXRpb259KWAsXG4gICAgICAgICAgICAnJyxcbiAgICAgICAgKTtcblxuICAgICAgICByZXR1cm4gYGxpbmVhci1ncmFkaWVudCh0byByaWdodCR7Y29sb3JzU3RyaW5nfSlgO1xuICAgIH0pO1xuXG4gICAgQElucHV0KCd0dWlQcm9ncmVzc0NvbG9yU2VnbWVudHMnKVxuICAgIHB1YmxpYyBzZXQgY29sb3JzU2V0dGVyKGNvbG9yczogcmVhZG9ubHkgc3RyaW5nW10pIHtcbiAgICAgICAgdGhpcy5jb2xvcnMuc2V0KGNvbG9ycyk7XG4gICAgfVxufVxuIl19