@ptsecurity/mosaic 15.2.0 → 15.3.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.
- package/_theming.scss +7 -6
- package/checkbox/_checkbox-theme.scss +4 -2
- package/core/datetime/date-adapter.d.ts +2 -2
- package/core/formatters/number/formatter.d.ts +5 -5
- package/core/forms/_forms.scss +1 -1
- package/core/locales/en-US.d.ts +11 -0
- package/core/locales/es-LA.d.ts +7 -0
- package/core/locales/fa-IR.d.ts +7 -0
- package/core/locales/index.d.ts +4 -0
- package/core/locales/locale-service.d.ts +63 -0
- package/core/locales/locale-service.module.d.ts +6 -0
- package/core/locales/pt-BR.d.ts +7 -0
- package/core/locales/ru-RU.d.ts +11 -0
- package/core/locales/zh-CN.d.ts +7 -0
- package/core/option/option.d.ts +2 -1
- package/core/public-api.d.ts +2 -0
- package/core/styles/theming/_components-theming.scss +0 -1
- package/core/title/index.d.ts +1 -0
- package/core/title/title-text-ref.d.ts +6 -0
- package/datepicker/calendar.component.d.ts +3 -2
- package/datepicker/datepicker-input.directive.d.ts +9 -4
- package/dropdown/dropdown-item.component.d.ts +3 -2
- package/esm2020/core/datetime/date-adapter.mjs +1 -1
- package/esm2020/core/formatters/number/formatter.mjs +17 -9
- package/esm2020/core/locales/en-US.mjs +10 -0
- package/esm2020/core/locales/es-LA.mjs +6 -0
- package/esm2020/core/locales/fa-IR.mjs +6 -0
- package/esm2020/core/locales/index.mjs +5 -0
- package/esm2020/core/locales/locale-service.mjs +70 -0
- package/esm2020/core/locales/locale-service.module.mjs +19 -0
- package/esm2020/core/locales/pt-BR.mjs +6 -0
- package/esm2020/core/locales/ru-RU.mjs +10 -0
- package/esm2020/core/locales/zh-CN.mjs +6 -0
- package/esm2020/core/option/option.mjs +9 -4
- package/esm2020/core/public-api.mjs +3 -1
- package/esm2020/core/title/index.mjs +2 -0
- package/esm2020/core/title/title-text-ref.mjs +3 -0
- package/esm2020/core/version.mjs +2 -2
- package/esm2020/datepicker/calendar.component.mjs +7 -4
- package/esm2020/datepicker/datepicker-input.directive.mjs +36 -13
- package/esm2020/dropdown/dropdown-item.component.mjs +13 -6
- package/esm2020/form-field/form-field.mjs +2 -2
- package/esm2020/list/list-selection.component.mjs +13 -8
- package/esm2020/list/list.component.mjs +2 -2
- package/esm2020/popover/popover.module.mjs +10 -4
- package/esm2020/select/select.component.mjs +56 -33
- package/esm2020/sidepanel/sidepanel-directives.mjs +5 -4
- package/esm2020/sidepanel/sidepanel.module.mjs +5 -1
- package/esm2020/tags/tag.component.mjs +9 -6
- package/esm2020/title/index.mjs +2 -0
- package/esm2020/title/ptsecurity-mosaic-title.mjs +5 -0
- package/esm2020/title/public-api.mjs +3 -0
- package/esm2020/title/title.directive.mjs +107 -0
- package/esm2020/title/title.module.mjs +21 -0
- package/esm2020/tree/tree-option.component.mjs +10 -5
- package/fesm2015/ptsecurity-mosaic-core.mjs +143 -14
- package/fesm2015/ptsecurity-mosaic-core.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-datepicker.mjs +42 -15
- package/fesm2015/ptsecurity-mosaic-datepicker.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-dropdown.mjs +12 -5
- package/fesm2015/ptsecurity-mosaic-dropdown.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-form-field.mjs +2 -2
- package/fesm2015/ptsecurity-mosaic-form-field.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-list.mjs +14 -9
- package/fesm2015/ptsecurity-mosaic-list.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-popover.mjs +9 -3
- package/fesm2015/ptsecurity-mosaic-popover.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-select.mjs +66 -41
- package/fesm2015/ptsecurity-mosaic-select.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-sidepanel.mjs +8 -3
- package/fesm2015/ptsecurity-mosaic-sidepanel.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-tags.mjs +8 -5
- package/fesm2015/ptsecurity-mosaic-tags.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-title.mjs +131 -0
- package/fesm2015/ptsecurity-mosaic-title.mjs.map +1 -0
- package/fesm2015/ptsecurity-mosaic-tree.mjs +9 -4
- package/fesm2015/ptsecurity-mosaic-tree.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-core.mjs +149 -14
- package/fesm2020/ptsecurity-mosaic-core.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-datepicker.mjs +41 -15
- package/fesm2020/ptsecurity-mosaic-datepicker.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-dropdown.mjs +12 -5
- package/fesm2020/ptsecurity-mosaic-dropdown.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-form-field.mjs +2 -2
- package/fesm2020/ptsecurity-mosaic-form-field.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-list.mjs +14 -9
- package/fesm2020/ptsecurity-mosaic-list.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-popover.mjs +9 -3
- package/fesm2020/ptsecurity-mosaic-popover.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-select.mjs +64 -41
- package/fesm2020/ptsecurity-mosaic-select.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-sidepanel.mjs +8 -3
- package/fesm2020/ptsecurity-mosaic-sidepanel.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-tags.mjs +8 -5
- package/fesm2020/ptsecurity-mosaic-tags.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-title.mjs +128 -0
- package/fesm2020/ptsecurity-mosaic-title.mjs.map +1 -0
- package/fesm2020/ptsecurity-mosaic-tree.mjs +9 -4
- package/fesm2020/ptsecurity-mosaic-tree.mjs.map +1 -1
- package/form-field/_form-field-theme.scss +1 -0
- package/input/_input-theme.scss +2 -1
- package/list/_list-base.scss +4 -0
- package/list/list-selection.component.d.ts +3 -2
- package/package.json +10 -2
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/default-theme.css +1 -1
- package/select/select.component.d.ts +10 -5
- package/sidepanel/_sidepanel-theme.scss +4 -4
- package/sidepanel/sidepanel.module.d.ts +3 -2
- package/tags/tag.component.d.ts +3 -2
- package/title/index.d.ts +1 -0
- package/title/public-api.d.ts +2 -0
- package/title/title.directive.d.ts +31 -0
- package/title/title.module.d.ts +11 -0
- package/tree/tree-option.component.d.ts +3 -2
@@ -13,7 +13,7 @@ import { McIconModule } from '@ptsecurity/mosaic/icon';
|
|
13
13
|
import * as i5 from '@ptsecurity/mosaic/select';
|
14
14
|
import { McSelectModule } from '@ptsecurity/mosaic/select';
|
15
15
|
import * as i1$1 from '@ptsecurity/mosaic/core';
|
16
|
-
import { MC_DATE_FORMATS, validationTooltipShowDelay, validationTooltipHideDelay } from '@ptsecurity/mosaic/core';
|
16
|
+
import { MC_DATE_FORMATS, validationTooltipShowDelay, validationTooltipHideDelay, MC_LOCALE_SERVICE } from '@ptsecurity/mosaic/core';
|
17
17
|
import * as i4 from '@ptsecurity/mosaic/form-field';
|
18
18
|
import { McFormFieldControl } from '@ptsecurity/mosaic/form-field';
|
19
19
|
import { Subject, Subscription, of, merge } from 'rxjs';
|
@@ -500,17 +500,17 @@ class McCalendar {
|
|
500
500
|
}
|
501
501
|
/**
|
502
502
|
* The current active date. This determines which time period is shown and which date is
|
503
|
-
* highlighted when using keyboard navigation.
|
503
|
+
* highlighted and used as the anchor on when using keyboard navigation.
|
504
504
|
*/
|
505
505
|
get activeDate() {
|
506
506
|
return this._activeDate;
|
507
507
|
}
|
508
508
|
set activeDate(value) {
|
509
|
-
this._activeDate = this.adapter.clampDate(value, this.minDate, this.maxDate);
|
509
|
+
this._activeDate = this.adapter.clampDate(value || this.getActiveDateDefault(), this.minDate, this.maxDate);
|
510
510
|
this.stateChanges.next();
|
511
511
|
}
|
512
512
|
ngAfterContentInit() {
|
513
|
-
this.activeDate = this.
|
513
|
+
this.activeDate = this.getActiveDateDefault();
|
514
514
|
}
|
515
515
|
ngOnDestroy() {
|
516
516
|
this.intlChanges.unsubscribe();
|
@@ -549,6 +549,9 @@ class McCalendar {
|
|
549
549
|
getValidDateOrNull(obj) {
|
550
550
|
return (this.adapter.isDateInstance(obj) && this.adapter.isValid(obj)) ? obj : null;
|
551
551
|
}
|
552
|
+
getActiveDateDefault() {
|
553
|
+
return this.startAt || this.adapter.today();
|
554
|
+
}
|
552
555
|
}
|
553
556
|
/** @nocollapse */ McCalendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McCalendar, deps: [{ token: McDatepickerIntl }, { token: i1$1.DateAdapter, optional: true }, { token: MC_DATE_FORMATS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
554
557
|
/** @nocollapse */ McCalendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: McCalendar, selector: "mc-calendar", inputs: { startAt: "startAt", selected: "selected", minDate: "minDate", maxDate: "maxDate", dateFilter: "dateFilter", dateClass: "dateClass" }, outputs: { selectedChange: "selectedChange", yearSelected: "yearSelected", monthSelected: "monthSelected", userSelection: "userSelection" }, host: { classAttribute: "mc-calendar" }, viewQueries: [{ propertyName: "monthView", first: true, predicate: McMonthView, descendants: true }], exportAs: ["mcCalendar"], usesOnChanges: true, ngImport: i0, template: "<mc-calendar-header\n [(activeDate)]=\"activeDate\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n (monthSelected)=\"monthSelected.emit(activeDate)\"\n (yearSelected)=\"yearSelected.emit(activeDate)\">\n</mc-calendar-header>\n\n<div class=\"mc-calendar__content\">\n <mc-month-view\n [(activeDate)]=\"activeDate\"\n [selected]=\"selected\"\n [dateFilter]=\"dateFilter\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [dateClass]=\"dateClass\"\n (selectedChange)=\"dateSelected($event!)\"\n (userSelection)=\"userSelected()\">\n </mc-month-view>\n</div>\n", styles: [".mc-calendar{display:block}.mc-calendar__content{padding:0 var(--mc-datepicker-calendar-size-padding-horizontal, 8px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px) var(--mc-datepicker-calendar-size-padding-horizontal, 8px);outline:none}.mc-calendar__table{border-spacing:0;border-collapse:collapse;width:100%}.mc-calendar__table-header th{text-align:center;height:30px}.mc-calendar__table-header th.mc-calendar__table-header-divider{position:relative;height:calc(var(--mc-datepicker-calendar-size-padding-blocks, 12px) - 2px)}.mc-calendar__table-header th.mc-calendar__table-header-divider:after{content:\"\";position:absolute;top:0;left:calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, 8px));right:calc(-1 * var(--mc-datepicker-calendar-size-padding-horizontal, 8px));height:var(--mc-datepicker-calendar-size-divider-width, 1px)}\n"], dependencies: [{ kind: "component", type: McMonthView, selector: "mc-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass"], outputs: ["selectedChange", "userSelection", "activeDateChange"], exportAs: ["mcMonthView"] }, { kind: "component", type: McCalendarHeader, selector: "mc-calendar-header", inputs: ["activeDate", "maxDate", "minDate"], outputs: ["activeDateChange", "monthSelected", "yearSelected"], exportAs: ["mcCalendarHeader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
@@ -704,11 +707,12 @@ class McDatepickerInputEvent {
|
|
704
707
|
let uniqueComponentIdSuffix = 0;
|
705
708
|
/** Directive used to connect an input to a McDatepicker. */
|
706
709
|
class McDatepickerInput {
|
707
|
-
constructor(elementRef, renderer, adapter, dateFormats) {
|
710
|
+
constructor(elementRef, renderer, adapter, dateFormats, localeService) {
|
708
711
|
this.elementRef = elementRef;
|
709
712
|
this.renderer = renderer;
|
710
713
|
this.adapter = adapter;
|
711
714
|
this.dateFormats = dateFormats;
|
715
|
+
this.localeService = localeService;
|
712
716
|
this.stateChanges = new Subject();
|
713
717
|
this.controlType = 'datepicker';
|
714
718
|
this.focused = false;
|
@@ -716,6 +720,7 @@ class McDatepickerInput {
|
|
716
720
|
this.valueChange = new EventEmitter();
|
717
721
|
/** Emits when the disabled state has changed */
|
718
722
|
this.disabledChange = new EventEmitter();
|
723
|
+
this._placeholder = '';
|
719
724
|
this._disabled = false;
|
720
725
|
this.incorrectInput = new EventEmitter();
|
721
726
|
/** Emits when a `change` event is fired on this `<input>`. */
|
@@ -730,6 +735,7 @@ class McDatepickerInput {
|
|
730
735
|
this.firstDigit = null;
|
731
736
|
this.secondDigit = null;
|
732
737
|
this.thirdDigit = null;
|
738
|
+
this.usePlaceholderFromInput = false;
|
733
739
|
// tslint:disable-next-line:no-empty
|
734
740
|
this.onTouched = () => { };
|
735
741
|
this.onInput = () => {
|
@@ -739,15 +745,15 @@ class McDatepickerInput {
|
|
739
745
|
this.lastValueValid = !!newTimeObj;
|
740
746
|
if (!newTimeObj) {
|
741
747
|
if (!this.viewValue) {
|
742
|
-
this.
|
743
|
-
this.
|
748
|
+
this.lastValueValid = false;
|
749
|
+
this.updateValue(newTimeObj);
|
744
750
|
}
|
745
751
|
else {
|
746
752
|
this.control.updateValueAndValidity();
|
747
753
|
}
|
748
754
|
return;
|
749
755
|
}
|
750
|
-
this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.
|
756
|
+
this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat), true);
|
751
757
|
this.selectNextDigitByCursor(this.selectionStart);
|
752
758
|
this.updateValue(newTimeObj);
|
753
759
|
};
|
@@ -790,11 +796,14 @@ class McDatepickerInput {
|
|
790
796
|
return setTimeout(() => this.control.updateValueAndValidity());
|
791
797
|
}
|
792
798
|
this.lastValueValid = !!newTimeObj;
|
793
|
-
this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.
|
799
|
+
this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat), true);
|
794
800
|
this.updateValue(newTimeObj);
|
795
801
|
};
|
796
802
|
this.updateLocaleParams = () => {
|
797
|
-
this.setFormat(this.
|
803
|
+
this.setFormat(this.dateInputFormat);
|
804
|
+
if (!this.usePlaceholderFromInput) {
|
805
|
+
this._placeholder = this.localeService.getParams('datepicker').placeholder;
|
806
|
+
}
|
798
807
|
this.value = this.value;
|
799
808
|
};
|
800
809
|
// tslint:disable-next-line:no-empty
|
@@ -839,10 +848,17 @@ class McDatepickerInput {
|
|
839
848
|
if (!this.dateFormats) {
|
840
849
|
throw createMissingDateImplError('MC_DATE_FORMATS');
|
841
850
|
}
|
842
|
-
this.setFormat(
|
851
|
+
this.setFormat(this.dateInputFormat);
|
843
852
|
this.localeSubscription = adapter.localeChanges
|
844
853
|
.subscribe(this.updateLocaleParams);
|
845
854
|
}
|
855
|
+
get placeholder() {
|
856
|
+
return this._placeholder;
|
857
|
+
}
|
858
|
+
set placeholder(value) {
|
859
|
+
this._placeholder = value;
|
860
|
+
this.usePlaceholderFromInput = true;
|
861
|
+
}
|
846
862
|
get required() {
|
847
863
|
return this._required;
|
848
864
|
}
|
@@ -954,6 +970,10 @@ class McDatepickerInput {
|
|
954
970
|
get isReadOnly() {
|
955
971
|
return this.elementRef.nativeElement.readOnly;
|
956
972
|
}
|
973
|
+
get dateInputFormat() {
|
974
|
+
var _a;
|
975
|
+
return ((_a = this.localeService) === null || _a === void 0 ? void 0 : _a.getParams('datepicker').dateInput) || this.dateFormats.dateInput;
|
976
|
+
}
|
957
977
|
get readyForParse() {
|
958
978
|
return !!(this.firstDigit && this.secondDigit && this.thirdDigit);
|
959
979
|
}
|
@@ -1065,7 +1085,9 @@ class McDatepickerInput {
|
|
1065
1085
|
}
|
1066
1086
|
}
|
1067
1087
|
onChange() {
|
1068
|
-
|
1088
|
+
setTimeout(() => {
|
1089
|
+
this.dateChange.emit(new McDatepickerInputEvent(this, this.elementRef.nativeElement));
|
1090
|
+
});
|
1069
1091
|
}
|
1070
1092
|
/** Handles blur events on the input. */
|
1071
1093
|
onBlur() {
|
@@ -1096,7 +1118,7 @@ class McDatepickerInput {
|
|
1096
1118
|
this.setViewValue(value);
|
1097
1119
|
return value;
|
1098
1120
|
}
|
1099
|
-
this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.
|
1121
|
+
this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat));
|
1100
1122
|
this.updateValue(newTimeObj);
|
1101
1123
|
}
|
1102
1124
|
toISO8601(value) {
|
@@ -1385,7 +1407,7 @@ class McDatepickerInput {
|
|
1385
1407
|
}
|
1386
1408
|
/** Formats a value and sets it on the input element. */
|
1387
1409
|
formatValue(value) {
|
1388
|
-
const formattedValue = value ? this.adapter.format(value, this.
|
1410
|
+
const formattedValue = value ? this.adapter.format(value, this.dateInputFormat) : '';
|
1389
1411
|
this.setViewValue(formattedValue);
|
1390
1412
|
}
|
1391
1413
|
setControl(control) {
|
@@ -1447,7 +1469,7 @@ class McDatepickerInput {
|
|
1447
1469
|
}
|
1448
1470
|
}
|
1449
1471
|
}
|
1450
|
-
/** @nocollapse */ McDatepickerInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McDatepickerInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.DateAdapter, optional: true }, { token: MC_DATE_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
1472
|
+
/** @nocollapse */ McDatepickerInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McDatepickerInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.DateAdapter, optional: true }, { token: MC_DATE_FORMATS, optional: true }, { token: MC_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
1451
1473
|
/** @nocollapse */ McDatepickerInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: McDatepickerInput, selector: "input[mcDatepicker]", inputs: { placeholder: "placeholder", required: "required", mcDatepicker: "mcDatepicker", mcDatepickerFilter: "mcDatepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled", id: "id", mcValidationTooltip: "mcValidationTooltip" }, outputs: { incorrectInput: "incorrectInput", dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "paste": "onPaste($event)", "change": "onChange()", "focus": "focusChanged(true)", "blur": "onBlur()", "keydown": "onKeyDown($event)" }, properties: { "attr.placeholder": "placeholder", "attr.required": "required", "attr.disabled": "disabled || null", "attr.min": "min ? toISO8601(min) : null", "attr.max": "max ? toISO8601(max) : null", "attr.autocomplete": "\"off\"" }, classAttribute: "mc-input mc-datepicker" }, providers: [
|
1452
1474
|
MC_DATEPICKER_VALUE_ACCESSOR,
|
1453
1475
|
MC_DATEPICKER_VALIDATORS,
|
@@ -1486,6 +1508,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
1486
1508
|
}, {
|
1487
1509
|
type: Inject,
|
1488
1510
|
args: [MC_DATE_FORMATS]
|
1511
|
+
}] }, { type: i1$1.McLocaleService, decorators: [{
|
1512
|
+
type: Optional
|
1513
|
+
}, {
|
1514
|
+
type: Inject,
|
1515
|
+
args: [MC_LOCALE_SERVICE]
|
1489
1516
|
}] }];
|
1490
1517
|
}, propDecorators: { placeholder: [{
|
1491
1518
|
type: Input
|