@m3e/card 1.1.7 → 1.1.9
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.
|
@@ -416,6 +416,88 @@
|
|
|
416
416
|
"attribute": "orientation",
|
|
417
417
|
"reflects": true
|
|
418
418
|
},
|
|
419
|
+
{
|
|
420
|
+
"kind": "method",
|
|
421
|
+
"name": "#handleHeaderSlotChange",
|
|
422
|
+
"privacy": "private",
|
|
423
|
+
"return": {
|
|
424
|
+
"type": {
|
|
425
|
+
"text": "void"
|
|
426
|
+
}
|
|
427
|
+
},
|
|
428
|
+
"parameters": [
|
|
429
|
+
{
|
|
430
|
+
"name": "e",
|
|
431
|
+
"type": {
|
|
432
|
+
"text": "Event"
|
|
433
|
+
}
|
|
434
|
+
}
|
|
435
|
+
]
|
|
436
|
+
},
|
|
437
|
+
{
|
|
438
|
+
"kind": "method",
|
|
439
|
+
"name": "#handleContentSlotChange",
|
|
440
|
+
"privacy": "private",
|
|
441
|
+
"return": {
|
|
442
|
+
"type": {
|
|
443
|
+
"text": "void"
|
|
444
|
+
}
|
|
445
|
+
}
|
|
446
|
+
},
|
|
447
|
+
{
|
|
448
|
+
"kind": "method",
|
|
449
|
+
"name": "#handleDefaultSlotChange",
|
|
450
|
+
"privacy": "private",
|
|
451
|
+
"return": {
|
|
452
|
+
"type": {
|
|
453
|
+
"text": "void"
|
|
454
|
+
}
|
|
455
|
+
},
|
|
456
|
+
"parameters": [
|
|
457
|
+
{
|
|
458
|
+
"name": "e",
|
|
459
|
+
"type": {
|
|
460
|
+
"text": "Event"
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
]
|
|
464
|
+
},
|
|
465
|
+
{
|
|
466
|
+
"kind": "method",
|
|
467
|
+
"name": "#handleActionsSlotChange",
|
|
468
|
+
"privacy": "private",
|
|
469
|
+
"return": {
|
|
470
|
+
"type": {
|
|
471
|
+
"text": "void"
|
|
472
|
+
}
|
|
473
|
+
},
|
|
474
|
+
"parameters": [
|
|
475
|
+
{
|
|
476
|
+
"name": "e",
|
|
477
|
+
"type": {
|
|
478
|
+
"text": "Event"
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
]
|
|
482
|
+
},
|
|
483
|
+
{
|
|
484
|
+
"kind": "method",
|
|
485
|
+
"name": "#handleFooterSlotChange",
|
|
486
|
+
"privacy": "private",
|
|
487
|
+
"return": {
|
|
488
|
+
"type": {
|
|
489
|
+
"text": "void"
|
|
490
|
+
}
|
|
491
|
+
},
|
|
492
|
+
"parameters": [
|
|
493
|
+
{
|
|
494
|
+
"name": "e",
|
|
495
|
+
"type": {
|
|
496
|
+
"text": "Event"
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
]
|
|
500
|
+
},
|
|
419
501
|
{
|
|
420
502
|
"kind": "method",
|
|
421
503
|
"name": "#handleClick",
|
package/dist/index.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
6
|
import { unsafeCSS, css, LitElement, html } from 'lit';
|
|
7
|
-
import { DesignToken, KeyboardClick, LinkButton, FormSubmitter, Focusable, DisabledInteractive, Disabled, AttachInternals, PressedController, renderPseudoLink } from '@m3e/core';
|
|
7
|
+
import { DesignToken, KeyboardClick, LinkButton, FormSubmitter, Focusable, DisabledInteractive, Disabled, AttachInternals, PressedController, renderPseudoLink, hasAssignedNodes } from '@m3e/core';
|
|
8
8
|
|
|
9
9
|
/******************************************************************************
|
|
10
10
|
Copyright (c) Microsoft Corporation.
|
|
@@ -558,7 +558,7 @@ const CardVariantToken = {
|
|
|
558
558
|
* @internal
|
|
559
559
|
*/
|
|
560
560
|
const CardStyle = css`:host { outline: none; } :host(:not([inline])) { display: block; } :host(:not([inline])) .base { display: flex; } :host([inline]) { display: inline-block; vertical-align: middle; } :host([inline]) .base { display: inline-flex; } .base { width: 100%; height: 100%; position: relative; box-sizing: border-box; border-radius: ${CardToken.shape}; transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
|
|
561
|
-
border-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host([actionable]) { user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([actionable]:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([actionable][disabled-interactive]) { cursor: not-allowed; } :host(:not([actionable])) .focus-ring, :host(:not([actionable])) .state-layer, :host(:not([actionable])) .ripple { display: none; } :host([variant="outlined"]) .base { border-style: solid; } ::slotted([slot="content"]) { flex: 1 1 auto; } :
|
|
561
|
+
border-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host([actionable]) { user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host([actionable]:not(:disabled):not([disabled-interactive])) { cursor: pointer; } :host([actionable][disabled-interactive]) { cursor: not-allowed; } :host(:not([actionable])) .focus-ring, :host(:not([actionable])) .state-layer, :host(:not([actionable])) .ripple { display: none; } :host([variant="outlined"]) .base { border-style: solid; } ::slotted([slot="content"]) { flex: 1 1 auto; } ::slotted(img), ::slotted(video) { inset: 0; object-fit: cover; } ::slotted(img[slot="header"]), ::slotted(video[slot="header"]) { border-radius: ${CardToken.shape}; } ::slotted([slot="actions"][end]) { justify-content: flex-end; } ::slotted([slot="header"]), ::slotted([slot="actions"]), ::slotted([slot="footer"]) { flex: none; display: flex; align-items: center; } :host([orientation="vertical"]) .base, :host([orientation="horizontal"]) ::slotted([slot="header"]), :host([orientation="horizontal"]) ::slotted([slot="actions"]), :host([orientation="horizontal"]) ::slotted([slot="footer"]) { flex-direction: column; } :host([orientation="horizontal"]) .base, :host([orientation="vertical"]) ::slotted([slot="header"]), :host([orientation="vertical"]) ::slotted([slot="actions"]), :host([orientation="vertical"]) ::slotted([slot="footer"]) { flex-direction: row; } :host([orientation="horizontal"]) ::slotted(img), :host([orientation="horizontal"]) ::slotted(video) { aspect-ratio: 16 / 9; } .has-content:not(.has-default) slot[name="content"], .has-content.has-default slot:not([name]) { display: inherit; flex-direction: inherit; flex: 1 1 auto; } .has-header slot[name="header"], .has-actions slot[name="actions"], .has-footer slot[name="footer"] { display: inherit; flex-direction: inherit; flex: none; } :host([orientation="vertical"]) .has-content:not(.has-default) slot[name="content"] { margin-inline: ${CardToken.padding}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-block-start: ${CardToken.padding}; } :host([orientation="vertical"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-block-end: ${CardToken.padding}; } :host([orientation="horizontal"]) .has-content:not(.has-default) slot[name="content"] { margin-block: ${CardToken.padding}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-header) slot[name="content"] { margin-inline-start: ${CardToken.padding}; } :host([orientation="horizontal"]) .has-content:not(.has-default):not(.has-actions):not(.has-footer) slot[name="content"] { margin-inline-end: ${CardToken.padding}; } :host([orientation="vertical"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline: ${CardToken.padding}; margin-block-start: ${CardToken.padding}; } :host([orientation="horizontal"]) .has-header:not(.has-header-media) slot[name="header"] { margin-inline-start: ${CardToken.padding}; margin-block: ${CardToken.padding}; } .has-actions slot[name="actions"] { margin-inline: ${CardToken.padding}; margin-block: ${CardToken.padding}; } :host([orientation="vertical"]) .has-footer slot[name="footer"] { margin-inline: ${CardToken.padding}; margin-block-end: ${CardToken.padding}; } :host([orientation="horizontal"]) .has-footer slot[name="footer"] { margin-block: ${CardToken.padding}; margin-inline-end: ${CardToken.padding}; } a { all: unset; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; } @media (forced-colors: active) { .base { transition: none; } :host([variant]) .base { border-style: solid; border-color: CanvasText; border-width: ${CardVariantToken.outlined.outlineThickness ?? unsafeCSS("unset")}; } :host([actionable][variant]:disabled) .base, :host([actionable][variant][disabled-interactive]) .base { color: GrayText; border-color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;
|
|
562
562
|
|
|
563
563
|
/** @private */
|
|
564
564
|
function cardVariantStyle(variant) {
|
|
@@ -578,7 +578,7 @@ function cardVariantStyle(variant) {
|
|
|
578
578
|
*/
|
|
579
579
|
const CardVariantStyle = [cardVariantStyle("filled"), cardVariantStyle("elevated"), cardVariantStyle("outlined")];
|
|
580
580
|
|
|
581
|
-
var _M3eCardElement_instances, _M3eCardElement_clickHandler, _M3eCardElement_handleClick;
|
|
581
|
+
var _M3eCardElement_instances, _M3eCardElement_clickHandler, _M3eCardElement_handleHeaderSlotChange, _M3eCardElement_handleContentSlotChange, _M3eCardElement_handleDefaultSlotChange, _M3eCardElement_handleActionsSlotChange, _M3eCardElement_handleFooterSlotChange, _M3eCardElement_handleClick;
|
|
582
582
|
/**
|
|
583
583
|
* A content container for text, images (or other media), and actions in the context of a single subject.
|
|
584
584
|
*
|
|
@@ -750,7 +750,7 @@ let M3eCardElement = class M3eCardElement extends KeyboardClick(LinkButton(FormS
|
|
|
750
750
|
}
|
|
751
751
|
/** @inheritdoc */
|
|
752
752
|
render() {
|
|
753
|
-
return html`<div class="base"><m3e-elevation class="elevation" ?disabled="${!this.actionable || this.disabled || this.disabledInteractive}"></m3e-elevation><m3e-focus-ring class="focus-ring" ?disabled="${!this.actionable || this.disabled}"></m3e-focus-ring><m3e-state-layer class="state-layer" ?disabled="${!this.actionable || this.disabled || this.disabledInteractive}"></m3e-state-layer><m3e-ripple class="ripple" ?disabled="${!this.actionable || this.disabled || this.disabledInteractive}"></m3e-ripple>${this[renderPseudoLink]()}<slot name="header"></slot><slot name="content"><slot></slot></slot><slot name="actions"></slot><slot name="footer"></slot></div>`;
|
|
753
|
+
return html`<div class="base"><m3e-elevation class="elevation" ?disabled="${!this.actionable || this.disabled || this.disabledInteractive}"></m3e-elevation><m3e-focus-ring class="focus-ring" ?disabled="${!this.actionable || this.disabled}"></m3e-focus-ring><m3e-state-layer class="state-layer" ?disabled="${!this.actionable || this.disabled || this.disabledInteractive}"></m3e-state-layer><m3e-ripple class="ripple" ?disabled="${!this.actionable || this.disabled || this.disabledInteractive}"></m3e-ripple>${this[renderPseudoLink]()}<slot name="header" @slotchange="${__classPrivateFieldGet(this, _M3eCardElement_instances, "m", _M3eCardElement_handleHeaderSlotChange)}"></slot><slot name="content" @slotchange="${__classPrivateFieldGet(this, _M3eCardElement_instances, "m", _M3eCardElement_handleContentSlotChange)}"><slot @slotchange="${__classPrivateFieldGet(this, _M3eCardElement_instances, "m", _M3eCardElement_handleDefaultSlotChange)}"></slot></slot><slot name="actions" @slotchange="${__classPrivateFieldGet(this, _M3eCardElement_instances, "m", _M3eCardElement_handleActionsSlotChange)}"></slot><slot name="footer" @slotchange="${__classPrivateFieldGet(this, _M3eCardElement_instances, "m", _M3eCardElement_handleFooterSlotChange)}"></slot></div>`;
|
|
754
754
|
}
|
|
755
755
|
/** @inheritdoc */
|
|
756
756
|
firstUpdated(_changedProperties) {
|
|
@@ -770,6 +770,26 @@ let M3eCardElement = class M3eCardElement extends KeyboardClick(LinkButton(FormS
|
|
|
770
770
|
};
|
|
771
771
|
_M3eCardElement_clickHandler = new WeakMap();
|
|
772
772
|
_M3eCardElement_instances = new WeakSet();
|
|
773
|
+
_M3eCardElement_handleHeaderSlotChange = function _M3eCardElement_handleHeaderSlotChange(e) {
|
|
774
|
+
const assignedNodes = e.target.assignedNodes({
|
|
775
|
+
flatten: true
|
|
776
|
+
});
|
|
777
|
+
const base = this.shadowRoot?.querySelector(".base");
|
|
778
|
+
base?.classList.toggle("has-header", assignedNodes.length > 0);
|
|
779
|
+
base?.classList.toggle("has-header-media", assignedNodes.some(x => x instanceof HTMLElement && (x.tagName === "IMG" || x.tagName === "VIDEO")));
|
|
780
|
+
};
|
|
781
|
+
_M3eCardElement_handleContentSlotChange = function _M3eCardElement_handleContentSlotChange() {
|
|
782
|
+
this.shadowRoot?.querySelector(".base")?.classList.toggle("has-content", this.querySelector("[slot='content']") !== null);
|
|
783
|
+
};
|
|
784
|
+
_M3eCardElement_handleDefaultSlotChange = function _M3eCardElement_handleDefaultSlotChange(e) {
|
|
785
|
+
this.shadowRoot?.querySelector(".base")?.classList.toggle("has-default", hasAssignedNodes(e.target) && this.querySelector("[slot='content']") === null);
|
|
786
|
+
};
|
|
787
|
+
_M3eCardElement_handleActionsSlotChange = function _M3eCardElement_handleActionsSlotChange(e) {
|
|
788
|
+
this.shadowRoot?.querySelector(".base")?.classList.toggle("has-actions", hasAssignedNodes(e.target));
|
|
789
|
+
};
|
|
790
|
+
_M3eCardElement_handleFooterSlotChange = function _M3eCardElement_handleFooterSlotChange(e) {
|
|
791
|
+
this.shadowRoot?.querySelector(".base")?.classList.toggle("has-footer", hasAssignedNodes(e.target));
|
|
792
|
+
};
|
|
773
793
|
_M3eCardElement_handleClick = function _M3eCardElement_handleClick(e) {
|
|
774
794
|
if (this.disabled || this.disabledInteractive) {
|
|
775
795
|
e.preventDefault();
|