@serve.zone/catalog 1.0.1

package/dist_ts_web/elements/sz-resource-usage-card.js

@@ -0,0 +1,323 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, customElement, html, css, cssManager, property, } from '@design.estate/dees-element';
+let SzResourceUsageCard = (() => {
+    let _classDecorators = [customElement('sz-resource-usage-card')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _data_decorators;
+    let _data_initializers = [];
+    let _data_extraInitializers = [];
+    let _serviceCount_decorators;
+    let _serviceCount_initializers = [];
+    let _serviceCount_extraInitializers = [];
+    var SzResourceUsageCard = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _data_decorators = [property({ type: Object })];
+            _serviceCount_decorators = [property({ type: String })];
+            __esDecorate(this, null, _data_decorators, { kind: "accessor", name: "data", static: false, private: false, access: { has: obj => "data" in obj, get: obj => obj.data, set: (obj, value) => { obj.data = value; } }, metadata: _metadata }, _data_initializers, _data_extraInitializers);
+            __esDecorate(this, null, _serviceCount_decorators, { kind: "accessor", name: "serviceCount", static: false, private: false, access: { has: obj => "serviceCount" in obj, get: obj => obj.serviceCount, set: (obj, value) => { obj.serviceCount = value; } }, metadata: _metadata }, _serviceCount_initializers, _serviceCount_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SzResourceUsageCard = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <div style="padding: 24px; max-width: 800px;">
+      <sz-resource-usage-card
+        .data=${{
+            cpu: 0.5,
+            memoryUsed: '191 MB',
+            memoryTotal: '429.2 GB',
+            networkIn: '38.9 KB/s',
+            networkOut: '1.7 KB/s',
+            topConsumers: [
+                { name: 'test-nginx', memory: '32.1 MB' },
+                { name: 'test-v2', memory: '31.7 MB' },
+            ],
+        }}
+        serviceCount="7"
+      ></sz-resource-usage-card>
+    </div>
+  `;
+        #data_accessor_storage = __runInitializers(this, _data_initializers, {
+            cpu: 0,
+            memoryUsed: '0 MB',
+            memoryTotal: '0 GB',
+            networkIn: '0 KB/s',
+            networkOut: '0 KB/s',
+            topConsumers: [],
+        });
+        get data() { return this.#data_accessor_storage; }
+        set data(value) { this.#data_accessor_storage = value; }
+        #serviceCount_accessor_storage = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _serviceCount_initializers, '0'));
+        get serviceCount() { return this.#serviceCount_accessor_storage; }
+        set serviceCount(value) { this.#serviceCount_accessor_storage = value; }
+        static styles = [
+            cssManager.defaultStyles,
+            css `
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      .card {
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 8px;
+        padding: 20px;
+        height: 100%;
+        box-sizing: border-box;
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 16px;
+      }
+
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .subtitle {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-top: 2px;
+      }
+
+      .view-all {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+        text-decoration: none;
+        cursor: pointer;
+      }
+
+      .view-all:hover {
+        text-decoration: underline;
+      }
+
+      .metrics {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      .metric-row {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .metric-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .metric-label {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .metric-value {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .progress-bar {
+        height: 6px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        border-radius: 3px;
+        overflow: hidden;
+      }
+
+      .progress-fill {
+        height: 100%;
+        background: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+        border-radius: 3px;
+        transition: width 300ms ease;
+      }
+
+      .network-row {
+        display: flex;
+        gap: 16px;
+        align-items: center;
+      }
+
+      .network-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .network-icon {
+        width: 14px;
+        height: 14px;
+      }
+
+      .network-icon.down {
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .network-icon.up {
+        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+      }
+
+      .top-consumers {
+        margin-top: 8px;
+        padding-top: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+      }
+
+      .consumers-label {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-bottom: 6px;
+      }
+
+      .consumers-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+      }
+
+      .consumer-item {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .consumer-name {
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+    `,
+        ];
+        render() {
+            return html `
+      <div class="card">
+        <div class="header">
+          <div>
+            <div class="title">Resource Usage</div>
+            <div class="subtitle">Aggregated across ${this.serviceCount} services</div>
+          </div>
+          <a class="view-all">View All</a>
+        </div>
+
+        <div class="metrics">
+          <div class="metric-row">
+            <div class="metric-header">
+              <span class="metric-label">CPU</span>
+              <span class="metric-value">${this.data.cpu.toFixed(1)}%</span>
+            </div>
+            <div class="progress-bar">
+              <div class="progress-fill" style="width: ${Math.min(this.data.cpu, 100)}%"></div>
+            </div>
+          </div>
+
+          <div class="metric-row">
+            <div class="metric-header">
+              <span class="metric-label">Memory</span>
+              <span class="metric-value">${this.data.memoryUsed} / ${this.data.memoryTotal}</span>
+            </div>
+            <div class="progress-bar">
+              <div class="progress-fill" style="width: ${this.calculateMemoryPercent()}%"></div>
+            </div>
+          </div>
+
+          <div class="metric-row">
+            <div class="metric-header">
+              <span class="metric-label">Network</span>
+              <div class="network-row">
+                <span class="network-item">
+                  <svg class="network-icon down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 5v14M19 12l-7 7-7-7"/>
+                  </svg>
+                  ${this.data.networkIn}
+                </span>
+                <span class="network-item">
+                  <svg class="network-icon up" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 19V5M5 12l7-7 7 7"/>
+                  </svg>
+                  ${this.data.networkOut}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        ${this.data.topConsumers.length > 0 ? html `
+          <div class="top-consumers">
+            <div class="consumers-label">Top consumers</div>
+            <div class="consumers-list">
+              ${this.data.topConsumers.map((consumer) => html `
+                  <span class="consumer-item">
+                    <span class="consumer-name">${consumer.name}:</span> ${consumer.memory}
+                  </span>
+                `)}
+            </div>
+          </div>
+        ` : ''}
+      </div>
+    `;
+        }
+        calculateMemoryPercent() {
+            // Simple extraction of numbers - in real app would parse properly
+            const used = parseFloat(this.data.memoryUsed);
+            const total = parseFloat(this.data.memoryTotal);
+            if (total === 0)
+                return 0;
+            // Assuming both are in same unit for demo
+            return Math.min((used / total) * 100, 100);
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _serviceCount_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SzResourceUsageCard = _classThis;
+})();
+export { SzResourceUsageCard };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3otcmVzb3VyY2UtdXNhZ2UtY2FyZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9zei1yZXNvdXJjZS11c2FnZS1jYXJkLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLGFBQWEsRUFDYixJQUFJLEVBQ0osR0FBRyxFQUNILFVBQVUsRUFDVixRQUFRLEdBRVQsTUFBTSw2QkFBNkIsQ0FBQztJQWtCeEIsbUJBQW1COzRCQUQvQixhQUFhLENBQUMsd0JBQXdCLENBQUM7Ozs7c0JBQ0MsV0FBVzs7Ozs7OzttQ0FBbkIsU0FBUSxXQUFXOzs7O2dDQW9CakQsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO3dDQVUxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7WUFUM0IsaUtBQWdCLElBQUksNkJBQUosSUFBSSxtRkFPbEI7WUFHRix5TEFBZ0IsWUFBWSw2QkFBWixZQUFZLG1HQUFlO1lBL0I3Qyw2S0FpUUM7Ozs7UUFoUVEsTUFBTSxDQUFDLElBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7OztnQkFHakI7WUFDTixHQUFHLEVBQUUsR0FBRztZQUNSLFVBQVUsRUFBRSxRQUFRO1lBQ3BCLFdBQVcsRUFBRSxVQUFVO1lBQ3ZCLFNBQVMsRUFBRSxXQUFXO1lBQ3RCLFVBQVUsRUFBRSxVQUFVO1lBQ3RCLFlBQVksRUFBRTtnQkFDWixFQUFFLElBQUksRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRTtnQkFDekMsRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUU7YUFDdkM7U0FDRjs7OztHQUlOLENBQUM7UUFHRixxRUFBdUM7WUFDckMsR0FBRyxFQUFFLENBQUM7WUFDTixVQUFVLEVBQUUsTUFBTTtZ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

package/dist_ts_web/elements/sz-reverse-proxy-card.d.ts

@@ -0,0 +1,16 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sz-reverse-proxy-card': SzReverseProxyCard;
+    }
+}
+export declare class SzReverseProxyCard extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    accessor httpPort: string;
+    accessor httpsPort: string;
+    accessor httpActive: boolean;
+    accessor httpsActive: boolean;
+    accessor routeCount: string;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+}

package/dist_ts_web/elements/sz-reverse-proxy-card.js

@@ -0,0 +1,216 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, customElement, html, css, cssManager, property, } from '@design.estate/dees-element';
+let SzReverseProxyCard = (() => {
+    let _classDecorators = [customElement('sz-reverse-proxy-card')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _httpPort_decorators;
+    let _httpPort_initializers = [];
+    let _httpPort_extraInitializers = [];
+    let _httpsPort_decorators;
+    let _httpsPort_initializers = [];
+    let _httpsPort_extraInitializers = [];
+    let _httpActive_decorators;
+    let _httpActive_initializers = [];
+    let _httpActive_extraInitializers = [];
+    let _httpsActive_decorators;
+    let _httpsActive_initializers = [];
+    let _httpsActive_extraInitializers = [];
+    let _routeCount_decorators;
+    let _routeCount_initializers = [];
+    let _routeCount_extraInitializers = [];
+    var SzReverseProxyCard = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _httpPort_decorators = [property({ type: String })];
+            _httpsPort_decorators = [property({ type: String })];
+            _httpActive_decorators = [property({ type: Boolean })];
+            _httpsActive_decorators = [property({ type: Boolean })];
+            _routeCount_decorators = [property({ type: String })];
+            __esDecorate(this, null, _httpPort_decorators, { kind: "accessor", name: "httpPort", static: false, private: false, access: { has: obj => "httpPort" in obj, get: obj => obj.httpPort, set: (obj, value) => { obj.httpPort = value; } }, metadata: _metadata }, _httpPort_initializers, _httpPort_extraInitializers);
+            __esDecorate(this, null, _httpsPort_decorators, { kind: "accessor", name: "httpsPort", static: false, private: false, access: { has: obj => "httpsPort" in obj, get: obj => obj.httpsPort, set: (obj, value) => { obj.httpsPort = value; } }, metadata: _metadata }, _httpsPort_initializers, _httpsPort_extraInitializers);
+            __esDecorate(this, null, _httpActive_decorators, { kind: "accessor", name: "httpActive", static: false, private: false, access: { has: obj => "httpActive" in obj, get: obj => obj.httpActive, set: (obj, value) => { obj.httpActive = value; } }, metadata: _metadata }, _httpActive_initializers, _httpActive_extraInitializers);
+            __esDecorate(this, null, _httpsActive_decorators, { kind: "accessor", name: "httpsActive", static: false, private: false, access: { has: obj => "httpsActive" in obj, get: obj => obj.httpsActive, set: (obj, value) => { obj.httpsActive = value; } }, metadata: _metadata }, _httpsActive_initializers, _httpsActive_extraInitializers);
+            __esDecorate(this, null, _routeCount_decorators, { kind: "accessor", name: "routeCount", static: false, private: false, access: { has: obj => "routeCount" in obj, get: obj => obj.routeCount, set: (obj, value) => { obj.routeCount = value; } }, metadata: _metadata }, _routeCount_initializers, _routeCount_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SzReverseProxyCard = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <div style="padding: 24px; max-width: 400px;">
+      <sz-reverse-proxy-card
+        httpPort="8080"
+        httpsPort="8443"
+        httpActive
+        httpsActive
+        routeCount="3"
+      ></sz-reverse-proxy-card>
+    </div>
+  `;
+        #httpPort_accessor_storage = __runInitializers(this, _httpPort_initializers, '80');
+        get httpPort() { return this.#httpPort_accessor_storage; }
+        set httpPort(value) { this.#httpPort_accessor_storage = value; }
+        #httpsPort_accessor_storage = (__runInitializers(this, _httpPort_extraInitializers), __runInitializers(this, _httpsPort_initializers, '443'));
+        get httpsPort() { return this.#httpsPort_accessor_storage; }
+        set httpsPort(value) { this.#httpsPort_accessor_storage = value; }
+        #httpActive_accessor_storage = (__runInitializers(this, _httpsPort_extraInitializers), __runInitializers(this, _httpActive_initializers, false));
+        get httpActive() { return this.#httpActive_accessor_storage; }
+        set httpActive(value) { this.#httpActive_accessor_storage = value; }
+        #httpsActive_accessor_storage = (__runInitializers(this, _httpActive_extraInitializers), __runInitializers(this, _httpsActive_initializers, false));
+        get httpsActive() { return this.#httpsActive_accessor_storage; }
+        set httpsActive(value) { this.#httpsActive_accessor_storage = value; }
+        #routeCount_accessor_storage = (__runInitializers(this, _httpsActive_extraInitializers), __runInitializers(this, _routeCount_initializers, '0'));
+        get routeCount() { return this.#routeCount_accessor_storage; }
+        set routeCount(value) { this.#routeCount_accessor_storage = value; }
+        static styles = [
+            cssManager.defaultStyles,
+            css `
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      .card {
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        border-radius: 8px;
+        padding: 20px;
+        height: 100%;
+        box-sizing: border-box;
+      }
+
+      .header {
+        margin-bottom: 16px;
+      }
+
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .subtitle {
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        margin-top: 2px;
+      }
+
+      .items {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .item-label {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+      }
+
+      .item-value {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 10px;
+        border-radius: 9999px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .badge.active {
+        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+
+      .badge.inactive {
+        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+    `,
+        ];
+        render() {
+            return html `
+      <div class="card">
+        <div class="header">
+          <div class="title">Reverse Proxy</div>
+          <div class="subtitle">HTTP/HTTPS proxy status</div>
+        </div>
+
+        <div class="items">
+          <div class="item">
+            <span class="item-label">HTTP (${this.httpPort})</span>
+            <span class="badge ${this.httpActive ? 'active' : 'inactive'}">
+              ${this.httpActive ? 'Active' : 'Inactive'}
+            </span>
+          </div>
+          <div class="item">
+            <span class="item-label">HTTPS (${this.httpsPort})</span>
+            <span class="badge ${this.httpsActive ? 'active' : 'inactive'}">
+              ${this.httpsActive ? 'Active' : 'Inactive'}
+            </span>
+          </div>
+          <div class="item">
+            <span class="item-label">Routes</span>
+            <span class="item-value">${this.routeCount}</span>
+          </div>
+        </div>
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _routeCount_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return SzReverseProxyCard = _classThis;
+})();
+export { SzReverseProxyCard };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3otcmV2ZXJzZS1wcm94eS1jYXJkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3N6LXJldmVyc2UtcHJveHktY2FyZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUNMLFdBQVcsRUFDWCxhQUFhLEVBQ2IsSUFBSSxFQUNKLEdBQUcsRUFDSCxVQUFVLEVBQ1YsUUFBUSxHQUVULE1BQU0sNkJBQTZCLENBQUM7SUFTeEIsa0JBQWtCOzRCQUQ5QixhQUFhLENBQUMsdUJBQXVCLENBQUM7Ozs7c0JBQ0MsV0FBVzs7Ozs7Ozs7Ozs7Ozs7OztrQ0FBbkIsU0FBUSxXQUFXOzs7O29DQWFoRCxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7cUNBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztzQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxDQUFDO3VDQUczQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUM7c0NBRzNCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztZQVgzQiw2S0FBZ0IsUUFBUSw2QkFBUixRQUFRLDJGQUFnQjtZQUd4QyxnTEFBZ0IsU0FBUyw2QkFBVCxTQUFTLDZGQUFpQjtZQUcxQyxtTEFBZ0IsVUFBVSw2QkFBVixVQUFVLCtGQUFrQjtZQUc1QyxzTEFBZ0IsV0FBVyw2QkFBWCxXQUFXLGlHQUFrQjtZQUc3QyxtTEFBZ0IsVUFBVSw2QkFBVixVQUFVLCtGQUFlO1lBMUIzQyw2S0FxSUM7Ozs7UUFwSVEsTUFBTSxDQUFDLElBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7Ozs7Ozs7Ozs7R0FVOUIsQ0FBQztRQUdGLDZFQUFtQyxJQUFJLEVBQUM7UUFBeEMsSUFBZ0IsUUFBUSw4Q0FBZ0I7UUFBeEMsSUFBZ0IsUUFBUSxvREFBZ0I7UUFHeEMsc0lBQW9DLEtBQUssR0FBQztRQUExQyxJQUFnQixTQUFTLCtDQUFpQjtRQUExQyxJQUFnQixTQUFTLHFEQUFpQjtRQUcxQyx5SUFBc0MsS0FBSyxHQUFDO1FBQTVDLElBQWdCLFVBQVUsZ0RBQWtCO1FBQTVDLElBQWdCLFVBQVUsc0RBQWtCO1FBRzVDLDRJQUF1QyxLQUFLLEdBQUM7UUFBN0MsSUFBZ0IsV0FBVyxpREFBa0I7UUFBN0MsSUFBZ0IsV0FBVyx1REFBa0I7UUFHN0MsMklBQXFDLEdBQUcsR0FBQztRQUF6QyxJQUFnQixVQUFVLGdEQUFlO1FBQXpDLElBQWdCLFVBQVUsc0RBQWU7UUFFbEMsTUFBTSxDQUFDLE1BQU0sR0FBRztZQUNyQixVQUFVLENBQUMsYUFBYTtZQUN4QixHQUFHLENBQUE7Ozs7Ozs7c0JBT2UsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDOzRCQUNsQyxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7Ozs7Ozs7Ozs7Ozs7O2lCQWNuRCxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7Ozs7O2lCQUt4QyxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7OztpQkFrQnhDLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs7Ozs7aUJBS3hDLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs7Ozs7Ozs7Ozs7OztzQkFhbkMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsd0JBQXdCLENBQUM7aUJBQzVELFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs7OztzQkFJbkMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsd0JBQXdCLENBQUM7aUJBQzVELFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs7S0FFcEQ7U0FDRixDQUFDO1FBRUssTUFBTTtZQUNYLE9BQU8sSUFBSSxDQUFBOzs7Ozs7Ozs7NkNBUzhCLElBQUksQ0FBQyxRQUFRO2lDQUN6QixJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLFVBQVU7Z0JBQ3hELElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsVUFBVTs7Ozs4Q0FJVCxJQUFJLENBQUMsU0FBUztpQ0FDM0IsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxVQUFVO2dCQUN6RCxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLFVBQVU7Ozs7O3VDQUtqQixJQUFJLENBQUMsVUFBVTs7OztLQUlqRCxDQUFDO1FBQ0osQ0FBQzs7Ozs7O1lBcElVLHVEQUFrQjs7Ozs7U0FBbEIsa0JBQWtCIn0=

package/dist_ts_web/elements/sz-service-create-view.d.ts

@@ -0,0 +1,67 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sz-service-create-view': SzServiceCreateView;
+    }
+}
+export interface IRegistry {
+    id: string;
+    name: string;
+    url: string;
+}
+export interface IPortMapping {
+    hostPort: string;
+    containerPort: string;
+    protocol: 'tcp' | 'udp';
+}
+export interface IEnvVar {
+    key: string;
+    value: string;
+}
+export interface IVolumeMount {
+    hostPath: string;
+    containerPath: string;
+    readOnly: boolean;
+}
+export interface IServiceConfig {
+    name: string;
+    image: string;
+    ports: IPortMapping[];
+    envVars: IEnvVar[];
+    volumes: IVolumeMount[];
+    cpuLimit: string;
+    memoryLimit: string;
+    restartPolicy: 'always' | 'on-failure' | 'never';
+    networkMode: string;
+}
+export declare class SzServiceCreateView extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    accessor registries: IRegistry[];
+    accessor loading: boolean;
+    private accessor serviceName;
+    private accessor imageUrl;
+    private accessor selectedRegistry;
+    private accessor ports;
+    private accessor envVars;
+    private accessor volumes;
+    private accessor cpuLimit;
+    private accessor memoryLimit;
+    private accessor restartPolicy;
+    private accessor networkMode;
+    private accessor showAdvanced;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+    private isValid;
+    private addPort;
+    private removePort;
+    private updatePort;
+    private addEnvVar;
+    private removeEnvVar;
+    private updateEnvVar;
+    private addVolume;
+    private removeVolume;
+    private updateVolume;
+    private handleCancel;
+    private handleCreate;
+    reset(): void;
+}