6959.aba448a31495f186.js

"use strict";(self.webpackChunkmaterial_angular_io=self.webpackChunkmaterial_angular_io||[]).push([[6959],{6959:(D,m,s)=>{s.r(m),s.d(m,{BadgeHarnessExample:()=>z,BadgeOverviewExample:()=>E});var e=s(4438),g=s(9213),o=s(8834),c=s(6600),l=s(8617),f=s(177);let _=0;const b="mat-badge-content",d=new Set;let B=(()=>{class i{static#e=this.\u0275fac=function(a){return new(a||i)};static#t=this.\u0275cmp=e.VBU({type:i,selectors:[["ng-component"]],standalone:!0,features:[e.aNF],decls:0,vars:0,template:function(a,n){},styles:[".mat-badge{position:relative}.mat-badge.mat-badge{overflow:visible}.mat-badge-content{position:absolute;text-align:center;display:inline-block;transition:transform 200ms ease-in-out;transform:scale(0.6);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box;pointer-events:none;background-color:var(--mat-badge-background-color);color:var(--mat-badge-text-color);font-family:var(--mat-badge-text-font);font-weight:var(--mat-badge-text-weight);border-radius:var(--mat-badge-container-shape)}.cdk-high-contrast-active .mat-badge-content{outline:solid 1px;border-radius:0}.mat-badge-above .mat-badge-content{bottom:100%}.mat-badge-below .mat-badge-content{top:100%}.mat-badge-before .mat-badge-content{right:100%}[dir=rtl] .mat-badge-before .mat-badge-content{right:auto;left:100%}.mat-badge-after .mat-badge-content{left:100%}[dir=rtl] .mat-badge-after .mat-badge-content{left:auto;right:100%}.mat-badge-disabled .mat-badge-content{background-color:var(--mat-badge-disabled-state-background-color);color:var(--mat-badge-disabled-state-text-color)}.mat-badge-hidden .mat-badge-content{display:none}.ng-animate-disabled .mat-badge-content,.mat-badge-content._mat-animation-noopable{transition:none}.mat-badge-content.mat-badge-active{transform:none}.mat-badge-small .mat-badge-content{width:var(--mat-badge-legacy-small-size-container-size, unset);height:var(--mat-badge-legacy-small-size-container-size, unset);min-width:var(--mat-badge-small-size-container-size, unset);min-height:var(--mat-badge-small-size-container-size, unset);line-height:var(--mat-badge-legacy-small-size-container-size, var(--mat-badge-small-size-container-size));padding:var(--mat-badge-small-size-container-padding);font-size:var(--mat-badge-small-size-text-size);margin:var(--mat-badge-small-size-container-offset)}.mat-badge-small.mat-badge-overlap .mat-badge-content{margin:var(--mat-badge-small-size-container-overlap-offset)}.mat-badge-medium .mat-badge-content{width:var(--mat-badge-legacy-container-size, unset);height:var(--mat-badge-legacy-container-size, unset);min-width:var(--mat-badge-container-size, unset);min-height:var(--mat-badge-container-size, unset);line-height:var(--mat-badge-legacy-container-size, var(--mat-badge-container-size));padding:var(--mat-badge-container-padding);font-size:var(--mat-badge-text-size);margin:var(--mat-badge-container-offset)}.mat-badge-medium.mat-badge-overlap .mat-badge-content{margin:var(--mat-badge-container-overlap-offset)}.mat-badge-large .mat-badge-content{width:var(--mat-badge-legacy-large-size-container-size, unset);height:var(--mat-badge-legacy-large-size-container-size, unset);min-width:var(--mat-badge-large-size-container-size, unset);min-height:var(--mat-badge-large-size-container-size, unset);line-height:var(--mat-badge-legacy-large-size-container-size, var(--mat-badge-large-size-container-size));padding:var(--mat-badge-large-size-container-padding);font-size:var(--mat-badge-large-size-text-size);margin:var(--mat-badge-large-size-container-offset)}.mat-badge-large.mat-badge-overlap .mat-badge-content{margin:var(--mat-badge-large-size-container-overlap-offset)}"],encapsulation:2,changeDetection:0})}return i})(),h=(()=>{class i{get color(){return this._color}set color(t){this._setColor(t),this._color=t}get content(){return this._content}set content(t){this._updateRenderedContent(t)}get description(){return this._description}set description(t){this._updateDescription(t)}constructor(t,a,n,p,y){this._ngZone=t,this._elementRef=a,this._ariaDescriber=n,this._renderer=p,this._animationMode=y,this._color="primary",this.overlap=!0,this.position="above after",this.size="medium",this._id=_++,this._isInitialized=!1,this._interactivityChecker=(0,e.WQX)(l.Z7),this._document=(0,e.WQX)(f.qQ);const r=(0,e.WQX)(e.o8S);if(!d.has(r)){d.add(r);const u=(0,e.a0P)(B,{environmentInjector:(0,e.WQX)(e.uvJ)});r.onDestroy(()=>{d.delete(r),0===d.size&&u.destroy()})}}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._inlineBadgeDescription?.remove()),this._ariaDescriber.removeDescription(this._elementRef.nativeElement,this.description)}_isHostInteractive(){return this._interactivityChecker.isFocusable(this._elementRef.nativeElement,{ignoreVisibility:!0})}_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(b),"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}_updateDescription(t){this._ariaDescriber.removeDescription(this._elementRef.nativeElement,this.description),(!t||this._isHostInteractive())&&this._removeInlineDescription(),this._description=t,this._isHostInteractive()?this._ariaDescriber.describe(this._elementRef.nativeElement,t):this._updateInlineDescription()}_updateInlineDescription(){this._inlineBadgeDescription||(this._inlineBadgeDescription=this._document.createElement("span"),this._inlineBadgeDescription.classList.add("cdk-visually-hidden")),this._inlineBadgeDescription.textContent=this.description,this._badgeElement?.appendChild(this._inlineBadgeDescription)}_removeInlineDescription(){this._inlineBadgeDescription?.remove(),this._inlineBadgeDescription=void 0}_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 > .${b}`);for(const a of Array.from(t))a!==this._badgeElement&&a.remove()}static#e=this.\u0275fac=function(a){return new(a||i)(e.rXU(e.SKi),e.rXU(e.aKT),e.rXU(l.vr),e.rXU(e.sFG),e.rXU(e.bc$,8))};static#t=this.\u0275dir=e.FsC({type:i,selectors:[["","matBadge",""]],hostAttrs:[1,"mat-badge"],hostVars:20,hostBindings:function(a,n){2&a&&e.AVh("mat-badge-overlap",n.overlap)("mat-badge-above",n.isAbove())("mat-badge-below",!n.isAbove())("mat-badge-before",!n.isAfter())("mat-badge-after",n.isAfter())("mat-badge-small","small"===n.size)("mat-badge-medium","medium"===n.size)("mat-badge-large","large"===n.size)("mat-badge-hidden",n.hidden||!n.content)("mat-badge-disabled",n.disabled)},inputs:{color:[0,"matBadgeColor","color"],overlap:[2,"matBadgeOverlap","overlap",e.L39],disabled:[2,"matBadgeDisabled","disabled",e.L39],position:[0,"matBadgePosition","position"],content:[0,"matBadge","content"],description:[0,"matBadgeDescription","description"],size:[0,"matBadgeSize","size"],hidden:[2,"matBadgeHidden","hidden",e.L39]},standalone:!0,features:[e.GFd]})}return i})(),v=(()=>{class i{static#e=this.\u0275fac=function(a){return new(a||i)};static#t=this.\u0275mod=e.$C({type:i});static#a=this.\u0275inj=e.G2t({imports:[l.Pd,c.yE,c.yE]})}return i})(),E=(()=>{class i{constructor(){this.hidden=!1}toggleBadgeVisibility(){this.hidden=!this.hidden}static#e=this.\u0275fac=function(a){return new(a||i)};static#t=this.\u0275cmp=e.VBU({type:i,selectors:[["badge-overview-example"]],standalone:!0,features:[e.aNF],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,"click","matBadgeHidden"],["matBadge","15","matBadgeColor","warn"],[1,"cdk-visually-hidden"]],template:function(a,n){1&a&&(e.j41(0,"div",0),e.EFF(1,"Text with a badge"),e.k0s(),e.j41(2,"div",1),e.EFF(3,"Text with large badge"),e.k0s(),e.j41(4,"div",2),e.EFF(5," Button with a badge on the left\n"),e.j41(6,"button",3),e.EFF(7," Action "),e.k0s()(),e.j41(8,"div",2),e.EFF(9," Button toggles badge visibility\n"),e.j41(10,"button",4),e.bIt("click",function(){return n.toggleBadgeVisibility()}),e.EFF(11," Hide "),e.k0s()(),e.j41(12,"div",2),e.EFF(13," Icon with a badge\n"),e.j41(14,"mat-icon",5),e.EFF(15,"home"),e.k0s(),e.j41(16,"span",6),e.EFF(17," Example with a home icon with overlaid badge showing the number 15 "),e.k0s()()),2&a&&(e.R7$(10),e.Y8G("matBadgeHidden",n.hidden))},dependencies:[v,h,o.Hl,o.$z,g.m_,g.An],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}"]})}return i})(),z=(()=>{class i{constructor(){this.simpleContent="S",this.overlap=!0,this.disabled=!0}static#e=this.\u0275fac=function(a){return new(a||i)};static#t=this.\u0275cmp=e.VBU({type:i,selectors:[["badge-harness-example"]],standalone:!0,features:[e.aNF],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(a,n){1&a&&(e.j41(0,"button",0),e.EFF(1,"Simple"),e.k0s(),e.j41(2,"button",1),e.EFF(3,"Overlapping"),e.k0s(),e.j41(4,"button",2),e.EFF(5,"Disabled"),e.k0s()),2&a&&(e.Y8G("matBadge",n.simpleContent),e.R7$(2),e.Y8G("matBadgeOverlap",n.overlap),e.R7$(2),e.Y8G("matBadgeDisabled",n.disabled))},dependencies:[o.Hl,o.$z,v,h],encapsulation:2})}return i})()}}]);