osl-base-extended 1.1.51 → 1.1.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2326,17 +2326,24 @@ class OslSearchbar {
|
|
|
2326
2326
|
onSearch = new EventEmitter();
|
|
2327
2327
|
searchQuery = "";
|
|
2328
2328
|
searchControl = new FormControl('');
|
|
2329
|
+
onKeyChange() {
|
|
2330
|
+
if (!this.searchQuery) {
|
|
2331
|
+
this.onSearch.emit(this.searchQuery);
|
|
2332
|
+
}
|
|
2333
|
+
}
|
|
2329
2334
|
ngOnInit() {
|
|
2330
2335
|
this.searchControl.valueChanges.pipe(debounceTime$1(300), distinctUntilChanged$1()).subscribe(value => {
|
|
2331
|
-
|
|
2336
|
+
if (value) {
|
|
2337
|
+
this.onSearch.emit(value);
|
|
2338
|
+
}
|
|
2332
2339
|
});
|
|
2333
2340
|
}
|
|
2334
2341
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSearchbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2335
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: OslSearchbar, isStandalone: false, selector: "osl-searchbar", inputs: { label: "label" }, outputs: { onSearch: "onSearch" }, ngImport: i0, template: " <div class=\"search-wrap\" [class.focused]=\"searchQuery.length > 0\">\r\n <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"/>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\r\n </svg>\r\n <input\r\n type=\"text\"\r\n [formControl]=\"searchControl\"\r\n class=\"search-input\"\r\n [placeholder]=\"label\"\r\n [(ngModel)]=\"searchQuery\"\r\n />\r\n \r\n \r\n </div>", styles: [".search-wrap{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--osl-border);border-radius:5px;padding:0 14px;height:30px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.search-icon{width:15px;height:15px;color:var(--text-muted);flex-shrink:0;transition:color var(--transition-fast)}.search-wrap:focus-within .search-icon{color:var(--accent-cyan)}.search-input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-family:Lexend Deca,sans-serif;font-size:13px}.search-input::placeholder{color:var(--text-muted)}.search-kbd{font-size:10px;color:var(--text-muted);background:var(--bg-hover);border:1px solid var(--osl-border-subtle);border-radius:4px;padding:2px 5px;font-family:Lexend Deca,sans-serif;flex-shrink:0}.search-clear{width:16px;height:16px;color:var(--text-muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;transition:color var(--transition-fast)}.search-clear svg{width:12px;height:12px}.search-clear:hover{color:var(--text-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
2342
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: OslSearchbar, isStandalone: false, selector: "osl-searchbar", inputs: { label: "label" }, outputs: { onSearch: "onSearch" }, ngImport: i0, template: " <div class=\"search-wrap\" [class.focused]=\"searchQuery.length > 0\">\r\n <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"/>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\r\n </svg>\r\n <input\r\n type=\"text\"\r\n (onKeyUp)=\"onKeyChange()\"\r\n [formControl]=\"searchControl\"\r\n class=\"search-input\"\r\n [placeholder]=\"label\"\r\n [(ngModel)]=\"searchQuery\"\r\n />\r\n \r\n \r\n </div>", styles: [".search-wrap{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--osl-border);border-radius:5px;padding:0 14px;height:30px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.search-icon{width:15px;height:15px;color:var(--text-muted);flex-shrink:0;transition:color var(--transition-fast)}.search-wrap:focus-within .search-icon{color:var(--accent-cyan)}.search-input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-family:Lexend Deca,sans-serif;font-size:13px}.search-input::placeholder{color:var(--text-muted)}.search-kbd{font-size:10px;color:var(--text-muted);background:var(--bg-hover);border:1px solid var(--osl-border-subtle);border-radius:4px;padding:2px 5px;font-family:Lexend Deca,sans-serif;flex-shrink:0}.search-clear{width:16px;height:16px;color:var(--text-muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;transition:color var(--transition-fast)}.search-clear svg{width:12px;height:12px}.search-clear:hover{color:var(--text-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
2336
2343
|
}
|
|
2337
2344
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSearchbar, decorators: [{
|
|
2338
2345
|
type: Component,
|
|
2339
|
-
args: [{ selector: 'osl-searchbar', standalone: false, template: " <div class=\"search-wrap\" [class.focused]=\"searchQuery.length > 0\">\r\n <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"/>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\r\n </svg>\r\n <input\r\n type=\"text\"\r\n [formControl]=\"searchControl\"\r\n class=\"search-input\"\r\n [placeholder]=\"label\"\r\n [(ngModel)]=\"searchQuery\"\r\n />\r\n \r\n \r\n </div>", styles: [".search-wrap{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--osl-border);border-radius:5px;padding:0 14px;height:30px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.search-icon{width:15px;height:15px;color:var(--text-muted);flex-shrink:0;transition:color var(--transition-fast)}.search-wrap:focus-within .search-icon{color:var(--accent-cyan)}.search-input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-family:Lexend Deca,sans-serif;font-size:13px}.search-input::placeholder{color:var(--text-muted)}.search-kbd{font-size:10px;color:var(--text-muted);background:var(--bg-hover);border:1px solid var(--osl-border-subtle);border-radius:4px;padding:2px 5px;font-family:Lexend Deca,sans-serif;flex-shrink:0}.search-clear{width:16px;height:16px;color:var(--text-muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;transition:color var(--transition-fast)}.search-clear svg{width:12px;height:12px}.search-clear:hover{color:var(--text-primary)}\n"] }]
|
|
2346
|
+
args: [{ selector: 'osl-searchbar', standalone: false, template: " <div class=\"search-wrap\" [class.focused]=\"searchQuery.length > 0\">\r\n <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"/>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\r\n </svg>\r\n <input\r\n type=\"text\"\r\n (onKeyUp)=\"onKeyChange()\"\r\n [formControl]=\"searchControl\"\r\n class=\"search-input\"\r\n [placeholder]=\"label\"\r\n [(ngModel)]=\"searchQuery\"\r\n />\r\n \r\n \r\n </div>", styles: [".search-wrap{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--osl-border);border-radius:5px;padding:0 14px;height:30px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.search-icon{width:15px;height:15px;color:var(--text-muted);flex-shrink:0;transition:color var(--transition-fast)}.search-wrap:focus-within .search-icon{color:var(--accent-cyan)}.search-input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-family:Lexend Deca,sans-serif;font-size:13px}.search-input::placeholder{color:var(--text-muted)}.search-kbd{font-size:10px;color:var(--text-muted);background:var(--bg-hover);border:1px solid var(--osl-border-subtle);border-radius:4px;padding:2px 5px;font-family:Lexend Deca,sans-serif;flex-shrink:0}.search-clear{width:16px;height:16px;color:var(--text-muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;transition:color var(--transition-fast)}.search-clear svg{width:12px;height:12px}.search-clear:hover{color:var(--text-primary)}\n"] }]
|
|
2340
2347
|
}], propDecorators: { label: [{
|
|
2341
2348
|
type: Input,
|
|
2342
2349
|
args: ['label']
|