@ng-matero/extensions 15.1.1 → 15.1.2

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.
@@ -1169,12 +1169,12 @@ class MtxTime {
1169
1169
  }
1170
1170
  }
1171
1171
  /** @nocollapse */ MtxTime.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: MtxTime, deps: [{ token: i1.DatetimeAdapter }, { token: i0.ChangeDetectorRef }, { token: MtxDatetimepickerIntl }], target: i0.ɵɵFactoryTarget.Component });
1172
- /** @nocollapse */ MtxTime.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: MtxTime, selector: "mtx-time", inputs: { dateFilter: "dateFilter", interval: "interval", twelvehour: "twelvehour", AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", clockView: "clockView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection", ampmChange: "ampmChange", clockViewChange: "clockViewChange" }, host: { classAttribute: "mtx-time" }, viewQueries: [{ propertyName: "hourInputElement", first: true, predicate: ["hourInput"], descendants: true, read: (ElementRef) }, { propertyName: "hourInputDirective", first: true, predicate: ["hourInput"], descendants: true, read: MtxTimeInput }, { propertyName: "minuteInputElement", first: true, predicate: ["minuteInput"], descendants: true, read: (ElementRef) }, { propertyName: "minuteInputDirective", first: true, predicate: ["minuteInput"], descendants: true, read: MtxTimeInput }], exportAs: ["mtxTime"], usesOnChanges: true, ngImport: i0, template: "<div class=\"mtx-time-input-wrapper\">\n <div class=\"mtx-time-input-inner\">\n <input class=\"mtx-time-input\"\n [class.mtx-time-input-active]=\"clockView === 'hour'\"\n [class.mtx-time-input-warning]=\"!hourInput.valid\"\n #hourInput=\"mtxTimeInput\"\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n [timeMin]=\"twelvehour ? 1 : 0\"\n [timeMax]=\"twelvehour ? 12 : 23\"\n [timeValue]=\"hour\"\n (timeValueChanged)=\"handleHourInputChange($event)\"\n (focus)=\"handleFocus('hour')\" />\n\n <div class=\"mtx-time-seperator\">:</div>\n\n <input class=\"mtx-time-input\"\n [class.mtx-time-input-active]=\"clockView === 'minute'\"\n [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n #minuteInput=\"mtxTimeInput\"\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n [timeMin]=\"0\"\n [timeMax]=\"59\"\n [timeValue]=\"minute\"\n (timeValueChanged)=\"handleMinuteInputChange($event)\"\n [timeInterval]=\"interval\"\n (focus)=\"handleFocus('minute')\" />\n\n <div *ngIf=\"twelvehour\" class=\"mtx-time-ampm\">\n <button mat-button type=\"button\" class=\"mtx-time-am\"\n [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"ampmChange.emit('AM')\">AM</button>\n <button mat-button type=\"button\" class=\"mtx-time-pm\"\n [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"ampmChange.emit('PM')\">PM</button>\n </div>\n </div>\n</div>\n\n<mtx-clock (selectedChange)=\"_timeSelected($event)\"\n (activeDateChange)=\"_onActiveDateChange($event)\"\n [AMPM]=\"AMPM\"\n [dateFilter]=\"dateFilter\"\n [interval]=\"interval\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selected]=\"selected\"\n [startView]=\"clockView\"\n [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n<div class=\"mtx-time-button-wrapper\">\n <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"handleCancel()\">\n {{ _datetimepickerIntl.cancelLabel }}\n </button>\n <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"handleOk()\"\n [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\n {{ _datetimepickerIntl.okLabel }}\n </button>\n</div>\n", styles: [".mtx-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border-radius:8px;border:2px solid transparent;-webkit-appearance:none;appearance:none;outline:none}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-typography-button-font-weight: 400;flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid}.mtx-time-ampm .mtx-time-am{border-radius:8px 8px 0 0}.mtx-time-ampm .mtx-time-pm{border-radius:0 0 8px 8px;border-top:none}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }, { kind: "directive", type: MtxTimeInput, selector: "input.mtx-time-input", inputs: ["timeInterval", "timeMin", "timeMax", "timeValue"], outputs: ["timeValueChanged"], exportAs: ["mtxTimeInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1172
+ /** @nocollapse */ MtxTime.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.1", type: MtxTime, selector: "mtx-time", inputs: { dateFilter: "dateFilter", interval: "interval", twelvehour: "twelvehour", AMPM: "AMPM", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", clockView: "clockView" }, outputs: { selectedChange: "selectedChange", activeDateChange: "activeDateChange", _userSelection: "_userSelection", ampmChange: "ampmChange", clockViewChange: "clockViewChange" }, host: { classAttribute: "mtx-time" }, viewQueries: [{ propertyName: "hourInputElement", first: true, predicate: ["hourInput"], descendants: true, read: (ElementRef) }, { propertyName: "hourInputDirective", first: true, predicate: ["hourInput"], descendants: true, read: MtxTimeInput }, { propertyName: "minuteInputElement", first: true, predicate: ["minuteInput"], descendants: true, read: (ElementRef) }, { propertyName: "minuteInputDirective", first: true, predicate: ["minuteInput"], descendants: true, read: MtxTimeInput }], exportAs: ["mtxTime"], usesOnChanges: true, ngImport: i0, template: "<div class=\"mtx-time-input-wrapper\">\n <div class=\"mtx-time-input-inner\">\n <input class=\"mtx-time-input\"\n [class.mtx-time-input-active]=\"clockView === 'hour'\"\n [class.mtx-time-input-warning]=\"!hourInput.valid\"\n #hourInput=\"mtxTimeInput\"\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n [timeMin]=\"twelvehour ? 1 : 0\"\n [timeMax]=\"twelvehour ? 12 : 23\"\n [timeValue]=\"hour\"\n (timeValueChanged)=\"handleHourInputChange($event)\"\n (focus)=\"handleFocus('hour')\" />\n\n <div class=\"mtx-time-seperator\">:</div>\n\n <input class=\"mtx-time-input\"\n [class.mtx-time-input-active]=\"clockView === 'minute'\"\n [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n #minuteInput=\"mtxTimeInput\"\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n [timeMin]=\"0\"\n [timeMax]=\"59\"\n [timeValue]=\"minute\"\n (timeValueChanged)=\"handleMinuteInputChange($event)\"\n [timeInterval]=\"interval\"\n (focus)=\"handleFocus('minute')\" />\n\n <div *ngIf=\"twelvehour\" class=\"mtx-time-ampm\">\n <button mat-button type=\"button\" class=\"mtx-time-am\"\n [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"ampmChange.emit('AM')\">AM</button>\n <button mat-button type=\"button\" class=\"mtx-time-pm\"\n [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"ampmChange.emit('PM')\">PM</button>\n </div>\n </div>\n</div>\n\n<mtx-clock (selectedChange)=\"_timeSelected($event)\"\n (activeDateChange)=\"_onActiveDateChange($event)\"\n [AMPM]=\"AMPM\"\n [dateFilter]=\"dateFilter\"\n [interval]=\"interval\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selected]=\"selected\"\n [startView]=\"clockView\"\n [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n<div class=\"mtx-time-button-wrapper\">\n <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"handleCancel()\">\n {{ _datetimepickerIntl.cancelLabel }}\n </button>\n <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"handleOk()\"\n [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\n {{ _datetimepickerIntl.okLabel }}\n </button>\n</div>\n", styles: [".mtx-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border-radius:8px;border:2px solid transparent;-webkit-appearance:none;appearance:none;outline:none}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-typography-button-font-weight: 400;flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-radius:8px 8px 0 0}.mtx-time-ampm .mtx-time-pm{border-radius:0 0 8px 8px;border-top:none}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: MtxClock, selector: "mtx-clock", inputs: ["dateFilter", "interval", "twelvehour", "AMPM", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["selectedChange", "activeDateChange", "_userSelection"], exportAs: ["mtxClock"] }, { kind: "directive", type: MtxTimeInput, selector: "input.mtx-time-input", inputs: ["timeInterval", "timeMin", "timeMax", "timeValue"], outputs: ["timeValueChanged"], exportAs: ["mtxTimeInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1173
1173
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.1", ngImport: i0, type: MtxTime, decorators: [{
1174
1174
  type: Component,
1175
1175
  args: [{ selector: 'mtx-time', exportAs: 'mtxTime', host: {
1176
1176
  class: 'mtx-time',
1177
- }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mtx-time-input-wrapper\">\n <div class=\"mtx-time-input-inner\">\n <input class=\"mtx-time-input\"\n [class.mtx-time-input-active]=\"clockView === 'hour'\"\n [class.mtx-time-input-warning]=\"!hourInput.valid\"\n #hourInput=\"mtxTimeInput\"\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n [timeMin]=\"twelvehour ? 1 : 0\"\n [timeMax]=\"twelvehour ? 12 : 23\"\n [timeValue]=\"hour\"\n (timeValueChanged)=\"handleHourInputChange($event)\"\n (focus)=\"handleFocus('hour')\" />\n\n <div class=\"mtx-time-seperator\">:</div>\n\n <input class=\"mtx-time-input\"\n [class.mtx-time-input-active]=\"clockView === 'minute'\"\n [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n #minuteInput=\"mtxTimeInput\"\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n [timeMin]=\"0\"\n [timeMax]=\"59\"\n [timeValue]=\"minute\"\n (timeValueChanged)=\"handleMinuteInputChange($event)\"\n [timeInterval]=\"interval\"\n (focus)=\"handleFocus('minute')\" />\n\n <div *ngIf=\"twelvehour\" class=\"mtx-time-ampm\">\n <button mat-button type=\"button\" class=\"mtx-time-am\"\n [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"ampmChange.emit('AM')\">AM</button>\n <button mat-button type=\"button\" class=\"mtx-time-pm\"\n [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"ampmChange.emit('PM')\">PM</button>\n </div>\n </div>\n</div>\n\n<mtx-clock (selectedChange)=\"_timeSelected($event)\"\n (activeDateChange)=\"_onActiveDateChange($event)\"\n [AMPM]=\"AMPM\"\n [dateFilter]=\"dateFilter\"\n [interval]=\"interval\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selected]=\"selected\"\n [startView]=\"clockView\"\n [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n<div class=\"mtx-time-button-wrapper\">\n <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"handleCancel()\">\n {{ _datetimepickerIntl.cancelLabel }}\n </button>\n <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"handleOk()\"\n [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\n {{ _datetimepickerIntl.okLabel }}\n </button>\n</div>\n", styles: [".mtx-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border-radius:8px;border:2px solid transparent;-webkit-appearance:none;appearance:none;outline:none}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-typography-button-font-weight: 400;flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid}.mtx-time-ampm .mtx-time-am{border-radius:8px 8px 0 0}.mtx-time-ampm .mtx-time-pm{border-radius:0 0 8px 8px;border-top:none}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
1177
+ }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mtx-time-input-wrapper\">\n <div class=\"mtx-time-input-inner\">\n <input class=\"mtx-time-input\"\n [class.mtx-time-input-active]=\"clockView === 'hour'\"\n [class.mtx-time-input-warning]=\"!hourInput.valid\"\n #hourInput=\"mtxTimeInput\"\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n [timeMin]=\"twelvehour ? 1 : 0\"\n [timeMax]=\"twelvehour ? 12 : 23\"\n [timeValue]=\"hour\"\n (timeValueChanged)=\"handleHourInputChange($event)\"\n (focus)=\"handleFocus('hour')\" />\n\n <div class=\"mtx-time-seperator\">:</div>\n\n <input class=\"mtx-time-input\"\n [class.mtx-time-input-active]=\"clockView === 'minute'\"\n [class.mtx-time-input-warning]=\"!minuteInput.valid\"\n #minuteInput=\"mtxTimeInput\"\n type=\"text\"\n inputmode=\"numeric\"\n maxlength=\"2\"\n [timeMin]=\"0\"\n [timeMax]=\"59\"\n [timeValue]=\"minute\"\n (timeValueChanged)=\"handleMinuteInputChange($event)\"\n [timeInterval]=\"interval\"\n (focus)=\"handleFocus('minute')\" />\n\n <div *ngIf=\"twelvehour\" class=\"mtx-time-ampm\">\n <button mat-button type=\"button\" class=\"mtx-time-am\"\n [class.mtx-time-ampm-active]=\"AMPM === 'AM'\" aria-label=\"AM\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"ampmChange.emit('AM')\">AM</button>\n <button mat-button type=\"button\" class=\"mtx-time-pm\"\n [class.mtx-time-ampm-active]=\"AMPM === 'PM'\" aria-label=\"PM\"\n (keydown)=\"$event.stopPropagation()\"\n (click)=\"ampmChange.emit('PM')\">PM</button>\n </div>\n </div>\n</div>\n\n<mtx-clock (selectedChange)=\"_timeSelected($event)\"\n (activeDateChange)=\"_onActiveDateChange($event)\"\n [AMPM]=\"AMPM\"\n [dateFilter]=\"dateFilter\"\n [interval]=\"interval\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [selected]=\"selected\"\n [startView]=\"clockView\"\n [twelvehour]=\"twelvehour\">\n</mtx-clock>\n\n<div class=\"mtx-time-button-wrapper\">\n <button class=\"mtx-time-cancel-button\" mat-button type=\"button\" (click)=\"handleCancel()\">\n {{ _datetimepickerIntl.cancelLabel }}\n </button>\n <button class=\"mtx-time-ok-button\" mat-button type=\"button\" (click)=\"handleOk()\"\n [disabled]=\"minuteInputDirective?.invalid || hourInputDirective?.invalid\">\n {{ _datetimepickerIntl.okLabel }}\n </button>\n</div>\n", styles: [".mtx-time{display:block;outline:none;-webkit-user-select:none;user-select:none}.mtx-time-input-wrapper{padding:8px 0;text-align:center}.mtx-time-input-inner{display:inline-flex;height:56px}.mtx-time-input{box-sizing:border-box;width:72px;height:100%;padding:0;font-size:36px;text-align:center;border-radius:8px;border:2px solid transparent;-webkit-appearance:none;appearance:none;outline:none}.mtx-time-seperator{display:inline-flex;justify-content:center;align-items:center;width:24px;font-size:36px}.mtx-time-ampm{display:inline-flex;flex-direction:column;margin-left:12px}[dir=rtl] .mtx-time-ampm{margin-left:auto;margin-right:12px}.mtx-time-ampm .mtx-time-am,.mtx-time-ampm .mtx-time-pm{--mdc-typography-button-font-weight: 400;flex:1;width:40px;min-width:auto;border-width:1px;border-style:solid}.mtx-time-ampm .mtx-time-am .mat-mdc-button-touch-target,.mtx-time-ampm .mtx-time-pm .mat-mdc-button-touch-target{height:100%}.mtx-time-ampm .mtx-time-am{border-radius:8px 8px 0 0}.mtx-time-ampm .mtx-time-pm{border-radius:0 0 8px 8px;border-top:none}.mtx-time-button-wrapper{display:flex;justify-content:flex-end;padding-top:8px}.mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-time-button-wrapper .mat-mdc-button-base+.mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
1178
1178
  }], ctorParameters: function () { return [{ type: i1.DatetimeAdapter }, { type: i0.ChangeDetectorRef }, { type: MtxDatetimepickerIntl }]; }, propDecorators: { selectedChange: [{
1179
1179
  type: Output
1180
1180
  }], activeDateChange: [{