@uptime.link/statuspage 1.0.74 → 1.2.0

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

@@ -1,55 +1,419 @@
-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 { DeesElement, property, html, customElement, cssManager, css } from '@design.estate/dees-element';
+import { DeesElement, property, html, customElement, cssManager, css, unsafeCSS } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
-let UplStatuspageStatusbar = class UplStatuspageStatusbar extends DeesElement {
-    static { this.demo = () => html `
-    <upl-statuspage-statusbar></upl-statuspage-statusbar>
-  `; }
-    constructor() {
-        super();
-    }
-    static { this.styles = [
-        cssManager.defaultStyles,
-        css `
+import * as sharedStyles from '../styles/shared.styles.js';
+import { demoFunc } from './upl-statuspage-statusbar.demo.js';
+let UplStatuspageStatusbar = (() => {
+    let _classDecorators = [customElement('upl-statuspage-statusbar')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _overallStatus_decorators;
+    let _overallStatus_initializers = [];
+    let _overallStatus_extraInitializers = [];
+    let _loading_decorators;
+    let _loading_initializers = [];
+    let _loading_extraInitializers = [];
+    let _expandable_decorators;
+    let _expandable_initializers = [];
+    let _expandable_extraInitializers = [];
+    var UplStatuspageStatusbar = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _overallStatus_decorators = [property({ type: Object })];
+            _loading_decorators = [property({ type: Boolean })];
+            _expandable_decorators = [property({ type: Boolean })];
+            __esDecorate(this, null, _overallStatus_decorators, { kind: "accessor", name: "overallStatus", static: false, private: false, access: { has: obj => "overallStatus" in obj, get: obj => obj.overallStatus, set: (obj, value) => { obj.overallStatus = value; } }, metadata: _metadata }, _overallStatus_initializers, _overallStatus_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, _expandable_decorators, { kind: "accessor", name: "expandable", static: false, private: false, access: { has: obj => "expandable" in obj, get: obj => obj.expandable, set: (obj, value) => { obj.expandable = value; } }, metadata: _metadata }, _expandable_initializers, _expandable_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UplStatuspageStatusbar = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = demoFunc;
+        #overallStatus_accessor_storage = __runInitializers(this, _overallStatus_initializers, {
+            status: 'operational',
+            message: 'All Systems Operational',
+            lastUpdated: Date.now(),
+            affectedServices: 0,
+            totalServices: 0
+        });
+        get overallStatus() { return this.#overallStatus_accessor_storage; }
+        set overallStatus(value) { this.#overallStatus_accessor_storage = value; }
+        #loading_accessor_storage = (__runInitializers(this, _overallStatus_extraInitializers), __runInitializers(this, _loading_initializers, false));
+        get loading() { return this.#loading_accessor_storage; }
+        set loading(value) { this.#loading_accessor_storage = value; }
+        #expandable_accessor_storage = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _expandable_initializers, true));
+        get expandable() { return this.#expandable_accessor_storage; }
+        set expandable(value) { this.#expandable_accessor_storage = value; }
+        constructor() {
+            super();
+            __runInitializers(this, _expandable_extraInitializers);
+        }
+        static styles = [
+            cssManager.defaultStyles,
+            css `
       :host {
-          padding: 20px 0px 15px 0px;
-          display: block;
-          background: ${cssManager.bdTheme('#eeeeeb', '#222222')};;
-          font-family: Inter;
-          color: #fff;
+        padding: 0;
+        display: block;
+        background: transparent;
+        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
+      }
+
+      .statusbar-container {
+        margin: auto;
+        max-width: 1200px;
+        padding: ${unsafeCSS(sharedStyles.spacing.lg)};
+        position: relative;
+      }
+
+      .statusbar-inner {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 72px;
+        padding: ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.xl)};
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.xl)};
+        cursor: default;
+        transition: all ${unsafeCSS(sharedStyles.durations.slow)} ${unsafeCSS(sharedStyles.easings.default)};
+        position: relative;
+        overflow: hidden;
+        font-weight: 500;
+        font-size: 15px;
+        letter-spacing: -0.01em;
+        border: 1px solid ${sharedStyles.colors.border.default};
+        box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
+      }
+
+      /* Gradient background overlay */
+      .statusbar-inner::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        opacity: 1;
+        transition: opacity ${unsafeCSS(sharedStyles.durations.slow)} ${unsafeCSS(sharedStyles.easings.default)};
+        z-index: 0;
+      }
+
+      /* Left accent border */
+      .statusbar-inner::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        transition: background ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
+        z-index: 1;
+      }
+
+      /* Operational - green gradient */
+      .statusbar-inner.operational {
+        background: ${sharedStyles.colors.background.card};
+      }
+      .statusbar-inner.operational::before {
+        background: ${sharedStyles.statusGradients.operational};
+      }
+      .statusbar-inner.operational::after {
+        background: ${sharedStyles.colors.status.operational};
+      }
+
+      /* Degraded - yellow/amber gradient */
+      .statusbar-inner.degraded {
+        background: ${sharedStyles.colors.background.card};
+      }
+      .statusbar-inner.degraded::before {
+        background: ${sharedStyles.statusGradients.degraded};
+      }
+      .statusbar-inner.degraded::after {
+        background: ${sharedStyles.colors.status.degraded};
+      }
+
+      /* Partial outage - orange/red gradient */
+      .statusbar-inner.partial_outage {
+        background: ${sharedStyles.colors.background.card};
+      }
+      .statusbar-inner.partial_outage::before {
+        background: ${sharedStyles.statusGradients.partial};
+      }
+      .statusbar-inner.partial_outage::after {
+        background: ${sharedStyles.colors.status.partial};
+      }
+
+      /* Major outage - red gradient */
+      .statusbar-inner.major_outage {
+        background: ${sharedStyles.colors.background.card};
+      }
+      .statusbar-inner.major_outage::before {
+        background: ${sharedStyles.statusGradients.major};
+      }
+      .statusbar-inner.major_outage::after {
+        background: ${sharedStyles.colors.status.major};
+      }
+
+      /* Maintenance - blue gradient */
+      .statusbar-inner.maintenance {
+        background: ${sharedStyles.colors.background.card};
+      }
+      .statusbar-inner.maintenance::before {
+        background: ${sharedStyles.statusGradients.maintenance};
+      }
+      .statusbar-inner.maintenance::after {
+        background: ${sharedStyles.colors.status.maintenance};
+      }
+
+      .statusbar-inner:hover {
+        border-color: ${sharedStyles.colors.border.muted};
+        box-shadow: ${unsafeCSS(sharedStyles.shadows.md)};
+        transform: translateY(-1px);
+      }
+
+      .statusbar-inner:hover::before {
+        opacity: 1.2;
+      }
+
+      .status-indicator {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        flex-shrink: 0;
+        position: relative;
+      }
+
+      .status-indicator::after {
+        content: '';
+        position: absolute;
+        inset: -3px;
+        border-radius: 50%;
+        opacity: 0.2;
+      }
+
+      .statusbar-inner.operational .status-indicator {
+        background: ${sharedStyles.colors.status.operational};
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(22, 163, 74, 0.15)', 'rgba(34, 197, 94, 0.2)')};
+      }
+
+      .statusbar-inner.operational .status-indicator::after {
+        background: ${sharedStyles.colors.status.operational};
+        animation: pulse-ring 2s ease-out infinite;
+      }
+
+      .statusbar-inner.degraded .status-indicator {
+        background: ${sharedStyles.colors.status.degraded};
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(217, 119, 6, 0.15)', 'rgba(251, 191, 36, 0.2)')};
+      }
+
+      .statusbar-inner.partial_outage .status-indicator {
+        background: ${sharedStyles.colors.status.partial};
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(220, 38, 38, 0.15)', 'rgba(248, 113, 113, 0.2)')};
+      }
+
+      .statusbar-inner.major_outage .status-indicator {
+        background: ${sharedStyles.colors.status.major};
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(185, 28, 28, 0.15)', 'rgba(239, 68, 68, 0.2)')};
+        animation: pulse-indicator 1s ease-in-out infinite;
+      }
+
+      .statusbar-inner.maintenance .status-indicator {
+        background: ${sharedStyles.colors.status.maintenance};
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(37, 99, 235, 0.15)', 'rgba(96, 165, 250, 0.2)')};
+      }
+
+      @keyframes pulse-ring {
+        0% { transform: scale(1); opacity: 0.2; }
+        50% { transform: scale(1.5); opacity: 0; }
+        100% { transform: scale(1); opacity: 0; }
+      }
+
+      @keyframes pulse-indicator {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.6; }
+      }
+
+      .status-content {
+        display: flex;
+        align-items: center;
+        gap: ${unsafeCSS(sharedStyles.spacing.md)};
+        flex: 1;
+        padding-left: ${unsafeCSS(sharedStyles.spacing.sm)};
+      }
+
+      .status-main {
+        display: flex;
+        align-items: center;
+        gap: ${unsafeCSS(sharedStyles.spacing.sm)};
+        color: ${sharedStyles.colors.text.primary};
+      }
+
+      .status-message {
+        font-weight: 600;
+      }
+
+      .status-details {
+        font-size: 13px;
+        font-weight: 400;
+        color: ${sharedStyles.colors.text.secondary};
+      }
+
+      .loading-skeleton {
+        background: ${sharedStyles.colors.background.card};
+        border: 1px solid ${sharedStyles.colors.border.default};
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
+        height: 64px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .loading-skeleton::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: ${cssManager.bdTheme('linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.04) 50%, transparent 100%)', 'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%)')};
+        animation: loading 1.5s ${unsafeCSS(sharedStyles.easings.default)} infinite;
+      }
+
+      @keyframes loading {
+        0% { transform: translateX(-100%); }
+        100% { transform: translateX(200%); }
+      }
+
+      .last-updated {
+        font-size: 12px;
+        color: ${sharedStyles.colors.text.muted};
+        white-space: nowrap;
+        padding: 4px 10px;
+        background: ${sharedStyles.colors.background.muted};
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
+        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
+      .statusbar-inner:hover .last-updated {
+        background: ${cssManager.bdTheme('#e4e4e7', '#3f3f46')};
+      }
+
+      @media (max-width: 768px) {
+        .statusbar-container {
+          padding: ${unsafeCSS(sharedStyles.spacing.md)};
+        }
+
+        .statusbar-inner {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: ${unsafeCSS(sharedStyles.spacing.sm)};
+          min-height: auto;
+          padding: ${unsafeCSS(sharedStyles.spacing.md)};
+        }
+
+        .status-main {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 4px;
+        }
+
+        .last-updated {
+          align-self: flex-start;
+        }
+      }
+
+      @media (max-width: 640px) {
+        .statusbar-inner {
+          font-size: 14px;
         }
 
-        .mainbox {
-          margin: auto;
-          max-width: 900px;
-          text-align: center;
-          background: #19572E;
-          line-height: 50px;
-          border-radius: 3px;
+        .status-indicator {
+          width: 8px;
+          height: 8px;
         }
+
+        .last-updated {
+          font-size: 11px;
+        }
+      }
     `,
-    ]; }
-    render() {
-        return html `
-      <style>
-      </style>
-      <div class="mainbox">
-        Everything is working normally!
+        ];
+        render() {
+            const formatLastUpdated = () => {
+                const date = new Date(this.overallStatus.lastUpdated);
+                const now = new Date();
+                const diff = now.getTime() - date.getTime();
+                const minutes = Math.floor(diff / 60000);
+                if (minutes < 1)
+                    return 'Just now';
+                if (minutes < 60)
+                    return `${minutes}m ago`;
+                const hours = Math.floor(minutes / 60);
+                if (hours < 24)
+                    return `${hours}h ago`;
+                return date.toLocaleDateString();
+            };
+            return html `
+      <div class="statusbar-container">
+        ${this.loading ? html `
+          <div class="loading-skeleton"></div>
+        ` : html `
+          <div class="statusbar-inner ${this.overallStatus.status}">
+            <div class="status-content">
+              <div class="status-indicator"></div>
+              <div class="status-main">
+                <span>${this.overallStatus.message}</span>
+                ${this.overallStatus.affectedServices > 0 ? html `
+                  <span class="status-details">
+                    · ${this.overallStatus.affectedServices} of ${this.overallStatus.totalServices} services affected
+                  </span>
+                ` : ''}
+              </div>
+            </div>
+            <div class="last-updated">
+              ${formatLastUpdated()}
+            </div>
+          </div>
+        `}
       </div>
     `;
-    }
-};
-UplStatuspageStatusbar = __decorate([
-    customElement('upl-statuspage-statusbar'),
-    __metadata("design:paramtypes", [])
-], UplStatuspageStatusbar);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UplStatuspageStatusbar = _classThis;
+})();
 export { UplStatuspageStatusbar };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXBsLXN0YXR1c3BhZ2Utc3RhdHVzYmFyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3VwbC1zdGF0dXNwYWdlLXN0YXR1c2Jhci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsYUFBYSxFQUF1QixVQUFVLEVBQUUsR0FBRyxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDL0gsT0FBTyxLQUFLLFFBQVEsTUFBTSw4QkFBOEIsQ0FBQztBQVNsRCxJQUFNLHNCQUFzQixHQUE1QixNQUFNLHNCQUF1QixTQUFRLFdBQVc7YUFDdkMsU0FBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQTs7R0FFOUIsQUFGaUIsQ0FFaEI7SUFFRjtRQUNFLEtBQUssRUFBRSxDQUFDO0lBQ1YsQ0FBQzthQUVhLFdBQU0sR0FBRztRQUNyQixVQUFVLENBQUMsYUFBYTtRQUN4QixHQUFHLENBQUE7Ozs7d0JBSWlCLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs7Ozs7Ozs7Ozs7OztLQWEzRDtLQUNGLEFBcEJtQixDQW9CbkI7SUFFTSxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7Ozs7OztLQU1WLENBQUM7SUFDSixDQUFDOztBQXZDVSxzQkFBc0I7SUFEbEMsYUFBYSxDQUFDLDBCQUEwQixDQUFDOztHQUM3QixzQkFBc0IsQ0F3Q2xDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXBsLXN0YXR1c3BhZ2Utc3RhdHVzYmFyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3VwbC1zdGF0dXNwYWdlLXN0YXR1c2Jhci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLGFBQWEsRUFBdUIsVUFBVSxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUMxSSxPQUFPLEtBQUssUUFBUSxNQUFNLDhCQUE4QixDQUFDO0FBRXpELE9BQU8sS0FBSyxZQUFZLE1BQU0sNEJBQTRCLENBQUM7QUFDM0QsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0lBU2pELHNCQUFzQjs0QkFEbEMsYUFBYSxDQUFDLDBCQUEwQixDQUFDOzs7O3NCQUNFLFdBQVc7Ozs7Ozs7Ozs7c0NBQW5CLFNBQVEsV0FBVzs7Ozt5Q0FHcEQsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO21DQVMxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUM7c0NBRzNCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsQ0FBQztZQVg1Qiw0TEFBUyxhQUFhLDZCQUFiLGFBQWEscUdBTXBCO1lBR0YsMEtBQVMsT0FBTyw2QkFBUCxPQUFPLHlGQUFrQjtZQUdsQyxtTEFBUyxVQUFVLDZCQUFWLFVBQVUsK0ZBQWlCO1lBaEJ0Qyw2S0E2VkM7Ozs7UUE1VlEsTUFBTSxDQUFDLElBQUksR0FBRyxRQUFRLENBQUM7UUFHOUIsdUZBQXlDO1lBQ3ZDLE1BQU0sRUFBRSxhQUFhO1lBQ3JCLE9BQU8sRUFBRSx5QkFBeUI7WUFDbEMsV0FBVyxFQUFFLElBQUksQ0FBQyxHQUFHLEVBQUU7WUFDdkIsZ0JBQWdCLEVB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

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

@@ -1,4 +1,5 @@
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import type { IStatusHistoryPoint } from '../interfaces/index.js';
 import './internal/uplinternal-miniheading.js';
 declare global {
     interface HTMLElementTagNameMap {
@@ -7,7 +8,20 @@ declare global {
 }
 export declare class UplStatuspageStatusdetails extends DeesElement {
     static demo: () => TemplateResult<1>;
+    accessor historyData: IStatusHistoryPoint[];
+    accessor dataPoints: IStatusHistoryPoint[];
+    accessor serviceId: string;
+    accessor serviceName: string;
+    accessor loading: boolean;
+    accessor hoursToShow: number;
     constructor();
     static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
+    private renderBars;
+    private getData;
+    private findDataPointForTime;
+    private getTimeLabel;
+    private showTooltip;
+    private hideTooltip;
+    private handleBarClick;
 }

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

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