osl-base-extended 9.6.0 → 9.7.0
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.
|
@@ -3302,12 +3302,18 @@ class OslSearchbar {
|
|
|
3302
3302
|
label = "Type to Search...";
|
|
3303
3303
|
onSearch = new EventEmitter();
|
|
3304
3304
|
searchQuery = "";
|
|
3305
|
+
focused = false;
|
|
3305
3306
|
searchControl = new FormControl('');
|
|
3306
3307
|
onKeyChange() {
|
|
3307
3308
|
if (!this.searchQuery) {
|
|
3308
3309
|
this.onSearch.emit(this.searchQuery);
|
|
3309
3310
|
}
|
|
3310
3311
|
}
|
|
3312
|
+
clearSearch() {
|
|
3313
|
+
this.searchQuery = '';
|
|
3314
|
+
this.searchControl.setValue('', { emitEvent: false });
|
|
3315
|
+
this.onSearch.emit('');
|
|
3316
|
+
}
|
|
3311
3317
|
ngOnInit() {
|
|
3312
3318
|
this.searchControl.valueChanges.pipe(debounceTime$1(300), distinctUntilChanged$1()).subscribe(value => {
|
|
3313
3319
|
if (value) {
|
|
@@ -3316,11 +3322,11 @@ class OslSearchbar {
|
|
|
3316
3322
|
});
|
|
3317
3323
|
}
|
|
3318
3324
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSearchbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3319
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3325
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslSearchbar, isStandalone: false, selector: "osl-searchbar", inputs: { label: "label" }, outputs: { onSearch: "onSearch" }, ngImport: i0, template: "<div class=\"osl-searchbar-wrap\" [class.osl-searchbar-wrap--focused]=\"focused\">\n <svg class=\"osl-searchbar-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n </svg>\n <input\n type=\"text\"\n class=\"osl-searchbar-input\"\n (keyup)=\"onKeyChange()\"\n [formControl]=\"searchControl\"\n [placeholder]=\"label\"\n [(ngModel)]=\"searchQuery\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\"\n />\n @if (searchQuery) {\n <button type=\"button\" class=\"osl-searchbar-clear\" tabindex=\"-1\" aria-label=\"Clear search\" (click)=\"clearSearch()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n </svg>\n </button>\n }\n</div>\n", styles: [":host{display:inline-flex;width:260px;max-width:100%;flex-shrink:0}.osl-searchbar-wrap{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 14px;background:#f1f2f4;border:1px solid transparent;border-radius:999px;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.osl-searchbar-wrap:hover{background:#e7e9ec}.osl-searchbar-wrap--focused,.osl-searchbar-wrap--focused:hover{background:#fff;border-color:var(--osl-primary, #6366f1);box-shadow:0 0 0 3px color-mix(in srgb,var(--osl-primary, #6366f1) 14%,transparent),0 1px 2px #1018280a}.osl-searchbar-icon{width:16px;height:16px;color:#9ca3af;flex-shrink:0;transition:color .2s ease}.osl-searchbar-wrap--focused .osl-searchbar-icon{color:var(--osl-primary, #6366f1)}.osl-searchbar-input{flex:1;min-width:0;height:100%;border:none;outline:none;background:transparent;color:#1f2937;font-family:inherit;font-size:var(--osl-text-font-size, 13px)}.osl-searchbar-input::placeholder{color:#9ca3af}.osl-searchbar-clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;padding:0;border:none;border-radius:50%;background:transparent;color:#9ca3af;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .1s ease;animation:osl-searchbar-clear-in .15s ease}.osl-searchbar-clear svg{width:12px;height:12px}.osl-searchbar-clear:hover{background:#fff1f2;color:#f43f5e}.osl-searchbar-clear:active{transform:scale(.88)}@keyframes osl-searchbar-clear-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
3320
3326
|
}
|
|
3321
3327
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSearchbar, decorators: [{
|
|
3322
3328
|
type: Component,
|
|
3323
|
-
args: [{ selector: 'osl-searchbar', standalone: false, template: "
|
|
3329
|
+
args: [{ selector: 'osl-searchbar', standalone: false, template: "<div class=\"osl-searchbar-wrap\" [class.osl-searchbar-wrap--focused]=\"focused\">\n <svg class=\"osl-searchbar-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n </svg>\n <input\n type=\"text\"\n class=\"osl-searchbar-input\"\n (keyup)=\"onKeyChange()\"\n [formControl]=\"searchControl\"\n [placeholder]=\"label\"\n [(ngModel)]=\"searchQuery\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\"\n />\n @if (searchQuery) {\n <button type=\"button\" class=\"osl-searchbar-clear\" tabindex=\"-1\" aria-label=\"Clear search\" (click)=\"clearSearch()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n </svg>\n </button>\n }\n</div>\n", styles: [":host{display:inline-flex;width:260px;max-width:100%;flex-shrink:0}.osl-searchbar-wrap{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 14px;background:#f1f2f4;border:1px solid transparent;border-radius:999px;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.osl-searchbar-wrap:hover{background:#e7e9ec}.osl-searchbar-wrap--focused,.osl-searchbar-wrap--focused:hover{background:#fff;border-color:var(--osl-primary, #6366f1);box-shadow:0 0 0 3px color-mix(in srgb,var(--osl-primary, #6366f1) 14%,transparent),0 1px 2px #1018280a}.osl-searchbar-icon{width:16px;height:16px;color:#9ca3af;flex-shrink:0;transition:color .2s ease}.osl-searchbar-wrap--focused .osl-searchbar-icon{color:var(--osl-primary, #6366f1)}.osl-searchbar-input{flex:1;min-width:0;height:100%;border:none;outline:none;background:transparent;color:#1f2937;font-family:inherit;font-size:var(--osl-text-font-size, 13px)}.osl-searchbar-input::placeholder{color:#9ca3af}.osl-searchbar-clear{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;padding:0;border:none;border-radius:50%;background:transparent;color:#9ca3af;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .1s ease;animation:osl-searchbar-clear-in .15s ease}.osl-searchbar-clear svg{width:12px;height:12px}.osl-searchbar-clear:hover{background:#fff1f2;color:#f43f5e}.osl-searchbar-clear:active{transform:scale(.88)}@keyframes osl-searchbar-clear-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n"] }]
|
|
3324
3330
|
}], propDecorators: { label: [{
|
|
3325
3331
|
type: Input,
|
|
3326
3332
|
args: ['label']
|