2515.056b1a30ab4513c4.js

"use strict";(self.webpackChunkmaterial_angular_io=self.webpackChunkmaterial_angular_io||[]).push([[2515],{2515:(se,O,p)=>{p.r(O),p.d(O,{CdkListboxActivedescendantExample:()=>A,CdkListboxCompareWithExample:()=>Z,CdkListboxCustomNavigationExample:()=>D,CdkListboxCustomTypeaheadExample:()=>E,CdkListboxDisabledExample:()=>I,CdkListboxExamplesModule:()=>le,CdkListboxFormsValidationExample:()=>w,CdkListboxHorizontalExample:()=>F,CdkListboxMultipleExample:()=>V,CdkListboxOverviewExample:()=>U,CdkListboxReactiveFormsExample:()=>P,CdkListboxTemplateFormsExample:()=>q,CdkListboxValueBindingExample:()=>S});var e=p(4650),r=p(6895),s=p(4006),J=p(2687),d=p(9521),b=p(1281),K=p(5017),k=p(8929),N=p(8514),L=p(6787),_=p(1059),W=p(7545),M=p(4850),C=p(7625),z=p(2198),R=p(445);let T=0;class Q extends K.Ov{constructor(o=!1,t,n=!0,l){super(!0,t,n,l),this.multiple=o}isMultipleSelection(){return this.multiple}select(...o){return this.multiple?super.select(...o):super.setSelection(...o)}}let x=(()=>{class i{constructor(){this._generatedId="cdk-option-"+T++,this._disabled=!1,this.element=(0,e.f3M)(e.SBq).nativeElement,this.listbox=(0,e.f3M)(u),this.destroyed=new k.xQ,this._clicked=new k.xQ,this._active=!1}get id(){return this._id||this._generatedId}set id(t){this._id=t}get disabled(){return this.listbox.disabled||this._disabled}set disabled(t){this._disabled=(0,b.Ig)(t)}get enabledTabIndex(){return void 0===this._enabledTabIndex?this.listbox.enabledTabIndex:this._enabledTabIndex}set enabledTabIndex(t){this._enabledTabIndex=t}ngOnDestroy(){this.destroyed.next(),this.destroyed.complete()}isSelected(){return this.listbox.isSelected(this)}isActive(){return this._active}toggle(){this.listbox.toggle(this)}select(){this.listbox.select(this)}deselect(){this.listbox.deselect(this)}focus(){this.element.focus()}getLabel(){return(this.typeaheadLabel??this.element.textContent?.trim())||""}setActiveStyles(){this._active=!0}setInactiveStyles(){this._active=!1}_handleFocus(){this.listbox.useActiveDescendant&&(this.listbox._setActiveOption(this),this.listbox.focus())}_getTabIndex(){return this.listbox.useActiveDescendant||this.disabled?-1:this.isActive()?this.enabledTabIndex:-1}}return i.\u0275fac=function(t){return new(t||i)},i.\u0275dir=e.lG2({type:i,selectors:[["","cdkOption",""]],hostAttrs:["role","option",1,"cdk-option"],hostVars:6,hostBindings:function(t,n){1&t&&e.NdJ("click",function(a){return n._clicked.next(a)})("focus",function(){return n._handleFocus()}),2&t&&(e.Ikx("id",n.id),e.uIk("aria-selected",n.isSelected())("tabindex",n._getTabIndex())("aria-disabled",n.disabled),e.ekj("cdk-option-active",n.isActive()))},inputs:{id:"id",value:["cdkOption","value"],typeaheadLabel:["cdkOptionTypeaheadLabel","typeaheadLabel"],disabled:["cdkOptionDisabled","disabled"],enabledTabIndex:["tabindex","enabledTabIndex"]},exportAs:["cdkOption"]}),i})(),u=(()=>{class i{constructor(){this._generatedId="cdk-listbox-"+T++,this._disabled=!1,this._useActiveDescendant=!1,this._orientation="vertical",this._navigationWrapDisabled=!1,this._navigateDisabledOptions=!1,this.valueChange=new k.xQ,this.selectionModel=new Q,this.destroyed=new k.xQ,this.element=(0,e.f3M)(e.SBq).nativeElement,this.changeDetectorRef=(0,e.f3M)(e.sBO),this._invalid=!1,this._lastTriggered=null,this._onTouched=()=>{},this._onChange=()=>{},this._optionClicked=(0,N.P)(()=>this.options.changes.pipe((0,_.O)(this.options),(0,W.w)(t=>(0,L.T)(...t.map(n=>n._clicked.pipe((0,M.U)(l=>({option:n,event:l})))))))),this._dir=(0,e.f3M)(R.Is,{optional:!0}),this._skipDisabledPredicate=t=>t.disabled,this._skipNonePredicate=()=>!1}get id(){return this._id||this._generatedId}set id(t){this._id=t}get enabledTabIndex(){return void 0===this._enabledTabIndex?0:this._enabledTabIndex}set enabledTabIndex(t){this._enabledTabIndex=t}get value(){return this._invalid?[]:this.selectionModel.selected}set value(t){this._setSelection(t)}get multiple(){return this.selectionModel.multiple}set multiple(t){this.selectionModel.multiple=(0,b.Ig)(t),this.options&&this._updateInternalValue()}get disabled(){return this._disabled}set disabled(t){this._disabled=(0,b.Ig)(t)}get useActiveDescendant(){return this._useActiveDescendant}set useActiveDescendant(t){this._useActiveDescendant=(0,b.Ig)(t)}get orientation(){return this._orientation}set orientation(t){this._orientation="horizontal"===t?"horizontal":"vertical","horizontal"===t?this.listKeyManager?.withHorizontalOrientation(this._dir?.value||"ltr"):this.listKeyManager?.withVerticalOrientation()}get compareWith(){return this.selectionModel.compareWith}set compareWith(t){this.selectionModel.compareWith=t}get navigationWrapDisabled(){return this._navigationWrapDisabled}set navigationWrapDisabled(t){this._navigationWrapDisabled=(0,b.Ig)(t),this.listKeyManager?.withWrap(!this._navigationWrapDisabled)}get navigateDisabledOptions(){return this._navigateDisabledOptions}set navigateDisabledOptions(t){this._navigateDisabledOptions=(0,b.Ig)(t),this.listKeyManager?.skipPredicate(this._navigateDisabledOptions?this._skipNonePredicate:this._skipDisabledPredicate)}ngAfterContentInit(){this._initKeyManager(),(0,L.T)(this.selectionModel.changed,this.options.changes).pipe((0,_.O)(null),(0,C.R)(this.destroyed)).subscribe(()=>this._updateInternalValue()),this._optionClicked.pipe((0,z.h)(({option:t})=>!t.disabled),(0,C.R)(this.destroyed)).subscribe(({option:t,event:n})=>this._handleOptionClicked(t,n))}ngOnDestroy(){this.listKeyManager?.destroy(),this.destroyed.next(),this.destroyed.complete()}toggle(t){this.toggleValue(t.value)}toggleValue(t){this._invalid&&this.selectionModel.clear(!1),this.selectionModel.toggle(t)}select(t){this.selectValue(t.value)}selectValue(t){this._invalid&&this.selectionModel.clear(!1),this.selectionModel.select(t)}deselect(t){this.deselectValue(t.value)}deselectValue(t){this._invalid&&this.selectionModel.clear(!1),this.selectionModel.deselect(t)}setAllSelected(t){t?(this._invalid&&this.selectionModel.clear(!1),this.selectionModel.select(...this.options.map(n=>n.value))):this.selectionModel.clear()}isSelected(t){return this.isValueSelected(t.value)}isValueSelected(t){return!this._invalid&&this.selectionModel.isSelected(t)}registerOnChange(t){this._onChange=t}registerOnTouched(t){this._onTouched=t}writeValue(t){this._setSelection(t),this._verifyOptionValues()}setDisabledState(t){this.disabled=t}focus(){this.element.focus()}triggerOption(t){t&&!t.disabled&&(this._lastTriggered=t,(this.multiple?this.selectionModel.toggle(t.value):this.selectionModel.select(t.value))&&(this._onChange(this.value),this.valueChange.next({value:this.value,listbox:this,option:t})))}triggerRange(t,n,l,a){if(this.disabled||t&&t.disabled)return;this._lastTriggered=t;const c=this.compareWith??Object.is,g=[...this.options].slice(Math.max(0,Math.min(n,l)),Math.min(this.options.length,Math.max(n,l)+1)).filter(v=>!v.disabled).map(v=>v.value),m=[...this.value];for(const v of g){const y=m.findIndex(ae=>c(ae,v));a&&-1===y?m.push(v):!a&&-1!==y&&m.splice(y,1)}this.selectionModel.setSelection(...m)&&(this._onChange(this.value),this.valueChange.next({value:this.value,listbox:this,option:t}))}_setActiveOption(t){this.listKeyManager.setActiveItem(t)}_handleFocus(){this.useActiveDescendant||(this.listKeyManager.setNextItemActive(),this._focusActiveOption())}_handleKeydown(t){if(this._disabled)return;const{keyCode:n}=t,l=this.listKeyManager.activeItemIndex,a=["ctrlKey","metaKey"];if(this.multiple&&n===d.A&&(0,d.Vb)(t,...a))return this.triggerRange(null,0,this.options.length-1,this.options.length!==this.value.length),void t.preventDefault();if(this.multiple&&(n===d.L_||n===d.K5)&&(0,d.Vb)(t,"shiftKey"))return this.listKeyManager.activeItem&&null!=this.listKeyManager.activeItemIndex&&this.triggerRange(this.listKeyManager.activeItem,this._getLastTriggeredIndex()??this.listKeyManager.activeItemIndex,this.listKeyManager.activeItemIndex,!this.listKeyManager.activeItem.isSelected()),void t.preventDefault();if(this.multiple&&n===d.Sd&&(0,d.Vb)(t,...a)&&(0,d.Vb)(t,"shiftKey")){const g=this.listKeyManager.activeItem;if(g){const m=this.listKeyManager.activeItemIndex;this.listKeyManager.setFirstItemActive(),this.triggerRange(g,m,this.listKeyManager.activeItemIndex,!g.isSelected())}return void t.preventDefault()}if(this.multiple&&n===d.uR&&(0,d.Vb)(t,...a)&&(0,d.Vb)(t,"shiftKey")){const g=this.listKeyManager.activeItem;if(g){const m=this.listKeyManager.activeItemIndex;this.listKeyManager.setLastItemActive(),this.triggerRange(g,m,this.listKeyManager.activeItemIndex,!g.isSelected())}return void t.preventDefault()}if(n===d.L_||n===d.K5)return this.triggerOption(this.listKeyManager.activeItem),void t.preventDefault();const c=n===d.LH||n===d.JH||n===d.oh||n===d.SV||n===d.Sd||n===d.uR;this.listKeyManager.onKeydown(t),c&&t.shiftKey&&l!==this.listKeyManager.activeItemIndex&&this.triggerOption(this.listKeyManager.activeItem)}_handleFocusOut(t){const n=t.relatedTarget;this.element!==n&&!this.element.contains(n)&&this._onTouched()}_getAriaActiveDescendant(){return this._useActiveDescendant?this.listKeyManager?.activeItem?.id:null}_getTabIndex(){return this.disabled?-1:this.useActiveDescendant||!this.listKeyManager.activeItem?this.enabledTabIndex:-1}_initKeyManager(){this.listKeyManager=new J.s1(this.options).withWrap(!this._navigationWrapDisabled).withTypeAhead().withHomeAndEnd().withAllowedModifierKeys(["shiftKey"]).skipPredicate(this._navigateDisabledOptions?this._skipNonePredicate:this._skipDisabledPredicate),"vertical"===this.orientation?this.listKeyManager.withVerticalOrientation():this.listKeyManager.withHorizontalOrientation(this._dir?.value||"ltr"),this.listKeyManager.change.subscribe(()=>this._focusActiveOption())}_focusActiveOption(){this.useActiveDescendant||this.listKeyManager.activeItem?.focus(),this.changeDetectorRef.markForCheck()}_setSelection(t){this._invalid&&this.selectionModel.clear(!1),this.selectionModel.setSelection(...this._coerceValue(t))}_updateInternalValue(){const t=new Map;this.selectionModel.sort((l,a)=>this._getIndexForValue(t,l)-this._getIndexForValue(t,a));const n=this.selectionModel.selected;this._invalid=!this.multiple&&n.length>1||!!this._getInvalidOptionValues(n).length,this.changeDetectorRef.markForCheck()}_getIndexForValue(t,n){const l=this.compareWith||Object.is;if(!t.has(n)){let a=-1;for(let c=0;c<this.options.length;c++)if(l(n,this.options.get(c).value)){a=c;break}t.set(n,a)}return t.get(n)}_handleOptionClicked(t,n){n.preventDefault(),this.listKeyManager.setActiveItem(t),n.shiftKey&&this.multiple?this.triggerRange(t,this._getLastTriggeredIndex()??this.listKeyManager.activeItemIndex,this.listKeyManager.activeItemIndex,!t.isSelected()):this.triggerOption(t)}_verifyNoOptionValueCollisions(){this.options.changes.pipe((0,_.O)(this.options),(0,C.R)(this.destroyed)).subscribe(()=>{const t=this.compareWith??Object.is;for(let n=0;n<this.options.length;n++){const l=this.options.get(n);let a=null;for(let c=n+1;c<this.options.length;c++){const g=this.options.get(c);if(t(l.value,g.value)){a=g;break}}if(a)return void(this.compareWith?console.warn("Found multiple CdkOption representing the same value under the given compareWith function",{option1:l.element,option2:a.element,compareWith:this.compareWith}):console.warn("Found multiple CdkOption with the same value",{option1:l.element,option2:a.element}))}})}_verifyOptionValues(){}_coerceValue(t){return null==t?[]:(0,b.Eq)(t)}_getInvalidOptionValues(t){const n=this.compareWith||Object.is,l=(this.options||[]).map(a=>a.value);return t.filter(a=>!l.some(c=>n(a,c)))}_getLastTriggeredIndex(){const t=this.options.toArray().indexOf(this._lastTriggered);return-1===t?null:t}}return i.\u0275fac=function(t){return new(t||i)},i.\u0275dir=e.lG2({type:i,selectors:[["","cdkListbox",""]],contentQueries:function(t,n,l){if(1&t&&e.Suo(l,x,5),2&t){let a;e.iGM(a=e.CRH())&&(n.options=a)}},hostAttrs:["role","listbox",1,"cdk-listbox"],hostVars:6,hostBindings:function(t,n){1&t&&e.NdJ("focus",function(){return n._handleFocus()})("keydown",function(a){return n._handleKeydown(a)})("focusout",function(a){return n._handleFocusOut(a)}),2&t&&(e.Ikx("id",n.id),e.uIk("tabindex",n._getTabIndex())("aria-disabled",n.disabled)("aria-multiselectable",n.multiple)("aria-activedescendant",n._getAriaActiveDescendant())("aria-orientation",n.orientation))},inputs:{id:"id",enabledTabIndex:["tabindex","enabledTabIndex"],value:["cdkListboxValue","value"],multiple:["cdkListboxMultiple","multiple"],disabled:["cdkListboxDisabled","disabled"],useActiveDescendant:["cdkListboxUseActiveDescendant","useActiveDescendant"],orientation:["cdkListboxOrientation","orientation"],compareWith:["cdkListboxCompareWith","compareWith"],navigationWrapDisabled:["cdkListboxNavigationWrapDisabled","navigationWrapDisabled"],navigateDisabledOptions:["cdkListboxNavigatesDisabledOptions","navigateDisabledOptions"]},outputs:{valueChange:"cdkListboxValueChange"},exportAs:["cdkListbox"],features:[e._Bn([{provide:s.JU,useExisting:(0,e.Gpc)(()=>i),multi:!0}])]}),i})(),H=(()=>{class i{}return i.\u0275fac=function(t){return new(t||i)},i.\u0275mod=e.oAB({type:i}),i.\u0275inj=e.cJS({}),i})();function B(i,o){if(1&i&&(e.TgZ(0,"li",4),e._uU(1),e.qZA()),2&i){const t=o.$implicit;e.Q6J("cdkOption",t),e.xp6(1),e.hij(" ",t," ")}}function j(i,o){if(1&i&&(e.TgZ(0,"li",5),e._uU(1),e.qZA()),2&i){const t=o.$implicit,n=e.oxw();e.Q6J("cdkOption",t),e.xp6(1),e.hij(" ",n.formatTime(t)," ")}}function Y(i,o){if(1&i&&(e.TgZ(0,"p"),e._uU(1," Your appointment is scheduled for "),e.TgZ(2,"b"),e._uU(3),e.ALo(4,"json"),e.qZA(),e._uU(5,"\xa0\n"),e.qZA()),2&i){const t=e.oxw();e.xp6(3),e.Oqu(e.lcZ(4,1,t.formatAppointment()))}}const h='.example-listbox-container[_ngcontent-%COMP%] {\n  display: block;\n  width: 250px;\n  border: 1px solid black;\n}\n\n.example-listbox-label[_ngcontent-%COMP%] {\n  display: block;\n  padding: 5px;\n}\n\n.example-listbox[_ngcontent-%COMP%] {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.example-option[_ngcontent-%COMP%] {\n  position: relative;\n  padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected=\'true\'][_ngcontent-%COMP%]::before {\n  content: \'\';\n  display: block;\n  width: 20px;\n  height: 20px;\n  background-image: url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>\'); \n  background-size: cover;\n  position: absolute;\n  left: 2px;\n}\n\n.example-option[_ngcontent-%COMP%]:focus {\n  background: rgba(0, 0, 0, 0.2);\n}';function X(i,o){if(1&i&&(e.TgZ(0,"li",6),e._uU(1),e.qZA()),2&i){const t=o.$implicit;e.Q6J("cdkOption",t),e.xp6(1),e.hij(" ",t," ")}}function $(i,o){if(1&i&&(e.TgZ(0,"p"),e._uU(1),e.qZA()),2&i){const t=o.$implicit;e.xp6(1),e.Oqu(t)}}function G(i,o){if(1&i&&(e.TgZ(0,"div",7),e.YNc(1,$,2,1,"p",8),e.qZA()),2&i){const t=e.oxw();e.xp6(1),e.Q6J("ngForOf",t.getErrors())}}function ee(i,o){if(1&i&&(e.TgZ(0,"li",3),e._uU(1),e.qZA()),2&i){const t=o.$implicit;e.Q6J("cdkOption",t),e.xp6(1),e.hij(" ",t," ")}}function te(i,o){if(1&i&&(e.TgZ(0,"li",5),e._uU(1),e.qZA()),2&i){const t=o.$implicit;e.Q6J("cdkOption",t),e.xp6(1),e.hij(" ",t," ")}}function ie(i,o){if(1&i&&(e.TgZ(0,"li",5),e._uU(1),e.qZA()),2&i){const t=o.$implicit;e.Q6J("cdkOption",t),e.xp6(1),e.hij(" ",t," ")}}function ne(i,o){if(1&i&&(e.TgZ(0,"li",5),e._uU(1),e.qZA()),2&i){const t=o.$implicit;e.Q6J("cdkOption",t),e.xp6(1),e.hij(" ",t," ")}}let A=(()=>{class i{constructor(){this.features=["Hydrodynamic","Port & Starboard Attachments","Turbo Drive"]}}return i.\u0275fac=function(t){return new(t||i)},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-listbox-activedescendant-example"]],exportAs:["cdkListboxActivedescendantExample"],decls:5,vars:1,consts:[[1,"example-listbox-container"],["id","example-spatula-label",1,"example-listbox-label"],["cdkListbox","","cdkListboxMultiple","","cdkListboxUseActiveDescendant","","aria-labelledby","example-spatula-label",1,"example-listbox"],["class","example-option",3,"cdkOption",4,"ngFor","ngForOf"],[1,"example-option",3,"cdkOption"]],template:function(t,n){1&t&&(e.TgZ(0,"div",0)(1,"label",1),e._uU(2," Spatula Features "),e.qZA(),e.TgZ(3,"ul",2),e.YNc(4,B,2,2,"li",3),e.qZA()()),2&t&&(e.xp6(4),e.Q6J("ngForOf",n.features))},dependencies:[r.sg,u,x],styles:['.example-listbox-container[_ngcontent-%COMP%] {\n  display: block;\n  width: 250px;\n  border: 1px solid black;\n}\n\n.example-listbox-label[_ngcontent-%COMP%] {\n  display: block;\n  padding: 5px;\n}\n\n.example-listbox[_ngcontent-%COMP%] {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.example-option[_ngcontent-%COMP%] {\n  position: relative;\n  padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected=\'true\'][_ngcontent-%COMP%]::before {\n  content: \'\';\n  display: block;\n  width: 20px;\n  height: 20px;\n  background-image: url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>\'); \n  background-size: cover;\n  position: absolute;\n  left: 2px;\n}\n\n.example-listbox[_ngcontent-%COMP%]:focus   .cdk-option-active[_ngcontent-%COMP%] {\n  background: rgba(0, 0, 0, 0.2);\n}']}),i})();const f=new Date,oe=new Intl.DateTimeFormat(void 0,{weekday:"short",month:"short",day:"numeric",hour:"numeric",minute:"numeric"});let Z=(()=>{class i{constructor(){this.slots=[12,13,14,15].map(t=>new Date(f.getFullYear(),f.getMonth(),f.getDate()+1,t)),this.appointment=[new Date(f.getFullYear(),f.getMonth(),f.getDate()+1,14)]}compareDate(t,n){return t.getTime()===n.getTime()}formatTime(t){return oe.format(t)}formatAppointment(){return this.appointment.map(t=>this.formatTime(t))}}return i.\u0275fac=function(t){return new(t||i)},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-listbox-compare-with-example"]],exportAs:["cdkListboxCompareWithExample"],decls:6,vars:4,consts:[[1,"example-listbox-container"],["id","example-appointment-label",1,"example-listbox-label"],["cdkListbox","","aria-labelledby","example-appointment-label",1,"example-listbox",3,"cdkListboxValue","cdkListboxCompareWith","cdkListboxValueChange"],["class","example-option",3,"cdkOption",4,"ngFor","ngForOf"],[4,"ngIf"],[1,"example-option",3,"cdkOption"]],template:function(t,n){1&t&&(e.TgZ(0,"div",0)(1,"label",1),e._uU(2," Appointment Time "),e.qZA(),e.TgZ(3,"ul",2),e.NdJ("cdkListboxValueChange",function(a){return n.appointment=a.value}),e.YNc(4,j,2,2,"li",3),e.qZA()(),e.YNc(5,Y,6,3,"p",4)),2&t&&(e.xp6(3),e.Q6J("cdkListboxValue",n.appointment)("cdkListboxCompareWith",n.compareDate),e.xp6(1),e.Q6J("ngForOf",n.slots),e.xp6(1),e.Q6J("ngIf",n.appointment[0]))},dependencies:[r.sg,r.O5,u,x,r.Ts],styles:['.example-listbox-container[_ngcontent-%COMP%] {\n  display: block;\n  width: 250px;\n  border: 1px solid black;\n}\n\n.example-listbox-label[_ngcontent-%COMP%] {\n  display: block;\n  padding: 5px;\n}\n\n.example-listbox[_ngcontent-%COMP%] {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.example-option[_ngcontent-%COMP%] {\n  position: relative;\n  padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected=\'true\'][_ngcontent-%COMP%]::before {\n  content: \'\';\n  display: block;\n  width: 20px;\n  height: 20px;\n  background-image: url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>\'); \n  background-size: cover;\n  position: absolute;\n  left: 2px;\n}\n\n.example-option[_ngcontent-%COMP%]:focus {\n  background: rgba(0, 0, 0, 0.2);\n}']}),i})(),D=(()=>{class i{}return i.\u0275fac=function(t){return new(t||i)},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-listbox-custom-navigation-example"]],exportAs:["cdkListboxCustomNavigationExample"],decls:12,vars:0,consts:[[1,"example-listbox-container"],["id","example-flavor-label",1,"example-listbox-label"],["cdkListbox","","cdkListboxNavigatesDisabledOptions","","cdkListboxNavigationWrapDisabled","","aria-labelledby","example-flavor-label",1,"example-listbox"],["cdkOption","chocolate",1,"example-option"],["cdkOption","pumpkin-spice","cdkOptionDisabled","",1,"example-option"],["cdkOption","strawberry",1,"example-option"],["cdkOption","vanilla",1,"example-option"]],template:function(t,n){1&t&&(e.TgZ(0,"div",0)(1,"label",1),e._uU(2," Flavor "),e.qZA(),e.TgZ(3,"ul",2)(4,"li",3),e._uU(5," Chocolate "),e.qZA(),e.TgZ(6,"li",4),e._uU(7," Pumpkin Spice (seasonal) "),e.qZA(),e.TgZ(8,"li",5),e._uU(9," Strawberry "),e.qZA(),e.TgZ(10,"li",6),e._uU(11," Vanilla "),e.qZA()()())},dependencies:[u,x],styles:[".example-listbox-container[_ngcontent-%COMP%] {\n  display: block;\n  width: 250px;\n  border: 1px solid black;\n}\n\n.example-listbox-label[_ngcontent-%COMP%] {\n  display: block;\n  padding: 5px;\n}\n\n.example-listbox[_ngcontent-%COMP%] {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.example-option[_ngcontent-%COMP%] {\n  position: relative;\n  padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true'][_ngcontent-%COMP%]::before {\n  content: '';\n  display: block;\n  width: 20px;\n  height: 20px;\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z\"/></svg>'); \n  background-size: cover;\n  position: absolute;\n  left: 2px;\n}\n\n.example-option[aria-disabled='true'][_ngcontent-%COMP%] {\n  opacity: 0.5;\n}\n\n.example-option[aria-disabled='false'][_ngcontent-%COMP%]:focus {\n  background: rgba(0, 0, 0, 0.2);\n}"]}),i})(),E=(()=>{class i{}return i.\u0275fac=function(t){return new(t||i)},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-listbox-custom-typeahead-example"]],exportAs:["cdkListboxCustomTypeaheadExample"],decls:10,vars:3,consts:[[1,"example-listbox-container"],["id","example-satisfaction-label",1,"example-listbox-label"],["cdkListbox","","aria-labelledby","example-satisfaction-label",1,"example-listbox"],["cdkOptionTypeaheadLabel","great",1,"example-option",3,"cdkOption"],["cdkOptionTypeaheadLabel","okay",1,"example-option",3,"cdkOption"],["cdkOptionTypeaheadLabel","bad",1,"example-option",3,"cdkOption"]],template:function(t,n){1&t&&(e.TgZ(0,"div",0)(1,"label",1),e._uU(2," How was your service? "),e.qZA(),e.TgZ(3,"ul",2)(4,"li",3),e._uU(5," \u{1f600} Great "),e.qZA(),e.TgZ(6,"li",4),e._uU(7," \u{1f610} Okay "),e.qZA(),e.TgZ(8,"li",5),e._uU(9," \u{1f641} Bad "),e.qZA()()()),2&t&&(e.xp6(4),e.Q6J("cdkOption",1),e.xp6(2),e.Q6J("cdkOption",0),e.xp6(2),e.Q6J("cdkOption",-1))},dependencies:[u,x],styles:[h]}),i})(),I=(()=>{class i{constructor(){this.canDrinkCtrl=new s.NI(!1)}}return i.\u0275fac=function(t){return new(t||i)},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-listbox-disabled-example"]],exportAs:["cdkListboxDisabledExample"],decls:21,vars:4,consts:[["type","checkbox","id","can-drink",3,"formControl"],["for","can-drink"],[1,"example-listbox-container"],["id","example-wine-type-label",1,"example-listbox-label"],["cdkListbox","","aria-labelledby","example-wine-type-label",1,"example-listbox",3,"cdkListboxDisabled"],["cdkOption","cabernet",1,"example-option"],["cdkOption","syrah",1,"example-option"],["cdkOption","zinfandel","cdkOptionDisabled","",1,"example-option"],[1,"example-sold-out"],["cdkOption","riesling",1,"example-option"]],template:function(t,n){1&t&&(e.TgZ(0,"form")(1,"p"),e._UZ(2,"input",0),e._uU(3,"\xa0 "),e.TgZ(4,"label",1),e._uU(5,"I am 21 or older"),e.qZA()(),e.TgZ(6,"section")(7,"div",2)(8,"label",3),e._uU(9," Wine Selection "),e.qZA(),e.TgZ(10,"ul",4)(11,"li",5),e._uU(12," Cabernet Sauvignon "),e.qZA(),e.TgZ(13,"li",6),e._uU(14," Syrah "),e.qZA(),e.TgZ(15,"li",7),e._uU(16," Zinfandel "),e.TgZ(17,"span",8),e._uU(18,"(sold out)"),e.qZA()(),e.TgZ(19,"li",9),e._uU(20," Riesling "),e.qZA()()()()()),2&t&&(e.xp6(2),e.Q6J("formControl",n.canDrinkCtrl),e.xp6(5),e.ekj("example-disabled",!n.canDrinkCtrl.value),e.xp6(3),e.Q6J("cdkListboxDisabled",!n.canDrinkCtrl.value))},dependencies:[s._Y,s.Wl,s.JJ,s.JL,s.F,s.oH,u,x],styles:[".example-listbox-container[_ngcontent-%COMP%] {\n  display: block;\n  width: 250px;\n  border: 1px solid black;\n}\n\n.example-disabled[_ngcontent-%COMP%] {\n  border-color: rgba(0, 0, 0, 0.5);\n}\n\n.example-listbox-label[_ngcontent-%COMP%] {\n  display: block;\n  padding: 5px;\n}\n\n.example-disabled[_ngcontent-%COMP%]   .example-listbox-label[_ngcontent-%COMP%] {\n  opacity: 0.5;\n}\n\n.example-listbox[_ngcontent-%COMP%] {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n.example-option[_ngcontent-%COMP%] {\n  position: relative;\n  padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected='true'][_ngcontent-%COMP%]::before {\n  content: '';\n  display: block;\n  width: 20px;\n  height: 20px;\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" width=\"24\"><path d=\"m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z\"/></svg>'); \n  background-size: cover;\n  position: absolute;\n  left: 2px;\n}\n\n.example-option[aria-disabled='true'][_ngcontent-%COMP%] {\n  opacity: 0.5;\n}\n\n.example-option[aria-disabled='false'][_ngcontent-%COMP%]:focus {\n  background: rgba(0, 0, 0, 0.2);\n}\n\n.example-sold-out[_ngcontent-%COMP%] {\n  color: red;\n  font-size: 0.75em;\n  vertical-align: super;\n}"]}),i})(),w=(()=>{class i{constructor(){this.signs=["Rat","Ox","Tiger","Rabbit","Dragon","Snake","Horse","Goat","Monkey","Rooster","Dog","Pig"],this.signCtrl=new s.NI([],s.kI.required),this.invalid=this.signCtrl.valueChanges.pipe((0,M.U)(()=>this.signCtrl.touched&&!this.signCtrl.valid))}getErrors(){const t=[];if(this.signCtrl.hasError("required")&&t.push("You must enter your zodiac sign"),this.signCtrl.hasError("cdkListboxUnexpectedMultipleValues")&&t.push("You can only select one zodiac sign"),this.signCtrl.hasError("cdkListboxUnexpectedOptionValues")){const n=this.signCtrl.getError("cdkListboxUnexpectedOptionValues").values;t.push(`You entered an invalid zodiac sign: ${n[0]}`)}return t.length?t:null}}return i.\u0275fac=function(t){return new(t||i)},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-listbox-forms-validation-example"]],exportAs:["cdkListboxFormsValidationExample"],decls:25,vars:12,consts:[[1,"example-listbox-container"],["id","example-zodiac-sign-label",1,"example-listbox-label"],["cdkListbox","","aria-labelledby","example-zodiac-sign-label",1,"example-listbox",3,"formControl"],["class","example-option",3,"cdkOption",4,"ngFor","ngForOf"],["class","example-listbox-errors",4,"ngIf"],[3,"click"],[1,"example-option",3,"cdkOption"],[1,"example-listbox-errors"],[4,"ngFor","ngForOf"]],template:function(t,n){1&t&&(e.TgZ(0,"div",0),e.ALo(1,"async"),e.TgZ(2,"label",1),e._uU(3," Zodiac Sign "),e.qZA(),e.TgZ(4,"ul",2),e.YNc(5,X,2,2,"li",3),e.qZA()(),e.YNc(6,G,2,1,"div",4),e.ALo(7,"async"),e.TgZ(8,"p"),e._uU(9," Your zodiac sign is: "),e.TgZ(10,"b"),e._uU(11),e.ALo(12,"json"),e.qZA(),e._uU(13,"\xa0 "),e.TgZ(14,"button",5),e.NdJ("click",function(){return n.signCtrl.setValue(["Cat"])}),e._uU(15,"Set: Cat"),e.qZA(),e._uU(16,"\xa0 "),e.TgZ(17,"button",5),e.NdJ("click",function(){return n.signCtrl.setValue(["Dragon","Snake"])}),e._uU(18,"Set: Dragon, Snake"),e.qZA(),e._uU(19,"\xa0 "),e.TgZ(20,"button",5),e.NdJ("click",function(){return n.signCtrl.setValue(["Cat","Rat"])}),e._uU(21,"Set: Cat, Rat"),e.qZA(),e._uU(22,"\xa0 "),e.TgZ(23,"button",5),e.NdJ("click",function(){return n.signCtrl.setValue([])}),e._uU(24,"Clear"),e.qZA()()),2&t&&(e.ekj("example-listbox-invalid",e.lcZ(1,6,n.invalid)),e.xp6(4),e.Q6J("formControl",n.signCtrl),e.xp6(1),e.Q6J("ngForOf",n.signs),e.xp6(1),e.Q6J("ngIf",e.lcZ(7,8,n.invalid)),e.xp6(5),e.Oqu(e.lcZ(12,10,n.signCtrl.value)))},dependencies:[r.sg,r.O5,s.JJ,s.oH,u,x,r.Ov,r.Ts],styles:['.example-listbox-container[_ngcontent-%COMP%] {\n  display: block;\n  width: 250px;\n  border: 1px solid black;\n}\n\n.example-listbox-invalid[_ngcontent-%COMP%] {\n  border-color: red;\n}\n\n.example-listbox-label[_ngcontent-%COMP%] {\n  display: block;\n  padding: 5px;\n}\n\n.example-listbox-invalid[_ngcontent-%COMP%]   .example-listbox-label[_ngcontent-%COMP%] {\n  color: red;\n}\n\n.example-listbox[_ngcontent-%COMP%] {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  height: 200px;\n  overflow: auto;\n}\n\n.example-option[_ngcontent-%COMP%] {\n  position: relative;\n  padding: 5px 5px 5px 25px;\n}\n\n.example-option[aria-selected=\'true\'][_ngcontent-%COMP%]::before {\n  content: \'\';\n  display: block;\n  width: 20px;\n  height: 20px;\n  background-image: url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>\'); \n  background-size: cover;\n  position: absolute;\n  left: 2px;\n}\n\n.example-option[_ngcontent-%COMP%]:focus {\n  background: rgba(0, 0, 0, 0.2);\n}\n\n.example-listbox-errors[_ngcontent-%COMP%] {\n  color: red;\n}']}),i})(),F=(()=>{class i{constructor(){this.sizes=["XS","S","M","L","XL"]}}return i.\u0275fac=function(t){return new(t||i)},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-listbox-horizontal-example"]],exportAs:["cdkListboxhorizontalExample"],decls:4,vars:1,consts:[["id","example-shirt-size-label",1,"example-listbox-label"],["cdkListbox","","cdkListboxOrientation","horizontal","aria-labelledby","example-shirt-size-label",1,"example-listbox"],["class","example-option",3,"cdkOption",4,"ngFor","ngForOf"],[1,"example-option",3,"cdkOption"]],template:function(t,n){1&t&&(e.TgZ(0,"label",0),e._uU(1," Shirt Size\n"),e.qZA(),e.TgZ(2,"ul",1),e.YNc(3,ee,2,2,"li",2),e.qZA()),2&t&&(e.xp6(3),e.Q6J("ngForOf",n.sizes))},dependencies:[r.sg,u,x],styles:[".example-listbox[_ngcontent-%COMP%] {\n  display: flex;\n  width: 250px;\n  padding: 0;\n}\n\n.example-option[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  list-style: none;\n  padding: 12px;\n  border: solid black;\n  border-width: 1px 1px 1px 0;\n}\n\n.example-option[_ngcontent-%COMP%]:first-child {\n  border-left-width: 1px;\n}\n\n.example-option[aria-selected='true'][_ngcontent-%COMP%]::before {\n  content: '';\n  position: absolute;\n  border: 2px solid black;\n  top: 3px;\n  bottom: 3px;\n  left: 3px;\n  right: 3px;\n}\n\n.example-option[_ngcontent-%COMP%]:focus {\n  background: rgba(0, 0, 0, 0.2);\n}"]}),i})(),V=(()=>{class i{}return i.\u0275fac=function(t){return new(t||i)},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-listbox-multiple-example"]],exportAs:["cdkListboxMultipleExample"],decls:12,vars:0,consts:[[1,"example-listbox-container"],["id","example-fav-cuisine-label",1,"example-listbox-label"],["cdkListbox","","cdkListboxMultiple","","aria-labelledby","example-fav-cuisine-label",1,"example-listbox"],["cdkOption","chinese",1,"example-option"],["cdkOption","french",1,"example-option"],["cdkOption","italian",1,"example-option"],["cdkOption","japanese",1,"example-option"]],template:function(t,n){1&t&&(e.TgZ(0,"div",0)(1,"label",1),e._uU(2," Favorite cuisines "),e.qZA(),e.TgZ(3,"ul",2)(4,"li",3),e._uU(5,"Chinese"),e.qZA(),e.TgZ(6,"li",4),e._uU(7,"French"),e.qZA(),e.TgZ(8,"li",5),e._uU(9,"Italian"),e.qZA(),e.TgZ(10,"li",6),e._uU(11,"Japanese"),e.qZA()()())},dependencies:[u,x],styles:[h]}),i})(),U=(()=>{class i{}return i.\u0275fac=function(t){return new(t||i)},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-listbox-overview-example"]],exportAs:["cdkListboxOverviewExample"],decls:10,vars:0,consts:[[1,"example-listbox-container"],["id","example-fav-color-label",1,"example-listbox-label"],["cdkListbox","","aria-labelledby","example-fav-color-label",1,"example-listbox"],["cdkOption","red",1,"example-option"],["cdkOption","green",1,"example-option"],["cdkOption","blue",1,"example-option"]],template:function(t,n){1&t&&(e.TgZ(0,"div",0)(1,"label",1),e._uU(2," Favorite color "),e.qZA(),e.TgZ(3,"ul",2)(4,"li",3),e._uU(5,"Red"),e.qZA(),e.TgZ(6,"li",4),e._uU(7,"Green"),e.qZA(),e.TgZ(8,"li",5),e._uU(9,"Blue"),e.qZA()()())},dependencies:[u,x],styles:[h]}),i})(),P=(()=>{class i{constructor(){this.languages=["C++","Java","JavaScript","Python","TypeScript"],this.languageCtrl=new s.NI(["TypeScript"])}}return i.\u0275fac=function(t){return new(t||i)},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-listbox-reactive-forms-example"]],exportAs:["cdkListboxReactiveFormsExample"],decls:13,vars:5,consts:[[1,"example-listbox-container"],["id","example-language-label",1,"example-listbox-label"],["cdkListbox","","aria-labelledby","example-language-label",1,"example-listbox",3,"formControl"],["class","example-option",3,"cdkOption",4,"ngFor","ngForOf"],[3,"click"],[1,"example-option",3,"cdkOption"]],template:function(t,n){1&t&&(e.TgZ(0,"div",0)(1,"label",1),e._uU(2," Preferred Language "),e.qZA(),e.TgZ(3,"ul",2),e.YNc(4,te,2,2,"li",3),e.qZA()(),e.TgZ(5,"p"),e._uU(6," Your preferred language: "),e.TgZ(7,"b"),e._uU(8),e.ALo(9,"json"),e.qZA(),e._uU(10,"\xa0 "),e.TgZ(11,"button",4),e.NdJ("click",function(){return n.languageCtrl.reset()}),e._uU(12,"Reset"),e.qZA()()),2&t&&(e.xp6(3),e.Q6J("formControl",n.languageCtrl),e.xp6(1),e.Q6J("ngForOf",n.languages),e.xp6(4),e.Oqu(e.lcZ(9,3,n.languageCtrl.value)))},dependencies:[r.sg,s.JJ,s.oH,u,x,r.Ts],styles:[h]}),i})(),q=(()=>{class i{constructor(){this.toppings=["Extra Cheese","Mushrooms","Pepperoni","Sausage"],this.order=[]}}return i.\u0275fac=function(t){return new(t||i)},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-listbox-template-forms-example"]],exportAs:["cdkListboxTemplateFormsExample"],decls:13,vars:5,consts:[[1,"example-listbox-container"],["id","example-toppings-label",1,"example-listbox-label"],["cdkListbox","","cdkListboxMultiple","","aria-labelledby","example-toppings-label",1,"example-listbox",3,"ngModel","ngModelChange"],["class","example-option",3,"cdkOption",4,"ngFor","ngForOf"],[3,"click"],[1,"example-option",3,"cdkOption"]],template:function(t,n){1&t&&(e.TgZ(0,"div",0)(1,"label",1),e._uU(2," Choose Toppings "),e.qZA(),e.TgZ(3,"ul",2),e.NdJ("ngModelChange",function(a){return n.order=a}),e.YNc(4,ie,2,2,"li",3),e.qZA()(),e.TgZ(5,"p"),e._uU(6," Your order: "),e.TgZ(7,"b"),e._uU(8),e.ALo(9,"json"),e.qZA(),e._uU(10,"\xa0 "),e.TgZ(11,"button",4),e.NdJ("click",function(){return n.order=[]}),e._uU(12,"Reset"),e.qZA()()),2&t&&(e.xp6(3),e.Q6J("ngModel",n.order),e.xp6(1),e.Q6J("ngForOf",n.toppings),e.xp6(4),e.Oqu(e.lcZ(9,3,n.order)))},dependencies:[r.sg,s.JJ,s.On,u,x,r.Ts],styles:[h]}),i})(),S=(()=>{class i{constructor(){this.starters=["Sprigatito","Fuecoco","Quaxly"],this.starter=["Fuecoco"]}reset(){this.starter=["Fuecoco"]}}return i.\u0275fac=function(t){return new(t||i)},i.\u0275cmp=e.Xpm({type:i,selectors:[["cdk-listbox-value-binding-example"]],exportAs:["cdkListboxValueBindingExample"],decls:13,vars:5,consts:[[1,"example-listbox-container"],["id","example-starter-pokemon-label",1,"example-listbox-label"],["cdkListbox","","aria-labelledby","example-starter-pokemon-label",1,"example-listbox",3,"cdkListboxValue","cdkListboxValueChange"],["class","example-option",3,"cdkOption",4,"ngFor","ngForOf"],[3,"click"],[1,"example-option",3,"cdkOption"]],template:function(t,n){1&t&&(e.TgZ(0,"div",0)(1,"label",1),e._uU(2," Starter Pokemon "),e.qZA(),e.TgZ(3,"ul",2),e.NdJ("cdkListboxValueChange",function(a){return n.starter=a.value}),e.YNc(4,ne,2,2,"li",3),e.qZA()(),e.TgZ(5,"p"),e._uU(6," Your starter pokemon is "),e.TgZ(7,"b"),e._uU(8),e.ALo(9,"json"),e.qZA(),e._uU(10,"\xa0 "),e.TgZ(11,"button",4),e.NdJ("click",function(){return n.reset()}),e._uU(12,"Reset"),e.qZA()()),2&t&&(e.xp6(3),e.Q6J("cdkListboxValue",n.starter),e.xp6(1),e.Q6J("ngForOf",n.starters),e.xp6(4),e.Oqu(e.lcZ(9,3,n.starter)))},dependencies:[r.sg,u,x,r.Ts],styles:[h]}),i})(),le=(()=>{class i{}return i.\u0275fac=function(t){return new(t||i)},i.\u0275mod=e.oAB({type:i}),i.\u0275inj=e.cJS({imports:[r.ez,s.u5,s.UX,H]}),i})()}}]);