@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
37 lines • 8.14 kB
JavaScript
import { Component } from '@angular/core';
import { BaseSearchComponent } from '../base-search.component';
import * as i0 from "@angular/core";
import * as i1 from "../../../date-time-picker/date-time-picker.component";
import * as i2 from "../../../../directives/focus-if/focus-if.directive";
import * as i3 from "@angular/forms";
import * as i4 from "../../../icon/icon.component";
import * as i5 from "../../../popover/popover.directive";
import * as i6 from "@angular/common";
export class SearchDateComponent extends BaseSearchComponent {
constructor() {
super(...arguments);
this.type = 'date';
}
get label() {
return this.config.label;
}
get placeholder() {
return this.config.placeholder || 'Enter date';
}
get dateInputAriaLabel() {
return this.config.dateInputAriaLabel || 'Selected date';
}
ngOnInit() {
// by default set to the current date if not specified
if (!this.value) {
this.value = new Date();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SearchDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: SearchDateComponent, selector: "ux-search-date", usesInheritance: true, ngImport: i0, template: "@if (label) {\n <label class=\"form-label\">{{ label }}</label>\n}\n\n<div class=\"input-group date m-nil\">\n <span class=\"input-group-addon\" tabindex=\"1\" (click)=\"popover.show()\">\n <ux-icon name=\"calendar\"></ux-icon>\n </span>\n <input type=\"text\"\n class=\"form-control\"\n [attr.aria-label]=\"dateInputAriaLabel\"\n [placeholder]=\"placeholder\"\n #popover=\"ux-popover\"\n [ngModel]=\"value | date:'dd MMMM yyyy'\"\n [uxPopover]=\"popoverTemplate\"\n placement=\"bottom\"\n popoverClass=\"date-time-picker-popover\"\n [focusIf]=\"focus\">\n </div>\n\n <ng-template #popoverTemplate>\n <ux-date-time-picker [(date)]=\"value\" [showTime]=\"false\"></ux-date-time-picker>\n </ng-template>", dependencies: [{ kind: "component", type: i1.DateTimePickerComponent, selector: "ux-date-time-picker", inputs: ["showDate", "showTime", "showTimezone", "showSeconds", "showMeridian", "showSpinners", "weekdays", "months", "monthsShort", "meridians", "nowBtnText", "showNowBtn", "timezones", "startOfWeek", "nowBtnAriaLabel", "date", "timezone", "min", "max"], outputs: ["dateChange", "timezoneChange"] }, { kind: "directive", type: i2.FocusIfDirective, selector: "[focusIf]", inputs: ["focusIfDelay", "focusIfScroll", "focusIf"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.IconComponent, selector: "ux-icon", inputs: ["name", "size", "rotate", "flipHorizontal", "flipVertical"] }, { kind: "directive", type: i5.PopoverDirective, selector: "[uxPopover]", inputs: ["uxPopover", "popoverTitle", "popoverDisabled", "popoverClass", "popoverRole", "popoverContext", "popoverDelay", "showTriggers", "hideTriggers"], exportAs: ["ux-popover"] }, { kind: "pipe", type: i6.DatePipe, name: "date" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SearchDateComponent, decorators: [{
type: Component,
args: [{ selector: 'ux-search-date', template: "@if (label) {\n <label class=\"form-label\">{{ label }}</label>\n}\n\n<div class=\"input-group date m-nil\">\n <span class=\"input-group-addon\" tabindex=\"1\" (click)=\"popover.show()\">\n <ux-icon name=\"calendar\"></ux-icon>\n </span>\n <input type=\"text\"\n class=\"form-control\"\n [attr.aria-label]=\"dateInputAriaLabel\"\n [placeholder]=\"placeholder\"\n #popover=\"ux-popover\"\n [ngModel]=\"value | date:'dd MMMM yyyy'\"\n [uxPopover]=\"popoverTemplate\"\n placement=\"bottom\"\n popoverClass=\"date-time-picker-popover\"\n [focusIf]=\"focus\">\n </div>\n\n <ng-template #popoverTemplate>\n <ux-date-time-picker [(date)]=\"value\" [showTime]=\"false\"></ux-date-time-picker>\n </ng-template>" }]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9zZWFyY2gtYnVpbGRlci9zZWFyY2gtY29tcG9uZW50cy9kYXRlL2RhdGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvc2VhcmNoLWJ1aWxkZXIvc2VhcmNoLWNvbXBvbmVudHMvZGF0ZS9kYXRlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDbEQsT0FBTyxFQUFFLG1CQUFtQixFQUE2QixNQUFNLDBCQUEwQixDQUFDOzs7Ozs7OztBQU0xRixNQUFNLE9BQU8sbUJBQW9CLFNBQVEsbUJBQW1CO0lBSjVEOztRQU1FLFNBQUksR0FBVyxNQUFNLENBQUM7S0FxQnZCO0lBbkJDLElBQUksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUM7SUFDM0IsQ0FBQztJQUVELElBQUksV0FBVztRQUNiLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQyxXQUFXLElBQUksWUFBWSxDQUFDO0lBQ2pELENBQUM7SUFFRCxJQUFJLGtCQUFrQjtRQUNwQixPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsa0JBQWtCLElBQUksZUFBZSxDQUFDO0lBQzNELENBQUM7SUFFRCxRQUFRO1FBRU4sc0RBQXNEO1FBQ3RELElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDaEIsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLElBQUksRUFBRSxDQUFDO1FBQzFCLENBQUM7SUFDSCxDQUFDOytHQXRCVSxtQkFBbUI7bUdBQW5CLG1CQUFtQiw2RUNQaEMsdXVCQXNCZ0I7OzRGRGZILG1CQUFtQjtrQkFKL0IsU0FBUzsrQkFDRSxnQkFBZ0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQmFzZVNlYXJjaENvbXBvbmVudCwgQmFzZVNlYXJjaENvbXBvbmVudENvbmZpZyB9IGZyb20gJy4uL2Jhc2Utc2VhcmNoLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3V4LXNlYXJjaC1kYXRlJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2RhdGUuY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIFNlYXJjaERhdGVDb21wb25lbnQgZXh0ZW5kcyBCYXNlU2VhcmNoQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcblxuICB0eXBlOiBzdHJpbmcgPSAnZGF0ZSc7XG5cbiAgZ2V0IGxhYmVsKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuY29uZmlnLmxhYmVsO1xuICB9XG5cbiAgZ2V0IHBsYWNlaG9sZGVyKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuY29uZmlnLnBsYWNlaG9sZGVyIHx8ICdFbnRlciBkYXRlJztcbiAgfVxuXG4gIGdldCBkYXRlSW5wdXRBcmlhTGFiZWwoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5jb25maWcuZGF0ZUlucHV0QXJpYUxhYmVsIHx8ICdTZWxlY3RlZCBkYXRlJztcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuXG4gICAgLy8gYnkgZGVmYXVsdCBzZXQgdG8gdGhlIGN1cnJlbnQgZGF0ZSBpZiBub3Qgc3BlY2lmaWVkXG4gICAgaWYgKCF0aGlzLnZhbHVlKSB7XG4gICAgICB0aGlzLnZhbHVlID0gbmV3IERhdGUoKTtcbiAgICB9XG4gIH1cbn1cblxuZXhwb3J0IGludGVyZmFjZSBTZWFyY2hEYXRlQ29uZmlnIGV4dGVuZHMgQmFzZVNlYXJjaENvbXBvbmVudENvbmZpZyB7XG4gIGRhdGVJbnB1dEFyaWFMYWJlbDogc3RyaW5nO1xufSIsIkBpZiAobGFiZWwpIHtcbiAgPGxhYmVsIGNsYXNzPVwiZm9ybS1sYWJlbFwiPnt7IGxhYmVsIH19PC9sYWJlbD5cbn1cblxuPGRpdiBjbGFzcz1cImlucHV0LWdyb3VwIGRhdGUgbS1uaWxcIj5cbiAgPHNwYW4gY2xhc3M9XCJpbnB1dC1ncm91cC1hZGRvblwiIHRhYmluZGV4PVwiMVwiIChjbGljayk9XCJwb3BvdmVyLnNob3coKVwiPlxuICAgIDx1eC1pY29uIG5hbWU9XCJjYWxlbmRhclwiPjwvdXgtaWNvbj5cbiAgPC9zcGFuPlxuICA8aW5wdXQgdHlwZT1cInRleHRcIlxuICAgIGNsYXNzPVwiZm9ybS1jb250cm9sXCJcbiAgICBbYXR0ci5hcmlhLWxhYmVsXT1cImRhdGVJbnB1dEFyaWFMYWJlbFwiXG4gICAgW3BsYWNlaG9sZGVyXT1cInBsYWNlaG9sZGVyXCJcbiAgICAjcG9wb3Zlcj1cInV4LXBvcG92ZXJcIlxuICAgIFtuZ01vZGVsXT1cInZhbHVlIHwgZGF0ZTonZGQgTU1NTSB5eXl5J1wiXG4gICAgW3V4UG9wb3Zlcl09XCJwb3BvdmVyVGVtcGxhdGVcIlxuICAgIHBsYWNlbWVudD1cImJvdHRvbVwiXG4gICAgcG9wb3ZlckNsYXNzPVwiZGF0ZS10aW1lLXBpY2tlci1wb3BvdmVyXCJcbiAgICBbZm9jdXNJZl09XCJmb2N1c1wiPlxuICA8L2Rpdj5cblxuICA8bmctdGVtcGxhdGUgI3BvcG92ZXJUZW1wbGF0ZT5cbiAgICA8dXgtZGF0ZS10aW1lLXBpY2tlciBbKGRhdGUpXT1cInZhbHVlXCIgW3Nob3dUaW1lXT1cImZhbHNlXCI+PC91eC1kYXRlLXRpbWUtcGlja2VyPlxuICA8L25nLXRlbXBsYXRlPiJdfQ==