carbon-components-angular/esm2020/table/toolbar/table-toolbar-search.component.mjs

Next generation components

import { Search } from "carbon-components-angular/search";
import { Component, HostBinding } from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "carbon-components-angular/icon";
export class TableToolbarSearch extends Search {
    constructor() {
        super(...arguments);
        this.tableSearch = true;
        this.size = "lg";
        this.hostClass = true;
    }
    ngAfterViewInit() {
        setTimeout(() => {
            if (this.value) {
                this.openSearch();
            }
        });
    }
}
TableToolbarSearch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableToolbarSearch, deps: null, target: i0.ɵɵFactoryTarget.Component });
TableToolbarSearch.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search", host: { properties: { "class.cds--toolbar-content": "this.hostClass" } }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: TableToolbarSearch,
            multi: true
        }
    ], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"cds--search\"\n\t[ngClass]=\"{\n\t\t'cds--search--sm': size === 'sm',\n\t\t'cds--search--md': size === 'md',\n\t\t'cds--search--lg': size === 'lg',\n\t\t'cds--search--light': theme === 'light',\n\t\t'cds--skeleton': skeleton,\n\t\t'cds--search--expandable': expandable && !tableSearch,\n\t\t'cds--search--expanded': expandable && !tableSearch && active,\n\t\t'cds--toolbar-search': toolbar && !expandable,\n\t\t'cds--toolbar-search--active': toolbar && !expandable && active,\n\t\t'cds--toolbar-search-container-persistent': tableSearch && !expandable,\n\t\t'cds--toolbar-search-container-expandable': tableSearch && expandable,\n\t\t'cds--toolbar-search-container-active': tableSearch && expandable && active\n\t}\"\n\trole=\"search\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t(click)=\"openSearch()\">\n\t<label class=\"cds--label\" [for]=\"id\">{{label}}</label>\n\n\t<div *ngIf=\"skeleton; else enableInput\" class=\"cds--search-input\"></div>\n\t<ng-template #enableInput>\n\t\t<input\n\t\t\t#input\n\t\t\tclass=\"cds--search-input\"\n\t\t\t[type]=\"tableSearch || !toolbar ? 'text' : 'search'\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[required]=\"required\"\n\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t(keyup.enter)=\"onEnter()\"/>\n\t\t<button\n\t\t\t*ngIf=\"!tableSearch && toolbar\"\n\t\t\tclass=\"cds--toolbar-search__btn\"\n\t\t\t(click)=\"openSearch()\"\n\t\t\taria-label=\"Open search\">\n\t\t\t<svg cdsIcon=\"search\" size=\"16\" class=\"cds--search-magnifier-icon\"></svg>\n\t\t</button>\n\t\t<svg\n\t\t\tcdsIcon=\"search\"\n\t\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\t\tclass=\"cds--search-magnifier-icon\"\n\t\t\tsize=\"16\">\n\t\t</svg>\n\t</ng-template>\n\n\t<button\n\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\tclass=\"cds--search-close\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--search-close--hidden': !value || value.length === 0\n\t\t}\"\n\t\t[title]=\"clearButtonTitle\"\n\t\t(click)=\"clearSearch()\">\n\t\t<span class=\"cds--visually-hidden\">{{ clearButtonTitle }}</span>\n\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t</button>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableToolbarSearch, decorators: [{
            type: Component,
            args: [{ selector: "cds-table-toolbar-search, ibm-table-toolbar-search", providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: TableToolbarSearch,
                            multi: true
                        }
                    ], template: "<div\n\tclass=\"cds--search\"\n\t[ngClass]=\"{\n\t\t'cds--search--sm': size === 'sm',\n\t\t'cds--search--md': size === 'md',\n\t\t'cds--search--lg': size === 'lg',\n\t\t'cds--search--light': theme === 'light',\n\t\t'cds--skeleton': skeleton,\n\t\t'cds--search--expandable': expandable && !tableSearch,\n\t\t'cds--search--expanded': expandable && !tableSearch && active,\n\t\t'cds--toolbar-search': toolbar && !expandable,\n\t\t'cds--toolbar-search--active': toolbar && !expandable && active,\n\t\t'cds--toolbar-search-container-persistent': tableSearch && !expandable,\n\t\t'cds--toolbar-search-container-expandable': tableSearch && expandable,\n\t\t'cds--toolbar-search-container-active': tableSearch && expandable && active\n\t}\"\n\trole=\"search\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t(click)=\"openSearch()\">\n\t<label class=\"cds--label\" [for]=\"id\">{{label}}</label>\n\n\t<div *ngIf=\"skeleton; else enableInput\" class=\"cds--search-input\"></div>\n\t<ng-template #enableInput>\n\t\t<input\n\t\t\t#input\n\t\t\tclass=\"cds--search-input\"\n\t\t\t[type]=\"tableSearch || !toolbar ? 'text' : 'search'\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[required]=\"required\"\n\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t(keyup.enter)=\"onEnter()\"/>\n\t\t<button\n\t\t\t*ngIf=\"!tableSearch && toolbar\"\n\t\t\tclass=\"cds--toolbar-search__btn\"\n\t\t\t(click)=\"openSearch()\"\n\t\t\taria-label=\"Open search\">\n\t\t\t<svg cdsIcon=\"search\" size=\"16\" class=\"cds--search-magnifier-icon\"></svg>\n\t\t</button>\n\t\t<svg\n\t\t\tcdsIcon=\"search\"\n\t\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\t\tclass=\"cds--search-magnifier-icon\"\n\t\t\tsize=\"16\">\n\t\t</svg>\n\t</ng-template>\n\n\t<button\n\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\tclass=\"cds--search-close\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--search-close--hidden': !value || value.length === 0\n\t\t}\"\n\t\t[title]=\"clearButtonTitle\"\n\t\t(click)=\"clearSearch()\">\n\t\t<span class=\"cds--visually-hidden\">{{ clearButtonTitle }}</span>\n\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t</button>\n</div>\n" }]
        }], propDecorators: { hostClass: [{
                type: HostBinding,
                args: ["class.cds--toolbar-content"]
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtdG9vbGJhci1zZWFyY2guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL3RhYmxlL3Rvb2xiYXIvdGFibGUtdG9vbGJhci1zZWFyY2guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vc3JjL3NlYXJjaC9zZWFyY2guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQzFELE9BQU8sRUFDTixTQUFTLEVBQ1QsV0FBVyxFQUlYLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7O0FBYW5ELE1BQU0sT0FBTyxrQkFBbUIsU0FBUSxNQUFNO0lBWDlDOztRQVlDLGdCQUFXLEdBQUcsSUFBSSxDQUFDO1FBRW5CLFNBQUksR0FBdUIsSUFBSSxDQUFDO1FBRVcsY0FBUyxHQUFHLElBQUksQ0FBQztLQVM1RDtJQVBBLGVBQWU7UUFDZCxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2YsSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO2dCQUNmLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQzthQUNsQjtRQUNGLENBQUMsQ0FBQyxDQUFDO0lBQ0osQ0FBQzs7K0dBYlcsa0JBQWtCO21HQUFsQixrQkFBa0IsdUpBUm5CO1FBQ1Y7WUFDQyxPQUFPLEVBQUUsaUJBQWlCO1lBQzFCLFdBQVcsRUFBRSxrQkFBa0I7WUFDL0IsS0FBSyxFQUFFLElBQUk7U0FDWDtLQUNELGlEQ25CRiw0cEVBOERBOzJGRHpDYSxrQkFBa0I7a0JBWDlCLFNBQVM7K0JBQ0Msb0RBQW9ELGFBRW5EO3dCQUNWOzRCQUNDLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsb0JBQW9COzRCQUMvQixLQUFLLEVBQUUsSUFBSTt5QkFDWDtxQkFDRDs4QkFPMEMsU0FBUztzQkFBbkQsV0FBVzt1QkFBQyw0QkFBNEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBTZWFyY2ggfSBmcm9tIFwiY2FyYm9uLWNvbXBvbmVudHMtYW5ndWxhci9zZWFyY2hcIjtcbmltcG9ydCB7XG5cdENvbXBvbmVudCxcblx0SG9zdEJpbmRpbmcsXG5cdElucHV0LFxuXHRPbkluaXQsXG5cdEFmdGVyVmlld0luaXRcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSBcIkBhbmd1bGFyL2Zvcm1zXCI7XG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtdGFibGUtdG9vbGJhci1zZWFyY2gsIGlibS10YWJsZS10b29sYmFyLXNlYXJjaFwiLFxuXHR0ZW1wbGF0ZVVybDogXCIuLi8uLi9zZWFyY2gvc2VhcmNoLmNvbXBvbmVudC5odG1sXCIsXG5cdHByb3ZpZGVyczogW1xuXHRcdHtcblx0XHRcdHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuXHRcdFx0dXNlRXhpc3Rpbmc6IFRhYmxlVG9vbGJhclNlYXJjaCxcblx0XHRcdG11bHRpOiB0cnVlXG5cdFx0fVxuXHRdXG59KVxuZXhwb3J0IGNsYXNzIFRhYmxlVG9vbGJhclNlYXJjaCBleHRlbmRzIFNlYXJjaCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuXHR0YWJsZVNlYXJjaCA9IHRydWU7XG5cblx0c2l6ZTogXCJzbVwiIHwgXCJtZFwiIHwgXCJsZ1wiID0gXCJsZ1wiO1xuXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tdG9vbGJhci1jb250ZW50XCIpIGhvc3RDbGFzcyA9IHRydWU7XG5cblx0bmdBZnRlclZpZXdJbml0KCkge1xuXHRcdHNldFRpbWVvdXQoKCkgPT4ge1xuXHRcdFx0aWYgKHRoaXMudmFsdWUpIHtcblx0XHRcdFx0dGhpcy5vcGVuU2VhcmNoKCk7XG5cdFx0XHR9XG5cdFx0fSk7XG5cdH1cbn1cbiIsIjxkaXZcblx0Y2xhc3M9XCJjZHMtLXNlYXJjaFwiXG5cdFtuZ0NsYXNzXT1cIntcblx0XHQnY2RzLS1zZWFyY2gtLXNtJzogc2l6ZSA9PT0gJ3NtJyxcblx0XHQnY2RzLS1zZWFyY2gtLW1kJzogc2l6ZSA9PT0gJ21kJyxcblx0XHQnY2RzLS1zZWFyY2gtLWxnJzogc2l6ZSA9PT0gJ2xnJyxcblx0XHQnY2RzLS1zZWFyY2gtLWxpZ2h0JzogdGhlbWUgPT09ICdsaWdodCcsXG5cdFx0J2Nkcy0tc2tlbGV0b24nOiBza2VsZXRvbixcblx0XHQnY2RzLS1zZWFyY2gtLWV4cGFuZGFibGUnOiBleHBhbmRhYmxlICYmICF0YWJsZVNlYXJjaCxcblx0XHQnY2RzLS1zZWFyY2gtLWV4cGFuZGVkJzogZXhwYW5kYWJsZSAmJiAhdGFibGVTZWFyY2ggJiYgYWN0aXZlLFxuXHRcdCdjZHMtLXRvb2xiYXItc2VhcmNoJzogdG9vbGJhciAmJiAhZXhwYW5kYWJsZSxcblx0XHQnY2RzLS10b29sYmFyLXNlYXJjaC0tYWN0aXZlJzogdG9vbGJhciAmJiAhZXhwYW5kYWJsZSAmJiBhY3RpdmUsXG5cdFx0J2Nkcy0tdG9vbGJhci1zZWFyY2gtY29udGFpbmVyLXBlcnNpc3RlbnQnOiB0YWJsZVNlYXJjaCAmJiAhZXhwYW5kYWJsZSxcblx0XHQnY2RzLS10b29sYmFyLXNlYXJjaC1jb250YWluZXItZXhwYW5kYWJsZSc6IHRhYmxlU2VhcmNoICYmIGV4cGFuZGFibGUsXG5cdFx0J2Nkcy0tdG9vbGJhci1zZWFyY2gtY29udGFpbmVyLWFjdGl2ZSc6IHRhYmxlU2VhcmNoICYmIGV4cGFuZGFibGUgJiYgYWN0aXZlXG5cdH1cIlxuXHRyb2xlPVwic2VhcmNoXCJcblx0W2F0dHIuYXJpYS1sYWJlbF09XCJhcmlhTGFiZWxcIlxuXHQoY2xpY2spPVwib3BlblNlYXJjaCgpXCI+XG5cdDxsYWJlbCBjbGFzcz1cImNkcy0tbGFiZWxcIiBbZm9yXT1cImlkXCI+e3tsYWJlbH19PC9sYWJlbD5cblxuXHQ8ZGl2ICpuZ0lmPVwic2tlbGV0b247IGVsc2UgZW5hYmxlSW5wdXRcIiBjbGFzcz1cImNkcy0tc2VhcmNoLWlucHV0XCI+PC9kaXY+XG5cdDxuZy10ZW1wbGF0ZSAjZW5hYmxlSW5wdXQ+XG5cdFx0PGlucHV0XG5cdFx0XHQjaW5wdXRcblx0XHRcdGNsYXNzPVwiY2RzLS1zZWFyY2gtaW5wdXRcIlxuXHRcdFx0W3R5cGVdPVwidGFibGVTZWFyY2ggfHwgIXRvb2xiYXIgPyAndGV4dCcgOiAnc2VhcmNoJ1wiXG5cdFx0XHRbaWRdPVwiaWRcIlxuXHRcdFx0W3ZhbHVlXT1cInZhbHVlXCJcblx0XHRcdFthdXRvY29tcGxldGVdPVwiYXV0b2NvbXBsZXRlXCJcblx0XHRcdFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlclwiXG5cdFx0XHRbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuXHRcdFx0W3JlcXVpcmVkXT1cInJlcXVpcmVkXCJcblx0XHRcdChpbnB1dCk9XCJvblNlYXJjaCgkZXZlbnQudGFyZ2V0LnZhbHVlKVwiXG5cdFx0XHQoa2V5dXAuZW50ZXIpPVwib25FbnRlcigpXCIvPlxuXHRcdDxidXR0b25cblx0XHRcdCpuZ0lmPVwiIXRhYmxlU2VhcmNoICYmIHRvb2xiYXJcIlxuXHRcdFx0Y2xhc3M9XCJjZHMtLXRvb2xiYXItc2VhcmNoX19idG5cIlxuXHRcdFx0KGNsaWNrKT1cIm9wZW5TZWFyY2goKVwiXG5cdFx0XHRhcmlhLWxhYmVsPVwiT3BlbiBzZWFyY2hcIj5cblx0XHRcdDxzdmcgY2RzSWNvbj1cInNlYXJjaFwiIHNpemU9XCIxNlwiIGNsYXNzPVwiY2RzLS1zZWFyY2gtbWFnbmlmaWVyLWljb25cIj48L3N2Zz5cblx0XHQ8L2J1dHRvbj5cblx0XHQ8c3ZnXG5cdFx0XHRjZHNJY29uPVwic2VhcmNoXCJcblx0XHRcdCpuZ0lmPVwidGFibGVTZWFyY2ggfHwgIXRvb2xiYXJcIlxuXHRcdFx0Y2xhc3M9XCJjZHMtLXNlYXJjaC1tYWduaWZpZXItaWNvblwiXG5cdFx0XHRzaXplPVwiMTZcIj5cblx0XHQ8L3N2Zz5cblx0PC9uZy10ZW1wbGF0ZT5cblxuXHQ8YnV0dG9uXG5cdFx0Km5nSWY9XCJ0YWJsZVNlYXJjaCB8fCAhdG9vbGJhclwiXG5cdFx0Y2xhc3M9XCJjZHMtLXNlYXJjaC1jbG9zZVwiXG5cdFx0W25nQ2xhc3NdPVwie1xuXHRcdFx0J2Nkcy0tc2VhcmNoLWNsb3NlLS1oaWRkZW4nOiAhdmFsdWUgfHwgdmFsdWUubGVuZ3RoID09PSAwXG5cdFx0fVwiXG5cdFx0W3RpdGxlXT1cImNsZWFyQnV0dG9uVGl0bGVcIlxuXHRcdChjbGljayk9XCJjbGVhclNlYXJjaCgpXCI+XG5cdFx0PHNwYW4gY2xhc3M9XCJjZHMtLXZpc3VhbGx5LWhpZGRlblwiPnt7IGNsZWFyQnV0dG9uVGl0bGUgfX08L3NwYW4+XG5cdFx0PHN2ZyBjZHNJY29uPVwiY2xvc2VcIiBzaXplPVwiMTZcIj48L3N2Zz5cblx0PC9idXR0b24+XG48L2Rpdj5cbiJdfQ==