@taiga-ui/kit/components/range/taiga-ui-kit-components-range.metadata.json

Taiga UI Angular main components kit

{"__symbolic":"module","version":4,"metadata":{"TuiRangeComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@taiga-ui/kit/abstract","name":"AbstractTuiSlider","line":38,"character":12},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"tui-range","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":29,"character":21},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TUI_FOCUSABLE_ITEM_ACCESSOR","line":32,"character":21},"useExisting":{"__symbolic":"reference","name":"TuiRangeComponent"}}],"template":"<div\n    class=\"event-catcher\"\n    (tuiActiveZoneChange)=\"onActiveZone($event)\"\n    (mousedown)=\"onMouseDown($event)\"\n    (touchstart)=\"onTouchStart($event)\"\n>\n    <div class=\"wrapper\">\n        <div *ngIf=\"segmented\" class=\"segments\">\n            <span\n                *tuiRepeatTimes=\"let segmentIndex of segments + 1\"\n                class=\"segment\"\n                automation-id=\"tui-slider__segment\"\n            >\n                <span *ngIf=\"fromToTexts$ | async as fromToText\" class=\"number\">\n                    {{getSegmentPrefix(segmentIndex, fromToText)}}\n                    {{getSegmentLabel(segmentIndex) | tuiFormatNumber}}\n                    <span *ngIf=\"isPluralized(pluralize)\">\n                        {{getSegmentLabel(segmentIndex) | tuiPluralize:\n                        pluralize}}\n                    </span>\n                </span>\n            </span>\n        </div>\n        <div\n            class=\"bar\"\n            automation-id=\"tui-slider__bar\"\n            [style.left.%]=\"left\"\n            [style.right.%]=\"right\"\n        >\n            <div\n                #dotLeft\n                class=\"dot\"\n                automation-id=\"tui-slider__left\"\n                [class.dot_focus-visible]=\"focusVisibleLeft && computedFocused\"\n                [tuiFocusable]=\"isLeftFocusable\"\n                (tuiFocusVisibleChange)=\"onLeftFocusVisible($event)\"\n                (keydown.arrowLeft.prevent)=\"decrement(false)\"\n                (keydown.arrowDown.prevent)=\"decrement(false)\"\n                (keydown.arrowRight.prevent)=\"increment(false)\"\n                (keydown.arrowUp.prevent)=\"increment(false)\"\n            ></div>\n            <div\n                #dotRight\n                class=\"dot\"\n                automation-id=\"tui-slider__right\"\n                [class.dot_focus-visible]=\"focusVisibleRight && computedFocused\"\n                [tuiFocusable]=\"isRightFocusable\"\n                (tuiFocusVisibleChange)=\"onRightFocusVisible($event)\"\n                (keydown.arrowLeft.prevent)=\"decrement(true)\"\n                (keydown.arrowDown.prevent)=\"decrement(true)\"\n                (keydown.arrowRight.prevent)=\"increment(true)\"\n                (keydown.arrowUp.prevent)=\"increment(true)\"\n            ></div>\n        </div>\n    </div>\n</div>\n","styles":[":host{display:block;border-radius:var(--tui-radius-m);color:var(--tui-base-03);min-height:2px;font-size:16px}:host[data-tui-host-size='s']{min-height:2px;font-size:8px}:host._segmented{padding-bottom:20px}:host._disabled{cursor:default;pointer-events:none;opacity:var(--tui-disabled-opacity)}.event-catcher{min-height:inherit;border-radius:inherit;padding:7px 0;cursor:pointer}.wrapper{position:relative;min-height:inherit;border-radius:inherit;background-color:currentColor;border:solid transparent;border-width:0 1em}.bar{position:absolute;top:0;bottom:0;margin:0 -1em;border-radius:inherit;background-color:var(--tui-primary)}:host-context(tui-input-slider) .bar{margin-left:calc(var(--tui-radius-m)/ 2);border-bottom-left-radius:calc(var(--tui-radius-m) * 5) calc(var(--tui-radius-m) * 1.5)}.dot{transition-property:background-color;transition-duration:.3s;transition-timing-function:ease-in-out;position:absolute;top:50%;z-index:1;width:1em;height:1em;transform:translate(0,-50%);border-radius:100%;background-color:var(--tui-primary);outline:0;cursor:ew-resize}.dot:last-child{right:0;transform:translate(0,-50%)}.dot:hover{background-color:var(--tui-primary-hover)}.dot:active{background-color:var(--tui-primary-active)}.dot_focus-visible{box-shadow:inset 0 0 0 2px var(--tui-focus)}.segments{position:relative;z-index:1;display:flex;justify-content:space-between;min-height:inherit;margin:0 -1em}.segments-spacer{height:26px}.segment{position:relative;height:inherit;width:4px;background-color:rgba(0,0,0,.36);pointer-events:none}.segment:first-of-type,.segment:last-of-type{background-color:transparent}.number{position:absolute;left:50%;transform:translate(-50%,0);font:var(--tui-font-text-s);top:100%;margin-top:8px;color:var(--tui-text-02);white-space:nowrap}.segment:first-of-type .number{left:-.05em;transform:none}.segment:last-of-type .number{left:auto;right:-.05em;transform:none}:host._disabled .number{color:var(--tui-text-01)}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":41,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self","line":42,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":43,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/forms","name":"NgControl","line":43,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":45,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":45,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":46,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":46,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":47,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":47,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":48,"character":9},"arguments":[{"__symbolic":"reference","module":"@taiga-ui/kit/tokens","name":"TUI_FROM_TO_TEXTS","line":48,"character":16}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"NgControl","line":44,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":45,"character":54},{"__symbolic":"error","message":"Could not resolve type","line":46,"character":39,"context":{"typeName":"Document"},"module":"./range.component"},{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":47,"character":68,"context":{"typeName":"HTMLElement"},"module":"./range.component"}]},{"__symbolic":"reference","name":"Observable","module":"rxjs","arguments":[{"__symbolic":"error","message":"Expression form not supported","line":48,"character":60,"module":"./range.component"}]}]}],"getFallbackValue":[{"__symbolic":"method"}],"processStep":[{"__symbolic":"method"}],"processValue":[{"__symbolic":"method"}],"getCalibratedFractionFromEvents":[{"__symbolic":"method"}],"updateStart":[{"__symbolic":"method"}],"updateEnd":[{"__symbolic":"method"}]}},"TuiRangeModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":13,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiRepeatTimesModule","line":14,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiFocusableModule","line":15,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiActiveZoneModule","line":16,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiFocusVisibleModule","line":17,"character":8},{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiPluralizePipeModule","line":18,"character":8},{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiFormatNumberPipeModule","line":19,"character":8}],"declarations":[{"__symbolic":"reference","name":"TuiRangeComponent"}],"exports":[{"__symbolic":"reference","name":"TuiRangeComponent"}]}]}],"members":{}}},"origins":{"TuiRangeComponent":"./range.component","TuiRangeModule":"./range.module"},"importAs":"@taiga-ui/kit/components/range"}