@cupra/ui-kit 2.0.0-canary.79 → 2.0.0-canary.81

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 (79) hide show
  1. package/dist/cjs/components/ds-calendar/ds-calendar.cjs +26 -0
  2. package/dist/cjs/components/ds-calendar/styles/common.styles.cjs +38 -0
  3. package/dist/cjs/components/ds-calendar-day/ds-calendar-day.cjs +14 -0
  4. package/dist/cjs/components/ds-calendar-day/styles/common.styles.cjs +23 -0
  5. package/dist/cjs/components/ds-favourite-action/ds-favourite-action.cjs +12 -0
  6. package/dist/cjs/components/ds-favourite-action/styles/common.styles.cjs +16 -0
  7. package/dist/cjs/components/ds-theme-provider/ds-theme-provider.cjs +1 -1
  8. package/dist/cjs/index.cjs +1 -1
  9. package/dist/cjs/utils/IconsManager.cjs +1 -1
  10. package/dist/cjs/utils/PubSub.cjs +1 -1
  11. package/dist/cjs/utils/StylesRegistry/StylesRegistry.cjs +1 -1
  12. package/dist/cjs/utils/cssWithTokens.cjs +1 -1
  13. package/dist/cjs/utils/htmlWithTokens.cjs +1 -1
  14. package/dist/esm/components/ds-calendar/ds-calendar.js +276 -0
  15. package/dist/esm/components/ds-calendar/styles/common.styles.js +45 -0
  16. package/dist/esm/components/ds-calendar-day/ds-calendar-day.js +84 -0
  17. package/dist/esm/components/ds-calendar-day/styles/common.styles.js +30 -0
  18. package/dist/esm/components/ds-favourite-action/ds-favourite-action.js +91 -0
  19. package/dist/esm/components/ds-favourite-action/styles/common.styles.js +23 -0
  20. package/dist/esm/components/ds-theme-provider/ds-theme-provider.js +1 -1
  21. package/dist/esm/index.js +5 -2
  22. package/dist/esm/utils/IconsManager.js +1 -1
  23. package/dist/esm/utils/PubSub.js +1 -1
  24. package/dist/esm/utils/StylesRegistry/StylesRegistry.js +1 -1
  25. package/dist/esm/utils/cssWithTokens.js +1 -1
  26. package/dist/esm/utils/htmlWithTokens.js +1 -1
  27. package/dist/types/components/ds-calendar/ds-calendar.d.ts +42 -0
  28. package/dist/types/components/ds-calendar/ds-calendar.test.d.ts +8 -0
  29. package/dist/types/components/ds-calendar/ds-calendar.types.d.ts +35 -0
  30. package/dist/types/components/ds-calendar/styles/common.styles.d.ts +1 -0
  31. package/dist/types/components/ds-calendar-day/ds-calendar-day.d.ts +20 -0
  32. package/dist/types/components/ds-calendar-day/ds-calendar-day.test.d.ts +8 -0
  33. package/dist/types/components/ds-calendar-day/ds-calendar-day.types.d.ts +10 -0
  34. package/dist/types/components/ds-calendar-day/styles/common.styles.d.ts +1 -0
  35. package/dist/types/components/ds-favourite-action/ds-favourite-action.d.ts +23 -0
  36. package/dist/types/components/ds-favourite-action/ds-favourite-action.test.d.ts +8 -0
  37. package/dist/types/components/ds-favourite-action/ds-favourite-action.types.d.ts +7 -0
  38. package/dist/types/components/ds-favourite-action/styles/common.styles.d.ts +1 -0
  39. package/dist/types/components/index.d.ts +3 -0
  40. package/dist-react/cjs/components/ds-calendar/ds-calendar.cjs +26 -0
  41. package/dist-react/cjs/components/ds-calendar/styles/common.styles.cjs +38 -0
  42. package/dist-react/cjs/components/ds-calendar-day/ds-calendar-day.cjs +14 -0
  43. package/dist-react/cjs/components/ds-calendar-day/styles/common.styles.cjs +23 -0
  44. package/dist-react/cjs/components/ds-favourite-action/ds-favourite-action.cjs +12 -0
  45. package/dist-react/cjs/components/ds-favourite-action/styles/common.styles.cjs +16 -0
  46. package/dist-react/cjs/components/ds-theme-provider/ds-theme-provider.cjs +1 -1
  47. package/dist-react/cjs/index.cjs +1 -1
  48. package/dist-react/cjs/utils/IconsManager.cjs +1 -1
  49. package/dist-react/cjs/utils/PubSub.cjs +1 -1
  50. package/dist-react/cjs/utils/StylesRegistry/StylesRegistry.cjs +1 -1
  51. package/dist-react/cjs/utils/cssWithTokens.cjs +1 -1
  52. package/dist-react/cjs/utils/htmlWithTokens.cjs +1 -1
  53. package/dist-react/esm/components/ds-calendar/ds-calendar.js +276 -0
  54. package/dist-react/esm/components/ds-calendar/styles/common.styles.js +45 -0
  55. package/dist-react/esm/components/ds-calendar-day/ds-calendar-day.js +84 -0
  56. package/dist-react/esm/components/ds-calendar-day/styles/common.styles.js +30 -0
  57. package/dist-react/esm/components/ds-favourite-action/ds-favourite-action.js +91 -0
  58. package/dist-react/esm/components/ds-favourite-action/styles/common.styles.js +23 -0
  59. package/dist-react/esm/components/ds-theme-provider/ds-theme-provider.js +1 -1
  60. package/dist-react/esm/index.js +5 -2
  61. package/dist-react/esm/utils/IconsManager.js +1 -1
  62. package/dist-react/esm/utils/PubSub.js +1 -1
  63. package/dist-react/esm/utils/StylesRegistry/StylesRegistry.js +1 -1
  64. package/dist-react/esm/utils/cssWithTokens.js +1 -1
  65. package/dist-react/esm/utils/htmlWithTokens.js +1 -1
  66. package/dist-react/types/components/ds-calendar/ds-calendar.d.ts +42 -0
  67. package/dist-react/types/components/ds-calendar/ds-calendar.test.d.ts +8 -0
  68. package/dist-react/types/components/ds-calendar/ds-calendar.types.d.ts +35 -0
  69. package/dist-react/types/components/ds-calendar/styles/common.styles.d.ts +1 -0
  70. package/dist-react/types/components/ds-calendar-day/ds-calendar-day.d.ts +20 -0
  71. package/dist-react/types/components/ds-calendar-day/ds-calendar-day.test.d.ts +8 -0
  72. package/dist-react/types/components/ds-calendar-day/ds-calendar-day.types.d.ts +10 -0
  73. package/dist-react/types/components/ds-calendar-day/styles/common.styles.d.ts +1 -0
  74. package/dist-react/types/components/ds-favourite-action/ds-favourite-action.d.ts +23 -0
  75. package/dist-react/types/components/ds-favourite-action/ds-favourite-action.test.d.ts +8 -0
  76. package/dist-react/types/components/ds-favourite-action/ds-favourite-action.types.d.ts +7 -0
  77. package/dist-react/types/components/ds-favourite-action/styles/common.styles.d.ts +1 -0
  78. package/dist-react/types/components/index.d.ts +3 -0
  79. package/package.json +1 -1
