UNPKG

@taiga-ui/kit

Version:
16 lines (14 loc) • 10.1 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@taiga-ui/cdk"),require("@taiga-ui/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("@taiga-ui/kit/components/toggle",["exports","@angular/core","@angular/forms","@taiga-ui/cdk","@taiga-ui/core","@angular/common"],t):t(((e=e||self)["taiga-ui"]=e["taiga-ui"]||{},e["taiga-ui"].kit=e["taiga-ui"].kit||{},e["taiga-ui"].kit.components=e["taiga-ui"].kit.components||{},e["taiga-ui"].kit.components.toggle={}),e.ng.core,e.ng.forms,e.cdk,e.core$1,e.ng.common)}(this,(function(e,t,o,i,n,r){"use strict"; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ***************************************************************************** */var a=function(e,t){return(a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var o in t)t.hasOwnProperty(o)&&(e[o]=t[o])})(e,t)};function c(e,t,o,i){var n,r=arguments.length,a=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,i);else for(var c=e.length-1;c>=0;c--)(n=e[c])&&(a=(r<3?n(a):r>3?n(t,o,a):n(t,o))||a);return r>3&&a&&Object.defineProperty(t,o,a),a}function s(e,t){return function(o,i){t(o,i,e)}}var u=function(e){function r(t,o,i){var n=e.call(this,t,o)||this;return n.modeDirective=i,n.singleColor=!1,n.showIcons=!1,n.showLoader=!1,n.size="m",n}var u;return function(e,t){function o(){this.constructor=e}a(e,t),e.prototype=null===t?Object.create(t):(o.prototype=t.prototype,new o)}(r,e),u=r,Object.defineProperty(r.prototype,"nativeFocusableElement",{get:function(){return this.focusableElement?this.focusableElement.nativeElement:null},enumerable:!0,configurable:!0}),Object.defineProperty(r.prototype,"focused",{get:function(){return i.isNativeFocused(this.nativeFocusableElement)},enumerable:!0,configurable:!0}),Object.defineProperty(r.prototype,"appearance",{get:function(){return this.singleColor||this.checked?"primary":"secondary"},enumerable:!0,configurable:!0}),Object.defineProperty(r.prototype,"sizeM",{get:function(){return"m"===this.size},enumerable:!0,configurable:!0}),Object.defineProperty(r.prototype,"checked",{get:function(){return this.value},enumerable:!0,configurable:!0}),Object.defineProperty(r.prototype,"iconOn",{get:function(){return this.sizeM?"tuiIconToggleOn":"tuiIconToggleOnLarge"},enumerable:!0,configurable:!0}),Object.defineProperty(r.prototype,"iconOff",{get:function(){return this.sizeM?"tuiIconToggleOff":"tuiIconToggleOffLarge"},enumerable:!0,configurable:!0}),Object.defineProperty(r.prototype,"loaderSize",{get:function(){return this.sizeM?"xs":"s"},enumerable:!0,configurable:!0}),Object.defineProperty(r.prototype,"hostMode",{get:function(){return this.modeDirective?this.modeDirective.mode:null},enumerable:!0,configurable:!0}),r.prototype.onChecked=function(e){this.updateValue(e)},r.prototype.onFocused=function(e){this.updateFocused(e)},r.prototype.onHovered=function(e){this.updateHovered(e)},r.prototype.onPressed=function(e){this.updatePressed(e)},r.prototype.onFocusVisible=function(e){this.updateFocusVisible(e)},r.prototype.getFallbackValue=function(){return!1},r.ctorParameters=function(){return[{type:o.NgControl,decorators:[{type:t.Optional},{type:t.Self},{type:t.Inject,args:[o.NgControl]}]},{type:t.ChangeDetectorRef,decorators:[{type:t.Inject,args:[t.ChangeDetectorRef]}]},{type:n.TuiModeDirective,decorators:[{type:t.Optional},{type:t.Inject,args:[n.TuiModeDirective]}]}]},c([t.Input(),i.tuiDefaultProp()],r.prototype,"singleColor",void 0),c([t.Input(),i.tuiDefaultProp()],r.prototype,"showIcons",void 0),c([t.Input(),i.tuiDefaultProp()],r.prototype,"showLoader",void 0),c([t.Input(),t.HostBinding("attr.data-tui-host-size"),i.tuiDefaultProp()],r.prototype,"size",void 0),c([t.ViewChild("focusableElement")],r.prototype,"focusableElement",void 0),c([t.HostBinding("class._checked")],r.prototype,"checked",null),c([t.HostBinding("attr.data-mode")],r.prototype,"hostMode",null),r=u=c([t.Component({selector:"tui-toggle",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',changeDetection:t.ChangeDetectionStrategy.OnPush,providers:[{provide:i.TUI_FOCUSABLE_ITEM_ACCESSOR,useExisting:t.forwardRef((function(){return u}))}],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}"]}),s(0,t.Optional()),s(0,t.Self()),s(0,t.Inject(o.NgControl)),s(1,t.Inject(t.ChangeDetectorRef)),s(2,t.Optional()),s(2,t.Inject(n.TuiModeDirective))],r)}(i.AbstractTuiControl),l=function(){function e(){}return e=c([t.NgModule({imports:[r.CommonModule,i.TuiFocusedModule,i.TuiFocusableModule,i.TuiHoveredModule,i.TuiPressedModule,i.TuiFocusVisibleModule,i.TuiCheckedModule,n.TuiWrapperModule,n.TuiSvgModule,n.TuiLoaderModule],declarations:[u],exports:[u]})],e)}();e.TuiToggleComponent=u,e.TuiToggleModule=l,Object.defineProperty(e,"__esModule",{value:!0})})); //# sourceMappingURL=taiga-ui-kit-components-toggle.umd.min.js.map