@sandlada/mdc/build/components/appbar/internal/base-appbar.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{property as e}from"../../../node_modules/@lit/reactive-element/decorators/property.js";import{state as t}from"../../../node_modules/@lit/reactive-element/decorators/state.js";import"../../../node_modules/lit/decorators.js";import{html as n,nothing as r}from"../../../node_modules/lit-html/lit-html.js";import{LitElement as i}from"../../../node_modules/lit-element/lit-element.js";import"../../../node_modules/lit/index.js";import{classMap as a}from"../../../node_modules/lit-html/directives/class-map.js";import"../../../node_modules/lit/directives/class-map.js";import{mixinElementInternals as o}from"../../../utils/behaviors/element-internals.js";import{composeMixin as s}from"../../../utils/compose-mixin/compose-mixin.js";import c from"../../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{mixinElevationOptions as l}from"../../elevation/elevation-options.mixin.js";import{AppBarAlignment as u,AppBarVariant as d}from"../appbar.interface.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
var f=class extends s(o,l)(i){constructor(...e){super(...e),this.variant=d.Small,this.alignment=u.Start,this.headline=``,this.subtitle=``,this.scrolled=!1,this.scrollTarget=null,this.hasLeading=!1,this.hasTrailing=!1,this.hasHeadline=!1,this.hasSubtitle=!1,this.hasSearch=!1,this.boundScrollHandler=null,this.currentScrollElement=null}connectedCallback(){super.connectedCallback(),this.setupScrollTarget()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupScrollTarget()}updated(e){super.updated(e),e.has(`scrollTarget`)&&(this.cleanupScrollTarget(),this.setupScrollTarget())}get normalizedVariant(){switch(this.variant){case`center-aligned`:return`small`;case`medium`:return`medium-flexible`;case`large`:return`large-flexible`;default:return this.variant}}get isCentered(){return this.variant===`center-aligned`||this.alignment===`center`}getRenderClasses(){return{container:!0,[this.normalizedVariant]:!0,centered:this.isCentered,scrolled:this.scrolled,"has-leading":this.hasLeading,"has-trailing":this.hasTrailing,"has-headline":this.hasHeadline||!!this.headline,"has-subtitle":this.hasSubtitle||!!this.subtitle,"has-search":this.hasSearch}}handleLeadingSlotChange(e){let t=e.target;this.hasLeading=t.assignedElements({flatten:!0}).length>0}handleTrailingSlotChange(e){let t=e.target;this.hasTrailing=t.assignedElements({flatten:!0}).length>0}handleHeadlineSlotChange(e){let t=e.target;this.hasHeadline=t.assignedElements({flatten:!0}).length>0}handleSubtitleSlotChange(e){let t=e.target;this.hasSubtitle=t.assignedElements({flatten:!0}).length>0}handleSearchSlotChange(e){let t=e.target;this.hasSearch=t.assignedElements({flatten:!0}).length>0}handleDefaultSlotChange(e){e.target.assignedElements({flatten:!0}).length>0&&(this.hasTrailing=!0)}setupScrollTarget(){let e=null;typeof this.scrollTarget==`string`?e=this.scrollTarget===`window`?window:document.querySelector(this.scrollTarget):(this.scrollTarget instanceof HTMLElement||this.scrollTarget===window)&&(e=this.scrollTarget),e&&(this.currentScrollElement=e,this.boundScrollHandler=()=>{let t=0;e===window?t=window.scrollY||document.documentElement.scrollTop:e instanceof HTMLElement&&(t=e.scrollTop);let n=t>0;this.scrolled!==n&&(this.scrolled=n)},e.addEventListener(`scroll`,this.boundScrollHandler,{passive:!0}),this.boundScrollHandler())}cleanupScrollTarget(){this.currentScrollElement&&this.boundScrollHandler&&this.currentScrollElement.removeEventListener(`scroll`,this.boundScrollHandler),this.currentScrollElement=null,this.boundScrollHandler=null}renderLeading(){return n`<div class="leading-section"><slot name="leading" @slotchange="${this.handleLeadingSlotChange}"></slot></div>`}renderTrailing(){return n`<div class="trailing-section"><slot name="trailing" @slotchange="${this.handleTrailingSlotChange}"><slot @slotchange="${this.handleDefaultSlotChange}"></slot></slot></div>`}renderTitleContent(){return n`<div class="title-container"><div class="headline"><slot name="headline" @slotchange="${this.handleHeadlineSlotChange}">${this.headline}</slot></div>${this.hasSubtitle||this.subtitle?n`<div class="subtitle"><slot name="subtitle" @slotchange="${this.handleSubtitleSlotChange}">${this.subtitle}</slot></div>`:r}</div>`}renderSmallLayout(){return n`<div class="appbar-row">${this.renderLeading()} ${this.renderTitleContent()} ${this.renderTrailing()}</div>`}renderFlexibleLayout(){return n`<div class="appbar-row top-row">${this.renderLeading()}<div class="spacer"></div>${this.renderTrailing()}</div><div class="flexible-content">${this.renderTitleContent()}<slot></slot></div>`}renderSearchLayout(){return n`<div class="appbar-row search-row">${this.renderLeading()}<div class="search-container"><slot name="search" @slotchange="${this.handleSearchSlotChange}"><div class="search-box"><slot name="search-leading"><span class="search-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg></span></slot><div class="search-input-wrapper"><slot name="search-input"><span class="search-placeholder">${this.headline||`Search`}</span></slot></div><slot name="search-trailing"></slot></div></slot></div>${this.renderTrailing()}</div>`}render(){let e=this.normalizedVariant;return n`<div class="${a(this.getRenderClasses())}">${this.renderElevation()} ${e===`search`?this.renderSearchLayout():e===`medium-flexible`||e===`large-flexible`?this.renderFlexibleLayout():this.renderSmallLayout()}</div>`}};c([e({type:String,reflect:!0})],f.prototype,`variant`,void 0),c([e({type:String,reflect:!0})],f.prototype,`alignment`,void 0),c([e({type:String})],f.prototype,`headline`,void 0),c([e({type:String})],f.prototype,`subtitle`,void 0),c([e({type:Boolean,reflect:!0})],f.prototype,`scrolled`,void 0),c([e({attribute:`scroll-target`})],f.prototype,`scrollTarget`,void 0),c([t()],f.prototype,`hasLeading`,void 0),c([t()],f.prototype,`hasTrailing`,void 0),c([t()],f.prototype,`hasHeadline`,void 0),c([t()],f.prototype,`hasSubtitle`,void 0),c([t()],f.prototype,`hasSearch`,void 0);export{f as BaseAppBar};
//# sourceMappingURL=base-appbar.js.map