UNPKG

@angular/material

Version:
38 lines (36 loc) 12.6 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/cdk/observers"),require("@angular/core"),require("@angular/material/core"),require("@angular/cdk/a11y"),require("@angular/cdk/bidi"),require("@angular/cdk/coercion"),require("@angular/forms"),require("@angular/platform-browser/animations")):"function"==typeof define&&define.amd?define("@angular/material/slide-toggle",["exports","@angular/cdk/observers","@angular/core","@angular/material/core","@angular/cdk/a11y","@angular/cdk/bidi","@angular/cdk/coercion","@angular/forms","@angular/platform-browser/animations"],t):t(((e=e||self).ng=e.ng||{},e.ng.material=e.ng.material||{},e.ng.material.slideToggle={}),e.ng.cdk.observers,e.ng.core,e.ng.material.core,e.ng.cdk.a11y,e.ng.cdk.bidi,e.ng.cdk.coercion,e.ng.forms,e.ng.platformBrowser.animations)}(this,(function(e,t,i,n,a,o,r,l,s){"use strict"; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT. See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. ***************************************************************************** */var d=function(e,t){return(d=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)t.hasOwnProperty(i)&&(e[i]=t[i])})(e,t)};function g(e,t){function i(){this.constructor=e}d(e,t),e.prototype=null===t?Object.create(t):(i.prototype=t.prototype,new i)} /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ var c=new i.InjectionToken("mat-slide-toggle-default-options",{providedIn:"root",factory:function(){return{disableToggleValue:!1}}}),p=0,u={provide:l.NG_VALUE_ACCESSOR,useExisting:i.forwardRef((function(){return h})),multi:!0},m=function m(e,t){this.source=e,this.checked=t},h=function(e){function t(t,n,a,o,r,l,s,d){var g=e.call(this,t)||this;return g._focusMonitor=n,g._changeDetectorRef=a,g.defaults=l,g._animationMode=s,g._onChange=function(e){},g._onTouched=function(){},g._uniqueId="mat-slide-toggle-"+ ++p,g._required=!1,g._checked=!1,g.name=null,g.id=g._uniqueId,g.labelPosition="after",g.ariaLabel=null,g.ariaLabelledby=null,g.change=new i.EventEmitter,g.toggleChange=new i.EventEmitter,g.dragChange=new i.EventEmitter,g.tabIndex=parseInt(o)||0,g}return g(t,e),Object.defineProperty(t.prototype,"required",{get:function(){return this._required},set:function(e){this._required=r.coerceBooleanProperty(e)},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"checked",{get:function(){return this._checked},set:function(e){this._checked=r.coerceBooleanProperty(e),this._changeDetectorRef.markForCheck()},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"inputId",{get:function(){return(this.id||this._uniqueId)+"-input"},enumerable:!0,configurable:!0}),t.prototype.ngAfterContentInit=function(){var e=this;this._focusMonitor.monitor(this._elementRef,!0).subscribe((function(t){"keyboard"===t||"program"===t?e._inputElement.nativeElement.focus():t||Promise.resolve().then((function(){return e._onTouched()}))}))},t.prototype.ngOnDestroy=function(){this._focusMonitor.stopMonitoring(this._elementRef)},t.prototype._onChangeEvent=function(e){e.stopPropagation(),this.toggleChange.emit(),this.defaults.disableToggleValue?this._inputElement.nativeElement.checked=this.checked:(this.checked=this._inputElement.nativeElement.checked,this._emitChangeEvent())},t.prototype._onInputClick=function(e){e.stopPropagation()},t.prototype.writeValue=function(e){this.checked=!!e},t.prototype.registerOnChange=function(e){this._onChange=e},t.prototype.registerOnTouched=function(e){this._onTouched=e},t.prototype.setDisabledState=function(e){this.disabled=e,this._changeDetectorRef.markForCheck()},t.prototype.focus=function(e){this._focusMonitor.focusVia(this._inputElement,"keyboard",e)},t.prototype.toggle=function(){this.checked=!this.checked,this._onChange(this.checked)},t.prototype._emitChangeEvent=function(){this._onChange(this.checked),this.change.emit(new m(this,this.checked))},t.prototype._onLabelTextChange=function(){this._changeDetectorRef.detectChanges()},t.decorators=[{type:i.Component,args:[{selector:"mat-slide-toggle",exportAs:"matSlideToggle",host:{class:"mat-slide-toggle","[id]":"id","[attr.tabindex]":"disabled ? null : -1","[attr.aria-label]":"null","[attr.aria-labelledby]":"null","[class.mat-checked]":"checked","[class.mat-disabled]":"disabled","[class.mat-slide-toggle-label-before]":'labelPosition == "before"',"[class._mat-animation-noopable]":'_animationMode === "NoopAnimations"'},template:'<label [attr.for]="inputId" class="mat-slide-toggle-label" #label>\n <div #toggleBar class="mat-slide-toggle-bar"\n [class.mat-slide-toggle-bar-no-side-margin]="!labelContent.textContent || !labelContent.textContent.trim()">\n\n <input #input class="mat-slide-toggle-input cdk-visually-hidden" type="checkbox"\n role="switch"\n [id]="inputId"\n [required]="required"\n [tabIndex]="tabIndex"\n [checked]="checked"\n [disabled]="disabled"\n [attr.name]="name"\n [attr.aria-checked]="checked.toString()"\n [attr.aria-label]="ariaLabel"\n [attr.aria-labelledby]="ariaLabelledby"\n (change)="_onChangeEvent($event)"\n (click)="_onInputClick($event)">\n\n <div class="mat-slide-toggle-thumb-container" #thumbContainer>\n <div class="mat-slide-toggle-thumb"></div>\n <div class="mat-slide-toggle-ripple mat-focus-indicator" mat-ripple\n [matRippleTrigger]="label"\n [matRippleDisabled]="disableRipple || disabled"\n [matRippleCentered]="true"\n [matRippleRadius]="20"\n [matRippleAnimation]="{enterDuration: 150}">\n\n <div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div>\n </div>\n </div>\n\n </div>\n\n <span class="mat-slide-toggle-content" #labelContent (cdkObserveContent)="_onLabelTextChange()">\n \x3c!-- Add an invisible span so JAWS can read the label --\x3e\n <span style="display:none">&nbsp;</span>\n <ng-content></ng-content>\n </span>\n</label>\n',providers:[u],inputs:["disabled","disableRipple","color","tabIndex"],encapsulation:i.ViewEncapsulation.None,changeDetection:i.ChangeDetectionStrategy.OnPush,styles:[".mat-slide-toggle{display:inline-block;height:24px;max-width:100%;line-height:24px;white-space:nowrap;outline:none;-webkit-tap-highlight-color:transparent}.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(16px, 0, 0)}[dir=rtl] .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{transform:translate3d(-16px, 0, 0)}.mat-slide-toggle.mat-disabled{opacity:.38}.mat-slide-toggle.mat-disabled .mat-slide-toggle-label,.mat-slide-toggle.mat-disabled .mat-slide-toggle-thumb-container{cursor:default}.mat-slide-toggle-label{display:flex;flex:1;flex-direction:row;align-items:center;height:inherit;cursor:pointer}.mat-slide-toggle-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-slide-toggle-label-before .mat-slide-toggle-label{order:1}.mat-slide-toggle-label-before .mat-slide-toggle-bar{order:2}[dir=rtl] .mat-slide-toggle-label-before .mat-slide-toggle-bar,.mat-slide-toggle-bar{margin-right:8px;margin-left:0}[dir=rtl] .mat-slide-toggle-bar,.mat-slide-toggle-label-before .mat-slide-toggle-bar{margin-left:8px;margin-right:0}.mat-slide-toggle-bar-no-side-margin{margin-left:0;margin-right:0}.mat-slide-toggle-thumb-container{position:absolute;z-index:1;width:20px;height:20px;top:-3px;left:0;transform:translate3d(0, 0, 0);transition:all 80ms linear;transition-property:transform}._mat-animation-noopable .mat-slide-toggle-thumb-container{transition:none}[dir=rtl] .mat-slide-toggle-thumb-container{left:auto;right:0}.mat-slide-toggle-thumb{height:20px;width:20px;border-radius:50%}.mat-slide-toggle-bar{position:relative;width:36px;height:14px;flex-shrink:0;border-radius:8px}.mat-slide-toggle-input{bottom:0;left:10px}[dir=rtl] .mat-slide-toggle-input{left:auto;right:10px}.mat-slide-toggle-bar,.mat-slide-toggle-thumb{transition:all 80ms linear;transition-property:background-color;transition-delay:50ms}._mat-animation-noopable .mat-slide-toggle-bar,._mat-animation-noopable .mat-slide-toggle-thumb{transition:none}.mat-slide-toggle .mat-slide-toggle-ripple{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);height:40px;width:40px;z-index:1;pointer-events:none}.mat-slide-toggle .mat-slide-toggle-ripple .mat-ripple-element:not(.mat-slide-toggle-persistent-ripple){opacity:.12}.mat-slide-toggle-persistent-ripple{width:100%;height:100%;transform:none}.mat-slide-toggle-bar:hover .mat-slide-toggle-persistent-ripple{opacity:.04}.mat-slide-toggle:not(.mat-disabled).cdk-keyboard-focused .mat-slide-toggle-persistent-ripple{opacity:.12}.mat-slide-toggle-persistent-ripple,.mat-slide-toggle.mat-disabled .mat-slide-toggle-bar:hover .mat-slide-toggle-persistent-ripple{opacity:0}@media(hover: none){.mat-slide-toggle-bar:hover .mat-slide-toggle-persistent-ripple{display:none}}.cdk-high-contrast-active .mat-slide-toggle-thumb,.cdk-high-contrast-active .mat-slide-toggle-bar{border:1px solid}.cdk-high-contrast-active .mat-slide-toggle.cdk-keyboard-focused .mat-slide-toggle-bar{outline:2px dotted;outline-offset:5px}\n"]}]}],t.ctorParameters=function(){return[{type:i.ElementRef},{type:a.FocusMonitor},{type:i.ChangeDetectorRef},{type:String,decorators:[{type:i.Attribute,args:["tabindex"]}]},{type:i.NgZone},{type:void 0,decorators:[{type:i.Inject,args:[c]}]},{type:String,decorators:[{type:i.Optional},{type:i.Inject,args:[s.ANIMATION_MODULE_TYPE]}]},{type:o.Directionality,decorators:[{type:i.Optional}]}]},t.propDecorators={_thumbEl:[{type:i.ViewChild,args:["thumbContainer"]}],_thumbBarEl:[{type:i.ViewChild,args:["toggleBar"]}],name:[{type:i.Input}],id:[{type:i.Input}],labelPosition:[{type:i.Input}],ariaLabel:[{type:i.Input,args:["aria-label"]}],ariaLabelledby:[{type:i.Input,args:["aria-labelledby"]}],required:[{type:i.Input}],checked:[{type:i.Input}],change:[{type:i.Output}],toggleChange:[{type:i.Output}],dragChange:[{type:i.Output}],_inputElement:[{type:i.ViewChild,args:["input"]}]},t}(n.mixinTabIndex(n.mixinColor(n.mixinDisableRipple(n.mixinDisabled((function b(e){this._elementRef=e}))),"accent"))),f={provide:l.NG_VALIDATORS,useExisting:i.forwardRef((function(){return y})),multi:!0},y=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return g(t,e),t.decorators=[{type:i.Directive,args:[{selector:"mat-slide-toggle[required][formControlName],\n mat-slide-toggle[required][formControl], mat-slide-toggle[required][ngModel]",providers:[f]}]}],t}(l.CheckboxRequiredValidator),_=function(){function e(){}return e.decorators=[{type:i.NgModule,args:[{exports:[y],declarations:[y]}]}],e}(),k=function(){function e(){}return e.decorators=[{type:i.NgModule,args:[{imports:[_,n.MatRippleModule,n.MatCommonModule,t.ObserversModule],exports:[_,h,n.MatCommonModule],declarations:[h]}]}],e}(); /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ /** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ e.MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS=c,e.MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR=f,e.MAT_SLIDE_TOGGLE_VALUE_ACCESSOR=u,e.MatSlideToggle=h,e.MatSlideToggleChange=m,e.MatSlideToggleModule=k,e.MatSlideToggleRequiredValidator=y,e._MatSlideToggleRequiredValidatorModule=_,Object.defineProperty(e,"__esModule",{value:!0})}));