@cupra/ui-kit 2.0.0-canary.82 → 2.0.0-canary.83
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/dist/cjs/components/ds-calendar/ds-calendar.cjs +7 -15
- package/dist/cjs/components/ds-calendar-day/ds-calendar-day.cjs +3 -3
- package/dist/cjs/components/ds-date-picker/ds-date-picker.cjs +20 -0
- package/dist/cjs/components/ds-date-picker/styles/common.styles.cjs +5 -0
- package/dist/cjs/components/ds-theme-provider/ds-theme-provider.cjs +1 -1
- package/dist/cjs/index.cjs +1 -1
- package/dist/cjs/utils/IconsManager.cjs +1 -1
- package/dist/cjs/utils/PubSub.cjs +1 -1
- package/dist/cjs/utils/StylesRegistry/StylesRegistry.cjs +1 -1
- package/dist/cjs/utils/componentFactory.cjs +24 -2
- package/dist/cjs/utils/cssWithTokens.cjs +1 -1
- package/dist/cjs/utils/htmlWithTokens.cjs +1 -1
- package/dist/esm/components/ds-calendar/ds-calendar.js +89 -83
- package/dist/esm/components/ds-calendar-day/ds-calendar-day.js +13 -9
- package/dist/esm/components/ds-date-picker/ds-date-picker.js +137 -0
- package/dist/esm/components/ds-date-picker/styles/common.styles.js +12 -0
- package/dist/esm/components/ds-theme-provider/ds-theme-provider.js +1 -1
- package/dist/esm/index.js +3 -2
- package/dist/esm/utils/IconsManager.js +1 -1
- package/dist/esm/utils/PubSub.js +1 -1
- package/dist/esm/utils/StylesRegistry/StylesRegistry.js +1 -1
- package/dist/esm/utils/componentFactory.js +26 -2
- package/dist/esm/utils/cssWithTokens.js +1 -1
- package/dist/esm/utils/htmlWithTokens.js +1 -1
- package/dist/types/components/ds-calendar/ds-calendar.d.ts +3 -1
- package/dist/types/components/ds-calendar/ds-calendar.types.d.ts +3 -0
- package/dist/types/components/ds-calendar-day/ds-calendar-day.d.ts +3 -1
- package/dist/types/components/ds-calendar-day/ds-calendar-day.types.d.ts +2 -0
- package/dist/types/components/ds-date-picker/ds-date-picker.d.ts +29 -0
- package/dist/types/components/ds-date-picker/ds-date-picker.test.d.ts +9 -0
- package/dist/types/components/ds-date-picker/ds-date-picker.types.d.ts +9 -0
- package/dist/types/components/ds-date-picker/styles/common.styles.d.ts +1 -0
- package/dist/types/components/index.d.ts +1 -0
- package/dist/types/utils/componentFactory.d.ts +2 -0
- package/dist-react/cjs/components/ds-calendar/ds-calendar.cjs +7 -15
- package/dist-react/cjs/components/ds-calendar-day/ds-calendar-day.cjs +3 -3
- package/dist-react/cjs/components/ds-date-picker/ds-date-picker.cjs +20 -0
- package/dist-react/cjs/components/ds-date-picker/styles/common.styles.cjs +5 -0
- package/dist-react/cjs/components/ds-theme-provider/ds-theme-provider.cjs +1 -1
- package/dist-react/cjs/index.cjs +1 -1
- package/dist-react/cjs/utils/IconsManager.cjs +1 -1
- package/dist-react/cjs/utils/PubSub.cjs +1 -1
- package/dist-react/cjs/utils/StylesRegistry/StylesRegistry.cjs +1 -1
- package/dist-react/cjs/utils/componentFactory.cjs +13 -2
- package/dist-react/cjs/utils/cssWithTokens.cjs +1 -1
- package/dist-react/cjs/utils/htmlWithTokens.cjs +1 -1
- package/dist-react/esm/components/ds-calendar/ds-calendar.js +89 -83
- package/dist-react/esm/components/ds-calendar-day/ds-calendar-day.js +13 -9
- package/dist-react/esm/components/ds-date-picker/ds-date-picker.js +137 -0
- package/dist-react/esm/components/ds-date-picker/styles/common.styles.js +12 -0
- package/dist-react/esm/components/ds-theme-provider/ds-theme-provider.js +1 -1
- package/dist-react/esm/index.js +3 -2
- package/dist-react/esm/utils/IconsManager.js +1 -1
- package/dist-react/esm/utils/PubSub.js +1 -1
- package/dist-react/esm/utils/StylesRegistry/StylesRegistry.js +1 -1
- package/dist-react/esm/utils/componentFactory.js +14 -2
- package/dist-react/esm/utils/cssWithTokens.js +1 -1
- package/dist-react/esm/utils/htmlWithTokens.js +1 -1
- package/dist-react/types/components/ds-calendar/ds-calendar.d.ts +3 -1
- package/dist-react/types/components/ds-calendar/ds-calendar.types.d.ts +3 -0
- package/dist-react/types/components/ds-calendar-day/ds-calendar-day.d.ts +3 -1
- package/dist-react/types/components/ds-calendar-day/ds-calendar-day.types.d.ts +2 -0
- package/dist-react/types/components/ds-date-picker/ds-date-picker.d.ts +29 -0
- package/dist-react/types/components/ds-date-picker/ds-date-picker.test.d.ts +9 -0
- package/dist-react/types/components/ds-date-picker/ds-date-picker.types.d.ts +9 -0
- package/dist-react/types/components/ds-date-picker/styles/common.styles.d.ts +1 -0
- package/dist-react/types/components/index.d.ts +1 -0
- package/dist-react/types/utils/componentFactory.d.ts +2 -0
- package/package.json +1 -1
|
@@ -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.
|
|
57
|
+
const s = "/2.0.0-canary.83", 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-react/esm/index.js
CHANGED
|
@@ -17,6 +17,7 @@ import "./components/ds-checkbox-group/ds-checkbox-group.js";
|
|
|
17
17
|
import "./components/ds-chip/ds-chip.js";
|
|
18
18
|
import "./components/ds-chips/ds-chips.js";
|
|
19
19
|
import "./components/ds-currency/ds-currency.js";
|
|
20
|
+
import "./components/ds-date-picker/ds-date-picker.js";
|
|
20
21
|
import "./components/ds-dialog/ds-dialog.js";
|
|
21
22
|
import "./components/ds-dialog-body/ds-dialog-body.js";
|
|
22
23
|
import "./components/ds-dialog-footer/ds-dialog-footer.js";
|
|
@@ -80,7 +81,7 @@ import "./components/ds-navigation-controls/ds-navigation-controls.js";
|
|
|
80
81
|
import "./components/ds-table/ds-table.js";
|
|
81
82
|
import "./components/ds-table-row/ds-table-row.js";
|
|
82
83
|
import "./components/ds-table-cell/ds-table-cell.js";
|
|
83
|
-
import { iconNames as
|
|
84
|
+
import { iconNames as Fo } from "./components/ds-icon/iconNames.js";
|
|
84
85
|
export {
|
|
85
|
-
|
|
86
|
+
Fo as iconNames
|
|
86
87
|
};
|
|
@@ -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.
|
|
28
|
+
const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.83"), 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.
|
|
21
|
+
const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.83"), 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.
|
|
10
|
+
const c = `https://ds-assets.cupra.com/2.0.0-canary.83/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);
|
|
@@ -21,6 +21,18 @@ const m = {
|
|
|
21
21
|
${t.children}
|
|
22
22
|
</ds-icon-react>
|
|
23
23
|
`),
|
|
24
|
+
createCalendarDay: (t = {}) => (i("ds-calendar-day-react", () => import("../components/ds-calendar-day/ds-calendar-day.js")), a`
|
|
25
|
+
<ds-calendar-day-react
|
|
26
|
+
class=${e(t == null ? void 0 : t.class)}
|
|
27
|
+
day=${e(t == null ? void 0 : t.day)}
|
|
28
|
+
size=${e(t == null ? void 0 : t.size)}
|
|
29
|
+
?disabled=${t == null ? void 0 : t.disabled}
|
|
30
|
+
?selected=${t == null ? void 0 : t.selected}
|
|
31
|
+
?today=${t == null ? void 0 : t.today}
|
|
32
|
+
?outside-month=${t == null ? void 0 : t["outside-month"]}
|
|
33
|
+
data-testid=${e(t == null ? void 0 : t["data-testid"])}
|
|
34
|
+
></ds-calendar-day-react>
|
|
35
|
+
`),
|
|
24
36
|
createButton: (t = {}) => (i("ds-button-react", () => import("../components/ds-button/ds-button.js")), a`
|
|
25
37
|
<ds-button-react
|
|
26
38
|
class=${t == null ? void 0 : t.class}
|
|
@@ -118,9 +130,9 @@ const m = {
|
|
|
118
130
|
</ds-tooltip-react>
|
|
119
131
|
`)
|
|
120
132
|
};
|
|
121
|
-
function i(t,
|
|
133
|
+
function i(t, d) {
|
|
122
134
|
try {
|
|
123
|
-
typeof window < "u" && typeof customElements < "u" && !customElements.get(t) &&
|
|
135
|
+
typeof window < "u" && typeof customElements < "u" && !customElements.get(t) && d();
|
|
124
136
|
} catch {
|
|
125
137
|
}
|
|
126
138
|
}
|
|
@@ -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-
|
|
6
|
+
const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-83"), 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-
|
|
6
|
+
const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-83"), e = i(o);
|
|
7
7
|
return n`${e}`;
|
|
8
8
|
}
|
|
9
9
|
export {
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { UiKitElement } from '../base/UiKitElement.ts';
|
|
2
2
|
import '../ds-calendar-day/ds-calendar-day.ts';
|
|
3
|
-
import type { DsCalendarAttrs, DsCalendarVariant, WeekDay } from './ds-calendar.types';
|
|
3
|
+
import type { DsCalendarAttrs, DsCalendarSize, DsCalendarVariant, WeekDay } from './ds-calendar.types';
|
|
4
4
|
export declare class DsCalendar extends UiKitElement {
|
|
5
5
|
static styles: import("lit").CSSResult[];
|
|
6
6
|
value: DsCalendarAttrs['value'];
|
|
7
7
|
variant: DsCalendarVariant;
|
|
8
|
+
size: DsCalendarSize;
|
|
8
9
|
locale: DsCalendarAttrs['locale'];
|
|
9
10
|
firstDayOfWeek: WeekDay;
|
|
10
11
|
minDate: DsCalendarAttrs['min-date'];
|
|
@@ -34,6 +35,7 @@ export declare class DsCalendar extends UiKitElement {
|
|
|
34
35
|
private handlePrevMonth;
|
|
35
36
|
private handleNextMonth;
|
|
36
37
|
private handleDayChange;
|
|
38
|
+
private get navButtonSize();
|
|
37
39
|
private get prevButtonTemplate();
|
|
38
40
|
private get nextButtonTemplate();
|
|
39
41
|
private get weekdaysTemplate();
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import type { CommonAttrs } from '../../types/types';
|
|
2
2
|
export type DsCalendarVariant = 'plane' | 'elevated';
|
|
3
|
+
export type DsCalendarSize = 'large' | 'medium';
|
|
3
4
|
export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
4
5
|
export interface DsCalendarAttrs extends CommonAttrs {
|
|
5
6
|
/** Selected date in ISO format (YYYY-MM-DD) */
|
|
6
7
|
value?: string;
|
|
7
8
|
/** Visual style variant */
|
|
8
9
|
variant?: DsCalendarVariant;
|
|
10
|
+
/** Size variant */
|
|
11
|
+
size?: DsCalendarSize;
|
|
9
12
|
/** BCP 47 locale for formatting (e.g., 'es-ES', 'en-US') */
|
|
10
13
|
locale?: string;
|
|
11
14
|
/** First day of week (0=Sunday, 1=Monday, etc.) */
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { UiKitElement } from '../base/UiKitElement.ts';
|
|
2
|
-
import type { DsCalendarDayAttrs } from './ds-calendar-day.types';
|
|
2
|
+
import type { DsCalendarDayAttrs, DsCalendarDaySize } from './ds-calendar-day.types';
|
|
3
3
|
export declare class DsCalendarDay extends UiKitElement {
|
|
4
4
|
static styles: import("lit").CSSResult[];
|
|
5
5
|
day: DsCalendarDayAttrs['day'];
|
|
6
|
+
size: DsCalendarDaySize;
|
|
6
7
|
disabled: DsCalendarDayAttrs['disabled'];
|
|
7
8
|
selected: DsCalendarDayAttrs['selected'];
|
|
8
9
|
today: DsCalendarDayAttrs['today'];
|
|
9
10
|
outsideMonth: DsCalendarDayAttrs['outside-month'];
|
|
10
11
|
protected get classes(): {
|
|
12
|
+
[x: string]: boolean;
|
|
11
13
|
day: boolean;
|
|
12
14
|
disabled: boolean;
|
|
13
15
|
selected: boolean;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import type { CommonAttrs } from '../../types/types';
|
|
2
2
|
export type DsCalendarDayState = 'default' | 'hover' | 'pressed' | 'disabled' | 'selected' | 'today';
|
|
3
|
+
export type DsCalendarDaySize = 'large' | 'medium';
|
|
3
4
|
export interface DsCalendarDayAttrs extends CommonAttrs {
|
|
4
5
|
day?: number;
|
|
5
6
|
state?: DsCalendarDayState;
|
|
7
|
+
size?: DsCalendarDaySize;
|
|
6
8
|
disabled?: boolean;
|
|
7
9
|
selected?: boolean;
|
|
8
10
|
today?: boolean;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { UiKitElement } from '../base/UiKitElement.ts';
|
|
2
|
+
import type { DsDatePickerAttrs } from './ds-date-picker.types.ts';
|
|
3
|
+
declare const DsDatePicker_base: (new (...args: any[]) => import("../../mixins/inputStatesMixin.ts").InputStatesInterface) & typeof UiKitElement;
|
|
4
|
+
export declare class DsDatePicker extends DsDatePicker_base {
|
|
5
|
+
static styles: import("lit").CSSResult[];
|
|
6
|
+
size: DsDatePickerAttrs['size'];
|
|
7
|
+
helperText: DsDatePickerAttrs['helper-text'];
|
|
8
|
+
forcedError: DsDatePickerAttrs['forced-error'];
|
|
9
|
+
invalidError: DsDatePickerAttrs['invalid-error'];
|
|
10
|
+
readonlyText: DsDatePickerAttrs['readonly-text'];
|
|
11
|
+
dataAriaLabelCalendarButton: DsDatePickerAttrs['data-aria-label-calendar-button'];
|
|
12
|
+
private isExpanded;
|
|
13
|
+
private handleCalendarButtonClick;
|
|
14
|
+
private handleCalendarChange;
|
|
15
|
+
private handleDocumentClick;
|
|
16
|
+
private static nativeStylesInjected;
|
|
17
|
+
connectedCallback(): void;
|
|
18
|
+
private static injectNativeInputStyles;
|
|
19
|
+
disconnectedCallback(): void;
|
|
20
|
+
private get classes();
|
|
21
|
+
render(): import("lit").TemplateResult<1>;
|
|
22
|
+
private get calendarDropdownTemplate();
|
|
23
|
+
private get calendarButtonTemplate();
|
|
24
|
+
private get helperTextTemplate();
|
|
25
|
+
private get forcedErrorTemplate();
|
|
26
|
+
private get readonlyTextTemplate();
|
|
27
|
+
private get invalidErrorTemplate();
|
|
28
|
+
}
|
|
29
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { DsDatePicker } from './ds-date-picker.ts';
|
|
2
|
+
import './ds-date-picker.ts';
|
|
3
|
+
import '../ds-theme-provider/ds-theme-provider.ts';
|
|
4
|
+
import '../ds-icon-button/ds-icon-button.ts';
|
|
5
|
+
declare global {
|
|
6
|
+
interface HTMLElementTagNameMap {
|
|
7
|
+
'ds-date-picker': DsDatePicker;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { CommonAttrs } from '../../types/types';
|
|
2
|
+
export type DsDatePickerAttrs = {
|
|
3
|
+
size?: 'large' | 'medium';
|
|
4
|
+
'helper-text'?: string;
|
|
5
|
+
'forced-error'?: string;
|
|
6
|
+
'invalid-error'?: string;
|
|
7
|
+
'readonly-text'?: string;
|
|
8
|
+
'data-aria-label-calendar-button'?: string;
|
|
9
|
+
} & CommonAttrs;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const commonStyles: import("lit").CSSResult;
|
|
@@ -17,6 +17,7 @@ import './ds-checkbox-group/ds-checkbox-group.ts';
|
|
|
17
17
|
import './ds-chip/ds-chip.ts';
|
|
18
18
|
import './ds-chips/ds-chips.ts';
|
|
19
19
|
import './ds-currency/ds-currency.ts';
|
|
20
|
+
import './ds-date-picker/ds-date-picker.ts';
|
|
20
21
|
import './ds-dialog/ds-dialog.ts';
|
|
21
22
|
import './ds-dialog-body/ds-dialog-body.ts';
|
|
22
23
|
import './ds-dialog-footer/ds-dialog-footer.ts';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { DsButtonAttrs } from '../components/ds-button/ds-button.types.ts';
|
|
2
|
+
import type { DsCalendarDayAttrs } from '../components/ds-calendar-day/ds-calendar-day.types.ts';
|
|
2
3
|
import { DsDividerAttrs } from '../components/ds-divider/ds-divider.types';
|
|
3
4
|
import type { DsIconButtonAttrs } from '../components/ds-icon-button/ds-icon-button.types.ts';
|
|
4
5
|
import type { DsIconAttrs } from '../components/ds-icon/ds-icon.types.ts';
|
|
@@ -11,6 +12,7 @@ type GetAttributes<T> = (props?: T) => any;
|
|
|
11
12
|
export type ComponentFactory = {
|
|
12
13
|
createIcon: GetAttributes<DsIconAttrs>;
|
|
13
14
|
createButton: GetAttributes<DsButtonAttrs>;
|
|
15
|
+
createCalendarDay: GetAttributes<DsCalendarDayAttrs>;
|
|
14
16
|
createDivider: GetAttributes<DsDividerAttrs>;
|
|
15
17
|
createIconButton: GetAttributes<DsIconButtonAttrs>;
|
|
16
18
|
createLoaderSpinner: GetAttributes<DsLoaderSpinnerAttrs>;
|