tobias
27640fee35
Export des Projekts "DataMetric360 App Design" nach design/ - 80 Dateien: die beiden .dc.html-Entwurfsdateien, support.js, die verwendeten Icons, Logos, Typenschilder und Schriften sowie das kompilierte Bündel des Design-Systems, damit der Entwurf für sich allein darstellbar ist. Bewusst ein Zwischenstand, nicht der Endstand: dieser Export zeigt noch "Audi RS 6 Avant" statt des tatsächlichen RS 4 Avant competition und enthält erst die Hauptbildschirme. Die 16 fehlenden Seiten (Fahrzeugstatus, Batterieverlauf, Service, Reifen, Versicherung/Steuer und weitere, siehe SPECIFICATION.md §3) sind im Design-Projekt bereits nachbeauftragt. Beides ist in design/README.md festgehalten, damit der Stand nachvollziehbar bleibt; der Ordner wird beim nächsten Export ersetzt. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
564 lines
29 KiB
JavaScript
564 lines
29 KiB
JavaScript
/* @ds-bundle: {"namespace":"AudiDashUI","components":[{"name":"Accordion","sourcePath":"components/general/Accordion/Accordion.jsx"},{"name":"ActionButton","sourcePath":"components/general/ActionButton/ActionButton.jsx"},{"name":"Feld","sourcePath":"components/general/Feld/Feld.jsx"},{"name":"Fig","sourcePath":"components/general/Fig/Fig.jsx"},{"name":"IconButton","sourcePath":"components/general/IconButton/IconButton.jsx"},{"name":"ImagePlaceholder","sourcePath":"components/general/ImagePlaceholder/ImagePlaceholder.jsx"},{"name":"LeafRow","sourcePath":"components/accordion/LeafRow/LeafRow.jsx"},{"name":"Pill","sourcePath":"components/general/Pill/Pill.jsx"},{"name":"Popup","sourcePath":"components/general/Popup/Popup.jsx"},{"name":"PopupMenuItem","sourcePath":"components/general/PopupMenuItem/PopupMenuItem.jsx"},{"name":"ProgressBar","sourcePath":"components/general/ProgressBar/ProgressBar.jsx"},{"name":"ProgressRing","sourcePath":"components/general/ProgressRing/ProgressRing.jsx"},{"name":"RowList","sourcePath":"components/general/RowList/RowList.jsx"},{"name":"Seg","sourcePath":"components/general/Seg/Seg.jsx"},{"name":"StatGrid","sourcePath":"components/general/StatGrid/StatGrid.jsx"},{"name":"StatusRow","sourcePath":"components/general/StatusRow/StatusRow.jsx"},{"name":"SwipeRow","sourcePath":"components/general/SwipeRow/SwipeRow.jsx"},{"name":"Switch","sourcePath":"components/general/Switch/Switch.jsx"},{"name":"TabBar","sourcePath":"components/general/TabBar/TabBar.jsx"},{"name":"Tile","sourcePath":"components/general/Tile/Tile.jsx"}],"sourceHashes":{"components/general/Accordion/Accordion.jsx":"e451421cbbee","components/general/Accordion/Accordion.d.ts":"0b821f95d8ec","components/general/Accordion/Accordion.prompt.md":"7b4714a7568d","components/general/ActionButton/ActionButton.jsx":"555676a71f72","components/general/ActionButton/ActionButton.d.ts":"faef681772e0","components/general/ActionButton/ActionButton.prompt.md":"1e8fad2d73f9","components/general/Feld/Feld.jsx":"fec8fe89e3b8","components/general/Feld/Feld.d.ts":"263528b0d195","components/general/Feld/Feld.prompt.md":"274cbafb13e5","components/general/Fig/Fig.jsx":"5870842c3cc9","components/general/Fig/Fig.d.ts":"a326dd89b7fd","components/general/Fig/Fig.prompt.md":"c60284795308","components/general/IconButton/IconButton.jsx":"fcd5ddfd2b26","components/general/IconButton/IconButton.d.ts":"e7a8c88afc00","components/general/IconButton/IconButton.prompt.md":"f311ce3928f4","components/general/ImagePlaceholder/ImagePlaceholder.jsx":"8ddcd8dab0a0","components/general/ImagePlaceholder/ImagePlaceholder.d.ts":"d6364f15e9c0","components/general/ImagePlaceholder/ImagePlaceholder.prompt.md":"43ca50be5f77","components/accordion/LeafRow/LeafRow.jsx":"ce900d42927c","components/accordion/LeafRow/LeafRow.d.ts":"85468f327f7a","components/accordion/LeafRow/LeafRow.prompt.md":"237acb37d8e6","components/general/Pill/Pill.jsx":"210d8cf6596a","components/general/Pill/Pill.d.ts":"530c874d26b6","components/general/Pill/Pill.prompt.md":"14374bc5a758","components/general/Popup/Popup.jsx":"bede56d5c4aa","components/general/Popup/Popup.d.ts":"469d967b7416","components/general/Popup/Popup.prompt.md":"6195801e8172","components/general/PopupMenuItem/PopupMenuItem.jsx":"0429937f4520","components/general/PopupMenuItem/PopupMenuItem.d.ts":"d98857eaf3c3","components/general/PopupMenuItem/PopupMenuItem.prompt.md":"8f18bd7e059b","components/general/ProgressBar/ProgressBar.jsx":"9ca1d1ea172a","components/general/ProgressBar/ProgressBar.d.ts":"baaa06ad6859","components/general/ProgressBar/ProgressBar.prompt.md":"039685a8659f","components/general/ProgressRing/ProgressRing.jsx":"78d41740d78b","components/general/ProgressRing/ProgressRing.d.ts":"15839d274511","components/general/ProgressRing/ProgressRing.prompt.md":"32b3e060530f","components/general/RowList/RowList.jsx":"62af0e4a633e","components/general/RowList/RowList.d.ts":"6f76bdb3711d","components/general/RowList/RowList.prompt.md":"2abce7b8d541","components/general/Seg/Seg.jsx":"0ad3d0f3e130","components/general/Seg/Seg.d.ts":"549442e8afad","components/general/Seg/Seg.prompt.md":"a1432f2825f6","components/general/StatGrid/StatGrid.jsx":"218bbd339935","components/general/StatGrid/StatGrid.d.ts":"a1b9d892b1a6","components/general/StatGrid/StatGrid.prompt.md":"0f1df1271fb0","components/general/StatusRow/StatusRow.jsx":"de77b6665985","components/general/StatusRow/StatusRow.d.ts":"3fe225d397b1","components/general/StatusRow/StatusRow.prompt.md":"cd33af1c2e77","components/general/SwipeRow/SwipeRow.jsx":"27451f62cae8","components/general/SwipeRow/SwipeRow.d.ts":"496e2058917a","components/general/SwipeRow/SwipeRow.prompt.md":"d191d8adba8c","components/general/Switch/Switch.jsx":"33ba18bc52cc","components/general/Switch/Switch.d.ts":"e5b2427866a1","components/general/Switch/Switch.prompt.md":"81f49ffeb8a6","components/general/TabBar/TabBar.jsx":"b74b7d431989","components/general/TabBar/TabBar.d.ts":"2e79e7e870c7","components/general/TabBar/TabBar.prompt.md":"dd8948507175","components/general/Tile/Tile.jsx":"b526964c5c96","components/general/Tile/Tile.d.ts":"b37ce97e2658","components/general/Tile/Tile.prompt.md":"e7cc32b1303d"},"inlinedExternals":[],"builtBy":"cc-design-sync"} */
|
|
"use strict";
|
|
var AudiDashUI = (() => {
|
|
var __create = Object.create;
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __getProtoOf = Object.getPrototypeOf;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __esm = (fn, res, err) => function __init() {
|
|
if (err) throw err[0];
|
|
try {
|
|
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
|
} catch (e) {
|
|
throw err = [e], e;
|
|
}
|
|
};
|
|
var __commonJS = (cb, mod) => function __require() {
|
|
try {
|
|
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
} catch (e) {
|
|
throw mod = 0, e;
|
|
}
|
|
};
|
|
var __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
};
|
|
var __copyProps = (to, from, except, desc) => {
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
for (let key of __getOwnPropNames(from))
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
}
|
|
return to;
|
|
};
|
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
// file that has been converted to a CommonJS file using a Babel-
|
|
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
mod
|
|
));
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
|
|
// <define:import.meta.env>
|
|
var init_define_import_meta_env = __esm({
|
|
"<define:import.meta.env>"() {
|
|
}
|
|
});
|
|
|
|
// shim:react-shim
|
|
var require_react_shim = __commonJS({
|
|
"shim:react-shim"(exports, module) {
|
|
init_define_import_meta_env();
|
|
var R = window.React;
|
|
function np(p, k) {
|
|
var o = {};
|
|
for (var x in p) if (x !== "children") o[x] = p[x];
|
|
if (k !== void 0) o.key = k;
|
|
return o;
|
|
}
|
|
function jsx20(t, p, k) {
|
|
var c = p && p.children;
|
|
return c === void 0 ? R.createElement(t, np(p, k)) : R.createElement(t, np(p, k), c);
|
|
}
|
|
function jsxs16(t, p, k) {
|
|
return R.createElement.apply(R, [t, np(p, k)].concat(p.children));
|
|
}
|
|
module.exports = R;
|
|
module.exports.jsx = jsx20;
|
|
module.exports.jsxs = jsxs16;
|
|
module.exports.jsxDEV = function(t, p, k, s) {
|
|
return (s ? jsxs16 : jsx20)(t, p, k);
|
|
};
|
|
module.exports.Fragment = R.Fragment;
|
|
}
|
|
});
|
|
|
|
// shim:react-dom-shim
|
|
var require_react_dom_shim = __commonJS({
|
|
"shim:react-dom-shim"(exports, module) {
|
|
init_define_import_meta_env();
|
|
var D = window.ReactDOM;
|
|
var n = function() {
|
|
};
|
|
module.exports = Object.assign({ preload: n, preinit: n, preconnect: n, prefetchDNS: n, preloadModule: n, preinitModule: n }, D);
|
|
}
|
|
});
|
|
|
|
// dist/index.js
|
|
var index_exports = {};
|
|
__export(index_exports, {
|
|
Accordion: () => Accordion,
|
|
ActionButton: () => ActionButton,
|
|
Feld: () => Feld,
|
|
Fig: () => Fig,
|
|
IconButton: () => IconButton,
|
|
ImagePlaceholder: () => ImagePlaceholder,
|
|
LeafRow: () => LeafRow,
|
|
Pill: () => Pill,
|
|
Popup: () => Popup,
|
|
PopupMenuItem: () => PopupMenuItem,
|
|
ProgressBar: () => ProgressBar,
|
|
ProgressRing: () => ProgressRing,
|
|
RowList: () => RowList,
|
|
Seg: () => Seg,
|
|
StatGrid: () => StatGrid,
|
|
StatusRow: () => StatusRow,
|
|
SwipeRow: () => SwipeRow,
|
|
Switch: () => Switch,
|
|
TabBar: () => TabBar,
|
|
Tile: () => Tile
|
|
});
|
|
init_define_import_meta_env();
|
|
var import_jsx_runtime = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime2 = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime3 = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime4 = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime5 = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime6 = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime7 = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime8 = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime9 = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime10 = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime11 = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime12 = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime13 = __toESM(require_react_shim(), 1);
|
|
var React = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime14 = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime15 = __toESM(require_react_shim(), 1);
|
|
var React2 = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime16 = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime17 = __toESM(require_react_shim(), 1);
|
|
var import_react_dom = __toESM(require_react_dom_shim(), 1);
|
|
var import_jsx_runtime18 = __toESM(require_react_shim(), 1);
|
|
var React3 = __toESM(require_react_shim(), 1);
|
|
var import_jsx_runtime19 = __toESM(require_react_shim(), 1);
|
|
function Pill({ children, variant = "default", className }) {
|
|
const classes = ["ads-pill"];
|
|
if (variant === "work") classes.push("ads-pill--work");
|
|
if (className) classes.push(className);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classes.join(" "), children });
|
|
}
|
|
function IconButton({
|
|
onClick,
|
|
children,
|
|
disabled,
|
|
className,
|
|
...rest
|
|
}) {
|
|
const classes = ["ads-icon-button"];
|
|
if (className) classes.push(className);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
"button",
|
|
{
|
|
type: "button",
|
|
className: classes.join(" "),
|
|
onClick,
|
|
disabled,
|
|
...rest,
|
|
children
|
|
}
|
|
);
|
|
}
|
|
function Fig({ value, unit, size, className }) {
|
|
const classes = ["ads-fig"];
|
|
if (className) classes.push(className);
|
|
const style = size !== void 0 ? { fontSize: typeof size === "number" ? `${size}px` : size } : void 0;
|
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: classes.join(" "), style, children: [
|
|
value,
|
|
unit !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ads-fig__unit", children: unit })
|
|
] });
|
|
}
|
|
function StatusRow({ status, title, subtitle, onClick, className }) {
|
|
const classes = ["ads-status"];
|
|
if (className) classes.push(className);
|
|
const Tag = onClick ? "button" : "div";
|
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
Tag,
|
|
{
|
|
type: onClick ? "button" : void 0,
|
|
className: classes.join(" "),
|
|
onClick,
|
|
children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `ads-dot ads-dot--${status}`, "aria-hidden": true }),
|
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "ads-status__text", children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "ads-status__t", children: title }),
|
|
subtitle !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "ads-status__s", children: subtitle })
|
|
] })
|
|
]
|
|
}
|
|
);
|
|
}
|
|
function ActionButton({
|
|
children,
|
|
onClick,
|
|
variant = "default",
|
|
disabled,
|
|
type = "button",
|
|
className
|
|
}) {
|
|
const classes = ["ads-action"];
|
|
if (variant === "destructive") classes.push("ads-action--destructive");
|
|
if (className) classes.push(className);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type, className: classes.join(" "), onClick, disabled, children });
|
|
}
|
|
function Switch({
|
|
checked,
|
|
onChange,
|
|
disabled,
|
|
id,
|
|
className,
|
|
...rest
|
|
}) {
|
|
const classes = ["ads-switch"];
|
|
if (className) classes.push(className);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: classes.join(" "), children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
"input",
|
|
{
|
|
type: "checkbox",
|
|
role: "switch",
|
|
id,
|
|
checked,
|
|
disabled,
|
|
onChange: (e) => onChange(e.target.checked),
|
|
...rest
|
|
}
|
|
),
|
|
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ads-switch__track", "aria-hidden": true })
|
|
] });
|
|
}
|
|
function Seg({
|
|
options,
|
|
value,
|
|
onChange,
|
|
className
|
|
}) {
|
|
const classes = ["ads-seg"];
|
|
if (className) classes.push(className);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: classes.join(" "), children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
"button",
|
|
{
|
|
type: "button",
|
|
className: opt.value === value ? "ads-seg__on" : void 0,
|
|
onClick: () => onChange(opt.value),
|
|
children: opt.label
|
|
},
|
|
opt.value
|
|
)) });
|
|
}
|
|
function RowList({ items, className }) {
|
|
const classes = ["ads-rows"];
|
|
if (className) classes.push(className);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("dl", { className: classes.join(" "), children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "ads-row", children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("dt", { children: item.label }),
|
|
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("dd", { children: [
|
|
item.value,
|
|
item.subValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("small", { children: item.subValue })
|
|
] })
|
|
] }, item.key)) });
|
|
}
|
|
function Tile({ variant = "default", chevron, onClick, className, children }) {
|
|
const classes = ["ads-tile"];
|
|
if (variant === "flat") classes.push("ads-tile--flat");
|
|
if (variant === "button") classes.push("ads-tile--button");
|
|
if (className) classes.push(className);
|
|
if (variant === "button") {
|
|
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { type: "button", className: classes.join(" "), onClick, children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ads-tile__content", children }),
|
|
chevron && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "ads-tile__go", viewBox: "0 0 6 10", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M1 1l4 4-4 4", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }) })
|
|
] });
|
|
}
|
|
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: classes.join(" "), children });
|
|
}
|
|
function Feld({ label, value, children, unit, last, className }) {
|
|
const classes = ["ads-feld"];
|
|
if (last) classes.push("ads-feld--last");
|
|
if (className) classes.push(className);
|
|
const control = children ? unit ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "ads-mit-einheit", children: [
|
|
children,
|
|
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: unit })
|
|
] }) : children : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: value });
|
|
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: classes.join(" "), children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { children: label }),
|
|
control
|
|
] });
|
|
}
|
|
var RADIUS = 64;
|
|
var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
|
|
function ProgressRing({
|
|
percent,
|
|
value,
|
|
unit,
|
|
label,
|
|
size = 150,
|
|
className
|
|
}) {
|
|
const clamped = Math.max(0, Math.min(100, percent));
|
|
const offset = CIRCUMFERENCE * (1 - clamped / 100);
|
|
const classes = ["ads-ring"];
|
|
if (className) classes.push(className);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: classes.join(" "), style: { width: size, height: size }, children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { viewBox: "0 0 150 150", width: size, height: size, children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "75", cy: "75", r: RADIUS, className: "ads-ring__track" }),
|
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
"circle",
|
|
{
|
|
cx: "75",
|
|
cy: "75",
|
|
r: RADIUS,
|
|
className: "ads-ring__arc",
|
|
strokeDasharray: CIRCUMFERENCE,
|
|
strokeDashoffset: offset
|
|
}
|
|
)
|
|
] }),
|
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "ads-ring__mid", children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Fig, { value: value ?? Math.round(clamped), unit }),
|
|
label !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ads-label", children: label })
|
|
] })
|
|
] });
|
|
}
|
|
function ProgressBar({ percent, segments, showLegend, className }) {
|
|
const classes = ["ads-progress-bar"];
|
|
if (className) classes.push(className);
|
|
if (segments && segments.length > 0) {
|
|
const total = segments.reduce((sum, s) => sum + s.value, 0) || 1;
|
|
const legend = showLegend ?? segments.length > 1;
|
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: classes.join(" "), children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ads-bar", children: segments.map((seg, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
"i",
|
|
{
|
|
style: { flex: seg.value / total, background: seg.color ?? "var(--fg)" }
|
|
},
|
|
i
|
|
)) }),
|
|
legend && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ads-legend", children: segments.map((seg, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("i", { style: { background: seg.color ?? "var(--fg)" } }),
|
|
seg.label
|
|
] }, i)) })
|
|
] });
|
|
}
|
|
const clamped = Math.max(0, Math.min(100, percent ?? 0));
|
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: classes.join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ads-balken", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("i", { style: { width: `${clamped}%` } }) }) });
|
|
}
|
|
function StatGrid({ items, columns = 4, className }) {
|
|
const classes = ["ads-quad"];
|
|
if (className) classes.push(className);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: classes.join(" "), style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Fig, { className: "ads-quad__n", value: item.value, unit: item.unit, size: 17 }),
|
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ads-quad__l", children: item.caption })
|
|
] }, i)) });
|
|
}
|
|
function Accordion({
|
|
title,
|
|
summary,
|
|
open,
|
|
defaultOpen = false,
|
|
onOpenChange,
|
|
level = 1,
|
|
children,
|
|
className
|
|
}) {
|
|
const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
|
|
const isControlled = open !== void 0;
|
|
const isOpen = isControlled ? open : internalOpen;
|
|
const toggle = () => {
|
|
const next = !isOpen;
|
|
if (!isControlled) setInternalOpen(next);
|
|
onOpenChange?.(next);
|
|
};
|
|
const classes = ["ads-accordion"];
|
|
if (level === 2) classes.push("ads-accordion--lvl2");
|
|
if (className) classes.push(className);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: classes.join(" "), children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { type: "button", className: "ads-acc-h", onClick: toggle, "aria-expanded": isOpen, children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ads-acc-h__k", children: title }),
|
|
summary !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ads-acc-h__v", children: summary }),
|
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ads-mark", "aria-hidden": true })
|
|
] }),
|
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: isOpen ? "ads-acc-b ads-acc-b--on" : "ads-acc-b", children })
|
|
] });
|
|
}
|
|
function LeafRow({ title, subTitle, value, subValue, onClick, className }) {
|
|
const classes = ["ads-leaf"];
|
|
if (className) classes.push(className);
|
|
const Tag = onClick ? "button" : "div";
|
|
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Tag, { type: onClick ? "button" : void 0, className: classes.join(" "), onClick, children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "ads-leaf__k", children: [
|
|
title,
|
|
subTitle !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("small", { children: subTitle })
|
|
] }),
|
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "ads-leaf__v", children: [
|
|
value,
|
|
subValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("small", { children: subValue })
|
|
] }),
|
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "ads-chev", viewBox: "0 0 6 10", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M1 1l4 4-4 4", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }) })
|
|
] });
|
|
}
|
|
var SWIPE_THRESHOLD = -40;
|
|
var SWIPE_OPEN = -84;
|
|
var listeners = /* @__PURE__ */ new Set();
|
|
function closeAllExcept(keep) {
|
|
for (const close of listeners) {
|
|
if (close !== keep) close();
|
|
}
|
|
}
|
|
function SwipeRow({
|
|
children,
|
|
onDelete,
|
|
deleteLabel = "Delete",
|
|
swiped,
|
|
onSwipedChange,
|
|
className
|
|
}) {
|
|
const [internalSwiped, setInternalSwiped] = React2.useState(false);
|
|
const isControlled = swiped !== void 0;
|
|
const isSwiped = isControlled ? swiped : internalSwiped;
|
|
const setSwiped = React2.useCallback(
|
|
(next) => {
|
|
if (!isControlled) setInternalSwiped(next);
|
|
onSwipedChange?.(next);
|
|
},
|
|
[isControlled, onSwipedChange]
|
|
);
|
|
const close = React2.useCallback(() => setSwiped(false), [setSwiped]);
|
|
React2.useEffect(() => {
|
|
listeners.add(close);
|
|
return () => {
|
|
listeners.delete(close);
|
|
};
|
|
}, [close]);
|
|
const dragStartX = React2.useRef(null);
|
|
const onPointerDown = (e) => {
|
|
dragStartX.current = e.clientX;
|
|
};
|
|
const onPointerMove = (e) => {
|
|
if (dragStartX.current === null) return;
|
|
const delta = e.clientX - dragStartX.current;
|
|
if (delta < SWIPE_THRESHOLD) {
|
|
closeAllExcept(close);
|
|
setSwiped(true);
|
|
dragStartX.current = null;
|
|
} else if (delta > -SWIPE_THRESHOLD) {
|
|
setSwiped(false);
|
|
}
|
|
};
|
|
const onPointerUp = () => {
|
|
dragStartX.current = null;
|
|
};
|
|
const classes = ["ads-swipe-wrap"];
|
|
if (className) classes.push(className);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: classes.join(" "), children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "ads-swipe-delete", onClick: onDelete, children: deleteLabel }),
|
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
"div",
|
|
{
|
|
className: isSwiped ? "ads-swipe-content ads-swiped" : "ads-swipe-content",
|
|
style: { transform: isSwiped ? `translateX(${SWIPE_OPEN}px)` : void 0 },
|
|
onPointerDown,
|
|
onPointerMove,
|
|
onPointerUp,
|
|
onPointerCancel: onPointerUp,
|
|
children
|
|
}
|
|
)
|
|
] });
|
|
}
|
|
function TabBar({ items, activeKey, onChange, iconOnly, className }) {
|
|
const classes = ["ads-tabbar"];
|
|
if (iconOnly) classes.push("ads-tabbar--ohne");
|
|
if (className) classes.push(className);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
"nav",
|
|
{
|
|
className: classes.join(" "),
|
|
style: { gridTemplateColumns: `repeat(${items.length}, 1fr)` },
|
|
children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
"button",
|
|
{
|
|
type: "button",
|
|
className: item.key === activeKey ? "ads-tab ads-tab--on" : "ads-tab",
|
|
onClick: () => onChange(item.key),
|
|
children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ads-tab__icon", children: item.icon }),
|
|
!iconOnly && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ads-tab__label", children: item.label })
|
|
]
|
|
},
|
|
item.key
|
|
))
|
|
}
|
|
);
|
|
}
|
|
function Popup({
|
|
open,
|
|
onClose,
|
|
variant = "menu",
|
|
anchor = "center",
|
|
children,
|
|
className,
|
|
portalTarget
|
|
}) {
|
|
if (!open) return null;
|
|
const classes = ["ads-popup", `ads-popup--${variant}`];
|
|
if (className) classes.push(className);
|
|
const style = anchor === "center" ? { top: "50%", left: "50%", transform: "translate(-50%, -50%)" } : { ...anchor };
|
|
const content = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "ads-popup-catcher", onClick: onClose }),
|
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: classes.join(" "), style, children })
|
|
] });
|
|
const target = portalTarget ?? (typeof document !== "undefined" ? document.body : null);
|
|
return target ? (0, import_react_dom.createPortal)(content, target) : content;
|
|
}
|
|
function PopupMenuItem({ onClick, destructive, children }) {
|
|
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
"button",
|
|
{
|
|
type: "button",
|
|
className: destructive ? "ads-popup-item ads-popup-item--destructive" : "ads-popup-item",
|
|
onClick,
|
|
children
|
|
}
|
|
);
|
|
}
|
|
var DEFAULT_ICON = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { viewBox: "0 0 24 24", width: "26", height: "26", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
"path",
|
|
{
|
|
fill: "currentColor",
|
|
fillRule: "evenodd",
|
|
d: "M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Zm2 0v14h12V5H6Zm3 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm-1 8 3-3 2 2 3-4 3 5H8Z",
|
|
clipRule: "evenodd"
|
|
}
|
|
) });
|
|
function ImagePlaceholder({
|
|
src,
|
|
alt,
|
|
label,
|
|
hint,
|
|
icon,
|
|
size = "default",
|
|
className
|
|
}) {
|
|
const [failed, setFailed] = React3.useState(false);
|
|
const classes = ["ads-bildbox"];
|
|
if (size === "mini") classes.push("ads-bildbox--mini");
|
|
if (size === "round") classes.push("ads-bildbox--round");
|
|
if (className) classes.push(className);
|
|
const showPlaceholder = !src || failed;
|
|
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: classes.join(" "), children: [
|
|
!showPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("img", { src, alt, onError: () => setFailed(true) }),
|
|
showPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ads-platzhalter", children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ads-platzhalter__icon", children: icon ?? DEFAULT_ICON }),
|
|
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ads-platzhalter__label", children: label }),
|
|
hint !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ads-platzhalter__hint", children: hint })
|
|
] })
|
|
] });
|
|
}
|
|
return __toCommonJS(index_exports);
|
|
})();
|
|
window.AudiDashUI=AudiDashUI.__dsMainNs?Object.assign({},AudiDashUI,AudiDashUI.__dsMainNs,{__dsMainNs:undefined}):AudiDashUI;
|