@magmonium/one 0.4.88 → 0.4.90
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.
|
@@ -34817,11 +34817,16 @@ const ladderScale = ({ value, levels, forward = [], maxSpanPct }) => {
|
|
|
34817
34817
|
clamp: (v) => Math.max(0, Math.min(100, pos(v)))
|
|
34818
34818
|
};
|
|
34819
34819
|
};
|
|
34820
|
-
const
|
|
34820
|
+
const pointExtent = (_keys, x) => [x, x];
|
|
34821
|
+
const layoutLanes = (items, minGapPx, extent = pointExtent) => {
|
|
34821
34822
|
const labels = [];
|
|
34822
34823
|
const last = [null, null];
|
|
34823
34824
|
for (const item of [...items].sort((a, b) => a.x - b.x)) {
|
|
34824
|
-
const
|
|
34825
|
+
const [start] = extent([item.key], item.x);
|
|
34826
|
+
const lane = [0, 1].find((l) => {
|
|
34827
|
+
const prev = last[l];
|
|
34828
|
+
return !prev || start - extent(prev.keys, prev.x)[1] >= minGapPx;
|
|
34829
|
+
});
|
|
34825
34830
|
if (lane !== void 0) {
|
|
34826
34831
|
const label = {
|
|
34827
34832
|
lane,
|
|
@@ -36495,7 +36500,9 @@ const BREAKPOINT_PX = {
|
|
|
36495
36500
|
xxl: 1400
|
|
36496
36501
|
};
|
|
36497
36502
|
const FALLBACK_PX = 640;
|
|
36498
|
-
const LABEL_GAP_PX =
|
|
36503
|
+
const LABEL_GAP_PX = 12;
|
|
36504
|
+
const LABEL_CHAR_PX = 7.5;
|
|
36505
|
+
const labelPx = (text) => Array.from(text).length * LABEL_CHAR_PX;
|
|
36499
36506
|
const ROW_PX = 28;
|
|
36500
36507
|
const MIN_VERTICAL_PX = 200;
|
|
36501
36508
|
const finite = (v) => typeof v === "number" && Number.isFinite(v) ? v : null;
|
|
@@ -36553,10 +36560,11 @@ var ScaleComponent = class ScaleComponent {
|
|
|
36553
36560
|
const w = this.width();
|
|
36554
36561
|
return w > 0 && w < BREAKPOINT_PX[this.breakpoint()] ? "vertical" : "horizontal";
|
|
36555
36562
|
}, ...ngDevMode ? [{ debugName: "shownAs" }] : /* istanbul ignore next */ []);
|
|
36556
|
-
marks = computed(() => this.markTags().flatMap((tag) => {
|
|
36563
|
+
marks = computed(() => this.markTags().flatMap((tag, i) => {
|
|
36557
36564
|
const value = finite(tag.value());
|
|
36558
36565
|
if (value === null) return [];
|
|
36559
36566
|
return [{
|
|
36567
|
+
id: `mark-${i}`,
|
|
36560
36568
|
key: tag.key(),
|
|
36561
36569
|
name: this.t(tag.label() || tag.key()),
|
|
36562
36570
|
value,
|
|
@@ -36621,7 +36629,7 @@ var ScaleComponent = class ScaleComponent {
|
|
|
36621
36629
|
const ticks = marks.map((m) => {
|
|
36622
36630
|
const pin = domain.pin(m.value);
|
|
36623
36631
|
return {
|
|
36624
|
-
key: m.
|
|
36632
|
+
key: m.id,
|
|
36625
36633
|
kind: m.kind,
|
|
36626
36634
|
primary: m.primary,
|
|
36627
36635
|
at: at(m.value),
|
|
@@ -36629,7 +36637,7 @@ var ScaleComponent = class ScaleComponent {
|
|
|
36629
36637
|
};
|
|
36630
36638
|
});
|
|
36631
36639
|
const bands = marks.filter((m) => m.kind === "target" && m.low !== null && m.high !== null).map((m) => ({
|
|
36632
|
-
key: m.
|
|
36640
|
+
key: m.id,
|
|
36633
36641
|
...span(at(m.low), at(m.high))
|
|
36634
36642
|
}));
|
|
36635
36643
|
const bounds = marks.filter((m) => m.kind === "bound").map((m) => m.value);
|
|
@@ -36647,9 +36655,9 @@ var ScaleComponent = class ScaleComponent {
|
|
|
36647
36655
|
...b,
|
|
36648
36656
|
row
|
|
36649
36657
|
}));
|
|
36650
|
-
const
|
|
36651
|
-
const text = (
|
|
36652
|
-
const group =
|
|
36658
|
+
const byId = new Map(marks.map((m) => [m.id, m]));
|
|
36659
|
+
const text = (ids) => {
|
|
36660
|
+
const group = ids.map((id) => byId.get(id));
|
|
36653
36661
|
return {
|
|
36654
36662
|
name: group.map((m) => m.name).join(" · "),
|
|
36655
36663
|
valueText: group.map((m) => this.formatValue(m.value)).join(" · "),
|
|
@@ -36677,10 +36685,16 @@ var ScaleComponent = class ScaleComponent {
|
|
|
36677
36685
|
};
|
|
36678
36686
|
}
|
|
36679
36687
|
const widthPx = this.width() || FALLBACK_PX;
|
|
36688
|
+
const extent = (ids, x) => {
|
|
36689
|
+
const { name, valueText } = text(ids);
|
|
36690
|
+
const w = Math.max(labelPx(name), labelPx(valueText));
|
|
36691
|
+
const start = x - w * x / widthPx;
|
|
36692
|
+
return [start, start + w];
|
|
36693
|
+
};
|
|
36680
36694
|
const labels = layoutLanes(ticks.map((t) => ({
|
|
36681
36695
|
key: t.key,
|
|
36682
36696
|
x: t.at / 100 * widthPx
|
|
36683
|
-
})), LABEL_GAP_PX).map((l) => ({
|
|
36697
|
+
})), LABEL_GAP_PX, extent).map((l) => ({
|
|
36684
36698
|
key: l.keys.join("+"),
|
|
36685
36699
|
lane: l.lane,
|
|
36686
36700
|
at: l.x / widthPx * 100,
|
|
@@ -36793,7 +36807,7 @@ var ScaleComponent = class ScaleComponent {
|
|
|
36793
36807
|
}],
|
|
36794
36808
|
ngImport: i0,
|
|
36795
36809
|
template: "<div [class]=\"'m-scale is-' + shownAs()\" role=\"img\" [attr.aria-label]=\"summary()\">\n <div class=\"m-scale__head\">\n @if (label()) {\n <span class=\"m-scale__label\">{{ label() | translate }}</span>\n }\n @if (primary(); as p) {\n <span class=\"m-scale__value\">{{ formatValue(p.value) }}</span>\n <span class=\"m-scale__value-name\">{{ p.name }}</span>\n }\n </div>\n\n @if (chips().length) {\n <div class=\"m-scale__chips\">\n @for (c of chips(); track c.key) {\n <span [class]=\"'m-scale__chip is-' + c.tone\" [attr.title]=\"c.detail || null\">{{ c.label }}</span>\n }\n </div>\n }\n\n @if (plot(); as p) {\n <div\n class=\"m-scale__plot\"\n [style.--_lanes]=\"p.lanes\"\n [style.--_brackets]=\"p.brackets.length\"\n [style.height.px]=\"shownAs() === 'vertical' ? verticalPx() : null\"\n >\n <div class=\"m-scale__axis\">\n @if (p.range; as r) {\n <span class=\"m-scale__range\" [style.--_from.%]=\"r.from\" [style.--_size.%]=\"r.size\"></span>\n }\n @for (b of p.bands; track b.key) {\n <span class=\"m-scale__band\" [style.--_from.%]=\"b.from\" [style.--_size.%]=\"b.size\"></span>\n }\n @for (t of p.ticks; track t.key) {\n <span\n [class]=\"'m-scale__tick is-' + t.kind\"\n [class.is-primary]=\"t.primary\"\n [class.is-pin-start]=\"t.pin === 'start'\"\n [class.is-pin-end]=\"t.pin === 'end'\"\n [style.--_at.%]=\"t.at\"\n ></span>\n }\n </div>\n\n @for (l of p.labels; track l.key) {\n <span\n class=\"m-scale__mark-label\"\n [class.is-lane-2]=\"l.lane === 1\"\n [class.is-primary]=\"l.primary\"\n [class.is-target]=\"l.target\"\n [style.--_at.%]=\"l.at\"\n >\n <span class=\"m-scale__mark-name\">{{ l.name }}</span>\n <span class=\"m-scale__mark-value\">{{ l.valueText }}</span>\n </span>\n }\n\n @for (b of p.brackets; track b.key) {\n <span\n [class]=\"'m-scale__bracket is-' + b.tone\"\n [attr.title]=\"b.label\"\n [style.--_from.%]=\"b.from\"\n [style.--_size.%]=\"b.size\"\n [style.--_row]=\"b.row\"\n >\n <span class=\"m-scale__bracket-label\">{{ b.label }}</span>\n </span>\n }\n </div>\n }\n</div>\n",
|
|
36796
|
-
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;--m-scale-target: var(--m-mm);--m-scale-up: var(--m-success);--m-scale-down: var(--m-error);--m-scale-warn: var(--m-warning);--m-scale-gold: var(--m-gold)}.m-scale{display:flex;flex-direction:column;gap:.75em;font-variant-numeric:tabular-nums}.m-scale__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em}.m-scale__label{color:var(--m-text-secondary);font-weight:600}.m-scale__value{font-size:1.5em;font-weight:700}.m-scale__value-name{color:var(--m-text-tertiary);font-size:.8em}.m-scale__chips{display:flex;flex-wrap:wrap;gap:.4em}.m-scale__chip{display:inline-flex;align-items:center;gap:.4em;padding:.15em .65em .15em .5em;border:1px solid var(--m-border);border-radius:999px;font-size:.8em;font-weight:500}.m-scale__chip:before{content:\"\";width:.55em;height:.55em;border-radius:50%;background:var(--_tone, var(--m-text-tertiary))}.m-scale__chip.is-up{--_tone: var(--m-scale-up)}.m-scale__chip.is-down{--_tone: var(--m-scale-down)}.m-scale__chip.is-warn{--_tone: var(--m-scale-warn)}.m-scale__chip.is-gold{--_tone: var(--m-scale-gold);border-color:var(--m-scale-gold)}.m-scale__plot{position:relative}.m-scale__axis{position:absolute}.m-scale__axis:before{content:\"\";position:absolute;background:var(--m-border)}.m-scale__range,.m-scale__band,.m-scale__tick,.m-scale__bracket,.m-scale__mark-label{position:absolute}.m-scale__range{background:color-mix(in srgb,var(--m-text-tertiary) 22%,transparent)}.m-scale__band{border:1px dashed var(--m-scale-target);border-radius:.2em;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--m-scale-target) 22%,transparent) 0 2px,transparent 2px 6px)}.m-scale__tick{background:var(--m-text-secondary)}.m-scale__tick.is-bound{background:var(--m-text-tertiary)}.m-scale__tick.is-target{background:none}.m-scale__mark-label{font-size:.75em;white-space:nowrap}.m-scale__mark-label.is-primary{font-weight:700}.m-scale__mark-label.is-target{color:var(--m-scale-target)}.m-scale__mark-name{color:var(--m-text-tertiary)}.m-scale__mark-value{font-weight:600}.m-scale__bracket{border:1.5px solid var(--_tone, var(--m-text-tertiary))}.m-scale__bracket.is-up{--_tone: var(--m-scale-up)}.m-scale__bracket.is-down{--_tone: var(--m-scale-down)}.m-scale__bracket.is-warn{--_tone: var(--m-scale-warn)}.m-scale__bracket.is-gold{--_tone: var(--m-scale-gold)}.m-scale__bracket-label{position:absolute;color:var(--_tone, var(--m-text-tertiary));font-size:.7em;white-space:nowrap}.m-scale.is-horizontal .m-scale__plot{height:calc(2.6em + var(--_lanes, 1) * 2.4em + var(--_brackets, 0) * 1.8em)}.m-scale.is-horizontal .m-scale__axis{inset:0 0 auto;height:2.4em}.m-scale.is-horizontal .m-scale__axis:before{inset:50% 0 auto;height:2px;transform:translateY(-50%)}.m-scale.is-horizontal .m-scale__range,.m-scale.is-horizontal .m-scale__band{top:50%;left:var(--_from);width:var(--_size);transform:translateY(-50%)}.m-scale.is-horizontal .m-scale__range{height:.5em}.m-scale.is-horizontal .m-scale__band{height:1.4em}.m-scale.is-horizontal .m-scale__tick{top:50%;left:var(--_at);width:1.5px;height:.9em;transform:translate(-50%,-50%)}.m-scale.is-horizontal .m-scale__tick.is-bound{width:2.5px;height:1.3em}.m-scale.is-horizontal .m-scale__tick.is-target{width:0;height:2em;border-left:2px dashed var(--m-scale-target)}.m-scale.is-horizontal .m-scale__tick.is-primary{width:.9em;height:.9em;border:2px solid var(--m-background);border-radius:50%;background:var(--m-text)}.m-scale.is-horizontal .m-scale__tick.is-pin-start,.m-scale.is-horizontal .m-scale__tick.is-pin-end{width:.6em;height:.6em;border:0;border-top:2.5px solid var(--m-scale-target);border-right:2.5px solid var(--m-scale-target);background:none}.m-scale.is-horizontal .m-scale__tick.is-pin-start{transform:translate(-50%,-50%) rotate(-135deg)}.m-scale.is-horizontal .m-scale__tick.is-pin-end{transform:translate(-50%,-50%) rotate(45deg)}.m-scale.is-horizontal .m-scale__mark-label{top:3.4em;left:var(--_at);display:flex;flex-direction:column;align-items:center;transform:translate(calc(var(--_at) * -1))}.m-scale.is-horizontal .m-scale__mark-label.is-lane-2{top:6.6em}.m-scale.is-horizontal .m-scale__bracket{top:calc(2.8em + var(--_lanes, 1) * 2.4em + var(--_row, 0) * 1.8em);left:var(--_from);width:var(--_size);height:.45em;border-top:0}.m-scale.is-horizontal .m-scale__bracket-label{top:.45em;left:50%;transform:translate(-50%)}.m-scale.is-vertical .m-scale__axis{inset:0 auto 0 calc(.5em + var(--_brackets, 0) * .9em);width:2.4em}.m-scale.is-vertical .m-scale__axis:before{inset:0 auto 0 50%;width:2px;transform:translate(-50%)}.m-scale.is-vertical .m-scale__range,.m-scale.is-vertical .m-scale__band{top:var(--_from);left:50%;height:var(--_size);transform:translate(-50%)}.m-scale.is-vertical .m-scale__range{width:.5em}.m-scale.is-vertical .m-scale__band{width:1.4em}.m-scale.is-vertical .m-scale__tick{top:var(--_at);left:50%;width:.9em;height:1.5px;transform:translate(-50%,-50%)}.m-scale.is-vertical .m-scale__tick.is-bound{width:1.3em;height:2.5px}.m-scale.is-vertical .m-scale__tick.is-target{width:2em;height:0;border-top:2px dashed var(--m-scale-target)}.m-scale.is-vertical .m-scale__tick.is-primary{width:.9em;height:.9em;border:2px solid var(--m-background);border-radius:50%;background:var(--m-text)}.m-scale.is-vertical .m-scale__tick.is-pin-start,.m-scale.is-vertical .m-scale__tick.is-pin-end{width:.6em;height:.6em;border:0;border-top:2.5px solid var(--m-scale-target);border-right:2.5px solid var(--m-scale-target);background:none}.m-scale.is-vertical .m-scale__tick.is-pin-start{transform:translate(-50%,-50%) rotate(-45deg)}.m-scale.is-vertical .m-scale__tick.is-pin-end{transform:translate(-50%,-50%) rotate(135deg)}.m-scale.is-vertical .m-scale__mark-label{top:var(--_at);left:calc(3.6em + var(--_brackets, 0) * .9em);display:flex;gap:.5em;transform:translateY(-50%)}.m-scale.is-vertical .m-scale__bracket{top:var(--_from);left:calc(.2em + var(--_row, 0) * .9em);width:.45em;height:var(--_size);border-right:0}.m-scale.is-vertical .m-scale__bracket-label{display:none}\n"],
|
|
36810
|
+
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;flex:1 1 100%;min-width:0;--m-scale-target: var(--m-mm);--m-scale-up: var(--m-success);--m-scale-down: var(--m-error);--m-scale-warn: var(--m-warning);--m-scale-gold: var(--m-gold)}.m-scale{display:flex;flex-direction:column;gap:.75em;font-variant-numeric:tabular-nums}.m-scale__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em}.m-scale__label{color:var(--m-text-secondary);font-weight:600}.m-scale__value{font-size:1.5em;font-weight:700}.m-scale__value-name{color:var(--m-text-tertiary);font-size:.8em}.m-scale__chips{display:flex;flex-wrap:wrap;gap:.4em}.m-scale__chip{display:inline-flex;align-items:center;gap:.4em;padding:.15em .65em .15em .5em;border:1px solid var(--m-border);border-radius:999px;font-size:.8em;font-weight:500}.m-scale__chip:before{content:\"\";width:.55em;height:.55em;border-radius:50%;background:var(--_tone, var(--m-text-tertiary))}.m-scale__chip.is-up{--_tone: var(--m-scale-up)}.m-scale__chip.is-down{--_tone: var(--m-scale-down)}.m-scale__chip.is-warn{--_tone: var(--m-scale-warn)}.m-scale__chip.is-gold{--_tone: var(--m-scale-gold);border-color:var(--m-scale-gold)}.m-scale__plot{position:relative}.m-scale__axis{position:absolute}.m-scale__axis:before{content:\"\";position:absolute;background:var(--m-border)}.m-scale__range,.m-scale__band,.m-scale__tick,.m-scale__bracket,.m-scale__mark-label{position:absolute}.m-scale__range{background:color-mix(in srgb,var(--m-text-tertiary) 22%,transparent)}.m-scale__band{border:1px dashed var(--m-scale-target);border-radius:.2em;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--m-scale-target) 22%,transparent) 0 2px,transparent 2px 6px)}.m-scale__tick{background:var(--m-text-secondary)}.m-scale__tick.is-bound{background:var(--m-text-tertiary)}.m-scale__tick.is-target{background:none}.m-scale__mark-label{font-size:.75em;white-space:nowrap}.m-scale__mark-label.is-primary{font-weight:700}.m-scale__mark-label.is-target{color:var(--m-scale-target)}.m-scale__mark-name{color:var(--m-text-tertiary)}.m-scale__mark-value{font-weight:600}.m-scale__bracket{border:1.5px solid var(--_tone, var(--m-text-tertiary))}.m-scale__bracket.is-up{--_tone: var(--m-scale-up)}.m-scale__bracket.is-down{--_tone: var(--m-scale-down)}.m-scale__bracket.is-warn{--_tone: var(--m-scale-warn)}.m-scale__bracket.is-gold{--_tone: var(--m-scale-gold)}.m-scale__bracket-label{position:absolute;color:var(--_tone, var(--m-text-tertiary));font-size:.7em;white-space:nowrap}.m-scale.is-horizontal .m-scale__plot{height:calc(2.6em + var(--_lanes, 1) * 2.4em + var(--_brackets, 0) * 1.8em)}.m-scale.is-horizontal .m-scale__axis{inset:0 0 auto;height:2.4em}.m-scale.is-horizontal .m-scale__axis:before{inset:50% 0 auto;height:2px;transform:translateY(-50%)}.m-scale.is-horizontal .m-scale__range,.m-scale.is-horizontal .m-scale__band{top:50%;left:var(--_from);width:var(--_size);transform:translateY(-50%)}.m-scale.is-horizontal .m-scale__range{height:.5em}.m-scale.is-horizontal .m-scale__band{height:1.4em}.m-scale.is-horizontal .m-scale__tick{top:50%;left:var(--_at);width:1.5px;height:.9em;transform:translate(-50%,-50%)}.m-scale.is-horizontal .m-scale__tick.is-bound{width:2.5px;height:1.3em}.m-scale.is-horizontal .m-scale__tick.is-target{width:0;height:2em;border-left:2px dashed var(--m-scale-target)}.m-scale.is-horizontal .m-scale__tick.is-primary{width:.9em;height:.9em;border:2px solid var(--m-background);border-radius:50%;background:var(--m-text)}.m-scale.is-horizontal .m-scale__tick.is-pin-start,.m-scale.is-horizontal .m-scale__tick.is-pin-end{width:.6em;height:.6em;border:0;border-top:2.5px solid var(--m-scale-target);border-right:2.5px solid var(--m-scale-target);background:none}.m-scale.is-horizontal .m-scale__tick.is-pin-start{transform:translate(-50%,-50%) rotate(-135deg)}.m-scale.is-horizontal .m-scale__tick.is-pin-end{transform:translate(-50%,-50%) rotate(45deg)}.m-scale.is-horizontal .m-scale__mark-label{top:3.4em;left:var(--_at);display:flex;flex-direction:column;align-items:center;transform:translate(calc(var(--_at) * -1))}.m-scale.is-horizontal .m-scale__mark-label.is-lane-2{top:6.6em}.m-scale.is-horizontal .m-scale__bracket{top:calc(2.8em + var(--_lanes, 1) * 2.4em + var(--_row, 0) * 1.8em);left:var(--_from);width:var(--_size);height:.45em;border-top:0}.m-scale.is-horizontal .m-scale__bracket-label{top:.45em;left:50%;transform:translate(-50%)}.m-scale.is-vertical .m-scale__axis{inset:0 auto 0 calc(.5em + var(--_brackets, 0) * .9em);width:2.4em}.m-scale.is-vertical .m-scale__axis:before{inset:0 auto 0 50%;width:2px;transform:translate(-50%)}.m-scale.is-vertical .m-scale__range,.m-scale.is-vertical .m-scale__band{top:var(--_from);left:50%;height:var(--_size);transform:translate(-50%)}.m-scale.is-vertical .m-scale__range{width:.5em}.m-scale.is-vertical .m-scale__band{width:1.4em}.m-scale.is-vertical .m-scale__tick{top:var(--_at);left:50%;width:.9em;height:1.5px;transform:translate(-50%,-50%)}.m-scale.is-vertical .m-scale__tick.is-bound{width:1.3em;height:2.5px}.m-scale.is-vertical .m-scale__tick.is-target{width:2em;height:0;border-top:2px dashed var(--m-scale-target)}.m-scale.is-vertical .m-scale__tick.is-primary{width:.9em;height:.9em;border:2px solid var(--m-background);border-radius:50%;background:var(--m-text)}.m-scale.is-vertical .m-scale__tick.is-pin-start,.m-scale.is-vertical .m-scale__tick.is-pin-end{width:.6em;height:.6em;border:0;border-top:2.5px solid var(--m-scale-target);border-right:2.5px solid var(--m-scale-target);background:none}.m-scale.is-vertical .m-scale__tick.is-pin-start{transform:translate(-50%,-50%) rotate(-45deg)}.m-scale.is-vertical .m-scale__tick.is-pin-end{transform:translate(-50%,-50%) rotate(135deg)}.m-scale.is-vertical .m-scale__mark-label{top:var(--_at);left:calc(3.6em + var(--_brackets, 0) * .9em);display:flex;gap:.5em;transform:translateY(-50%)}.m-scale.is-vertical .m-scale__bracket{top:var(--_from);left:calc(.2em + var(--_row, 0) * .9em);width:.45em;height:var(--_size);border-right:0}.m-scale.is-vertical .m-scale__bracket-label{display:none}\n"],
|
|
36797
36811
|
dependencies: [{
|
|
36798
36812
|
kind: "pipe",
|
|
36799
36813
|
type: TranslatePipe,
|
|
@@ -36814,7 +36828,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
36814
36828
|
imports: [TranslatePipe],
|
|
36815
36829
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
36816
36830
|
template: "<div [class]=\"'m-scale is-' + shownAs()\" role=\"img\" [attr.aria-label]=\"summary()\">\n <div class=\"m-scale__head\">\n @if (label()) {\n <span class=\"m-scale__label\">{{ label() | translate }}</span>\n }\n @if (primary(); as p) {\n <span class=\"m-scale__value\">{{ formatValue(p.value) }}</span>\n <span class=\"m-scale__value-name\">{{ p.name }}</span>\n }\n </div>\n\n @if (chips().length) {\n <div class=\"m-scale__chips\">\n @for (c of chips(); track c.key) {\n <span [class]=\"'m-scale__chip is-' + c.tone\" [attr.title]=\"c.detail || null\">{{ c.label }}</span>\n }\n </div>\n }\n\n @if (plot(); as p) {\n <div\n class=\"m-scale__plot\"\n [style.--_lanes]=\"p.lanes\"\n [style.--_brackets]=\"p.brackets.length\"\n [style.height.px]=\"shownAs() === 'vertical' ? verticalPx() : null\"\n >\n <div class=\"m-scale__axis\">\n @if (p.range; as r) {\n <span class=\"m-scale__range\" [style.--_from.%]=\"r.from\" [style.--_size.%]=\"r.size\"></span>\n }\n @for (b of p.bands; track b.key) {\n <span class=\"m-scale__band\" [style.--_from.%]=\"b.from\" [style.--_size.%]=\"b.size\"></span>\n }\n @for (t of p.ticks; track t.key) {\n <span\n [class]=\"'m-scale__tick is-' + t.kind\"\n [class.is-primary]=\"t.primary\"\n [class.is-pin-start]=\"t.pin === 'start'\"\n [class.is-pin-end]=\"t.pin === 'end'\"\n [style.--_at.%]=\"t.at\"\n ></span>\n }\n </div>\n\n @for (l of p.labels; track l.key) {\n <span\n class=\"m-scale__mark-label\"\n [class.is-lane-2]=\"l.lane === 1\"\n [class.is-primary]=\"l.primary\"\n [class.is-target]=\"l.target\"\n [style.--_at.%]=\"l.at\"\n >\n <span class=\"m-scale__mark-name\">{{ l.name }}</span>\n <span class=\"m-scale__mark-value\">{{ l.valueText }}</span>\n </span>\n }\n\n @for (b of p.brackets; track b.key) {\n <span\n [class]=\"'m-scale__bracket is-' + b.tone\"\n [attr.title]=\"b.label\"\n [style.--_from.%]=\"b.from\"\n [style.--_size.%]=\"b.size\"\n [style.--_row]=\"b.row\"\n >\n <span class=\"m-scale__bracket-label\">{{ b.label }}</span>\n </span>\n }\n </div>\n }\n</div>\n",
|
|
36817
|
-
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;--m-scale-target: var(--m-mm);--m-scale-up: var(--m-success);--m-scale-down: var(--m-error);--m-scale-warn: var(--m-warning);--m-scale-gold: var(--m-gold)}.m-scale{display:flex;flex-direction:column;gap:.75em;font-variant-numeric:tabular-nums}.m-scale__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em}.m-scale__label{color:var(--m-text-secondary);font-weight:600}.m-scale__value{font-size:1.5em;font-weight:700}.m-scale__value-name{color:var(--m-text-tertiary);font-size:.8em}.m-scale__chips{display:flex;flex-wrap:wrap;gap:.4em}.m-scale__chip{display:inline-flex;align-items:center;gap:.4em;padding:.15em .65em .15em .5em;border:1px solid var(--m-border);border-radius:999px;font-size:.8em;font-weight:500}.m-scale__chip:before{content:\"\";width:.55em;height:.55em;border-radius:50%;background:var(--_tone, var(--m-text-tertiary))}.m-scale__chip.is-up{--_tone: var(--m-scale-up)}.m-scale__chip.is-down{--_tone: var(--m-scale-down)}.m-scale__chip.is-warn{--_tone: var(--m-scale-warn)}.m-scale__chip.is-gold{--_tone: var(--m-scale-gold);border-color:var(--m-scale-gold)}.m-scale__plot{position:relative}.m-scale__axis{position:absolute}.m-scale__axis:before{content:\"\";position:absolute;background:var(--m-border)}.m-scale__range,.m-scale__band,.m-scale__tick,.m-scale__bracket,.m-scale__mark-label{position:absolute}.m-scale__range{background:color-mix(in srgb,var(--m-text-tertiary) 22%,transparent)}.m-scale__band{border:1px dashed var(--m-scale-target);border-radius:.2em;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--m-scale-target) 22%,transparent) 0 2px,transparent 2px 6px)}.m-scale__tick{background:var(--m-text-secondary)}.m-scale__tick.is-bound{background:var(--m-text-tertiary)}.m-scale__tick.is-target{background:none}.m-scale__mark-label{font-size:.75em;white-space:nowrap}.m-scale__mark-label.is-primary{font-weight:700}.m-scale__mark-label.is-target{color:var(--m-scale-target)}.m-scale__mark-name{color:var(--m-text-tertiary)}.m-scale__mark-value{font-weight:600}.m-scale__bracket{border:1.5px solid var(--_tone, var(--m-text-tertiary))}.m-scale__bracket.is-up{--_tone: var(--m-scale-up)}.m-scale__bracket.is-down{--_tone: var(--m-scale-down)}.m-scale__bracket.is-warn{--_tone: var(--m-scale-warn)}.m-scale__bracket.is-gold{--_tone: var(--m-scale-gold)}.m-scale__bracket-label{position:absolute;color:var(--_tone, var(--m-text-tertiary));font-size:.7em;white-space:nowrap}.m-scale.is-horizontal .m-scale__plot{height:calc(2.6em + var(--_lanes, 1) * 2.4em + var(--_brackets, 0) * 1.8em)}.m-scale.is-horizontal .m-scale__axis{inset:0 0 auto;height:2.4em}.m-scale.is-horizontal .m-scale__axis:before{inset:50% 0 auto;height:2px;transform:translateY(-50%)}.m-scale.is-horizontal .m-scale__range,.m-scale.is-horizontal .m-scale__band{top:50%;left:var(--_from);width:var(--_size);transform:translateY(-50%)}.m-scale.is-horizontal .m-scale__range{height:.5em}.m-scale.is-horizontal .m-scale__band{height:1.4em}.m-scale.is-horizontal .m-scale__tick{top:50%;left:var(--_at);width:1.5px;height:.9em;transform:translate(-50%,-50%)}.m-scale.is-horizontal .m-scale__tick.is-bound{width:2.5px;height:1.3em}.m-scale.is-horizontal .m-scale__tick.is-target{width:0;height:2em;border-left:2px dashed var(--m-scale-target)}.m-scale.is-horizontal .m-scale__tick.is-primary{width:.9em;height:.9em;border:2px solid var(--m-background);border-radius:50%;background:var(--m-text)}.m-scale.is-horizontal .m-scale__tick.is-pin-start,.m-scale.is-horizontal .m-scale__tick.is-pin-end{width:.6em;height:.6em;border:0;border-top:2.5px solid var(--m-scale-target);border-right:2.5px solid var(--m-scale-target);background:none}.m-scale.is-horizontal .m-scale__tick.is-pin-start{transform:translate(-50%,-50%) rotate(-135deg)}.m-scale.is-horizontal .m-scale__tick.is-pin-end{transform:translate(-50%,-50%) rotate(45deg)}.m-scale.is-horizontal .m-scale__mark-label{top:3.4em;left:var(--_at);display:flex;flex-direction:column;align-items:center;transform:translate(calc(var(--_at) * -1))}.m-scale.is-horizontal .m-scale__mark-label.is-lane-2{top:6.6em}.m-scale.is-horizontal .m-scale__bracket{top:calc(2.8em + var(--_lanes, 1) * 2.4em + var(--_row, 0) * 1.8em);left:var(--_from);width:var(--_size);height:.45em;border-top:0}.m-scale.is-horizontal .m-scale__bracket-label{top:.45em;left:50%;transform:translate(-50%)}.m-scale.is-vertical .m-scale__axis{inset:0 auto 0 calc(.5em + var(--_brackets, 0) * .9em);width:2.4em}.m-scale.is-vertical .m-scale__axis:before{inset:0 auto 0 50%;width:2px;transform:translate(-50%)}.m-scale.is-vertical .m-scale__range,.m-scale.is-vertical .m-scale__band{top:var(--_from);left:50%;height:var(--_size);transform:translate(-50%)}.m-scale.is-vertical .m-scale__range{width:.5em}.m-scale.is-vertical .m-scale__band{width:1.4em}.m-scale.is-vertical .m-scale__tick{top:var(--_at);left:50%;width:.9em;height:1.5px;transform:translate(-50%,-50%)}.m-scale.is-vertical .m-scale__tick.is-bound{width:1.3em;height:2.5px}.m-scale.is-vertical .m-scale__tick.is-target{width:2em;height:0;border-top:2px dashed var(--m-scale-target)}.m-scale.is-vertical .m-scale__tick.is-primary{width:.9em;height:.9em;border:2px solid var(--m-background);border-radius:50%;background:var(--m-text)}.m-scale.is-vertical .m-scale__tick.is-pin-start,.m-scale.is-vertical .m-scale__tick.is-pin-end{width:.6em;height:.6em;border:0;border-top:2.5px solid var(--m-scale-target);border-right:2.5px solid var(--m-scale-target);background:none}.m-scale.is-vertical .m-scale__tick.is-pin-start{transform:translate(-50%,-50%) rotate(-45deg)}.m-scale.is-vertical .m-scale__tick.is-pin-end{transform:translate(-50%,-50%) rotate(135deg)}.m-scale.is-vertical .m-scale__mark-label{top:var(--_at);left:calc(3.6em + var(--_brackets, 0) * .9em);display:flex;gap:.5em;transform:translateY(-50%)}.m-scale.is-vertical .m-scale__bracket{top:var(--_from);left:calc(.2em + var(--_row, 0) * .9em);width:.45em;height:var(--_size);border-right:0}.m-scale.is-vertical .m-scale__bracket-label{display:none}\n"]
|
|
36831
|
+
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;flex:1 1 100%;min-width:0;--m-scale-target: var(--m-mm);--m-scale-up: var(--m-success);--m-scale-down: var(--m-error);--m-scale-warn: var(--m-warning);--m-scale-gold: var(--m-gold)}.m-scale{display:flex;flex-direction:column;gap:.75em;font-variant-numeric:tabular-nums}.m-scale__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em}.m-scale__label{color:var(--m-text-secondary);font-weight:600}.m-scale__value{font-size:1.5em;font-weight:700}.m-scale__value-name{color:var(--m-text-tertiary);font-size:.8em}.m-scale__chips{display:flex;flex-wrap:wrap;gap:.4em}.m-scale__chip{display:inline-flex;align-items:center;gap:.4em;padding:.15em .65em .15em .5em;border:1px solid var(--m-border);border-radius:999px;font-size:.8em;font-weight:500}.m-scale__chip:before{content:\"\";width:.55em;height:.55em;border-radius:50%;background:var(--_tone, var(--m-text-tertiary))}.m-scale__chip.is-up{--_tone: var(--m-scale-up)}.m-scale__chip.is-down{--_tone: var(--m-scale-down)}.m-scale__chip.is-warn{--_tone: var(--m-scale-warn)}.m-scale__chip.is-gold{--_tone: var(--m-scale-gold);border-color:var(--m-scale-gold)}.m-scale__plot{position:relative}.m-scale__axis{position:absolute}.m-scale__axis:before{content:\"\";position:absolute;background:var(--m-border)}.m-scale__range,.m-scale__band,.m-scale__tick,.m-scale__bracket,.m-scale__mark-label{position:absolute}.m-scale__range{background:color-mix(in srgb,var(--m-text-tertiary) 22%,transparent)}.m-scale__band{border:1px dashed var(--m-scale-target);border-radius:.2em;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--m-scale-target) 22%,transparent) 0 2px,transparent 2px 6px)}.m-scale__tick{background:var(--m-text-secondary)}.m-scale__tick.is-bound{background:var(--m-text-tertiary)}.m-scale__tick.is-target{background:none}.m-scale__mark-label{font-size:.75em;white-space:nowrap}.m-scale__mark-label.is-primary{font-weight:700}.m-scale__mark-label.is-target{color:var(--m-scale-target)}.m-scale__mark-name{color:var(--m-text-tertiary)}.m-scale__mark-value{font-weight:600}.m-scale__bracket{border:1.5px solid var(--_tone, var(--m-text-tertiary))}.m-scale__bracket.is-up{--_tone: var(--m-scale-up)}.m-scale__bracket.is-down{--_tone: var(--m-scale-down)}.m-scale__bracket.is-warn{--_tone: var(--m-scale-warn)}.m-scale__bracket.is-gold{--_tone: var(--m-scale-gold)}.m-scale__bracket-label{position:absolute;color:var(--_tone, var(--m-text-tertiary));font-size:.7em;white-space:nowrap}.m-scale.is-horizontal .m-scale__plot{height:calc(2.6em + var(--_lanes, 1) * 2.4em + var(--_brackets, 0) * 1.8em)}.m-scale.is-horizontal .m-scale__axis{inset:0 0 auto;height:2.4em}.m-scale.is-horizontal .m-scale__axis:before{inset:50% 0 auto;height:2px;transform:translateY(-50%)}.m-scale.is-horizontal .m-scale__range,.m-scale.is-horizontal .m-scale__band{top:50%;left:var(--_from);width:var(--_size);transform:translateY(-50%)}.m-scale.is-horizontal .m-scale__range{height:.5em}.m-scale.is-horizontal .m-scale__band{height:1.4em}.m-scale.is-horizontal .m-scale__tick{top:50%;left:var(--_at);width:1.5px;height:.9em;transform:translate(-50%,-50%)}.m-scale.is-horizontal .m-scale__tick.is-bound{width:2.5px;height:1.3em}.m-scale.is-horizontal .m-scale__tick.is-target{width:0;height:2em;border-left:2px dashed var(--m-scale-target)}.m-scale.is-horizontal .m-scale__tick.is-primary{width:.9em;height:.9em;border:2px solid var(--m-background);border-radius:50%;background:var(--m-text)}.m-scale.is-horizontal .m-scale__tick.is-pin-start,.m-scale.is-horizontal .m-scale__tick.is-pin-end{width:.6em;height:.6em;border:0;border-top:2.5px solid var(--m-scale-target);border-right:2.5px solid var(--m-scale-target);background:none}.m-scale.is-horizontal .m-scale__tick.is-pin-start{transform:translate(-50%,-50%) rotate(-135deg)}.m-scale.is-horizontal .m-scale__tick.is-pin-end{transform:translate(-50%,-50%) rotate(45deg)}.m-scale.is-horizontal .m-scale__mark-label{top:3.4em;left:var(--_at);display:flex;flex-direction:column;align-items:center;transform:translate(calc(var(--_at) * -1))}.m-scale.is-horizontal .m-scale__mark-label.is-lane-2{top:6.6em}.m-scale.is-horizontal .m-scale__bracket{top:calc(2.8em + var(--_lanes, 1) * 2.4em + var(--_row, 0) * 1.8em);left:var(--_from);width:var(--_size);height:.45em;border-top:0}.m-scale.is-horizontal .m-scale__bracket-label{top:.45em;left:50%;transform:translate(-50%)}.m-scale.is-vertical .m-scale__axis{inset:0 auto 0 calc(.5em + var(--_brackets, 0) * .9em);width:2.4em}.m-scale.is-vertical .m-scale__axis:before{inset:0 auto 0 50%;width:2px;transform:translate(-50%)}.m-scale.is-vertical .m-scale__range,.m-scale.is-vertical .m-scale__band{top:var(--_from);left:50%;height:var(--_size);transform:translate(-50%)}.m-scale.is-vertical .m-scale__range{width:.5em}.m-scale.is-vertical .m-scale__band{width:1.4em}.m-scale.is-vertical .m-scale__tick{top:var(--_at);left:50%;width:.9em;height:1.5px;transform:translate(-50%,-50%)}.m-scale.is-vertical .m-scale__tick.is-bound{width:1.3em;height:2.5px}.m-scale.is-vertical .m-scale__tick.is-target{width:2em;height:0;border-top:2px dashed var(--m-scale-target)}.m-scale.is-vertical .m-scale__tick.is-primary{width:.9em;height:.9em;border:2px solid var(--m-background);border-radius:50%;background:var(--m-text)}.m-scale.is-vertical .m-scale__tick.is-pin-start,.m-scale.is-vertical .m-scale__tick.is-pin-end{width:.6em;height:.6em;border:0;border-top:2.5px solid var(--m-scale-target);border-right:2.5px solid var(--m-scale-target);background:none}.m-scale.is-vertical .m-scale__tick.is-pin-start{transform:translate(-50%,-50%) rotate(-45deg)}.m-scale.is-vertical .m-scale__tick.is-pin-end{transform:translate(-50%,-50%) rotate(135deg)}.m-scale.is-vertical .m-scale__mark-label{top:var(--_at);left:calc(3.6em + var(--_brackets, 0) * .9em);display:flex;gap:.5em;transform:translateY(-50%)}.m-scale.is-vertical .m-scale__bracket{top:var(--_from);left:calc(.2em + var(--_row, 0) * .9em);width:.45em;height:var(--_size);border-right:0}.m-scale.is-vertical .m-scale__bracket-label{display:none}\n"]
|
|
36818
36832
|
}]
|
|
36819
36833
|
}],
|
|
36820
36834
|
ctorParameters: () => [],
|