@api-client/ui 0.5.58 → 0.6.0

package/build/src/modeling/internals/ApiUpdateActionEditor.js

@@ -0,0 +1,301 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ApiEditor } from './ApiEditor.js';
+import { apiActionKindToIcon } from '../lib/ui_mapping.js';
+import { renderHelp } from '../../help/render.js';
+let ApiUpdateActionEditor = (() => {
+    let _classSuper = ApiEditor;
+    let _exposed_decorators;
+    let _exposed_initializers = [];
+    let _exposed_extraInitializers = [];
+    let _entity_decorators;
+    let _entity_initializers = [];
+    let _entity_extraInitializers = [];
+    let _action_decorators;
+    let _action_initializers = [];
+    let _action_extraInitializers = [];
+    let _showCloseButton_decorators;
+    let _showCloseButton_initializers = [];
+    let _showCloseButton_extraInitializers = [];
+    let _activeTab_decorators;
+    let _activeTab_initializers = [];
+    let _activeTab_extraInitializers = [];
+    return class ApiUpdateActionEditor extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _exposed_decorators = [state()];
+            _entity_decorators = [state()];
+            _action_decorators = [state()];
+            _showCloseButton_decorators = [property({ type: Boolean })];
+            _activeTab_decorators = [state()];
+            __esDecorate(this, null, _exposed_decorators, { kind: "accessor", name: "exposed", static: false, private: false, access: { has: obj => "exposed" in obj, get: obj => obj.exposed, set: (obj, value) => { obj.exposed = value; } }, metadata: _metadata }, _exposed_initializers, _exposed_extraInitializers);
+            __esDecorate(this, null, _entity_decorators, { kind: "accessor", name: "entity", static: false, private: false, access: { has: obj => "entity" in obj, get: obj => obj.entity, set: (obj, value) => { obj.entity = value; } }, metadata: _metadata }, _entity_initializers, _entity_extraInitializers);
+            __esDecorate(this, null, _action_decorators, { kind: "accessor", name: "action", static: false, private: false, access: { has: obj => "action" in obj, get: obj => obj.action, set: (obj, value) => { obj.action = value; } }, metadata: _metadata }, _action_initializers, _action_extraInitializers);
+            __esDecorate(this, null, _showCloseButton_decorators, { kind: "accessor", name: "showCloseButton", static: false, private: false, access: { has: obj => "showCloseButton" in obj, get: obj => obj.showCloseButton, set: (obj, value) => { obj.showCloseButton = value; } }, metadata: _metadata }, _showCloseButton_initializers, _showCloseButton_extraInitializers);
+            __esDecorate(this, null, _activeTab_decorators, { kind: "accessor", name: "activeTab", static: false, private: false, access: { has: obj => "activeTab" in obj, get: obj => obj.activeTab, set: (obj, value) => { obj.activeTab = value; } }, metadata: _metadata }, _activeTab_initializers, _activeTab_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #exposed_accessor_storage = __runInitializers(this, _exposed_initializers, void 0);
+        /**
+         * Computed exposed entity being edited.
+         */
+        get exposed() { return this.#exposed_accessor_storage; }
+        set exposed(value) { this.#exposed_accessor_storage = value; }
+        #entity_accessor_storage = (__runInitializers(this, _exposed_extraInitializers), __runInitializers(this, _entity_initializers, void 0));
+        /**
+         * Computed domain entity that corresponds to the exposed entity being edited.
+         */
+        get entity() { return this.#entity_accessor_storage; }
+        set entity(value) { this.#entity_accessor_storage = value; }
+        #action_accessor_storage = (__runInitializers(this, _entity_extraInitializers), __runInitializers(this, _action_initializers, void 0));
+        /**
+         * Computed create action definition being edited.
+         */
+        get action() { return this.#action_accessor_storage; }
+        set action(value) { this.#action_accessor_storage = value; }
+        #showCloseButton_accessor_storage = (__runInitializers(this, _action_extraInitializers), __runInitializers(this, _showCloseButton_initializers, false
+        /**
+         * The currently active tab index.
+         */
+        ));
+        /**
+         * When true, shows a close button in the editor header.
+         * @attribute
+         */
+        get showCloseButton() { return this.#showCloseButton_accessor_storage; }
+        set showCloseButton(value) { this.#showCloseButton_accessor_storage = value; }
+        #activeTab_accessor_storage = (__runInitializers(this, _showCloseButton_extraInitializers), __runInitializers(this, _activeTab_initializers, 0));
+        /**
+         * The currently active tab index.
+         */
+        get activeTab() { return this.#activeTab_accessor_storage; }
+        set activeTab(value) { this.#activeTab_accessor_storage = value; }
+        setupModel(model, domainKey) {
+            this.exposed = undefined;
+            this.entity = undefined;
+            this.action = undefined;
+            if (!model || !domainKey) {
+                return;
+            }
+            const exposed = model.exposes.find((exposed) => exposed.key === domainKey);
+            this.exposed = exposed;
+            if (!exposed) {
+                return;
+            }
+            const domain = model.domain;
+            if (!domain) {
+                return;
+            }
+            const entity = domain.findEntity(exposed.entity.key, exposed.entity.domain);
+            if (!entity) {
+                return;
+            }
+            this.entity = entity;
+            const action = exposed.actions.find((action) => action.kind === 'update');
+            this.action = action;
+        }
+        handleCloseButtonClick() {
+            this.dispatchEvent(new Event('close'));
+        }
+        /**
+         * Handles tab change events.
+         */
+        handleTabChange(e) {
+            this.activeTab = e.detail.index;
+        }
+        handleConfigurationChange() {
+            this.notifyChange();
+        }
+        handleMethodChange(e) {
+            const checkbox = e.target;
+            const { value = '', checked = false } = checkbox;
+            if (!['PUT', 'PATCH'].includes(value)) {
+                return;
+            }
+            this.toggleMethod(value, checked);
+        }
+        toggleMethod(method, enabled) {
+            if (!this.action) {
+                throw new Error('No action is set.');
+            }
+            const methods = new Set(this.action.allowedMethods);
+            if (enabled) {
+                methods.add(method);
+            }
+            else {
+                methods.delete(method);
+            }
+            this.action.allowedMethods = Array.from(methods);
+            this.notifyChange();
+            this.requestUpdate();
+        }
+        render() {
+            if (!this.exposed || !this.entity || !this.action) {
+                return nothing;
+            }
+            return html `<div class="container">${this.renderHeader()} ${this.renderTabs()} ${this.renderTabContent()}</div>`;
+        }
+        /**
+         * Renders a template of the editor header.
+         */
+        renderHeader() {
+            const { entity } = this;
+            let label = 'Update action';
+            if (entity) {
+                label = entity.info.getLabel() + ': Update action';
+            }
+            return html `<div class="intro">
+      <div class="header">
+        <ui-icon>${apiActionKindToIcon('update')}</ui-icon>
+        <span class="headline-medium">${label}</span>
+        ${this.renderCloseButton()}
+      </div>
+      <div class="body-medium description">Update action allows updating a resource.</div>
+    </div>`;
+        }
+        /**
+         * Renders the tabs navigation.
+         */
+        renderTabs() {
+            return html `<ui-tabs
+      class="tabs"
+      .activeTabIndex="${this.activeTab}"
+      @change="${this.handleTabChange}"
+      priority="secondary"
+    >
+      <ui-tab>Configuration</ui-tab>
+      <ui-tab>Access</ui-tab>
+      <ui-tab>Limits</ui-tab>
+    </ui-tabs>`;
+        }
+        /**
+         * Renders the content for the currently active tab.
+         */
+        renderTabContent() {
+            if (!this.action) {
+                return nothing;
+            }
+            switch (this.activeTab) {
+                case 0:
+                    return this.renderConfigurationTab();
+                case 1:
+                    return this.renderAccessTab();
+                case 2:
+                    return this.renderLimitsTab();
+                default:
+                    return nothing;
+            }
+        }
+        /**
+         * Renders the Configuration tab content.
+         */
+        renderConfigurationTab() {
+            if (!this.action) {
+                return nothing;
+            }
+            return html `<div class="configuration-tab">${this.renderUpdateConfiguration(this.action)}</div>`;
+        }
+        /**
+         * Renders the Access tab content.
+         */
+        renderAccessTab() {
+            return html `<div class="config-section">
+      <api-modeling-access-configuration
+        .model="${this.model}"
+        domainKey="${this.exposed?.key || ''}"
+        operation="update"
+        target="action"
+        class="access-configuration"
+        @change="${this.handleConfigurationChange}"
+      ></api-modeling-access-configuration>
+    </div>`;
+        }
+        /**
+         * Renders the Limits tab content.
+         */
+        renderLimitsTab() {
+            return html `<div class="config-section">
+      <api-modeling-rate-limiting
+        .model="${this.model}"
+        domainKey="${this.exposed?.key || ''}"
+        operation="update"
+        target="action"
+        class="rate-limiting-configuration"
+        @change="${this.handleConfigurationChange}"
+      ></api-modeling-rate-limiting>
+    </div>`;
+        }
+        /**
+         * Renders the close button if the `showCloseButton` flag is set.
+         */
+        renderCloseButton() {
+            if (!this.showCloseButton) {
+                return nothing;
+            }
+            return html `<ui-icon-button
+      color="outlined"
+      class="close-button"
+      aria-label="Close editor"
+      @click="${this.handleCloseButtonClick}"
+    >
+      <ui-icon icon="close"></ui-icon>
+    </ui-icon-button>`;
+        }
+        renderUpdateConfiguration(action) {
+            const hasPut = action.allowedMethods.includes('PUT');
+            const hasPatch = action.allowedMethods.includes('PATCH');
+            return html `<div class="update-configuration config-section">
+      <div class="config-intro">
+        <div class="section-header">
+          <span class="title-large">Update method</span>
+          ${renderHelp('modeling', 'api:update-method')}
+        </div>
+        <div class="section-description body-medium">Choose the method for updating the resource.</div>
+      </div>
+
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="method-put"
+            name="method"
+            value="PUT"
+            .checked="${hasPut}"
+            @change="${this.handleMethodChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="method-put" class="body-medium">Replace (PUT)</label>
+            <span class="body-small meta">Replaces the entire resource with the provided data.</span>
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'api:update-method:put')}
+      </div>
+
+      <div class="row">
+        <div class="input checkbox metadata">
+          <ui-checkbox
+            id="method-patch"
+            name="method"
+            value="PATCH"
+            .checked="${hasPatch}"
+            @change="${this.handleMethodChange}"
+          ></ui-checkbox>
+          <div class="label">
+            <label for="method-patch" class="body-medium">Partial (PATCH)</label>
+            <span class="body-small meta"
+              >Applies a partial update to the resource, allowing for specific fields to be modified.</span
+            >
+          </div>
+        </div>
+        ${renderHelp('taxonomy', 'api:update-method:patch')}
+      </div>
+    </div>`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _activeTab_extraInitializers);
+        }
+    };
+})();
+export default ApiUpdateActionEditor;
+//# sourceMappingURL=ApiUpdateActionEditor.js.map

package/build/src/modeling/internals/ApiUpdateActionEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiUpdateActionEditor.js","sourceRoot":"","sources":["../../../../src/modeling/internals/ApiUpdateActionEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, type TemplateResult, nothing } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ApiEditor } from './ApiEditor.js'\nimport { apiActionKindToIcon } from '../lib/ui_mapping.js'\nimport type { UpdateAction, ApiModel, DomainEntity, ExposedEntity } from '@api-client/core/browser.js'\nimport type { TabSelectionDetail } from '../../md/tabs/ui-tabs.js'\nimport type { UiCheckboxElement } from '../../md/checkbox/ui-checkbox.js'\nimport { renderHelp } from '../../help/render.js'\n\nexport default class ApiUpdateActionEditor extends ApiEditor {\n  /**\n   * Computed exposed entity being edited.\n   */\n  @state() accessor exposed: ExposedEntity | undefined\n  /**\n   * Computed domain entity that corresponds to the exposed entity being edited.\n   */\n  @state() accessor entity: DomainEntity | undefined\n  /**\n   * Computed create action definition being edited.\n   */\n  @state() accessor action: UpdateAction | undefined\n  /**\n   * When true, shows a close button in the editor header.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor showCloseButton = false\n  /**\n   * The currently active tab index.\n   */\n  @state() accessor activeTab = 0\n\n  protected override setupModel(model?: ApiModel, domainKey?: string): void | Promise<void> {\n    this.exposed = undefined\n    this.entity = undefined\n    this.action = undefined\n    if (!model || !domainKey) {\n      return\n    }\n    const exposed = model.exposes.find((exposed) => exposed.key === domainKey)\n    this.exposed = exposed\n    if (!exposed) {\n      return\n    }\n    const domain = model.domain\n    if (!domain) {\n      return\n    }\n    const entity = domain.findEntity(exposed.entity.key, exposed.entity.domain)\n    if (!entity) {\n      return\n    }\n    this.entity = entity\n    const action = exposed.actions.find((action) => action.kind === 'update')\n    this.action = action\n  }\n\n  protected handleCloseButtonClick(): void {\n    this.dispatchEvent(new Event('close'))\n  }\n\n  /**\n   * Handles tab change events.\n   */\n  protected handleTabChange(e: CustomEvent<TabSelectionDetail>): void {\n    this.activeTab = e.detail.index\n  }\n\n  protected handleConfigurationChange(): void {\n    this.notifyChange()\n  }\n\n  protected handleMethodChange(e: Event): void {\n    const checkbox = e.target as UiCheckboxElement\n    const { value = '', checked = false } = checkbox\n    if (!['PUT', 'PATCH'].includes(value)) {\n      return\n    }\n    this.toggleMethod(value as 'PUT' | 'PATCH', checked)\n  }\n\n  toggleMethod(method: 'PUT' | 'PATCH', enabled: boolean): void {\n    if (!this.action) {\n      throw new Error('No action is set.')\n    }\n    const methods = new Set(this.action.allowedMethods)\n    if (enabled) {\n      methods.add(method)\n    } else {\n      methods.delete(method)\n    }\n    this.action.allowedMethods = Array.from(methods)\n    this.notifyChange()\n    this.requestUpdate()\n  }\n\n  protected override render(): TemplateResult | typeof nothing {\n    if (!this.exposed || !this.entity || !this.action) {\n      return nothing\n    }\n    return html`<div class=\"container\">${this.renderHeader()} ${this.renderTabs()} ${this.renderTabContent()}</div>`\n  }\n\n  /**\n   * Renders a template of the editor header.\n   */\n  protected renderHeader(): TemplateResult {\n    const { entity } = this\n    let label = 'Update action'\n    if (entity) {\n      label = entity.info.getLabel() + ': Update action'\n    }\n    return html`<div class=\"intro\">\n      <div class=\"header\">\n        <ui-icon>${apiActionKindToIcon('update')}</ui-icon>\n        <span class=\"headline-medium\">${label}</span>\n        ${this.renderCloseButton()}\n      </div>\n      <div class=\"body-medium description\">Update action allows updating a resource.</div>\n    </div>`\n  }\n\n  /**\n   * Renders the tabs navigation.\n   */\n  protected renderTabs(): TemplateResult {\n    return html`<ui-tabs\n      class=\"tabs\"\n      .activeTabIndex=\"${this.activeTab}\"\n      @change=\"${this.handleTabChange}\"\n      priority=\"secondary\"\n    >\n      <ui-tab>Configuration</ui-tab>\n      <ui-tab>Access</ui-tab>\n      <ui-tab>Limits</ui-tab>\n    </ui-tabs>`\n  }\n\n  /**\n   * Renders the content for the currently active tab.\n   */\n  protected renderTabContent(): TemplateResult | typeof nothing {\n    if (!this.action) {\n      return nothing\n    }\n    switch (this.activeTab) {\n      case 0:\n        return this.renderConfigurationTab()\n      case 1:\n        return this.renderAccessTab()\n      case 2:\n        return this.renderLimitsTab()\n      default:\n        return nothing\n    }\n  }\n\n  /**\n   * Renders the Configuration tab content.\n   */\n  protected renderConfigurationTab(): TemplateResult | typeof nothing {\n    if (!this.action) {\n      return nothing\n    }\n    return html`<div class=\"configuration-tab\">${this.renderUpdateConfiguration(this.action)}</div>`\n  }\n\n  /**\n   * Renders the Access tab content.\n   */\n  protected renderAccessTab(): TemplateResult {\n    return html`<div class=\"config-section\">\n      <api-modeling-access-configuration\n        .model=\"${this.model}\"\n        domainKey=\"${this.exposed?.key || ''}\"\n        operation=\"update\"\n        target=\"action\"\n        class=\"access-configuration\"\n        @change=\"${this.handleConfigurationChange}\"\n      ></api-modeling-access-configuration>\n    </div>`\n  }\n\n  /**\n   * Renders the Limits tab content.\n   */\n  protected renderLimitsTab(): TemplateResult {\n    return html`<div class=\"config-section\">\n      <api-modeling-rate-limiting\n        .model=\"${this.model}\"\n        domainKey=\"${this.exposed?.key || ''}\"\n        operation=\"update\"\n        target=\"action\"\n        class=\"rate-limiting-configuration\"\n        @change=\"${this.handleConfigurationChange}\"\n      ></api-modeling-rate-limiting>\n    </div>`\n  }\n\n  /**\n   * Renders the close button if the `showCloseButton` flag is set.\n   */\n  protected renderCloseButton(): TemplateResult | typeof nothing {\n    if (!this.showCloseButton) {\n      return nothing\n    }\n    return html`<ui-icon-button\n      color=\"outlined\"\n      class=\"close-button\"\n      aria-label=\"Close editor\"\n      @click=\"${this.handleCloseButtonClick}\"\n    >\n      <ui-icon icon=\"close\"></ui-icon>\n    </ui-icon-button>`\n  }\n\n  protected renderUpdateConfiguration(action: UpdateAction): TemplateResult {\n    const hasPut = action.allowedMethods.includes('PUT')\n    const hasPatch = action.allowedMethods.includes('PATCH')\n    return html`<div class=\"update-configuration config-section\">\n      <div class=\"config-intro\">\n        <div class=\"section-header\">\n          <span class=\"title-large\">Update method</span>\n          ${renderHelp('modeling', 'api:update-method')}\n        </div>\n        <div class=\"section-description body-medium\">Choose the method for updating the resource.</div>\n      </div>\n\n      <div class=\"row\">\n        <div class=\"input checkbox metadata\">\n          <ui-checkbox\n            id=\"method-put\"\n            name=\"method\"\n            value=\"PUT\"\n            .checked=\"${hasPut}\"\n            @change=\"${this.handleMethodChange}\"\n          ></ui-checkbox>\n          <div class=\"label\">\n            <label for=\"method-put\" class=\"body-medium\">Replace (PUT)</label>\n            <span class=\"body-small meta\">Replaces the entire resource with the provided data.</span>\n          </div>\n        </div>\n        ${renderHelp('taxonomy', 'api:update-method:put')}\n      </div>\n\n      <div class=\"row\">\n        <div class=\"input checkbox metadata\">\n          <ui-checkbox\n            id=\"method-patch\"\n            name=\"method\"\n            value=\"PATCH\"\n            .checked=\"${hasPatch}\"\n            @change=\"${this.handleMethodChange}\"\n          ></ui-checkbox>\n          <div class=\"label\">\n            <label for=\"method-patch\" class=\"body-medium\">Partial (PATCH)</label>\n            <span class=\"body-small meta\"\n              >Applies a partial update to the resource, allowing for specific fields to be modified.</span\n            >\n          </div>\n        </div>\n        ${renderHelp('taxonomy', 'api:update-method:patch')}\n      </div>\n    </div>`\n  }\n}\n"]}

package/build/src/modeling/internals/DataCatalogBrowser.d.ts

@@ -0,0 +1,108 @@
+import { LitElement, nothing, TemplateResult } from 'lit';
+import type { DataCatalogSchemaWithVersion, DataCatalogScope } from '@api-client/core/models/DataCatalog.js';
+import type { DataCatalogLifecycle } from '@api-client/core/models/DataCatalogVersion.js';
+import type { LiveData } from '../../reactive/LiveData.js';
+import type { DataCatalogTableSelectionDetail } from '../../elements/data-table/internals/DataCatalogTable.js';
+import '../../md/icons/ui-icon.js';
+import '../../md/button/ui-button.js';
+import '../../md/button/ui-button-group.js';
+import '../../md/icon-button/ui-icon-button.js';
+import '../../md/divider/ui-divider.js';
+import '../../md/text-field/ui-outlined-text-field.js';
+import '../../md/progress/ui-circular-progress.js';
+import '../../elements/data-table/data-catalog-table.js';
+/**
+ * The detail for the data catalog query event.
+ */
+export interface DataCatalogQueryEventDetail {
+    /**
+     * The scope of the data catalog query.
+     */
+    scope?: DataCatalogScope;
+    /**
+     * The lifecycle of the data catalog query.
+     */
+    lifecycle?: DataCatalogLifecycle;
+    /**
+     * The query string to search for. When not set, it resets the search
+     * and requests for the regular page.
+     */
+    query?: string;
+}
+/**
+ * A browser for the data catalog.
+ *
+ * This element allows the user to browse the data catalog, filter by scope and lifecycle, and search by text.
+ * It renders a table with the results and pagination support.
+ *
+ * @fires CustomEvent<DataCatalogQueryEventDetail> query - Dispatched when the user searches or changes filters.
+ * @fires CustomEvent<DataCatalogTableSelectionDetail> select - Dispatched when the selection in the table changes.
+ *
+ * @csspart loader - The container for the loader.
+ * @csspart error - The container for the error message.
+ * @csspart controls - The container for the search and filters.
+ * @csspart results - The data table element.
+ * @csspart search - The search input field.
+ * @csspart filters - The container for the filters.
+ */
+export default class DataCatalogBrowser extends LitElement {
+    #private;
+    /**
+     * When set, the table will render additional column with a button to directly select the item.
+     * @attribute
+     */
+    accessor directSelect: boolean | undefined;
+    /**
+     * The data to display in the table.
+     * @attribute
+     */
+    accessor items: LiveData<DataCatalogSchemaWithVersion[]> | undefined;
+    /**
+     * The current state of the browser. The controller managing the query service will set this property
+     * depending on the query state.
+     * @attribute
+     */
+    accessor state: 'loading' | 'ready' | 'error';
+    /**
+     * Required when in error state. Renders the title of the error message.
+     * @attribute
+     */
+    accessor errorTitle: string | undefined;
+    /**
+     * Required when in error state. Renders the description of the error message.
+     * @attribute
+     */
+    accessor errorMessage: string | undefined;
+    /**
+     * The currently selected item in the table, if any.
+     * @readonly
+     */
+    get selection(): DataCatalogTableSelectionDetail | undefined;
+    /**
+     * The current scope of the data catalog query.
+     */
+    accessor scope: DataCatalogScope | undefined;
+    /**
+     * The current lifecycle of the data catalog query.
+     */
+    accessor lifecycle: DataCatalogLifecycle | undefined;
+    /**
+     * The current query string.
+     */
+    accessor userQuery: string | undefined;
+    /**
+     * Dispatches the `query` event with the current filters.
+     * The parent application needs to track state of the query. If the `query` event
+     * has the `query` property set to `undefined` it means the search should be reset.
+     */
+    query(): void;
+    /**
+     * Returns the map of current filters.
+     */
+    protected getFilters(): DataCatalogQueryEventDetail;
+    protected handleSearchKeydown(e: KeyboardEvent): void;
+    protected handleFilterClick(e: Event): void;
+    protected handleTableSelect(e: CustomEvent<DataCatalogTableSelectionDetail>): void;
+    render(): TemplateResult | typeof nothing;
+}
+//# sourceMappingURL=DataCatalogBrowser.d.ts.map

package/build/src/modeling/internals/DataCatalogBrowser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataCatalogBrowser.d.ts","sourceRoot":"","sources":["../../../../src/modeling/internals/DataCatalogBrowser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAC/D,OAAO,KAAK,EAAE,4BAA4B,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAA;AAC5G,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAA;AAEzF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yDAAyD,CAAA;AAE9G,OAAO,2BAA2B,CAAA;AAClC,OAAO,8BAA8B,CAAA;AACrC,OAAO,oCAAoC,CAAA;AAC3C,OAAO,wCAAwC,CAAA;AAC/C,OAAO,gCAAgC,CAAA;AACvC,OAAO,+CAA+C,CAAA;AACtD,OAAO,2CAA2C,CAAA;AAClD,OAAO,iDAAiD,CAAA;AAExD;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAA;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAUD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,UAAU;;IACxD;;;OAGG;IAC0B,QAAQ,CAAC,YAAY,EAAE,OAAO,GAAG,SAAS,CAAA;IACvE;;;OAGG;IACyB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,4BAA4B,EAAE,CAAC,GAAG,SAAS,CAAA;IAChG;;;;OAIG;IACyB,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAY;IAErF;;;OAGG;IACyB,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;IACnE;;;OAGG;IACyB,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAIrE;;;OAGG;IACH,IAAI,SAAS,IAAI,+BAA+B,GAAG,SAAS,CAE3D;IAED;;OAEG;IACM,QAAQ,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAAA;IAErD;;OAEG;IACM,QAAQ,CAAC,SAAS,EAAE,oBAAoB,GAAG,SAAS,CAAA;IAE7D;;OAEG;IACM,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAE/C;;;;OAIG;IACH,KAAK,IAAI,IAAI;IAQb;;OAEG;IACH,SAAS,CAAC,UAAU,IAAI,2BAA2B;IAcnD,SAAS,CAAC,mBAAmB,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAerD,SAAS,CAAC,iBAAiB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAuB3C,SAAS,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW,CAAC,+BAA+B,CAAC,GAAG,IAAI;IAUzE,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO;CA8FnD"}