9978.c5f84612116e55f8.js

"use strict";(self.webpackChunkmaterial_angular_io=self.webpackChunkmaterial_angular_io||[]).push([[9978],{9978:(k,f,c)=>{c.r(f),c.d(f,{ButtonToggleAppearanceExample:()=>T,ButtonToggleExamplesModule:()=>B,ButtonToggleExclusiveExample:()=>m,ButtonToggleFormsExample:()=>_,ButtonToggleHarnessExample:()=>M,ButtonToggleModeExample:()=>b,ButtonToggleOverviewExample:()=>v});var e=c(4650),d=c(4006),s=c(811),n=c(7392);let T=(()=>{class a{}return a.\u0275fac=function(l){return new(l||a)},a.\u0275cmp=e.Xpm({type:a,selectors:[["button-toggle-appearance-example"]],decls:18,vars:0,consts:[["name","fontStyle","aria-label","Font Style"],["value","bold"],["value","italic"],["value","underline"],["appearance","legacy","name","fontStyle","aria-label","Font Style"]],template:function(l,r){1&l&&(e.TgZ(0,"p"),e._uU(1," Default appearance: "),e.TgZ(2,"mat-button-toggle-group",0)(3,"mat-button-toggle",1),e._uU(4,"Bold"),e.qZA(),e.TgZ(5,"mat-button-toggle",2),e._uU(6,"Italic"),e.qZA(),e.TgZ(7,"mat-button-toggle",3),e._uU(8,"Underline"),e.qZA()()(),e.TgZ(9,"p"),e._uU(10," Legacy appearance: "),e.TgZ(11,"mat-button-toggle-group",4)(12,"mat-button-toggle",1),e._uU(13,"Bold"),e.qZA(),e.TgZ(14,"mat-button-toggle",2),e._uU(15,"Italic"),e.qZA(),e.TgZ(16,"mat-button-toggle",3),e._uU(17,"Underline"),e.qZA()()())},dependencies:[s.A9,s.Yi],styles:["mat-button-toggle-group[_ngcontent-%COMP%] {\n  margin-left: 12px;\n}"]}),a})(),m=(()=>{class a{}return a.\u0275fac=function(l){return new(l||a)},a.\u0275cmp=e.Xpm({type:a,selectors:[["button-toggle-exclusive-example"]],decls:16,vars:1,consts:[["group","matButtonToggleGroup"],["value","left","aria-label","Text align left"],["value","center","aria-label","Text align center"],["value","right","aria-label","Text align right"],["value","justify","disabled","","aria-label","Text align justify"],[1,"example-selected-value"]],template:function(l,r){if(1&l&&(e.TgZ(0,"mat-button-toggle-group",null,0)(2,"mat-button-toggle",1)(3,"mat-icon"),e._uU(4,"format_align_left"),e.qZA()(),e.TgZ(5,"mat-button-toggle",2)(6,"mat-icon"),e._uU(7,"format_align_center"),e.qZA()(),e.TgZ(8,"mat-button-toggle",3)(9,"mat-icon"),e._uU(10,"format_align_right"),e.qZA()(),e.TgZ(11,"mat-button-toggle",4)(12,"mat-icon"),e._uU(13,"format_align_justify"),e.qZA()()(),e.TgZ(14,"div",5),e._uU(15),e.qZA()),2&l){const y=e.MAs(1);e.xp6(15),e.hij("Selected value: ",y.value,"")}},dependencies:[s.A9,s.Yi,n.Hw],styles:[".example-selected-value[_ngcontent-%COMP%] {\n  margin: 15px 0;\n}"]}),a})(),v=(()=>{class a{}return a.\u0275fac=function(l){return new(l||a)},a.\u0275cmp=e.Xpm({type:a,selectors:[["button-toggle-overview-example"]],decls:7,vars:0,consts:[["name","fontStyle","aria-label","Font Style"],["value","bold"],["value","italic"],["value","underline"]],template:function(l,r){1&l&&(e.TgZ(0,"mat-button-toggle-group",0)(1,"mat-button-toggle",1),e._uU(2,"Bold"),e.qZA(),e.TgZ(3,"mat-button-toggle",2),e._uU(4,"Italic"),e.qZA(),e.TgZ(5,"mat-button-toggle",3),e._uU(6,"Underline"),e.qZA()())},dependencies:[s.A9,s.Yi],encapsulation:2}),a})(),M=(()=>{class a{constructor(){this.disabled=!1,this.appearance="standard"}}return a.\u0275fac=function(l){return new(l||a)},a.\u0275cmp=e.Xpm({type:a,selectors:[["button-toggle-harness-example"]],decls:5,vars:2,consts:[[3,"disabled","appearance"],["value","1"],["value","2"]],template:function(l,r){1&l&&(e.TgZ(0,"mat-button-toggle-group",0)(1,"mat-button-toggle",1),e._uU(2,"One"),e.qZA(),e.TgZ(3,"mat-button-toggle",2),e._uU(4,"Two"),e.qZA()()),2&l&&e.Q6J("disabled",r.disabled)("appearance",r.appearance)},dependencies:[s.A9,s.Yi],encapsulation:2}),a})(),_=(()=>{class a{constructor(){this.fontStyleControl=new d.NI("")}}return a.\u0275fac=function(l){return new(l||a)},a.\u0275cmp=e.Xpm({type:a,selectors:[["button-toggle-forms-example"]],decls:24,vars:4,consts:[["aria-label","Font Style",3,"ngModel","ngModelChange"],["value","bold"],["value","italic"],["value","underline"],["aria-label","Font Style",3,"formControl"]],template:function(l,r){1&l&&(e.TgZ(0,"section")(1,"h4"),e._uU(2,"Button Toggle inside of a Template-driven form"),e.qZA(),e.TgZ(3,"mat-button-toggle-group",0),e.NdJ("ngModelChange",function(u){return r.fontStyle=u}),e.TgZ(4,"mat-button-toggle",1),e._uU(5,"Bold"),e.qZA(),e.TgZ(6,"mat-button-toggle",2),e._uU(7,"Italic"),e.qZA(),e.TgZ(8,"mat-button-toggle",3),e._uU(9,"Underline"),e.qZA()(),e.TgZ(10,"p"),e._uU(11),e.qZA()(),e.TgZ(12,"section")(13,"h4"),e._uU(14,"Button Toggle inside of a Reactive form"),e.qZA(),e.TgZ(15,"mat-button-toggle-group",4)(16,"mat-button-toggle",1),e._uU(17,"Bold"),e.qZA(),e.TgZ(18,"mat-button-toggle",2),e._uU(19,"Italic"),e.qZA(),e.TgZ(20,"mat-button-toggle",3),e._uU(21,"Underline"),e.qZA()(),e.TgZ(22,"p"),e._uU(23),e.qZA()()),2&l&&(e.xp6(3),e.Q6J("ngModel",r.fontStyle),e.xp6(8),e.hij("Chosen value is ",r.fontStyle,""),e.xp6(4),e.Q6J("formControl",r.fontStyleControl),e.xp6(8),e.hij("Chosen value is ",r.fontStyleControl.value,""))},dependencies:[d.JJ,d.On,s.A9,s.Yi,d.oH],encapsulation:2}),a})(),b=(()=>{class a{}return a.\u0275fac=function(l){return new(l||a)},a.\u0275cmp=e.Xpm({type:a,selectors:[["button-toggle-mode-example"]],decls:18,vars:0,consts:[["name","favoriteColor","aria-label","Favorite Color"],["value","red"],["value","green"],["value","blue"],["name","ingredients","aria-label","Ingredients","multiple",""],["value","flour"],["value","eggs"],["value","sugar"]],template:function(l,r){1&l&&(e.TgZ(0,"h3"),e._uU(1,"Single selection"),e.qZA(),e.TgZ(2,"mat-button-toggle-group",0)(3,"mat-button-toggle",1),e._uU(4,"Red"),e.qZA(),e.TgZ(5,"mat-button-toggle",2),e._uU(6,"Green"),e.qZA(),e.TgZ(7,"mat-button-toggle",3),e._uU(8,"Blue"),e.qZA()(),e.TgZ(9,"h3"),e._uU(10,"Multiple selection"),e.qZA(),e.TgZ(11,"mat-button-toggle-group",4)(12,"mat-button-toggle",5),e._uU(13,"Flour"),e.qZA(),e.TgZ(14,"mat-button-toggle",6),e._uU(15,"Eggs"),e.qZA(),e.TgZ(16,"mat-button-toggle",7),e._uU(17,"Sugar"),e.qZA()())},dependencies:[s.A9,s.Yi],encapsulation:2}),a})(),B=(()=>{class a{}return a.\u0275fac=function(l){return new(l||a)},a.\u0275mod=e.oAB({type:a}),a.\u0275inj=e.cJS({imports:[d.u5,s.vV,n.Ps,d.UX]}),a})()},811:(k,f,c)=>{c.d(f,{A9:()=>i,Yi:()=>r,vV:()=>y});var e=c(2687),d=c(1281),s=c(5017),n=c(4650),T=c(4006),m=c(3238);const v=["button"],M=["*"],_=new n.OlP("MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS"),b=new n.OlP("MatButtonToggleGroup"),Z={provide:T.JU,useExisting:(0,n.Gpc)(()=>i),multi:!0};let B=0;class a{constructor(p,t){this.source=p,this.value=t}}let i=(()=>{class u{constructor(t,o){this._changeDetector=t,this._vertical=!1,this._multiple=!1,this._disabled=!1,this._controlValueAccessorChangeFn=()=>{},this._onTouched=()=>{},this._name="mat-button-toggle-group-"+B++,this.valueChange=new n.vpe,this.change=new n.vpe,this.appearance=o&&o.appearance?o.appearance:"standard"}get name(){return this._name}set name(t){this._name=t,this._markButtonsForCheck()}get vertical(){return this._vertical}set vertical(t){this._vertical=(0,d.Ig)(t)}get value(){const t=this._selectionModel?this._selectionModel.selected:[];return this.multiple?t.map(o=>o.value):t[0]?t[0].value:void 0}set value(t){this._setSelectionByValue(t),this.valueChange.emit(this.value)}get selected(){const t=this._selectionModel?this._selectionModel.selected:[];return this.multiple?t:t[0]||null}get multiple(){return this._multiple}set multiple(t){this._multiple=(0,d.Ig)(t),this._markButtonsForCheck()}get disabled(){return this._disabled}set disabled(t){this._disabled=(0,d.Ig)(t),this._markButtonsForCheck()}ngOnInit(){this._selectionModel=new s.Ov(this.multiple,void 0,!1)}ngAfterContentInit(){this._selectionModel.select(...this._buttonToggles.filter(t=>t.checked))}writeValue(t){this.value=t,this._changeDetector.markForCheck()}registerOnChange(t){this._controlValueAccessorChangeFn=t}registerOnTouched(t){this._onTouched=t}setDisabledState(t){this.disabled=t}_emitChangeEvent(t){const o=new a(t,this.value);this._controlValueAccessorChangeFn(o.value),this.change.emit(o)}_syncButtonToggle(t,o,g=!1,h=!1){!this.multiple&&this.selected&&!t.checked&&(this.selected.checked=!1),this._selectionModel?o?this._selectionModel.select(t):this._selectionModel.deselect(t):h=!0,h?Promise.resolve().then(()=>this._updateModelValue(t,g)):this._updateModelValue(t,g)}_isSelected(t){return this._selectionModel&&this._selectionModel.isSelected(t)}_isPrechecked(t){return!(typeof this._rawValue>"u")&&(this.multiple&&Array.isArray(this._rawValue)?this._rawValue.some(o=>null!=t.value&&o===t.value):t.value===this._rawValue)}_setSelectionByValue(t){this._rawValue=t,this._buttonToggles&&(this.multiple&&t?(Array.isArray(t),this._clearSelection(),t.forEach(o=>this._selectValue(o))):(this._clearSelection(),this._selectValue(t)))}_clearSelection(){this._selectionModel.clear(),this._buttonToggles.forEach(t=>t.checked=!1)}_selectValue(t){const o=this._buttonToggles.find(g=>null!=g.value&&g.value===t);o&&(o.checked=!0,this._selectionModel.select(o))}_updateModelValue(t,o){o&&this._emitChangeEvent(t),this.valueChange.emit(this.value)}_markButtonsForCheck(){this._buttonToggles?.forEach(t=>t._markForCheck())}}return u.\u0275fac=function(t){return new(t||u)(n.Y36(n.sBO),n.Y36(_,8))},u.\u0275dir=n.lG2({type:u,selectors:[["mat-button-toggle-group"]],contentQueries:function(t,o,g){if(1&t&&n.Suo(g,r,5),2&t){let h;n.iGM(h=n.CRH())&&(o._buttonToggles=h)}},hostAttrs:["role","group",1,"mat-button-toggle-group"],hostVars:5,hostBindings:function(t,o){2&t&&(n.uIk("aria-disabled",o.disabled),n.ekj("mat-button-toggle-vertical",o.vertical)("mat-button-toggle-group-appearance-standard","standard"===o.appearance))},inputs:{appearance:"appearance",name:"name",vertical:"vertical",value:"value",multiple:"multiple",disabled:"disabled"},outputs:{valueChange:"valueChange",change:"change"},exportAs:["matButtonToggleGroup"],features:[n._Bn([Z,{provide:b,useExisting:u}])]}),u})();const l=(0,m.Kr)(class{});let r=(()=>{class u extends l{constructor(t,o,g,h,x,E){super(),this._changeDetectorRef=o,this._elementRef=g,this._focusMonitor=h,this._checked=!1,this.ariaLabelledby=null,this._disabled=!1,this.change=new n.vpe;const A=Number(x);this.tabIndex=A||0===A?A:null,this.buttonToggleGroup=t,this.appearance=E&&E.appearance?E.appearance:"standard"}get buttonId(){return`${this.id}-button`}get appearance(){return this.buttonToggleGroup?this.buttonToggleGroup.appearance:this._appearance}set appearance(t){this._appearance=t}get checked(){return this.buttonToggleGroup?this.buttonToggleGroup._isSelected(this):this._checked}set checked(t){const o=(0,d.Ig)(t);o!==this._checked&&(this._checked=o,this.buttonToggleGroup&&this.buttonToggleGroup._syncButtonToggle(this,this._checked),this._changeDetectorRef.markForCheck())}get disabled(){return this._disabled||this.buttonToggleGroup&&this.buttonToggleGroup.disabled}set disabled(t){this._disabled=(0,d.Ig)(t)}ngOnInit(){const t=this.buttonToggleGroup;this.id=this.id||"mat-button-toggle-"+B++,t&&(t._isPrechecked(this)?this.checked=!0:t._isSelected(this)!==this._checked&&t._syncButtonToggle(this,this._checked))}ngAfterViewInit(){this._focusMonitor.monitor(this._elementRef,!0)}ngOnDestroy(){const t=this.buttonToggleGroup;this._focusMonitor.stopMonitoring(this._elementRef),t&&t._isSelected(this)&&t._syncButtonToggle(this,!1,!1,!0)}focus(t){this._buttonElement.nativeElement.focus(t)}_onButtonClick(){const t=!!this._isSingleSelector()||!this._checked;t!==this._checked&&(this._checked=t,this.buttonToggleGroup&&(this.buttonToggleGroup._syncButtonToggle(this,this._checked,!0),this.buttonToggleGroup._onTouched())),this.change.emit(new a(this,this.value))}_markForCheck(){this._changeDetectorRef.markForCheck()}_getButtonName(){return this._isSingleSelector()?this.buttonToggleGroup.name:this.name||null}_isSingleSelector(){return this.buttonToggleGroup&&!this.buttonToggleGroup.multiple}}return u.\u0275fac=function(t){return new(t||u)(n.Y36(b,8),n.Y36(n.sBO),n.Y36(n.SBq),n.Y36(e.tE),n.$8M("tabindex"),n.Y36(_,8))},u.\u0275cmp=n.Xpm({type:u,selectors:[["mat-button-toggle"]],viewQuery:function(t,o){if(1&t&&n.Gf(v,5),2&t){let g;n.iGM(g=n.CRH())&&(o._buttonElement=g.first)}},hostAttrs:["role","presentation",1,"mat-button-toggle"],hostVars:12,hostBindings:function(t,o){1&t&&n.NdJ("focus",function(){return o.focus()}),2&t&&(n.uIk("aria-label",null)("aria-labelledby",null)("id",o.id)("name",null),n.ekj("mat-button-toggle-standalone",!o.buttonToggleGroup)("mat-button-toggle-checked",o.checked)("mat-button-toggle-disabled",o.disabled)("mat-button-toggle-appearance-standard","standard"===o.appearance))},inputs:{disableRipple:"disableRipple",ariaLabel:["aria-label","ariaLabel"],ariaLabelledby:["aria-labelledby","ariaLabelledby"],id:"id",name:"name",value:"value",tabIndex:"tabIndex",appearance:"appearance",checked:"checked",disabled:"disabled"},outputs:{change:"change"},exportAs:["matButtonToggle"],features:[n.qOj],ngContentSelectors:M,decls:6,vars:9,consts:[["type","button",1,"mat-button-toggle-button","mat-focus-indicator",3,"id","disabled","click"],["button",""],[1,"mat-button-toggle-label-content"],[1,"mat-button-toggle-focus-overlay"],["matRipple","",1,"mat-button-toggle-ripple",3,"matRippleTrigger","matRippleDisabled"]],template:function(t,o){if(1&t&&(n.F$t(),n.TgZ(0,"button",0,1),n.NdJ("click",function(){return o._onButtonClick()}),n.TgZ(2,"span",2),n.Hsn(3),n.qZA()(),n._UZ(4,"span",3)(5,"span",4)),2&t){const g=n.MAs(1);n.Q6J("id",o.buttonId)("disabled",o.disabled||null),n.uIk("tabindex",o.disabled?-1:o.tabIndex)("aria-pressed",o.checked)("name",o._getButtonName())("aria-label",o.ariaLabel)("aria-labelledby",o.ariaLabelledby),n.xp6(5),n.Q6J("matRippleTrigger",g)("matRippleDisabled",o.disableRipple||o.disabled)}},dependencies:[m.wG],styles:[".mat-button-toggle-standalone,.mat-button-toggle-group{position:relative;display:inline-flex;flex-direction:row;white-space:nowrap;overflow:hidden;border-radius:2px;-webkit-tap-highlight-color:rgba(0,0,0,0);transform:translateZ(0)}.cdk-high-contrast-active .mat-button-toggle-standalone,.cdk-high-contrast-active .mat-button-toggle-group{outline:solid 1px}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border-radius:4px}.cdk-high-contrast-active .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.cdk-high-contrast-active .mat-button-toggle-group-appearance-standard{outline:0}.mat-button-toggle-vertical{flex-direction:column}.mat-button-toggle-vertical .mat-button-toggle-label-content{display:block}.mat-button-toggle{white-space:nowrap;position:relative}.mat-button-toggle .mat-icon svg{vertical-align:top}.mat-button-toggle.cdk-keyboard-focused .mat-button-toggle-focus-overlay{opacity:1}.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay{opacity:.04}.mat-button-toggle-appearance-standard.cdk-keyboard-focused:not(.mat-button-toggle-disabled) .mat-button-toggle-focus-overlay{opacity:.12}@media(hover: none){.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay{display:none}}.mat-button-toggle-label-content{-webkit-user-select:none;user-select:none;display:inline-block;line-height:36px;padding:0 16px;position:relative}.mat-button-toggle-appearance-standard .mat-button-toggle-label-content{padding:0 12px}.mat-button-toggle-label-content>*{vertical-align:middle}.mat-button-toggle-focus-overlay{top:0;left:0;right:0;bottom:0;position:absolute;border-radius:inherit;pointer-events:none;opacity:0}.cdk-high-contrast-active .mat-button-toggle-checked .mat-button-toggle-focus-overlay{border-bottom:solid 36px;opacity:.5;height:0}.cdk-high-contrast-active .mat-button-toggle-checked:hover .mat-button-toggle-focus-overlay{opacity:.6}.cdk-high-contrast-active .mat-button-toggle-checked.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay{border-bottom:solid 500px}.mat-button-toggle .mat-button-toggle-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-button-toggle-button{border:0;background:none;color:inherit;padding:0;margin:0;font:inherit;outline:none;width:100%;cursor:pointer}.mat-button-toggle-disabled .mat-button-toggle-button{cursor:default}.mat-button-toggle-button::-moz-focus-inner{border:0}"],encapsulation:2,changeDetection:0}),u})(),y=(()=>{class u{}return u.\u0275fac=function(t){return new(t||u)},u.\u0275mod=n.oAB({type:u}),u.\u0275inj=n.cJS({imports:[m.BQ,m.si,m.BQ]}),u})()}}]);