@alauda-fe/common
Version:
Alauda frontend team common codes.
87 lines • 13.4 kB
JavaScript
import { ButtonComponent, coerceAttrBoolean } from '@alauda/ui';
import { AsyncPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, Output, EventEmitter, ContentChildren, QueryList, Input, HostListener, } from '@angular/core';
import { Subject } from 'rxjs';
import { TranslateModule } from '../../translate/public-api';
import { SearchItemComponent } from './search-item/component';
import * as i0 from "@angular/core";
import * as i1 from "../../translate/translate.pipe";
const _c0 = ["*", [["", "additional", ""]]];
const _c1 = ["*", "[additional]"];
export class SearchPanelComponent {
constructor() {
this.enableEnterHandler = true;
this.search = new EventEmitter();
this.resetSearch = new EventEmitter();
this.isFulWidth$$ = new Subject();
}
enter() {
if (coerceAttrBoolean(this.enableEnterHandler)) {
this.search.next();
}
}
ngAfterViewInit() {
this.items.changes.subscribe(panels => {
this.isFulWidth$$.next(this.checkItemLength(panels));
});
this.isFulWidth$$.next(this.checkItemLength(this.items));
}
// 当一排放不下 3 个选项的时候，操作按钮自动放置最后
checkItemLength(panels) {
return panels?.length % 3 === 0;
}
static { this.ɵfac = function SearchPanelComponent_Factory(t) { return new (t || SearchPanelComponent)(); }; }
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchPanelComponent, selectors: [["acl-search-panel"]], contentQueries: function SearchPanelComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
i0.ɵɵcontentQuery(dirIndex, SearchItemComponent, 5);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.items = _t);
} }, hostBindings: function SearchPanelComponent_HostBindings(rf, ctx) { if (rf & 1) {
i0.ɵɵlistener("keydown.enter", function SearchPanelComponent_keydown_enter_HostBindingHandler($event) { return ctx.enter($event); }, false, i0.ɵɵresolveDocument);
} }, inputs: { enableEnterHandler: "enableEnterHandler" }, outputs: { search: "search", resetSearch: "resetSearch" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c1, decls: 12, vars: 10, consts: [[1, "search-panel"], [1, "tw-justify-end", "tw-w-full", "search"], ["type", "button", "aui-button", "primary", 3, "click"], ["type", "button", "aui-button", "", 3, "click"]], template: function SearchPanelComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef(_c0);
i0.ɵɵelementStart(0, "div", 0);
i0.ɵɵprojection(1);
i0.ɵɵelementStart(2, "acl-search-item");
i0.ɵɵpipe(3, "async");
i0.ɵɵelementStart(4, "div", 1)(5, "button", 2);
i0.ɵɵlistener("click", function SearchPanelComponent_Template_button_click_5_listener() { return ctx.search.emit(); });
i0.ɵɵtext(6);
i0.ɵɵpipe(7, "translate");
i0.ɵɵelementEnd();
i0.ɵɵelementStart(8, "button", 3);
i0.ɵɵlistener("click", function SearchPanelComponent_Template_button_click_8_listener() { return ctx.resetSearch.emit(); });
i0.ɵɵtext(9);
i0.ɵɵpipe(10, "translate");
i0.ɵɵelementEnd();
i0.ɵɵprojection(11, 1);
i0.ɵɵelementEnd()()();
} if (rf & 2) {
i0.ɵɵadvance(2);
i0.ɵɵstyleProp("width", i0.ɵɵpipeBind1(3, 4, ctx.isFulWidth$$) ? "100%" : "");
i0.ɵɵadvance(4);
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 6, "search"), " ");
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(10, 8, "reset"), " ");
} }, dependencies: [SearchItemComponent, ButtonComponent, TranslateModule, i1.TranslatePipe, AsyncPipe], styles: ["[_nghost-%COMP%] aui-select{width:100%}[_nghost-%COMP%] .search-panel{display:flex;justify-content:space-between;flex-wrap:wrap;margin-bottom:-16px}[_nghost-%COMP%] .search-panel acl-search-item{width:33.33%}[_nghost-%COMP%] .search-panel acl-search-item .search-panel__item{width:100%;margin-bottom:16px;display:inline-flex}[_nghost-%COMP%] .search-panel acl-search-item .search-panel__item>*{display:inline-flex}[_nghost-%COMP%] .search-panel acl-search-item .search-panel__item>label{padding-right:8px;justify-content:flex-end;text-align:right;line-height:var(--aui-line-height-s);align-items:center;min-width:70px;margin-left:20px}html:not([lang|=zh]) [_nghost-%COMP%] .search-panel acl-search-item .search-panel__item>label{min-width:110px}[_nghost-%COMP%] .search-panel acl-search-item .search-panel__item>label:after{content:\":\";margin-left:2px}[_nghost-%COMP%] .search-panel acl-search-item .search-panel__item>aui-select{flex:1}[_nghost-%COMP%] .search-panel acl-search-item:nth-of-type(3n+1) .search-panel__item label{margin-left:0}"], changeDetection: 0 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchPanelComponent, [{
type: Component,
args: [{ selector: 'acl-search-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SearchItemComponent, ButtonComponent, TranslateModule, AsyncPipe], standalone: true, template: "<div class=\"search-panel\">\n <ng-content></ng-content>\n <acl-search-item [style.width]=\"(isFulWidth$$ | async) ? '100%' : ''\">\n <div class=\"tw-justify-end tw-w-full search\">\n <button\n type=\"button\"\n aui-button=\"primary\"\n (click)=\"search.emit()\"\n >\n {{ 'search' | translate }}\n </button>\n <button\n type=\"button\"\n aui-button\n (click)=\"resetSearch.emit()\"\n >\n {{ 'reset' | translate }}\n </button>\n\n <ng-content select=\"[additional]\"></ng-content>\n </div>\n </acl-search-item>\n</div>\n", styles: [":host::ng-deep aui-select{width:100%}:host::ng-deep .search-panel{display:flex;justify-content:space-between;flex-wrap:wrap;margin-bottom:-16px}:host::ng-deep .search-panel acl-search-item{width:33.33%}:host::ng-deep .search-panel acl-search-item .search-panel__item{width:100%;margin-bottom:16px;display:inline-flex}:host::ng-deep .search-panel acl-search-item .search-panel__item>*{display:inline-flex}:host::ng-deep .search-panel acl-search-item .search-panel__item>label{padding-right:8px;justify-content:flex-end;text-align:right;line-height:var(--aui-line-height-s);align-items:center;min-width:70px;margin-left:20px}html:not([lang|=zh]) :host::ng-deep .search-panel acl-search-item .search-panel__item>label{min-width:110px}:host::ng-deep .search-panel acl-search-item .search-panel__item>label:after{content:\":\";margin-left:2px}:host::ng-deep .search-panel acl-search-item .search-panel__item>aui-select{flex:1}:host::ng-deep .search-panel acl-search-item:nth-of-type(3n+1) .search-panel__item label{margin-left:0}\n"] }]
}], null, { enableEnterHandler: [{
type: Input
}], search: [{
type: Output
}], resetSearch: [{
type: Output
}], items: [{
type: ContentChildren,
args: [SearchItemComponent, {
descendants: true,
}]
}], enter: [{
type: HostListener,
args: ['document:keydown.enter', ['$event']]
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchPanelComponent, { className: "SearchPanelComponent" }); })();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21tb24vc3JjL3dpZGdldC9zZWFyY2gtcGFuZWwvY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21tb24vc3JjL3dpZGdldC9zZWFyY2gtcGFuZWwvdGVtcGxhdGUuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsZUFBZSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sWUFBWSxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUM1QyxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxNQUFNLEVBQ04sWUFBWSxFQUNaLGVBQWUsRUFDZixTQUFTLEVBRVQsS0FBSyxFQUNMLFlBQVksR0FDYixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBRS9CLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUU3RCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQzs7Ozs7QUFVOUQsTUFBTSxPQUFPLG9CQUFvQjtJQVJqQztRQVVFLHVCQUFrQixHQUFpQixJQUFJLENBQUM7UUFHeEMsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFHbEMsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO1FBY3ZDLGlCQUFZLEdBQUcsSUFBSSxPQUFPLEVBQVcsQ0FBQztLQWN2QztJQXBCQyxLQUFLO1FBQ0gsSUFBSSxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsRUFBRSxDQUFDO1lBQy9DLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDckIsQ0FBQztJQUNILENBQUM7SUFJRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxFQUFFO1lBQ3BDLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQztRQUN2RCxDQUFDLENBQUMsQ0FBQztRQUVILElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7SUFDM0QsQ0FBQztJQUVELDZCQUE2QjtJQUNyQixlQUFlLENBQUMsTUFBc0M7UUFDNUQsT0FBTyxNQUFNLEVBQUUsTUFBTSxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDbEMsQ0FBQztxRkFuQ1Usb0JBQW9CO29FQUFwQixvQkFBb0I7d0NBVWQsbUJBQW1COzs7OztZQVZ6QiwrR0FBQSxpQkFBYSxpQ0FBTzs7O1lDM0JqQyw4QkFBMEI7WUFDeEIsa0JBQXlCO1lBQ3pCLHVDQUFzRTs7WUFFbEUsQUFERiw4QkFBNkMsZ0JBSzFDO1lBREMsaUdBQVMsaUJBQWEsSUFBQztZQUV2QixZQUNGOztZQUFBLGlCQUFTO1lBQ1QsaUNBSUM7WUFEQyxpR0FBUyxzQkFBa0IsSUFBQztZQUU1QixZQUNGOztZQUFBLGlCQUFTO1lBRVQsc0JBQStDO1lBR3JELEFBREUsQUFERSxpQkFBTSxFQUNVLEVBQ2Q7O1lBcEJhLGVBQW9EO1lBQXBELDZFQUFvRDtZQU8vRCxlQUNGO1lBREUsK0RBQ0Y7WUFNRSxlQUNGO1lBREUsK0RBQ0Y7NEJET00sbUJBQW1CLEVBQUUsZUFBZSxFQUFFLGVBQWUsb0JBQUUsU0FBUzs7aUZBRy9ELG9CQUFvQjtjQVJoQyxTQUFTOzJCQUNFLGtCQUFrQixtQkFHWCx1QkFBdUIsQ0FBQyxNQUFNLFdBQ3RDLENBQUMsbUJBQW1CLEVBQUUsZUFBZSxFQUFFLGVBQWUsRUFBRSxTQUFTLENBQUMsY0FDL0QsSUFBSTtnQkFJaEIsa0JBQWtCO2tCQURqQixLQUFLO1lBSU4sTUFBTTtrQkFETCxNQUFNO1lBSVAsV0FBVztrQkFEVixNQUFNO1lBTVAsS0FBSztrQkFISixlQUFlO21CQUFDLG1CQUFtQixFQUFFO29CQUNwQyxXQUFXLEVBQUUsSUFBSTtpQkFDbEI7WUFJRCxLQUFLO2tCQURKLFlBQVk7bUJBQUMsd0JBQXdCLEVBQUUsQ0FBQyxRQUFRLENBQUM7O2tGQWZ2QyxvQkFBb0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCdXR0b25Db21wb25lbnQsIGNvZXJjZUF0dHJCb29sZWFuIH0gZnJvbSAnQGFsYXVkYS91aSc7XG5pbXBvcnQgeyBBc3luY1BpcGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgT3V0cHV0LFxuICBFdmVudEVtaXR0ZXIsXG4gIENvbnRlbnRDaGlsZHJlbixcbiAgUXVlcnlMaXN0LFxuICBBZnRlclZpZXdJbml0LFxuICBJbnB1dCxcbiAgSG9zdExpc3RlbmVyLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcblxuaW1wb3J0IHsgVHJhbnNsYXRlTW9kdWxlIH0gZnJvbSAnLi4vLi4vdHJhbnNsYXRlL3B1YmxpYy1hcGknO1xuXG5pbXBvcnQgeyBTZWFyY2hJdGVtQ29tcG9uZW50IH0gZnJvbSAnLi9zZWFyY2gtaXRlbS9jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhY2wtc2VhcmNoLXBhbmVsJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RlbXBsYXRlLmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zdHlsZS5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBpbXBvcnRzOiBbU2VhcmNoSXRlbUNvbXBvbmVudCwgQnV0dG9uQ29tcG9uZW50LCBUcmFuc2xhdGVNb2R1bGUsIEFzeW5jUGlwZV0sXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIFNlYXJjaFBhbmVsQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gIEBJbnB1dCgpXG4gIGVuYWJsZUVudGVySGFuZGxlcjogYm9vbGVhbiB8ICcnID0gdHJ1ZTtcblxuICBAT3V0cHV0KClcbiAgc2VhcmNoID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIEBPdXRwdXQoKVxuICByZXNldFNlYXJjaCA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBAQ29udGVudENoaWxkcmVuKFNlYXJjaEl0ZW1Db21wb25lbnQsIHtcbiAgICBkZXNjZW5kYW50czogdHJ1ZSxcbiAgfSlcbiAgaXRlbXM6IFF1ZXJ5TGlzdDxTZWFyY2hJdGVtQ29tcG9uZW50PjtcblxuICBASG9zdExpc3RlbmVyKCdkb2N1bWVudDprZXlkb3duLmVudGVyJywgWyckZXZlbnQnXSlcbiAgZW50ZXIoKSB7XG4gICAgaWYgKGNvZXJjZUF0dHJCb29sZWFuKHRoaXMuZW5hYmxlRW50ZXJIYW5kbGVyKSkge1xuICAgICAgdGhpcy5zZWFyY2gubmV4dCgpO1xuICAgIH1cbiAgfVxuXG4gIGlzRnVsV2lkdGgkJCA9IG5ldyBTdWJqZWN0PGJvb2xlYW4+KCk7XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHRoaXMuaXRlbXMuY2hhbmdlcy5zdWJzY3JpYmUocGFuZWxzID0+IHtcbiAgICAgIHRoaXMuaXNGdWxXaWR0aCQkLm5leHQodGhpcy5jaGVja0l0ZW1MZW5ndGgocGFuZWxzKSk7XG4gICAgfSk7XG5cbiAgICB0aGlzLmlzRnVsV2lkdGgkJC5uZXh0KHRoaXMuY2hlY2tJdGVtTGVuZ3RoKHRoaXMuaXRlbXMpKTtcbiAgfVxuXG4gIC8vIOW9k+S4gOaOkuaUvuS4jeS4iyAzIOS4qumAiemhueeahOaXtuWAme+8jOaTjeS9nOaMiemSruiHquWKqOaUvue9ruacgOWQjlxuICBwcml2YXRlIGNoZWNrSXRlbUxlbmd0aChwYW5lbHM6IFF1ZXJ5TGlzdDxTZWFyY2hJdGVtQ29tcG9uZW50Pikge1xuICAgIHJldHVybiBwYW5lbHM/Lmxlbmd0aCAlIDMgPT09IDA7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJzZWFyY2gtcGFuZWxcIj5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8YWNsLXNlYXJjaC1pdGVtIFtzdHlsZS53aWR0aF09XCIoaXNGdWxXaWR0aCQkIHwgYXN5bmMpID8gJzEwMCUnIDogJydcIj5cbiAgICA8ZGl2IGNsYXNzPVwidHctanVzdGlmeS1lbmQgdHctdy1mdWxsIHNlYXJjaFwiPlxuICAgICAgPGJ1dHRvblxuICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgYXVpLWJ1dHRvbj1cInByaW1hcnlcIlxuICAgICAgICAoY2xpY2spPVwic2VhcmNoLmVtaXQoKVwiXG4gICAgICA+XG4gICAgICAgIHt7ICdzZWFyY2gnIHwgdHJhbnNsYXRlIH19XG4gICAgICA8L2J1dHRvbj5cbiAgICAgIDxidXR0b25cbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgIGF1aS1idXR0b25cbiAgICAgICAgKGNsaWNrKT1cInJlc2V0U2VhcmNoLmVtaXQoKVwiXG4gICAgICA+XG4gICAgICAgIHt7ICdyZXNldCcgfCB0cmFuc2xhdGUgfX1cbiAgICAgIDwvYnV0dG9uPlxuXG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbYWRkaXRpb25hbF1cIj48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gIDwvYWNsLXNlYXJjaC1pdGVtPlxuPC9kaXY+XG4iXX0=