Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(deps): update stencil #1377

Merged
merged 1 commit into from
Dec 16, 2024
Merged

chore(deps): update stencil #1377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 34 additions & 12 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,11 @@
"@nxext/stencil": "20.0.6",
"@rollup/plugin-url": "8.0.2",
"@schematics/angular": "18.2.12",
"@stencil/angular-output-target": "0.10.0",
"@stencil/angular-output-target": "0.10.1",
"@stencil/core": "4.23.0",
"@stencil/react-output-target": "0.7.4",
"@stencil/react-output-target": "0.8.0",
"@stencil/sass": "3.0.12",
"@stencil/vue-output-target": "0.9.0",
"@stencil/vue-output-target": "0.9.1",
"@storybook/addon-a11y": "8.4.7",
"@storybook/addon-actions": "8.4.7",
"@storybook/addon-docs": "8.4.7",
Expand Down
12 changes: 12 additions & 0 deletions packages/beeq/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -716,6 +716,7 @@ export namespace Components {
* @attr {0 | 1 | 2 | 3 | 4 | 5 | 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.
* @attr {Intl.DateTimeFormatOptions} format-options - The options to use when formatting the displayed value. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
* @attr {string} form - The ID of the form that the Date picker input belongs to.
* @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
* @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.
* @attr {Intl.LocalesArgument} locale - The locale for formatting dates. If not set, will use the browser's locale. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument
* @attr {string} max - The latest date that can be selected.
Expand Down Expand Up @@ -797,6 +798,10 @@ export namespace Components {
* The ID of the form that the Date picker input belongs to.
*/
"form"?: string;
/**
* The native form validation message (mandatory if `required` is set)
*/
"formValidationMessage"?: string;
/**
* The options to use when formatting the displayed value. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
*/
Expand Down Expand Up @@ -3571,6 +3576,7 @@ declare global {
* @attr {0 | 1 | 2 | 3 | 4 | 5 | 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.
* @attr {Intl.DateTimeFormatOptions} format-options - The options to use when formatting the displayed value. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
* @attr {string} form - The ID of the form that the Date picker input belongs to.
* @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
* @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.
* @attr {Intl.LocalesArgument} locale - The locale for formatting dates. If not set, will use the browser's locale. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument
* @attr {string} max - The latest date that can be selected.
Expand Down Expand Up @@ -5849,6 +5855,7 @@ declare namespace LocalJSX {
* @attr {0 | 1 | 2 | 3 | 4 | 5 | 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.
* @attr {Intl.DateTimeFormatOptions} format-options - The options to use when formatting the displayed value. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
* @attr {string} form - The ID of the form that the Date picker input belongs to.
* @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
* @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.
* @attr {Intl.LocalesArgument} locale - The locale for formatting dates. If not set, will use the browser's locale. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument
* @attr {string} max - The latest date that can be selected.
Expand Down Expand Up @@ -5924,6 +5931,10 @@ declare namespace LocalJSX {
* The ID of the form that the Date picker input belongs to.
*/
"form"?: string;
/**
* The native form validation message (mandatory if `required` is set)
*/
"formValidationMessage"?: string;
/**
* The options to use when formatting the displayed value. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
*/
Expand Down Expand Up @@ -8668,6 +8679,7 @@ declare module "@stencil/core" {
* @attr {0 | 1 | 2 | 3 | 4 | 5 | 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.
* @attr {Intl.DateTimeFormatOptions} format-options - The options to use when formatting the displayed value. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
* @attr {string} form - The ID of the form that the Date picker input belongs to.
* @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
* @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.
* @attr {Intl.LocalesArgument} locale - The locale for formatting dates. If not set, will use the browser's locale. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument
* @attr {string} max - The latest date that can be selected.
Expand Down
4 changes: 2 additions & 2 deletions packages/beeq/src/components/button/bq-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
TButtonType,
TButtonVariant,
} from './bq-button.types';
import { hasSlotContent, isDefined, isNil, validatePropValue } from '../../shared/utils';
import { hasSlotContent, isClient, isDefined, isNil, validatePropValue } from '../../shared/utils';

/**
* Buttons are designed for users to take action on a page or a screen.
Expand Down Expand Up @@ -239,7 +239,7 @@ export class BqButton {
});

private submitAssociatedForm = (form: HTMLFormElement) => {
if (typeof window === 'undefined' || isNil(form)) return;
if (!isClient() || isNil(form)) return;

const btn = document.createElement('button');
btn.type = this.type;
Expand Down
6 changes: 4 additions & 2 deletions packages/beeq/src/components/date-picker/_storybook/bq-date-picker.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,9 +381,10 @@ export const WithForm: Story = {
<label class="flex flex-grow items-center" slot="label">Passport number</label>
</bq-input>
<bq-date-picker
name="passportExpDate"
value="2024-05-20"
name="passportExpiration"
value="2034-05-20"
placeholder="Select a date"
form-validation-message="Please, you must provide your passport expiration date"
type="single"
required
>
Expand All @@ -393,6 +394,7 @@ export const WithForm: Story = {
<bq-date-picker
name="tripDate"
placeholder="Select a start and end date for your travel"
form-validation-message="Please, tell us when you are planning to travel"
value="2024-12-25/2025-01-10"
type="range"
months="2"
Expand Down
35 changes: 35 additions & 0 deletions packages/beeq/src/components/date-picker/bq-date-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { DATE_PICKER_TYPE, DaysOfWeek, TDatePickerType } from './bq-date-picker.
import { Placement } from '../../services/interfaces';
import {
hasSlotContent,
isClient,
isDefined,
isEventTargetChildOfElement,
isHTMLElement,
Expand Down Expand Up @@ -64,6 +65,7 @@ import { TInputValidation } from '../input/bq-input.types';
* @attr {0 | 1 | 2 | 3 | 4 | 5 | 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.
* @attr {Intl.DateTimeFormatOptions} format-options - The options to use when formatting the displayed value. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
* @attr {string} form - The ID of the form that the Date picker input belongs to.
* @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
* @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.
* @attr {Intl.LocalesArgument} locale - The locale for formatting dates. If not set, will use the browser's locale. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument
* @attr {string} max - The latest date that can be selected.
Expand Down Expand Up @@ -226,6 +228,9 @@ export class BqDatePicker {
/** The ID of the form that the Date picker input belongs to. */
@Prop({ reflect: true }) form?: string;

/** The native form validation message (mandatory if `required` is set) */
@Prop({ mutable: true }) formValidationMessage?: string;

/** A function that takes a date and returns true if the date should not be selectable */
@Prop({ reflect: true }) isDateDisallowed?: (date: Date) => boolean;

Expand Down Expand Up @@ -305,7 +310,9 @@ export class BqDatePicker {
@Watch('value')
handleValueChange() {
const { formatDisplayValue, internals, value } = this;

internals.setFormValue(!isNil(value) ? `${value}` : undefined);
this.updateFormValidity();

if (Array.isArray(value)) {
this.hasValue = value.some((val) => val.length > 0);
Expand Down Expand Up @@ -346,10 +353,20 @@ export class BqDatePicker {
// Ordered by their natural call order
// =====================================

async connectedCallback() {
if (!isClient()) return;

await import('cally');
}

componentWillLoad() {
this.handleValueChange();
}

formAssociatedCallback() {
this.updateFormValidity();
}

formResetCallback() {
if (isNil(this.value)) return;

Expand Down Expand Up @@ -560,6 +577,24 @@ export class BqDatePicker {
return dateFormatter.format(new Date(value));
};

private updateFormValidity = () => {
const { formValidationMessage, internals, required, value, inputElem } = this;

// Clear the validity state
internals?.states.clear();

if (required && (!value || value.toString().trim() === '')) {
// Set validity state to invalid
internals?.states.add('invalid');
internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);
return;
}

// Set validity state to valid if textarea has value or is not required
internals?.states.add('valid');
internals?.setValidity({});
};

private get CalendarType() {
const componentTypes = {
single: 'calendar-date',
Expand Down
Loading