@3mo/date-time-fields 0.13.0 → 0.14.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.
@@ -8,6 +8,9 @@ export declare class Calendar extends Component {
8
8
  value?: DateTimeRange;
9
9
  precision: FieldDateTimePrecision;
10
10
  includeWeek: boolean;
11
+ min?: DateTime;
12
+ max?: DateTime;
13
+ dateDisabled?: (date: DateTime) => boolean;
11
14
  private readonly datesController;
12
15
  view: FieldDateTimePrecision;
13
16
  setView(view: FieldDateTimePrecision, navigationDate?: import("@3mo/date-time/DateTime.js").DateTime): void;
@@ -24,6 +27,7 @@ export declare class Calendar extends Component {
24
27
  protected getWeekTemplate(date: DateTime, month: ReadonlyArray<DateTime>): import("lit-html").HTMLTemplateResult;
25
28
  private getDayTemplate;
26
29
  private handleItemClick;
30
+ private isDisabled;
27
31
  private isNavigating;
28
32
  private isNow;
29
33
  private isStart;
@@ -1 +1 @@
1
- {"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../selection/Calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmE,MAAM,WAAW,CAAA;AAEtG,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAA;AAErE;;GAEG;AACH,qBACa,QAAS,SAAQ,SAAS;IAC7B,QAAQ,CAAC,SAAS,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAE3B,KAAK,CAAC,EAAE,aAAa,CAAA;IACqC,SAAS,EAAG,sBAAsB,CAAA;IAC5E,WAAW,UAAQ;IAE/D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAoC;IAE3D,IAAI,yBAA6B;IAC1C,OAAO,CAAC,IAAI,EAAE,sBAAsB,EAAE,cAAc,gDAAsC;IAK1F,IAAI,cAAc,kDAAiD;IAC7D,kBAAkB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAE,SAAS,GAAG,QAAoB;IAWnF,WAAoB,MAAM,kCAmKzB;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,OAAO,GAKlB;IAED,OAAO,CAAC,aAAa;IAIrB,cAAuB,QAAQ,0CAM9B;IAED,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,MAAM,KAAK,gBAAgB,GAiBlC;IAED,OAAO,CAAC,gBAAgB;IAyBxB,SAAS,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC;IAyBxE,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,eAAe,CAgBtB;IAED,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,KAAK;IAIb,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,KAAK;IAIb,OAAO,CAAC,SAAS;CAKjB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,QAAQ,CAAA;KACvB;CACD"}
1
+ {"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../selection/Calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmE,MAAM,WAAW,CAAA;AAGtG,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAA;AAErE;;GAEG;AACH,qBACa,QAAS,SAAQ,SAAS;IAC7B,QAAQ,CAAC,SAAS,EAAG,eAAe,CAAC,QAAQ,CAAC,CAAA;IAE3B,KAAK,CAAC,EAAE,aAAa,CAAA;IACqC,SAAS,EAAG,sBAAsB,CAAA;IAC5E,WAAW,UAAQ;IACnC,GAAG,CAAC,EAAE,QAAQ,CAAA;IACd,GAAG,CAAC,EAAE,QAAQ,CAAA;IACF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAA;IAElF,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAoC;IAE3D,IAAI,yBAA6B;IAC1C,OAAO,CAAC,IAAI,EAAE,sBAAsB,EAAE,cAAc,gDAAsC;IAK1F,IAAI,cAAc,kDAAiD;IAC7D,kBAAkB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAE,SAAS,GAAG,QAAoB;IAWnF,WAAoB,MAAM,kCAwKzB;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,OAAO,GAKlB;IAED,OAAO,CAAC,aAAa;IAIrB,cAAuB,QAAQ,0CAM9B;IAED,OAAO,CAAC,eAAe;IAsBvB,OAAO,CAAC,MAAM,KAAK,gBAAgB,GAiBlC;IAED,OAAO,CAAC,gBAAgB;IA0BxB,SAAS,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC;IA0BxE,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,eAAe,CAmBtB;IAED,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,KAAK;IAIb,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,KAAK;IAIb,OAAO,CAAC,SAAS;CAKjB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,QAAQ,CAAA;KACvB;CACD"}
@@ -1,6 +1,7 @@
1
1
  var Calendar_1;
2
2
  import { __decorate } from "tslib";
3
3
  import { Component, css, component, html, property, event, repeat, state, unsafeCSS } from '@a11d/lit';
4
+ import { hasChanged } from '@a11d/equals';
4
5
  import { CalendarDatesController } from './CalendarDatesController.js';
5
6
  import { FieldDateTimePrecision } from '../FieldDateTimePrecision.js';
6
7
  /**
@@ -15,6 +16,9 @@ let Calendar = Calendar_1 = class Calendar extends Component {
15
16
  this.handleItemClick = (date, precision) => {
16
17
  return () => {
17
18
  if (this.precision === precision) {
19
+ if (this.isDisabled(date, precision)) {
20
+ return;
21
+ }
18
22
  this.dateClick.dispatch(date);
19
23
  this.setNavigatingValue(date, 'smooth');
20
24
  }
@@ -109,6 +113,11 @@ let Calendar = Calendar_1 = class Calendar extends Component {
109
113
  &[data-in-range] {
110
114
  background: color-mix(in srgb, var(--mo-color-accent), transparent 92%);
111
115
  }
116
+
117
+ &[data-disabled] {
118
+ opacity: 0.38;
119
+ pointer-events: none;
120
+ }
112
121
  }
113
122
 
114
123
  /* Headings */
@@ -239,6 +248,7 @@ let Calendar = Calendar_1 = class Calendar extends Component {
239
248
  ?data-start=${this.isStart(date, FieldDateTimePrecision.Year)}
240
249
  ?data-end=${this.isEnd(date, FieldDateTimePrecision.Year)}
241
250
  ?data-in-range=${this.isInRange(date, FieldDateTimePrecision.Year)}
251
+ ?data-disabled=${this.isDisabled(date, FieldDateTimePrecision.Year)}
242
252
  @click=${this.handleItemClick(date, FieldDateTimePrecision.Year)}
243
253
  ${this.datesController.observerIntersectionNavigation(date, FieldDateTimePrecision.Month, FieldDateTimePrecision.Year)}
244
254
  >
@@ -277,6 +287,7 @@ let Calendar = Calendar_1 = class Calendar extends Component {
277
287
  ?data-start=${this.isStart(date, FieldDateTimePrecision.Month)}
278
288
  ?data-end=${this.isEnd(date, FieldDateTimePrecision.Month)}
279
289
  ?data-in-range=${this.isInRange(date, FieldDateTimePrecision.Month)}
290
+ ?data-disabled=${this.isDisabled(date, FieldDateTimePrecision.Month)}
280
291
  @click=${this.handleItemClick(date, FieldDateTimePrecision.Month)}
281
292
  ${this.datesController.observerIntersectionNavigation(date, FieldDateTimePrecision.Day)}
282
293
  >
@@ -306,6 +317,7 @@ let Calendar = Calendar_1 = class Calendar extends Component {
306
317
  ?data-start=${this.isStart(date, FieldDateTimePrecision.Week)}
307
318
  ?data-end=${this.isEnd(date, FieldDateTimePrecision.Week)}
308
319
  ?data-in-range=${this.isInRange(date, FieldDateTimePrecision.Week)}
320
+ ?data-disabled=${this.isDisabled(date, FieldDateTimePrecision.Week)}
309
321
  @click=${this.precision === FieldDateTimePrecision.Day ? html.nothing : this.handleItemClick(date, FieldDateTimePrecision.Week)}
310
322
  ${this.datesController.observerIntersectionNavigation(date, FieldDateTimePrecision.Week)}
311
323
  >
@@ -326,12 +338,19 @@ let Calendar = Calendar_1 = class Calendar extends Component {
326
338
  ?data-start=${this.isStart(day, FieldDateTimePrecision.Day)}
327
339
  ?data-end=${this.isEnd(day, FieldDateTimePrecision.Day)}
328
340
  ?data-in-range=${this.isInRange(day, FieldDateTimePrecision.Day)}
341
+ ?data-disabled=${this.isDisabled(day, FieldDateTimePrecision.Day)}
329
342
  @click=${this.precision === FieldDateTimePrecision.Week ? html.nothing : this.handleItemClick(day, FieldDateTimePrecision.Day)}
330
343
  >
331
344
  ${day.format({ day: 'numeric' })}
332
345
  </div>
333
346
  `;
334
347
  }
348
+ isDisabled(date, precision) {
349
+ return false
350
+ || (!!this.min && precision.isSmallerThan(date, this.min) && !precision.equals(date, this.min))
351
+ || (!!this.max && precision.isSmallerThan(this.max, date) && !precision.equals(this.max, date))
352
+ || (this.dateDisabled?.(date) ?? false);
353
+ }
335
354
  isNavigating(date, precision) {
336
355
  if (this.view !== precision) {
337
356
  return false;
@@ -371,6 +390,15 @@ __decorate([
371
390
  __decorate([
372
391
  property({ type: Boolean, reflect: true })
373
392
  ], Calendar.prototype, "includeWeek", void 0);
393
+ __decorate([
394
+ property({ type: Object })
395
+ ], Calendar.prototype, "min", void 0);
396
+ __decorate([
397
+ property({ type: Object })
398
+ ], Calendar.prototype, "max", void 0);
399
+ __decorate([
400
+ property({ type: Object, hasChanged })
401
+ ], Calendar.prototype, "dateDisabled", void 0);
374
402
  __decorate([
375
403
  state()
376
404
  ], Calendar.prototype, "view", void 0);