@nova-ui/bits
Version:
SolarWinds Nova Framework
58 lines • 14.1 kB
JavaScript
// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to
// deal in the Software without restriction, including without limitation the
// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
// sell copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewEncapsulation, } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class QuickPickerComponent {
get presetKeys() {
return this.presetKeysOrder || Object.keys(this.presets);
}
constructor(changeDetector) {
this.changeDetector = changeDetector;
this.presetsTitle = $localize `Quick picks`;
/** callback to invoke on selecting specific preset */
this.presetSelected = new EventEmitter();
}
selectPreset(key) {
this.presetSelected.emit(key);
}
isPresetSelected(key) {
return this.selectedPreset === key;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QuickPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QuickPickerComponent, selector: "nui-quick-picker", inputs: { presets: "presets", pickerTitle: "pickerTitle", presetsTitle: "presetsTitle", selectedPreset: "selectedPreset", presetKeysOrder: "presetKeysOrder" }, outputs: { presetSelected: "presetSelected" }, ngImport: i0, template: "<div class=\"nui-quick-picker\">\n <div class=\"nui-quick-picker__presets\">\n <h4 class=\"nui-quick-picker-header nui-quick-picker__presets-header\">\n {{ presetsTitle }}\n </h4>\n <div\n *ngFor=\"let key of presetKeys\"\n (click)=\"selectPreset(key)\"\n [ngClass]=\"{\n 'nui-quick-picker__preset--selected': isPresetSelected(key)\n }\"\n class=\"nui-quick-picker__preset\"\n >\n {{ presets[key].name }}\n </div>\n </div>\n <div class=\"nui-quick-picker__divider\"></div>\n <div class=\"nui-quick-picker__picker\">\n <h4 class=\"nui-quick-picker-header nui-quick-picker__picker-header\">\n {{ pickerTitle }}\n </h4>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".nui-quick-picker{display:flex;flex-wrap:nowrap;padding:5px}.nui-quick-picker-header{margin:0}.nui-quick-picker-header:hover{cursor:default}.nui-quick-picker__presets-header{padding:8px 10px}.nui-quick-picker__preset{display:list-item;list-style-type:none;white-space:nowrap;margin-bottom:1px;font-size:13px;padding:5px 10px;cursor:pointer;color:var(--nui-color-text-default,#111)}.nui-quick-picker__preset:hover{color:var(--nui-color-text-default-hover,#000000);background-color:var(--nui-color-bg-light-hover,#f2f2f2)}.nui-quick-picker__preset--selected{background-color:var(--nui-color-selected,rgba(0, 196, 210, .1));font-weight:600}.nui-quick-picker__preset--selected:hover{background-color:var(--nui-color-selected-hover,rgba(0, 196, 210, .2))}.nui-quick-picker__preset:not(.nui-quick-picker__preset--selected){color:var(--nui-color-text-link,#0079aa)}.nui-quick-picker__preset:hover{color:var(--nui-color-text-default-hover,#000000)}.nui-quick-picker__presets{min-width:125px;background-color:var(--nui-color-bg-secondary,#fafafa);padding:5px 0}.nui-quick-picker__divider{background-color:var(--nui-color-line-default,#d9d9d9);width:1px}.nui-quick-picker__picker{min-width:155px;padding:5px 10px;flex-grow:1}.nui-quick-picker__picker-header{padding:8px 0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QuickPickerComponent, decorators: [{
type: Component,
args: [{ selector: "nui-quick-picker", encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"nui-quick-picker\">\n <div class=\"nui-quick-picker__presets\">\n <h4 class=\"nui-quick-picker-header nui-quick-picker__presets-header\">\n {{ presetsTitle }}\n </h4>\n <div\n *ngFor=\"let key of presetKeys\"\n (click)=\"selectPreset(key)\"\n [ngClass]=\"{\n 'nui-quick-picker__preset--selected': isPresetSelected(key)\n }\"\n class=\"nui-quick-picker__preset\"\n >\n {{ presets[key].name }}\n </div>\n </div>\n <div class=\"nui-quick-picker__divider\"></div>\n <div class=\"nui-quick-picker__picker\">\n <h4 class=\"nui-quick-picker-header nui-quick-picker__picker-header\">\n {{ pickerTitle }}\n </h4>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".nui-quick-picker{display:flex;flex-wrap:nowrap;padding:5px}.nui-quick-picker-header{margin:0}.nui-quick-picker-header:hover{cursor:default}.nui-quick-picker__presets-header{padding:8px 10px}.nui-quick-picker__preset{display:list-item;list-style-type:none;white-space:nowrap;margin-bottom:1px;font-size:13px;padding:5px 10px;cursor:pointer;color:var(--nui-color-text-default,#111)}.nui-quick-picker__preset:hover{color:var(--nui-color-text-default-hover,#000000);background-color:var(--nui-color-bg-light-hover,#f2f2f2)}.nui-quick-picker__preset--selected{background-color:var(--nui-color-selected,rgba(0, 196, 210, .1));font-weight:600}.nui-quick-picker__preset--selected:hover{background-color:var(--nui-color-selected-hover,rgba(0, 196, 210, .2))}.nui-quick-picker__preset:not(.nui-quick-picker__preset--selected){color:var(--nui-color-text-link,#0079aa)}.nui-quick-picker__preset:hover{color:var(--nui-color-text-default-hover,#000000)}.nui-quick-picker__presets{min-width:125px;background-color:var(--nui-color-bg-secondary,#fafafa);padding:5px 0}.nui-quick-picker__divider{background-color:var(--nui-color-line-default,#d9d9d9);width:1px}.nui-quick-picker__picker{min-width:155px;padding:5px 10px;flex-grow:1}.nui-quick-picker__picker-header{padding:8px 0}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { presets: [{
type: Input
}], pickerTitle: [{
type: Input
}], presetsTitle: [{
type: Input
}], selectedPreset: [{
type: Input
}], presetKeysOrder: [{
type: Input
}], presetSelected: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicXVpY2stcGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvdGltZS1mcmFtZS1waWNrZXIvcXVpY2stcGlja2VyL3F1aWNrLXBpY2tlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL3RpbWUtZnJhbWUtcGlja2VyL3F1aWNrLXBpY2tlci9xdWljay1waWNrZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEseURBQXlEO0FBQ3pELEVBQUU7QUFDRiwrRUFBK0U7QUFDL0UsNEVBQTRFO0FBQzVFLDhFQUE4RTtBQUM5RSwrRUFBK0U7QUFDL0UsOEVBQThFO0FBQzlFLDREQUE0RDtBQUM1RCxFQUFFO0FBQ0YsNkVBQTZFO0FBQzdFLHVEQUF1RDtBQUN2RCxFQUFFO0FBQ0YsNkVBQTZFO0FBQzdFLDRFQUE0RTtBQUM1RSwrRUFBK0U7QUFDL0UsMEVBQTBFO0FBQzFFLGlGQUFpRjtBQUNqRiw2RUFBNkU7QUFDN0UsaUJBQWlCO0FBRWpCLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sRUFDTixpQkFBaUIsR0FDcEIsTUFBTSxlQUFlLENBQUM7OztBQVd2QixNQUFNLE9BQU8sb0JBQW9CO0lBZTdCLElBQVcsVUFBVTtRQUNqQixPQUFPLElBQUksQ0FBQyxlQUFlLElBQUksTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDN0QsQ0FBQztJQUVELFlBQW1CLGNBQWlDO1FBQWpDLG1CQUFjLEdBQWQsY0FBYyxDQUFtQjtRQWhCM0MsaUJBQVksR0FBVyxTQUFTLENBQUEsYUFBYSxDQUFDO1FBU3ZELHNEQUFzRDtRQUNyQyxtQkFBYyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7SUFNTixDQUFDO0lBRWpELFlBQVksQ0FBQyxHQUFXO1FBQzNCLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFFTSxnQkFBZ0IsQ0FBQyxHQUFXO1FBQy9CLE9BQU8sSUFBSSxDQUFDLGNBQWMsS0FBSyxHQUFHLENBQUM7SUFDdkMsQ0FBQzsrR0EzQlEsb0JBQW9CO21HQUFwQixvQkFBb0IsdVFDdkNqQyx1MEJBd0JBOzs0RkRlYSxvQkFBb0I7a0JBUGhDLFNBQVM7K0JBQ0ksa0JBQWtCLGlCQUdiLGlCQUFpQixDQUFDLFFBQVEsbUJBQ3hCLHVCQUF1QixDQUFDLE1BQU07c0ZBR3RDLE9BQU87c0JBQWYsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBRUcsY0FBYztzQkFBdEIsS0FBSztnQkFLVSxlQUFlO3NCQUE5QixLQUFLO2dCQUdXLGNBQWM7c0JBQTlCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyIvLyDCqSAyMDIyIFNvbGFyV2luZHMgV29ybGR3aWRlLCBMTEMuIEFsbCByaWdodHMgcmVzZXJ2ZWQuXG4vL1xuLy8gUGVybWlzc2lvbiBpcyBoZXJlYnkgZ3JhbnRlZCwgZnJlZSBvZiBjaGFyZ2UsIHRvIGFueSBwZXJzb24gb2J0YWluaW5nIGEgY29weVxuLy8gIG9mIHRoaXMgc29mdHdhcmUgYW5kIGFzc29jaWF0ZWQgZG9jdW1lbnRhdGlvbiBmaWxlcyAodGhlIFwiU29mdHdhcmVcIiksIHRvXG4vLyAgZGVhbCBpbiB0aGUgU29mdHdhcmUgd2l0aG91dCByZXN0cmljdGlvbiwgaW5jbHVkaW5nIHdpdGhvdXQgbGltaXRhdGlvbiB0aGVcbi8vICByaWdodHMgdG8gdXNlLCBjb3B5LCBtb2RpZnksIG1lcmdlLCBwdWJsaXNoLCBkaXN0cmlidXRlLCBzdWJsaWNlbnNlLCBhbmQvb3Jcbi8vICBzZWxsIGNvcGllcyBvZiB0aGUgU29mdHdhcmUsIGFuZCB0byBwZXJtaXQgcGVyc29ucyB0byB3aG9tIHRoZSBTb2Z0d2FyZSBpc1xuLy8gIGZ1cm5pc2hlZCB0byBkbyBzbywgc3ViamVjdCB0byB0aGUgZm9sbG93aW5nIGNvbmRpdGlvbnM6XG4vL1xuLy8gVGhlIGFib3ZlIGNvcHlyaWdodCBub3RpY2UgYW5kIHRoaXMgcGVybWlzc2lvbiBub3RpY2Ugc2hhbGwgYmUgaW5jbHVkZWQgaW5cbi8vICBhbGwgY29waWVzIG9yIHN1YnN0YW50aWFsIHBvcnRpb25zIG9mIHRoZSBTb2Z0d2FyZS5cbi8vXG4vLyBUSEUgU09GVFdBUkUgSVMgUFJPVklERUQgXCJBUyBJU1wiLCBXSVRIT1VUIFdBUlJBTlRZIE9GIEFOWSBLSU5ELCBFWFBSRVNTIE9SXG4vLyAgSU1QTElFRCwgSU5DTFVESU5HIEJVVCBOT1QgTElNSVRFRCBUTyBUSEUgV0FSUkFOVElFUyBPRiBNRVJDSEFOVEFCSUxJVFksXG4vLyAgRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UgQU5EIE5PTklORlJJTkdFTUVOVC4gSU4gTk8gRVZFTlQgU0hBTEwgVEhFXG4vLyAgQVVUSE9SUyBPUiBDT1BZUklHSFQgSE9MREVSUyBCRSBMSUFCTEUgRk9SIEFOWSBDTEFJTSwgREFNQUdFUyBPUiBPVEhFUlxuLy8gIExJQUJJTElUWSwgV0hFVEhFUiBJTiBBTiBBQ1RJT04gT0YgQ09OVFJBQ1QsIFRPUlQgT1IgT1RIRVJXSVNFLCBBUklTSU5HIEZST00sXG4vLyAgT1VUIE9GIE9SIElOIENPTk5FQ1RJT04gV0lUSCBUSEUgU09GVFdBUkUgT1IgVEhFIFVTRSBPUiBPVEhFUiBERUFMSU5HUyBJTlxuLy8gIFRIRSBTT0ZUV0FSRS5cblxuaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICBDb21wb25lbnQsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIElucHV0LFxuICAgIE91dHB1dCxcbiAgICBWaWV3RW5jYXBzdWxhdGlvbixcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuaW1wb3J0IHsgSVF1aWNrUGlja1ByZXNldERpY3Rpb25hcnkgfSBmcm9tIFwiLi4vcHVibGljLWFwaVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogXCJudWktcXVpY2stcGlja2VyXCIsXG4gICAgdGVtcGxhdGVVcmw6IFwiLi9xdWljay1waWNrZXIuY29tcG9uZW50Lmh0bWxcIixcbiAgICBzdHlsZVVybHM6IFtcIi4vcXVpY2stcGlja2VyLmNvbXBvbmVudC5sZXNzXCJdLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLkVtdWxhdGVkLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBRdWlja1BpY2tlckNvbXBvbmVudCB7XG4gICAgQElucHV0KCkgcHJlc2V0czogSVF1aWNrUGlja1ByZXNldERpY3Rpb25hcnk7XG4gICAgQElucHV0KCkgcGlja2VyVGl0bGU6IHN0cmluZztcbiAgICBASW5wdXQoKSBwcmVzZXRzVGl0bGU6IHN0cmluZyA9ICRsb2NhbGl6ZWBRdWljayBwaWNrc2A7XG5cbiAgICBASW5wdXQoKSBzZWxlY3RlZFByZXNldD86IHN0cmluZztcblxuICAgIC8qKlxuICAgICAqIFRvIGNvbnRyb2wgYW4gb3JkZXIgb2YgcHJlc2V0S2V5c1xuICAgICAqL1xuICAgIEBJbnB1dCgpIHB1YmxpYyBwcmVzZXRLZXlzT3JkZXI6IHN0cmluZ1tdO1xuXG4gICAgLyoqIGNhbGxiYWNrIHRvIGludm9rZSBvbiBzZWxlY3Rpbmcgc3BlY2lmaWMgcHJlc2V0ICovXG4gICAgQE91dHB1dCgpIHB1YmxpYyBwcmVzZXRTZWxlY3RlZCA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gICAgcHVibGljIGdldCBwcmVzZXRLZXlzKCk6IHN0cmluZ1tdIHtcbiAgICAgICAgcmV0dXJuIHRoaXMucHJlc2V0S2V5c09yZGVyIHx8IE9iamVjdC5rZXlzKHRoaXMucHJlc2V0cyk7XG4gICAgfVxuXG4gICAgY29uc3RydWN0b3IocHVibGljIGNoYW5nZURldGVjdG9yOiBDaGFuZ2VEZXRlY3RvclJlZikge31cblxuICAgIHB1YmxpYyBzZWxlY3RQcmVzZXQoa2V5OiBzdHJpbmcpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5wcmVzZXRTZWxlY3RlZC5lbWl0KGtleSk7XG4gICAgfVxuXG4gICAgcHVibGljIGlzUHJlc2V0U2VsZWN0ZWQoa2V5OiBzdHJpbmcpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuc2VsZWN0ZWRQcmVzZXQgPT09IGtleTtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwibnVpLXF1aWNrLXBpY2tlclwiPlxuICAgIDxkaXYgY2xhc3M9XCJudWktcXVpY2stcGlja2VyX19wcmVzZXRzXCI+XG4gICAgICAgIDxoNCBjbGFzcz1cIm51aS1xdWljay1waWNrZXItaGVhZGVyIG51aS1xdWljay1waWNrZXJfX3ByZXNldHMtaGVhZGVyXCI+XG4gICAgICAgICAgICB7eyBwcmVzZXRzVGl0bGUgfX1cbiAgICAgICAgPC9oND5cbiAgICAgICAgPGRpdlxuICAgICAgICAgICAgKm5nRm9yPVwibGV0IGtleSBvZiBwcmVzZXRLZXlzXCJcbiAgICAgICAgICAgIChjbGljayk9XCJzZWxlY3RQcmVzZXQoa2V5KVwiXG4gICAgICAgICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICAgICAgICAgJ251aS1xdWljay1waWNrZXJfX3ByZXNldC0tc2VsZWN0ZWQnOiBpc1ByZXNldFNlbGVjdGVkKGtleSlcbiAgICAgICAgICAgIH1cIlxuICAgICAgICAgICAgY2xhc3M9XCJudWktcXVpY2stcGlja2VyX19wcmVzZXRcIlxuICAgICAgICA+XG4gICAgICAgICAgICB7eyBwcmVzZXRzW2tleV0ubmFtZSB9fVxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwibnVpLXF1aWNrLXBpY2tlcl9fZGl2aWRlclwiPjwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJudWktcXVpY2stcGlja2VyX19waWNrZXJcIj5cbiAgICAgICAgPGg0IGNsYXNzPVwibnVpLXF1aWNrLXBpY2tlci1oZWFkZXIgbnVpLXF1aWNrLXBpY2tlcl9fcGlja2VyLWhlYWRlclwiPlxuICAgICAgICAgICAge3sgcGlja2VyVGl0bGUgfX1cbiAgICAgICAgPC9oND5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuPC9kaXY+XG4iXX0=