@uptime.link/statuspage 1.0.74 → 1.1.0

package/dist_ts_web/elements/upl-statuspage-statusdetails.js

@@ -1,90 +1,400 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+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 __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+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 * as plugins from '../plugins.js';
-import { DeesElement, property, html, customElement, css, cssManager, } from '@design.estate/dees-element';
+import { DeesElement, property, html, customElement, css, cssManager, unsafeCSS, } from '@design.estate/dees-element';
+import * as sharedStyles from '../styles/shared.styles.js';
 import './internal/uplinternal-miniheading.js';
-let UplStatuspageStatusdetails = class UplStatuspageStatusdetails extends DeesElement {
-    static { this.demo = () => html ` <upl-statuspage-statusdetails></upl-statuspage-statusdetails> `; }
-    constructor() {
-        super();
-    }
-    static { this.styles = [
-        plugins.domtools.elementBasic.staticStyles,
-        css `
+import { demoFunc } from './upl-statuspage-statusdetails.demo.js';
+let UplStatuspageStatusdetails = (() => {
+    let _classDecorators = [customElement('upl-statuspage-statusdetails')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _historyData_decorators;
+    let _historyData_initializers = [];
+    let _historyData_extraInitializers = [];
+    let _dataPoints_decorators;
+    let _dataPoints_initializers = [];
+    let _dataPoints_extraInitializers = [];
+    let _serviceId_decorators;
+    let _serviceId_initializers = [];
+    let _serviceId_extraInitializers = [];
+    let _serviceName_decorators;
+    let _serviceName_initializers = [];
+    let _serviceName_extraInitializers = [];
+    let _loading_decorators;
+    let _loading_initializers = [];
+    let _loading_extraInitializers = [];
+    let _hoursToShow_decorators;
+    let _hoursToShow_initializers = [];
+    let _hoursToShow_extraInitializers = [];
+    var UplStatuspageStatusdetails = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _historyData_decorators = [property({ type: Array })];
+            _dataPoints_decorators = [property({ type: Array })];
+            _serviceId_decorators = [property({ type: String })];
+            _serviceName_decorators = [property({ type: String })];
+            _loading_decorators = [property({ type: Boolean })];
+            _hoursToShow_decorators = [property({ type: Number })];
+            __esDecorate(this, null, _historyData_decorators, { kind: "accessor", name: "historyData", static: false, private: false, access: { has: obj => "historyData" in obj, get: obj => obj.historyData, set: (obj, value) => { obj.historyData = value; } }, metadata: _metadata }, _historyData_initializers, _historyData_extraInitializers);
+            __esDecorate(this, null, _dataPoints_decorators, { kind: "accessor", name: "dataPoints", static: false, private: false, access: { has: obj => "dataPoints" in obj, get: obj => obj.dataPoints, set: (obj, value) => { obj.dataPoints = value; } }, metadata: _metadata }, _dataPoints_initializers, _dataPoints_extraInitializers);
+            __esDecorate(this, null, _serviceId_decorators, { kind: "accessor", name: "serviceId", static: false, private: false, access: { has: obj => "serviceId" in obj, get: obj => obj.serviceId, set: (obj, value) => { obj.serviceId = value; } }, metadata: _metadata }, _serviceId_initializers, _serviceId_extraInitializers);
+            __esDecorate(this, null, _serviceName_decorators, { kind: "accessor", name: "serviceName", static: false, private: false, access: { has: obj => "serviceName" in obj, get: obj => obj.serviceName, set: (obj, value) => { obj.serviceName = value; } }, metadata: _metadata }, _serviceName_initializers, _serviceName_extraInitializers);
+            __esDecorate(this, null, _loading_decorators, { kind: "accessor", name: "loading", static: false, private: false, access: { has: obj => "loading" in obj, get: obj => obj.loading, set: (obj, value) => { obj.loading = value; } }, metadata: _metadata }, _loading_initializers, _loading_extraInitializers);
+            __esDecorate(this, null, _hoursToShow_decorators, { kind: "accessor", name: "hoursToShow", static: false, private: false, access: { has: obj => "hoursToShow" in obj, get: obj => obj.hoursToShow, set: (obj, value) => { obj.hoursToShow = value; } }, metadata: _metadata }, _hoursToShow_initializers, _hoursToShow_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UplStatuspageStatusdetails = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = demoFunc;
+        #historyData_accessor_storage = __runInitializers(this, _historyData_initializers, []);
+        get historyData() { return this.#historyData_accessor_storage; }
+        set historyData(value) { this.#historyData_accessor_storage = value; }
+        #dataPoints_accessor_storage = (__runInitializers(this, _historyData_extraInitializers), __runInitializers(this, _dataPoints_initializers, []));
+        get dataPoints() { return this.#dataPoints_accessor_storage; }
+        set dataPoints(value) { this.#dataPoints_accessor_storage = value; }
+        #serviceId_accessor_storage = (__runInitializers(this, _dataPoints_extraInitializers), __runInitializers(this, _serviceId_initializers, ''));
+        get serviceId() { return this.#serviceId_accessor_storage; }
+        set serviceId(value) { this.#serviceId_accessor_storage = value; }
+        #serviceName_accessor_storage = (__runInitializers(this, _serviceId_extraInitializers), __runInitializers(this, _serviceName_initializers, 'Service'));
+        get serviceName() { return this.#serviceName_accessor_storage; }
+        set serviceName(value) { this.#serviceName_accessor_storage = value; }
+        #loading_accessor_storage = (__runInitializers(this, _serviceName_extraInitializers), __runInitializers(this, _loading_initializers, false));
+        get loading() { return this.#loading_accessor_storage; }
+        set loading(value) { this.#loading_accessor_storage = value; }
+        #hoursToShow_accessor_storage = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _hoursToShow_initializers, 48));
+        get hoursToShow() { return this.#hoursToShow_accessor_storage; }
+        set hoursToShow(value) { this.#hoursToShow_accessor_storage = value; }
+        constructor() {
+            super();
+            __runInitializers(this, _hoursToShow_extraInitializers);
+        }
+        static styles = [
+            plugins.domtools.elementBasic.staticStyles,
+            sharedStyles.commonStyles,
+            css `
       :host {
         position: relative;
-        padding: 0px 0px 15px 0px;
         display: block;
-        background:  ${cssManager.bdTheme('#eeeeeb', '#222222')};;
-        font-family: Inter;
-        color: #fff;
+        background: transparent;
+        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
+        color: ${sharedStyles.colors.text.primary};
+      }
+
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)};
+      }
+      
+      .graph-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      
+      .graph-container {
+        position: relative;
       }
 
       .mainbox {
-        margin: auto;
-        max-width: 900px;
-        text-align: right;
-        background:  ${cssManager.bdTheme('#ffffff', '#333333')};;
-        line-height: 50px;
-        border-radius: 3px;
+        background: transparent;
+        border: none;
+        border-radius: 0;
+        padding: 0;
       }
 
       .mainbox .barContainer {
         position: relative;
         display: flex;
-        padding: 6px;
+        gap: 2px;
+        padding: ${unsafeCSS(sharedStyles.spacing.sm)};
+        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
         overflow: hidden;
+        height: 40px;
       }
 
       .mainbox .barContainer .bar {
-        margin: 4px;
-        width: 11px;
-        border-radius: 3px;
-        height: 40px;
-        background: #2deb51;
+        flex: 1;
+        height: 100%;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        position: relative;
+        border-radius: 2px;
+      }
+
+      .mainbox .barContainer .bar:hover {
+        transform: scaleY(1.1);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      .mainbox .barContainer .bar.operational {
+        background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
+      }
+
+      .mainbox .barContainer .bar.degraded {
+        background: ${cssManager.bdTheme('#fbbf24', '#fbbf24')};
+      }
+
+      .mainbox .barContainer .bar.partial_outage {
+        background: ${cssManager.bdTheme('#f87171', '#f87171')};
+      }
+
+      .mainbox .barContainer .bar.major_outage {
+        background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
+      }
+
+      .mainbox .barContainer .bar.maintenance {
+        background: ${cssManager.bdTheme('#60a5fa', '#60a5fa')};
+      }
+
+      .mainbox .barContainer .bar.no-data {
+        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        opacity: 0.6;
+      }
+
+
+      .time-labels {
+        display: flex;
+        justify-content: space-between;
+        padding: 0;
+        margin-top: ${unsafeCSS(sharedStyles.spacing.xs)};
+        font-size: 10px;
+        color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
+        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
+        opacity: 0.8;
       }
-      .timeIndicator {
+
+      .tooltip {
         position: absolute;
-        width: 11px;
-        height: 11px;
-        background: #FF9800;
-        top: 56px;
-        left: 400px;
-        transform: rotate(45deg);
+        background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        padding: 6px 10px;
+        border-radius: 4px;
+        font-size: 11px;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.15s;
+        z-index: 50;
+        white-space: nowrap;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        line-height: 1.4;
+      }
+
+      .tooltip.visible {
+        opacity: 1;
+      }
+
+      .tooltip-time {
+        font-weight: 600;
+        display: block;
+        margin-bottom: 2px;
+      }
+
+      .tooltip-stat {
+        font-size: 10px;
+        opacity: 0.9;
+      }
+
+      .loading-skeleton {
+        display: flex;
+        gap: 1px;
+        height: 24px;
+      }
+
+      .loading-skeleton .skeleton-bar {
+        flex: 1;
+        height: 100%;
+        background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
+        animation: pulse 2s infinite;
+      }
+      
+      @keyframes pulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+
+      @keyframes loading {
+        0% { background-position: 200% 0; }
+        100% { background-position: -200% 0; }
+      }
+
+
+      @media (max-width: 640px) {
+        .container {
+          padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
+        }
+
+        .graph-container {
+          padding: ${unsafeCSS(sharedStyles.spacing.sm)};
+        }
+
+        .mainbox .barContainer {
+          height: 32px;
+          padding: ${unsafeCSS(sharedStyles.spacing.xs)};
+        }
+
+        .time-labels {
+          font-size: 9px;
+        }
+
+        .stats-row {
+          font-size: 11px;
+          flex-direction: column;
+          gap: ${unsafeCSS(sharedStyles.spacing.sm)};
+          align-items: flex-start;
+        }
       }
     `,
-    ]; }
-    render() {
-        return html `
-      <style></style>
-      <uplinternal-miniheading>Yesterday & Today</uplinternal-miniheading>
-      <div class="mainbox">
-        <div class="barContainer">
-          ${(() => {
-            let counter = 0;
-            const returnArray = [];
-            while (counter < 48) {
-                counter++;
-                returnArray.push(html ` <div class="bar"></div> `);
-            }
-            return returnArray;
-        })()}
-          <div class="timeIndicator"></div>
+        ];
+        render() {
+            return html `
+      <div class="container">
+        <uplinternal-miniheading>${this.serviceName} - Last ${this.hoursToShow} Hours</uplinternal-miniheading>
+        <div class="mainbox">
+          ${this.loading ? html `
+          <div class="graph-container">
+            <div class="barContainer" style="background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; border: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')}; border-radius: ${sharedStyles.borderRadius.base}; padding: ${sharedStyles.spacing.sm}; height: 40px;">
+              <div class="loading-skeleton">
+                ${Array(this.hoursToShow).fill(0).map(() => html `<div class="skeleton-bar"></div>`)}
+              </div>
+            </div>
+          </div>
+        ` : html `
+          <div class="graph-container">
+            <div class="barContainer" @mouseleave=${this.hideTooltip}>
+              ${this.renderBars()}
+            </div>
+          </div>
+          <div class="time-labels">
+            <span>${this.getTimeLabel(this.hoursToShow - 1)}</span>
+            <span>${this.getTimeLabel(Math.floor(this.hoursToShow * 3 / 4))}</span>
+            <span>${this.getTimeLabel(Math.floor(this.hoursToShow / 2))}</span>
+            <span>${this.getTimeLabel(Math.floor(this.hoursToShow / 4))}</span>
+            <span>now</span>
+          </div>
+        `}
         </div>
+        <div class="tooltip" id="tooltip"></div>
       </div>
     `;
-    }
-};
-UplStatuspageStatusdetails = __decorate([
-    customElement('upl-statuspage-statusdetails'),
-    __metadata("design:paramtypes", [])
-], UplStatuspageStatusdetails);
+        }
+        renderBars() {
+            const bars = [];
+            const now = Date.now();
+            for (let i = 0; i < this.hoursToShow; i++) {
+                const hourIndex = this.hoursToShow - 1 - i;
+                const timestamp = now - (hourIndex * 60 * 60 * 1000);
+                const dataPoint = this.findDataPointForTime(timestamp);
+                const status = dataPoint?.status || 'no-data';
+                const responseTime = dataPoint?.responseTime || 0;
+                bars.push(html `
+        <div 
+          class="bar ${status}"
+          @mouseenter=${(e) => this.showTooltip(e, timestamp, status, responseTime)}
+          @click=${() => this.handleBarClick(timestamp, status, responseTime)}
+        ></div>
+      `);
+            }
+            return bars;
+        }
+        getData() {
+            return this.dataPoints?.length > 0 ? this.dataPoints : this.historyData || [];
+        }
+        findDataPointForTime(timestamp) {
+            const data = this.getData();
+            if (!data || data.length === 0)
+                return undefined;
+            // Find the closest data point within the same hour
+            const targetHour = new Date(timestamp).getHours();
+            const targetDate = new Date(timestamp).toDateString();
+            return data.find(point => {
+                const pointDate = new Date(point.timestamp);
+                return pointDate.toDateString() === targetDate &&
+                    pointDate.getHours() === targetHour;
+            });
+        }
+        getTimeLabel(hoursAgo) {
+            const date = new Date(Date.now() - (hoursAgo * 60 * 60 * 1000));
+            if (hoursAgo >= 24) {
+                return `${date.getMonth() + 1}/${date.getDate()}`;
+            }
+            return `${date.getHours()}h`;
+        }
+        showTooltip(event, timestamp, status, responseTime) {
+            const tooltip = this.shadowRoot?.getElementById('tooltip');
+            if (!tooltip)
+                return;
+            const date = new Date(timestamp);
+            const timeStr = date.toLocaleString();
+            const statusStr = status.replace(/_/g, ' ').replace('no-data', 'No Data');
+            tooltip.innerHTML = `
+      <div class="tooltip-time">${timeStr}</div>
+      <div class="tooltip-stat">Status: ${statusStr}</div>
+      ${responseTime > 0 ? `<div class="tooltip-stat">Response Time: ${responseTime.toFixed(0)}ms</div>` : ''}
+    `;
+            const rect = event.target.getBoundingClientRect();
+            const containerRect = this.getBoundingClientRect();
+            tooltip.style.left = `${rect.left - containerRect.left + rect.width / 2}px`;
+            tooltip.style.top = `${rect.top - containerRect.top - 10}px`;
+            tooltip.style.transform = 'translate(-50%, -100%)';
+            tooltip.classList.add('visible');
+        }
+        hideTooltip() {
+            const tooltip = this.shadowRoot?.getElementById('tooltip');
+            if (tooltip) {
+                tooltip.classList.remove('visible');
+            }
+        }
+        handleBarClick(timestamp, status, responseTime) {
+            this.dispatchEvent(new CustomEvent('barClick', {
+                detail: { timestamp, status, responseTime, serviceId: this.serviceId },
+                bubbles: true,
+                composed: true
+            }));
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UplStatuspageStatusdetails = _classThis;
+})();
 export { UplStatuspageStatusdetails };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXBsLXN0YXR1c3BhZ2Utc3RhdHVzZGV0YWlscy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy91cGwtc3RhdHVzcGFnZS1zdGF0dXNkZXRhaWxzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxPQUFPLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFDTCxXQUFXLEVBQ1gsUUFBUSxFQUNSLElBQUksRUFDSixhQUFhLEVBRWIsR0FBRyxFQUNILFVBQVUsR0FDWCxNQUFNLDZCQUE2QixDQUFDO0FBRXJDLE9BQU8sdUNBQXVDLENBQUM7QUFTeEMsSUFBTSwwQkFBMEIsR0FBaEMsTUFBTSwwQkFBMkIsU0FBUSxXQUFXO2FBQzNDLFNBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUEsaUVBQWlFLEFBQTlFLENBQStFO0lBRWpHO1FBQ0UsS0FBSyxFQUFFLENBQUM7SUFDVixDQUFDO2FBRWEsV0FBTSxHQUFHO1FBQ3JCLE9BQU8sQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDLFlBQVk7UUFDMUMsR0FBRyxDQUFBOzs7Ozt1QkFLZ0IsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDOzs7Ozs7Ozs7dUJBU3hDLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQTRCMUQ7S0FDRixBQTdDbUIsQ0E2Q2xCO0lBRUssTUFBTTtRQUNYLE9BQU8sSUFBSSxDQUFBOzs7OztZQUtILENBQUMsR0FBRyxFQUFFO1lBQ04sSUFBSSxPQUFPLEdBQUcsQ0FBQyxDQUFDO1lBQ2hCLE1BQU0sV0FBVyxHQUFxQixFQUFFLENBQUM7WUFDekMsT0FBTyxPQUFPLEdBQUcsRUFBRSxFQUFFLENBQUM7Z0JBQ3BCLE9BQU8sRUFBRSxDQUFDO2dCQUNWLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFBLDJCQUEyQixDQUFDLENBQUM7WUFDcEQsQ0FBQztZQUNELE9BQU8sV0FBVyxDQUFDO1FBQ3JCLENBQUMsQ0FBQyxFQUFFOzs7O0tBSVQsQ0FBQztJQUNKLENBQUM7O0FBekVVLDBCQUEwQjtJQUR0QyxhQUFhLENBQUMsOEJBQThCLENBQUM7O0dBQ2pDLDBCQUEwQixDQTBFdEMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXBsLXN0YXR1c3BhZ2Utc3RhdHVzZGV0YWlscy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy91cGwtc3RhdHVzcGFnZS1zdGF0dXNkZXRhaWxzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssT0FBTyxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQ0wsV0FBVyxFQUNYLFFBQVEsRUFDUixJQUFJLEVBQ0osYUFBYSxFQUViLEdBQUcsRUFDSCxVQUFVLEVBQ1YsU0FBUyxHQUNWLE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxLQUFLLFlBQVksTUFBTSw0QkFBNEIsQ0FBQztBQUUzRCxPQUFPLHVDQUF1QyxDQUFDO0FBQy9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztJQVNyRCwwQkFBMEI7NEJBRHRDLGFBQWEsQ0FBQyw4QkFBOEIsQ0FBQzs7OztzQkFDRSxXQUFXOzs7Ozs7Ozs7Ozs7Ozs7Ozs7OzBDQUFuQixTQUFRLFdBQVc7Ozs7dUNBR3hELFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsQ0FBQztzQ0FHekIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxDQUFDO3FDQUd6QixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7dUNBRzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQzttQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxDQUFDO3VDQUczQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7WUFkM0Isc0xBQVMsV0FBVyw2QkFBWCxXQUFXLGlHQUE2QjtZQUdqRCxtTEFBUyxVQUFVLDZCQUFWLFVBQVUsK0ZBQTZCO1lBR2hELGdMQUFTLFNBQVMs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

package/dist_ts_web/elements/upl-statuspage-statusmonth.d.ts

@@ -1,4 +1,5 @@
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import type { IMonthlyUptime } from '../interfaces/index.js';
 import './internal/uplinternal-miniheading.js';
 declare global {
     interface HTMLElementTagNameMap {
@@ -7,7 +8,21 @@ declare global {
 }
 export declare class UplStatuspageStatusmonth extends DeesElement {
     static demo: () => TemplateResult<1>;
+    accessor monthlyData: IMonthlyUptime[];
+    accessor serviceId: string;
+    accessor serviceName: string;
+    accessor loading: boolean;
+    accessor showTooltip: boolean;
+    accessor monthsToShow: number;
     constructor();
     static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
+    private renderMonth;
+    private renderWeekdayLabels;
+    private renderEmptyDays;
+    private renderTrailingEmptyDays;
+    private renderDay;
+    private showDayTooltip;
+    private hideTooltip;
+    private handleDayClick;
 }

package/dist_ts_web/elements/upl-statuspage-statusmonth.demo.d.ts

@@ -0,0 +1 @@
+export declare const demoFunc: () => import("@design.estate/dees-element").TemplateResult<1>;