6493.9105b32f269b3377.js

"use strict";(self.webpackChunkmaterial_angular_io=self.webpackChunkmaterial_angular_io||[]).push([[6493],{6493:(A,r,d)=>{d.r(r),d.d(r,{BadgeExamplesModule:()=>_,BadgeHarnessExample:()=>p,BadgeOverviewExample:()=>h});var e=d(4650),s=d(3238),l=d(2687),m=d(1281);let b=0;const f=(0,s.Id)(class{}),g="mat-badge-content";let c=(()=>{class i extends f{constructor(t,a,v,E,M){super(),this._ngZone=t,this._elementRef=a,this._ariaDescriber=v,this._renderer=E,this._animationMode=M,this._color="primary",this._overlap=!0,this.position="above after",this.size="medium",this._id=b++,this._isInitialized=!1}get color(){return this._color}set color(t){this._setColor(t),this._color=t}get overlap(){return this._overlap}set overlap(t){this._overlap=(0,m.Ig)(t)}get content(){return this._content}set content(t){this._updateRenderedContent(t)}get description(){return this._description}set description(t){this._updateHostAriaDescription(t)}get hidden(){return this._hidden}set hidden(t){this._hidden=(0,m.Ig)(t)}isAbove(){return-1===this.position.indexOf("below")}isAfter(){return-1===this.position.indexOf("before")}getBadgeElement(){return this._badgeElement}ngOnInit(){this._clearExistingBadges(),this.content&&!this._badgeElement&&(this._badgeElement=this._createBadgeElement(),this._updateRenderedContent(this.content)),this._isInitialized=!0}ngOnDestroy(){this._renderer.destroyNode&&this._renderer.destroyNode(this._badgeElement),this._ariaDescriber.removeDescription(this._elementRef.nativeElement,this.description)}_createBadgeElement(){const t=this._renderer.createElement("span"),a="mat-badge-active";return t.setAttribute("id",`mat-badge-content-${this._id}`),t.setAttribute("aria-hidden","true"),t.classList.add(g),"NoopAnimations"===this._animationMode&&t.classList.add("_mat-animation-noopable"),this._elementRef.nativeElement.appendChild(t),"function"==typeof requestAnimationFrame&&"NoopAnimations"!==this._animationMode?this._ngZone.runOutsideAngular(()=>{requestAnimationFrame(()=>{t.classList.add(a)})}):t.classList.add(a),t}_updateRenderedContent(t){const a=`${t??""}`.trim();this._isInitialized&&a&&!this._badgeElement&&(this._badgeElement=this._createBadgeElement()),this._badgeElement&&(this._badgeElement.textContent=a),this._content=a}_updateHostAriaDescription(t){this._ariaDescriber.removeDescription(this._elementRef.nativeElement,this.description),t&&this._ariaDescriber.describe(this._elementRef.nativeElement,t),this._description=t}_setColor(t){const a=this._elementRef.nativeElement.classList;a.remove(`mat-badge-${this._color}`),t&&a.add(`mat-badge-${t}`)}_clearExistingBadges(){const t=this._elementRef.nativeElement.querySelectorAll(`:scope > .${g}`);for(const a of Array.from(t))a!==this._badgeElement&&a.remove()}}return i.\u0275fac=function(t){return new(t||i)(e.Y36(e.R0b),e.Y36(e.SBq),e.Y36(l.$s),e.Y36(e.Qsj),e.Y36(e.QbO,8))},i.\u0275dir=e.lG2({type:i,selectors:[["","matBadge",""]],hostAttrs:[1,"mat-badge"],hostVars:20,hostBindings:function(t,a){2&t&&e.ekj("mat-badge-overlap",a.overlap)("mat-badge-above",a.isAbove())("mat-badge-below",!a.isAbove())("mat-badge-before",!a.isAfter())("mat-badge-after",a.isAfter())("mat-badge-small","small"===a.size)("mat-badge-medium","medium"===a.size)("mat-badge-large","large"===a.size)("mat-badge-hidden",a.hidden||!a.content)("mat-badge-disabled",a.disabled)},inputs:{disabled:["matBadgeDisabled","disabled"],color:["matBadgeColor","color"],overlap:["matBadgeOverlap","overlap"],position:["matBadgePosition","position"],content:["matBadge","content"],description:["matBadgeDescription","description"],size:["matBadgeSize","size"],hidden:["matBadgeHidden","hidden"]},features:[e.qOj]}),i})(),B=(()=>{class i{}return i.\u0275fac=function(t){return new(t||i)},i.\u0275mod=e.oAB({type:i}),i.\u0275inj=e.cJS({imports:[l.rt,s.BQ,s.BQ]}),i})();var o=d(4859),u=d(7392);let h=(()=>{class i{constructor(){this.hidden=!1}toggleBadgeVisibility(){this.hidden=!this.hidden}}return i.\u0275fac=function(t){return new(t||i)},i.\u0275cmp=e.Xpm({type:i,selectors:[["badge-overview-example"]],decls:18,vars:1,consts:[["matBadge","4","matBadgeOverlap","false",1,"demo-section"],["matBadge","1","matBadgeSize","large",1,"demo-section"],[1,"demo-section"],["mat-raised-button","","color","primary","matBadge","8","matBadgePosition","before","matBadgeColor","accent"],["mat-raised-button","","matBadge","7",3,"matBadgeHidden","click"],["matBadge","15","matBadgeColor","warn"],[1,"cdk-visually-hidden"]],template:function(t,a){1&t&&(e.TgZ(0,"div",0),e._uU(1,"Text with a badge"),e.qZA(),e.TgZ(2,"div",1),e._uU(3,"Text with large badge"),e.qZA(),e.TgZ(4,"div",2),e._uU(5," Button with a badge on the left\n"),e.TgZ(6,"button",3),e._uU(7," Action "),e.qZA()(),e.TgZ(8,"div",2),e._uU(9," Button toggles badge visibility\n"),e.TgZ(10,"button",4),e.NdJ("click",function(){return a.toggleBadgeVisibility()}),e._uU(11," Hide "),e.qZA()(),e.TgZ(12,"div",2),e._uU(13," Icon with a badge\n"),e.TgZ(14,"mat-icon",5),e._uU(15,"home"),e.qZA(),e.TgZ(16,"span",6),e._uU(17," Example with a home icon with overlaid badge showing the number 15 "),e.qZA()()),2&t&&(e.xp6(10),e.Q6J("matBadgeHidden",a.hidden))},dependencies:[c,o.lW,u.Hw],styles:["[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.demo-section[_ngcontent-%COMP%]    + .demo-section[_ngcontent-%COMP%] {\n  margin-top: 16px;\n}"]}),i})(),p=(()=>{class i{constructor(){this.simpleContent="S",this.overlap=!0,this.disabled=!0}}return i.\u0275fac=function(t){return new(t||i)},i.\u0275cmp=e.Xpm({type:i,selectors:[["badge-harness-example"]],decls:6,vars:3,consts:[["mat-button","","id","simple",3,"matBadge"],["mat-button","","id","overlapping","matBadge","O",3,"matBadgeOverlap"],["mat-button","","id","disabled","matBadge","D",3,"matBadgeDisabled"]],template:function(t,a){1&t&&(e.TgZ(0,"button",0),e._uU(1,"Simple"),e.qZA(),e.TgZ(2,"button",1),e._uU(3,"Overlapping"),e.qZA(),e.TgZ(4,"button",2),e._uU(5,"Disabled"),e.qZA()),2&t&&(e.Q6J("matBadge",a.simpleContent),e.xp6(2),e.Q6J("matBadgeOverlap",a.overlap),e.xp6(2),e.Q6J("matBadgeDisabled",a.disabled))},dependencies:[c,o.lW],encapsulation:2}),i})(),_=(()=>{class i{}return i.\u0275fac=function(t){return new(t||i)},i.\u0275mod=e.oAB({type:i}),i.\u0275inj=e.cJS({imports:[B,o.ot,u.Ps]}),i})()}}]);