@magmonium/one 0.4.76 → 0.4.77
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.
|
@@ -41518,7 +41518,7 @@ var KeyValueComponent = class KeyValueComponent {
|
|
|
41518
41518
|
host: { properties: { "class": "hostClass()" } },
|
|
41519
41519
|
ngImport: i0,
|
|
41520
41520
|
template: "<div [class]=\"hostClass()\">\n <span class=\"m-key-value__key\"><ng-content select=\"[key]\" /></span>\n <span class=\"m-key-value__value\"><ng-content select=\"[value]\" /></span>\n</div>",
|
|
41521
|
-
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;--_kv-size: 1em;font-size:var(--_kv-size);line-height:1.4}.m-key-value{position:relative}.m-key-value__key{color:var(--m-text-tertiary);display:inline-block;min-width:0}.m-key-value__value{color:var(--m-text);display:inline-block;min-width:0}.m-key-value--bento{display:flex;flex-direction:column;gap:.35em;padding:var(--_kv-pad, .85em 1em);align-items:var(--_kv-align, stretch)}.m-key-value--bento .m-key-value__key{font-size:.75em;text-transform:uppercase;letter-spacing:.08em;font-weight:600;opacity:.85}.m-key-value--bento .m-key-value__value{font-size:1.65em;font-weight:700;line-height:1.15;letter-spacing:-.01em;background:linear-gradient(135deg,var(--m-text),color-mix(in srgb,var(--m-mm) 40%,var(--m-text)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.m-key-value--pill{display:inline-flex;align-items:center;gap:.65em;width:auto;padding:.3em .85em;border-radius:999px;background:color-mix(in srgb,var(--m-background-lite) 60%,transparent);border:1px solid color-mix(in srgb,var(--m-border) 70%,transparent);transition:background .18s ease,border-color .18s ease}.m-key-value--pill:hover{background:color-mix(in srgb,var(--m-background-lite) 85%,transparent);border-color:color-mix(in srgb,var(--m-mm) 35%,var(--m-border))}.m-key-value--pill .m-key-value__key{font-weight:600;white-space:nowrap;letter-spacing:.01em}.m-key-value--pill .m-key-value__key:after{content:\"\";display:inline-block;width:1px;height:.95em;margin-left:.65em;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--m-border) 90%,transparent),transparent);vertical-align:middle}.m-key-value--pill .m-key-value__value{white-space:nowrap;font-weight:600}.m-key-value--leader{display:flex;align-items:baseline;justify-content:space-between;gap:.75em;padding:.4em 0;transition:border-color .18s ease}.m-key-value--leader .m-key-value__key{white-space:nowrap;padding-right:.5em;font-weight:600;letter-spacing:.01em}.m-key-value--leader .m-key-value__value{white-space:nowrap;padding-left:.5em;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:600}\n"],
|
|
41521
|
+
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;--_kv-size: 1em;font-size:var(--_kv-size);line-height:1.4}.m-key-value{position:relative}.m-key-value__key{color:var(--m-text-tertiary);display:inline-block;min-width:0}.m-key-value__value{color:var(--m-text);display:inline-block;min-width:0}.m-key-value--bento{display:flex;flex-direction:column;gap:.35em;padding:var(--_kv-pad, .85em 1em);align-items:var(--_kv-align, stretch)}.m-key-value--bento .m-key-value__key{font-size:.75em;text-transform:uppercase;letter-spacing:.08em;font-weight:600;opacity:.85;max-width:100%}.m-key-value--bento .m-key-value__value{font-size:1.65em;font-weight:700;line-height:1.15;letter-spacing:-.01em;background:linear-gradient(135deg,var(--m-text),color-mix(in srgb,var(--m-mm) 40%,var(--m-text)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.m-key-value--pill{display:inline-flex;align-items:center;gap:.65em;width:auto;padding:.3em .85em;border-radius:999px;background:color-mix(in srgb,var(--m-background-lite) 60%,transparent);border:1px solid color-mix(in srgb,var(--m-border) 70%,transparent);transition:background .18s ease,border-color .18s ease}.m-key-value--pill:hover{background:color-mix(in srgb,var(--m-background-lite) 85%,transparent);border-color:color-mix(in srgb,var(--m-mm) 35%,var(--m-border))}.m-key-value--pill .m-key-value__key{font-weight:600;white-space:nowrap;letter-spacing:.01em}.m-key-value--pill .m-key-value__key:after{content:\"\";display:inline-block;width:1px;height:.95em;margin-left:.65em;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--m-border) 90%,transparent),transparent);vertical-align:middle}.m-key-value--pill .m-key-value__value{white-space:nowrap;font-weight:600}.m-key-value--leader{display:flex;align-items:baseline;justify-content:space-between;gap:.75em;padding:.4em 0;transition:border-color .18s ease}.m-key-value--leader .m-key-value__key{white-space:nowrap;padding-right:.5em;font-weight:600;letter-spacing:.01em}.m-key-value--leader .m-key-value__value{white-space:nowrap;padding-left:.5em;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:600}\n"],
|
|
41522
41522
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
41523
41523
|
});
|
|
41524
41524
|
};
|
|
@@ -41534,7 +41534,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
41534
41534
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
41535
41535
|
host: { "[class]": "hostClass()" },
|
|
41536
41536
|
template: "<div [class]=\"hostClass()\">\n <span class=\"m-key-value__key\"><ng-content select=\"[key]\" /></span>\n <span class=\"m-key-value__value\"><ng-content select=\"[value]\" /></span>\n</div>",
|
|
41537
|
-
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;--_kv-size: 1em;font-size:var(--_kv-size);line-height:1.4}.m-key-value{position:relative}.m-key-value__key{color:var(--m-text-tertiary);display:inline-block;min-width:0}.m-key-value__value{color:var(--m-text);display:inline-block;min-width:0}.m-key-value--bento{display:flex;flex-direction:column;gap:.35em;padding:var(--_kv-pad, .85em 1em);align-items:var(--_kv-align, stretch)}.m-key-value--bento .m-key-value__key{font-size:.75em;text-transform:uppercase;letter-spacing:.08em;font-weight:600;opacity:.85}.m-key-value--bento .m-key-value__value{font-size:1.65em;font-weight:700;line-height:1.15;letter-spacing:-.01em;background:linear-gradient(135deg,var(--m-text),color-mix(in srgb,var(--m-mm) 40%,var(--m-text)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.m-key-value--pill{display:inline-flex;align-items:center;gap:.65em;width:auto;padding:.3em .85em;border-radius:999px;background:color-mix(in srgb,var(--m-background-lite) 60%,transparent);border:1px solid color-mix(in srgb,var(--m-border) 70%,transparent);transition:background .18s ease,border-color .18s ease}.m-key-value--pill:hover{background:color-mix(in srgb,var(--m-background-lite) 85%,transparent);border-color:color-mix(in srgb,var(--m-mm) 35%,var(--m-border))}.m-key-value--pill .m-key-value__key{font-weight:600;white-space:nowrap;letter-spacing:.01em}.m-key-value--pill .m-key-value__key:after{content:\"\";display:inline-block;width:1px;height:.95em;margin-left:.65em;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--m-border) 90%,transparent),transparent);vertical-align:middle}.m-key-value--pill .m-key-value__value{white-space:nowrap;font-weight:600}.m-key-value--leader{display:flex;align-items:baseline;justify-content:space-between;gap:.75em;padding:.4em 0;transition:border-color .18s ease}.m-key-value--leader .m-key-value__key{white-space:nowrap;padding-right:.5em;font-weight:600;letter-spacing:.01em}.m-key-value--leader .m-key-value__value{white-space:nowrap;padding-left:.5em;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:600}\n"]
|
|
41537
|
+
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;--_kv-size: 1em;font-size:var(--_kv-size);line-height:1.4}.m-key-value{position:relative}.m-key-value__key{color:var(--m-text-tertiary);display:inline-block;min-width:0}.m-key-value__value{color:var(--m-text);display:inline-block;min-width:0}.m-key-value--bento{display:flex;flex-direction:column;gap:.35em;padding:var(--_kv-pad, .85em 1em);align-items:var(--_kv-align, stretch)}.m-key-value--bento .m-key-value__key{font-size:.75em;text-transform:uppercase;letter-spacing:.08em;font-weight:600;opacity:.85;max-width:100%}.m-key-value--bento .m-key-value__value{font-size:1.65em;font-weight:700;line-height:1.15;letter-spacing:-.01em;background:linear-gradient(135deg,var(--m-text),color-mix(in srgb,var(--m-mm) 40%,var(--m-text)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.m-key-value--pill{display:inline-flex;align-items:center;gap:.65em;width:auto;padding:.3em .85em;border-radius:999px;background:color-mix(in srgb,var(--m-background-lite) 60%,transparent);border:1px solid color-mix(in srgb,var(--m-border) 70%,transparent);transition:background .18s ease,border-color .18s ease}.m-key-value--pill:hover{background:color-mix(in srgb,var(--m-background-lite) 85%,transparent);border-color:color-mix(in srgb,var(--m-mm) 35%,var(--m-border))}.m-key-value--pill .m-key-value__key{font-weight:600;white-space:nowrap;letter-spacing:.01em}.m-key-value--pill .m-key-value__key:after{content:\"\";display:inline-block;width:1px;height:.95em;margin-left:.65em;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--m-border) 90%,transparent),transparent);vertical-align:middle}.m-key-value--pill .m-key-value__value{white-space:nowrap;font-weight:600}.m-key-value--leader{display:flex;align-items:baseline;justify-content:space-between;gap:.75em;padding:.4em 0;transition:border-color .18s ease}.m-key-value--leader .m-key-value__key{white-space:nowrap;padding-right:.5em;font-weight:600;letter-spacing:.01em}.m-key-value--leader .m-key-value__value{white-space:nowrap;padding-left:.5em;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:600}\n"]
|
|
41538
41538
|
}]
|
|
41539
41539
|
}],
|
|
41540
41540
|
propDecorators: { variant: [{
|
|
@@ -41673,8 +41673,8 @@ var StatComponent = class StatComponent {
|
|
|
41673
41673
|
classAttribute: "m-stat-host"
|
|
41674
41674
|
},
|
|
41675
41675
|
ngImport: i0,
|
|
41676
|
-
template: "<div class=\"m-stat\">\n <m-key-value variant=\"bento\">\n <span
|
|
41677
|
-
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;line-height:1.4;--_tone: var(--m-mm);--_pad-y: .85em;--_pad-x: 1em;--_kv-pad: 0}:host(.is-design-mode){min-width:8em;min-height:4em}.m-stat{display:flex;flex-direction:column;min-width:0;padding:var(--_pad-y) var(--_pad-x);border-radius:.75em}.m-stat__value{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.35em;min-width:0}.m-stat__figure{order:0;min-width:0;display:inline-flex;align-items:center;gap:.35em;font-size:.6060606061em}.m-stat__corner{order:1;align-self:flex-start;display:inline-flex;align-items:center;gap:.25em}.m-stat__corner:empty{display:none}.m-stat__corner{font-size:.5em;font-weight:300;white-space:nowrap;letter-spacing:.01em;color:var(--m-text-tertiary);background:none;-webkit-text-fill-color:currentColor}.m-stat__ghost{color:var(--m-text-tertiary);opacity:.6;-webkit-text-fill-color:currentColor}:host(.corner-left) .m-stat__corner{order:-1}:host(.corner-bottom) .m-stat__corner{align-self:flex-end}:host(.is-design-mode) .m-stat__value{flex-direction:column;align-items:flex-start}:host(.is-design-mode) .m-stat__corner{align-self:flex-start}:host(.align-left) .m-stat{text-align:left;--_kv-align: flex-start}:host(.align-center) .m-stat{text-align:center;--_kv-align: center}:host(.align-right) .m-stat{text-align:right;--_kv-align: flex-end}:host(.m-stat-host) .m-stat:has(m-section,m-section-form){--_kv-align: stretch}:host(.m-stat-host) .m-stat:has(m-section,m-section-form) .m-stat__value{display:flex}:host(.m-stat-host) .m-stat:has(m-section,m-section-form) .m-stat__figure{flex:1 1 auto;align-self:stretch;display:grid;-webkit-text-fill-color:currentColor}:host .m-stat__figure:has(m-list,m-one-list){font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-text-fill-color:currentColor}:host([data-variant=compact]){--_pad-y: .45em;--_pad-x: .6em}:host([data-variant=no-padding]){--_pad-y: 0;--_pad-x: 0}:host([data-variant=no-x-padding]){--_pad-x: 0}:host(.has-color) .m-stat__figure{color:var(--m-stat-color);-webkit-text-fill-color:var(--m-stat-color)}:host(.has-corner-color) .m-stat__corner{color:var(--m-stat-corner-color)}:host([data-surface=card]) .m-stat{background:color-mix(in srgb,var(--m-background-lite) 70%,transparent);border:1px solid color-mix(in srgb,var(--m-border) 70%,transparent)}:host([data-surface=shadow]) .m-stat{background:var(--m-background-lite);border:1px solid color-mix(in srgb,var(--m-border) 45%,transparent);box-shadow:0 10px 30px #0000000f;transition:box-shadow .2s ease,transform .2s ease}:host([data-surface=shadow]) .m-stat:hover{box-shadow:0 18px 44px #0000001a;transform:translateY(-2px)}:host([data-surface=glow]) .m-stat{background:color-mix(in srgb,var(--_tone) 10%,transparent);border:1px solid color-mix(in srgb,var(--_tone) 28%,transparent);box-shadow:0 12px 34px color-mix(in srgb,var(--_tone) 18%,transparent)}:host([data-surface=glow]) .m-stat__figure{text-shadow:0 2px 14px color-mix(in srgb,var(--_tone) 40%,transparent)}:host([data-surface=gradient]) .m-stat{background:linear-gradient(135deg,color-mix(in srgb,var(--_tone) 18%,transparent),color-mix(in srgb,var(--m-background-lite) 85%,transparent));border:1px solid color-mix(in srgb,var(--_tone) 20%,transparent);box-shadow:0 8px 24px #0000000d}:host([data-surface=gradient]) .m-stat__figure{text-shadow:0 1px 0 color-mix(in srgb,var(--m-background) 70%,transparent)}\n"],
|
|
41676
|
+
template: "<div class=\"m-stat\">\n <m-key-value variant=\"bento\">\n <span\n key\n class=\"m-stat__label\"\n [class.m-stat__ghost]=\"labelGhost()\"\n [attr.title]=\"labelText() || null\"\n >{{\n labelDisplay()\n }}</span>\n <span value class=\"m-stat__value\">\n <!-- Both slots are wrappers this component owns rather than bare\n `ng-content`: what a caller projects carries the *caller's*\n encapsulation attribute, so `.m-stat__figure` and `.m-stat__corner`\n could not be put on it from here. The wrappers hold the ordering,\n the tone colour and the corner's superscript size; whatever lands\n inside them is the caller's own markup (ADR 0021). -->\n <span class=\"m-stat__figure\"><ng-content select=\"[value]\" /></span>\n <!-- One corner, ordered and aligned by CSS rather than written twice:\n `cornerPosition` is four values and the slot is one node. -->\n <span class=\"m-stat__corner\"><ng-content select=\"[corner]\" /></span>\n </span>\n </m-key-value>\n</div>\n",
|
|
41677
|
+
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;line-height:1.4;--_tone: var(--m-mm);--_pad-y: .85em;--_pad-x: 1em;--_kv-pad: 0}:host(.is-design-mode){min-width:8em;min-height:4em}.m-stat{display:flex;flex-direction:column;min-width:0;padding:var(--_pad-y) var(--_pad-x);border-radius:.75em}.m-stat__value{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.35em;min-width:0}.m-stat__figure{order:0;min-width:0;display:inline-flex;align-items:center;gap:.35em;font-size:.6060606061em}.m-stat__corner{order:1;align-self:flex-start;display:inline-flex;align-items:center;gap:.25em}.m-stat__corner:empty{display:none}.m-stat__corner{font-size:.5em;font-weight:300;white-space:nowrap;letter-spacing:.01em;color:var(--m-text-tertiary);background:none;-webkit-text-fill-color:currentColor}.m-stat__label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.m-stat__ghost{color:var(--m-text-tertiary);opacity:.6;-webkit-text-fill-color:currentColor}:host(.corner-left) .m-stat__corner{order:-1}:host(.corner-bottom) .m-stat__corner{align-self:flex-end}:host(.is-design-mode) .m-stat__value{flex-direction:column;align-items:flex-start}:host(.is-design-mode) .m-stat__corner{align-self:flex-start}:host(.align-left) .m-stat{text-align:left;--_kv-align: flex-start}:host(.align-center) .m-stat{text-align:center;--_kv-align: center}:host(.align-right) .m-stat{text-align:right;--_kv-align: flex-end}:host(.m-stat-host) .m-stat:has(m-section,m-section-form){--_kv-align: stretch}:host(.m-stat-host) .m-stat:has(m-section,m-section-form) .m-stat__value{display:flex}:host(.m-stat-host) .m-stat:has(m-section,m-section-form) .m-stat__figure{flex:1 1 auto;align-self:stretch;display:grid;-webkit-text-fill-color:currentColor}:host .m-stat__figure:has(m-list,m-one-list){font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-text-fill-color:currentColor}:host([data-variant=compact]){--_pad-y: .45em;--_pad-x: .6em}:host([data-variant=no-padding]){--_pad-y: 0;--_pad-x: 0}:host([data-variant=no-x-padding]){--_pad-x: 0}:host(.has-color) .m-stat__figure{color:var(--m-stat-color);-webkit-text-fill-color:var(--m-stat-color)}:host(.has-corner-color) .m-stat__corner{color:var(--m-stat-corner-color)}:host([data-surface=card]) .m-stat{background:color-mix(in srgb,var(--m-background-lite) 70%,transparent);border:1px solid color-mix(in srgb,var(--m-border) 70%,transparent)}:host([data-surface=shadow]) .m-stat{background:var(--m-background-lite);border:1px solid color-mix(in srgb,var(--m-border) 45%,transparent);box-shadow:0 10px 30px #0000000f;transition:box-shadow .2s ease,transform .2s ease}:host([data-surface=shadow]) .m-stat:hover{box-shadow:0 18px 44px #0000001a;transform:translateY(-2px)}:host([data-surface=glow]) .m-stat{background:color-mix(in srgb,var(--_tone) 10%,transparent);border:1px solid color-mix(in srgb,var(--_tone) 28%,transparent);box-shadow:0 12px 34px color-mix(in srgb,var(--_tone) 18%,transparent)}:host([data-surface=glow]) .m-stat__figure{text-shadow:0 2px 14px color-mix(in srgb,var(--_tone) 40%,transparent)}:host([data-surface=gradient]) .m-stat{background:linear-gradient(135deg,color-mix(in srgb,var(--_tone) 18%,transparent),color-mix(in srgb,var(--m-background-lite) 85%,transparent));border:1px solid color-mix(in srgb,var(--_tone) 20%,transparent);box-shadow:0 8px 24px #0000000d}:host([data-surface=gradient]) .m-stat__figure{text-shadow:0 1px 0 color-mix(in srgb,var(--m-background) 70%,transparent)}\n"],
|
|
41678
41678
|
dependencies: [{
|
|
41679
41679
|
kind: "component",
|
|
41680
41680
|
type: KeyValueComponent,
|
|
@@ -41710,8 +41710,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
41710
41710
|
"[style.--m-stat-color]": "resolvedColor()",
|
|
41711
41711
|
"[style.--m-stat-corner-color]": "resolvedCornerColor()"
|
|
41712
41712
|
},
|
|
41713
|
-
template: "<div class=\"m-stat\">\n <m-key-value variant=\"bento\">\n <span
|
|
41714
|
-
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;line-height:1.4;--_tone: var(--m-mm);--_pad-y: .85em;--_pad-x: 1em;--_kv-pad: 0}:host(.is-design-mode){min-width:8em;min-height:4em}.m-stat{display:flex;flex-direction:column;min-width:0;padding:var(--_pad-y) var(--_pad-x);border-radius:.75em}.m-stat__value{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.35em;min-width:0}.m-stat__figure{order:0;min-width:0;display:inline-flex;align-items:center;gap:.35em;font-size:.6060606061em}.m-stat__corner{order:1;align-self:flex-start;display:inline-flex;align-items:center;gap:.25em}.m-stat__corner:empty{display:none}.m-stat__corner{font-size:.5em;font-weight:300;white-space:nowrap;letter-spacing:.01em;color:var(--m-text-tertiary);background:none;-webkit-text-fill-color:currentColor}.m-stat__ghost{color:var(--m-text-tertiary);opacity:.6;-webkit-text-fill-color:currentColor}:host(.corner-left) .m-stat__corner{order:-1}:host(.corner-bottom) .m-stat__corner{align-self:flex-end}:host(.is-design-mode) .m-stat__value{flex-direction:column;align-items:flex-start}:host(.is-design-mode) .m-stat__corner{align-self:flex-start}:host(.align-left) .m-stat{text-align:left;--_kv-align: flex-start}:host(.align-center) .m-stat{text-align:center;--_kv-align: center}:host(.align-right) .m-stat{text-align:right;--_kv-align: flex-end}:host(.m-stat-host) .m-stat:has(m-section,m-section-form){--_kv-align: stretch}:host(.m-stat-host) .m-stat:has(m-section,m-section-form) .m-stat__value{display:flex}:host(.m-stat-host) .m-stat:has(m-section,m-section-form) .m-stat__figure{flex:1 1 auto;align-self:stretch;display:grid;-webkit-text-fill-color:currentColor}:host .m-stat__figure:has(m-list,m-one-list){font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-text-fill-color:currentColor}:host([data-variant=compact]){--_pad-y: .45em;--_pad-x: .6em}:host([data-variant=no-padding]){--_pad-y: 0;--_pad-x: 0}:host([data-variant=no-x-padding]){--_pad-x: 0}:host(.has-color) .m-stat__figure{color:var(--m-stat-color);-webkit-text-fill-color:var(--m-stat-color)}:host(.has-corner-color) .m-stat__corner{color:var(--m-stat-corner-color)}:host([data-surface=card]) .m-stat{background:color-mix(in srgb,var(--m-background-lite) 70%,transparent);border:1px solid color-mix(in srgb,var(--m-border) 70%,transparent)}:host([data-surface=shadow]) .m-stat{background:var(--m-background-lite);border:1px solid color-mix(in srgb,var(--m-border) 45%,transparent);box-shadow:0 10px 30px #0000000f;transition:box-shadow .2s ease,transform .2s ease}:host([data-surface=shadow]) .m-stat:hover{box-shadow:0 18px 44px #0000001a;transform:translateY(-2px)}:host([data-surface=glow]) .m-stat{background:color-mix(in srgb,var(--_tone) 10%,transparent);border:1px solid color-mix(in srgb,var(--_tone) 28%,transparent);box-shadow:0 12px 34px color-mix(in srgb,var(--_tone) 18%,transparent)}:host([data-surface=glow]) .m-stat__figure{text-shadow:0 2px 14px color-mix(in srgb,var(--_tone) 40%,transparent)}:host([data-surface=gradient]) .m-stat{background:linear-gradient(135deg,color-mix(in srgb,var(--_tone) 18%,transparent),color-mix(in srgb,var(--m-background-lite) 85%,transparent));border:1px solid color-mix(in srgb,var(--_tone) 20%,transparent);box-shadow:0 8px 24px #0000000d}:host([data-surface=gradient]) .m-stat__figure{text-shadow:0 1px 0 color-mix(in srgb,var(--m-background) 70%,transparent)}\n"]
|
|
41713
|
+
template: "<div class=\"m-stat\">\n <m-key-value variant=\"bento\">\n <span\n key\n class=\"m-stat__label\"\n [class.m-stat__ghost]=\"labelGhost()\"\n [attr.title]=\"labelText() || null\"\n >{{\n labelDisplay()\n }}</span>\n <span value class=\"m-stat__value\">\n <!-- Both slots are wrappers this component owns rather than bare\n `ng-content`: what a caller projects carries the *caller's*\n encapsulation attribute, so `.m-stat__figure` and `.m-stat__corner`\n could not be put on it from here. The wrappers hold the ordering,\n the tone colour and the corner's superscript size; whatever lands\n inside them is the caller's own markup (ADR 0021). -->\n <span class=\"m-stat__figure\"><ng-content select=\"[value]\" /></span>\n <!-- One corner, ordered and aligned by CSS rather than written twice:\n `cornerPosition` is four values and the slot is one node. -->\n <span class=\"m-stat__corner\"><ng-content select=\"[corner]\" /></span>\n </span>\n </m-key-value>\n</div>\n",
|
|
41714
|
+
styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block;width:100%;line-height:1.4;--_tone: var(--m-mm);--_pad-y: .85em;--_pad-x: 1em;--_kv-pad: 0}:host(.is-design-mode){min-width:8em;min-height:4em}.m-stat{display:flex;flex-direction:column;min-width:0;padding:var(--_pad-y) var(--_pad-x);border-radius:.75em}.m-stat__value{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.35em;min-width:0}.m-stat__figure{order:0;min-width:0;display:inline-flex;align-items:center;gap:.35em;font-size:.6060606061em}.m-stat__corner{order:1;align-self:flex-start;display:inline-flex;align-items:center;gap:.25em}.m-stat__corner:empty{display:none}.m-stat__corner{font-size:.5em;font-weight:300;white-space:nowrap;letter-spacing:.01em;color:var(--m-text-tertiary);background:none;-webkit-text-fill-color:currentColor}.m-stat__label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.m-stat__ghost{color:var(--m-text-tertiary);opacity:.6;-webkit-text-fill-color:currentColor}:host(.corner-left) .m-stat__corner{order:-1}:host(.corner-bottom) .m-stat__corner{align-self:flex-end}:host(.is-design-mode) .m-stat__value{flex-direction:column;align-items:flex-start}:host(.is-design-mode) .m-stat__corner{align-self:flex-start}:host(.align-left) .m-stat{text-align:left;--_kv-align: flex-start}:host(.align-center) .m-stat{text-align:center;--_kv-align: center}:host(.align-right) .m-stat{text-align:right;--_kv-align: flex-end}:host(.m-stat-host) .m-stat:has(m-section,m-section-form){--_kv-align: stretch}:host(.m-stat-host) .m-stat:has(m-section,m-section-form) .m-stat__value{display:flex}:host(.m-stat-host) .m-stat:has(m-section,m-section-form) .m-stat__figure{flex:1 1 auto;align-self:stretch;display:grid;-webkit-text-fill-color:currentColor}:host .m-stat__figure:has(m-list,m-one-list){font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-text-fill-color:currentColor}:host([data-variant=compact]){--_pad-y: .45em;--_pad-x: .6em}:host([data-variant=no-padding]){--_pad-y: 0;--_pad-x: 0}:host([data-variant=no-x-padding]){--_pad-x: 0}:host(.has-color) .m-stat__figure{color:var(--m-stat-color);-webkit-text-fill-color:var(--m-stat-color)}:host(.has-corner-color) .m-stat__corner{color:var(--m-stat-corner-color)}:host([data-surface=card]) .m-stat{background:color-mix(in srgb,var(--m-background-lite) 70%,transparent);border:1px solid color-mix(in srgb,var(--m-border) 70%,transparent)}:host([data-surface=shadow]) .m-stat{background:var(--m-background-lite);border:1px solid color-mix(in srgb,var(--m-border) 45%,transparent);box-shadow:0 10px 30px #0000000f;transition:box-shadow .2s ease,transform .2s ease}:host([data-surface=shadow]) .m-stat:hover{box-shadow:0 18px 44px #0000001a;transform:translateY(-2px)}:host([data-surface=glow]) .m-stat{background:color-mix(in srgb,var(--_tone) 10%,transparent);border:1px solid color-mix(in srgb,var(--_tone) 28%,transparent);box-shadow:0 12px 34px color-mix(in srgb,var(--_tone) 18%,transparent)}:host([data-surface=glow]) .m-stat__figure{text-shadow:0 2px 14px color-mix(in srgb,var(--_tone) 40%,transparent)}:host([data-surface=gradient]) .m-stat{background:linear-gradient(135deg,color-mix(in srgb,var(--_tone) 18%,transparent),color-mix(in srgb,var(--m-background-lite) 85%,transparent));border:1px solid color-mix(in srgb,var(--_tone) 20%,transparent);box-shadow:0 8px 24px #0000000d}:host([data-surface=gradient]) .m-stat__figure{text-shadow:0 1px 0 color-mix(in srgb,var(--m-background) 70%,transparent)}\n"]
|
|
41715
41715
|
}]
|
|
41716
41716
|
}],
|
|
41717
41717
|
propDecorators: {
|