osl-base-extended 1.1.52 → 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,6 +2326,11 @@ 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) {
|
|
@@ -2334,11 +2339,11 @@ class OslSearchbar {
|
|
|
2334
2339
|
});
|
|
2335
2340
|
}
|
|
2336
2341
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSearchbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2337
|
-
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"] }] });
|
|
2338
2343
|
}
|
|
2339
2344
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSearchbar, decorators: [{
|
|
2340
2345
|
type: Component,
|
|
2341
|
-
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"] }]
|
|
2342
2347
|
}], propDecorators: { label: [{
|
|
2343
2348
|
type: Input,
|
|
2344
2349
|
args: ['label']
|