@sandlada/mdc/build/packages/mdc/src/components/card/card.js

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

import{customElement as e}from"../../../../../node_modules/@lit/reactive-element/decorators/custom-element.js";import{property as t}from"../../../../../node_modules/@lit/reactive-element/decorators/property.js";import{query as n}from"../../../../../node_modules/@lit/reactive-element/decorators/query.js";import"../../../../../node_modules/lit/decorators.js";import{html as r,nothing as i}from"../../../../../node_modules/lit-html/lit-html.js";import{LitElement as a}from"../../../../../node_modules/lit-element/lit-element.js";import"../../../../../node_modules/lit/index.js";import{classMap as o}from"../../../../../node_modules/lit-html/directives/class-map.js";import"../../../../../node_modules/lit/directives/class-map.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"../../../../../components/elevation/elevation-options.mixin.js";import{mixinDelegatesAria as u}from"../../../../../utils/aria/delegate.js";import{mixinFocusRingOptions as d}from"../../../../../components/focus-ring/focus-ring-options.mixin.js";import{mixinRippleOptions as f}from"../../../../../components/ripple/ripple-options.mixin.js";import{CardShape as p,CardVariant as m}from"./card.interface.js";import{cardStyles as h}from"./card.style.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
let g=class extends s(u,f,l,d)(a){static{this.styles=h}static{this.shadowRootOptions={mode:`open`,delegatesFocus:!0}}get isInteractive(){return this.interactive||!!this.href}get rippleControl(){return this.isInteractive?this.rootElement:null}get focusRingControl(){return this.isInteractive?this.rootElement:null}constructor(){super(),this.variant=`filled`,this.interactive=!1,this.disabled=!1,this.horizontal=!1,this.shape=`round`,this.href=``,this.target=``,this.cardTabIndex=0}focus(){this.rootElement?.focus()}blur(){this.rootElement?.blur()}click(){this.rootElement?.click()}getRenderClasses(){return{container:!0,[this.variant]:!0,[this.shape]:!0,interactive:this.isInteractive,stacked:!this.horizontal,horizontal:this.horizontal,disabled:this.disabled}}renderBackground(){return r`<span class="background" aria-hidden="true"></span>`}renderOutline(){return r`<span class="outline" aria-hidden="true"></span>`}renderContent(){return r`<div class="content"><slot></slot></div>`}render(){let{ariaLabel:e}=this,t=this.disabled?-1:this.cardTabIndex,n=r`${this.renderBackground()} ${this.variant===`outlined`?this.renderOutline():i} ${this.renderElevation()} ${this.isInteractive?this.renderRipple():i} ${this.isInteractive?this.renderFocusRing():i} ${this.renderContent()}`;return this.href?r`<a class="${o(this.getRenderClasses())}" href="${this.href}" target="${this.target||i}" aria-label="${e||i}" aria-disabled="${this.disabled?`true`:i}" tabindex="${t}" @click="${this.handleClick}">${n}</a>`:this.interactive?r`<button type="button" class="${o(this.getRenderClasses())}" ?disabled="${this.disabled}" aria-label="${e||i}" aria-disabled="${this.disabled?`true`:i}" tabindex="${t}" @click="${this.handleClick}">${n}</button>`:r`<div class="${o(this.getRenderClasses())}" aria-label="${e||i}">${n}</div>`}handleClick(e){this.disabled&&(e.preventDefault(),e.stopImmediatePropagation())}};c([t({type:String,reflect:!0})],g.prototype,`variant`,void 0),c([t({type:Boolean,reflect:!0})],g.prototype,`interactive`,void 0),c([t({type:Boolean,reflect:!0})],g.prototype,`disabled`,void 0),c([t({type:Boolean,reflect:!0})],g.prototype,`horizontal`,void 0),c([t({type:String,reflect:!0})],g.prototype,`shape`,void 0),c([t({type:String,reflect:!0})],g.prototype,`href`,void 0),c([t({type:String,reflect:!0})],g.prototype,`target`,void 0),c([t({type:Number})],g.prototype,`cardTabIndex`,void 0),c([n(`.container`)],g.prototype,`rootElement`,void 0),g=c([e(`mdc-card`)],g);export{p as CardShape,m as CardVariant,g as MDCCard};
//# sourceMappingURL=card.js.map