@dssp/dkpi 1.0.0-alpha.8 → 1.0.0-alpha.80

package/dist-client/entries/auth/checkin.js

@@ -0,0 +1,546 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@operato/lottie-player';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+import { isSafari } from '@operato/utils';
+import { AUTH_STYLE_SIGN } from '@things-factory/auth-ui/dist-client/auth-style-sign.js';
+const CATEGORY_ICON = {
+    domain: 'business',
+    project: 'assignment',
+    company: 'corporate_fare',
+    equipment: 'precision_manufacturing'
+};
+const CATEGORY_FALLBACK_ICON = 'folder';
+/** 카테고리 표시 순서. 여기 없는 카테고리는 뒤에 insertion 순으로 붙는다. */
+const CATEGORY_ORDER = ['domain', 'project', 'company', 'equipment'];
+let AuthCheckIn = class AuthCheckIn extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.domains = [];
+        this.searchValue = '';
+        this.collapsedSections = {};
+    }
+    render() {
+        var _a;
+        const { icon, title, description } = this.applicationMeta;
+        const groups = this._groupAndFilter();
+        const totalShown = Object.values(groups).reduce((sum, g) => sum + g.length, 0);
+        const hasAnyDomain = (((_a = this.domains) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0;
+        const groupEntries = this._orderedEntries(groups);
+        return html `
+      <div class="content md-typescale-display-medium">
+        <div class="wrap">
+          <div class="auth-brand">
+            <img src=${icon || ''} />
+            <strong class="name">${title}</strong>
+            <span class="welcome-msg">${description}</span>
+          </div>
+
+          <h3>${i18next.t('label.select_domain')}</h3>
+
+          ${hasAnyDomain
+            ? html `
+                <div class="search-box">
+                  <md-icon>search</md-icon>
+                  <input
+                    type="text"
+                    placeholder=${i18next.t('label.search_domain')}
+                    .value=${this.searchValue}
+                    @input=${(e) => (this.searchValue = e.target.value)}
+                  />
+                </div>
+              `
+            : ''}
+
+          ${!hasAnyDomain
+            ? html `
+                <div class="empty-search">
+                  <md-icon>inbox</md-icon>
+                  <div class="text">${i18next.t('text.no domain available')}</div>
+                </div>
+              `
+            : totalShown === 0
+                ? html `
+                  <div class="empty-search">
+                    <md-icon>search_off</md-icon>
+                    <div class="text">
+                      ${i18next.t('text.no_matching_domain', { defaultValue: '검색 결과가 없습니다.' })}
+                    </div>
+                  </div>
+                `
+                : html `
+                  <div class="domain-groups">
+                    ${groupEntries.map(([category, items]) => this._renderCategory(category, items))}
+                  </div>
+                `}
+
+          <div class="button-container">
+            <md-elevated-button @click=${() => (location.pathname = '/auth/signout')}
+              >${String(i18next.t('button.logout'))}</md-elevated-button
+            >
+          </div>
+
+          ${isSafari()
+            ? html ``
+            : html `
+                <div class="lottie-container">
+                  <lottie-player autoplay loop src="../../assets/images/background-animation.json"></lottie-player>
+                </div>
+              `}
+        </div>
+      </div>
+    `;
+    }
+    _renderCategory(category, items) {
+        const collapsed = !!this.collapsedSections[category];
+        return html `
+      <section class="category">
+        <header @click=${() => this._toggleSection(category)}>
+          <span class="category-icon">
+            <md-icon>${CATEGORY_ICON[category] || CATEGORY_FALLBACK_ICON}</md-icon>
+          </span>
+          <span class="label">${this._categoryLabel(category)}</span>
+          <span class="count">${items.length}</span>
+          <md-icon class="chevron ${collapsed ? 'collapsed' : ''}">expand_more</md-icon>
+        </header>
+        ${collapsed
+            ? ''
+            : html `
+              <ul class="domains">
+                ${items.map(domain => html `
+                    <li
+                      @click=${() => this._select(domain)}
+                      title=${domain.description ? `${domain.name}\n${domain.description}` : domain.name}
+                    >
+                      <div class="info">
+                        <div class="primary">
+                          <strong>${domain.name}</strong>
+                          <span class="subdomain">${domain.subdomain}</span>
+                        </div>
+                        ${domain.description ? html `<div class="desc">${domain.description}</div>` : ''}
+                      </div>
+                      <md-icon class="arrow">arrow_forward</md-icon>
+                    </li>
+                  `)}
+              </ul>
+            `}
+      </section>
+    `;
+    }
+    /**
+     * groups 를 CATEGORY_ORDER 에 따라 정렬한 [category, items][] 로 반환.
+     * 정의된 순서대로 먼저 나열, 정의 안 된 카테고리는 마지막에 insertion 순으로 붙는다.
+     */
+    _orderedEntries(groups) {
+        var _a;
+        const ordered = [];
+        const seen = new Set();
+        for (const cat of CATEGORY_ORDER) {
+            if ((_a = groups[cat]) === null || _a === void 0 ? void 0 : _a.length) {
+                ordered.push([cat, groups[cat]]);
+                seen.add(cat);
+            }
+        }
+        for (const [cat, items] of Object.entries(groups)) {
+            if (!seen.has(cat))
+                ordered.push([cat, items]);
+        }
+        return ordered;
+    }
+    /**
+     * 도메인들을 extType 별로 그룹핑하고 검색어로 필터링한다.
+     * 매치 0건인 카테고리는 결과에서 자동 제외 — 빈 섹션은 화면에 노출되지 않는다.
+     */
+    _groupAndFilter() {
+        var _a, _b, _c, _d, _e, _f;
+        const keyword = this.searchValue.toLowerCase().trim();
+        const groups = {};
+        for (const domain of this.domains || []) {
+            if (keyword) {
+                const nameMatch = (_b = (_a = domain.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(keyword)) !== null && _b !== void 0 ? _b : false;
+                const descMatch = (_d = (_c = domain.description) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(keyword)) !== null && _d !== void 0 ? _d : false;
+                const subMatch = (_f = (_e = domain.subdomain) === null || _e === void 0 ? void 0 : _e.toLowerCase().includes(keyword)) !== null && _f !== void 0 ? _f : false;
+                if (!nameMatch && !descMatch && !subMatch)
+                    continue;
+            }
+            const category = domain.extType || 'domain';
+            (groups[category] || (groups[category] = [])).push(domain);
+        }
+        return groups;
+    }
+    _select(domain) {
+        location.href = `/auth/checkin/${domain.subdomain}?redirect_to=${encodeURIComponent(this.redirectTo || '/')}`;
+    }
+    _toggleSection(category) {
+        this.collapsedSections = Object.assign(Object.assign({}, this.collapsedSections), { [category]: !this.collapsedSections[category] });
+    }
+    _categoryLabel(category) {
+        return i18next.t(`label.domain_type.${category}`, { defaultValue: category });
+    }
+    updated(changed) {
+        var _a, _b, _c, _d;
+        if (changed.has('data')) {
+            this.domains = ((_a = this.data) === null || _a === void 0 ? void 0 : _a.domains) || [];
+            this.user = (_b = this.data) === null || _b === void 0 ? void 0 : _b.user;
+            this.domainTypes = (_c = this.data) === null || _c === void 0 ? void 0 : _c.domainTypes;
+            this.redirectTo = (_d = this.data) === null || _d === void 0 ? void 0 : _d.redirectTo;
+            this.requestUpdate();
+        }
+    }
+    get applicationMeta() {
+        if (!this._applicationMeta) {
+            const iconLink = document.querySelector('link[rel="application-icon"]');
+            const titleMeta = document.querySelector('meta[name="application-name"]');
+            const descriptionMeta = document.querySelector('meta[name="application-description"]');
+            this._applicationMeta = {
+                icon: iconLink === null || iconLink === void 0 ? void 0 : iconLink.href,
+                title: titleMeta ? titleMeta.content : 'Things Factory',
+                description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
+            };
+        }
+        return this._applicationMeta;
+    }
+};
+AuthCheckIn.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        margin: auto;
+        background: linear-gradient(
+          135deg,
+          var(--md-sys-color-primary) 0%,
+          color-mix(in srgb, var(--md-sys-color-primary) 70%, #000) 100%
+        );
+        color: var(--md-sys-color-on-primary);
+        height: 100vh;
+        height: 100dvh;
+      }
+
+      .content {
+        flex: 1;
+        overflow: auto;
+      }
+
+      h3 {
+        margin: 6px 0 14px;
+        font-size: 13px;
+        font-weight: 500;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        opacity: 0.75;
+      }
+
+      /* ─── Search ─── */
+      .search-box {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin: 0 0 20px;
+        padding: 12px 18px;
+        background: rgba(255, 255, 255, 0.08);
+        color: var(--md-sys-color-on-primary);
+        border-radius: 14px;
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        transition: all 0.18s ease;
+      }
+
+      .search-box:focus-within {
+        background: rgba(255, 255, 255, 0.14);
+        border-color: rgba(255, 255, 255, 0.3);
+        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
+      }
+
+      .search-box md-icon {
+        --md-icon-size: 20px;
+        opacity: 0.8;
+      }
+
+      .search-box input {
+        flex: 1;
+        border: none;
+        outline: none;
+        background: transparent;
+        font-size: 15px;
+        color: var(--md-sys-color-on-primary);
+      }
+
+      .search-box input::placeholder {
+        color: rgba(255, 255, 255, 0.5);
+      }
+
+      /* ─── Group of categories ─── */
+      .domain-groups {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+      }
+
+      /* ─── Category section ─── */
+      section.category {
+        background: rgba(255, 255, 255, 0.96);
+        color: #1d2125;
+        border-radius: 16px;
+        overflow: hidden;
+        box-shadow:
+          0 10px 30px -8px rgba(0, 0, 0, 0.25),
+          0 2px 6px -2px rgba(0, 0, 0, 0.15);
+        animation: slide-up 0.22s ease both;
+      }
+
+      @keyframes slide-up {
+        from {
+          opacity: 0;
+          transform: translateY(6px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      section.category > header {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 12px 18px;
+        cursor: pointer;
+        user-select: none;
+        transition: background 0.15s ease;
+      }
+
+      section.category > header:hover {
+        background: rgba(0, 0, 0, 0.03);
+      }
+
+      section.category > header .category-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border-radius: 10px;
+        background: color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);
+        color: var(--md-sys-color-primary);
+        flex-shrink: 0;
+      }
+
+      section.category > header .category-icon md-icon {
+        --md-icon-size: 18px;
+      }
+
+      section.category > header .label {
+        font-weight: 600;
+        font-size: 14px;
+        flex: 1;
+        text-align: left;
+        letter-spacing: 0.01em;
+      }
+
+      section.category > header .count {
+        background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
+        color: var(--md-sys-color-primary);
+        border-radius: 999px;
+        padding: 2px 10px;
+        font-size: 12px;
+        font-weight: 600;
+        min-width: 26px;
+        text-align: center;
+      }
+
+      section.category > header .chevron {
+        --md-icon-size: 20px;
+        opacity: 0.5;
+        transition: transform 0.18s ease;
+      }
+
+      section.category > header .chevron.collapsed {
+        transform: rotate(-90deg);
+      }
+
+      /* ─── Domain list ─── */
+      ul.domains {
+        margin: 0;
+        padding: 4px 0 8px;
+        list-style: none;
+      }
+
+      ul.domains li {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin: 0 8px;
+        padding: 8px 14px;
+        cursor: pointer;
+        text-align: left;
+        border-radius: 10px;
+        transition: all 0.15s ease;
+        position: relative;
+      }
+
+      ul.domains li::before {
+        content: '';
+        position: absolute;
+        left: -8px;
+        right: -8px;
+        top: 0;
+        bottom: 0;
+        border-radius: 10px;
+        background: linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent),
+          transparent
+        );
+        opacity: 0;
+        transition: opacity 0.15s ease;
+        pointer-events: none;
+      }
+
+      ul.domains li:hover {
+        transform: translateX(3px);
+      }
+
+      ul.domains li:hover::before {
+        opacity: 1;
+      }
+
+      ul.domains li:hover md-icon.arrow {
+        opacity: 1;
+        transform: translateX(3px);
+        color: var(--md-sys-color-primary);
+      }
+
+      ul.domains li .info {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        z-index: 1;
+      }
+
+      ul.domains li .primary {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 12px;
+        min-width: 0;
+      }
+
+      ul.domains li .primary strong {
+        font-size: 15px;
+        font-weight: 600;
+        color: #1d2125;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;
+      }
+
+      ul.domains li .subdomain {
+        font-size: 11px;
+        color: var(--md-sys-color-primary);
+        font-family: var(--theme-font-mono, ui-monospace, monospace);
+        font-weight: 600;
+        flex-shrink: 0;
+      }
+
+      ul.domains li .desc {
+        font-size: 12px;
+        color: #5a6168;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      ul.domains li md-icon.arrow {
+        opacity: 0.3;
+        --md-icon-size: 22px;
+        transition: all 0.18s ease;
+        z-index: 1;
+        flex-shrink: 0;
+      }
+
+      /* ─── Empty state ─── */
+      .empty-search {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        margin: 24px 0;
+        padding: 32px 16px;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 14px;
+        border: 1px dashed rgba(255, 255, 255, 0.18);
+        opacity: 0.85;
+      }
+
+      .empty-search md-icon {
+        --md-icon-size: 32px;
+        opacity: 0.5;
+      }
+
+      .empty-search .text {
+        font-size: 14px;
+        opacity: 0.8;
+      }
+
+      /* ─── Footer button ─── */
+      .button-container {
+        text-align: center;
+        margin-top: 24px;
+      }
+
+      .button-container md-elevated-button {
+        margin-left: var(--spacing-small);
+        --md-elevated-button-container-color: rgba(255, 255, 255, 0.12);
+        --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);
+        --md-elevated-button-container-shadow-color: transparent;
+      }
+
+      @media (max-width: 450px) {
+        .button-container md-elevated-button {
+          width: 100%;
+          margin: var(--spacing-medium) 0 0 0;
+        }
+      }
+    `,
+    AUTH_STYLE_SIGN
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], AuthCheckIn.prototype, "data", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], AuthCheckIn.prototype, "domains", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], AuthCheckIn.prototype, "domainTypes", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], AuthCheckIn.prototype, "user", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], AuthCheckIn.prototype, "searchValue", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AuthCheckIn.prototype, "collapsedSections", void 0);
+AuthCheckIn = __decorate([
+    customElement('auth-checkin')
+], AuthCheckIn);
+export { AuthCheckIn };
+//# sourceMappingURL=checkin.js.map

package/dist-client/entries/auth/checkin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkin.js","sourceRoot":"","sources":["../../../client/entries/auth/checkin.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yCAAyC,CAAA;AAEhD,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,wDAAwD,CAAA;AAExF,MAAM,aAAa,GAA2B;IAC5C,MAAM,EAAE,UAAU;IAClB,OAAO,EAAE,YAAY;IACrB,OAAO,EAAE,gBAAgB;IACzB,SAAS,EAAE,yBAAyB;CACrC,CAAA;AAED,MAAM,sBAAsB,GAAG,QAAQ,CAAA;AAEvC,oDAAoD;AACpD,MAAM,cAAc,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,CAAC,CAAA;AAG7D,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAvD;;QAyTsB,YAAO,GAAU,EAAE,CAAA;QAIrC,gBAAW,GAAW,EAAE,CAAA;QACxB,sBAAiB,GAA4B,EAAE,CAAA;IAuM1D,CAAC;IAlMC,MAAM;;QACJ,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,eAAe,CAAA;QACzD,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QACrC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;QAC9E,MAAM,YAAY,GAAG,CAAC,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,KAAI,CAAC,CAAC,GAAG,CAAC,CAAA;QACpD,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAA;QAEjD,OAAO,IAAI,CAAA;;;;uBAIQ,IAAI,IAAI,EAAE;mCACE,KAAK;wCACA,WAAW;;;gBAGnC,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;YAEpC,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA;;;;;kCAKgB,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;6BACrC,IAAI,CAAC,WAAW;6BAChB,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;;;eAG1F;YACH,CAAC,CAAC,EAAE;;YAEJ,CAAC,YAAY;YACb,CAAC,CAAC,IAAI,CAAA;;;sCAGoB,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC;;eAE5D;YACH,CAAC,CAAC,UAAU,KAAK,CAAC;gBAChB,CAAC,CAAC,IAAI,CAAA;;;;wBAII,OAAO,CAAC,CAAC,CAAC,yBAAyB,EAAE,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC;;;iBAG7E;gBACH,CAAC,CAAC,IAAI,CAAA;;sBAEE,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;;iBAEnF;;;yCAGwB,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,QAAQ,GAAG,eAAe,CAAC;iBACnE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;;;;YAIvC,QAAQ,EAAE;YACV,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA;;;;eAIH;;;KAGV,CAAA;IACH,CAAC;IAEO,eAAe,CAAC,QAAgB,EAAE,KAAY;QACpD,MAAM,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAA;QACpD,OAAO,IAAI,CAAA;;yBAEU,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;;uBAErC,aAAa,CAAC,QAAQ,CAAC,IAAI,sBAAsB;;gCAExC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;gCAC7B,KAAK,CAAC,MAAM;oCACR,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;;UAEtD,SAAS;YACT,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,IAAI,CAAA;;kBAEE,KAAK,CAAC,GAAG,CACT,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;+BAED,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;8BAC3B,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI;;;;oCAIpE,MAAM,CAAC,IAAI;oDACK,MAAM,CAAC,SAAS;;0BAE1C,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,qBAAqB,MAAM,CAAC,WAAW,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;mBAIpF,CACF;;aAEJ;;KAER,CAAA;IACH,CAAC;IAED;;;OAGG;IACK,eAAe,CAAC,MAA6B;;QACnD,MAAM,OAAO,GAAsB,EAAE,CAAA;QACrC,MAAM,IAAI,GAAG,IAAI,GAAG,EAAU,CAAA;QAE9B,KAAK,MAAM,GAAG,IAAI,cAAc,EAAE,CAAC;YACjC,IAAI,MAAA,MAAM,CAAC,GAAG,CAAC,0CAAE,MAAM,EAAE,CAAC;gBACxB,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;gBAChC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;YACf,CAAC;QACH,CAAC;QACD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YAClD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;gBAAE,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAA;QAChD,CAAC;QACD,OAAO,OAAO,CAAA;IAChB,CAAC;IAED;;;OAGG;IACK,eAAe;;QACrB,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAA;QACrD,MAAM,MAAM,GAA0B,EAAE,CAAA;QAExC,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,OAAO,IAAI,EAAE,EAAE,CAAC;YACxC,IAAI,OAAO,EAAE,CAAC;gBACZ,MAAM,SAAS,GAAG,MAAA,MAAA,MAAM,CAAC,IAAI,0CAAE,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC,mCAAI,KAAK,CAAA;gBACvE,MAAM,SAAS,GAAG,MAAA,MAAA,MAAM,CAAC,WAAW,0CAAE,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC,mCAAI,KAAK,CAAA;gBAC9E,MAAM,QAAQ,GAAG,MAAA,MAAA,MAAM,CAAC,SAAS,0CAAE,WAAW,GAAG,QAAQ,CAAC,OAAO,CAAC,mCAAI,KAAK,CAAA;gBAC3E,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,IAAI,CAAC,QAAQ;oBAAE,SAAQ;YACrD,CAAC;YACD,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,IAAI,QAAQ,CAC1C;YAAA,CAAC,MAAM,CAAC,QAAQ,MAAf,MAAM,CAAC,QAAQ,IAAM,EAAE,EAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QACzC,CAAC;QAED,OAAO,MAAM,CAAA;IACf,CAAC;IAEO,OAAO,CAAC,MAAW;QACzB,QAAQ,CAAC,IAAI,GAAG,iBAAiB,MAAM,CAAC,SAAS,gBAAgB,kBAAkB,CAAC,IAAI,CAAC,UAAU,IAAI,GAAG,CAAC,EAAE,CAAA;IAC/G,CAAC;IAEO,cAAc,CAAC,QAAgB;QACrC,IAAI,CAAC,iBAAiB,mCACjB,IAAI,CAAC,iBAAiB,KACzB,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,GAC9C,CAAA;IACH,CAAC;IAEO,cAAc,CAAC,QAAgB;QACrC,OAAO,OAAO,CAAC,CAAC,CAAC,qBAAqB,QAAQ,EAAE,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,CAAA;IAC/E,CAAC;IAED,OAAO,CAAC,OAA6B;;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,OAAO,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,KAAI,EAAE,CAAA;YACvC,IAAI,CAAC,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,CAAA;YAC3B,IAAI,CAAC,WAAW,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,WAAW,CAAA;YACzC,IAAI,CAAC,UAAU,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAA;YAEvC,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;IACH,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,MAAM,QAAQ,GAA2B,QAAQ,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAA;YAC/F,MAAM,SAAS,GAA2B,QAAQ,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAA;YACjG,MAAM,eAAe,GAA2B,QAAQ,CAAC,aAAa,CAAC,sCAAsC,CAAC,CAAA;YAE9G,IAAI,CAAC,gBAAgB,GAAG;gBACtB,IAAI,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;gBACpB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB;gBACvD,WAAW,EAAE,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAsB;aAChF,CAAA;QACH,CAAC;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAA;IAC9B,CAAC;;AAngBM,kBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiTF;IACD,eAAe;CAChB,AArTY,CAqTZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCAAU;AACV;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;4CAAoB;AACnB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;gDAAuB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yCAAU;AAE5B;IAAR,KAAK,EAAE;;gDAAyB;AACxB;IAAR,KAAK,EAAE;;sDAAgD;AA9T7C,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAqgBvB","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\n\nimport '@operato/lottie-player'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isSafari } from '@operato/utils'\n\nimport { AUTH_STYLE_SIGN } from '@things-factory/auth-ui/dist-client/auth-style-sign.js'\n\nconst CATEGORY_ICON: Record<string, string> = {\n  domain: 'business',\n  project: 'assignment',\n  company: 'corporate_fare',\n  equipment: 'precision_manufacturing'\n}\n\nconst CATEGORY_FALLBACK_ICON = 'folder'\n\n/** 카테고리 표시 순서. 여기 없는 카테고리는 뒤에 insertion 순으로 붙는다. */\nconst CATEGORY_ORDER = ['domain', 'project', 'company', 'equipment']\n\n@customElement('auth-checkin')\nexport class AuthCheckIn extends localize(i18next)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        margin: auto;\n        background: linear-gradient(\n          135deg,\n          var(--md-sys-color-primary) 0%,\n          color-mix(in srgb, var(--md-sys-color-primary) 70%, #000) 100%\n        );\n        color: var(--md-sys-color-on-primary);\n        height: 100vh;\n        height: 100dvh;\n      }\n\n      .content {\n        flex: 1;\n        overflow: auto;\n      }\n\n      h3 {\n        margin: 6px 0 14px;\n        font-size: 13px;\n        font-weight: 500;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        opacity: 0.75;\n      }\n\n      /* ─── Search ─── */\n      .search-box {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        margin: 0 0 20px;\n        padding: 12px 18px;\n        background: rgba(255, 255, 255, 0.08);\n        color: var(--md-sys-color-on-primary);\n        border-radius: 14px;\n        border: 1px solid rgba(255, 255, 255, 0.12);\n        backdrop-filter: blur(10px);\n        -webkit-backdrop-filter: blur(10px);\n        transition: all 0.18s ease;\n      }\n\n      .search-box:focus-within {\n        background: rgba(255, 255, 255, 0.14);\n        border-color: rgba(255, 255, 255, 0.3);\n        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);\n      }\n\n      .search-box md-icon {\n        --md-icon-size: 20px;\n        opacity: 0.8;\n      }\n\n      .search-box input {\n        flex: 1;\n        border: none;\n        outline: none;\n        background: transparent;\n        font-size: 15px;\n        color: var(--md-sys-color-on-primary);\n      }\n\n      .search-box input::placeholder {\n        color: rgba(255, 255, 255, 0.5);\n      }\n\n      /* ─── Group of categories ─── */\n      .domain-groups {\n        display: flex;\n        flex-direction: column;\n        gap: 14px;\n      }\n\n      /* ─── Category section ─── */\n      section.category {\n        background: rgba(255, 255, 255, 0.96);\n        color: #1d2125;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow:\n          0 10px 30px -8px rgba(0, 0, 0, 0.25),\n          0 2px 6px -2px rgba(0, 0, 0, 0.15);\n        animation: slide-up 0.22s ease both;\n      }\n\n      @keyframes slide-up {\n        from {\n          opacity: 0;\n          transform: translateY(6px);\n        }\n        to {\n          opacity: 1;\n          transform: translateY(0);\n        }\n      }\n\n      section.category > header {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        padding: 12px 18px;\n        cursor: pointer;\n        user-select: none;\n        transition: background 0.15s ease;\n      }\n\n      section.category > header:hover {\n        background: rgba(0, 0, 0, 0.03);\n      }\n\n      section.category > header .category-icon {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 32px;\n        height: 32px;\n        border-radius: 10px;\n        background: color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);\n        color: var(--md-sys-color-primary);\n        flex-shrink: 0;\n      }\n\n      section.category > header .category-icon md-icon {\n        --md-icon-size: 18px;\n      }\n\n      section.category > header .label {\n        font-weight: 600;\n        font-size: 14px;\n        flex: 1;\n        text-align: left;\n        letter-spacing: 0.01em;\n      }\n\n      section.category > header .count {\n        background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);\n        color: var(--md-sys-color-primary);\n        border-radius: 999px;\n        padding: 2px 10px;\n        font-size: 12px;\n        font-weight: 600;\n        min-width: 26px;\n        text-align: center;\n      }\n\n      section.category > header .chevron {\n        --md-icon-size: 20px;\n        opacity: 0.5;\n        transition: transform 0.18s ease;\n      }\n\n      section.category > header .chevron.collapsed {\n        transform: rotate(-90deg);\n      }\n\n      /* ─── Domain list ─── */\n      ul.domains {\n        margin: 0;\n        padding: 4px 0 8px;\n        list-style: none;\n      }\n\n      ul.domains li {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        margin: 0 8px;\n        padding: 8px 14px;\n        cursor: pointer;\n        text-align: left;\n        border-radius: 10px;\n        transition: all 0.15s ease;\n        position: relative;\n      }\n\n      ul.domains li::before {\n        content: '';\n        position: absolute;\n        left: -8px;\n        right: -8px;\n        top: 0;\n        bottom: 0;\n        border-radius: 10px;\n        background: linear-gradient(\n          90deg,\n          color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent),\n          transparent\n        );\n        opacity: 0;\n        transition: opacity 0.15s ease;\n        pointer-events: none;\n      }\n\n      ul.domains li:hover {\n        transform: translateX(3px);\n      }\n\n      ul.domains li:hover::before {\n        opacity: 1;\n      }\n\n      ul.domains li:hover md-icon.arrow {\n        opacity: 1;\n        transform: translateX(3px);\n        color: var(--md-sys-color-primary);\n      }\n\n      ul.domains li .info {\n        flex: 1;\n        min-width: 0;\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n        z-index: 1;\n      }\n\n      ul.domains li .primary {\n        display: flex;\n        align-items: baseline;\n        justify-content: space-between;\n        gap: 12px;\n        min-width: 0;\n      }\n\n      ul.domains li .primary strong {\n        font-size: 15px;\n        font-weight: 600;\n        color: #1d2125;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        min-width: 0;\n      }\n\n      ul.domains li .subdomain {\n        font-size: 11px;\n        color: var(--md-sys-color-primary);\n        font-family: var(--theme-font-mono, ui-monospace, monospace);\n        font-weight: 600;\n        flex-shrink: 0;\n      }\n\n      ul.domains li .desc {\n        font-size: 12px;\n        color: #5a6168;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      ul.domains li md-icon.arrow {\n        opacity: 0.3;\n        --md-icon-size: 22px;\n        transition: all 0.18s ease;\n        z-index: 1;\n        flex-shrink: 0;\n      }\n\n      /* ─── Empty state ─── */\n      .empty-search {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        margin: 24px 0;\n        padding: 32px 16px;\n        background: rgba(255, 255, 255, 0.05);\n        border-radius: 14px;\n        border: 1px dashed rgba(255, 255, 255, 0.18);\n        opacity: 0.85;\n      }\n\n      .empty-search md-icon {\n        --md-icon-size: 32px;\n        opacity: 0.5;\n      }\n\n      .empty-search .text {\n        font-size: 14px;\n        opacity: 0.8;\n      }\n\n      /* ─── Footer button ─── */\n      .button-container {\n        text-align: center;\n        margin-top: 24px;\n      }\n\n      .button-container md-elevated-button {\n        margin-left: var(--spacing-small);\n        --md-elevated-button-container-color: rgba(255, 255, 255, 0.12);\n        --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);\n        --md-elevated-button-container-shadow-color: transparent;\n      }\n\n      @media (max-width: 450px) {\n        .button-container md-elevated-button {\n          width: 100%;\n          margin: var(--spacing-medium) 0 0 0;\n        }\n      }\n    `,\n    AUTH_STYLE_SIGN\n  ]\n\n  @property({ type: Object }) data: any\n  @property({ type: Array }) domains: any[] = []\n  @property({ type: Array }) domainTypes?: string[]\n  @property({ type: Object }) user: any\n\n  @state() searchValue: string = ''\n  @state() collapsedSections: Record<string, boolean> = {}\n\n  private _applicationMeta?: { icon?: string; title?: string; description?: string }\n  private redirectTo?: string\n\n  render() {\n    const { icon, title, description } = this.applicationMeta\n    const groups = this._groupAndFilter()\n    const totalShown = Object.values(groups).reduce((sum, g) => sum + g.length, 0)\n    const hasAnyDomain = (this.domains?.length || 0) > 0\n    const groupEntries = this._orderedEntries(groups)\n\n    return html`\n      <div class=\"content md-typescale-display-medium\">\n        <div class=\"wrap\">\n          <div class=\"auth-brand\">\n            <img src=${icon || ''} />\n            <strong class=\"name\">${title}</strong>\n            <span class=\"welcome-msg\">${description}</span>\n          </div>\n\n          <h3>${i18next.t('label.select_domain')}</h3>\n\n          ${hasAnyDomain\n            ? html`\n                <div class=\"search-box\">\n                  <md-icon>search</md-icon>\n                  <input\n                    type=\"text\"\n                    placeholder=${i18next.t('label.search_domain')}\n                    .value=${this.searchValue}\n                    @input=${(e: InputEvent) => (this.searchValue = (e.target as HTMLInputElement).value)}\n                  />\n                </div>\n              `\n            : ''}\n\n          ${!hasAnyDomain\n            ? html`\n                <div class=\"empty-search\">\n                  <md-icon>inbox</md-icon>\n                  <div class=\"text\">${i18next.t('text.no domain available')}</div>\n                </div>\n              `\n            : totalShown === 0\n              ? html`\n                  <div class=\"empty-search\">\n                    <md-icon>search_off</md-icon>\n                    <div class=\"text\">\n                      ${i18next.t('text.no_matching_domain', { defaultValue: '검색 결과가 없습니다.' })}\n                    </div>\n                  </div>\n                `\n              : html`\n                  <div class=\"domain-groups\">\n                    ${groupEntries.map(([category, items]) => this._renderCategory(category, items))}\n                  </div>\n                `}\n\n          <div class=\"button-container\">\n            <md-elevated-button @click=${() => (location.pathname = '/auth/signout')}\n              >${String(i18next.t('button.logout'))}</md-elevated-button\n            >\n          </div>\n\n          ${isSafari()\n            ? html``\n            : html`\n                <div class=\"lottie-container\">\n                  <lottie-player autoplay loop src=\"../../assets/images/background-animation.json\"></lottie-player>\n                </div>\n              `}\n        </div>\n      </div>\n    `\n  }\n\n  private _renderCategory(category: string, items: any[]) {\n    const collapsed = !!this.collapsedSections[category]\n    return html`\n      <section class=\"category\">\n        <header @click=${() => this._toggleSection(category)}>\n          <span class=\"category-icon\">\n            <md-icon>${CATEGORY_ICON[category] || CATEGORY_FALLBACK_ICON}</md-icon>\n          </span>\n          <span class=\"label\">${this._categoryLabel(category)}</span>\n          <span class=\"count\">${items.length}</span>\n          <md-icon class=\"chevron ${collapsed ? 'collapsed' : ''}\">expand_more</md-icon>\n        </header>\n        ${collapsed\n          ? ''\n          : html`\n              <ul class=\"domains\">\n                ${items.map(\n                  domain => html`\n                    <li\n                      @click=${() => this._select(domain)}\n                      title=${domain.description ? `${domain.name}\\n${domain.description}` : domain.name}\n                    >\n                      <div class=\"info\">\n                        <div class=\"primary\">\n                          <strong>${domain.name}</strong>\n                          <span class=\"subdomain\">${domain.subdomain}</span>\n                        </div>\n                        ${domain.description ? html`<div class=\"desc\">${domain.description}</div>` : ''}\n                      </div>\n                      <md-icon class=\"arrow\">arrow_forward</md-icon>\n                    </li>\n                  `\n                )}\n              </ul>\n            `}\n      </section>\n    `\n  }\n\n  /**\n   * groups 를 CATEGORY_ORDER 에 따라 정렬한 [category, items][] 로 반환.\n   * 정의된 순서대로 먼저 나열, 정의 안 된 카테고리는 마지막에 insertion 순으로 붙는다.\n   */\n  private _orderedEntries(groups: Record<string, any[]>): [string, any[]][] {\n    const ordered: [string, any[]][] = []\n    const seen = new Set<string>()\n\n    for (const cat of CATEGORY_ORDER) {\n      if (groups[cat]?.length) {\n        ordered.push([cat, groups[cat]])\n        seen.add(cat)\n      }\n    }\n    for (const [cat, items] of Object.entries(groups)) {\n      if (!seen.has(cat)) ordered.push([cat, items])\n    }\n    return ordered\n  }\n\n  /**\n   * 도메인들을 extType 별로 그룹핑하고 검색어로 필터링한다.\n   * 매치 0건인 카테고리는 결과에서 자동 제외 — 빈 섹션은 화면에 노출되지 않는다.\n   */\n  private _groupAndFilter(): Record<string, any[]> {\n    const keyword = this.searchValue.toLowerCase().trim()\n    const groups: Record<string, any[]> = {}\n\n    for (const domain of this.domains || []) {\n      if (keyword) {\n        const nameMatch = domain.name?.toLowerCase().includes(keyword) ?? false\n        const descMatch = domain.description?.toLowerCase().includes(keyword) ?? false\n        const subMatch = domain.subdomain?.toLowerCase().includes(keyword) ?? false\n        if (!nameMatch && !descMatch && !subMatch) continue\n      }\n      const category = domain.extType || 'domain'\n      ;(groups[category] ||= []).push(domain)\n    }\n\n    return groups\n  }\n\n  private _select(domain: any) {\n    location.href = `/auth/checkin/${domain.subdomain}?redirect_to=${encodeURIComponent(this.redirectTo || '/')}`\n  }\n\n  private _toggleSection(category: string) {\n    this.collapsedSections = {\n      ...this.collapsedSections,\n      [category]: !this.collapsedSections[category]\n    }\n  }\n\n  private _categoryLabel(category: string): string {\n    return i18next.t(`label.domain_type.${category}`, { defaultValue: category })\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has('data')) {\n      this.domains = this.data?.domains || []\n      this.user = this.data?.user\n      this.domainTypes = this.data?.domainTypes\n      this.redirectTo = this.data?.redirectTo\n\n      this.requestUpdate()\n    }\n  }\n\n  get applicationMeta() {\n    if (!this._applicationMeta) {\n      const iconLink: HTMLLinkElement | null = document.querySelector('link[rel=\"application-icon\"]')\n      const titleMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-name\"]')\n      const descriptionMeta: HTMLMetaElement | null = document.querySelector('meta[name=\"application-description\"]')\n\n      this._applicationMeta = {\n        icon: iconLink?.href,\n        title: titleMeta ? titleMeta.content : 'Things Factory',\n        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'\n      }\n    }\n\n    return this._applicationMeta\n  }\n}\n"]}

package/dist-client/google-map/common-google-map.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+declare global {
+    interface Window {
+        google: any;
+        markerClusterer?: any;
+    }
+}
+export declare class CommonGoogleMap extends LitElement {
+    static styles: import("lit").CSSResult[];
+    center: any;
+    zoom: any;
+    locations: any[];
+    focused: any;
+    polygons: any;
+    polylines: any;
+    markers: any;
+    boundCoords: any;
+    controls: any;
+    clusterZoom: number;
+    map: any;
+    defaultCenter: any;
+    private _infoWindow;
+    private _markerClusterer;
+    private _buildMarkersTimer;
+    get anchor(): Element | null;
+    readyMap(): Promise<void>;
+    buildMarkers(locations?: any[]): Promise<void>;
+    get infoWindow(): any;
+    setFocus(focus: any, icon: any): void;
+    resetFocus(focus: any, icon: any): void;
+    changeFocus(after: any, before: any): Promise<void>;
+    updated(changes: any): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    resetBounds(): void;
+}