@taiga-ui/kit
Version:
Taiga UI Angular main components kit
1 lines • 10.7 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"TuiToggleComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"AbstractTuiControl","line":43,"character":12},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":30,"character":1},"arguments":[{"selector":"tui-toggle","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":34,"character":21},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TUI_FOCUSABLE_ITEM_ACCESSOR","line":37,"character":21},"useExisting":{"__symbolic":"reference","name":"TuiToggleComponent"}}],"template":"<tui-wrapper\n [appearance]=\"appearance\"\n [disabled]=\"disabled\"\n [focused]=\"computedFocusVisible\"\n [hovered]=\"computedHovered\"\n [pressed]=\"computedPressed\"\n [invalid]=\"computedInvalid\"\n>\n <div class=\"toggle\">\n <tui-loader\n *ngIf=\"showLoader\"\n class=\"loader\"\n [size]=\"loaderSize\"\n [inheritColor]=\"true\"\n [showLoader]=\"checked\"\n ></tui-loader>\n <tui-svg\n *ngIf=\"showIcons && !showLoader\"\n class=\"icon\"\n automation-id=\"tui-toggle__check-icon\"\n [src]=\"iconOn\"\n ></tui-svg>\n <div class=\"circle\"></div>\n <tui-loader\n *ngIf=\"showLoader\"\n class=\"loader\"\n [size]=\"loaderSize\"\n [inheritColor]=\"true\"\n [showLoader]=\"!checked\"\n ></tui-loader>\n <tui-svg\n *ngIf=\"showIcons && !showLoader\"\n class=\"icon icon_off\"\n automation-id=\"tui-toggle__cancel-icon\"\n [src]=\"iconOff\"\n ></tui-svg>\n </div>\n</tui-wrapper>\n<input\n #focusableElement\n type=\"checkbox\"\n class=\"checkbox\"\n role=\"switch\"\n automation-id=\"tui-toggle__checkbox\"\n [attr.aria-checked]=\"value\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [tuiChecked]=\"checked\"\n [tuiFocusable]=\"focusable\"\n (tuiCheckedChange)=\"onChecked($event)\"\n (tuiFocusedChange)=\"onFocused($event)\"\n (tuiHoveredChange)=\"onHovered($event)\"\n (tuiPressedChange)=\"onPressed($event)\"\n (tuiFocusVisibleChange)=\"onFocusVisible($event)\"\n/>\n","styles":[":host{position:relative;display:inline-block;vertical-align:middle;overflow:hidden;border-radius:100px}:host[data-tui-host-size='m']{width:32px;height:16px}:host[data-tui-host-size='l']{width:48px;height:24px}.checkbox{padding:0;border:0;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;cursor:pointer}.checkbox:-webkit-autofill,.checkbox:-webkit-autofill:focus,.checkbox:-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 .checkbox{pointer-events:none;cursor:default}.toggle{transition-property:transform;transition-duration:.3s;transition-timing-function:ease-in-out;display:flex;align-items:center;justify-content:center}:host[data-tui-host-size='m'] .toggle{width:48px;height:16px;transform:translateX(-16px)}:host[data-tui-host-size='l'] .toggle{width:72px;height:24px;transform:translateX(-24px)}:host._checked .toggle{transform:translateX(0)}.circle{margin:2px 0;flex-shrink:0;border-radius:100%;background-color:var(--tui-base-01)}:host._disabled .circle_light{opacity:.24}:host[data-tui-host-size='m'] .circle{width:12px;height:12px}:host[data-tui-host-size='l'] .circle{width:16px;height:16px}:host._disabled .circle{background-color:var(--tui-base-01)}:host:not(._checked) .loader{color:var(--tui-base-06)}:host:not(._checked)._disabled .loader{color:var(--tui-base-05)}:host:not(._checked)[data-mode=onDark] .loader{color:var(--tui-text-03-night)}:host:not(._checked)[data-mode=onDark]._disabled .loader{color:var(--tui-clear-inverse-active)}:host:not(._checked)[data-mode=onLight] .loader{color:var(--tui-text-03)}:host:not(._checked)[data-mode=onLight]._disabled .loader{color:var(--tui-clear-active)}:host[data-tui-host-size='m'] .loader{width:12px;margin:0 2px;transform:scale(.75)}:host[data-tui-host-size='l'] .loader{width:16px;margin:0 6px}.icon{opacity:.8}.icon_off{color:var(--tui-base-06)}:host._disabled .icon_off{color:var(--tui-base-05)}:host[data-mode=onDark] .icon_off{color:var(--tui-text-03-night)}:host[data-mode=onDark]._disabled .icon_off{color:var(--tui-clear-inverse-active)}:host[data-mode=onLight] .icon_off{color:var(--tui-text-03)}:host[data-mode=onLight]._disabled .icon_off{color:var(--tui-clear-active)}:host[data-tui-host-size='m'] .icon{width:16px;height:16px;transform:scale(.75)}:host[data-tui-host-size='l'] .icon{margin:0 2px;width:24px;height:24px}:host._hovered .icon{opacity:1}"]}]}],"members":{"singleColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":46,"character":5}}]}],"showIcons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":50,"character":5}}]}],"showLoader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":54,"character":5}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":58,"character":5},"arguments":["attr.data-tui-host-size"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"tuiDefaultProp","line":59,"character":5}}]}],"focusableElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":62,"character":5},"arguments":["focusableElement"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":66,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self","line":67,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":68,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/forms","name":"NgControl","line":68,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":70,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":70,"character":16}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":71,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":72,"character":9},"arguments":[{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiModeDirective","line":72,"character":16}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"NgControl","line":69,"character":17},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":70,"character":54},{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiModeDirective","line":73,"character":40}]}],"checked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":96,"character":5},"arguments":["class._checked"]}]}],"hostMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":113,"character":5},"arguments":["attr.data-mode"]}]}],"onChecked":[{"__symbolic":"method"}],"onFocused":[{"__symbolic":"method"}],"onHovered":[{"__symbolic":"method"}],"onPressed":[{"__symbolic":"method"}],"onFocusVisible":[{"__symbolic":"method"}],"getFallbackValue":[{"__symbolic":"method"}]}},"TuiToggleModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiFocusedModule","line":16,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiFocusableModule","line":17,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiHoveredModule","line":18,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiPressedModule","line":19,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiFocusVisibleModule","line":20,"character":8},{"__symbolic":"reference","module":"@taiga-ui/cdk","name":"TuiCheckedModule","line":21,"character":8},{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiWrapperModule","line":22,"character":8},{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiSvgModule","line":23,"character":8},{"__symbolic":"reference","module":"@taiga-ui/core","name":"TuiLoaderModule","line":24,"character":8}],"declarations":[{"__symbolic":"reference","name":"TuiToggleComponent"}],"exports":[{"__symbolic":"reference","name":"TuiToggleComponent"}]}]}],"members":{}}},"origins":{"TuiToggleComponent":"./toggle.component","TuiToggleModule":"./toggle.module"},"importAs":"@taiga-ui/kit/components/toggle"}