@api-client/ui 0.1.9 → 0.2.2

package/build/src/elements/amf/ApiServerPicker.element.js

@@ -1,715 +0,0 @@
-import { __esDecorate, __runInitializers } from "tslib";
-import { html, nothing } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { live } from 'lit/directives/live.js';
-import { cancelEvent } from '@api-client/core/lib/events/Utils.js';
-import { Events } from '../../events/amf/Events.js';
-import { EventTypes } from '../../events/amf/EventTypes.js';
-import { ApiDocumentationBase } from './ApiDocumentationBase.js';
-import '../../md/icons/ui-icon.js';
-import '../../md/dropdown-list/ui-dropdown-list.js';
-import '../../md/list/ui-list.js';
-import '../../md/list/ui-list-item.js';
-import '../../md/text-field/ui-text-field.js';
-import '../../md/icon-button/ui-icon-button.js';
-let ApiServerPicker = (() => {
-    let _classSuper = ApiDocumentationBase;
-    let _type_decorators;
-    let _type_initializers = [];
-    let _type_extraInitializers = [];
-    let __graphLoaded_decorators;
-    let __graphLoaded_initializers = [];
-    let __graphLoaded_extraInitializers = [];
-    let _auto_decorators;
-    let _auto_initializers = [];
-    let _auto_extraInitializers = [];
-    let _custom_decorators;
-    let _custom_initializers = [];
-    let _custom_extraInitializers = [];
-    let _opened_decorators;
-    let _opened_initializers = [];
-    let _opened_extraInitializers = [];
-    let _omainId_decorators;
-    let _omainId_initializers = [];
-    let _omainId_extraInitializers = [];
-    let _domainType_decorators;
-    let _domainType_initializers = [];
-    let _domainType_extraInitializers = [];
-    let _value_decorators;
-    let _value_initializers = [];
-    let _value_extraInitializers = [];
-    let _baseUri_decorators;
-    let _baseUri_initializers = [];
-    let _baseUri_extraInitializers = [];
-    let __customItems_decorators;
-    let __customItems_initializers = [];
-    let __customItems_extraInitializers = [];
-    let __servers_decorators;
-    let __servers_initializers = [];
-    let __servers_extraInitializers = [];
-    let _customInput_decorators;
-    let _customInput_initializers = [];
-    let _customInput_extraInitializers = [];
-    return class ApiServerPicker extends _classSuper {
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _type_decorators = [property({ type: String, reflect: true })];
-            __graphLoaded_decorators = [state()];
-            _auto_decorators = [property({ type: Boolean, reflect: true })];
-            _custom_decorators = [property({ type: Boolean, reflect: true })];
-            _opened_decorators = [property({ type: Boolean, reflect: true })];
-            _omainId_decorators = [property({ type: String, reflect: true })];
-            _domainType_decorators = [property({ type: String, reflect: true })];
-            _value_decorators = [property({ type: String })];
-            _baseUri_decorators = [property({ type: String })];
-            __customItems_decorators = [state()];
-            __servers_decorators = [state()];
-            _customInput_decorators = [query('.uri-input')];
-            __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
-            __esDecorate(this, null, __graphLoaded_decorators, { kind: "accessor", name: "_graphLoaded", static: false, private: false, access: { has: obj => "_graphLoaded" in obj, get: obj => obj._graphLoaded, set: (obj, value) => { obj._graphLoaded = value; } }, metadata: _metadata }, __graphLoaded_initializers, __graphLoaded_extraInitializers);
-            __esDecorate(this, null, _auto_decorators, { kind: "accessor", name: "auto", static: false, private: false, access: { has: obj => "auto" in obj, get: obj => obj.auto, set: (obj, value) => { obj.auto = value; } }, metadata: _metadata }, _auto_initializers, _auto_extraInitializers);
-            __esDecorate(this, null, _custom_decorators, { kind: "accessor", name: "custom", static: false, private: false, access: { has: obj => "custom" in obj, get: obj => obj.custom, set: (obj, value) => { obj.custom = value; } }, metadata: _metadata }, _custom_initializers, _custom_extraInitializers);
-            __esDecorate(this, null, _opened_decorators, { kind: "accessor", name: "opened", static: false, private: false, access: { has: obj => "opened" in obj, get: obj => obj.opened, set: (obj, value) => { obj.opened = value; } }, metadata: _metadata }, _opened_initializers, _opened_extraInitializers);
-            __esDecorate(this, null, _omainId_decorators, { kind: "accessor", name: "omainId", static: false, private: false, access: { has: obj => "omainId" in obj, get: obj => obj.omainId, set: (obj, value) => { obj.omainId = value; } }, metadata: _metadata }, _omainId_initializers, _omainId_extraInitializers);
-            __esDecorate(this, null, _domainType_decorators, { kind: "accessor", name: "domainType", static: false, private: false, access: { has: obj => "domainType" in obj, get: obj => obj.domainType, set: (obj, value) => { obj.domainType = value; } }, metadata: _metadata }, _domainType_initializers, _domainType_extraInitializers);
-            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
-            __esDecorate(this, null, _baseUri_decorators, { kind: "accessor", name: "baseUri", static: false, private: false, access: { has: obj => "baseUri" in obj, get: obj => obj.baseUri, set: (obj, value) => { obj.baseUri = value; } }, metadata: _metadata }, _baseUri_initializers, _baseUri_extraInitializers);
-            __esDecorate(this, null, __customItems_decorators, { kind: "accessor", name: "_customItems", static: false, private: false, access: { has: obj => "_customItems" in obj, get: obj => obj._customItems, set: (obj, value) => { obj._customItems = value; } }, metadata: _metadata }, __customItems_initializers, __customItems_extraInitializers);
-            __esDecorate(this, null, __servers_decorators, { kind: "accessor", name: "_servers", static: false, private: false, access: { has: obj => "_servers" in obj, get: obj => obj._servers, set: (obj, value) => { obj._servers = value; } }, metadata: _metadata }, __servers_initializers, __servers_extraInitializers);
-            __esDecorate(this, null, _customInput_decorators, { kind: "accessor", name: "customInput", static: false, private: false, access: { has: obj => "customInput" in obj, get: obj => obj.customInput, set: (obj, value) => { obj.customInput = value; } }, metadata: _metadata }, _customInput_initializers, _customInput_extraInitializers);
-            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-        }
-        #type_accessor_storage = __runInitializers(this, _type_initializers, void 0);
-        /**
-         * Currently selected type of the input.
-         * `server` | `extra` | `custom`
-         * @attribute
-         */
-        get type() { return this.#type_accessor_storage; }
-        set type(value) { this.#type_accessor_storage = value; }
-        #_graphLoaded_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, __graphLoaded_initializers, void 0));
-        get _graphLoaded() { return this.#_graphLoaded_accessor_storage; }
-        set _graphLoaded(value) { this.#_graphLoaded_accessor_storage = value; }
-        #auto_accessor_storage = (__runInitializers(this, __graphLoaded_extraInitializers), __runInitializers(this, _auto_initializers, void 0));
-        /**
-         * When set it automatically selected the first server from the list of servers when selection is missing.
-         * @attribute
-         */
-        get auto() { return this.#auto_accessor_storage; }
-        set auto(value) { this.#auto_accessor_storage = value; }
-        #custom_accessor_storage = (__runInitializers(this, _auto_extraInitializers), __runInitializers(this, _custom_initializers, void 0));
-        /**
-         * When set the `Custom base URI` is rendered in the dropdown
-         * @attribute
-         */
-        get custom() { return this.#custom_accessor_storage; }
-        set custom(value) { this.#custom_accessor_storage = value; }
-        #opened_accessor_storage = (__runInitializers(this, _custom_extraInitializers), __runInitializers(this, _opened_initializers, void 0));
-        /**
-         * A programmatic access to the opened state of the drop down.
-         * Note, this does nothing when custom element is rendered.
-         * @attribute
-         */
-        get opened() { return this.#opened_accessor_storage; }
-        set opened(value) { this.#opened_accessor_storage = value; }
-        #omainId_accessor_storage = (__runInitializers(this, _opened_extraInitializers), __runInitializers(this, _omainId_initializers, void 0));
-        /**
-         * The graph domain id of the selected domain object.
-         * @attribute
-         */
-        get omainId() { return this.#omainId_accessor_storage; }
-        set omainId(value) { this.#omainId_accessor_storage = value; }
-        #domainType_accessor_storage = (__runInitializers(this, _omainId_extraInitializers), __runInitializers(this, _domainType_initializers, void 0));
-        /**
-         * The selected domain type.
-         * This is an abstract name from the api navigation.
-         * @attribute
-         */
-        get domainType() { return this.#domainType_accessor_storage; }
-        set domainType(value) { this.#domainType_accessor_storage = value; }
-        #value_accessor_storage = (__runInitializers(this, _domainType_extraInitializers), __runInitializers(this, _value_initializers, void 0));
-        /**
-         * The current base URI value from either (in order) the baseUri, current value, or just empty string.
-         * @attribute
-         */
-        get value() { return this.#value_accessor_storage; }
-        set value(value) { this.#value_accessor_storage = value; }
-        #baseUri_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _baseUri_initializers, void 0));
-        /**
-         * The `baseUri` property overrides any server definition and turns the picker into the
-         * "custom" mode.
-         * @attribute
-         */
-        get baseUri() { return this.#baseUri_accessor_storage; }
-        set baseUri(value) { this.#baseUri_accessor_storage = value; }
-        _debounceValue = __runInitializers(this, _baseUri_extraInitializers);
-        /**
-         * Holds the size of rendered custom servers.
-         */
-        _customNodesCount;
-        #_customItems_accessor_storage = __runInitializers(this, __customItems_initializers, void 0);
-        /**
-         * A list of custom items rendered in the slot.
-         */
-        get _customItems() { return this.#_customItems_accessor_storage; }
-        set _customItems(value) { this.#_customItems_accessor_storage = value; }
-        #_servers_accessor_storage = (__runInitializers(this, __customItems_extraInitializers), __runInitializers(this, __servers_initializers, void 0));
-        get _servers() { return this.#_servers_accessor_storage; }
-        set _servers(value) { this.#_servers_accessor_storage = value; }
-        /**
-         * Returns a list of custom servers found in the element's DOM.
-         * For an item to be included in the list it has to have the `data-value="..."` attribute set.
-         */
-        get customServers() {
-            return this._customItems.map((i) => i.value);
-        }
-        /**
-         * Returns a list of servers defined in the API.
-         */
-        get apiServers() {
-            return (this._servers || []).map((i) => i.url);
-        }
-        /**
-         * @returns Total number of list items being rendered.
-         */
-        get serversCount() {
-            const { custom, _servers = [], _customItems } = this;
-            const offset = custom ? 1 : 0;
-            const serversCount = _servers.length + _customItems.length + offset;
-            return serversCount;
-        }
-        _onApiServerChange = (__runInitializers(this, __servers_extraInitializers), null);
-        /**
-         * @returns Previously registered callback function for the `api-server-changed` event.
-         */
-        get onapiserverchange() {
-            return this._onApiServerChange;
-        }
-        /**
-         * @param value A callback function to be called  when `api-server-changed` event is dispatched.
-         */
-        set onapiserverchange(value) {
-            const old = this._onApiServerChange;
-            if (old) {
-                this.removeEventListener(EventTypes.Server.serverChange, old);
-            }
-            const isFn = typeof value === 'function';
-            if (isFn) {
-                this._onApiServerChange = value;
-                this.addEventListener(EventTypes.Server.serverChange, value);
-            }
-            else {
-                this._onApiServerChange = null;
-            }
-        }
-        _onServersCountChangeValue = null;
-        /**
-         * @returns Previously registered callback function for the `servers-count-changed` event.
-         */
-        get onserverscountchange() {
-            return this._onServersCountChangeValue || null;
-        }
-        /**
-         * @param value A callback function to be called when `servers-count-changed` event is dispatched.
-         */
-        set onserverscountchange(value) {
-            const old = this._onServersCountChangeValue;
-            if (old) {
-                this.removeEventListener(EventTypes.Server.serverCountChange, old);
-            }
-            const isFn = typeof value === 'function';
-            if (isFn) {
-                this._onServersCountChangeValue = value;
-                this.addEventListener(EventTypes.Server.serverCountChange, value);
-            }
-            else {
-                this._onServersCountChangeValue = null;
-            }
-        }
-        _boundEvent;
-        #customInput_accessor_storage = __runInitializers(this, _customInput_initializers, null);
-        get customInput() { return this.#customInput_accessor_storage; }
-        set customInput(value) { this.#customInput_accessor_storage = value; }
-        constructor() {
-            super();
-            __runInitializers(this, _customInput_extraInitializers);
-            this.queryDebouncerTimeout = 1;
-            this._customNodesCount = 0;
-            this._graphLoaded = false;
-            this._customItems = [];
-            this._boundEvent = () => {
-                this._processDebounce();
-            };
-        }
-        connectedCallback() {
-            super.connectedCallback();
-            this.eventsTarget.addEventListener(EventTypes.Store.graphChange, this._boundEvent);
-            this._processDebounce();
-        }
-        disconnectedCallback() {
-            super.disconnectedCallback();
-            this.eventsTarget.removeEventListener(EventTypes.Store.graphChange, this._boundEvent);
-            if (this._debounceValue) {
-                clearTimeout(this._debounceValue);
-                this._debounceValue = undefined;
-            }
-        }
-        shouldUpdate(_changedProperties) {
-            if (_changedProperties.has('value')) {
-                if (this.baseUri) {
-                    this.value = this.baseUri;
-                    return false;
-                }
-                // const oldValue = _changedProperties.get('value');
-                // const newValue = this.value;
-                // if (newValue && this._isValueCustom(newValue) && !this.custom) {
-                //   // eslint-disable-next-line no-console
-                //   console.warn(`Trying to set a custom value on the selector but the "custom" is not set.`);
-                //   this.value = oldValue;
-                //   return _changedProperties.size !== 1;
-                // }
-            }
-            return true;
-        }
-        updated(_changedProperties) {
-            super.updated(_changedProperties);
-            if (_changedProperties.has('domainType') || _changedProperties.has('domainId')) {
-                this._processDebounce();
-            }
-            if (_changedProperties.has('custom')) {
-                this.notifyServersCount();
-                if (!this.custom && this.type === 'custom') {
-                    this.disabledCustomUri();
-                }
-            }
-            if (_changedProperties.has('auto') && this.auto && !this.value) {
-                this._autoSelect({ preferred: this.value });
-            }
-            if (_changedProperties.has('value')) {
-                this._valueChanged(this.value);
-            }
-            if (_changedProperties.has('baseUri') && this.baseUri) {
-                this.value = this.baseUri;
-                this.type = 'custom';
-            }
-        }
-        /**
-         * Calls the `queryGraph()` function in a debouncer.
-         */
-        _processDebounce() {
-            if (this._debounceValue) {
-                clearTimeout(this._debounceValue);
-            }
-            this._debounceValue = setTimeout(() => {
-                this._debounceValue = undefined;
-                this.processGraph();
-            }, this.queryDebouncerTimeout);
-        }
-        /**
-         * Queries for the current API server data from the store.
-         */
-        async processGraph() {
-            this._graphLoaded = false;
-            let oldValue = this.value;
-            const oldCustom = this.isValueCustom(oldValue);
-            await this._queryServers();
-            const isCustom = this.isValueCustom(oldValue);
-            this._graphLoaded = true;
-            if (!oldCustom && isCustom) {
-                oldValue = undefined;
-            }
-            const noCustom = !(oldCustom && isCustom);
-            this._autoSelect({ preferred: oldValue, noCustom });
-            this.notifyServersCount();
-        }
-        /**
-         * Queries for the current servers value.
-         */
-        async _queryServers() {
-            const { domainId, domainType } = this;
-            let endpointId;
-            let methodId;
-            if (domainType === 'operation') {
-                methodId = domainId;
-            }
-            else if (domainType === 'resource') {
-                endpointId = domainId;
-            }
-            try {
-                const info = await Events.Server.query(this, {
-                    endpointId,
-                    methodId,
-                });
-                this._servers = info;
-            }
-            catch (e) {
-                const ex = e;
-                this._servers = undefined;
-                Events.Telemetry.exception(this, ex.message, false);
-                Events.Reporting.error(this, ex, `Unable to query for API servers: ${ex.message}`, this.localName);
-            }
-        }
-        /**
-         * Checks whether the passed value would be rendered as a "custom" value.
-         * The value is "custom" if it cannot be matched with server value for an API defined server or
-         * a custom server passed in the DOM.
-         *
-         * @param value The value to test.
-         * @returns `true` when the value would be rendered as "custom".
-         */
-        isValueCustom(value) {
-            const { _servers = [], _customItems } = this;
-            const srv = _servers.some((s) => s.url === value);
-            if (srv) {
-                return false;
-            }
-            const custom = _customItems.some((s) => s.value === value);
-            if (custom) {
-                return false;
-            }
-            // returns false for no value.
-            return !!value;
-        }
-        /**
-         * This only makes sure whether the set value is a "custom" value while no selection is made.
-         *
-         * @param value The current value.
-         */
-        _valueChanged(value) {
-            if (!value || !this.custom || !this._graphLoaded) {
-                return;
-            }
-            const { _servers = [], _customItems, _graphLoaded } = this;
-            if (_graphLoaded) {
-                return;
-            }
-            if (_servers.some((s) => s.url === value)) {
-                return;
-            }
-            if (_customItems.some((s) => s.value === value)) {
-                return;
-            }
-            this.value = value;
-            this.type = 'custom';
-            Events.Server.serverChange(this, value, this.type);
-        }
-        /**
-         * Automatically selects one of available values.
-         *
-         * When the `preferred` is set it checks whether this value is on the servers list. If so this value is used.
-         * If none match then it checks for custom servers and if they have this value then it is set.
-         *
-         * Otherwise it takes files value of servers or custom servers (when no servers) and sets this value instead.
-         *
-         * Caveats:
-         * - it does nothing when `auto` is not set
-         * - it does nothing when `type` is `custom`
-         * - it won't set the "first" server or custom server value when the graph is being loaded.
-         *
-         * @param preferred The preferred value to be selected.
-         */
-        _autoSelect({ preferred, noCustom } = {}) {
-            const { auto, type } = this;
-            if (type === 'custom') {
-                if (preferred) {
-                    const isCustom = this.isValueCustom(preferred);
-                    if (!isCustom) {
-                        this.type = undefined;
-                    }
-                    else {
-                        this.value = preferred;
-                        Events.Server.serverChange(this, preferred || '', this.type);
-                        return;
-                    }
-                }
-                else {
-                    return;
-                }
-            }
-            if (!auto) {
-                return;
-            }
-            const { _servers = [], _customItems } = this;
-            const srv = _servers.find((s) => s.url === preferred);
-            if (srv) {
-                this.value = preferred;
-                this.type = 'server';
-                Events.Server.serverChange(this, preferred || '', this.type);
-                return;
-            }
-            const custom = _customItems.find((s) => s.value === preferred);
-            if (custom) {
-                this.value = custom.value;
-                this.type = 'extra';
-                Events.Server.serverChange(this, custom.value, this.type);
-                return;
-            }
-            if (!this._graphLoaded) {
-                // do not pre-select values before servers query ends.
-                return;
-            }
-            // todo: if anything is wrong with auto-select and the custom values, remove these lines.
-            if (this.custom && preferred && !noCustom) {
-                this.value = preferred;
-                this.type = 'custom';
-                Events.Server.serverChange(this, preferred, this.type);
-                return;
-            }
-            const [firstServer] = _servers;
-            if (firstServer) {
-                this.value = firstServer.url;
-                this.type = 'server';
-                Events.Server.serverChange(this, firstServer.url, this.type);
-                return;
-            }
-            const [firstCustom] = _customItems;
-            if (firstCustom) {
-                this.value = firstCustom.value;
-                this.type = 'extra';
-                Events.Server.serverChange(this, firstCustom.value, this.type);
-            }
-        }
-        handleDropdownOpen(e) {
-            const node = e.target;
-            this.opened = node.open;
-        }
-        handleSelection(e) {
-            e.preventDefault();
-            const { _graphLoaded, _customItems } = this;
-            if (!_graphLoaded) {
-                return;
-            }
-            const { item } = e.detail;
-            const { value } = item.dataset;
-            if (!value) {
-                return;
-            }
-            if (value === 'custom') {
-                this.enableCustomUri();
-                return;
-            }
-            const custom = _customItems.find((i) => i.value === value);
-            this.value = value;
-            if (custom) {
-                this.type = 'extra';
-            }
-            else {
-                this.type = 'server';
-            }
-            Events.Server.serverChange(this, value, this.type);
-        }
-        handleSlot(e) {
-            const slot = e.target;
-            const elements = slot.assignedElements({ flatten: true });
-            const servers = [];
-            elements.forEach((element, index) => {
-                const value = element.getAttribute('data-value');
-                if (!value) {
-                    return;
-                }
-                element.setAttribute('role', 'menuitem');
-                servers.push({
-                    index,
-                    value,
-                });
-            });
-            this._customItems = servers;
-            this.notifyServersCount();
-        }
-        /**
-         * Dispatches the `servers-count-changed` event with the current number of rendered servers.
-         */
-        notifyServersCount() {
-            Events.Server.serverCountChange(this, this.serversCount);
-        }
-        handleCustomChange(e) {
-            const { value } = e.target;
-            this.value = value;
-            Events.Server.serverChange(this, this.value, this.type);
-        }
-        /**
-         * Resets current selection to a default value.
-         */
-        disabledCustomUri() {
-            const { baseUri } = this;
-            if (baseUri) {
-                this.value = baseUri;
-                this.type = 'custom';
-            }
-            else {
-                this.value = '';
-                this.type = 'server';
-            }
-            Events.Server.serverChange(this, '', this.type);
-            this.opened = false;
-            this._autoSelect();
-        }
-        async enableCustomUri() {
-            this.type = 'custom';
-            this.value = '';
-            this.opened = false;
-            Events.Server.serverChange(this, this.value, this.type);
-            await this.updateComplete;
-            const { customInput } = this;
-            customInput?.focus();
-        }
-        /**
-         * Removes the currently rendered servers from the element.
-         * This allow to programmatically manipulate the list of servers by removing all API related definitions.
-         */
-        removeServers() {
-            this._servers = [];
-        }
-        render() {
-            const { type } = this;
-            const isCustom = type === 'custom';
-            return html ` ${isCustom ? this.renderCustomUriInput() : ''} ${this.renderSelector(isCustom)} `;
-        }
-        /**
-         * @returns Template result for the custom input.
-         */
-        renderCustomUriInput() {
-            const { value = '', baseUri } = this;
-            return html `
-      <ui-text-field
-        class="uri-input"
-        .value="${live(value)}"
-        label="API base URI"
-        type="url"
-        ?readOnly="${!!baseUri}"
-        @change="${this.handleCustomChange}"
-        @select="${cancelEvent}"
-      >
-        <ui-icon-button
-          slot="suffix"
-          aria-label="Activate to clear and close the input"
-          title="Clears and closes the input"
-          ?hidden="${!!baseUri}"
-          @click="${this.disabledCustomUri}"
-        >
-          <ui-icon role="presentation" icon="close"></ui-icon>
-        </ui-icon-button>
-      </ui-text-field>
-    `;
-        }
-        /**
-         * @returns Template result for the drop down element.
-         */
-        renderSelector(hidden) {
-            const { value, opened = false } = this;
-            const finalValue = value === '' ? undefined : value;
-            return html `
-      <ui-dropdown-list
-        class="api-server-dropdown"
-        closeOnOutsideClick
-        matchTriggerWidth
-        ?hidden="${hidden}"
-        .open="${opened}"
-        @open="${this.handleDropdownOpen}"
-        @select="${this.handleSelection}"
-      >
-        <ui-text-field
-          class="trigger"
-          label="Select server"
-          readOnly
-          .value="${finalValue || ''}"
-          @select="${cancelEvent}"
-        >
-          <ui-icon icon="arrowDropDown" role="presentation" slot="suffix"></ui-icon>
-        </ui-text-field>
-        <ui-list slot="dropdown" role="menu" selector="[data-value]" selectActive>
-          ${this.renderSelectorList()}
-        </ui-list>
-      </ui-dropdown-list>
-    `;
-        }
-        /**
-         * Call the render functions for
-         * - Server options (from AMF Model)
-         * - Custom URI option
-         * - Extra slot
-         * @returns The combination of all options
-         */
-        renderSelectorList() {
-            return html ` ${this.renderServerList()} ${this.renderSlot()} ${this.renderCustomUri()} `;
-        }
-        /**
-         * @returns The template for the custom URI list item.
-         */
-        renderCustomUri() {
-            const { custom } = this;
-            if (!custom) {
-                return nothing;
-            }
-            return html `
-      <ui-list-item role="menuitem" data-value="custom" class="custom-option">Custom base URI</ui-list-item>
-    `;
-        }
-        /**
-         * @returns Template result for the drop down list options for current servers
-         */
-        renderServerList() {
-            const { _servers } = this;
-            if (!Array.isArray(_servers)) {
-                return nothing;
-            }
-            return _servers.map((server) => this.renderServerListItem(server));
-        }
-        /**
-         * @param server The server definition
-         * @returns The template for a server list item.
-         */
-        renderServerListItem(server) {
-            return html `
-      <ui-list-item role="menuitem" data-value="${server.url}" data-item="server-dropdown-option"
-        >${server.url}</ui-list-item
-      >
-    `;
-        }
-        renderSlot() {
-            return html `<slot name="custom-base-uri" @slotchange="${this.handleSlot}"></slot>`;
-        }
-    };
-})();
-/**
- * An element that presents a list of servers defined in the currently loaded API.
- * The user can select a server they prefer to use with the rest of the API documentation UI.
- *
- * The element dispatched the `apiserverchanged` event when the selection is made. This event
- * is dispatched when the selection is made automatically after querying for server data or when
- * the user decide to select a different option.
- *
- * ```javascript
- * const template = html`<api-server-picker @apiserverchanged="${this._serverChanged}"></api-server-picker>`;
- * ```
- *
- * The event is dispatched with the `detail` object that has the `value` with the current
- * base URI of the selected server, optional `id` with the graph ID of the selected server,
- * and the type of the current selection. The `type` property is one of: `server`
- * (pick is one of the predefined servers), `custom` (user entered value), or `extra`
- * (one of the added server definitions from the outside of the API specification.)
- *
- * The picker allows the user to enter a custom value of the base URI when the `custom`
- * property is set. In this case, the user can select the "custom" value in the
- * drop-down options list which then renders an input field where the user can change the value.
- * The `apiserverchanged` event is dispatched after the user commit the change in the input field (enter, blur).
- *
- * Additionally, the element offers a named `<slot>` (custom-base-uri) which renders all passed items
- * in the dropdown. All items that have `data-value` attribute set are selectable as the server value.
- *
- * ```javascript
- * const template = html`
- * <api-server-picker @apiserverchanged="${this._serverChanged}">
- *  <ui-list-item slot="custom-base-uri" data-value="http://mocking.com">Mocking service</ui-list-item>
- * </api-server-picker>`;
- * ```
- *
- * By default all server items are rendered as `<ui-list-item>`. However, you can pass any element
- * to make the experience more compelling to the user (like adding a section header).
- *
- * @fires apiserverchanged - The event dispatched when a server selection change.
- * @fires serverscountchanged - The event dispatched when a server count change.
- * @fires query - Dispatched when the element asks the context store for servers info.
- */
-export default ApiServerPicker;
-//# sourceMappingURL=ApiServerPicker.element.js.map