@taiga-ui/kit/components/input-slider/taiga-ui-kit-components-input-slider.metadata.json

Taiga UI Angular main components kit

{"__symbolic":"module","version":4,"metadata":{"TuiInputSliderComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@taiga-ui/kit/abstract","name":"AbstractTuiInputSlider","line":48,"character":12},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":34,"character":1},"arguments":[{"selector":"tui-input-slider","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":38,"character":21},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TUI_FOCUSABLE_ITEM_ACCESSOR","line":41,"character":21},"useExisting":{"__symbolic":"reference","name":"TuiInputSliderComponent"}},{"__symbolic":"reference","module":"@taiga-ui/core","name":"HINT_CONTROLLER_PROVIDER","line":44,"character":8}],"template":"<tui-wrapper\n    appearance=\"textfield\"\n    [readOnly]=\"readOnly\"\n    [disabled]=\"disabled\"\n    [focused]=\"computedFocused\"\n    [hovered]=\"computedHovered\"\n    [invalid]=\"computedInvalid\"\n>\n    <span\n        *ngIf=\"hasPlaceholder\"\n        class=\"placeholder\"\n        automation-id=\"tui-input-slider__placeholder\"\n    >\n        <ng-content></ng-content>\n    </span>\n    <input\n        #focusableElement\n        class=\"native\"\n        automation-id=\"tui-input-slider__native\"\n        [disabled]=\"disabled\"\n        [readOnly]=\"readOnly\"\n        [tuiInputMode]=\"inputMode\"\n        [tuiFocusable]=\"focusable\"\n        [textMask]=\"quantum | tuiMapper: mask: min\"\n        [ngModel]=\"computedValue\"\n        (ngModelChange)=\"onValue($event)\"\n        (tuiFocusedChange)=\"onFocused($event)\"\n        (tuiHoveredChange)=\"onHovered($event)\"\n        (keydown.arrowUp)=\"onKeyDownArrowUp($event)\"\n        (keydown.arrowDown)=\"onKeyDownArrowDown($event)\"\n    />\n    <div class=\"content\">\n        <span *ngIf=\"showValue\" class=\"label\">\n            <span class=\"value\">{{computedValue}}</span>\n            <span\n                *ngIf=\"isPluralized(pluralize)\"\n                automation-id=\"tui-input-slider__pluralize\"\n            >\n                {{value | tuiPluralize: pluralize}}\n            </span>\n        </span>\n        <span\n            *ngIf=\"showMinLabel\"\n            class=\"label\"\n            automation-id=\"tui-input-slider__min-label\"\n        >\n            {{minLabel}}\n        </span>\n        <span\n            *ngIf=\"showMaxLabel\"\n            class=\"label\"\n            automation-id=\"tui-input-slider__max-label\"\n        >\n            {{maxLabel}}\n        </span>\n        <span class=\"secondary\" automation-id=\"tui-input-slider__secondary\">\n            {{secondary}}\n            <tui-tooltip\n                *ngIf=\"hasTooltip\"\n                automation-id=\"tui-input-slider__tooltip\"\n                class=\"tooltip\"\n                describeId=\"placeholer_until_accesibility_is_added\"\n                [content]=\"hintController.content\"\n                [direction]=\"hintController.direction\"\n                [mode]=\"hintController.mode\"\n                (mousedown.prevent)=\"onMouseDown()\"\n            ></tui-tooltip>\n        </span>\n    </div>\n</tui-wrapper>\n<tui-slider\n    class=\"slider\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [steps]=\"computedSteps\"\n    [segments]=\"segments\"\n    [keySteps]=\"keySteps\"\n    [pluralize]=\"segmentsPluralize\"\n    [focusable]=\"false\"\n    [disabled]=\"readOnly || disabled\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"onSliderValue($event)\"\n    (mousedown)=\"onMouseDown()\"\n></tui-slider>\n","styles":[":host{font:var(--tui-font-text-m);position:relative;z-index:0;display:block;border-radius:var(--tui-radius-m);color:var(--tui-text-01)}:host._segmented{border-bottom:26px solid transparent}.native{position:absolute;top:0;left:0;height:100%;padding:0 16px;border:0;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;width:100%;color:var(--tui-text-01);box-sizing:border-box;outline:0}.native:-webkit-autofill,.native:-webkit-autofill:focus,.native:-webkit-autofill:hover{border-radius:inherit;-webkit-text-fill-color:inherit!important;color:inherit!important;background-color:transparent!important;-webkit-box-shadow:0 0 0 1000px var(--tui-autofill) inset!important}:host._disabled .native{color:var(--tui-text-03);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host._max-label .native,:host._min-label .native{opacity:0}:host[data-tui-host-size='l'] .native{padding:20px 16px 0}:host[data-mode=onDark] .native{color:var(--tui-text-01-night)}:host[data-mode=onDark]._disabled .native{color:var(--tui-text-03-night)}.content{display:flex;align-items:center;height:var(--tui-height-m);padding:0 16px;justify-content:space-between}:host[data-tui-host-size='l'] .content{height:var(--tui-height-l);padding:0 16px}.placeholder{transition-property:transform,min-width,color,letter-spacing;transition-duration:.3s;transition-timing-function:ease-in-out;font:var(--tui-font-text-s);color:var(--tui-text-01);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;font-size:13px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;color:var(--tui-text-02);transform-origin:left;letter-spacing:normal;text-transform:none;position:absolute;top:0;width:100%;height:100%;left:16px;transform:translateY(-10px) scale(.87);line-height:var(--tui-height-l);max-width:calc(114% - 32px)}.placeholder_raised{width:114%;transform:translateY(-10px) scale(.87)}:host[data-tui-host-size='m'] .placeholder_raised{width:118%;transform:translateY(-8px) scale(.85);letter-spacing:.4px}:host._invalid:not(._focused) .placeholder_raised,:host._invalid:not(._focused)._hovered .placeholder_raised{color:var(--tui-error-fill)}:host[data-mode=onDark]._invalid:not(._focused) .placeholder_raised,:host[data-mode=onDark]._invalid:not(._focused)._hovered .placeholder_raised{color:var(--tui-error-fill-night)}:host._focused .placeholder,:host[data-tui-host-size='l']._focused._label-outside .placeholder,:host[data-tui-host-size='m']._focused._label-outside .placeholder{color:var(--tui-text-03)}:host[data-tui-host-size='l'] .placeholder{font-size:15px}:host[data-tui-host-size='l']._focused:not(._label-outside) .placeholder,:host[data-tui-host-size='m']._focused:not(._label-outside) .placeholder{color:var(--tui-text-01)}:host[data-mode=onDark] .placeholder{color:var(--tui-text-02-night)}:host[data-tui-host-size='l'][data-mode=onDark]._focused:not(._label-outside) .placeholder,:host[data-tui-host-size='m'][data-mode=onDark]._focused:not(._label-outside) .placeholder{color:var(--tui-text-01-night)}:host[data-mode=onDark]._focused .placeholder,:host[data-tui-host-size='l'][data-mode=onDark]._focused._label-outside .placeholder,:host[data-tui-host-size='m'][data-mode=onDark]._focused._label-outside .placeholder{color:var(--tui-text-02-night)}:host._has-tooltip .placeholder{max-width:calc(114% - 60px)}.value{visibility:hidden}.label{line-height:15px;overflow:hidden;text-overflow:ellipsis}:host[data-tui-host-size='l'] .label{padding-top:20px}.secondary{color:var(--tui-text-01)}:host._disabled .secondary{color:var(--tui-text-03)}:host[data-mode=onDark]._disabled .secondary{color:var(--tui-text-03-night)}.tooltip{margin-left:12px}.slider{position:absolute;top:100%;left:0;right:0;border-top-left-radius:0;border-top-right-radius:0;margin:-9px 0 0;color:transparent}:host._disabled .slider,:host._readonly .slider{pointer-events:none}"]}]}],"members":{"secondary":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":51,"character":5}}]}],"focusableElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":54,"character":5},"arguments":["focusableElement"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":58,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self","line":59,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":60,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/forms","name":"NgControl","line":60,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":62,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":62,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":63,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":64,"character":9},"arguments":[{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiModeDirective","line":64,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":66,"character":9},"arguments":[{"__symbolic":"reference","module":"@taiga-ui/core","name":"TUI_HINT_WATCHED_CONTROLLER","line":66,"character":16}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"NgControl","line":61,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":62,"character":54},{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiModeDirective","line":65,"character":42},{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiHintControllerDirective","line":67,"character":33}]}],"hasTooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":82,"character":5},"arguments":["class._has-tooltip"]}]}],"showMinLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":87,"character":5},"arguments":["class._min-label"]}]}],"showMaxLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":92,"character":5},"arguments":["class._max-label"]}]}],"onMouseDown":[{"__symbolic":"method"}],"onKeyDownArrowUp":[{"__symbolic":"method"}],"onKeyDownArrowDown":[{"__symbolic":"method"}],"onFocused":[{"__symbolic":"method"}],"onValue":[{"__symbolic":"method"}],"onSliderValue":[{"__symbolic":"method"}],"getFallbackValue":[{"__symbolic":"method"}],"processStep":[{"__symbolic":"method"}]}},"TuiInputSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":17,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":19,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":20,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":21,"character":8},{"__symbolic":"reference","module":"angular2-text-mask","name":"TextMaskModule","line":22,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiFocusableModule","line":23,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiFocusedModule","line":24,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiHoveredModule","line":25,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiPressedModule","line":26,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiMapperPipeModule","line":27,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiInputModeModule","line":28,"character":8},{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiPluralizePipeModule","line":29,"character":8},{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiTooltipModule","line":30,"character":8},{"__symbolic":"reference","module":"@taiga-ui/kit/components/slider","name":"TuiSliderModule","line":31,"character":8},{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiWrapperModule","line":32,"character":8}],"declarations":[{"__symbolic":"reference","name":"TuiInputSliderComponent"}],"exports":[{"__symbolic":"reference","name":"TuiInputSliderComponent"}]}]}],"members":{}}},"origins":{"TuiInputSliderComponent":"./input-slider.component","TuiInputSliderModule":"./input-slider.module"},"importAs":"@taiga-ui/kit/components/input-slider"}