@3mo/command-palette/dist/CommandPaletteSearchField.js

Command-palettes are a common way to provide users with a list of actions they can perform in a given context.

import { __decorate } from "tslib";
import { component, css, property } from '@a11d/lit';
import { FieldSearch } from '@3mo/text-fields';
let CommandPaletteSearchField = class CommandPaletteSearchField extends FieldSearch {
    constructor() {
        super(...arguments);
        this.fetching = false;
        this.label = '';
    }
    initialized() {
        this.inputElement.placeholder = t('Search');
    }
    static get styles() {
        return css `
			[part=input] {
				padding: 0px;
				font-size: 20px;
			}

			mo-field {
				height: 50px;
				background: transparent;
				border-bottom: 1px solid var(--mo-color-transparent-gray-3) !important;
				&:after {
					visibility: hidden;
				}
			}

			mo-icon {
				--mo-color-accent: var(--mo-color-gray);
			}

			:host([fetching]) mo-field:after {
				visibility: visible;
				animation: fetching 2s linear infinite;
			}

			@keyframes fetching {
				0% {
					inset-inline-start: -40%;
					width: 0%;
				}
				50% {
					inset-inline-start: 20%;
					width: 80%;
				}
				100% {
					inset-inline-start: 100%;
					width: 100%;
				}
			}
		`;
    }
};
__decorate([
    property({ type: Boolean, reflect: true })
], CommandPaletteSearchField.prototype, "fetching", void 0);
CommandPaletteSearchField = __decorate([
    component('mo-command-palette-search-field')
], CommandPaletteSearchField);
export { CommandPaletteSearchField };