@m3e/card 1.0.0-rc.1 → 1.0.0-rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -2
- package/dist/custom-elements.json +2939 -7
- package/dist/html-custom-data.json +46 -1
- package/dist/index.js +14 -3
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +57 -57
- package/dist/index.min.js.map +1 -1
- package/dist/src/CardElement.d.ts +4 -1
- package/dist/src/CardElement.d.ts.map +1 -1
- package/package.json +3 -3
- package/cem.config.mjs +0 -16
- package/demo/index.html +0 -126
- package/eslint.config.mjs +0 -13
- package/rollup.config.js +0 -32
- package/src/CardElement.ts +0 -258
- package/src/CardOrientation.ts +0 -2
- package/src/CardVariant.ts +0 -2
- package/src/index.ts +0 -3
- package/src/styles/CardStyle.ts +0 -163
- package/src/styles/CardToken.ts +0 -12
- package/src/styles/CardVariantStyle.ts +0 -99
- package/src/styles/CardVariantToken.ts +0 -205
- package/src/styles/index.ts +0 -2
- package/tsconfig.json +0 -9
package/dist/index.min.js
CHANGED
|
@@ -3,29 +3,29 @@
|
|
|
3
3
|
* Copyright (c) 2025 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
|
-
import{unsafeCSS as e,css as t,LitElement as o,html as a}from"lit";import{DesignToken as r,KeyboardClick as i,LinkButton as s,FormSubmitter as n,Focusable as l,DisabledInteractive as c,Disabled as d,AttachInternals as h,
|
|
6
|
+
import{unsafeCSS as e,css as t,LitElement as o,html as a}from"lit";import{DesignToken as r,KeyboardClick as i,LinkButton as s,FormSubmitter as n,Focusable as l,DisabledInteractive as c,Disabled as d,AttachInternals as h,PressedController as v,renderPseudoLink as p}from"@m3e/core";function u(e,t,o,a){var r,i=arguments.length,s=i<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,o):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,a);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(s=(i<3?r(s):i>3?r(t,o,s):r(t,o))||s);return i>3&&s&&Object.defineProperty(t,o,s),s}function b(e,t,o,a){if("a"===o&&!a)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?a:"a"===o?a.call(e):a?a.value:t.get(e)}"function"==typeof SuppressedError&&SuppressedError;
|
|
7
7
|
/**
|
|
8
8
|
* @license
|
|
9
9
|
* Copyright 2017 Google LLC
|
|
10
10
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
11
|
*/
|
|
12
|
-
const
|
|
12
|
+
const f=globalThis,y=f.ShadowRoot&&(void 0===f.ShadyCSS||f.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,m=Symbol(),$=new WeakMap;
|
|
13
13
|
/**
|
|
14
14
|
* @license
|
|
15
15
|
* Copyright 2019 Google LLC
|
|
16
16
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
17
|
-
*/let
|
|
17
|
+
*/let g=class{constructor(e,t,o){if(this._$cssResult$=!0,o!==m)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(y&&void 0===e){const o=void 0!==t&&1===t.length;o&&(e=$.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),o&&$.set(t,e))}return e}toString(){return this.cssText}};const E=(e,t)=>{if(y)e.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const o of t){const t=document.createElement("style"),a=f.litNonce;void 0!==a&&t.setAttribute("nonce",a),t.textContent=o.cssText,e.appendChild(t)}},S=y?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const o of e.cssRules)t+=o.cssText;return(e=>new g("string"==typeof e?e:e+"",void 0,m))(t)})(e):e,{is:C,defineProperty:x,getOwnPropertyDescriptor:_,getOwnPropertyNames:O,getOwnPropertySymbols:w,getPrototypeOf:P}=Object,L=globalThis,k=L.trustedTypes,U=k?k.emptyScript:"",A=L.reactiveElementPolyfillSupport,z=(e,t)=>e,R={toAttribute(e,t){switch(t){case Boolean:e=e?U:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let o=e;switch(t){case Boolean:o=null!==e;break;case Number:o=null===e?null:Number(e);break;case Object:case Array:try{o=JSON.parse(e)}catch(e){o=null}}return o}},M=(e,t)=>!C(e,t),T={attribute:!0,type:String,converter:R,reflect:!1,useDefault:!1,hasChanged:M};
|
|
18
18
|
/**
|
|
19
19
|
* @license
|
|
20
20
|
* Copyright 2017 Google LLC
|
|
21
21
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
|
-
*/Symbol.metadata??=Symbol("metadata"),
|
|
22
|
+
*/Symbol.metadata??=Symbol("metadata"),L.litPropertyMetadata??=new WeakMap;class j extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=T){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const o=Symbol(),a=this.getPropertyDescriptor(e,o,t);void 0!==a&&x(this.prototype,e,a)}}static getPropertyDescriptor(e,t,o){const{get:a,set:r}=_(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:a,set(t){const i=a?.call(this);r?.call(this,t),this.requestUpdate(e,i,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??T}static _$Ei(){if(this.hasOwnProperty(z("elementProperties")))return;const e=P(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(z("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(z("properties"))){const e=this.properties,t=[...O(e),...w(e)];for(const o of t)this.createProperty(o,e[o])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,o]of t)this.elementProperties.set(e,o)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const o=this._$Eu(e,t);void 0!==o&&this._$Eh.set(o,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const o=new Set(e.flat(1/0).reverse());for(const e of o)t.unshift(S(e))}else void 0!==e&&t.push(S(e));return t}static _$Eu(e,t){const o=t.attribute;return!1===o?void 0:"string"==typeof o?o:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const o of t.keys())this.hasOwnProperty(o)&&(e.set(o,this[o]),delete this[o]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return E(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,o){this._$AK(e,o)}_$ET(e,t){const o=this.constructor.elementProperties.get(e),a=this.constructor._$Eu(e,o);if(void 0!==a&&!0===o.reflect){const r=(void 0!==o.converter?.toAttribute?o.converter:R).toAttribute(t,o.type);this._$Em=e,null==r?this.removeAttribute(a):this.setAttribute(a,r),this._$Em=null}}_$AK(e,t){const o=this.constructor,a=o._$Eh.get(e);if(void 0!==a&&this._$Em!==a){const e=o.getPropertyOptions(a),r="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:R;this._$Em=a;const i=r.fromAttribute(t,e.type);this[a]=i??this._$Ej?.get(a)??i,this._$Em=null}}requestUpdate(e,t,o){if(void 0!==e){const a=this.constructor,r=this[e];if(o??=a.getPropertyOptions(e),!((o.hasChanged??M)(r,t)||o.useDefault&&o.reflect&&r===this._$Ej?.get(e)&&!this.hasAttribute(a._$Eu(e,o))))return;this.C(e,t,o)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:o,reflect:a,wrapped:r},i){o&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,i??t??this[e]),!0!==r||void 0!==i)||(this._$AL.has(e)||(this.hasUpdated||o||(t=void 0),this._$AL.set(e,t)),!0===a&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,o]of e){const{wrapped:e}=o,a=this[t];!0!==e||this._$AL.has(t)||void 0===a||this.C(t,void 0,o,a)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(e=>e.hostUpdate?.()),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM()}updated(e){}firstUpdated(e){}}j.elementStyles=[],j.shadowRootOptions={mode:"open"},j[z("elementProperties")]=new Map,j[z("finalized")]=new Map,A?.({ReactiveElement:j}),(L.reactiveElementVersions??=[]).push("2.1.1");
|
|
23
23
|
/**
|
|
24
24
|
* @license
|
|
25
25
|
* Copyright 2017 Google LLC
|
|
26
26
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
27
27
|
*/
|
|
28
|
-
const
|
|
28
|
+
const D={attribute:!0,type:String,converter:R,reflect:!1,hasChanged:M},q=(e=D,t,o)=>{const{kind:a,metadata:r}=o;let i=globalThis.litPropertyMetadata.get(r);if(void 0===i&&globalThis.litPropertyMetadata.set(r,i=new Map),"setter"===a&&((e=Object.create(e)).wrapped=!0),i.set(o.name,e),"accessor"===a){const{name:a}=o;return{set(o){const r=t.get.call(this);t.set.call(this,o),this.requestUpdate(a,r,e)},init(t){return void 0!==t&&this.C(a,void 0,e,t),t}}}if("setter"===a){const{name:a}=o;return function(o){const r=this[a];t.call(this,o),this.requestUpdate(a,r,e)}}throw Error("Unsupported decorator location: "+a)};function I(e){return(t,o)=>"object"==typeof o?q(e,t,o):((e,t,o)=>{const a=t.hasOwnProperty(o);return t.constructor.createProperty(o,e),a?Object.getOwnPropertyDescriptor(t,o):void 0})(e,t,o)}
|
|
29
29
|
/**
|
|
30
30
|
* @license
|
|
31
31
|
* Copyright 2017 Google LLC
|
|
@@ -36,7 +36,7 @@ const q={attribute:!0,type:String,converter:M,reflect:!1,hasChanged:T},I=(e=q,t,
|
|
|
36
36
|
* Copyright 2017 Google LLC
|
|
37
37
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
38
38
|
*/
|
|
39
|
-
function
|
|
39
|
+
function N(e,t){return(t,o,a)=>((e,t,o)=>(o.configurable=!0,o.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,o),o))(t,o,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}const V=e("var(--m3e-card-padding, 1rem)"),B=e(`var(--m3e-card-shape, ${r.shape.corner.medium});`),W={filled:{textColor:e(`var(--m3e-filled-card-text-color, ${r.color.onSurface})`),containerColor:e(`var(--m3e-filled-card-container-color, ${r.color.surfaceContainerHighest})`),containerElevation:e(`var(--m3e-filled-card-container-elevation, ${r.elevation.level0})`),disabled:{textColor:e(`var(--m3e-filled-card-disabled-text-color, ${r.color.onSurface})`),textOpacity:e("var(--m3e-filled-card-disabled-text-opacity, 38%)"),imageOpacity:e("var(--m3e-filled-card-disabled-image-opacity, 38%)"),containerColor:e(`var(--m3e-filled-card-disabled-container-color, ${r.color.surfaceVariant})`),containerElevation:e(`var(--m3e-filled-card-disabled-container-elevation, ${r.elevation.level0})`),containerElevationColor:e(`var(--m3e-filled-card-disabled-container-elevation-color, ${r.color.onSurface})`),containerElevationOpacity:e("var(--m3e-filled-card-disabled-container-elevation-opacity, 38%)"),containerOpacity:e("var(--m3e-filled-card-disabled-container-opacity, 38%)")},hover:{textColor:e(`var(--m3e-filled-card-hover-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-filled-card-hover-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-filled-card-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-card-hover-container-elevation, ${r.elevation.level1})`)},focus:{textColor:e(`var(--m3e-filled-card-focus-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-filled-card-focus-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-filled-card-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-card-focus-container-elevation, ${r.elevation.level0})`)},pressed:{textColor:e(`var(--m3e-filled-card-pressed-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-filled-card-pressed-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-filled-card-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-filled-card-pressed-container-elevation, ${r.elevation.level0})`)}},elevated:{textColor:e(`var(--m3e-elevated-card-text-color, ${r.color.onSurface})`),containerColor:e(`var(--m3e-elevated-card-container-color, ${r.color.surfaceContainerLow})`),containerElevation:e(`var(--m3e-elevated-card-container-elevation, ${r.elevation.level1})`),disabled:{textColor:e(`var(--m3e-elevated-card-disabled-text-color, ${r.color.onSurface})`),textOpacity:e("var(--m3e-elevated-card-disabled-text-opacity, 38%)"),imageOpacity:e("var(--m3e-elevated-card-disabled-image-opacity, 38%)"),containerColor:e(`var(--m3e-elevated-card-disabled-container-color, ${r.color.surface})`),containerElevation:e(`var(--m3e-elevated-card-disabled-container-elevation, ${r.elevation.level1})`),containerElevationColor:e(`var(--m3e-elevated-card-disabled-container-elevation-color, ${r.color.onSurface})`),containerElevationOpacity:e("var(--m3e-elevated-card-disabled-container-elevation-opacity, 38%)"),containerOpacity:e("var(--m3e-elevated-card-disabled-container-opacity, 38%)")},hover:{textColor:e(`var(--m3e-elevated-card-hover-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-elevated-card-hover-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-elevated-card-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-card-hover-container-elevation, ${r.elevation.level2})`)},focus:{textColor:e(`var(--m3e-elevated-card-focus-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-elevated-card-focus-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-elevated-card-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-card-focus-container-elevation, ${r.elevation.level1})`)},pressed:{textColor:e(`var(--m3e-elevated-card-pressed-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-elevated-card-pressed-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-elevated-card-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-elevated-card-pressed-container-elevation, ${r.elevation.level1})`)}},outlined:{textColor:e(`var(--m3e-outlined-card-text-color, ${r.color.onSurface})`),containerElevation:e(`var(--m3e-outlined-card-container-elevation, ${r.elevation.level0})`),outlineColor:e(`var(--m3e-outlined-card-outline-color, ${r.color.outlineVariant})`),outlineThickness:e("var(--m3e-outlined-card-outline-thickness, 1px)"),disabled:{textColor:e(`var(--m3e-outlined-card-disabled-text-color, ${r.color.onSurface})`),textOpacity:e("var(--m3e-outlined-card-disabled-text-opacity, 38%)"),imageOpacity:e("var(--m3e-outlined-card-disabled-image-opacity, 38%)"),containerElevation:e(`var(--m3e-outlined-card-disabled-container-elevation, ${r.elevation.level0})`),containerElevationColor:e(`var(--m3e-outlined-card-disabled-container-elevation-color, ${r.color.onSurface})`),containerElevationOpacity:e("var(--m3e-outlined-card-disabled-container-elevation-opacity, 38%)"),outlineColor:e(`var(--m3e-outlined-card-disabled-outline-color, ${r.color.outline})`),outlineOpacity:e("var(--m3e-outlined-card-disabled-outline-opacity, 12%)")},hover:{textColor:e(`var(--m3e-outlined-card-hover-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-outlined-card-hover-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-outlined-card-hover-state-layer-opacity, ${r.state.hoverStateLayerOpacity})`),containerElevation:e(`var(--m3e-outlined-card-hover-container-elevation, ${r.elevation.level1})`),outlineColor:e(`var(--m3e-outlined-card-hover-outline-color, ${r.color.outlineVariant})`)},focus:{textColor:e(`var(--m3e-outlined-card-focus-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-outlined-card-focus-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-outlined-card-focus-state-layer-opacity, ${r.state.focusStateLayerOpacity})`),containerElevation:e(`var(--m3e-outlined-card-focus-container-elevation, ${r.elevation.level0})`),outlineColor:e(`var(--m3e-outlined-card-focus-outline-color, ${r.color.onSurface})`)},pressed:{textColor:e(`var(--m3e-outlined-card-pressed-text-color, ${r.color.onSurface})`),stateLayerColor:e(`var(--m3e-outlined-card-pressed-state-layer-color, ${r.color.onSurface})`),stateLayerOpacity:e(`var(--m3e-outlined-card-pressed-state-layer-opacity, ${r.state.pressedStateLayerOpacity})`),containerElevation:e(`var(--m3e-outlined-card-pressed-container-elevation, ${r.elevation.level0})`),outlineColor:e(`var(--m3e-outlined-card-pressed-outline-color, ${r.color.outlineVariant})`)}}},K=t`
|
|
40
40
|
:host {
|
|
41
41
|
outline: none;
|
|
42
42
|
}
|
|
@@ -58,7 +58,7 @@ function V(e,t){return(t,o,a)=>((e,t,o)=>(o.configurable=!0,o.enumerable=!0,Refl
|
|
|
58
58
|
height: 100%;
|
|
59
59
|
position: relative;
|
|
60
60
|
box-sizing: border-box;
|
|
61
|
-
border-radius: ${
|
|
61
|
+
border-radius: ${B};
|
|
62
62
|
transition: ${e(`background-color ${r.motion.duration.short4} ${r.motion.easing.standard},\n border-color ${r.motion.duration.short4} ${r.motion.easing.standard}`)};
|
|
63
63
|
}
|
|
64
64
|
:host([actionable]) .base {
|
|
@@ -82,30 +82,30 @@ function V(e,t){return(t,o,a)=>((e,t,o)=>(o.configurable=!0,o.enumerable=!0,Refl
|
|
|
82
82
|
flex: 1 1 auto;
|
|
83
83
|
}
|
|
84
84
|
:host([orientation="vertical"]) ::slotted([slot="content"]) {
|
|
85
|
-
margin-inline: ${
|
|
85
|
+
margin-inline: ${V};
|
|
86
86
|
}
|
|
87
87
|
:host([orientation="vertical"]) ::slotted([slot="content"]:first-child) {
|
|
88
|
-
margin-block-start: ${
|
|
88
|
+
margin-block-start: ${V};
|
|
89
89
|
}
|
|
90
90
|
:host([orientation="vertical"]) ::slotted([slot="content"]:last-child) {
|
|
91
|
-
margin-block-end: ${
|
|
91
|
+
margin-block-end: ${V};
|
|
92
92
|
}
|
|
93
93
|
:host([orientation="horizontal"]) ::slotted([slot="content"]) {
|
|
94
|
-
margin-block: ${
|
|
94
|
+
margin-block: ${V};
|
|
95
95
|
}
|
|
96
96
|
:host([orientation="horizontal"]) ::slotted([slot="content"]:first-child) {
|
|
97
|
-
margin-inline-start: ${
|
|
97
|
+
margin-inline-start: ${V};
|
|
98
98
|
}
|
|
99
99
|
:host([orientation="horizontal"]) ::slotted([slot="content"]:last-child) {
|
|
100
|
-
margin-inline-end: ${
|
|
100
|
+
margin-inline-end: ${V};
|
|
101
101
|
}
|
|
102
102
|
:host([orientation="vertical"]) ::slotted([slot="header"]:not(img):not(video)) {
|
|
103
|
-
margin-inline: ${
|
|
104
|
-
margin-block-start: ${
|
|
103
|
+
margin-inline: ${V};
|
|
104
|
+
margin-block-start: ${V};
|
|
105
105
|
}
|
|
106
106
|
:host([orientation="horizontal"]) ::slotted([slot="header"]:not(img):not(video)) {
|
|
107
|
-
margin-inline-start: ${
|
|
108
|
-
margin-block: ${
|
|
107
|
+
margin-inline-start: ${V};
|
|
108
|
+
margin-block: ${V};
|
|
109
109
|
}
|
|
110
110
|
::slotted(img),
|
|
111
111
|
::slotted(video) {
|
|
@@ -114,22 +114,22 @@ function V(e,t){return(t,o,a)=>((e,t,o)=>(o.configurable=!0,o.enumerable=!0,Refl
|
|
|
114
114
|
}
|
|
115
115
|
::slotted(img[slot="header"]),
|
|
116
116
|
::slotted(video[slot="header"]) {
|
|
117
|
-
border-radius: ${
|
|
117
|
+
border-radius: ${B};
|
|
118
118
|
}
|
|
119
119
|
::slotted([slot="actions"]) {
|
|
120
|
-
margin-inline: ${
|
|
121
|
-
margin-block: ${
|
|
120
|
+
margin-inline: ${V};
|
|
121
|
+
margin-block: ${V};
|
|
122
122
|
}
|
|
123
123
|
::slotted([slot="actions"][end]) {
|
|
124
124
|
justify-content: flex-end;
|
|
125
125
|
}
|
|
126
126
|
:host([orientation="vertical"]) ::slotted([slot="footer"]) {
|
|
127
|
-
margin-inline: ${
|
|
128
|
-
margin-block-end: ${
|
|
127
|
+
margin-inline: ${V};
|
|
128
|
+
margin-block-end: ${V};
|
|
129
129
|
}
|
|
130
130
|
:host([orientation="horizontal"]) ::slotted([slot="footer"]) {
|
|
131
|
-
margin-block: ${
|
|
132
|
-
margin-inline-end: ${
|
|
131
|
+
margin-block: ${V};
|
|
132
|
+
margin-inline-end: ${V};
|
|
133
133
|
}
|
|
134
134
|
::slotted([slot="header"]),
|
|
135
135
|
::slotted([slot="actions"]),
|
|
@@ -171,7 +171,7 @@ function V(e,t){return(t,o,a)=>((e,t,o)=>(o.configurable=!0,o.enumerable=!0,Refl
|
|
|
171
171
|
:host([variant]) .base {
|
|
172
172
|
border-style: solid;
|
|
173
173
|
border-color: CanvasText;
|
|
174
|
-
border-width: ${
|
|
174
|
+
border-width: ${W.outlined.outlineThickness??e("unset")};
|
|
175
175
|
}
|
|
176
176
|
:host([actionable][variant]:disabled) .base,
|
|
177
177
|
:host([actionable][variant][disabled-interactive]) .base {
|
|
@@ -184,72 +184,72 @@ function V(e,t){return(t,o,a)=>((e,t,o)=>(o.configurable=!0,o.enumerable=!0,Refl
|
|
|
184
184
|
transition: none;
|
|
185
185
|
}
|
|
186
186
|
}
|
|
187
|
-
`;function
|
|
187
|
+
`;function G(o){return t`
|
|
188
188
|
:host([variant="${e(o)}"]) .base {
|
|
189
|
-
background-color: ${
|
|
190
|
-
box-shadow: ${
|
|
191
|
-
border-width: ${
|
|
189
|
+
background-color: ${W[o].containerColor??e("unset")};
|
|
190
|
+
box-shadow: ${W[o].containerElevation??e("unset")};
|
|
191
|
+
border-width: ${W[o].outlineThickness??e("unset")};
|
|
192
192
|
}
|
|
193
193
|
:host([actionable][variant="${e(o)}"]) .base {
|
|
194
|
-
--m3e-state-layer-hover-color: ${
|
|
195
|
-
--m3e-state-layer-hover-opacity: ${
|
|
196
|
-
--m3e-state-layer-focus-color: ${
|
|
197
|
-
--m3e-state-layer-focus-opacity: ${
|
|
198
|
-
--m3e-ripple-color: ${
|
|
199
|
-
--m3e-ripple-opacity: ${
|
|
200
|
-
--m3e-elevation-level: ${
|
|
201
|
-
--m3e-elevation-hover-level: ${
|
|
202
|
-
--m3e-elevation-focus-level: ${
|
|
203
|
-
--m3e-elevation-pressed-level: ${
|
|
194
|
+
--m3e-state-layer-hover-color: ${W[o].hover.stateLayerColor};
|
|
195
|
+
--m3e-state-layer-hover-opacity: ${W[o].hover.stateLayerOpacity};
|
|
196
|
+
--m3e-state-layer-focus-color: ${W[o].focus.stateLayerColor};
|
|
197
|
+
--m3e-state-layer-focus-opacity: ${W[o].focus.stateLayerOpacity};
|
|
198
|
+
--m3e-ripple-color: ${W[o].pressed.stateLayerColor};
|
|
199
|
+
--m3e-ripple-opacity: ${W[o].pressed.stateLayerOpacity};
|
|
200
|
+
--m3e-elevation-level: ${W[o].containerElevation??e("unset")};
|
|
201
|
+
--m3e-elevation-hover-level: ${W[o].hover.containerElevation??e("unset")};
|
|
202
|
+
--m3e-elevation-focus-level: ${W[o].focus.containerElevation??e("unset")};
|
|
203
|
+
--m3e-elevation-pressed-level: ${W[o].pressed.containerElevation??e("unset")};
|
|
204
204
|
}
|
|
205
205
|
:host([variant="${e(o)}"]) .base {
|
|
206
|
-
border-color: ${
|
|
206
|
+
border-color: ${W[o].outlineColor??e("unset")};
|
|
207
207
|
}
|
|
208
208
|
:host([actionable][variant="${e(o)}"]:focus .base) {
|
|
209
|
-
border-color: ${
|
|
209
|
+
border-color: ${W[o].focus.outlineColor??e("unset")};
|
|
210
210
|
}
|
|
211
211
|
:host([actionable][variant="${e(o)}"]:hover .base) {
|
|
212
|
-
border-color: ${
|
|
212
|
+
border-color: ${W[o].hover.outlineColor??e("unset")};
|
|
213
213
|
}
|
|
214
214
|
:host([actionable][variant="${e(o)}"]) .base.pressed {
|
|
215
|
-
border-color: ${
|
|
215
|
+
border-color: ${W[o].pressed.outlineColor??e("unset")};
|
|
216
216
|
}
|
|
217
217
|
:host([variant="${e(o)}"]) .base {
|
|
218
|
-
color: ${
|
|
218
|
+
color: ${W[o].textColor??e("unset")};
|
|
219
219
|
}
|
|
220
220
|
:host([actionable][variant="${e(o)}"]:focus) .base {
|
|
221
|
-
color: ${
|
|
221
|
+
color: ${W[o].focus.textColor??e("unset")};
|
|
222
222
|
}
|
|
223
223
|
:host([actionable][variant="${e(o)}"]:hover) .base {
|
|
224
|
-
color: ${
|
|
224
|
+
color: ${W[o].hover.textColor??e("unset")};
|
|
225
225
|
}
|
|
226
226
|
:host([actionable][variant="${e(o)}"]) .base.pressed {
|
|
227
|
-
color: ${
|
|
227
|
+
color: ${W[o].pressed.textColor??e("unset")};
|
|
228
228
|
}
|
|
229
229
|
:host([actionable][variant="${e(o)}"]:disabled) .base,
|
|
230
230
|
:host([actionable][variant="${e(o)}"][disabled-interactive]) .base {
|
|
231
|
-
--m3e-elevation-level: ${
|
|
231
|
+
--m3e-elevation-level: ${W[o].disabled.containerElevation??e("unset")};
|
|
232
232
|
--m3e-elevation-color: color-mix(
|
|
233
233
|
in srgb,
|
|
234
|
-
${
|
|
235
|
-
${
|
|
234
|
+
${W[o].disabled.containerElevationColor}
|
|
235
|
+
${W[o].disabled.containerElevationOpacity},
|
|
236
236
|
transparent
|
|
237
237
|
);
|
|
238
238
|
color: color-mix(
|
|
239
239
|
in srgb,
|
|
240
|
-
${
|
|
240
|
+
${W[o].disabled.textColor} ${W[o].disabled.textOpacity},
|
|
241
241
|
transparent
|
|
242
242
|
);
|
|
243
|
-
background-color: ${
|
|
244
|
-
border-color: ${
|
|
243
|
+
background-color: ${W[o].disabled.containerColor&&W[o].disabled.containerOpacity?e(`color-mix(\n in srgb,\n ${W[o].disabled.containerColor} ${W[o].disabled.containerOpacity},\n transparent\n )`):e("unset")};
|
|
244
|
+
border-color: ${W[o].disabled.outlineColor&&W[o].disabled.outlineOpacity?e(`color-mix(\n in srgb,\n ${W[o].disabled.outlineColor} ${W[o].disabled.outlineOpacity},\n transparent\n )`):e("unset")};
|
|
245
245
|
}
|
|
246
246
|
:host([actionable][variant="${e(o)}"]:disabled) ::slotted(img),
|
|
247
247
|
:host([actionable][variant="${e(o)}"][disabled-interactive]) ::slotted(img),
|
|
248
248
|
:host([actionable][variant="${e(o)}"]:disabled) ::slotted(video),
|
|
249
249
|
:host([actionable][variant="${e(o)}"][disabled-interactive]) ::slotted(video) {
|
|
250
|
-
opacity: ${
|
|
250
|
+
opacity: ${W[o].disabled.imageOpacity};
|
|
251
251
|
}
|
|
252
|
-
`}const
|
|
252
|
+
`}const H=[G("filled"),G("elevated"),G("outlined")];var J,F,Q;let X=class extends(i(s(n(l(c(d(h(o),!0))))))){constructor(){super(),J.add(this),F.set(this,e=>b(this,J,"m",Q).call(this,e)),this.inline=!1,this.actionable=!1,this.variant="filled",this.orientation="vertical",new v(this,{isPressedKey:e=>" "===e||"Enter"===e,callback:e=>{!this.actionable||this.disabled||this.disabledInteractive||this._base?.classList.toggle("pressed",e)}})}connectedCallback(){this.hasAttribute("actionable")&&(this.role="button"),super.connectedCallback(),this.addEventListener("click",b(this,F,"f"))}disconnectedCallback(){super.disconnectedCallback(),this._base?.classList.toggle("pressed",!1),this.removeEventListener("click",b(this,F,"f"))}render(){return a`<div class="base">
|
|
253
253
|
<m3e-elevation
|
|
254
254
|
class="elevation"
|
|
255
255
|
?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"
|
|
@@ -263,10 +263,10 @@ function V(e,t){return(t,o,a)=>((e,t,o)=>(o.configurable=!0,o.enumerable=!0,Refl
|
|
|
263
263
|
class="ripple"
|
|
264
264
|
?disabled="${!this.actionable||this.disabled||this.disabledInteractive}"
|
|
265
265
|
></m3e-ripple>
|
|
266
|
-
${this[
|
|
266
|
+
${this[p]()}
|
|
267
267
|
<slot name="header"></slot>
|
|
268
268
|
<slot name="content"><slot></slot></slot>
|
|
269
269
|
<slot name="actions"></slot>
|
|
270
270
|
<slot name="footer"></slot>
|
|
271
|
-
</div>`}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}};
|
|
271
|
+
</div>`}firstUpdated(e){super.firstUpdated(e),[this._elevation,this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this)),!this.actionable&&this.hasAttribute("tabindex")&&this.removeAttribute("tabindex")}update(e){super.update(e),!this.actionable&&this.hasAttribute("tabindex")&&this.removeAttribute("tabindex")}};F=new WeakMap,J=new WeakSet,Q=function(e){(this.disabled||this.disabledInteractive)&&(e.preventDefault(),e.stopImmediatePropagation())},X.styles=[H,K],u([N(".base")],X.prototype,"_base",void 0),u([N(".elevation")],X.prototype,"_elevation",void 0),u([N(".focus-ring")],X.prototype,"_focusRing",void 0),u([N(".state-layer")],X.prototype,"_stateLayer",void 0),u([N(".ripple")],X.prototype,"_ripple",void 0),u([I({type:Boolean})],X.prototype,"inline",void 0),u([I({type:Boolean})],X.prototype,"actionable",void 0),u([I({reflect:!0})],X.prototype,"variant",void 0),u([I({reflect:!0})],X.prototype,"orientation",void 0),X=u([(e=>(t,o)=>{void 0!==o?o.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)})("m3e-card")],X);export{X as M3eCardElement};
|
|
272
272
|
//# sourceMappingURL=index.min.js.map
|