@@ -0,0 +1,84 @@
1
+ import { UiKitElement as c } from "../base/UiKitElement.js";
2
+ import { customUiKitElement as h } from "../../decorators/customUiKitElement.js";
3
+ import { booleanConverter as l } from "../../utils/booleanConverter.js";
4
+ import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
5
+ import { html as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
6
+ import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
7
+ import { property as o } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
8
+ import { classMap as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
9
+ import { commonStyles as m } from "./styles/common.styles.js";
10
+ var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (e, a, d, i) => {
11
+ for (var r = i > 1 ? void 0 : i ? b(a, d) : a, n = e.length - 1, p; n >= 0; n--)
12
+ (p = e[n]) && (r = (i ? p(a, d, r) : p(r)) || r);
13
+ return i && r && f(a, d, r), r;
14
+ };
15
+ let t = class extends c {
16
+ constructor() {
17
+ super(...arguments), this.disabled = !1, this.selected = !1, this.today = !1, this.outsideMonth = !1;
18
+ }
19
+ get classes() {
20
+ return {
21
+ day: !0,
22
+ disabled: this.disabled,
23
+ selected: this.selected,
24
+ today: this.today,
25
+ "outside-month": this.outsideMonth
26
+ };
27
+ }
28
+ handleClick(e) {
29
+ if (this.disabled) {
30
+ e.preventDefault(), e.stopPropagation();
31
+ return;
32
+ }
33
+ this.dispatchEvent(
34
+ new CustomEvent("ds-calendar-day-change", {
35
+ bubbles: !0,
36
+ composed: !0,
37
+ detail: {
38
+ day: this.day
39
+ }
40
+ })
41
+ );
42
+ }
43
+ handleKeyDown(e) {
44
+ this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick(e));
45
+ }
46
+ render() {
47
+ return y`
48
+ <button
49
+ class=${u(this.classes)}
50
+ ?disabled=${this.disabled}
51
+ aria-label=${this.day ? `Day ${this.day}` : ""}
52
+ aria-selected=${this.selected}
53
+ aria-current=${this.today ? "date" : "false"}
54
+ tabindex=${this.disabled ? -1 : 0}
55
+ @click=${this.handleClick}
56
+ @keydown=${this.handleKeyDown}
57
+ >
58
+ ${this.day}
59
+ </button>
60
+ `;
61
+ }
62
+ };
63
+ t.styles = [m];
64
+ s([
65
+ o({ type: Number, reflect: !0 })
66
+ ], t.prototype, "day", 2);
67
+ s([
68
+ o({ type: Boolean, converter: l, reflect: !0 })
69
+ ], t.prototype, "disabled", 2);
70
+ s([
71
+ o({ type: Boolean, converter: l, reflect: !0 })
72
+ ], t.prototype, "selected", 2);
73
+ s([
74
+ o({ type: Boolean, converter: l, reflect: !0 })
75
+ ], t.prototype, "today", 2);
76
+ s([
77
+ o({ type: Boolean, converter: l, reflect: !0, attribute: "outside-month" })
78
+ ], t.prototype, "outsideMonth", 2);
79
+ t = s([
80
+ h("ds-calendar-day")
81
+ ], t);
82
+ export {
83
+ t as DsCalendarDay
84
+ };
@@ -0,0 +1,30 @@
1
+ import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
2
+ import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
3
+ import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
4
+ import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
5
+ const t = e`
6
+ :host {
7
+ display: inline-flex;
8
+ }
9
+
10
+ .day {
11
+ display: flex;
12
+ align-items: center;
13
+ justify-content: center;
14
+ box-sizing: border-box;
15
+ cursor: pointer;
16
+ user-select: none;
17
+ border: none;
18
+ background: none;
19
+ padding: 0;
20
+ margin: 0;
21
+ }
22
+
23
+ .day.disabled {
24
+ cursor: default;
25
+ pointer-events: none;
26
+ }
27
+ `;
28
+ export {
29
+ t as commonStyles
30
+ };
@@ -0,0 +1,91 @@
1
+ import { UiKitElement as p } from "../base/UiKitElement.js";
2
+ import { customUiKitElement as m } from "../../decorators/customUiKitElement.js";
3
+ import { booleanConverter as d } from "../../utils/booleanConverter.js";
4
+ import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
5
+ import { html as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
6
+ import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
7
+ import { property as a } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
8
+ import { state as h } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
9
+ import { classMap as f } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
10
+ import { commonStyles as b } from "./styles/common.styles.js";
11
+ var v = Object.defineProperty, S = Object.getOwnPropertyDescriptor, r = (t, s, o, l) => {
12
+ for (var i = l > 1 ? void 0 : l ? S(s, o) : s, c = t.length - 1, n; c >= 0; c--)
13
+ (n = t[c]) && (i = (l ? n(s, o, i) : n(i)) || i);
14
+ return l && i && v(s, o, i), i;
15
+ };
16
+ let e = class extends p {
17
+ constructor() {
18
+ super(...arguments), this.initialSelected = !1, this.disabled = !1, this._selected = !1, this._initializedFromInitialSelected = !1;
19
+ }
20
+ willUpdate(t) {
21
+ !this._initializedFromInitialSelected && t.has("initialSelected") && (this._selected = this.initialSelected, this._initializedFromInitialSelected = !0);
22
+ }
23
+ get currentSelected() {
24
+ return this.selected ?? this._selected;
25
+ }
26
+ handleClick() {
27
+ if (this.disabled) return;
28
+ const t = !this.currentSelected;
29
+ this.selected === void 0 && (this._selected = t), this.dispatchEvent(
30
+ new CustomEvent("ds-favourite-action:change", {
31
+ bubbles: !0,
32
+ composed: !0,
33
+ detail: {
34
+ selected: t
35
+ }
36
+ })
37
+ );
38
+ }
39
+ get iconName() {
40
+ return this.currentSelected ? "heart-filled" : "heart";
41
+ }
42
+ get iconTemplate() {
43
+ return this.componentFactory.createIcon({
44
+ class: "icon",
45
+ "icon-name": this.iconName
46
+ });
47
+ }
48
+ get classes() {
49
+ return {
50
+ button: !0,
51
+ selected: this.currentSelected,
52
+ disabled: this.disabled
53
+ };
54
+ }
55
+ render() {
56
+ return u`
57
+ <button
58
+ type="button"
59
+ class=${f(this.classes)}
60
+ ?disabled=${this.disabled}
61
+ aria-pressed=${this.currentSelected}
62
+ aria-label=${this.dataAriaLabel || (this.currentSelected ? "Remove from favourites" : "Add to favourites")}
63
+ @click=${this.handleClick}
64
+ >
65
+ ${this.iconTemplate}
66
+ </button>
67
+ `;
68
+ }
69
+ };
70
+ e.styles = [b];
71
+ r([
72
+ a({ type: Boolean, converter: d, attribute: "initial-selected" })
73
+ ], e.prototype, "initialSelected", 2);
74
+ r([
75
+ a({ type: Boolean, attribute: "selected" })
76
+ ], e.prototype, "selected", 2);
77
+ r([
78
+ a({ type: Boolean, converter: d, reflect: !0 })
79
+ ], e.prototype, "disabled", 2);
80
+ r([
81
+ a({ type: String, attribute: "data-aria-label" })
82
+ ], e.prototype, "dataAriaLabel", 2);
83
+ r([
84
+ h()
85
+ ], e.prototype, "_selected", 2);
86
+ e = r([
87
+ m("ds-favourite-action")
88
+ ], e);
89
+ export {
90
+ e as DsFavouriteAction
91
+ };
@@ -0,0 +1,23 @@
1
+ import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
2
+ import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
3
+ import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
4
+ import { css as n } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
5
+ const e = n`
6
+ :host {
7
+ display: inline-flex;
8
+ }
9
+
10
+ .button {
11
+ display: inline-flex;
12
+ box-sizing: border-box;
13
+ justify-content: center;
14
+ align-items: center;
15
+ cursor: pointer;
16
+ border: none;
17
+ padding: 0;
18
+ background: transparent;
19
+ }
20
+ `;
21
+ export {
22
+ e as commonStyles
23
+ };
@@ -54,7 +54,7 @@ let m = class extends v {
54
54
  }
55
55
  loadThemeStyles() {
56
56
  return this.loadStyles ? new Promise((t, o) => {
57
- const s = "/2.0.0-canary.79", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
57
+ const s = "/2.0.0-canary.81", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
58
58
  if (document.head.querySelector(`link[href="${r}"]`)) t();
59
59
  else {
60
60
  const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");
package/dist/esm/index.js CHANGED
@@ -9,6 +9,8 @@ import "./components/ds-breadcrumbs/ds-breadcrumbs.js";
9
9
  import "./components/ds-breadcrumbs-item/ds-breadcrumbs-item.js";
10
10
  import "./components/ds-bullets/ds-bullets.js";
11
11
  import "./components/ds-button/ds-button.js";
12
+ import "./components/ds-calendar/ds-calendar.js";
13
+ import "./components/ds-calendar-day/ds-calendar-day.js";
12
14
  import "./components/ds-carousel-indicator/ds-carousel-indicator.js";
13
15
  import "./components/ds-checkbox/ds-checkbox.js";
14
16
  import "./components/ds-checkbox-group/ds-checkbox-group.js";
@@ -22,6 +24,7 @@ import "./components/ds-dialog-fullscreen/ds-dialog-fullscreen.js";
22
24
  import "./components/ds-dialog-header/ds-dialog-header.js";
23
25
  import "./components/ds-divider/ds-divider.js";
24
26
  import "./components/ds-drawer/ds-drawer.js";
27
+ import "./components/ds-favourite-action/ds-favourite-action.js";
25
28
  import "./components/ds-hyperlink/ds-hyperlink.js";
26
29
  import "./components/ds-icon/ds-icon.js";
27
30
  import "./components/ds-icon-button/ds-icon-button.js";
@@ -77,7 +80,7 @@ import "./components/ds-navigation-controls/ds-navigation-controls.js";
77
80
  import "./components/ds-table/ds-table.js";
78
81
  import "./components/ds-table-row/ds-table-row.js";
79
82
  import "./components/ds-table-cell/ds-table-cell.js";
80
- import { iconNames as Bo } from "./components/ds-icon/iconNames.js";
83
+ import { iconNames as Eo } from "./components/ds-icon/iconNames.js";
81
84
  export {
82
- Bo as iconNames
85
+ Eo as iconNames
83
86
  };
@@ -25,7 +25,7 @@ class l {
25
25
  }), f.subscribe("theme", this.handleChangeTheme);
26
26
  }
27
27
  }
28
- const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.79"), h = globalThis;
28
+ const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.81"), h = globalThis;
29
29
  let i = h[c];
30
30
  i || (i = new l(), Object.defineProperty(h, c, {
31
31
  value: i,
@@ -18,7 +18,7 @@ class e {
18
18
  });
19
19
  }
20
20
  }
21
- const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.79"), t = globalThis;
21
+ const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.81"), t = globalThis;
22
22
  let b = t[u];
23
23
  b || (b = new e(), Object.defineProperty(t, u, {
24
24
  value: b,
@@ -7,7 +7,7 @@ class s {
7
7
  theme: t
8
8
  }) => {
9
9
  if (!t || !e) return;
10
- const c = `https://ds-assets.cupra.com/2.0.0-canary.79/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
10
+ const c = `https://ds-assets.cupra.com/2.0.0-canary.81/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
11
11
  if (r) return r;
12
12
  const i = h(() => this.fetchStyle({ url: c })).then((n) => (n || this.stylePromises.delete(c), n));
13
13
  return this.stylePromises.set(c, i), this.stylePromises.get(c);
@@ -3,7 +3,7 @@ import "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
3
3
  import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
4
4
  import { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
5
5
  function x(t, ...r) {
6
- const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-79"), i = n(e);
6
+ const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-81"), i = n(e);
7
7
  return o`${i}`;
8
8
  }
9
9
  export {
@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
3
3
  import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
4
4
  import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
5
5
  function x(t, ...r) {
6
- const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-79"), e = i(o);
6
+ const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-81"), e = i(o);
7
7
  return n`${e}`;
8
8
  }
9
9
  export {
@@ -0,0 +1,42 @@
1
+ import { UiKitElement } from '../base/UiKitElement.ts';
2
+ import '../ds-calendar-day/ds-calendar-day.ts';
3
+ import type { DsCalendarAttrs, DsCalendarVariant, WeekDay } from './ds-calendar.types';
4
+ export declare class DsCalendar extends UiKitElement {
5
+ static styles: import("lit").CSSResult[];
6
+ value: DsCalendarAttrs['value'];
7
+ variant: DsCalendarVariant;
8
+ locale: DsCalendarAttrs['locale'];
9
+ firstDayOfWeek: WeekDay;
10
+ minDate: DsCalendarAttrs['min-date'];
11
+ maxDate: DsCalendarAttrs['max-date'];
12
+ disabledDates: DsCalendarAttrs['disabled-dates'];
13
+ disabledWeekdays: DsCalendarAttrs['disabled-weekdays'];
14
+ viewDateAttr: DsCalendarAttrs['view-date'];
15
+ initialValue: DsCalendarAttrs['initial-value'];
16
+ private _viewDate;
17
+ private _value;
18
+ private _initialValueApplied;
19
+ private get selectedDate();
20
+ get viewDate(): Date;
21
+ connectedCallback(): void;
22
+ updated(changedProperties: Map<string, unknown>): void;
23
+ private applyInitialValue;
24
+ private initializeViewDate;
25
+ private parseDate;
26
+ private get calendarClasses();
27
+ private get weekdayNames();
28
+ private get monthYearLabel();
29
+ private getDaysInMonth;
30
+ private getFirstDayOfMonth;
31
+ private get calendarDays();
32
+ private createCalendarDay;
33
+ private isDateDisabled;
34
+ private handlePrevMonth;
35
+ private handleNextMonth;
36
+ private handleDayChange;
37
+ private get prevButtonTemplate();
38
+ private get nextButtonTemplate();
39
+ private get weekdaysTemplate();
40
+ private get daysTemplate();
41
+ render(): import("lit").TemplateResult<1>;
42
+ }
@@ -0,0 +1,8 @@
1
+ import type { DsCalendar } from './ds-calendar';
2
+ import './ds-calendar';
3
+ import '../ds-theme-provider/ds-theme-provider.ts';
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'ds-calendar': DsCalendar;
7
+ }
8
+ }
@@ -0,0 +1,35 @@
1
+ import type { CommonAttrs } from '../../types/types';
2
+ export type DsCalendarVariant = 'plane' | 'elevated';
3
+ export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
4
+ export interface DsCalendarAttrs extends CommonAttrs {
5
+ /** Selected date in ISO format (YYYY-MM-DD) */
6
+ value?: string;
7
+ /** Visual style variant */
8
+ variant?: DsCalendarVariant;
9
+ /** BCP 47 locale for formatting (e.g., 'es-ES', 'en-US') */
10
+ locale?: string;
11
+ /** First day of week (0=Sunday, 1=Monday, etc.) */
12
+ 'first-day-of-week'?: WeekDay;
13
+ /** Minimum selectable date (YYYY-MM-DD) */
14
+ 'min-date'?: string;
15
+ /** Maximum selectable date (YYYY-MM-DD) */
16
+ 'max-date'?: string;
17
+ /** Array of specific dates to disable (YYYY-MM-DD) */
18
+ 'disabled-dates'?: string[];
19
+ /** Array of weekdays to disable (0=Sunday, 6=Saturday) */
20
+ 'disabled-weekdays'?: WeekDay[];
21
+ /** Month/year to display (YYYY-MM or YYYY-MM-DD). Overrides value for view. */
22
+ 'view-date'?: string;
23
+ /** Initial value for uncontrolled mode (YYYY-MM-DD). Applied once on mount. */
24
+ 'initial-value'?: string;
25
+ }
26
+ export interface CalendarDay {
27
+ day: number;
28
+ month: number;
29
+ year: number;
30
+ date: Date;
31
+ isCurrentMonth: boolean;
32
+ isToday: boolean;
33
+ isSelected: boolean;
34
+ isDisabled: boolean;
35
+ }
@@ -0,0 +1 @@
1
+ export declare const commonStyles: import("lit").CSSResult;
@@ -0,0 +1,20 @@
1
+ import { UiKitElement } from '../base/UiKitElement.ts';
2
+ import type { DsCalendarDayAttrs } from './ds-calendar-day.types';
3
+ export declare class DsCalendarDay extends UiKitElement {
4
+ static styles: import("lit").CSSResult[];
5
+ day: DsCalendarDayAttrs['day'];
6
+ disabled: DsCalendarDayAttrs['disabled'];
7
+ selected: DsCalendarDayAttrs['selected'];
8
+ today: DsCalendarDayAttrs['today'];
9
+ outsideMonth: DsCalendarDayAttrs['outside-month'];
10
+ protected get classes(): {
11
+ day: boolean;
12
+ disabled: boolean;
13
+ selected: boolean;
14
+ today: boolean;
15
+ 'outside-month': boolean;
16
+ };
17
+ private handleClick;
18
+ private handleKeyDown;
19
+ render(): import("lit").TemplateResult<1>;
20
+ }
@@ -0,0 +1,8 @@
1
+ import type { DsCalendarDay } from './ds-calendar-day';
2
+ import './ds-calendar-day';
3
+ import '../ds-theme-provider/ds-theme-provider.ts';
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'ds-calendar-day': DsCalendarDay;
7
+ }
8
+ }
@@ -0,0 +1,10 @@
1
+ import type { CommonAttrs } from '../../types/types';
2
+ export type DsCalendarDayState = 'default' | 'hover' | 'pressed' | 'disabled' | 'selected' | 'today';
3
+ export interface DsCalendarDayAttrs extends CommonAttrs {
4
+ day?: number;
5
+ state?: DsCalendarDayState;
6
+ disabled?: boolean;
7
+ selected?: boolean;
8
+ today?: boolean;
9
+ 'outside-month'?: boolean;
10
+ }
@@ -0,0 +1 @@
1
+ export declare const commonStyles: import("lit").CSSResult;
@@ -0,0 +1,23 @@
1
+ import { UiKitElement } from '../base/UiKitElement.ts';
2
+ import type { DsFavouriteActionAttrs } from '../ds-favourite-action/ds-favourite-action.types.ts';
3
+ import type { Icons } from '../ds-icon/Icons.type.ts';
4
+ export declare class DsFavouriteAction extends UiKitElement {
5
+ static styles: import("lit").CSSResult[];
6
+ initialSelected: DsFavouriteActionAttrs['initial-selected'];
7
+ selected: DsFavouriteActionAttrs['selected'];
8
+ disabled: DsFavouriteActionAttrs['disabled'];
9
+ dataAriaLabel: DsFavouriteActionAttrs['data-aria-label'];
10
+ private _selected;
11
+ private _initializedFromInitialSelected;
12
+ protected willUpdate(changedProperties: Map<string, unknown>): void;
13
+ protected get currentSelected(): boolean;
14
+ protected handleClick(): void;
15
+ protected get iconName(): Icons;
16
+ protected get iconTemplate(): any;
17
+ protected get classes(): {
18
+ button: boolean;
19
+ selected: boolean;
20
+ disabled: boolean;
21
+ };
22
+ render(): import("lit").TemplateResult<1>;
23
+ }
@@ -0,0 +1,8 @@
1
+ import type { DsFavouriteAction } from './ds-favourite-action';
2
+ import './ds-favourite-action';
3
+ import '../ds-theme-provider/ds-theme-provider.ts';
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'ds-favourite-action': DsFavouriteAction;
7
+ }
8
+ }
@@ -0,0 +1,7 @@
1
+ import type { CommonAttrs } from '../../types/types.ts';
2
+ export type DsFavouriteActionAttrs = {
3
+ 'initial-selected'?: boolean;
4
+ selected?: boolean;
5
+ disabled?: boolean;
6
+ 'data-aria-label'?: string;
7
+ } & CommonAttrs;
@@ -0,0 +1 @@
1
+ export declare const commonStyles: import("lit").CSSResult;
@@ -9,6 +9,8 @@ import './ds-breadcrumbs/ds-breadcrumbs.ts';
9
9
  import './ds-breadcrumbs-item/ds-breadcrumbs-item.ts';
10
10
  import './ds-bullets/ds-bullets.ts';
11
11
  import './ds-button/ds-button.ts';
12
+ import './ds-calendar/ds-calendar.ts';
13
+ import './ds-calendar-day/ds-calendar-day.ts';
12
14
  import './ds-carousel-indicator/ds-carousel-indicator.ts';
13
15
  import './ds-checkbox/ds-checkbox.ts';
14
16
  import './ds-checkbox-group/ds-checkbox-group.ts';
@@ -22,6 +24,7 @@ import './ds-dialog-fullscreen/ds-dialog-fullscreen.ts';
22
24
  import './ds-dialog-header/ds-dialog-header.ts';
23
25
  import './ds-divider/ds-divider.ts';
24
26
  import './ds-drawer/ds-drawer.ts';
27
+ import './ds-favourite-action/ds-favourite-action.ts';
25
28
  import './ds-hyperlink/ds-hyperlink.ts';
26
29
  import './ds-icon/ds-icon.ts';
27
30
  import './ds-icon-button/ds-icon-button.ts';
@@ -0,0 +1,26 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("../base/UiKitElement.cjs");require("../ds-calendar-day/ds-calendar-day.cjs");const _=require("../../decorators/customUiKitElement.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const p=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const o=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),m=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.cjs"),C=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),M=require("./styles/common.styles.cjs");var S=Object.defineProperty,k=Object.getOwnPropertyDescriptor,n=(f,e,t,s)=>{for(var r=s>1?void 0:s?k(e,t):e,i=f.length-1,a;i>=0;i--)(a=f[i])&&(r=(s?a(e,t,r):a(r))||r);return s&&r&&S(e,t,r),r};exports.DsCalendar=class extends b.UiKitElement{constructor(){super(...arguments),this.variant="plane",this.locale="en-US",this.firstDayOfWeek=1,this.disabledDates=[],this.disabledWeekdays=[],this._viewDate=new Date,this._value=null,this._initialValueApplied=!1}get selectedDate(){if(this.value){const e=this.parseDate(this.value);if(e)return e}return this._value}get viewDate(){return this._viewDate}connectedCallback(){super.connectedCallback(),this.applyInitialValue(),this.initializeViewDate()}updated(e){super.updated(e),(e.has("value")||e.has("viewDateAttr"))&&this.initializeViewDate()}applyInitialValue(){if(!this._initialValueApplied&&(this._initialValueApplied=!0,this.initialValue)){const e=this.parseDate(this.initialValue);e&&(this._value=e)}}initializeViewDate(){if(this.viewDateAttr){const e=this.parseDate(this.viewDateAttr);e&&(this._viewDate=e)}else if(this.value){const e=this.parseDate(this.value);e&&(this._viewDate=new Date(e))}else this._value?this._viewDate=new Date(this._value):this._viewDate=new Date}parseDate(e){const t=e.split("-");if(t.length>=2){const s=Number.parseInt(t[0],10),r=Number.parseInt(t[1],10)-1,i=t.length>=3?Number.parseInt(t[2],10):1,a=new Date(s,r,i);if(!Number.isNaN(a.getTime()))return a}return null}get calendarClasses(){return{calendar:!0,[this.variant]:!0}}get weekdayNames(){const e=new Intl.DateTimeFormat(this.locale,{weekday:"short"}),t=[],s=new Date(2024,0,1);for(;s.getDay()!==this.firstDayOfWeek;)s.setDate(s.getDate()+1);for(let r=0;r<7;r++){const i=new Date(s);i.setDate(s.getDate()+r);const a=e.format(i);t.push(a.slice(0,2))}return t}get monthYearLabel(){return new Intl.DateTimeFormat(this.locale,{month:"long",year:"numeric"}).format(this._viewDate)}getDaysInMonth(e,t){return new Date(e,t+1,0).getDate()}getFirstDayOfMonth(e,t){return new Date(e,t,1).getDay()}get calendarDays(){const e=this._viewDate.getFullYear(),t=this._viewDate.getMonth(),s=new Date;s.setHours(0,0,0,0);const r=this.getDaysInMonth(e,t);let a=this.getFirstDayOfMonth(e,t)-this.firstDayOfWeek;a<0&&(a+=7);const d=[],c=t===0?11:t-1,h=t===0?e-1:e,u=this.getDaysInMonth(h,c);for(let l=a-1;l>=0;l--){const D=u-l,w=new Date(h,c,D);d.push(this.createCalendarDay(w,!1,s))}for(let l=1;l<=r;l++){const D=new Date(e,t,l);d.push(this.createCalendarDay(D,!0,s))}const y=42-d.length,v=t===11?0:t+1,g=t===11?e+1:e;for(let l=1;l<=y;l++){const D=new Date(g,v,l);d.push(this.createCalendarDay(D,!1,s))}return d}createCalendarDay(e,t,s){e.setHours(0,0,0,0);const r=e.getDate(),i=e.getMonth(),a=e.getFullYear(),d=r===s.getDate()&&i===s.getMonth()&&a===s.getFullYear(),c=this.selectedDate,h=c?r===c.getDate()&&i===c.getMonth()&&a===c.getFullYear():!1,u=!t||this.isDateDisabled(e);return{day:r,month:i,year:a,date:e,isCurrentMonth:t,isToday:d,isSelected:h,isDisabled:u}}isDateDisabled(e){if(this.minDate){const t=new Date(this.minDate);if(t.setHours(0,0,0,0),e<t)return!0}if(this.maxDate){const t=new Date(this.maxDate);if(t.setHours(0,0,0,0),e>t)return!0}if(this.disabledWeekdays&&this.disabledWeekdays.length>0){const t=e.getDay();if(this.disabledWeekdays.includes(t))return!0}if(this.disabledDates&&this.disabledDates.length>0){const t=e.toISOString().split("T")[0];if(this.disabledDates.includes(t))return!0}return!1}handlePrevMonth(){const e=new Date(this._viewDate);e.setMonth(e.getMonth()-1),this._viewDate=e}handleNextMonth(){const e=new Date(this._viewDate);e.setMonth(e.getMonth()+1),this._viewDate=e}handleDayChange(e){var y;e.stopPropagation();const t=e.target;if(!t||!t.tagName.toLowerCase().startsWith("ds-calendar-day"))return;const r=Array.from(((y=this.shadowRoot)==null?void 0:y.querySelectorAll("ds-calendar-day"))||[]).indexOf(t);if(r===-1)return;const a=this.calendarDays[r];if(!a||a.isDisabled)return;this._value=a.date,this._viewDate=new Date(a.date);const d=a.date.getFullYear(),c=String(a.date.getMonth()+1).padStart(2,"0"),h=String(a.date.getDate()).padStart(2,"0"),u=`${d}-${c}-${h}`;this.dispatchEvent(new CustomEvent("ds-calendar-change",{bubbles:!0,composed:!0,detail:{value:u,date:a.date}}))}get prevButtonTemplate(){return this.componentFactory.createIconButton({class:"nav-button","icon-name":"arrow-left","data-aria-label":"Previous month","@click":this.handlePrevMonth,variant:"naked",size:"medium",color:"var(--ds-icon-button-icon-color-standard-default, #fafafa)"})}get nextButtonTemplate(){return this.componentFactory.createIconButton({class:"nav-button","icon-name":"arrow-right","data-aria-label":"Next month","@click":this.handleNextMonth,variant:"naked",size:"medium",color:"var(--ds-icon-button-icon-color-standard-default, #fafafa)"})}get weekdaysTemplate(){return p.html`
2
+ <div class="weekdays">
3
+ ${this.weekdayNames.map(e=>p.html`<div class="weekday">${e}</div>`)}
4
+ </div>
5
+ `}get daysTemplate(){return p.html`
6
+ <div class="days-grid" @ds-calendar-day-change=${this.handleDayChange}>
7
+ ${this.calendarDays.map(e=>p.html`
8
+ <ds-calendar-day
9
+ day=${e.day}
10
+ ?disabled=${e.isDisabled}
11
+ ?selected=${e.isSelected}
12
+ ?today=${e.isToday}
13
+ ?outside-month=${!e.isCurrentMonth}
14
+ ></ds-calendar-day>
15
+ `)}
16
+ </div>
17
+ `}render(){return p.html`
18
+ <div class=${C.classMap(this.calendarClasses)} role="application" aria-label="Calendar">
19
+ <div class="header">
20
+ ${this.prevButtonTemplate}
21
+ <div class="month-year" aria-live="polite">${this.monthYearLabel}</div>
22
+ ${this.nextButtonTemplate}
23
+ </div>
24
+ ${this.weekdaysTemplate} ${this.daysTemplate}
25
+ </div>
26
+ `}};exports.DsCalendar.styles=[M.commonStyles];n([o.property({type:String,reflect:!0})],exports.DsCalendar.prototype,"value",2);n([o.property({type:String,reflect:!0})],exports.DsCalendar.prototype,"variant",2);n([o.property({type:String,reflect:!0})],exports.DsCalendar.prototype,"locale",2);n([o.property({type:Number,reflect:!0,attribute:"first-day-of-week"})],exports.DsCalendar.prototype,"firstDayOfWeek",2);n([o.property({type:String,reflect:!0,attribute:"min-date"})],exports.DsCalendar.prototype,"minDate",2);n([o.property({type:String,reflect:!0,attribute:"max-date"})],exports.DsCalendar.prototype,"maxDate",2);n([o.property({type:Array,attribute:"disabled-dates"})],exports.DsCalendar.prototype,"disabledDates",2);n([o.property({type:Array,attribute:"disabled-weekdays"})],exports.DsCalendar.prototype,"disabledWeekdays",2);n([o.property({type:String,reflect:!0,attribute:"view-date"})],exports.DsCalendar.prototype,"viewDateAttr",2);n([o.property({type:String,attribute:"initial-value"})],exports.DsCalendar.prototype,"initialValue",2);n([m.state()],exports.DsCalendar.prototype,"_viewDate",2);n([m.state()],exports.DsCalendar.prototype,"_value",2);exports.DsCalendar=n([_.customUiKitElement("ds-calendar")],exports.DsCalendar);
@@ -0,0 +1,38 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),t=e.css`
2
+ :host {
3
+ display: inline-block;
4
+ }
5
+
6
+ .calendar {
7
+ display: flex;
8
+ flex-direction: column;
9
+ box-sizing: border-box;
10
+ }
11
+
12
+ .header {
13
+ display: flex;
14
+ align-items: center;
15
+ justify-content: space-between;
16
+ }
17
+
18
+ .month-year {
19
+ flex: 1;
20
+ text-align: center;
21
+ }
22
+
23
+ .weekdays {
24
+ display: grid;
25
+ grid-template-columns: repeat(7, 1fr);
26
+ }
27
+
28
+ .weekday {
29
+ display: flex;
30
+ align-items: center;
31
+ justify-content: center;
32
+ }
33
+
34
+ .days-grid {
35
+ display: grid;
36
+ grid-template-columns: repeat(7, 1fr);
37
+ }
38
+ `;exports.commonStyles=t;
@@ -0,0 +1,14 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("../base/UiKitElement.cjs"),c=require("../../decorators/customUiKitElement.cjs"),o=require("../../utils/booleanConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const u=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),p=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),h=require("./styles/common.styles.cjs");var b=Object.defineProperty,D=Object.getOwnPropertyDescriptor,r=(l,e,n,s)=>{for(var t=s>1?void 0:s?D(e,n):e,i=l.length-1,d;i>=0;i--)(d=l[i])&&(t=(s?d(e,n,t):d(t))||t);return s&&t&&b(e,n,t),t};exports.DsCalendarDay=class extends y.UiKitElement{constructor(){super(...arguments),this.disabled=!1,this.selected=!1,this.today=!1,this.outsideMonth=!1}get classes(){return{day:!0,disabled:this.disabled,selected:this.selected,today:this.today,"outside-month":this.outsideMonth}}handleClick(e){if(this.disabled){e.preventDefault(),e.stopPropagation();return}this.dispatchEvent(new CustomEvent("ds-calendar-day-change",{bubbles:!0,composed:!0,detail:{day:this.day}}))}handleKeyDown(e){this.disabled||(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.handleClick(e))}render(){return u.html`
2
+ <button
3
+ class=${p.classMap(this.classes)}
4
+ ?disabled=${this.disabled}
5
+ aria-label=${this.day?`Day ${this.day}`:""}
6
+ aria-selected=${this.selected}
7
+ aria-current=${this.today?"date":"false"}
8
+ tabindex=${this.disabled?-1:0}
9
+ @click=${this.handleClick}
10
+ @keydown=${this.handleKeyDown}
11
+ >
12
+ ${this.day}
13
+ </button>
14
+ `}};exports.DsCalendarDay.styles=[h.commonStyles];r([a.property({type:Number,reflect:!0})],exports.DsCalendarDay.prototype,"day",2);r([a.property({type:Boolean,converter:o.booleanConverter,reflect:!0})],exports.DsCalendarDay.prototype,"disabled",2);r([a.property({type:Boolean,converter:o.booleanConverter,reflect:!0})],exports.DsCalendarDay.prototype,"selected",2);r([a.property({type:Boolean,converter:o.booleanConverter,reflect:!0})],exports.DsCalendarDay.prototype,"today",2);r([a.property({type:Boolean,converter:o.booleanConverter,reflect:!0,attribute:"outside-month"})],exports.DsCalendarDay.prototype,"outsideMonth",2);exports.DsCalendarDay=r([c.customUiKitElement("ds-calendar-day")],exports.DsCalendarDay);
@@ -0,0 +1,23 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),n=e.css`
2
+ :host {
3
+ display: inline-flex;
4
+ }
5
+
6
+ .day {
7
+ display: flex;
8
+ align-items: center;
9
+ justify-content: center;
10
+ box-sizing: border-box;
11
+ cursor: pointer;
12
+ user-select: none;
13
+ border: none;
14
+ background: none;
15
+ padding: 0;
16
+ margin: 0;
17
+ }
18
+
19
+ .day.disabled {
20
+ cursor: default;
21
+ pointer-events: none;
22
+ }
23
+ `;exports.commonStyles=n;