@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.
Files changed (115) hide show
  1. package/_theming.scss +7 -6
  2. package/checkbox/_checkbox-theme.scss +4 -2
  3. package/core/datetime/date-adapter.d.ts +2 -2
  4. package/core/formatters/number/formatter.d.ts +5 -5
  5. package/core/forms/_forms.scss +1 -1
  6. package/core/locales/en-US.d.ts +11 -0
  7. package/core/locales/es-LA.d.ts +7 -0
  8. package/core/locales/fa-IR.d.ts +7 -0
  9. package/core/locales/index.d.ts +4 -0
  10. package/core/locales/locale-service.d.ts +63 -0
  11. package/core/locales/locale-service.module.d.ts +6 -0
  12. package/core/locales/pt-BR.d.ts +7 -0
  13. package/core/locales/ru-RU.d.ts +11 -0
  14. package/core/locales/zh-CN.d.ts +7 -0
  15. package/core/option/option.d.ts +2 -1
  16. package/core/public-api.d.ts +2 -0
  17. package/core/styles/theming/_components-theming.scss +0 -1
  18. package/core/title/index.d.ts +1 -0
  19. package/core/title/title-text-ref.d.ts +6 -0
  20. package/datepicker/calendar.component.d.ts +3 -2
  21. package/datepicker/datepicker-input.directive.d.ts +9 -4
  22. package/dropdown/dropdown-item.component.d.ts +3 -2
  23. package/esm2020/core/datetime/date-adapter.mjs +1 -1
  24. package/esm2020/core/formatters/number/formatter.mjs +17 -9
  25. package/esm2020/core/locales/en-US.mjs +10 -0
  26. package/esm2020/core/locales/es-LA.mjs +6 -0
  27. package/esm2020/core/locales/fa-IR.mjs +6 -0
  28. package/esm2020/core/locales/index.mjs +5 -0
  29. package/esm2020/core/locales/locale-service.mjs +70 -0
  30. package/esm2020/core/locales/locale-service.module.mjs +19 -0
  31. package/esm2020/core/locales/pt-BR.mjs +6 -0
  32. package/esm2020/core/locales/ru-RU.mjs +10 -0
  33. package/esm2020/core/locales/zh-CN.mjs +6 -0
  34. package/esm2020/core/option/option.mjs +9 -4
  35. package/esm2020/core/public-api.mjs +3 -1
  36. package/esm2020/core/title/index.mjs +2 -0
  37. package/esm2020/core/title/title-text-ref.mjs +3 -0
  38. package/esm2020/core/version.mjs +2 -2
  39. package/esm2020/datepicker/calendar.component.mjs +7 -4
  40. package/esm2020/datepicker/datepicker-input.directive.mjs +36 -13
  41. package/esm2020/dropdown/dropdown-item.component.mjs +13 -6
  42. package/esm2020/form-field/form-field.mjs +2 -2
  43. package/esm2020/list/list-selection.component.mjs +13 -8
  44. package/esm2020/list/list.component.mjs +2 -2
  45. package/esm2020/popover/popover.module.mjs +10 -4
  46. package/esm2020/select/select.component.mjs +56 -33
  47. package/esm2020/sidepanel/sidepanel-directives.mjs +5 -4
  48. package/esm2020/sidepanel/sidepanel.module.mjs +5 -1
  49. package/esm2020/tags/tag.component.mjs +9 -6
  50. package/esm2020/title/index.mjs +2 -0
  51. package/esm2020/title/ptsecurity-mosaic-title.mjs +5 -0
  52. package/esm2020/title/public-api.mjs +3 -0
  53. package/esm2020/title/title.directive.mjs +107 -0
  54. package/esm2020/title/title.module.mjs +21 -0
  55. package/esm2020/tree/tree-option.component.mjs +10 -5
  56. package/fesm2015/ptsecurity-mosaic-core.mjs +143 -14
  57. package/fesm2015/ptsecurity-mosaic-core.mjs.map +1 -1
  58. package/fesm2015/ptsecurity-mosaic-datepicker.mjs +42 -15
  59. package/fesm2015/ptsecurity-mosaic-datepicker.mjs.map +1 -1
  60. package/fesm2015/ptsecurity-mosaic-dropdown.mjs +12 -5
  61. package/fesm2015/ptsecurity-mosaic-dropdown.mjs.map +1 -1
  62. package/fesm2015/ptsecurity-mosaic-form-field.mjs +2 -2
  63. package/fesm2015/ptsecurity-mosaic-form-field.mjs.map +1 -1
  64. package/fesm2015/ptsecurity-mosaic-list.mjs +14 -9
  65. package/fesm2015/ptsecurity-mosaic-list.mjs.map +1 -1
  66. package/fesm2015/ptsecurity-mosaic-popover.mjs +9 -3
  67. package/fesm2015/ptsecurity-mosaic-popover.mjs.map +1 -1
  68. package/fesm2015/ptsecurity-mosaic-select.mjs +66 -41
  69. package/fesm2015/ptsecurity-mosaic-select.mjs.map +1 -1
  70. package/fesm2015/ptsecurity-mosaic-sidepanel.mjs +8 -3
  71. package/fesm2015/ptsecurity-mosaic-sidepanel.mjs.map +1 -1
  72. package/fesm2015/ptsecurity-mosaic-tags.mjs +8 -5
  73. package/fesm2015/ptsecurity-mosaic-tags.mjs.map +1 -1
  74. package/fesm2015/ptsecurity-mosaic-title.mjs +131 -0
  75. package/fesm2015/ptsecurity-mosaic-title.mjs.map +1 -0
  76. package/fesm2015/ptsecurity-mosaic-tree.mjs +9 -4
  77. package/fesm2015/ptsecurity-mosaic-tree.mjs.map +1 -1
  78. package/fesm2020/ptsecurity-mosaic-core.mjs +149 -14
  79. package/fesm2020/ptsecurity-mosaic-core.mjs.map +1 -1
  80. package/fesm2020/ptsecurity-mosaic-datepicker.mjs +41 -15
  81. package/fesm2020/ptsecurity-mosaic-datepicker.mjs.map +1 -1
  82. package/fesm2020/ptsecurity-mosaic-dropdown.mjs +12 -5
  83. package/fesm2020/ptsecurity-mosaic-dropdown.mjs.map +1 -1
  84. package/fesm2020/ptsecurity-mosaic-form-field.mjs +2 -2
  85. package/fesm2020/ptsecurity-mosaic-form-field.mjs.map +1 -1
  86. package/fesm2020/ptsecurity-mosaic-list.mjs +14 -9
  87. package/fesm2020/ptsecurity-mosaic-list.mjs.map +1 -1
  88. package/fesm2020/ptsecurity-mosaic-popover.mjs +9 -3
  89. package/fesm2020/ptsecurity-mosaic-popover.mjs.map +1 -1
  90. package/fesm2020/ptsecurity-mosaic-select.mjs +64 -41
  91. package/fesm2020/ptsecurity-mosaic-select.mjs.map +1 -1
  92. package/fesm2020/ptsecurity-mosaic-sidepanel.mjs +8 -3
  93. package/fesm2020/ptsecurity-mosaic-sidepanel.mjs.map +1 -1
  94. package/fesm2020/ptsecurity-mosaic-tags.mjs +8 -5
  95. package/fesm2020/ptsecurity-mosaic-tags.mjs.map +1 -1
  96. package/fesm2020/ptsecurity-mosaic-title.mjs +128 -0
  97. package/fesm2020/ptsecurity-mosaic-title.mjs.map +1 -0
  98. package/fesm2020/ptsecurity-mosaic-tree.mjs +9 -4
  99. package/fesm2020/ptsecurity-mosaic-tree.mjs.map +1 -1
  100. package/form-field/_form-field-theme.scss +1 -0
  101. package/input/_input-theme.scss +2 -1
  102. package/list/_list-base.scss +4 -0
  103. package/list/list-selection.component.d.ts +3 -2
  104. package/package.json +10 -2
  105. package/prebuilt-themes/dark-theme.css +1 -1
  106. package/prebuilt-themes/default-theme.css +1 -1
  107. package/select/select.component.d.ts +10 -5
  108. package/sidepanel/_sidepanel-theme.scss +4 -4
  109. package/sidepanel/sidepanel.module.d.ts +3 -2
  110. package/tags/tag.component.d.ts +3 -2
  111. package/title/index.d.ts +1 -0
  112. package/title/public-api.d.ts +2 -0
  113. package/title/title.directive.d.ts +31 -0
  114. package/title/title.module.d.ts +11 -0
  115. 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.startAt || this.adapter.today();
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._value = null;
743
- this.cvaOnChange(null);
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.dateFormats.dateInput), true);
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.dateFormats.dateInput), true);
799
+ this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.dateInputFormat), true);
794
800
  this.updateValue(newTimeObj);
795
801
  };
796
802
  this.updateLocaleParams = () => {
797
- this.setFormat(this.dateFormats.dateInput);
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(dateFormats.dateInput);
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
- this.dateChange.emit(new McDatepickerInputEvent(this, this.elementRef.nativeElement));
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.dateFormats.dateInput));
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.dateFormats.dateInput) : '';
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