@uptime.link/statuspage 1.0.74 → 1.1.0

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

@@ -1,109 +1,336 @@
-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, css, cssManager } from '@design.estate/dees-element';
+import { DeesElement, property, html, customElement, css, cssManager, unsafeCSS } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
-let UplStatuspageHeader = class UplStatuspageHeader extends DeesElement {
-    // STATIC
-    static { this.demo = () => html `
-    <upl-statuspage-header></upl-statuspage-header>
-  `; }
-    constructor() {
-        super();
+import * as sharedStyles from '../styles/shared.styles.js';
+import { demoFunc } from './upl-statuspage-header.demo.js';
+let UplStatuspageHeader = (() => {
+    let _classDecorators = [customElement('upl-statuspage-header')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _pageTitle_decorators;
+    let _pageTitle_initializers = [];
+    let _pageTitle_extraInitializers = [];
+    let _showReportButton_decorators;
+    let _showReportButton_initializers = [];
+    let _showReportButton_extraInitializers = [];
+    let _showSubscribeButton_decorators;
+    let _showSubscribeButton_initializers = [];
+    let _showSubscribeButton_extraInitializers = [];
+    let _logoUrl_decorators;
+    let _logoUrl_initializers = [];
+    let _logoUrl_extraInitializers = [];
+    let _loading_decorators;
+    let _loading_initializers = [];
+    let _loading_extraInitializers = [];
+    var UplStatuspageHeader = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _pageTitle_decorators = [property({ type: String })];
+            _showReportButton_decorators = [property({ type: Boolean })];
+            _showSubscribeButton_decorators = [property({ type: Boolean })];
+            _logoUrl_decorators = [property({ type: String })];
+            _loading_decorators = [property({ type: Boolean })];
+            __esDecorate(this, null, _pageTitle_decorators, { kind: "accessor", name: "pageTitle", static: false, private: false, access: { has: obj => "pageTitle" in obj, get: obj => obj.pageTitle, set: (obj, value) => { obj.pageTitle = value; } }, metadata: _metadata }, _pageTitle_initializers, _pageTitle_extraInitializers);
+            __esDecorate(this, null, _showReportButton_decorators, { kind: "accessor", name: "showReportButton", static: false, private: false, access: { has: obj => "showReportButton" in obj, get: obj => obj.showReportButton, set: (obj, value) => { obj.showReportButton = value; } }, metadata: _metadata }, _showReportButton_initializers, _showReportButton_extraInitializers);
+            __esDecorate(this, null, _showSubscribeButton_decorators, { kind: "accessor", name: "showSubscribeButton", static: false, private: false, access: { has: obj => "showSubscribeButton" in obj, get: obj => obj.showSubscribeButton, set: (obj, value) => { obj.showSubscribeButton = value; } }, metadata: _metadata }, _showSubscribeButton_initializers, _showSubscribeButton_extraInitializers);
+            __esDecorate(this, null, _logoUrl_decorators, { kind: "accessor", name: "logoUrl", static: false, private: false, access: { has: obj => "logoUrl" in obj, get: obj => obj.logoUrl, set: (obj, value) => { obj.logoUrl = value; } }, metadata: _metadata }, _logoUrl_initializers, _logoUrl_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(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UplStatuspageHeader = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        // STATIC
+        static demo = demoFunc;
+        #pageTitle_accessor_storage = __runInitializers(this, _pageTitle_initializers, "Statuspage Title");
         // INSTANCE
-        this.pageTitle = "Statuspage Title";
-    }
-    static { this.styles = [
-        domtools.elementBasic.staticStyles,
-        css `
+        get pageTitle() { return this.#pageTitle_accessor_storage; }
+        set pageTitle(value) { this.#pageTitle_accessor_storage = value; }
+        #showReportButton_accessor_storage = (__runInitializers(this, _pageTitle_extraInitializers), __runInitializers(this, _showReportButton_initializers, true));
+        get showReportButton() { return this.#showReportButton_accessor_storage; }
+        set showReportButton(value) { this.#showReportButton_accessor_storage = value; }
+        #showSubscribeButton_accessor_storage = (__runInitializers(this, _showReportButton_extraInitializers), __runInitializers(this, _showSubscribeButton_initializers, true));
+        get showSubscribeButton() { return this.#showSubscribeButton_accessor_storage; }
+        set showSubscribeButton(value) { this.#showSubscribeButton_accessor_storage = value; }
+        #logoUrl_accessor_storage = (__runInitializers(this, _showSubscribeButton_extraInitializers), __runInitializers(this, _logoUrl_initializers, ''));
+        get logoUrl() { return this.#logoUrl_accessor_storage; }
+        set logoUrl(value) { this.#logoUrl_accessor_storage = value; }
+        #loading_accessor_storage = (__runInitializers(this, _logoUrl_extraInitializers), __runInitializers(this, _loading_initializers, false));
+        get loading() { return this.#loading_accessor_storage; }
+        set loading(value) { this.#loading_accessor_storage = value; }
+        constructor() {
+            super();
+            __runInitializers(this, _loading_extraInitializers);
+        }
+        static styles = [
+            domtools.elementBasic.staticStyles,
+            css `
       :host {
-          display: block;
-          background: ${cssManager.bdTheme('#eeeeeb', '#222222')};
-          font-family: Inter;
-          color: ${cssManager.bdTheme('#333333', '#ffffff')};
+        display: block;
+        background: ${sharedStyles.colors.background.primary};
+        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
+        color: ${sharedStyles.colors.text.primary};
+        border-bottom: 1px solid ${sharedStyles.colors.border.default};
+        position: sticky;
+        top: 0;
+        z-index: 40;
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+      }
+
+      .header-container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 ${unsafeCSS(sharedStyles.spacing.lg)};
+      }
+
+      .header-nav {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 64px;
+      }
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: ${unsafeCSS(sharedStyles.spacing.lg)};
+      }
+
+      .header-actions {
+        display: flex;
+        align-items: center;
+        gap: ${unsafeCSS(sharedStyles.spacing.sm)};
+      }
+
+      .actionButton {
+        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
+        font-size: 13px;
+        font-weight: 500;
+        padding: 0 14px;
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
+        cursor: pointer;
+        user-select: none;
+        transition: all ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 36px;
+        background: transparent;
+        border: 1px solid ${sharedStyles.colors.border.default};
+        color: ${sharedStyles.colors.text.primary};
+        letter-spacing: -0.01em;
+      }
+
+      .actionButton:hover {
+        background: ${sharedStyles.colors.background.secondary};
+        border-color: ${sharedStyles.colors.border.muted};
+        box-shadow: ${unsafeCSS(sharedStyles.shadows.xs)};
+      }
+
+      .actionButton:active {
+        transform: scale(0.98);
+        transition-duration: ${unsafeCSS(sharedStyles.durations.fast)};
+      }
+
+      .actionButton:focus-visible {
+        outline: 2px solid ${sharedStyles.colors.accent.focus};
+        outline-offset: 2px;
+      }
+
+      .site-title {
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: -0.02em;
+        color: ${sharedStyles.colors.text.primary};
+      }
+
+      .logo {
+        height: 28px;
+        width: auto;
+        filter: ${cssManager.bdTheme('none', 'brightness(0) invert(1)')};
+        transition: opacity ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
+      .logo:hover {
+        opacity: 0.8;
+      }
+
+      .page-info {
+        padding: ${unsafeCSS(sharedStyles.spacing.lg)} 0 ${unsafeCSS(sharedStyles.spacing.xl)} 0;
+      }
+
+      .page-title {
+        font-size: 48px;
+        font-weight: 700;
+        letter-spacing: -0.03em;
+        line-height: 1.1;
+        color: ${sharedStyles.colors.text.primary};
+        margin: 0 0 16px 0;
+      }
+
+      .page-subtitle {
+        font-size: 18px;
+        color: ${sharedStyles.colors.text.secondary};
+        margin: 0;
+        line-height: 1.5;
+      }
+
+      /* Primary button variant */
+      .actionButton.primary {
+        background: ${sharedStyles.colors.accent.primary};
+        color: ${sharedStyles.colors.background.primary};
+        border-color: transparent;
+      }
+
+      .actionButton.primary:hover {
+        background: ${sharedStyles.colors.accent.hover};
+        box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
+      }
+
+      .loading-skeleton {
+        height: 64px;
+        background: ${sharedStyles.colors.background.secondary};
+        border-bottom: 1px solid ${sharedStyles.colors.border.default};
+        position: relative;
+        overflow: hidden;
+      }
+
+      .loading-skeleton::after {
+        content: '';
+        position: absolute;
+        inset: 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%); }
+      }
+
+      @media (max-width: 768px) {
+        .header-container {
+          padding: 0 ${unsafeCSS(sharedStyles.spacing.md)};
         }
 
-        .mainbox {
-          margin: auto;
-          max-width: 900px;
+        .header-nav {
+          height: 56px;
         }
 
-        .mainbox .actions {
-          display: flex;
-          justify-content: flex-end;
-          padding: 20px 0px 40px 0px;
+        .header-left {
+          gap: ${unsafeCSS(sharedStyles.spacing.md)};
         }
 
-        .mainbox .actions .actionButton {
-          background: ${cssManager.bdTheme('#00000000', '#ffffff00')};
-          
+        .site-title {
+          font-size: 16px;
+        }
+
+        .logo {
+          height: 24px;
+        }
+      }
+
+      @media (max-width: 640px) {
+        .actionButton {
           font-size: 12px;
-          border: 1px solid ${cssManager.bdTheme('#333', '#CCC')};
-          padding: 6px 10px 7px 10px;
-          margin-left: 10px;
-          border-radius: 3px;
-          cursor: pointer;
-          user-select: none;
+          padding: 0 12px;
+          height: 32px;
         }
 
-        .mainbox .actions .actionButton:hover {
-          background: ${cssManager.bdTheme('#333333', '#efefef')};
-          border: 1px solid ${cssManager.bdTheme('#333333', '#efefef')};
-          color: ${cssManager.bdTheme('#fff', '#333333')};
+        .page-title {
+          font-size: 32px;
         }
 
-        h1 {
-          margin: 0px;
-          text-align: center;
-          font-weight: 600;
-          font-size: 35px;
+        .page-subtitle {
+          font-size: 16px;
         }
 
-        h2 {
-          margin: 0px;
-          margin-top: 10px;
-          text-align: center;
-          font-weight: 600;
-          font-size: 18px;
+        .header-actions {
+          gap: 6px;
         }
+      }
     `
-    ]; }
-    render() {
-        return html `
-      ${domtools.elementBasic.styles}
-      <style>
-        
-      </style>
-      <div class="mainbox">
-        <div class="actions">
-          <div class="actionButton" @click=${this.dispatchReportNewIncident}>report new incident</div>
-          <div class="actionButton" @click=${this.dispatchStatusSubscribe}>subscribe</div>
+        ];
+        render() {
+            if (this.loading) {
+                return html `
+        <div class="loading-skeleton"></div>
+      `;
+            }
+            return html `
+      <header>
+        <div class="header-container">
+          <nav class="header-nav">
+            <div class="header-left">
+              ${this.logoUrl ? html `
+                <img src="${this.logoUrl}" alt="${this.pageTitle}" class="logo">
+              ` : ''}
+              <h1 class="site-title">${this.pageTitle}</h1>
+            </div>
+            <div class="header-actions">
+              ${this.showReportButton ? html `
+                <button class="actionButton" @click=${this.dispatchReportNewIncident}>
+                  Report Issue
+                </button>
+              ` : ''}
+              ${this.showSubscribeButton ? html `
+                <button class="actionButton primary" @click=${this.dispatchStatusSubscribe}>
+                  Subscribe
+                </button>
+              ` : ''}
+            </div>
+          </nav>
         </div>
-        <h1>${this.pageTitle}</h1>
-        <h2>STATUS BOARD</h2>
-      </div>
+      </header>
     `;
-    }
-    dispatchReportNewIncident() {
-        this.dispatchEvent(new CustomEvent('reportNewIncident', {}));
-    }
-    dispatchStatusSubscribe() {
-        this.dispatchEvent(new CustomEvent('statusSubscribe', {}));
-    }
-};
-__decorate([
-    property(),
-    __metadata("design:type", String)
-], UplStatuspageHeader.prototype, "pageTitle", void 0);
-UplStatuspageHeader = __decorate([
-    customElement('upl-statuspage-header'),
-    __metadata("design:paramtypes", [])
-], UplStatuspageHeader);
+        }
+        dispatchReportNewIncident() {
+            this.dispatchEvent(new CustomEvent('reportNewIncident', {}));
+        }
+        dispatchStatusSubscribe() {
+            this.dispatchEvent(new CustomEvent('statusSubscribe', {}));
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UplStatuspageHeader = _classThis;
+})();
 export { UplStatuspageHeader };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXBsLXN0YXR1c3BhZ2UtaGVhZGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3VwbC1zdGF0dXNwYWdlLWhlYWRlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsYUFBYSxFQUF1QixHQUFHLEVBQUUsVUFBVSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDL0gsT0FBTyxLQUFLLFFBQVEsTUFBTSw4QkFBOEIsQ0FBQztBQVNsRCxJQUFNLG1CQUFtQixHQUF6QixNQUFNLG1CQUFvQixTQUFRLFdBQVc7SUFDbEQsU0FBUzthQUNLLFNBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7O0dBRTlCLEFBRmlCLENBRWhCO0lBT0Y7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQU5WLFdBQVc7UUFFSixjQUFTLEdBQVcsa0JBQWtCLENBQUM7SUFLOUMsQ0FBQzthQUVhLFdBQU0sR0FBRztRQUNyQixRQUFRLENBQUMsWUFBWSxDQUFDLFlBQVk7UUFDbEMsR0FBRyxDQUFBOzs7d0JBR2lCLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs7bUJBRTdDLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7O3dCQWVuQyxVQUFVLENBQUMsT0FBTyxDQUFDLFdBQVcsRUFBRSxXQUFXLENBQUM7Ozs4QkFHdEMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUUsTUFBTSxDQUFDOzs7Ozs7Ozs7d0JBU3hDLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs4QkFDbEMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDO21CQUNuRCxVQUFVLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRSxTQUFTLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBaUJuRDtLQUNGLEFBdERtQixDQXNEbkI7SUFFTSxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7UUFDUCxRQUFRLENBQUMsWUFBWSxDQUFDLE1BQU07Ozs7Ozs2Q0FNUyxJQUFJLENBQUMseUJBQXlCOzZDQUM5QixJQUFJLENBQUMsdUJBQXVCOztjQUUzRCxJQUFJLENBQUMsU0FBUzs7O0tBR3ZCLENBQUM7SUFDSixDQUFDO0lBRU0seUJBQXlCO1FBQzlCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxXQUFXLENBQUMsbUJBQW1CLEVBQUUsRUFFdkQsQ0FBQyxDQUFDLENBQUE7SUFDTCxDQUFDO0lBRU0sdUJBQXVCO1FBQzVCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxXQUFXLENBQUMsaUJBQWlCLEVBQUUsRUFFckQsQ0FBQyxDQUFDLENBQUE7SUFDTCxDQUFDOztBQTFGTTtJQUROLFFBQVEsRUFBRTs7c0RBQ21DO0FBUm5DLG1CQUFtQjtJQUQvQixhQUFhLENBQUMsdUJBQXVCLENBQUM7O0dBQzFCLG1CQUFtQixDQW1HL0IifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXBsLXN0YXR1c3BhZ2UtaGVhZGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3VwbC1zdGF0dXNwYWdlLWhlYWRlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLGFBQWEsRUFBdUIsR0FBRyxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUMxSSxPQUFPLEtBQUssUUFBUSxNQUFNLDhCQUE4QixDQUFDO0FBQ3pELE9BQU8sS0FBSyxZQUFZLE1BQU0sNEJBQTRCLENBQUM7QUFDM0QsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0lBUzlDLG1CQUFtQjs0QkFEL0IsYUFBYSxDQUFDLHVCQUF1QixDQUFDOzs7O3NCQUNFLFdBQVc7Ozs7Ozs7Ozs7Ozs7Ozs7bUNBQW5CLFNBQVEsV0FBVzs7OztxQ0FLakQsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDOzRDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUM7K0NBRzNCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsQ0FBQzttQ0FHM0IsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO21DQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUM7WUFYNUIsZ0xBQVMsU0FBUyw2QkFBVCxTQUFTLDZGQUE4QjtZQUdoRCxxTUFBUyxnQkFBZ0IsNkJBQWhCLGdCQUFnQiwyR0FBaUI7WUFHMUMsOE1BQVMsbUJBQW1CLDZCQUFuQixtQkFBbUIsaUhBQWlCO1lBRzdDLDBLQUFTLE9BQU8sNkJBQVAsT0FBTyx5RkFBYztZQUc5QiwwS0FBUyxPQUFPLDZCQUFQ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

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

@@ -1,5 +1,6 @@
-import * as plugins from '../plugins.js';
 import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import type { IIncidentDetails } from '../interfaces/index.js';
+import './internal/uplinternal-miniheading.js';
 declare global {
     interface HTMLElementTagNameMap {
         'upl-statuspage-incidents': UplStatuspageIncidents;
@@ -7,12 +8,29 @@ declare global {
 }
 export declare class UplStatuspageIncidents extends DeesElement {
     static demo: () => TemplateResult<1>;
-    currentIncidences: plugins.uplInterfaces.data.IIncident[];
-    pastIncidences: plugins.uplInterfaces.data.IIncident[];
-    whitelabel: boolean;
+    accessor currentIncidents: IIncidentDetails[];
+    accessor pastIncidents: IIncidentDetails[];
+    accessor whitelabel: boolean;
+    accessor loading: boolean;
+    accessor daysToShow: number;
+    accessor subscribedIncidentIds: string[];
+    private accessor expandedIncidents;
+    private accessor subscribedIncidents;
     constructor();
+    connectedCallback(): Promise<void>;
+    updated(changedProperties: Map<string, any>): void;
     static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
+    private renderIncident;
+    private renderUpdate;
+    private getStatusIcon;
+    private formatDate;
+    private formatDuration;
+    private toggleIncident;
+    private handleIncidentClick;
+    private handleShowMore;
+    private isSubscribedToIncident;
+    private handleIncidentSubscribe;
     dispatchReportNewIncident(): void;
     dispatchStatusSubscribe(): void;
 }

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

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