From e4fba906b6fd78564535182f50e105d622c0d263 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Thu, 13 Jul 2023 21:14:11 -0700 Subject: [PATCH 1/4] chore: add editorconfig --- .editorconfig | 19 +++++++++++++++++++ .prettierrc.json | 19 ++----------------- 2 files changed, 21 insertions(+), 17 deletions(-) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000000..15edb937f1d --- /dev/null +++ b/.editorconfig @@ -0,0 +1,19 @@ +root = true + +[*] + charset = utf-8 + insert_final_newline = true + end_of_line = lf + quote_type = double + indent_style = space + indent_size = 2 + max_line_length = 120 + curly_bracket_next_line = false + spaces_around_brackets = true + spaces_around_operators = true + indent_brace_style = K&R + +[*.tsx] + max_line_length = 100 + + diff --git a/.prettierrc.json b/.prettierrc.json index 2a5f9b07615..223f5443487 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,19 +1,4 @@ { - "arrowParens": "always", - "bracketSameLine": false, - "bracketSpacing": true, - "printWidth": 120, - "semi": true, - "singleQuote": false, - "tabWidth": 2, - "trailingComma": "none", - "useTabs": false, - "overrides": [ - { - "files": "*.tsx", - "options": { - "printWidth": 100 - } - } - ] + "$schema": "https://json.schemastore.org/prettierrc", + "trailingComma": "none" } From 2130c713d8a8caf0c4c3d35ce45fd658639a53e8 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Thu, 13 Jul 2023 21:45:48 -0700 Subject: [PATCH 2/4] style: lint and format code --- packages/calcite-components/LICENSE.md | 2 +- packages/calcite-components/readme.md | 2 +- .../date-picker-day/date-picker-day.scss | 1 - .../calcite-components/src/tests/commonTests.ts | 16 +++++++--------- .../calcite-components/src/utils/number.spec.ts | 2 +- packages/calcite-components/src/utils/number.ts | 2 +- 6 files changed, 11 insertions(+), 14 deletions(-) diff --git a/packages/calcite-components/LICENSE.md b/packages/calcite-components/LICENSE.md index 4f3f367cceb..060894407fa 100644 --- a/packages/calcite-components/LICENSE.md +++ b/packages/calcite-components/LICENSE.md @@ -10,4 +10,4 @@ See use restrictions at For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA -email: contracts@esri.com +email: diff --git a/packages/calcite-components/readme.md b/packages/calcite-components/readme.md index 608f8c1d414..eb65a631ab6 100644 --- a/packages/calcite-components/readme.md +++ b/packages/calcite-components/readme.md @@ -164,4 +164,4 @@ See use restrictions at For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA -email: contracts@esri.com +email: diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss index c3ced53cdb5..3d4efdf3f70 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss @@ -31,7 +31,6 @@ .text { @apply mt-px mb-0; - margin-inline-start: theme("spacing.px"); margin-inline-start: theme("spacing.0"); } diff --git a/packages/calcite-components/src/tests/commonTests.ts b/packages/calcite-components/src/tests/commonTests.ts index c08e9afe039..819eaaa4fdb 100644 --- a/packages/calcite-components/src/tests/commonTests.ts +++ b/packages/calcite-components/src/tests/commonTests.ts @@ -84,10 +84,8 @@ export function accessible(componentTestSetup: ComponentTestSetup): void { * * @param {string} componentTagOrHTML - the component tag or HTML markup to test against * @param {object} options - additional options to assert - * @param {string} employee.visible - is the component visible - * @param {string} employee.display - is the component's display "inline" - * @param options.visible - * @param options.display + * @param {string} options.visible - is the component visible + * @param {string} options.display - is the component's display "inline" */ export async function renders( componentTagOrHTML: TagOrHTML, @@ -918,7 +916,7 @@ async function getTagAndPage(componentTestSetup: ComponentTestSetup): Promise { }); describe("addLocalizedTrailingDecimalZeros", () => { - function getLocalizedDeimalValue(value: string, trailingZeros: number): String { + function getLocalizedDeimalValue(value: string, trailingZeros: number): string { const localizedValue = numberStringFormatter.localize(value); const localizedZeroValue = numberStringFormatter.localize("0"); return `${localizedValue}`.padEnd(localizedValue.length + trailingZeros, localizedZeroValue); diff --git a/packages/calcite-components/src/utils/number.ts b/packages/calcite-components/src/utils/number.ts index e4ab0a4d6d5..388b6b0dc34 100644 --- a/packages/calcite-components/src/utils/number.ts +++ b/packages/calcite-components/src/utils/number.ts @@ -234,7 +234,7 @@ function stringContainsNumbers(string: string): boolean { * * @param {string} localizedValue - localized number string value * @param {string} value - current value in the input field - * @param {NumberStringFormat} numberStringFormatter - numberStringFormatter instance to localize the number value + * @param {NumberStringFormat} formatter - numberStringFormatter instance to localize the number value * @returns {string} localized number string value */ export function addLocalizedTrailingDecimalZeros( From b0e619b595850fd7114c402189faac01ccb69058 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Fri, 14 Jul 2023 15:48:36 -0700 Subject: [PATCH 3/4] chore: configure prettier to add trailing commas --- .prettierrc.json | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 .prettierrc.json diff --git a/.prettierrc.json b/.prettierrc.json deleted file mode 100644 index 223f5443487..00000000000 --- a/.prettierrc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "$schema": "https://json.schemastore.org/prettierrc", - "trailingComma": "none" -} From 7ea8dcb9dd09cf49c917349fb535dd8384574d1b Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Fri, 14 Jul 2023 15:55:24 -0700 Subject: [PATCH 4/4] style: add trailing commas via new prettier configuration --- .../calcite-components/.storybook/helpers.ts | 2 +- .../calcite-components/.storybook/main.ts | 8 +- .../calcite-components/.storybook/manager.ts | 2 +- .../.storybook/placeholderImage.ts | 2 +- .../calcite-components/.storybook/preview.ts | 12 +- .../.storybook/resources.ts | 12 +- .../calcite-components/.storybook/theme.ts | 2 +- .../calcite-components/.storybook/utils.tsx | 20 +-- .../BOILERPLATE_COMPONENT.md | 6 +- packages/calcite-components/calcite-preset.ts | 94 +++++++------- .../conventions/Documentation.md | 2 +- .../calcite-components/conventions/README.md | 4 +- .../calcite-components/conventions/Styling.md | 2 +- packages/calcite-components/readme.md | 2 +- .../src/assets/styles/_breakpoints.scss | 2 +- .../accordion-item/accordion-item.tsx | 10 +- .../components/accordion-item/resources.ts | 4 +- .../src/components/accordion/accordion.e2e.ts | 26 ++-- .../components/accordion/accordion.stories.ts | 56 ++++----- .../src/components/accordion/accordion.tsx | 8 +- .../components/action-bar/action-bar.e2e.ts | 24 ++-- .../action-bar/action-bar.stories.ts | 22 ++-- .../src/components/action-bar/action-bar.tsx | 16 +-- .../src/components/action-bar/resources.ts | 4 +- .../src/components/action-bar/utils.ts | 8 +- .../action-group/action-group.e2e.ts | 4 +- .../action-group/action-group.stories.ts | 4 +- .../components/action-group/action-group.tsx | 10 +- .../src/components/action-group/resources.ts | 4 +- .../components/action-menu/action-menu.e2e.ts | 42 +++---- .../action-menu/action-menu.stories.ts | 4 +- .../components/action-menu/action-menu.tsx | 14 +-- .../src/components/action-menu/resources.ts | 6 +- .../components/action-pad/action-pad.e2e.ts | 22 ++-- .../action-pad/action-pad.stories.ts | 24 ++-- .../src/components/action-pad/action-pad.tsx | 12 +- .../src/components/action-pad/resources.ts | 4 +- .../src/components/action/action.e2e.ts | 18 +-- .../src/components/action/action.stories.ts | 50 ++++---- .../src/components/action/action.tsx | 20 +-- .../src/components/action/resources.ts | 4 +- .../src/components/alert/alert.e2e.ts | 8 +- .../src/components/alert/alert.stories.ts | 8 +- .../src/components/alert/alert.tsx | 22 ++-- .../src/components/alert/resources.ts | 6 +- .../src/components/avatar/avatar.e2e.ts | 4 +- .../src/components/avatar/avatar.stories.ts | 6 +- .../src/components/avatar/avatar.tsx | 2 +- .../block-section/block-section.e2e.ts | 24 ++-- .../block-section/block-section.tsx | 14 +-- .../src/components/block-section/resources.ts | 6 +- .../src/components/block/block.e2e.ts | 16 +-- .../src/components/block/block.stories.ts | 34 ++--- .../src/components/block/block.tsx | 16 +-- .../src/components/block/resources.ts | 8 +- .../src/components/button/button.e2e.ts | 46 +++---- .../src/components/button/button.stories.ts | 4 +- .../src/components/button/button.tsx | 10 +- .../src/components/button/resources.ts | 2 +- .../src/components/card/card.e2e.ts | 2 +- .../src/components/card/card.stories.ts | 20 +-- .../src/components/card/card.tsx | 8 +- .../src/components/card/resources.ts | 4 +- .../src/components/checkbox/checkbox.e2e.ts | 4 +- .../components/checkbox/checkbox.stories.ts | 4 +- .../src/components/checkbox/checkbox.tsx | 10 +- .../components/chip-group/chip-group.e2e.ts | 4 +- .../chip-group/chip-group.stories.ts | 4 +- .../src/components/chip-group/chip-group.tsx | 8 +- .../src/components/chip/chip.e2e.ts | 6 +- .../src/components/chip/chip.stories.ts | 4 +- .../src/components/chip/chip.tsx | 16 +-- .../src/components/chip/resources.ts | 6 +- .../color-picker-hex-input.e2e.ts | 12 +- .../color-picker-hex-input.tsx | 10 +- .../color-picker-hex-input/resources.ts | 2 +- .../color-picker-swatch.e2e.ts | 8 +- .../color-picker-swatch.stories.ts | 4 +- .../color-picker-swatch.tsx | 12 +- .../color-picker-swatch/resources.ts | 6 +- .../color-picker/color-picker.e2e.ts | 80 ++++++------ .../color-picker/color-picker.stories.ts | 28 ++--- .../components/color-picker/color-picker.tsx | 84 ++++++------- .../src/components/color-picker/resources.ts | 34 ++--- .../src/components/color-picker/utils.spec.ts | 6 +- .../src/components/color-picker/utils.ts | 4 +- .../combobox-item-group.tsx | 2 +- .../combobox-item-group/resources.ts | 2 +- .../combobox-item/combobox-item.tsx | 16 +-- .../src/components/combobox-item/resources.ts | 2 +- .../src/components/combobox/combobox.e2e.ts | 60 ++++----- .../components/combobox/combobox.stories.ts | 6 +- .../src/components/combobox/combobox.tsx | 34 ++--- .../src/components/combobox/resources.ts | 2 +- .../date-picker-day/date-picker-day.tsx | 8 +- .../date-picker-month-header.e2e.ts | 14 +-- .../date-picker-month-header.tsx | 18 +-- .../date-picker-month-header/resources.ts | 4 +- .../date-picker-month/date-picker-month.tsx | 14 +-- .../components/date-picker/date-picker.e2e.ts | 10 +- .../date-picker/date-picker.stories.ts | 48 +++---- .../components/date-picker/date-picker.tsx | 24 ++-- .../src/components/date-picker/utils.spec.ts | 2 +- .../dropdown-group/dropdown-group.tsx | 10 +- .../components/dropdown-group/resources.ts | 2 +- .../dropdown-item/dropdown-item.tsx | 10 +- .../src/components/dropdown-item/resources.ts | 2 +- .../src/components/dropdown/dropdown.e2e.ts | 52 ++++---- .../components/dropdown/dropdown.stories.ts | 10 +- .../src/components/dropdown/dropdown.tsx | 24 ++-- .../src/components/dropdown/resources.ts | 4 +- .../src/components/fab/fab.e2e.ts | 12 +- .../src/components/fab/fab.stories.ts | 30 ++--- .../src/components/fab/fab.tsx | 8 +- .../src/components/fab/resources.ts | 4 +- .../src/components/filter/filter.e2e.ts | 42 +++---- .../src/components/filter/filter.tsx | 12 +- .../src/components/filter/resources.ts | 4 +- .../src/components/flow-item/flow-item.e2e.ts | 20 +-- .../components/flow-item/flow-item.stories.ts | 24 ++-- .../src/components/flow-item/flow-item.tsx | 12 +- .../src/components/flow-item/resources.ts | 6 +- .../src/components/flow/flow.e2e.ts | 2 +- .../src/components/flow/flow.stories.ts | 20 +-- .../src/components/flow/flow.tsx | 6 +- .../src/components/flow/resources.ts | 2 +- .../components/functional/ExpandToggle.tsx | 8 +- .../components/functional/FloatingArrow.tsx | 6 +- .../components/functional/Heading.spec.tsx | 4 +- .../src/components/functional/XButton.tsx | 4 +- .../src/components/graph/graph.e2e.ts | 12 +- .../src/components/graph/graph.stories.ts | 6 +- .../src/components/graph/graph.tsx | 4 +- .../src/components/graph/util.ts | 2 +- .../src/components/handle/handle.tsx | 8 +- .../src/components/handle/resources.ts | 4 +- .../src/components/icon/icon.e2e.ts | 4 +- .../src/components/icon/icon.stories.ts | 2 +- .../src/components/icon/icon.tsx | 10 +- .../src/components/icon/resources.ts | 2 +- .../src/components/icon/utils.spec.ts | 10 +- .../src/components/icon/utils.ts | 2 +- .../inline-editable/inline-editable.e2e.ts | 4 +- .../inline-editable.stories.ts | 4 +- .../inline-editable/inline-editable.tsx | 18 +-- .../components/inline-editable/resources.ts | 2 +- .../input-date-picker.e2e.ts | 12 +- .../input-date-picker.stories.ts | 4 +- .../input-date-picker/input-date-picker.tsx | 48 +++---- .../components/input-date-picker/resources.ts | 2 +- .../input-message/input-message.tsx | 2 +- .../components/input-message/interfaces.ts | 2 +- .../input-number/input-number.e2e.ts | 46 +++---- .../input-number/input-number.stories.ts | 4 +- .../components/input-number/input-number.tsx | 52 ++++---- .../src/components/input-number/resources.ts | 4 +- .../components/input-text/input-text.e2e.ts | 22 ++-- .../input-text/input-text.stories.ts | 4 +- .../src/components/input-text/input-text.tsx | 30 ++--- .../src/components/input-text/resources.ts | 4 +- .../input-time-picker.e2e.ts | 8 +- .../input-time-picker.stories.ts | 4 +- .../input-time-picker/input-time-picker.tsx | 70 +++++------ .../components/input-time-picker/resources.ts | 2 +- .../src/components/input/input.e2e.ts | 78 ++++++------ .../src/components/input/input.stories.ts | 4 +- .../src/components/input/input.tsx | 56 ++++----- .../src/components/input/resources.ts | 6 +- .../src/components/label/label.e2e.ts | 12 +- .../src/components/label/label.stories.ts | 4 +- .../src/components/label/label.tsx | 4 +- .../src/components/label/resources.ts | 2 +- .../src/components/link/link.e2e.ts | 10 +- .../src/components/link/link.stories.ts | 4 +- .../src/components/link/link.tsx | 6 +- .../list-item-group/list-item-group.e2e.ts | 8 +- .../list-item-group/list-item-group.tsx | 4 +- .../components/list-item-group/resources.ts | 2 +- .../src/components/list-item/list-item.e2e.ts | 28 ++--- .../src/components/list-item/list-item.tsx | 20 +-- .../src/components/list-item/resources.ts | 6 +- .../src/components/list/list.e2e.ts | 28 ++--- .../src/components/list/list.stories.ts | 10 +- .../src/components/list/list.tsx | 16 +-- .../src/components/list/resources.ts | 4 +- .../src/components/loader/loader.stories.ts | 10 +- .../src/components/loader/loader.tsx | 8 +- .../src/components/menu-item/menu-item.e2e.ts | 6 +- .../components/menu-item/menu-item.stories.ts | 4 +- .../src/components/menu-item/menu-item.tsx | 18 +-- .../src/components/menu-item/resources.ts | 2 +- .../src/components/menu/menu.e2e.ts | 4 +- .../src/components/menu/menu.stories.ts | 4 +- .../src/components/menu/menu.tsx | 14 +-- .../src/components/modal/modal.e2e.ts | 10 +- .../src/components/modal/modal.stories.ts | 6 +- .../src/components/modal/modal.tsx | 20 +-- .../src/components/modal/resources.ts | 8 +- .../navigation-logo/navigation-logo.e2e.ts | 10 +- .../navigation-logo.stories.ts | 4 +- .../navigation-logo/navigation-logo.tsx | 8 +- .../components/navigation-logo/resources.ts | 2 +- .../navigation-user/navigation-user.e2e.ts | 10 +- .../navigation-user.stories.ts | 4 +- .../navigation-user/navigation-user.tsx | 6 +- .../components/navigation-user/resources.ts | 2 +- .../components/navigation/navigation.e2e.ts | 10 +- .../navigation/navigation.stories.ts | 4 +- .../src/components/navigation/navigation.tsx | 8 +- .../src/components/navigation/resources.ts | 6 +- .../src/components/notice/notice.e2e.ts | 4 +- .../src/components/notice/notice.stories.ts | 4 +- .../src/components/notice/notice.tsx | 10 +- .../src/components/notice/resources.ts | 4 +- .../option-group/option-group.e2e.ts | 10 +- .../components/option-group/option-group.tsx | 4 +- .../src/components/option/option.e2e.ts | 12 +- .../src/components/option/option.tsx | 10 +- .../components/pagination/pagination.e2e.ts | 6 +- .../pagination/pagination.stories.ts | 8 +- .../src/components/pagination/pagination.tsx | 22 ++-- .../src/components/pagination/resources.ts | 2 +- .../src/components/panel/panel.e2e.ts | 12 +- .../src/components/panel/panel.stories.ts | 24 ++-- .../src/components/panel/panel.tsx | 26 ++-- .../src/components/panel/resources.ts | 6 +- .../pick-list-group/pick-list-group.e2e.ts | 4 +- .../pick-list-group/pick-list-group.tsx | 6 +- .../components/pick-list-group/resources.ts | 4 +- .../pick-list-item/pick-list-item.e2e.ts | 12 +- .../pick-list-item/pick-list-item.tsx | 16 +-- .../components/pick-list-item/resources.ts | 6 +- .../src/components/pick-list/pick-list.e2e.ts | 12 +- .../components/pick-list/pick-list.stories.ts | 24 ++-- .../src/components/pick-list/pick-list.tsx | 10 +- .../src/components/pick-list/resources.ts | 8 +- .../components/pick-list/shared-list-logic.ts | 2 +- .../pick-list/shared-list-render.tsx | 2 +- .../components/pick-list/shared-list-tests.ts | 20 +-- .../src/components/popover/popover.e2e.ts | 30 ++--- .../src/components/popover/popover.stories.ts | 8 +- .../src/components/popover/popover.tsx | 24 ++-- .../src/components/popover/readme.md | 4 +- .../src/components/popover/resources.ts | 2 +- .../src/components/popover/usage/Virtual.md | 4 +- .../components/progress/progress.stories.ts | 4 +- .../src/components/progress/progress.tsx | 4 +- .../radio-button-group.e2e.ts | 4 +- .../radio-button-group.stories.ts | 4 +- .../radio-button-group/radio-button-group.tsx | 6 +- .../radio-button/radio-button.e2e.ts | 8 +- .../radio-button/radio-button.stories.ts | 4 +- .../components/radio-button/radio-button.tsx | 10 +- .../src/components/radio-button/resources.ts | 2 +- .../src/components/rating/function/star.tsx | 2 +- .../src/components/rating/rating.e2e.ts | 8 +- .../src/components/rating/rating.stories.ts | 4 +- .../src/components/rating/rating.tsx | 16 +-- .../src/components/resources.ts | 2 +- .../src/components/scrim/resources.ts | 4 +- .../src/components/scrim/scrim.e2e.ts | 24 ++-- .../src/components/scrim/scrim.stories.ts | 4 +- .../src/components/scrim/scrim.tsx | 4 +- .../segmented-control-item/resources.ts | 4 +- .../segmented-control-item.tsx | 6 +- .../segmented-control.e2e.ts | 4 +- .../segmented-control.stories.ts | 4 +- .../segmented-control/segmented-control.tsx | 10 +- .../src/components/select/resources.ts | 2 +- .../src/components/select/select.e2e.ts | 26 ++-- .../src/components/select/select.stories.ts | 32 ++--- .../src/components/select/select.tsx | 12 +- .../components/shell-center-row/resources.ts | 4 +- .../shell-center-row/shell-center-row.e2e.ts | 8 +- .../shell-center-row/shell-center-row.tsx | 4 +- .../src/components/shell-panel/resources.ts | 4 +- .../components/shell-panel/shell-panel.e2e.ts | 10 +- .../components/shell-panel/shell-panel.tsx | 18 +-- .../src/components/shell/resources.ts | 4 +- .../src/components/shell/shell.stories.ts | 30 ++--- .../src/components/shell/shell.tsx | 10 +- .../src/components/slider/resources.ts | 2 +- .../src/components/slider/slider.e2e.ts | 56 ++++----- .../src/components/slider/slider.stories.ts | 24 ++-- .../src/components/slider/slider.tsx | 54 ++++---- .../src/components/sortable-list/resources.ts | 2 +- .../sortable-list/sortable-list.e2e.ts | 4 +- .../sortable-list/sortable-list.tsx | 10 +- .../src/components/split-button/resources.ts | 2 +- .../split-button/split-button.e2e.ts | 12 +- .../split-button/split-button.stories.ts | 4 +- .../components/split-button/split-button.tsx | 12 +- .../src/components/stack/resources.ts | 4 +- .../src/components/stack/stack.e2e.ts | 4 +- .../src/components/stack/stack.stories.ts | 4 +- .../src/components/stack/stack.tsx | 2 +- .../components/stepper-item/stepper-item.tsx | 22 ++-- .../src/components/stepper/stepper.stories.ts | 4 +- .../src/components/stepper/stepper.tsx | 10 +- .../src/components/switch/switch.stories.ts | 4 +- .../src/components/switch/switch.tsx | 10 +- .../src/components/tab-nav/tab-nav.e2e.ts | 14 +-- .../src/components/tab-nav/tab-nav.tsx | 10 +- .../src/components/tab-title/resources.ts | 4 +- .../src/components/tab-title/tab-title.e2e.ts | 12 +- .../src/components/tab-title/tab-title.tsx | 12 +- .../src/components/tab/tab.e2e.ts | 8 +- .../src/components/tab/tab.tsx | 6 +- .../src/components/tabs/resources.ts | 2 +- .../src/components/tabs/tabs.e2e.ts | 22 ++-- .../src/components/tabs/tabs.stories.ts | 8 +- .../src/components/tabs/tabs.tsx | 2 +- .../src/components/text-area/resources.ts | 4 +- .../src/components/text-area/text-area.e2e.ts | 18 +-- .../components/text-area/text-area.stories.ts | 4 +- .../src/components/text-area/text-area.tsx | 24 ++-- .../tile-select-group.stories.ts | 4 +- .../tile-select-group/tile-select-group.tsx | 4 +- .../src/components/tile-select/resources.ts | 2 +- .../components/tile-select/tile-select.e2e.ts | 12 +- .../tile-select/tile-select.stories.ts | 30 ++--- .../components/tile-select/tile-select.tsx | 12 +- .../src/components/tile/resources.ts | 2 +- .../src/components/tile/tile.e2e.ts | 4 +- .../src/components/tile/tile.stories.ts | 4 +- .../src/components/tile/tile.tsx | 8 +- .../src/components/time-picker/resources.ts | 2 +- .../components/time-picker/time-picker.e2e.ts | 90 ++++++------- .../components/time-picker/time-picker.tsx | 50 ++++---- .../src/components/tip-group/tip-group.tsx | 2 +- .../src/components/tip-manager/resources.ts | 6 +- .../components/tip-manager/tip-manager.e2e.ts | 12 +- .../tip-manager/tip-manager.stories.ts | 12 +- .../components/tip-manager/tip-manager.tsx | 8 +- .../src/components/tip/resources.ts | 6 +- .../src/components/tip/tip.e2e.ts | 4 +- .../src/components/tip/tip.stories.ts | 18 +-- .../src/components/tip/tip.tsx | 8 +- .../src/components/tooltip/readme.md | 4 +- .../src/components/tooltip/resources.ts | 2 +- .../src/components/tooltip/tooltip.e2e.ts | 50 ++++---- .../src/components/tooltip/tooltip.stories.ts | 4 +- .../src/components/tooltip/tooltip.tsx | 16 +-- .../src/components/tooltip/usage/Virtual.md | 4 +- .../src/components/tree-item/resources.ts | 6 +- .../src/components/tree-item/tree-item.e2e.ts | 18 +-- .../src/components/tree-item/tree-item.tsx | 26 ++-- .../src/components/tree/tree.e2e.ts | 34 ++--- .../src/components/tree/tree.stories.ts | 6 +- .../src/components/tree/tree.tsx | 4 +- .../components/value-list-item/resources.ts | 4 +- .../value-list-item/value-list-item.e2e.ts | 10 +- .../value-list-item/value-list-item.tsx | 12 +- .../src/components/value-list/resources.ts | 6 +- .../components/value-list/value-list.e2e.ts | 32 ++--- .../value-list/value-list.stories.ts | 22 ++-- .../src/components/value-list/value-list.tsx | 16 +-- .../src/demos/_assets/head.ts | 6 +- .../src/demos/_assets/locales.ts | 118 +++++++++--------- .../calcite-components/src/demos/alert.html | 2 +- .../src/demos/date-picker.html | 4 +- .../calcite-components/src/demos/form.html | 2 +- .../calcite-components/src/demos/graph.html | 2 +- .../src/demos/input-number.html | 2 +- .../calcite-components/src/demos/input.html | 2 +- .../src/demos/mode/auto.html | 12 +- .../src/demos/pick-list.html | 6 +- .../src/demos/shell-panel.html | 12 +- .../src/demos/shell/block-configurations.html | 6 +- .../demo-app-advanced-2-shell-header.html | 8 +- .../src/demos/shell/demo-app-advanced-2.html | 8 +- .../src/demos/shell/demo-app-advanced-3.html | 8 +- .../demo-app-advanced-center-row-async.html | 6 +- .../shell/demo-app-advanced-center-row.html | 6 +- .../src/demos/shell/demo-app-advanced.html | 12 +- .../src/demos/shell/demo-app-blank.html | 6 +- .../shell/demo-app-center-row-action-bar.html | 6 +- .../shell/demo-app-full-window-reversed.html | 4 +- .../src/demos/shell/demo-app-full-window.html | 4 +- .../src/demos/shell/demo-app-rtl.html | 6 +- .../src/demos/shell/demo-app.html | 6 +- .../src/demos/shell/nesting-testing-flow.html | 6 +- .../src/demos/shell/nesting-testing.html | 6 +- .../src/demos/shell/popup-config-example.html | 8 +- .../src/demos/shell/resizable-panels.html | 12 +- .../calcite-components/src/demos/slider.html | 4 +- .../src/tests/commonTests.ts | 26 ++-- .../src/tests/globalStyles.e2e.ts | 10 +- .../calcite-components/src/tests/utils.ts | 6 +- .../calcite-components/src/utils/config.ts | 2 +- .../calcite-components/src/utils/date.spec.ts | 10 +- packages/calcite-components/src/utils/date.ts | 2 +- .../calcite-components/src/utils/dom.e2e.ts | 24 ++-- .../calcite-components/src/utils/dom.spec.ts | 16 +-- packages/calcite-components/src/utils/dom.ts | 6 +- .../src/utils/floating-ui.spec.ts | 6 +- .../src/utils/floating-ui.ts | 42 +++---- .../src/utils/focusTrapComponent.spec.ts | 2 +- .../src/utils/focusTrapComponent.ts | 2 +- .../calcite-components/src/utils/form.tsx | 4 +- .../src/utils/globalAttributes.spec.ts | 6 +- .../src/utils/interactive.spec.ts | 2 +- packages/calcite-components/src/utils/key.ts | 2 +- .../src/utils/label.spec.ts | 22 ++-- .../src/utils/locale.spec.ts | 20 +-- .../calcite-components/src/utils/locale.ts | 14 +-- packages/calcite-components/src/utils/mode.ts | 2 +- .../src/utils/number.spec.ts | 10 +- .../src/utils/openCloseComponent.ts | 2 +- .../calcite-components/src/utils/resources.ts | 12 +- packages/calcite-components/src/utils/t9n.ts | 2 +- packages/calcite-components/src/utils/time.ts | 12 +- packages/calcite-components/stencil.config.ts | 38 +++--- .../support/generateT9nDocsJSON.ts | 2 +- .../support/generateT9nTypes.ts | 8 +- .../support/patchESMResolution.ts | 2 +- .../support/patchTreeShaking.ts | 2 +- packages/calcite-components/support/preact.ts | 2 +- .../support/syncEnT9nBundles.ts | 2 +- .../calcite-components/tailwind.config.ts | 2 +- 420 files changed, 2495 insertions(+), 2495 deletions(-) diff --git a/packages/calcite-components/.storybook/helpers.ts b/packages/calcite-components/.storybook/helpers.ts index 486869421c5..0e07f27b687 100644 --- a/packages/calcite-components/.storybook/helpers.ts +++ b/packages/calcite-components/.storybook/helpers.ts @@ -44,6 +44,6 @@ export function storyFilters(): { excludeStories: RegExp | string[]; } { return { - excludeStories: process.env.STORYBOOK_SCREENSHOT_TEST_BUILD ? /.*_NoTest$/ : /.*_TestOnly$/ + excludeStories: process.env.STORYBOOK_SCREENSHOT_TEST_BUILD ? /.*_NoTest$/ : /.*_TestOnly$/, }; } diff --git a/packages/calcite-components/.storybook/main.ts b/packages/calcite-components/.storybook/main.ts index 52b1523e83c..2344adab9eb 100644 --- a/packages/calcite-components/.storybook/main.ts +++ b/packages/calcite-components/.storybook/main.ts @@ -7,7 +7,7 @@ module.exports = { "@storybook/testing-library", "@whitespace/storybook-addon-html", "storybook-addon-themes", - "storybook-rtl-addon" + "storybook-rtl-addon", ], staticDirs: ["../__docs-temp__"], stories: ["../src/**/*.stories.@(mdx|ts)"], @@ -19,8 +19,8 @@ module.exports = { // we need to set this up to enable custom Storybook doc components // https://storybook.js.org/docs/html/writing-docs/docs-page#with-a-custom-component - "@babel/preset-react" - ] + "@babel/preset-react", + ], }; - } + }, }; diff --git a/packages/calcite-components/.storybook/manager.ts b/packages/calcite-components/.storybook/manager.ts index ff1b290ed92..72d81dcae3c 100644 --- a/packages/calcite-components/.storybook/manager.ts +++ b/packages/calcite-components/.storybook/manager.ts @@ -15,5 +15,5 @@ addons.register("@whitespace/storybook-addon-html", (api) => { addons.setConfig({ panelPosition: "right", - theme + theme, }); diff --git a/packages/calcite-components/.storybook/placeholderImage.ts b/packages/calcite-components/.storybook/placeholderImage.ts index 06e2a97b8d6..d9cfb09b999 100644 --- a/packages/calcite-components/.storybook/placeholderImage.ts +++ b/packages/calcite-components/.storybook/placeholderImage.ts @@ -49,7 +49,7 @@ export function placeholderImage({ bgColor = "#ddd", textColor = "rgba(0,0,0,0.5)", dataUri = true, - charset = "UTF-8" + charset = "UTF-8", }: SimpleSvgPlaceholderParams): string { const str = ` diff --git a/packages/calcite-components/.storybook/preview.ts b/packages/calcite-components/.storybook/preview.ts index c6d94020c14..253ad2a0b43 100644 --- a/packages/calcite-components/.storybook/preview.ts +++ b/packages/calcite-components/.storybook/preview.ts @@ -27,7 +27,7 @@ export const parameters = { element: "#root", config: {}, options: {}, - manual: false + manual: false, }, modes, docs: { @@ -44,16 +44,16 @@ export const parameters = { return null; }, - page: globalDocsPage + page: globalDocsPage, }, layout: "centered", options: { storySort: { - order: ["Overview", "Components", "App Components"] - } + order: ["Overview", "Components", "App Components"], + }, }, chromatic: { // https://www.chromatic.com/docs/threshold - diffThreshold: Number(process.env.CHROMATIC_DIFF_THRESHOLD) || 0.15 - } + diffThreshold: Number(process.env.CHROMATIC_DIFF_THRESHOLD) || 0.15, + }, }; diff --git a/packages/calcite-components/.storybook/resources.ts b/packages/calcite-components/.storybook/resources.ts index 917dddfecaa..b7182263aed 100644 --- a/packages/calcite-components/.storybook/resources.ts +++ b/packages/calcite-components/.storybook/resources.ts @@ -22,22 +22,22 @@ const appearanceOptions: Appearance[] = ["solid", "transparent", "outline"]; export const ATTRIBUTES: CommonAttributes = { alignment: { values: alignmentOptions, - defaultValue: alignmentOptions[0] + defaultValue: alignmentOptions[0], }, appearance: { values: appearanceOptions, - defaultValue: appearanceOptions[0] + defaultValue: appearanceOptions[0], }, logicalFlowPosition: { values: logicalFlowPositionOptions, - defaultValue: logicalFlowPositionOptions[2] + defaultValue: logicalFlowPositionOptions[2], }, position: { values: positionOptions, - defaultValue: positionOptions[0] + defaultValue: positionOptions[0], }, scale: { values: scaleOptions, - defaultValue: scaleOptions[1] - } + defaultValue: scaleOptions[1], + }, }; diff --git a/packages/calcite-components/.storybook/theme.ts b/packages/calcite-components/.storybook/theme.ts index 4ae854f9422..fc1892be1c4 100644 --- a/packages/calcite-components/.storybook/theme.ts +++ b/packages/calcite-components/.storybook/theme.ts @@ -5,5 +5,5 @@ export default create({ base: "light", brandTitle: "Calcite Components", brandUrl: "./", - brandImage: logo + brandImage: logo, }); diff --git a/packages/calcite-components/.storybook/utils.tsx b/packages/calcite-components/.storybook/utils.tsx index d7179693b72..5459456365b 100644 --- a/packages/calcite-components/.storybook/utils.tsx +++ b/packages/calcite-components/.storybook/utils.tsx @@ -12,7 +12,7 @@ import { optionsKnob as options, radios, select, - text + text, } from "@storybook/addon-knobs"; import { CSS_UTILITY } from "../src/utils/resources"; @@ -23,45 +23,45 @@ import React from "react"; const autoValue = { name: "Auto", - value: colors["blk-200"] + value: colors["blk-200"], }; const lightValue = { name: "Light", - value: colors["blk-005"] + value: colors["blk-005"], }; const darkValue = { name: "Dark", - value: colors["blk-210"] + value: colors["blk-210"], }; const list: Mode[] = [ { name: lightValue.name, class: CSS_UTILITY.lightMode, - color: lightValue.value + color: lightValue.value, }, { name: darkValue.name, class: CSS_UTILITY.darkMode, - color: darkValue.value + color: darkValue.value, }, { name: autoValue.name, class: CSS_UTILITY.autoMode, - color: autoValue.value - } + color: autoValue.value, + }, ]; export const modes = { default: lightValue.name, - list + list, }; export const modesDarkDefault = { default: darkValue.name, - list + list, }; /** diff --git a/packages/calcite-components/BOILERPLATE_COMPONENT.md b/packages/calcite-components/BOILERPLATE_COMPONENT.md index edf50e357f7..17a1eb8777e 100644 --- a/packages/calcite-components/BOILERPLATE_COMPONENT.md +++ b/packages/calcite-components/BOILERPLATE_COMPONENT.md @@ -14,7 +14,7 @@ import { CSS, TEXT } from "./resources"; @Component({ tag: "calcite-example", styleUrl: "example.scss", - shadow: true + shadow: true, }) export class Example { // -------------------------------------------------------------------------- @@ -130,11 +130,11 @@ Resources defined in `/src/my-component/resources.ts`. ```ts export const TEXT = { - myString: "i18n string prop start with 'text'" + myString: "i18n string prop start with 'text'", }; export const CSS = { - foo: "foo" + foo: "foo", }; ``` diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts index 0cb9abad6a1..719cccbf4da 100644 --- a/packages/calcite-components/calcite-preset.ts +++ b/packages/calcite-components/calcite-preset.ts @@ -31,7 +31,7 @@ export default { 2: "var(--calcite-ui-border-2)", 3: "var(--calcite-ui-border-3)", input: "var(--calcite-ui-border-input)", - transparent: theme("colors.transparent") + transparent: theme("colors.transparent"), }, "color-brand": theme("colors.brand"), "color-brand-hover": theme("colors.brand-hover"), @@ -41,7 +41,7 @@ export default { "color-warning": theme("colors.warning"), "color-danger": theme("colors.danger"), "color-danger-hover": theme("colors.danger-hover"), - "color-danger-press": theme("colors.danger-press") + "color-danger-press": theme("colors.danger-press"), }), colors: { current: "currentColor", @@ -59,8 +59,8 @@ export default { foreground: { 1: "var(--calcite-ui-foreground-1)", 2: "var(--calcite-ui-foreground-2)", - 3: "var(--calcite-ui-foreground-3)" - } + 3: "var(--calcite-ui-foreground-3)", + }, }, color: { 1: "var(--calcite-ui-text-1)", @@ -68,15 +68,15 @@ export default { 3: "var(--calcite-ui-text-3)", inverse: "var(--calcite-ui-text-inverse)", link: "var(--calcite-ui-text-link)", - icon: "var(--calcite-ui-icon-color)" + icon: "var(--calcite-ui-icon-color)", }, - transparent: "transparent" + transparent: "transparent", }, fontFamily: { // assets/styles/_type sans: "var(--calcite-sans-family)", mono: "var(--calcite-code-family)", - inherit: "inherit" + inherit: "inherit", }, fontSize: { // assets/styles/_type @@ -118,20 +118,20 @@ export default { "5-wrap": ["var(--calcite-font-size-5)", { lineHeight: "1.25" }], "6-wrap": ["var(--calcite-font-size-6)", { lineHeight: "1.25" }], "7-wrap": ["var(--calcite-font-size-7)", { lineHeight: "1.25" }], - "8-wrap": ["var(--calcite-font-size-8)", { lineHeight: "1.25" }] + "8-wrap": ["var(--calcite-font-size-8)", { lineHeight: "1.25" }], }, fontWeight: { // assets/styles/_type light: "var(--calcite-font-weight-light)", normal: "var(--calcite-font-weight-normal)", medium: "var(--calcite-font-weight-medium)", - bold: "var(--calcite-font-weight-bold)" + bold: "var(--calcite-font-weight-bold)", }, screens: { s: "480px", m: "864px", l: "1024px", - xl: "1440px" + xl: "1440px", }, backgroundColor: ({ theme }): object => ({ ...theme("colors.background"), @@ -144,17 +144,17 @@ export default { warning: theme("colors.warning"), danger: theme("colors.danger"), "danger-hover": theme("colors.danger-hover"), - "danger-press": theme("colors.danger-press") + "danger-press": theme("colors.danger-press"), }), extend: { animation: { in: "in var(--calcite-internal-animation-timing-slow) ease-in-out", "in-down": "in-down var(--calcite-internal-animation-timing-slow) ease-in-out", "in-up": "in-up var(--calcite-internal-animation-timing-slow) ease-in-out", - "in-scale": "in-scale var(--calcite-internal-animation-timing-slow) linear" + "in-scale": "in-scale var(--calcite-internal-animation-timing-slow) linear", }, borderRadius: { - half: "50%" + half: "50%", }, boxShadow: { 0: "0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04)", @@ -168,67 +168,67 @@ export default { "outline-active": "0 0 0 1px var(--calcite-ui-brand)", none: "none", xs: "0 0 0 1px rgba(0, 0, 0, 0.05)", - outline: "0 0 0 3px rgba(66, 153, 225, 0.5)" + outline: "0 0 0 3px rgba(66, 153, 225, 0.5)", }, keyframes: { in: { "0%": { - opacity: 0 + opacity: 0, }, "100%": { - opacity: 1 - } + opacity: 1, + }, }, "in-down": { "0%": { opacity: 0, - transform: "translate3D(0, -5px, 0)" + transform: "translate3D(0, -5px, 0)", }, "100%": { opacity: 1, - transform: "translate3D(0, 0, 0)" - } + transform: "translate3D(0, 0, 0)", + }, }, "in-up": { "0%": { opacity: 0, - transform: "translate3D(0, 5px, 0)" + transform: "translate3D(0, 5px, 0)", }, "100%": { opacity: 1, - transform: "translate3D(0, 0, 0)" - } + transform: "translate3D(0, 0, 0)", + }, }, "in-scale": { "0%": { opacity: 0, - transform: "scale3D(0.95, 0.95, 1)" + transform: "scale3D(0.95, 0.95, 1)", }, "100%": { opacity: 1, - transform: "scale3D(1, 1, 1)" - } - } + transform: "scale3D(1, 1, 1)", + }, + }, }, opacity: { - disabled: "var(--calcite-ui-opacity-disabled)" + disabled: "var(--calcite-ui-opacity-disabled)", }, spacing: { 0.5: "0.125rem", 2.5: "0.625rem", 3.5: "0.875rem", 9: "2.25rem", - 11: "2.75rem" + 11: "2.75rem", }, transitionProperty: { margin: "margin", - color: "color" + color: "color", }, transitionTimingFunction: { - cubic: "cubic-bezier(0.215, 0.440, 0.420, 0.880)" + cubic: "cubic-bezier(0.215, 0.440, 0.420, 0.880)", }, maxHeight: { - menu: "45vh" + menu: "45vh", }, zIndex: { deep: "var(--calcite-app-z-index-deep)", @@ -240,42 +240,42 @@ export default { overlay: "var(--calcite-app-z-index-overlay)", modal: "var(--calcite-app-z-index-modal)", popover: "var(--calcite-app-z-index-popup)", - tooltip: "901" - } - } + tooltip: "901", + }, + }, }, plugins: [ plugin(({ addUtilities }) => { const newUtilities = { ".word-break": { "word-wrap": "break-word", - "word-break": "break-word" + "word-break": "break-word", }, ".focus-base": { - "outline-color": "transparent" + "outline-color": "transparent", }, ".focus-normal": { - outline: "2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand))" + outline: "2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand))", }, ".focus-outset": { outline: "2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand))", - "outline-offset": invert("2px", "--calcite-ui-focus-offset-invert") + "outline-offset": invert("2px", "--calcite-ui-focus-offset-invert"), }, ".focus-inset": { outline: "2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand))", - "outline-offset": invert("-2px", "--calcite-ui-focus-offset-invert") + "outline-offset": invert("-2px", "--calcite-ui-focus-offset-invert"), }, ".focus-outset-danger": { outline: "2px solid var(--calcite-ui-danger)", - "outline-offset": invert("2px", "--calcite-ui-focus-offset-invert") + "outline-offset": invert("2px", "--calcite-ui-focus-offset-invert"), }, ".focus-inset-danger": { outline: "2px solid var(--calcite-ui-danger)", - "outline-offset": invert("-2px", "--calcite-ui-focus-offset-invert") + "outline-offset": invert("-2px", "--calcite-ui-focus-offset-invert"), }, ".transition-default": { - transition: "all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s" - } + transition: "all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s", + }, }; addUtilities(newUtilities); }), @@ -287,11 +287,11 @@ export default { [`.border-t-${color}`]: { borderTopColor: colors[color] }, [`.border-r-${color}`]: { borderRightColor: colors[color] }, [`.border-b-${color}`]: { borderBottomColor: colors[color] }, - [`.border-l-${color}`]: { borderLeftColor: colors[color] } + [`.border-l-${color}`]: { borderLeftColor: colors[color] }, })); const utilities = Object.assign({}, ...colorMap); addUtilities(utilities); - }) - ] + }), + ], }; diff --git a/packages/calcite-components/conventions/Documentation.md b/packages/calcite-components/conventions/Documentation.md index 7275987e444..6f22bb5c4af 100644 --- a/packages/calcite-components/conventions/Documentation.md +++ b/packages/calcite-components/conventions/Documentation.md @@ -51,7 +51,7 @@ import notes from "./readme.md"; export default { title: "Components/My Component", parameters: { notes }, - ...storyFilters() + ...storyFilters(), }; export const simple = (): string => html``; diff --git a/packages/calcite-components/conventions/README.md b/packages/calcite-components/conventions/README.md index fa2155f0db6..1845302fc5a 100644 --- a/packages/calcite-components/conventions/README.md +++ b/packages/calcite-components/conventions/README.md @@ -258,7 +258,7 @@ import { Component, Host, h } from "@stencil/core"; @Component({ tag: "calcite-test", shadow: true, - assetsDirs: ["assets"] + assetsDirs: ["assets"], }) export class MyComponent { /* ... */ @@ -293,7 +293,7 @@ import { guid } from "../../utils/guid"; @Component({ tag: "calcite-example", styleUrl: "example.scss", - shadow: true + shadow: true, }) export class Example { // ... diff --git a/packages/calcite-components/conventions/Styling.md b/packages/calcite-components/conventions/Styling.md index 753680e395c..7ac3a51ef7d 100644 --- a/packages/calcite-components/conventions/Styling.md +++ b/packages/calcite-components/conventions/Styling.md @@ -19,7 +19,7 @@ Add a class to handle the logic in the component class. ```tsx
``` diff --git a/packages/calcite-components/readme.md b/packages/calcite-components/readme.md index eb65a631ab6..4323d6e3f72 100644 --- a/packages/calcite-components/readme.md +++ b/packages/calcite-components/readme.md @@ -71,7 +71,7 @@ When using the [Distribution](https://stenciljs.com/docs/distribution) build, yo import { defineCustomElements } from "@esri/calcite-components/dist/loader"; // CDN hosted assets defineCustomElements(window, { - resourcesUrl: "https://cdn.jsdelivr.net/npm/@esri/calcite-components/dist/calcite/assets" + resourcesUrl: "https://cdn.jsdelivr.net/npm/@esri/calcite-components/dist/calcite/assets", }); // Local assets diff --git a/packages/calcite-components/src/assets/styles/_breakpoints.scss b/packages/calcite-components/src/assets/styles/_breakpoints.scss index acec66168dd..3c76312bc17 100644 --- a/packages/calcite-components/src/assets/styles/_breakpoints.scss +++ b/packages/calcite-components/src/assets/styles/_breakpoints.scss @@ -3,7 +3,7 @@ $grid-breakpoints: ( sm: 576px, md: 768px, lg: 992px, - xl: 1200px + xl: 1200px, ) !default; // Breakpoint viewport sizes and media queries. diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx index 1ae66013198..1b5ab559f65 100644 --- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx +++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx @@ -7,12 +7,12 @@ import { Host, Listen, Prop, - VNode + VNode, } from "@stencil/core"; import { ConditionalSlotComponent, connectConditionalSlotComponent, - disconnectConditionalSlotComponent + disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot"; import { getElementDir, getSlotted, toAriaBoolean } from "../../utils/dom"; import { CSS_UTILITY } from "../../utils/resources"; @@ -28,7 +28,7 @@ import { RequestedItem } from "./interfaces"; @Component({ tag: "calcite-accordion-item", styleUrl: "accordion-item.scss", - shadow: true + shadow: true, }) export class AccordionItem implements ConditionalSlotComponent { //-------------------------------------------------------------------------- @@ -178,7 +178,7 @@ export class AccordionItem implements ConditionalSlotComponent {
@@ -290,7 +290,7 @@ export class AccordionItem implements ConditionalSlotComponent { private emitRequestedItem(): void { this.calciteInternalAccordionItemSelect.emit({ - requestedAccordionItem: this.el as HTMLCalciteAccordionItemElement + requestedAccordionItem: this.el as HTMLCalciteAccordionItemElement, }); } } diff --git a/packages/calcite-components/src/components/accordion-item/resources.ts b/packages/calcite-components/src/components/accordion-item/resources.ts index a5dff5f1bd2..eec57658ec1 100644 --- a/packages/calcite-components/src/components/accordion-item/resources.ts +++ b/packages/calcite-components/src/components/accordion-item/resources.ts @@ -1,6 +1,6 @@ export const SLOTS = { actionsStart: "actions-start", - actionsEnd: "actions-end" + actionsEnd: "actions-end", }; export const CSS = { @@ -16,5 +16,5 @@ export const CSS = { content: "content", iconStart: "icon--start", iconEnd: "icon--end", - headerContainer: "header-container" + headerContainer: "header-container", }; diff --git a/packages/calcite-components/src/components/accordion/accordion.e2e.ts b/packages/calcite-components/src/components/accordion/accordion.e2e.ts index 8066c71b847..12887224bdc 100644 --- a/packages/calcite-components/src/components/accordion/accordion.e2e.ts +++ b/packages/calcite-components/src/components/accordion/accordion.e2e.ts @@ -38,24 +38,24 @@ describe("calcite-accordion", () => { defaults("calcite-accordion", [ { propertyName: "appearance", - defaultValue: "solid" + defaultValue: "solid", }, { propertyName: "iconPosition", - defaultValue: "end" + defaultValue: "end", }, { propertyName: "scale", - defaultValue: "m" + defaultValue: "m", }, { propertyName: "selectionMode", - defaultValue: "multiple" + defaultValue: "multiple", }, { propertyName: "iconType", - defaultValue: "chevron" - } + defaultValue: "chevron", + }, ]); }); @@ -63,24 +63,24 @@ describe("calcite-accordion", () => { reflects("calcite-accordion", [ { propertyName: "iconPosition", - value: "start" + value: "start", }, { propertyName: "iconPosition", - value: "end" + value: "end", }, { propertyName: "selectionMode", - value: "single-persist" + value: "single-persist", }, { propertyName: "selectionMode", - value: "single" + value: "single", }, { propertyName: "selectionMode", - value: "multiple" - } + value: "multiple", + }, ]); }); @@ -210,7 +210,7 @@ describe("calcite-accordion", () => { it("clicking on an accordion with selection-mode=single does not toggle unrelated accordions with the same selection mode", async () => { const page = await newE2EPage({ html: html` ${accordionContent} - ${accordionContent} ` + ${accordionContent} `, }); await page.waitForChanges(); diff --git a/packages/calcite-components/src/components/accordion/accordion.stories.ts b/packages/calcite-components/src/components/accordion/accordion.stories.ts index 0d9afb97e24..2a65b68e4d3 100644 --- a/packages/calcite-components/src/components/accordion/accordion.stories.ts +++ b/packages/calcite-components/src/components/accordion/accordion.stories.ts @@ -3,7 +3,7 @@ import { Attributes, filterComponentAttributes, createComponentHTML as create, - modesDarkDefault + modesDarkDefault, } from "../../../.storybook/utils"; import { placeholderImage } from "../../../.storybook/placeholderImage"; import { ATTRIBUTES } from "../../../.storybook/resources"; @@ -18,13 +18,13 @@ export default { parameters: { notes: { accordion: accordionReadme, - accordionItem: accordionItemReadme + accordionItem: accordionItemReadme, }, backgrounds: { - values: [{ name: "transparent", value: "#0000ffff" }] - } + values: [{ name: "transparent", value: "#0000ffff" }], + }, }, - ...storyFilters() + ...storyFilters(), }; const createAccordionAttributes: (options?: { exceptions: string[] }) => Attributes = ( @@ -41,7 +41,7 @@ const createAccordionAttributes: (options?: { exceptions: string[] }) => Attribu this.value = select("scale", scale.values, scale.defaultValue, group); delete this.build; return this; - } + }, }, { name: "appearance", @@ -49,7 +49,7 @@ const createAccordionAttributes: (options?: { exceptions: string[] }) => Attribu this.value = select("appearance", ["solid", "transparent"], "solid", group); delete this.build; return this; - } + }, }, { name: "selection-mode", @@ -57,8 +57,8 @@ const createAccordionAttributes: (options?: { exceptions: string[] }) => Attribu this.value = select("selection-mode", ["single", "single-persist", "multiple"], "multiple", group); delete this.build; return this; - } - } + }, + }, ], exceptions ); @@ -74,23 +74,23 @@ const createAccordionItemAttributes: (options?: { { name: "heading", value: text("heading", "Heading", group) }, { name: "description", - value: text("description", "Description for item", group) + value: text("description", "Description for item", group), }, { name: "icon-start", - value: select("icon-start", ["", ...iconNames], props?.iconStart || "", group) + value: select("icon-start", ["", ...iconNames], props?.iconStart || "", group), }, { name: "icon-end", - value: select("icon-end", ["", ...iconNames], props?.iconEnd || "", group) - } + value: select("icon-end", ["", ...iconNames], props?.iconEnd || "", group), + }, ]; return defaultAttributes; }; const accordionItemContent = `Custom content here

More custom content here`; export const simple = (): string => @@ -117,7 +117,7 @@ export const simple = (): string => "calcite-accordion-item", createAccordionItemAttributes({ group: "accordion-item-4" }).concat({ name: "expanded", - value: true + value: true, }), accordionItemContent )} @@ -153,11 +153,11 @@ export const darkModeRTL_TestOnly = (): string => createAccordionAttributes({ exceptions: ["class", "dir"] }).concat( { name: "class", - value: "calcite-mode-dark" + value: "calcite-mode-dark", }, { name: "dir", - value: "rtl" + value: "rtl", } ), html` @@ -180,7 +180,7 @@ export const darkModeRTL_TestOnly = (): string => "calcite-accordion-item", createAccordionItemAttributes({ iconStart: "banana", group: "accordion-item-4" }).concat({ name: "expanded", - value: true + value: true, }), accordionItemContent )} @@ -194,7 +194,7 @@ export const transparentAppearance_TestOnly = (): string => "calcite-accordion", createAccordionAttributes({ exceptions: ["appearance"] }).concat({ name: "appearance", - value: "transparent" + value: "transparent", }), html` ${create( @@ -216,7 +216,7 @@ export const transparentAppearance_TestOnly = (): string => "calcite-accordion-item", createAccordionItemAttributes({ group: "accordion-item-4" }).concat({ name: "expanded", - value: true + value: true, }), accordionItemContent )} @@ -228,14 +228,14 @@ export const withIconStartAndEnd_TestOnly = (): string => "calcite-accordion", createAccordionAttributes({ exceptions: ["appearance"] }).concat({ name: "appearance", - value: "transparent" + value: "transparent", }), html` ${create( "calcite-accordion-item", createAccordionItemAttributes({ group: "accordion-item-1", iconStart: "banana" }).concat({ name: "expanded", - value: true + value: true, }), accordionItemContent )} @@ -254,10 +254,10 @@ export const withIconStartAndEnd_TestOnly = (): string => createAccordionItemAttributes({ group: "accordion-item-4", iconStart: "biking", - iconEnd: "biking" + iconEnd: "biking", }).concat({ name: "expanded", - value: true + value: true, }), accordionItemContent )} @@ -271,20 +271,20 @@ const iconHeaderUseCasesArr: { icon: string; heading: string; description: strin icon: "embark", heading: "Embark_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_", - description: "Extra long heading with underscores and icons m /scale l" + description: "Extra long heading with underscores and icons m /scale l", }, { icon: "car", heading: "Extra long description with underscores and icons m /scale l", description: - "Car_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_" + "Car_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_Watercraft_title_is_super_long_what_do_we_do_now_", }, { icon: "plane", heading: "Extra long description and icons m /scale l", description: - "Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets." - } + "Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets. Planes, helicopters, and jets.", + }, ]; const accordionItemsIconHeaderUseCases = iconHeaderUseCasesArr diff --git a/packages/calcite-components/src/components/accordion/accordion.tsx b/packages/calcite-components/src/components/accordion/accordion.tsx index 6eb9b62336c..478dfae3371 100644 --- a/packages/calcite-components/src/components/accordion/accordion.tsx +++ b/packages/calcite-components/src/components/accordion/accordion.tsx @@ -7,7 +7,7 @@ import { Listen, Prop, VNode, - Watch + Watch, } from "@stencil/core"; import { Appearance, Position, Scale, SelectionMode } from "../interfaces"; import { createObserver } from "../../utils/observers"; @@ -18,7 +18,7 @@ import { RequestedItem } from "./interfaces"; @Component({ tag: "calcite-accordion", styleUrl: "accordion.scss", - shadow: true + shadow: true, }) export class Accordion { //-------------------------------------------------------------------------- @@ -99,7 +99,7 @@ export class Accordion {
@@ -117,7 +117,7 @@ export class Accordion { updateActiveItemOnChange(event: CustomEvent): void { this.requestedAccordionItem = event.detail.requestedAccordionItem; this.calciteInternalAccordionChange.emit({ - requestedAccordionItem: this.requestedAccordionItem + requestedAccordionItem: this.requestedAccordionItem, }); event.stopPropagation(); } diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts index f4a0bbfe9ef..6394bbe2e82 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts +++ b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts @@ -18,20 +18,20 @@ describe("calcite-action-bar", () => { defaults("calcite-action-bar", [ { propertyName: "expandDisabled", - defaultValue: false + defaultValue: false, }, { propertyName: "expanded", - defaultValue: false + defaultValue: false, }, { propertyName: "scale", - defaultValue: undefined + defaultValue: undefined, }, { propertyName: "layout", - defaultValue: "vertical" - } + defaultValue: "vertical", + }, ]); }); @@ -39,12 +39,12 @@ describe("calcite-action-bar", () => { reflects("calcite-action-bar", [ { propertyName: "expandDisabled", - value: true + value: true, }, { propertyName: "expanded", - value: true - } + value: true, + }, ]); }); @@ -60,7 +60,7 @@ describe("calcite-action-bar", () => { - ` + `, }); await page.waitForChanges(); const actionBar = await page.find("calcite-action-bar"); @@ -245,7 +245,7 @@ describe("calcite-action-bar", () => { `, { - focusTargetSelector: "calcite-action" + focusTargetSelector: "calcite-action", } ); @@ -342,7 +342,7 @@ describe("calcite-action-bar", () => { -
` +
`, }); await page.waitForTimeout(overflowActionsDebounceInMs); @@ -390,7 +390,7 @@ describe("calcite-action-bar", () => { -
` +
`, }); await page.waitForTimeout(overflowActionsDebounceInMs + 10); diff --git a/packages/calcite-components/src/components/action-bar/action-bar.stories.ts b/packages/calcite-components/src/components/action-bar/action-bar.stories.ts index 83c25a32908..3d074bbb957 100644 --- a/packages/calcite-components/src/components/action-bar/action-bar.stories.ts +++ b/packages/calcite-components/src/components/action-bar/action-bar.stories.ts @@ -6,7 +6,7 @@ import { Attributes, createComponentHTML as create, filterComponentAttributes, - modesDarkDefault + modesDarkDefault, } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; import readme from "./readme.md"; @@ -14,9 +14,9 @@ import readme from "./readme.md"; export default { title: "Components/Action Bar", parameters: { - notes: readme + notes: readme, }, - ...storyFilters() + ...storyFilters(), }; const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { @@ -30,7 +30,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("expandDisabled", false); delete this.build; return this; - } + }, }, { name: "expanded", @@ -38,7 +38,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("expanded", false); delete this.build; return this; - } + }, }, { name: "position", @@ -46,8 +46,8 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = select("position", position.values, position.defaultValue); delete this.build; return this; - } - } + }, + }, ], exceptions ); @@ -128,12 +128,12 @@ export const darkModeRTL_TestOnly = (): string => createAttributes({ exceptions: ["dir", "class"] }).concat([ { name: "dir", - value: "rtl" + value: "rtl", }, { name: "class", - value: "calcite-mode-dark" - } + value: "calcite-mode-dark", + }, ]), html` @@ -189,7 +189,7 @@ export const withTooltip_NoTest = (): string => ); withTooltip_NoTest.parameters = { - chromatic: { disableSnapshot: true } + chromatic: { disableSnapshot: true }, }; export const hebrewLocale_TestOnly = (): string => ` diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index 04df478a53c..6a1e52e7c3c 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx @@ -9,20 +9,20 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import { debounce } from "lodash-es"; import { ConditionalSlotComponent, connectConditionalSlotComponent, - disconnectConditionalSlotComponent + disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot"; import { focusFirstTabbable, getSlotted, slotChangeGetAssignedElements } from "../../utils/dom"; import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { createObserver } from "../../utils/observers"; @@ -31,7 +31,7 @@ import { disconnectMessages, setUpMessages, T9nComponent, - updateMessages + updateMessages, } from "../../utils/t9n"; import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle"; import { Layout, Position, Scale } from "../interfaces"; @@ -42,7 +42,7 @@ import { getOverflowCount, overflowActions, overflowActionsDebounceInMs, - queryActions + queryActions, } from "./utils"; /** @@ -54,7 +54,7 @@ import { tag: "calcite-action-bar", styleUrl: "action-bar.scss", shadow: true, - assetsDirs: ["assets"] + assetsDirs: ["assets"], }) export class ActionBar implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent @@ -309,13 +309,13 @@ export class ActionBar actionWidth, height, width, - groupCount + groupCount, }); overflowActions({ actionGroups, expanded, - overflowCount + overflowCount, }); }, overflowActionsDebounceInMs); diff --git a/packages/calcite-components/src/components/action-bar/resources.ts b/packages/calcite-components/src/components/action-bar/resources.ts index b5a8dd37cbd..6f8cfdfff1d 100644 --- a/packages/calcite-components/src/components/action-bar/resources.ts +++ b/packages/calcite-components/src/components/action-bar/resources.ts @@ -1,8 +1,8 @@ export const CSS = { - actionGroupBottom: "action-group--bottom" + actionGroupBottom: "action-group--bottom", }; export const SLOTS = { bottomActions: "bottom-actions", - expandTooltip: "expand-tooltip" + expandTooltip: "expand-tooltip", }; diff --git a/packages/calcite-components/src/components/action-bar/utils.ts b/packages/calcite-components/src/components/action-bar/utils.ts index 1bc5fc52e25..f3e1ef0b1ad 100644 --- a/packages/calcite-components/src/components/action-bar/utils.ts +++ b/packages/calcite-components/src/components/action-bar/utils.ts @@ -14,7 +14,7 @@ export const geActionDimensions = ( const actionLen = actions?.length; return { actionWidth: actionLen ? getAverage(actions.map((action) => action.clientWidth || 0)) : 0, - actionHeight: actionLen ? getAverage(actions.map((action) => action.clientHeight || 0)) : 0 + actionHeight: actionLen ? getAverage(actions.map((action) => action.clientHeight || 0)) : 0, }; }; @@ -24,7 +24,7 @@ const getMaxActionCount = ({ layout, height, actionHeight, - groupCount + groupCount, }: { layout: Extract<"horizontal" | "vertical", Layout>; height: number; @@ -45,7 +45,7 @@ export const getOverflowCount = ({ width, actionHeight, height, - groupCount + groupCount, }: { layout: Extract<"horizontal" | "vertical", Layout>; actionCount: number; @@ -67,7 +67,7 @@ export const queryActions = (el: HTMLElement): HTMLCalciteActionElement[] => { export const overflowActions = ({ actionGroups, expanded, - overflowCount + overflowCount, }: { actionGroups: HTMLCalciteActionGroupElement[]; expanded: boolean; diff --git a/packages/calcite-components/src/components/action-group/action-group.e2e.ts b/packages/calcite-components/src/components/action-group/action-group.e2e.ts index 6b0aa16080d..89166e16715 100755 --- a/packages/calcite-components/src/components/action-group/action-group.e2e.ts +++ b/packages/calcite-components/src/components/action-group/action-group.e2e.ts @@ -12,8 +12,8 @@ describe("calcite-action-group", () => { defaults("calcite-action-group", [ { propertyName: "layout", - defaultValue: "vertical" - } + defaultValue: "vertical", + }, ]); }); diff --git a/packages/calcite-components/src/components/action-group/action-group.stories.ts b/packages/calcite-components/src/components/action-group/action-group.stories.ts index eadffc6a552..e9f4f48ba81 100644 --- a/packages/calcite-components/src/components/action-group/action-group.stories.ts +++ b/packages/calcite-components/src/components/action-group/action-group.stories.ts @@ -6,9 +6,9 @@ import { html } from "../../../support/formatting"; export default { title: "Components/Action Group", parameters: { - notes: readme + notes: readme, }, - ...storyFilters() + ...storyFilters(), }; export const gridCenteringOfActionsInAGroup = (): string => html` diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx index bb505369d7b..15683010e17 100755 --- a/packages/calcite-components/src/components/action-group/action-group.tsx +++ b/packages/calcite-components/src/components/action-group/action-group.tsx @@ -3,14 +3,14 @@ import { CalciteActionMenuCustomEvent } from "../../components"; import { ConditionalSlotComponent, connectConditionalSlotComponent, - disconnectConditionalSlotComponent + disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot"; import { getSlotted } from "../../utils/dom"; import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { @@ -18,7 +18,7 @@ import { disconnectMessages, setUpMessages, T9nComponent, - updateMessages + updateMessages, } from "../../utils/t9n"; import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources"; import { Columns, Layout, Scale } from "../interfaces"; @@ -34,9 +34,9 @@ import { ICONS, SLOTS } from "./resources"; tag: "calcite-action-group", styleUrl: "action-group.scss", shadow: { - delegatesFocus: true + delegatesFocus: true, }, - assetsDirs: ["assets"] + assetsDirs: ["assets"], }) export class ActionGroup implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent diff --git a/packages/calcite-components/src/components/action-group/resources.ts b/packages/calcite-components/src/components/action-group/resources.ts index 1839580729c..81dabc7c10f 100644 --- a/packages/calcite-components/src/components/action-group/resources.ts +++ b/packages/calcite-components/src/components/action-group/resources.ts @@ -1,8 +1,8 @@ export const SLOTS = { menuActions: "menu-actions", - menuTooltip: "menu-tooltip" + menuTooltip: "menu-tooltip", }; export const ICONS = { - menu: "ellipsis" + menu: "ellipsis", }; diff --git a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts index 7bda6f24ec7..7dee7f57893 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts +++ b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts @@ -38,28 +38,28 @@ describe("calcite-action-menu", () => { defaults("calcite-action-menu", [ { propertyName: "expanded", - defaultValue: false + defaultValue: false, }, { propertyName: "flipPlacements", - defaultValue: undefined + defaultValue: undefined, }, { propertyName: "open", - defaultValue: false + defaultValue: false, }, { propertyName: "placement", - defaultValue: "auto" + defaultValue: "auto", }, { propertyName: "overlayPositioning", - defaultValue: "absolute" + defaultValue: "absolute", }, { propertyName: "scale", - defaultValue: undefined - } + defaultValue: undefined, + }, ]); }); @@ -67,16 +67,16 @@ describe("calcite-action-menu", () => { reflects("calcite-action-menu", [ { propertyName: "expanded", - value: true + value: true, }, { propertyName: "open", - value: true + value: true, }, { propertyName: "placement", - value: "auto" - } + value: "auto", + }, ]); }); @@ -84,7 +84,7 @@ describe("calcite-action-menu", () => { const page = await newE2EPage({ html: ` - ` + `, }); await page.waitForChanges(); @@ -110,7 +110,7 @@ describe("calcite-action-menu", () => { > `, { - focusTargetSelector: `#triggerAction` + focusTargetSelector: `#triggerAction`, } ); }); @@ -124,7 +124,7 @@ describe("calcite-action-menu", () => {
-
` + `, }); await page.waitForChanges(); @@ -151,7 +151,7 @@ describe("calcite-action-menu", () => {
-
` + `, }); await page.waitForChanges(); @@ -188,7 +188,7 @@ describe("calcite-action-menu", () => { Bits and bobs. - ` + `, }); const actionMenu = await page.find("calcite-action-menu"); @@ -215,7 +215,7 @@ describe("calcite-action-menu", () => { - ` + `, }); await page.waitForChanges(); @@ -252,7 +252,7 @@ describe("calcite-action-menu", () => { - ` + `, }); await page.waitForChanges(); @@ -289,7 +289,7 @@ describe("calcite-action-menu", () => { - ` + `, }); await page.waitForChanges(); @@ -347,7 +347,7 @@ describe("calcite-action-menu", () => { - ` + `, }); await page.waitForChanges(); @@ -381,7 +381,7 @@ describe("calcite-action-menu", () => { - ` + `, }); await page.waitForChanges(); diff --git a/packages/calcite-components/src/components/action-menu/action-menu.stories.ts b/packages/calcite-components/src/components/action-menu/action-menu.stories.ts index 2b0c4f67a86..4b13ce64e8d 100644 --- a/packages/calcite-components/src/components/action-menu/action-menu.stories.ts +++ b/packages/calcite-components/src/components/action-menu/action-menu.stories.ts @@ -5,9 +5,9 @@ import readme from "./readme.md"; export default { title: "Components/Action Menu", parameters: { - notes: readme + notes: readme, }, - ...storyFilters() + ...storyFilters(), }; export const simple = (): string => diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx index 4c5d92cc49f..de448ab3b99 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.tsx +++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx @@ -8,7 +8,7 @@ import { Method, Prop, State, - Watch + Watch, } from "@stencil/core"; import { Fragment, VNode } from "@stencil/core/internal"; import { getRoundRobinIndex } from "../../utils/array"; @@ -20,7 +20,7 @@ import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { Scale } from "../interfaces"; import { CSS, ICONS, SLOTS } from "./resources"; @@ -35,7 +35,7 @@ const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"]; @Component({ tag: "calcite-action-menu", styleUrl: "action-menu.scss", - shadow: true + shadow: true, }) export class ActionMenu implements LoadableComponent { // -------------------------------------------------------------------------- @@ -249,7 +249,7 @@ export class ActionMenu implements LoadableComponent { setMenuButtonEl = (event: Event): void => { const actions = (event.target as HTMLSlotElement) .assignedElements({ - flatten: true + flatten: true, }) .filter((el) => el?.matches("calcite-action")) as HTMLCalciteActionElement[]; @@ -292,7 +292,7 @@ export class ActionMenu implements LoadableComponent { label, placement, overlayPositioning, - flipPlacements + flipPlacements, } = this; const activeAction = actionElements[activeMenuItemIndex]; @@ -357,7 +357,7 @@ export class ActionMenu implements LoadableComponent { updateTooltip = (event: Event): void => { const tooltips = (event.target as HTMLSlotElement) .assignedElements({ - flatten: true + flatten: true, }) .filter((el) => el?.matches("calcite-tooltip")) as HTMLCalciteTooltipElement[]; @@ -394,7 +394,7 @@ export class ActionMenu implements LoadableComponent { handleDefaultSlotChange = (event: Event): void => { const actions = (event.target as HTMLSlotElement) .assignedElements({ - flatten: true + flatten: true, }) .filter((el) => el?.matches("calcite-action")) as HTMLCalciteActionElement[]; diff --git a/packages/calcite-components/src/components/action-menu/resources.ts b/packages/calcite-components/src/components/action-menu/resources.ts index 1362b86899f..047e817c2f6 100644 --- a/packages/calcite-components/src/components/action-menu/resources.ts +++ b/packages/calcite-components/src/components/action-menu/resources.ts @@ -1,13 +1,13 @@ export const CSS = { menu: "menu", - defaultTrigger: "default-trigger" + defaultTrigger: "default-trigger", }; export const SLOTS = { tooltip: "tooltip", - trigger: "trigger" + trigger: "trigger", }; export const ICONS = { - menu: "ellipsis" + menu: "ellipsis", }; diff --git a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts index c434052c5be..a1b2a554141 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts +++ b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts @@ -16,20 +16,20 @@ describe("calcite-action-pad", () => { defaults("calcite-action-pad", [ { propertyName: "expandDisabled", - defaultValue: false + defaultValue: false, }, { propertyName: "expanded", - defaultValue: false + defaultValue: false, }, { propertyName: "layout", - defaultValue: "vertical" + defaultValue: "vertical", }, { propertyName: "scale", - defaultValue: undefined - } + defaultValue: undefined, + }, ]); }); @@ -37,16 +37,16 @@ describe("calcite-action-pad", () => { reflects("calcite-action-pad", [ { propertyName: "expandDisabled", - value: true + value: true, }, { propertyName: "expanded", - value: true + value: true, }, { propertyName: "layout", - value: "horizontal" - } + value: "horizontal", + }, ]); }); @@ -200,7 +200,7 @@ describe("calcite-action-pad", () => { `, { - focusTargetSelector: "calcite-action" + focusTargetSelector: "calcite-action", } ); }); @@ -227,7 +227,7 @@ describe("calcite-action-pad", () => { - ` + `, }); const eventSpy = await page.spyOnEvent("calciteActionMenuOpen", "window"); diff --git a/packages/calcite-components/src/components/action-pad/action-pad.stories.ts b/packages/calcite-components/src/components/action-pad/action-pad.stories.ts index c9e5a183472..7a4d95348d1 100644 --- a/packages/calcite-components/src/components/action-pad/action-pad.stories.ts +++ b/packages/calcite-components/src/components/action-pad/action-pad.stories.ts @@ -4,7 +4,7 @@ import { Attribute, filterComponentAttributes, createComponentHTML as create, - modesDarkDefault + modesDarkDefault, } from "../../../.storybook/utils"; import readme from "./readme.md"; import { ATTRIBUTES } from "../../../.storybook/resources"; @@ -16,10 +16,10 @@ export default { parameters: { notes: readme, chromatic: { - delay: 5000 - } + delay: 5000, + }, }, - ...storyFilters() + ...storyFilters(), }; const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { @@ -33,7 +33,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("expandDisabled", false); delete this.build; return this; - } + }, }, { name: "expanded", @@ -41,7 +41,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("expanded", false); delete this.build; return this; - } + }, }, { name: "position", @@ -49,8 +49,8 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = select("position", position.values, position.defaultValue); delete this.build; return this; - } - } + }, + }, ], exceptions ); @@ -95,12 +95,12 @@ export const darkModeRTL_TestOnly = (): string => createAttributes({ exceptions: ["dir", "class"] }).concat([ { name: "dir", - value: "rtl" + value: "rtl", }, { name: "class", - value: "calcite-mode-dark" - } + value: "calcite-mode-dark", + }, ]), html` @@ -126,7 +126,7 @@ export const withTooltip_NoTest = (): string => ); withTooltip_NoTest.parameters = { - chromatic: { disableSnapshot: true } + chromatic: { disableSnapshot: true }, }; export const hebrewLocale_TestOnly = (): string => html`
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx index 1fdebd40733..d58ac211bb8 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.tsx +++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx @@ -9,19 +9,19 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import { ConditionalSlotComponent, connectConditionalSlotComponent, - disconnectConditionalSlotComponent + disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot"; import { getSlotted, slotChangeGetAssignedElements } from "../../utils/dom"; import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { @@ -29,7 +29,7 @@ import { disconnectMessages, setUpMessages, T9nComponent, - updateMessages + updateMessages, } from "../../utils/t9n"; import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle"; import { Layout, Position, Scale } from "../interfaces"; @@ -45,9 +45,9 @@ import { createObserver } from "../../utils/observers"; tag: "calcite-action-pad", styleUrl: "action-pad.scss", shadow: { - delegatesFocus: true + delegatesFocus: true, }, - assetsDirs: ["assets"] + assetsDirs: ["assets"], }) export class ActionPad implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent diff --git a/packages/calcite-components/src/components/action-pad/resources.ts b/packages/calcite-components/src/components/action-pad/resources.ts index c40cc4752de..9cfad962fda 100644 --- a/packages/calcite-components/src/components/action-pad/resources.ts +++ b/packages/calcite-components/src/components/action-pad/resources.ts @@ -1,8 +1,8 @@ export const CSS = { actionGroupBottom: "action-group--bottom", - container: "container" + container: "container", }; export const SLOTS = { - expandTooltip: "expand-tooltip" + expandTooltip: "expand-tooltip", }; diff --git a/packages/calcite-components/src/components/action/action.e2e.ts b/packages/calcite-components/src/components/action/action.e2e.ts index 41266274735..2a3b6021181 100755 --- a/packages/calcite-components/src/components/action/action.e2e.ts +++ b/packages/calcite-components/src/components/action/action.e2e.ts @@ -7,36 +7,36 @@ describe("calcite-action", () => { defaults("calcite-action", [ { propertyName: "active", - defaultValue: false + defaultValue: false, }, { propertyName: "appearance", - defaultValue: "solid" + defaultValue: "solid", }, { propertyName: "compact", - defaultValue: false + defaultValue: false, }, { propertyName: "disabled", - defaultValue: false + defaultValue: false, }, { propertyName: "indicator", - defaultValue: false + defaultValue: false, }, { propertyName: "loading", - defaultValue: false + defaultValue: false, }, { propertyName: "scale", - defaultValue: "m" + defaultValue: "m", }, { propertyName: "textEnabled", - defaultValue: false - } + defaultValue: false, + }, ]); }); diff --git a/packages/calcite-components/src/components/action/action.stories.ts b/packages/calcite-components/src/components/action/action.stories.ts index b4b951e2c5f..4e5401bcbbf 100644 --- a/packages/calcite-components/src/components/action/action.stories.ts +++ b/packages/calcite-components/src/components/action/action.stories.ts @@ -4,7 +4,7 @@ import { filterComponentAttributes, Attributes, createComponentHTML as create, - modesDarkDefault + modesDarkDefault, } from "../../../.storybook/utils"; import readme from "./readme.md"; import { html } from "../../../support/formatting"; @@ -15,9 +15,9 @@ const { alignment, scale } = ATTRIBUTES; export default { title: "Components/Buttons/Action", parameters: { - notes: readme + notes: readme, }, - ...storyFilters() + ...storyFilters(), }; const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { @@ -29,7 +29,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("active", false); delete this.build; return this; - } + }, }, { name: "alignment", @@ -37,7 +37,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = select("alignment", alignment.values, alignment.defaultValue); delete this.build; return this; - } + }, }, { name: "appearance", @@ -45,7 +45,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = select("appearance", ["solid", "transparent"], "solid"); delete this.build; return this; - } + }, }, { name: "compact", @@ -53,7 +53,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("compact", false); delete this.build; return this; - } + }, }, { name: "disabled", @@ -61,7 +61,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("disabled", false); delete this.build; return this; - } + }, }, { name: "icon", @@ -69,7 +69,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = select("icon", ["", ...iconNames], "banana"); delete this.build; return this; - } + }, }, { name: "indicator", @@ -77,7 +77,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("indicator", false); delete this.build; return this; - } + }, }, { name: "label", @@ -85,7 +85,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = text("label", "Label"); delete this.build; return this; - } + }, }, { name: "loading", @@ -93,7 +93,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("loading", false); delete this.build; return this; - } + }, }, { name: "scale", @@ -101,7 +101,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = select("scale", scale.values, scale.defaultValue); delete this.build; return this; - } + }, }, { name: "text", @@ -109,7 +109,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = text("text", "Text"); delete this.build; return this; - } + }, }, { name: "text-enabled", @@ -117,7 +117,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("textEnabled", true); delete this.build; return this; - } + }, }, { name: "style", @@ -125,8 +125,8 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("textEnabled", true); delete this.build; return this; - } - } + }, + }, ], exceptions ); @@ -139,12 +139,12 @@ export const simple = (): string => createAttributes({ exceptions: ["icon", "text"] }).concat([ { name: "icon", - value: "banana" + value: "banana", }, { name: "text", - value: "" - } + value: "", + }, ]) )}
`; @@ -155,7 +155,7 @@ export const disabledAndCompactAndTextOnly_TestOnly = (): string => "calcite-action", createAttributes({ exceptions: ["compact", "disabled"] }).concat([ { name: "compact", value: true }, - { name: "disabled", value: true } + { name: "disabled", value: true }, ]) )} `; @@ -167,7 +167,7 @@ export const activeAndAppearanceTransparent_TestOnly = (): string => createAttributes({ exceptions: ["icon", "appearance", "active"] }).concat([ { name: "active", value: true }, { name: "icon", value: "banana" }, - { name: "appearance", value: "transparent" } + { name: "appearance", value: "transparent" }, ]) )} `; @@ -180,7 +180,7 @@ export const alignmentEndAndSmallScaleAndIndicator_TestOnly = (): string => { name: "icon", value: "banana" }, { name: "alignment", value: "end" }, { name: "indicator", value: true }, - { name: "scale", value: "s" } + { name: "scale", value: "s" }, ]) )} `; @@ -193,7 +193,7 @@ export const alignmentStartAndLargeScaleAndTextOverflow_TestOnly = (): string => { name: "icon", value: "banana" }, { name: "text", value: "Blah blah blah blah blah blah blah blah blah blah" }, { name: "alignment", value: "start" }, - { name: "scale", value: "l" } + { name: "scale", value: "l" }, ]) )} `; @@ -220,7 +220,7 @@ export const darkModeRTL_TestOnly = (): string => createAttributes({ exceptions: ["icon", "class", "dir"] }).concat([ { name: "icon", value: "banana" }, { name: "class", value: "calcite-mode-dark" }, - { name: "dir", value: "rtl" } + { name: "dir", value: "rtl" }, ]) )} `; diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx index 158e755eca0..2b1279d509b 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/packages/calcite-components/src/components/action/action.tsx @@ -9,7 +9,7 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import { toAriaBoolean } from "../../utils/dom"; import { guid } from "../../utils/guid"; @@ -17,13 +17,13 @@ import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { createObserver } from "../../utils/observers"; @@ -32,7 +32,7 @@ import { disconnectMessages, setUpMessages, T9nComponent, - updateMessages + updateMessages, } from "../../utils/t9n"; import { Alignment, Appearance, Scale } from "../interfaces"; import { ActionMessages } from "./assets/action/t9n"; @@ -45,7 +45,7 @@ import { CSS, SLOTS } from "./resources"; tag: "calcite-action", styleUrl: "action.scss", shadow: true, - assetsDirs: ["assets"] + assetsDirs: ["assets"], }) export class Action implements InteractiveComponent, LocalizedComponent, T9nComponent, LoadableComponent @@ -220,7 +220,7 @@ export class Action const textContainerClasses = { [CSS.textContainer]: true, - [CSS.textContainerVisible]: textEnabled + [CSS.textContainerVisible]: textEnabled, }; return text ? ( @@ -262,7 +262,7 @@ export class Action
@@ -289,14 +289,14 @@ export class Action indicator, indicatorId, buttonId, - messages + messages, } = this; const ariaLabel = `${label || text}${indicator ? ` (${messages.indicator})` : ""}`; const buttonClasses = { [CSS.button]: true, [CSS.buttonTextVisible]: textEnabled, - [CSS.buttonCompact]: compact + [CSS.buttonCompact]: compact, }; return ( @@ -331,7 +331,7 @@ export class Action handleTooltipSlotChange = (event: Event): void => { const tooltips = (event.target as HTMLSlotElement) .assignedElements({ - flatten: true + flatten: true, }) .filter((el) => el?.matches("calcite-tooltip")) as HTMLCalciteTooltipElement[]; diff --git a/packages/calcite-components/src/components/action/resources.ts b/packages/calcite-components/src/components/action/resources.ts index ddabbf437aa..bd29a41dde6 100644 --- a/packages/calcite-components/src/components/action/resources.ts +++ b/packages/calcite-components/src/components/action/resources.ts @@ -7,9 +7,9 @@ export const CSS = { slotContainer: "slot-container", slotContainerHidden: "slot-container--hidden", textContainer: "text-container", - textContainerVisible: "text-container--visible" + textContainerVisible: "text-container--visible", }; export const SLOTS = { - tooltip: "tooltip" + tooltip: "tooltip", }; diff --git a/packages/calcite-components/src/components/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts index 3c98f1d01bf..3a1ec7a986a 100644 --- a/packages/calcite-components/src/components/alert/alert.e2e.ts +++ b/packages/calcite-components/src/components/alert/alert.e2e.ts @@ -8,8 +8,8 @@ describe("defaults", () => { defaults("calcite-alert", [ { propertyName: "autoCloseDuration", - defaultValue: "medium" - } + defaultValue: "medium", + }, ]); }); @@ -253,7 +253,7 @@ describe("calcite-alert", () => { describe("when mode attribute is dark", () => { it("should render alert dismiss progress bar with value tied to dark mode", async () => { page = await newE2EPage({ - html: `
${alertSnippet}
` + html: `
${alertSnippet}
`, }); await page.waitForTimeout(animationDurationInMs); alertDismissProgressBar = await page.find("calcite-alert[open] >>> .alert-dismiss-progress"); @@ -271,7 +271,7 @@ describe("calcite-alert", () => { --calcite-alert-dismiss-progress-background: ${overrideStyle}; } -
${alertSnippet}
` +
${alertSnippet}
`, }); await page.waitForTimeout(animationDurationInMs); alertDismissProgressBar = await page.find("calcite-alert[open] >>> .alert-dismiss-progress"); diff --git a/packages/calcite-components/src/components/alert/alert.stories.ts b/packages/calcite-components/src/components/alert/alert.stories.ts index fa50b9cc6a4..9fd0a1f14df 100644 --- a/packages/calcite-components/src/components/alert/alert.stories.ts +++ b/packages/calcite-components/src/components/alert/alert.stories.ts @@ -9,10 +9,10 @@ export default { parameters: { notes: readme, chromatic: { - delay: 500 - } + delay: 500, + }, }, - ...storyFilters() + ...storyFilters(), }; export const titleMessageLink = (): string => html` @@ -156,7 +156,7 @@ export const queue_NoTest = (): string => html` `; queue_NoTest.parameters = { - chromatic: { disableSnapshot: true } + chromatic: { disableSnapshot: true }, }; export const darkModeRTL_TestOnly = (): string => html` diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx index eabfa9b30a8..42251221f5d 100644 --- a/packages/calcite-components/src/components/alert/alert.tsx +++ b/packages/calcite-components/src/components/alert/alert.tsx @@ -10,38 +10,38 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import { getSlotted, setRequestedIcon, slotChangeHasAssignedElement, - toAriaBoolean + toAriaBoolean, } from "../../utils/dom"; import { MenuPlacement } from "../../utils/floating-ui"; import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, NumberingSystem, - numberStringFormatter + numberStringFormatter, } from "../../utils/locale"; import { connectOpenCloseComponent, disconnectOpenCloseComponent, - OpenCloseComponent + OpenCloseComponent, } from "../../utils/openCloseComponent"; import { connectMessages, disconnectMessages, setUpMessages, T9nComponent, - updateMessages + updateMessages, } from "../../utils/t9n"; import { Kind, Scale } from "../interfaces"; import { KindIcons } from "../resources"; @@ -65,7 +65,7 @@ import { CSS, DURATIONS, SLOTS } from "./resources"; tag: "calcite-alert", styleUrl: "alert.scss", shadow: true, - assetsDirs: ["assets"] + assetsDirs: ["assets"], }) export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponent { //-------------------------------------------------------------------------- @@ -205,7 +205,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen disconnectedCallback(): void { window.dispatchEvent( new CustomEvent("calciteInternalAlertUnregister", { - detail: { alert: this.el } + detail: { alert: this.el }, }) ); window.clearTimeout(this.autoCloseTimeoutId); @@ -234,7 +234,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen numberStringFormatter.numberFormatOptions = { locale: this.effectiveLocale, numberingSystem: this.numberingSystem, - signDisplay: "always" + signDisplay: "always", }; const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1; @@ -272,7 +272,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen container: true, queued, [placement]: true, - [CSS.slottedInShell]: this.slottedInShell + [CSS.slottedInShell]: this.slottedInShell, }} onPointerEnter={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null} onPointerLeave={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null} @@ -366,7 +366,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen window.dispatchEvent( new CustomEvent("calciteInternalAlertSync", { - detail: { queue } + detail: { queue }, }) ); } diff --git a/packages/calcite-components/src/components/alert/resources.ts b/packages/calcite-components/src/components/alert/resources.ts index 2ca8f47d0cd..1a716c0c91b 100644 --- a/packages/calcite-components/src/components/alert/resources.ts +++ b/packages/calcite-components/src/components/alert/resources.ts @@ -1,19 +1,19 @@ export const DURATIONS = { slow: 14000, medium: 10000, - fast: 6000 + fast: 6000, }; export const SLOTS = { actionsEnd: "actions-end", title: "title", message: "message", - link: "link" + link: "link", }; export const CSS = { actionsEnd: "actions-end", container: "container", close: "alert-close", - slottedInShell: "slotted-in-shell" + slottedInShell: "slotted-in-shell", }; diff --git a/packages/calcite-components/src/components/avatar/avatar.e2e.ts b/packages/calcite-components/src/components/avatar/avatar.e2e.ts index 98f29b73e69..83b7e688cd3 100644 --- a/packages/calcite-components/src/components/avatar/avatar.e2e.ts +++ b/packages/calcite-components/src/components/avatar/avatar.e2e.ts @@ -19,8 +19,8 @@ describe("calcite-avatar", () => { defaults("calcite-avatar", [ { propertyName: "scale", - defaultValue: "m" - } + defaultValue: "m", + }, ]); }); diff --git a/packages/calcite-components/src/components/avatar/avatar.stories.ts b/packages/calcite-components/src/components/avatar/avatar.stories.ts index 06af30dd29d..161672a232d 100644 --- a/packages/calcite-components/src/components/avatar/avatar.stories.ts +++ b/packages/calcite-components/src/components/avatar/avatar.stories.ts @@ -8,9 +8,9 @@ import readme from "./readme.md"; export default { title: "Components/Avatar", parameters: { - notes: readme + notes: readme, }, - ...storyFilters() + ...storyFilters(), }; export const simple = (): string => html` @@ -55,7 +55,7 @@ const users = [ { id: "8542b186e5a64a90910486de32bced72", name: "qk" }, { id: "8587853c1f544de6ae4133224db29736", name: "rl" }, { id: "9de33a713bd84690bbc618e98ecf7567", name: "sm" }, - { id: "e85f7f72aa51b34f81660a0f4c6a4d80", name: "tn" } + { id: "e85f7f72aa51b34f81660a0f4c6a4d80", name: "tn" }, ]; const contrastLight = users diff --git a/packages/calcite-components/src/components/avatar/avatar.tsx b/packages/calcite-components/src/components/avatar/avatar.tsx index ee634af72c5..1dd913fa962 100644 --- a/packages/calcite-components/src/components/avatar/avatar.tsx +++ b/packages/calcite-components/src/components/avatar/avatar.tsx @@ -7,7 +7,7 @@ import { hexToHue, stringToHex } from "./utils"; @Component({ tag: "calcite-avatar", styleUrl: "avatar.scss", - shadow: true + shadow: true, }) export class Avatar { //-------------------------------------------------------------------------- diff --git a/packages/calcite-components/src/components/block-section/block-section.e2e.ts b/packages/calcite-components/src/components/block-section/block-section.e2e.ts index 5fd77a25a1a..3ec0ad96f16 100644 --- a/packages/calcite-components/src/components/block-section/block-section.e2e.ts +++ b/packages/calcite-components/src/components/block-section/block-section.e2e.ts @@ -16,8 +16,8 @@ describe("calcite-block-section", () => { reflects("calcite-block-section", [ { propertyName: "open", - value: true - } + value: true, + }, ]); }); @@ -25,12 +25,12 @@ describe("calcite-block-section", () => { defaults("calcite-block-section", [ { propertyName: "open", - defaultValue: false + defaultValue: false, }, { propertyName: "toggleDisplay", - defaultValue: "button" - } + defaultValue: "button", + }, ]); }); @@ -45,7 +45,7 @@ describe("calcite-block-section", () => {
some content
`, { - shadowFocusTargetSelector: `.${CSS.toggle}` + shadowFocusTargetSelector: `.${CSS.toggle}`, } ); }); @@ -56,7 +56,7 @@ describe("calcite-block-section", () => {
some content
`, { - shadowFocusTargetSelector: `.${CSS.toggle}` + shadowFocusTargetSelector: `.${CSS.toggle}`, } ); }); @@ -81,21 +81,21 @@ describe("calcite-block-section", () => { it("can display/hide content", async () => { const page = await newE2EPage({ - html: `
some content
` + html: `
some content
`, }); await assertContentIsDisplayedAndHidden(page); }); it("can be toggled", async () => { const page = await newE2EPage({ - html: `` + html: ``, }); await assertToggleBehavior(page); }); it("renders section text", async () => { const page = await newE2EPage({ - html: `` + html: ``, }); const element = await page.find(`calcite-block-section >>> .${CSS.toggle}`); expect(element.textContent).toBe("test text"); @@ -127,7 +127,7 @@ describe("calcite-block-section", () => { describe("status = 'invalid'", () => { it("displays a status indicator when `status` is an accepted value", async () => { const page = await newE2EPage({ - html: `
content
` + html: `
content
`, }); const statusIconEl = await page.find(`calcite-block-section >>> .${CSS.statusIcon}`); expect(statusIconEl).not.toBeNull(); @@ -137,7 +137,7 @@ describe("calcite-block-section", () => { describe("status = 'foo'", () => { it("does not display a status indicator when `status` is not an accepted value", async () => { const page2 = await newE2EPage({ - html: `
content
` + html: `
content
`, }); const statusIconEl2 = await page2.find(`calcite-block-section >>> .${CSS.statusIcon}`); await page2.waitForChanges(); diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx index 1786b2ff0d7..a84b1bd2a11 100644 --- a/packages/calcite-components/src/components/block-section/block-section.tsx +++ b/packages/calcite-components/src/components/block-section/block-section.tsx @@ -9,7 +9,7 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import { focusFirstTabbable, getElementDir, toAriaBoolean } from "../../utils/dom"; @@ -21,7 +21,7 @@ import { disconnectMessages, setUpMessages, T9nComponent, - updateMessages + updateMessages, } from "../../utils/t9n"; import { Status } from "../interfaces"; import { BlockSectionMessages } from "./assets/block-section/t9n"; @@ -31,7 +31,7 @@ import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; /** @@ -41,7 +41,7 @@ import { tag: "calcite-block-section", styleUrl: "block-section.scss", shadow: true, - assetsDirs: ["assets"] + assetsDirs: ["assets"], }) export class BlockSection implements LocalizedComponent, T9nComponent, LoadableComponent { // -------------------------------------------------------------------------- @@ -194,7 +194,7 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC const statusIconClasses = { [CSS.statusIcon]: true, [CSS.valid]: status == "valid", - [CSS.invalid]: status == "invalid" + [CSS.invalid]: status == "invalid", }; return !!statusIcon ? ( @@ -224,7 +224,7 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC aria-label={toggleLabel} class={{ [CSS.toggle]: true, - [CSS.toggleSwitch]: true + [CSS.toggleSwitch]: true, }} id={buttonId} onClick={this.toggleSection} @@ -244,7 +244,7 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC aria-label={toggleLabel} class={{ [CSS.sectionHeader]: true, - [CSS.toggle]: true + [CSS.toggle]: true, }} id={buttonId} name={toggleLabel} diff --git a/packages/calcite-components/src/components/block-section/resources.ts b/packages/calcite-components/src/components/block-section/resources.ts index 9ba46713f8e..efb15fb0ee7 100644 --- a/packages/calcite-components/src/components/block-section/resources.ts +++ b/packages/calcite-components/src/components/block-section/resources.ts @@ -8,12 +8,12 @@ export const CSS = { sectionHeader: "section-header", sectionHeaderText: "section-header__text", statusIcon: "status-icon", - valid: "valid" + valid: "valid", }; export const TEXT = { collapse: "Collapse", - expand: "Expand" + expand: "Expand", }; export const ICONS = { @@ -21,5 +21,5 @@ export const ICONS = { menuClosedLeft: "chevron-left", menuClosedRight: "chevron-right", valid: "check-circle", - invalid: "exclamation-mark-triangle" + invalid: "exclamation-mark-triangle", }; diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts index 11ac24a4d18..6b63dcdd361 100644 --- a/packages/calcite-components/src/components/block/block.e2e.ts +++ b/packages/calcite-components/src/components/block/block.e2e.ts @@ -16,16 +16,16 @@ describe("calcite-block", () => { defaults("calcite-block", [ { propertyName: "collapsible", - defaultValue: false + defaultValue: false, }, { propertyName: "headingLevel", - defaultValue: undefined + defaultValue: undefined, }, { propertyName: "open", - defaultValue: false - } + defaultValue: false, + }, ]); }); @@ -55,7 +55,7 @@ describe("calcite-block", () => { `, { - shadowFocusTargetSelector: `.${CSS.toggle}` + shadowFocusTargetSelector: `.${CSS.toggle}`, } ); }); @@ -72,7 +72,7 @@ describe("calcite-block", () => { `, { - focusTargetSelector: `.${blockSectionClass}` + focusTargetSelector: `.${blockSectionClass}`, } ); }); @@ -88,7 +88,7 @@ describe("calcite-block", () => {
content
 - ` + `, }); await page.waitForChanges(); @@ -262,7 +262,7 @@ describe("calcite-block", () => { const page = await newE2EPage({ html: html` - ` + `, }); const menuSlot = await page.find(`calcite-block >>> calcite-action-menu slot[name=${SLOTS.headerMenuActions}]`); diff --git a/packages/calcite-components/src/components/block/block.stories.ts b/packages/calcite-components/src/components/block/block.stories.ts index 7d797261de4..5f100f674a1 100644 --- a/packages/calcite-components/src/components/block/block.stories.ts +++ b/packages/calcite-components/src/components/block/block.stories.ts @@ -3,7 +3,7 @@ import { Attribute, filterComponentAttributes, Attributes, - createComponentHTML as create + createComponentHTML as create, } from "../../../.storybook/utils"; import { placeholderImage } from "../../../.storybook/placeholderImage"; import blockReadme from "./readme.md"; @@ -16,10 +16,10 @@ export default { parameters: { notes: { block: blockReadme, - section: sectionReadme - } + section: sectionReadme, + }, }, - ...storyFilters() + ...storyFilters(), }; const createBlockAttributes: (options?: { exceptions: string[] }) => Attributes = ( @@ -35,7 +35,7 @@ const createBlockAttributes: (options?: { exceptions: string[] }) => Attributes this.value = text("heading", "Heading", group); delete this.build; return this; - } + }, }, { @@ -44,7 +44,7 @@ const createBlockAttributes: (options?: { exceptions: string[] }) => Attributes this.value = text("description", "description", group); delete this.build; return this; - } + }, }, { name: "open", @@ -52,7 +52,7 @@ const createBlockAttributes: (options?: { exceptions: string[] }) => Attributes this.value = boolean("open", true, group); delete this.build; return this; - } + }, }, { name: "collapsible", @@ -60,7 +60,7 @@ const createBlockAttributes: (options?: { exceptions: string[] }) => Attributes this.value = boolean("collapsible", true, group); delete this.build; return this; - } + }, }, { name: "loading", @@ -68,7 +68,7 @@ const createBlockAttributes: (options?: { exceptions: string[] }) => Attributes this.value = boolean("loading", false, group); delete this.build; return this; - } + }, }, { name: "disabled", @@ -76,7 +76,7 @@ const createBlockAttributes: (options?: { exceptions: string[] }) => Attributes this.value = boolean("disabled", false, group); delete this.build; return this; - } + }, }, { name: "heading-level", @@ -84,8 +84,8 @@ const createBlockAttributes: (options?: { exceptions: string[] }) => Attributes this.value = number("heading-level", 2, { min: 1, max: 6, step: 1 }, group); delete this.build; return this; - } - } + }, + }, ], exceptions ); @@ -98,16 +98,16 @@ const createSectionAttributes: () => Attributes = () => { return [ { name: "text", - value: text("text", "Animals", group) + value: text("text", "Animals", group), }, { name: "open", - value: boolean("open", true, group) + value: boolean("open", true, group), }, { name: "toggle-display", - value: select("toggleDisplay", toggleDisplayOptions, toggleDisplayOptions[0], group) - } + value: select("toggleDisplay", toggleDisplayOptions, toggleDisplayOptions[0], group), + }, ]; }; @@ -168,7 +168,7 @@ export const darkModeRTL_TestOnly = (): string => createBlockAttributes({ exceptions: ["dir"] }).concat( { name: "class", - value: "calcite-mode-dark" + value: "calcite-mode-dark", }, { name: "dir", value: "rtl" } ), diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx index de256a0ecc9..ab5f50548dd 100644 --- a/packages/calcite-components/src/components/block/block.tsx +++ b/packages/calcite-components/src/components/block/block.tsx @@ -9,12 +9,12 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import { ConditionalSlotComponent, connectConditionalSlotComponent, - disconnectConditionalSlotComponent + disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot"; import { focusFirstTabbable, getSlotted, toAriaBoolean } from "../../utils/dom"; import { guid } from "../../utils/guid"; @@ -22,7 +22,7 @@ import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { @@ -30,7 +30,7 @@ import { disconnectMessages, setUpMessages, T9nComponent, - updateMessages + updateMessages, } from "../../utils/t9n"; import { Heading, HeadingLevel } from "../functional/Heading"; import { Status } from "../interfaces"; @@ -40,7 +40,7 @@ import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; /** @@ -53,7 +53,7 @@ import { tag: "calcite-block", styleUrl: "block.scss", shadow: true, - assetsDirs: ["assets"] + assetsDirs: ["assets"], }) export class Block implements @@ -251,7 +251,7 @@ export class Block class={{ [CSS.statusIcon]: true, [CSS.valid]: status == "valid", - [CSS.invalid]: status == "invalid" + [CSS.invalid]: status == "invalid", }} icon={ICONS[status]} scale="m" @@ -340,7 +340,7 @@ export class Block
{headerNode} diff --git a/packages/calcite-components/src/components/block/resources.ts b/packages/calcite-components/src/components/block/resources.ts index f6cc0678256..f7a7eec39c5 100644 --- a/packages/calcite-components/src/components/block/resources.ts +++ b/packages/calcite-components/src/components/block/resources.ts @@ -14,25 +14,25 @@ export const CSS = { description: "description", controlContainer: "control-container", valid: "valid", - invalid: "invalid" + invalid: "invalid", }; export const TEXT = { collapse: "Collapse", expand: "Expand", loading: "Loading", - options: "Options" + options: "Options", }; export const SLOTS = { icon: "icon", control: "control", - headerMenuActions: "header-menu-actions" + headerMenuActions: "header-menu-actions", }; export const ICONS = { opened: "chevron-up", closed: "chevron-down", valid: "check-circle", - invalid: "exclamation-mark-triangle" + invalid: "exclamation-mark-triangle", }; diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts index ddaf316512b..81007d13b35 100644 --- a/packages/calcite-components/src/components/button/button.e2e.ts +++ b/packages/calcite-components/src/components/button/button.e2e.ts @@ -9,80 +9,80 @@ describe("calcite-button", () => { defaults("calcite-button", [ { propertyName: "alignment", - defaultValue: "center" + defaultValue: "center", }, { propertyName: "appearance", - defaultValue: "solid" + defaultValue: "solid", }, { propertyName: "label", - defaultValue: undefined + defaultValue: undefined, }, { propertyName: "kind", - defaultValue: "brand" + defaultValue: "brand", }, { propertyName: "disabled", - defaultValue: false + defaultValue: false, }, { propertyName: "href", - defaultValue: undefined + defaultValue: undefined, }, { propertyName: "iconEnd", - defaultValue: undefined + defaultValue: undefined, }, { propertyName: "iconFlipRtl", - defaultValue: undefined + defaultValue: undefined, }, { propertyName: "iconStart", - defaultValue: undefined + defaultValue: undefined, }, { propertyName: "loading", - defaultValue: false + defaultValue: false, }, { propertyName: "name", - defaultValue: undefined + defaultValue: undefined, }, { propertyName: "rel", - defaultValue: undefined + defaultValue: undefined, }, { propertyName: "form", - defaultValue: undefined + defaultValue: undefined, }, { propertyName: "round", - defaultValue: false + defaultValue: false, }, { propertyName: "scale", - defaultValue: "m" + defaultValue: "m", }, { propertyName: "splitChild", - defaultValue: false + defaultValue: false, }, { propertyName: "target", - defaultValue: undefined + defaultValue: undefined, }, { propertyName: "type", - defaultValue: "button" + defaultValue: "button", }, { propertyName: "width", - defaultValue: "auto" - } + defaultValue: "auto", + }, ]); }); @@ -453,7 +453,7 @@ describe("calcite-button", () => { buttonEl.style.setProperty("--calcite-button-transparent-press", "rgba(1, 20, 44, 0.1"); return { hoverFocus: window.getComputedStyle(buttonEl).getPropertyValue("--calcite-button-transparent-hover"), - active: window.getComputedStyle(buttonEl).getPropertyValue("--calcite-button-transparent-press") + active: window.getComputedStyle(buttonEl).getPropertyValue("--calcite-button-transparent-press"), }; }); expect(buttonStyles.hoverFocus).toEqual("rgba(34, 23, 200, 0.4)"); @@ -479,7 +479,7 @@ describe("calcite-button", () => { describe("when mode attribute is dark", () => { it("should render button pseudo classes with value tied to dark mode", async () => { page = await newE2EPage({ - html: `
${buttonSnippet}
` + html: `
${buttonSnippet}
`, }); buttonEl = await page.find("calcite-button >>> button"); await buttonEl.focus(); @@ -503,7 +503,7 @@ describe("calcite-button", () => { --calcite-button-transparent-hover: ${overrideStyle}; } -
${buttonSnippet}
` +
${buttonSnippet}
`, }); buttonEl = await page.find("calcite-button >>> button"); await buttonEl.focus(); diff --git a/packages/calcite-components/src/components/button/button.stories.ts b/packages/calcite-components/src/components/button/button.stories.ts index 4753837c84f..db7dfa66701 100644 --- a/packages/calcite-components/src/components/button/button.stories.ts +++ b/packages/calcite-components/src/components/button/button.stories.ts @@ -7,9 +7,9 @@ import readme from "./readme.md"; export default { title: "Components/Buttons/Button", parameters: { - notes: readme + notes: readme, }, - ...storyFilters() + ...storyFilters(), }; export const simple = (): string => html` diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx index ccb54a1e9f8..664b494323e 100644 --- a/packages/calcite-components/src/components/button/button.tsx +++ b/packages/calcite-components/src/components/button/button.tsx @@ -4,14 +4,14 @@ import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { createObserver } from "../../utils/observers"; @@ -20,7 +20,7 @@ import { disconnectMessages, setUpMessages, T9nComponent, - updateMessages + updateMessages, } from "../../utils/t9n"; import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces"; import { ButtonMessages } from "./assets/button/t9n"; @@ -35,7 +35,7 @@ import { CSS } from "./resources"; tag: "calcite-button", styleUrl: "button.scss", shadow: true, - assetsDirs: ["assets"] + assetsDirs: ["assets"], }) export class Button implements @@ -263,7 +263,7 @@ export class Button [CSS.buttonPaddingShrunk]: !noStartEndIcons, [CSS.contentSlotted]: this.hasContent, [CSS.iconStartEmpty]: !this.iconStart, - [CSS.iconEndEmpty]: !this.iconEnd + [CSS.iconEndEmpty]: !this.iconEnd, }} disabled={this.disabled || this.loading} href={childElType === "a" && this.href} diff --git a/packages/calcite-components/src/components/button/resources.ts b/packages/calcite-components/src/components/button/resources.ts index f6c0abeaa83..6677324737a 100644 --- a/packages/calcite-components/src/components/button/resources.ts +++ b/packages/calcite-components/src/components/button/resources.ts @@ -10,5 +10,5 @@ export const CSS = { iconStartEmpty: "icon-start-empty", iconEndEmpty: "icon-end-empty", buttonPadding: "button-padding", - buttonPaddingShrunk: "button-padding--shrunk" + buttonPaddingShrunk: "button-padding--shrunk", }; diff --git a/packages/calcite-components/src/components/card/card.e2e.ts b/packages/calcite-components/src/components/card/card.e2e.ts index 7937889fa6b..b438f78622b 100644 --- a/packages/calcite-components/src/components/card/card.e2e.ts +++ b/packages/calcite-components/src/components/card/card.e2e.ts @@ -6,7 +6,7 @@ import { html } from "../../../support/formatting"; const placeholder = placeholderImage({ width: 350, - height: 150 + height: 150, }); describe("calcite-card", () => { diff --git a/packages/calcite-components/src/components/card/card.stories.ts b/packages/calcite-components/src/components/card/card.stories.ts index 02a874f3610..f7aadaa7b37 100644 --- a/packages/calcite-components/src/components/card/card.stories.ts +++ b/packages/calcite-components/src/components/card/card.stories.ts @@ -7,7 +7,7 @@ import { Attributes, filterComponentAttributes, modesDarkDefault, - createComponentHTML as create + createComponentHTML as create, } from "../../../.storybook/utils"; import { storyFilters } from "../../../.storybook/helpers"; import { ATTRIBUTES } from "../../../.storybook/resources"; @@ -15,9 +15,9 @@ import { ATTRIBUTES } from "../../../.storybook/resources"; export default { title: "Components/Card", parameters: { - notes: readme + notes: readme, }, - ...storyFilters() + ...storyFilters(), }; const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { @@ -30,7 +30,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("loading", false); delete this.build; return this; - } + }, }, { name: "selected", @@ -38,7 +38,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("selected", false); delete this.build; return this; - } + }, }, { name: "selectable", @@ -46,7 +46,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("selectable", false); delete this.build; return this; - } + }, }, { name: "thumbnail-position", @@ -54,8 +54,8 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = select("thumbnail-position", logicalFlowPosition.values, logicalFlowPosition.defaultValue); delete this.build; return this; - } - } + }, + }, ], exceptions ); @@ -82,7 +82,7 @@ const thumbnailHtml = html` `; @@ -120,7 +120,7 @@ export const simpleWithFooterTextButtonTooltip_NoTest = (): string => html` ${tooltipHtml} `; simpleWithFooterTextButtonTooltip_NoTest.parameters = { - chromatic: { disableSnapshot: true } + chromatic: { disableSnapshot: true }, }; export const thumbnail = (): string => html` diff --git a/packages/calcite-components/src/components/card/card.tsx b/packages/calcite-components/src/components/card/card.tsx index 6c3e42d9776..9e0c0fe8f8e 100644 --- a/packages/calcite-components/src/components/card/card.tsx +++ b/packages/calcite-components/src/components/card/card.tsx @@ -7,12 +7,12 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import { ConditionalSlotComponent, connectConditionalSlotComponent, - disconnectConditionalSlotComponent + disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot"; import { getSlotted, toAriaBoolean } from "../../utils/dom"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; @@ -21,7 +21,7 @@ import { disconnectMessages, setUpMessages, T9nComponent, - updateMessages + updateMessages, } from "../../utils/t9n"; import { LogicalFlowPosition } from "../interfaces"; import { CardMessages } from "./assets/card/t9n"; @@ -45,7 +45,7 @@ import { CSS, SLOTS } from "./resources"; tag: "calcite-card", styleUrl: "card.scss", shadow: true, - assetsDirs: ["assets"] + assetsDirs: ["assets"], }) export class Card implements ConditionalSlotComponent, LocalizedComponent, T9nComponent { //-------------------------------------------------------------------------- diff --git a/packages/calcite-components/src/components/card/resources.ts b/packages/calcite-components/src/components/card/resources.ts index c2e49c35880..70ee6825481 100644 --- a/packages/calcite-components/src/components/card/resources.ts +++ b/packages/calcite-components/src/components/card/resources.ts @@ -5,7 +5,7 @@ export const CSS = { title: "title", subtitle: "subtitle", checkboxWrapper: "checkbox-wrapper", - thumbnailWrapper: "thumbnail-wrapper" + thumbnailWrapper: "thumbnail-wrapper", }; export const SLOTS = { @@ -13,5 +13,5 @@ export const SLOTS = { title: "title", subtitle: "subtitle", footerStart: "footer-start", - footerEnd: "footer-end" + footerEnd: "footer-end", }; diff --git a/packages/calcite-components/src/components/checkbox/checkbox.e2e.ts b/packages/calcite-components/src/components/checkbox/checkbox.e2e.ts index 6490f4c0556..5e672a94a95 100644 --- a/packages/calcite-components/src/components/checkbox/checkbox.e2e.ts +++ b/packages/calcite-components/src/components/checkbox/checkbox.e2e.ts @@ -6,7 +6,7 @@ import { formAssociated, HYDRATED_ATTR, labelable, - hidden + hidden, } from "../../tests/commonTests"; describe("calcite-checkbox", () => { @@ -164,7 +164,7 @@ describe("calcite-checkbox", () => { describe("is focusable", () => { focusable("calcite-checkbox", { - shadowFocusTargetSelector: ".toggle" + shadowFocusTargetSelector: ".toggle", }); }); }); diff --git a/packages/calcite-components/src/components/checkbox/checkbox.stories.ts b/packages/calcite-components/src/components/checkbox/checkbox.stories.ts index b0c20b3dcdb..c3fc522678d 100644 --- a/packages/calcite-components/src/components/checkbox/checkbox.stories.ts +++ b/packages/calcite-components/src/components/checkbox/checkbox.stories.ts @@ -7,9 +7,9 @@ import readme from "./readme.md"; export default { title: "Components/Controls/Checkbox", parameters: { - notes: readme + notes: readme, }, - ...storyFilters() + ...storyFilters(), }; export const simple = (): string => html` diff --git a/packages/calcite-components/src/components/checkbox/checkbox.tsx b/packages/calcite-components/src/components/checkbox/checkbox.tsx index cbd75c5ac15..57fb9fb00e1 100644 --- a/packages/calcite-components/src/components/checkbox/checkbox.tsx +++ b/packages/calcite-components/src/components/checkbox/checkbox.tsx @@ -7,21 +7,21 @@ import { Host, Method, Prop, - VNode + VNode, } from "@stencil/core"; import { toAriaBoolean } from "../../utils/dom"; import { CheckableFormComponent, connectForm, disconnectForm, - HiddenFormInputSlot + HiddenFormInputSlot, } from "../../utils/form"; import { guid } from "../../utils/guid"; import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; @@ -29,14 +29,14 @@ import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { Scale } from "../interfaces"; @Component({ tag: "calcite-checkbox", styleUrl: "checkbox.scss", - shadow: true + shadow: true, }) export class Checkbox implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent diff --git a/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts b/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts index f4ec65eec7d..13c9a598d79 100644 --- a/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts +++ b/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts @@ -7,7 +7,7 @@ import { CSS as CHIP_CSS } from "../chip/resources"; describe("calcite-chip-group", () => { describe("renders", () => { renders("", { - display: "flex" + display: "flex", }); }); @@ -17,7 +17,7 @@ describe("calcite-chip-group", () => { describe("disabled", () => { disabled("", { - focusTarget: "child" + focusTarget: "child", }); }); diff --git a/packages/calcite-components/src/components/chip-group/chip-group.stories.ts b/packages/calcite-components/src/components/chip-group/chip-group.stories.ts index e151ac5a55c..93c0280e38a 100644 --- a/packages/calcite-components/src/components/chip-group/chip-group.stories.ts +++ b/packages/calcite-components/src/components/chip-group/chip-group.stories.ts @@ -7,9 +7,9 @@ import { html } from "../../../support/formatting"; export default { title: "Components/Chip Group", parameters: { - notes: readme + notes: readme, }, - ...storyFilters() + ...storyFilters(), }; export const simple = (): string => html` diff --git a/packages/calcite-components/src/components/chip-group/chip-group.tsx b/packages/calcite-components/src/components/chip-group/chip-group.tsx index 4384741b774..e410dac0b67 100644 --- a/packages/calcite-components/src/components/chip-group/chip-group.tsx +++ b/packages/calcite-components/src/components/chip-group/chip-group.tsx @@ -8,21 +8,21 @@ import { EventEmitter, Event, Method, - Watch + Watch, } from "@stencil/core"; import { focusElementInGroup, toAriaBoolean } from "../../utils/dom"; import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { createObserver } from "../../utils/observers"; import { Scale, SelectionMode } from "../interfaces"; import { componentFocusable, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; /** * @slot - A slot for adding one or more `calcite-chip`s. @@ -30,7 +30,7 @@ import { @Component({ tag: "calcite-chip-group", styleUrl: "chip-group.scss", - shadow: true + shadow: true, }) export class ChipGroup implements InteractiveComponent { //-------------------------------------------------------------------------- diff --git a/packages/calcite-components/src/components/chip/chip.e2e.ts b/packages/calcite-components/src/components/chip/chip.e2e.ts index 0bea3df3d3b..810deac693b 100644 --- a/packages/calcite-components/src/components/chip/chip.e2e.ts +++ b/packages/calcite-components/src/components/chip/chip.e2e.ts @@ -147,7 +147,7 @@ describe("calcite-chip", () => { chip.style.setProperty("--calcite-chip-transparent-press", "rgba(4, 10, 4, 0.31"); return { hoverFocus: window.getComputedStyle(chip).getPropertyValue("--calcite-chip-transparent-hover"), - active: window.getComputedStyle(chip).getPropertyValue("--calcite-chip-transparent-press") + active: window.getComputedStyle(chip).getPropertyValue("--calcite-chip-transparent-press"), }; }); expect(chipStyles.hoverFocus).toEqual("rgba(3, 2, 20, 0.14)"); @@ -173,7 +173,7 @@ describe("calcite-chip", () => { describe("when mode attribute is dark", () => { it("should render button pseudo classes with value tied to dark mode", async () => { page = await newE2EPage({ - html: `
${chipSnippet}
` + html: `
${chipSnippet}
`, }); chipCloseButton = await page.find("calcite-chip >>> button"); await chipCloseButton.focus(); @@ -197,7 +197,7 @@ describe("calcite-chip", () => { --calcite-button-transparent-hover: ${overrideStyle}; } -
${chipSnippet}
` +
${chipSnippet}
`, }); chipCloseButton = await page.find("calcite-chip >>> button"); await chipCloseButton.focus(); diff --git a/packages/calcite-components/src/components/chip/chip.stories.ts b/packages/calcite-components/src/components/chip/chip.stories.ts index 3526c8684d3..a62563fd573 100644 --- a/packages/calcite-components/src/components/chip/chip.stories.ts +++ b/packages/calcite-components/src/components/chip/chip.stories.ts @@ -8,9 +8,9 @@ import readme from "./readme.md"; export default { title: "Components/Chip", parameters: { - notes: readme + notes: readme, }, - ...storyFilters() + ...storyFilters(), }; export const simple = (): string => html` diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx index ef2fbfd5afb..ce4abf64cae 100644 --- a/packages/calcite-components/src/components/chip/chip.tsx +++ b/packages/calcite-components/src/components/chip/chip.tsx @@ -11,7 +11,7 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import { toAriaBoolean, slotChangeHasAssignedElement } from "../../utils/dom"; import { CSS, SLOTS, ICONS } from "./resources"; @@ -19,13 +19,13 @@ import { Appearance, Kind, Scale, SelectionMode } from "../interfaces"; import { ConditionalSlotComponent, connectConditionalSlotComponent, - disconnectConditionalSlotComponent + disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot"; import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { @@ -33,13 +33,13 @@ import { disconnectMessages, setUpMessages, T9nComponent, - updateMessages + updateMessages, } from "../../utils/t9n"; import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { createObserver } from "../../utils/observers"; @@ -54,7 +54,7 @@ import { ChipMessages } from "./assets/chip/t9n"; tag: "calcite-chip", styleUrl: "chip.scss", shadow: true, - assetsDirs: ["assets"] + assetsDirs: ["assets"], }) export class Chip implements @@ -344,7 +344,7 @@ export class Chip
@@ -412,7 +412,7 @@ export class Chip !this.hasText && (!this.icon || !this.hasImage) && (this.selectionMode === "none" || - (!!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)) + (!!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)), }} onClick={this.handleEmittingEvent} role={role} diff --git a/packages/calcite-components/src/components/chip/resources.ts b/packages/calcite-components/src/components/chip/resources.ts index 9db18460991..7f9bacb67fd 100644 --- a/packages/calcite-components/src/components/chip/resources.ts +++ b/packages/calcite-components/src/components/chip/resources.ts @@ -12,16 +12,16 @@ export const CSS = { selectIcon: "select-icon", selectIconActive: "select-icon--active", nonInteractive: "non-interactive", - isCircle: "is-circle" + isCircle: "is-circle", }; export const SLOTS = { - image: "image" + image: "image", }; export const ICONS = { close: "x", unchecked: "circle", checkedSingle: "circle-f", - checked: "check-circle-f" + checked: "check-circle-f", }; diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts index e7bb6c46de1..ac39fdbe630 100644 --- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts +++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts @@ -23,16 +23,16 @@ describe("calcite-color-picker-hex-input", () => { defaults("calcite-color-picker-hex-input", [ { propertyName: "allowEmpty", - defaultValue: false + defaultValue: false, }, { propertyName: "alphaChannel", - defaultValue: false + defaultValue: false, }, { propertyName: "value", - defaultValue: "#000000" - } + defaultValue: "#000000", + }, ]); }); @@ -40,8 +40,8 @@ describe("calcite-color-picker-hex-input", () => { reflects("calcite-color-picker-hex-input", [ { propertyName: "value", - value: "#ffffff" - } + value: "#ffffff", + }, ]); }); diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx index 38ac015b64d..d4c44265871 100644 --- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx +++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx @@ -8,7 +8,7 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import { alphaToOpacity, @@ -18,7 +18,7 @@ import { isValidHex, normalizeHex, opacityToAlpha, - rgbToHex + rgbToHex, } from "../color-picker/utils"; import { CSS } from "./resources"; import { Scale } from "../interfaces"; @@ -29,7 +29,7 @@ import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { NumberingSystem } from "../../utils/locale"; import { OPACITY_LIMITS } from "../color-picker/resources"; @@ -40,7 +40,7 @@ const DEFAULT_COLOR = Color(); @Component({ tag: "calcite-color-picker-hex-input", styleUrl: "color-picker-hex-input.scss", - shadow: true + shadow: true, }) export class ColorPickerHexInput implements LoadableComponent { //-------------------------------------------------------------------------- @@ -439,7 +439,7 @@ export class ColorPickerHexInput implements LoadableComponent { const nudgedRGBChannels = rgbChannels.map((channel) => channel + amount); nudgedChannels = [ ...nudgedRGBChannels, - this.alphaChannel ? channels[3] : undefined + this.alphaChannel ? channels[3] : undefined, ] as Channels; } else { const nudgedAlpha = opacityToAlpha(alphaToOpacity(color.alpha()) + amount); diff --git a/packages/calcite-components/src/components/color-picker-hex-input/resources.ts b/packages/calcite-components/src/components/color-picker-hex-input/resources.ts index 4b516e46949..53b14217649 100644 --- a/packages/calcite-components/src/components/color-picker-hex-input/resources.ts +++ b/packages/calcite-components/src/components/color-picker-hex-input/resources.ts @@ -1,5 +1,5 @@ export const CSS = { container: "container", hexInput: "hex-input", - opacityInput: "opacity-input" + opacityInput: "opacity-input", }; diff --git a/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.e2e.ts b/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.e2e.ts index 2ad4bc8cbae..c9b46b052cd 100644 --- a/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.e2e.ts +++ b/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.e2e.ts @@ -22,8 +22,8 @@ describe("calcite-color-picker-swatch", () => { defaults("calcite-color-picker-swatch", [ { propertyName: "active", - defaultValue: false - } + defaultValue: false, + }, ]); }); @@ -31,8 +31,8 @@ describe("calcite-color-picker-swatch", () => { reflects("calcite-color-picker-swatch", [ { propertyName: "active", - value: true - } + value: true, + }, ]); }); diff --git a/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.stories.ts b/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.stories.ts index e669f6e1189..a681e61ca81 100644 --- a/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.stories.ts +++ b/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.stories.ts @@ -7,9 +7,9 @@ import { storyFilters } from "../../../.storybook/helpers"; export default { title: "Components/Controls/ColorPicker/support/ColorPickerSwatch", parameters: { - notes: colorPickerSwatchReadme + notes: colorPickerSwatchReadme, }, - ...storyFilters() + ...storyFilters(), }; export const simple = (): string => diff --git a/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.tsx b/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.tsx index f06b620e1fc..057fcfdeb44 100644 --- a/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.tsx +++ b/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.tsx @@ -8,7 +8,7 @@ import { CHECKER_DIMENSIONS, COLORS, CSS } from "./resources"; @Component({ tag: "calcite-color-picker-swatch", styleUrl: "color-picker-swatch.scss", - shadow: true + shadow: true, }) export class ColorPickerSwatch { //-------------------------------------------------------------------------- @@ -21,7 +21,7 @@ export class ColorPickerSwatch { * When `true`, the component is active. */ @Prop({ - reflect: true + reflect: true, }) active = false; @@ -42,7 +42,7 @@ export class ColorPickerSwatch { * Specifies the size of the component. */ @Prop({ - reflect: true + reflect: true, }) scale: Scale = "m"; @@ -71,7 +71,7 @@ export class ColorPickerSwatch { const isEmpty = !this.internalColor; const classes = { [CSS.swatch]: true, - [CSS.noColorSwatch]: isEmpty + [CSS.noColorSwatch]: isEmpty, }; return ( @@ -96,7 +96,7 @@ export class ColorPickerSwatch { // using attribute to work around Stencil using the prop name vs the attribute when rendering ["stroke-width"]: "2", - width: "100%" + width: "100%", }; const isEmpty = !internalColor; @@ -154,7 +154,7 @@ export class ColorPickerSwatch { fill={hex} style={{ "clip-path": - alpha < 1 ? "polygon(100% 0, 0 0, 0 100%)" : `inset(0 round ${borderRadius})` + alpha < 1 ? "polygon(100% 0, 0 0, 0 100%)" : `inset(0 round ${borderRadius})`, }} {...commonSwatchProps} /> diff --git a/packages/calcite-components/src/components/color-picker-swatch/resources.ts b/packages/calcite-components/src/components/color-picker-swatch/resources.ts index 947ba0dc080..966b5c18853 100644 --- a/packages/calcite-components/src/components/color-picker-swatch/resources.ts +++ b/packages/calcite-components/src/components/color-picker-swatch/resources.ts @@ -1,17 +1,17 @@ export const CSS = { swatch: "swatch", noColorSwatch: "swatch--no-color", - checker: "checker" + checker: "checker", }; export const COLORS = { borderLight: "rgba(0, 0, 0, 0.3)", - borderDark: "rgba(255, 255, 255, 0.15)" + borderDark: "rgba(255, 255, 255, 0.15)", }; const checkerSquareSize = 4; export const CHECKER_DIMENSIONS = { squareSize: checkerSquareSize, - size: checkerSquareSize * 2 + size: checkerSquareSize * 2, }; diff --git a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts index 3b74c5c825e..ee9a2571409 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts +++ b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts @@ -33,7 +33,7 @@ describe("calcite-color-picker", () => { describe("should focus scope by default", () => { focusable("", { - shadowFocusTargetSelector: `.${CSS.colorFieldScope}` + shadowFocusTargetSelector: `.${CSS.colorFieldScope}`, }); }); @@ -50,8 +50,8 @@ describe("calcite-color-picker", () => { reflects("calcite-color-picker", [ { propertyName: "scale", - value: "m" - } + value: "m", + }, ]); }); @@ -63,48 +63,48 @@ describe("calcite-color-picker", () => { defaults("calcite-color-picker", [ { propertyName: "allowEmpty", - defaultValue: false + defaultValue: false, }, { propertyName: "alphaChannel", - defaultValue: false + defaultValue: false, }, { propertyName: "channelsDisabled", - defaultValue: false + defaultValue: false, }, { propertyName: "format", - defaultValue: "auto" + defaultValue: "auto", }, { propertyName: "hexDisabled", - defaultValue: false + defaultValue: false, }, { propertyName: "hideChannels", - defaultValue: false + defaultValue: false, }, { propertyName: "hideHex", - defaultValue: false + defaultValue: false, }, { propertyName: "hideSaved", - defaultValue: false + defaultValue: false, }, { propertyName: "savedDisabled", - defaultValue: false + defaultValue: false, }, { propertyName: "scale", - defaultValue: "m" + defaultValue: "m", }, { propertyName: "value", - defaultValue: "#007ac2" - } + defaultValue: "#007ac2", + }, ]); }); @@ -200,7 +200,7 @@ describe("calcite-color-picker", () => { await page.mouse.move(draggedColorFieldScopeX, draggedColorFieldScopeY); await page.mouse.down(); await page.mouse.move(draggedColorFieldScopeX + 10, draggedColorFieldScopeY, { - steps: mouseDragSteps + steps: mouseDragSteps, }); await page.mouse.up(); await page.waitForChanges(); @@ -258,7 +258,7 @@ describe("calcite-color-picker", () => { "hsl-css": "hsl(0, 0%, 100%)", rgb: { r: 255, g: 255, b: 255 }, hsl: { h: 0, s: 0, l: 100 }, - hsv: { h: 0, s: 0, v: 100 } + hsv: { h: 0, s: 0, v: 100 }, }; const supportedAlphaFormatToSampleValue = { @@ -267,12 +267,12 @@ describe("calcite-color-picker", () => { "hsla-css": "hsla(0, 0%, 100%, 1)", rgba: { r: 255, g: 255, b: 255, a: 1 }, hsla: { h: 0, s: 0, l: 100, a: 1 }, - hsva: { h: 0, s: 0, v: 100, a: 1 } + hsva: { h: 0, s: 0, v: 100, a: 1 }, }; const allSupportedFormatToSampleValue = { ...supportedFormatToSampleValue, - ...supportedAlphaFormatToSampleValue + ...supportedAlphaFormatToSampleValue, }; const clearAndEnterHexOrChannelValue = async ( @@ -401,7 +401,7 @@ describe("calcite-color-picker", () => { const supportedStringFormats = [ supportedFormatToSampleValue.hex, supportedFormatToSampleValue["rgb-css"], - supportedFormatToSampleValue["hsl-css"] + supportedFormatToSampleValue["hsl-css"], ]; for (const value of supportedStringFormats) { @@ -414,7 +414,7 @@ describe("calcite-color-picker", () => { const supportedObjectFormats = [ supportedFormatToSampleValue.rgb, supportedFormatToSampleValue.hsl, - supportedFormatToSampleValue.hsv + supportedFormatToSampleValue.hsv, ]; for (const value of supportedObjectFormats) { @@ -436,7 +436,7 @@ describe("calcite-color-picker", () => { [allSupportedFormatToSampleValue["rgb-css"], allSupportedFormatToSampleValue["rgba-css"]], [allSupportedFormatToSampleValue["rgba-css"], allSupportedFormatToSampleValue["rgba-css"]], [allSupportedFormatToSampleValue["hsl-css"], allSupportedFormatToSampleValue["hsla-css"]], - [allSupportedFormatToSampleValue["hsla-css"], allSupportedFormatToSampleValue["hsla-css"]] + [allSupportedFormatToSampleValue["hsla-css"], allSupportedFormatToSampleValue["hsla-css"]], ]; for (const [value, expected] of supportedStringFormats) { @@ -452,7 +452,7 @@ describe("calcite-color-picker", () => { [allSupportedFormatToSampleValue.hsl, allSupportedFormatToSampleValue.hsla], [allSupportedFormatToSampleValue.hsla, allSupportedFormatToSampleValue.hsla], [allSupportedFormatToSampleValue.hsv, allSupportedFormatToSampleValue.hsva], - [allSupportedFormatToSampleValue.hsva, allSupportedFormatToSampleValue.hsva] + [allSupportedFormatToSampleValue.hsva, allSupportedFormatToSampleValue.hsva], ]; for (const [value, expected] of supportedObjectFormats) { @@ -520,7 +520,7 @@ describe("calcite-color-picker", () => { "#0095ff", "#4800ff", "#ff00dd", - "#ff0004" + "#ff0004", ]; for (let i = 0; i < expectedColorSamples.length; i++) { @@ -763,7 +763,7 @@ describe("calcite-color-picker", () => { it("value as property", async () => { // initialize page with calcite-color-picker to make it available in the evaluate callback below const page = await newE2EPage({ - html: "" + html: "", }); await page.setContent(""); @@ -789,7 +789,7 @@ describe("calcite-color-picker", () => { jasmineToString(): string { return `Expected value to be an integer.`; - } + }, }; } @@ -801,7 +801,7 @@ describe("calcite-color-picker", () => { jasmineToString(): string { return `Expected value to be an number.`; - } + }, }; } @@ -899,7 +899,7 @@ describe("calcite-color-picker", () => { expect(value).toMatchObject({ r: toBeInteger(), g: toBeInteger(), - b: toBeInteger() + b: toBeInteger(), }); }); @@ -916,7 +916,7 @@ describe("calcite-color-picker", () => { expect(value).toMatchObject({ h: toBeInteger(), s: toBeInteger(), - l: toBeInteger() + l: toBeInteger(), }); }); @@ -933,7 +933,7 @@ describe("calcite-color-picker", () => { expect(value).toMatchObject({ h: toBeInteger(), s: toBeInteger(), - v: toBeInteger() + v: toBeInteger(), }); }); @@ -1383,7 +1383,7 @@ describe("calcite-color-picker", () => { r: toBeInteger(), g: toBeInteger(), b: toBeInteger(), - a: toBeNumber() + a: toBeNumber(), }); }); @@ -1401,7 +1401,7 @@ describe("calcite-color-picker", () => { r: toBeInteger(), g: toBeInteger(), b: toBeInteger(), - a: toBeNumber() + a: toBeNumber(), }); }); @@ -1419,7 +1419,7 @@ describe("calcite-color-picker", () => { h: toBeInteger(), s: toBeInteger(), l: toBeInteger(), - a: toBeNumber() + a: toBeNumber(), }); }); @@ -1437,7 +1437,7 @@ describe("calcite-color-picker", () => { h: toBeInteger(), s: toBeInteger(), l: toBeInteger(), - a: toBeNumber() + a: toBeNumber(), }); }); @@ -1454,7 +1454,7 @@ describe("calcite-color-picker", () => { expect(value).toMatchObject({ h: toBeInteger(), s: toBeInteger(), - v: toBeInteger() + v: toBeInteger(), }); }); @@ -1472,7 +1472,7 @@ describe("calcite-color-picker", () => { h: toBeInteger(), s: toBeInteger(), v: toBeInteger(), - a: toBeNumber() + a: toBeNumber(), }); }); @@ -2072,7 +2072,7 @@ describe("calcite-color-picker", () => { const sectionVisibility: Record = { hex: true, channels: true, - saved: true + saved: true, }; hiddenSections.forEach((section) => (sectionVisibility[section] = false)); @@ -2091,13 +2091,13 @@ describe("calcite-color-picker", () => { const [hex, channels, saved] = await Promise.all([ page.find(`calcite-color-picker >>> .${CSS.hexOptions}`), page.find(`calcite-color-picker >>> .${CSS.colorModeContainer}`), - page.find(`calcite-color-picker >>> .${CSS.savedColors}`) + page.find(`calcite-color-picker >>> .${CSS.savedColors}`), ]); const sectionNodes: Record = { hex, channels, - saved + saved, }; sections.forEach((section) => { @@ -2228,7 +2228,7 @@ describe("calcite-color-picker", () => { expect(await hueSliderScope.getComputedStyle()).toMatchObject({ top: "10px", - left: "0px" + left: "0px", }); }); }); diff --git a/packages/calcite-components/src/components/color-picker/color-picker.stories.ts b/packages/calcite-components/src/components/color-picker/color-picker.stories.ts index 9466c175e77..56ceace2fcc 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.stories.ts +++ b/packages/calcite-components/src/components/color-picker/color-picker.stories.ts @@ -4,7 +4,7 @@ import { filterComponentAttributes, Attributes, createComponentHTML as create, - modesDarkDefault + modesDarkDefault, } from "../../../.storybook/utils"; import colorReadme from "./readme.md"; import { ATTRIBUTES } from "../../../.storybook/resources"; @@ -14,9 +14,9 @@ import { storyFilters } from "../../../.storybook/helpers"; export default { title: "Components/Controls/ColorPicker", parameters: { - notes: colorReadme + notes: colorReadme, }, - ...storyFilters() + ...storyFilters(), }; const createColorAttributes: (options?: { exceptions: string[] }) => Attributes = ( @@ -32,7 +32,7 @@ const createColorAttributes: (options?: { exceptions: string[] }) => Attributes this.value = boolean("channels-disabled", false); delete this.build; return this; - } + }, }, { name: "hex-disabled", @@ -40,7 +40,7 @@ const createColorAttributes: (options?: { exceptions: string[] }) => Attributes this.value = boolean("hex-disabled", false); delete this.build; return this; - } + }, }, { name: "saved-disabled", @@ -48,7 +48,7 @@ const createColorAttributes: (options?: { exceptions: string[] }) => Attributes this.value = boolean("saved-disabled", false); delete this.build; return this; - } + }, }, { name: "scale", @@ -56,8 +56,8 @@ const createColorAttributes: (options?: { exceptions: string[] }) => Attributes this.value = select("scale", scale.values, scale.defaultValue); delete this.build; return this; - } - } + }, + }, ], exceptions ); @@ -67,20 +67,20 @@ export const simple = (): string => create("calcite-color-picker", [ { name: "allow-empty", - value: boolean("allow-empty", false) + value: boolean("allow-empty", false), }, ...createColorAttributes(), { name: "value", - value: text("value", "#b33f33") - } + value: text("value", "#b33f33"), + }, ]); export const alphaChannel = (): string => create("calcite-color-picker", [ ...createColorAttributes(), { name: "alpha-channel", value: true }, - { name: "value", value: text("value", "#b33f3333") } + { name: "value", value: text("value", "#b33f3333") }, ]); export const disabled_TestOnly = (): string => html``; @@ -91,8 +91,8 @@ export const darkModeRTL_TestOnly = (): string => { name: "class", value: "calcite-mode-dark" }, { name: "value", - value: text("value", "#b33f33") - } + value: text("value", "#b33f33"), + }, ]); darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault }; diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx index 0c0078d2d6f..01d28aaa8ba 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.tsx +++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx @@ -9,7 +9,7 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import Color from "color"; @@ -24,7 +24,7 @@ import { DIMENSIONS, HSV_LIMITS, OPACITY_LIMITS, - RGB_LIMITS + RGB_LIMITS, } from "./resources"; import { alphaCompatible, @@ -40,27 +40,27 @@ import { parseMode, SupportedMode, toAlphaMode, - toNonAlphaMode + toNonAlphaMode, } from "./utils"; import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent, - NumberingSystem + NumberingSystem, } from "../../utils/locale"; import { clamp } from "../../utils/math"; import { @@ -68,7 +68,7 @@ import { disconnectMessages, setUpMessages, T9nComponent, - updateMessages + updateMessages, } from "../../utils/t9n"; import { ColorPickerMessages } from "./assets/color-picker/t9n"; @@ -78,9 +78,9 @@ const throttleFor60FpsInMs = 16; tag: "calcite-color-picker", styleUrl: "color-picker.scss", shadow: { - delegatesFocus: true + delegatesFocus: true, }, - assetsDirs: ["assets"] + assetsDirs: ["assets"], }) export class ColorPicker implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent @@ -382,7 +382,7 @@ export class ColorPicker ArrowUp: { x: 0, y: -10 }, ArrowRight: { x: 10, y: 0 }, ArrowDown: { x: 0, y: 10 }, - ArrowLeft: { x: -10, y: 0 } + ArrowLeft: { x: -10, y: 0 }, }; if (arrowKeyToXYOffset[key]) { @@ -403,7 +403,7 @@ export class ColorPicker ArrowUp: 1, ArrowRight: 1, ArrowDown: -1, - ArrowLeft: -1 + ArrowLeft: -1, }; if (arrowKeyToXOffset[key]) { @@ -541,7 +541,7 @@ export class ColorPicker this.activeCanvasInfo = { context: this.colorFieldRenderingContext, - bounds: this.colorFieldRenderingContext.canvas.getBoundingClientRect() + bounds: this.colorFieldRenderingContext.canvas.getBoundingClientRect(), }; this.captureColorFieldColor(offsetX, offsetY); this.colorFieldScopeNode.focus(); @@ -559,7 +559,7 @@ export class ColorPicker this.activeCanvasInfo = { context: this.hueSliderRenderingContext, - bounds: this.hueSliderRenderingContext.canvas.getBoundingClientRect() + bounds: this.hueSliderRenderingContext.canvas.getBoundingClientRect(), }; this.captureHueSliderColor(offsetX); this.hueScopeNode.focus(); @@ -577,7 +577,7 @@ export class ColorPicker this.activeCanvasInfo = { context: this.opacitySliderRenderingContext, - bounds: this.opacitySliderRenderingContext.canvas.getBoundingClientRect() + bounds: this.opacitySliderRenderingContext.canvas.getBoundingClientRect(), }; this.captureOpacitySliderValue(offsetX); this.opacityScopeNode.focus(); @@ -729,7 +729,7 @@ export class ColorPicker dimensions: { colorField: { width: colorFieldWidth }, slider: { width: sliderWidth }, - thumb: { radius: thumbRadius } + thumb: { radius: thumbRadius }, }, hexDisabled, hideChannels, @@ -742,7 +742,7 @@ export class ColorPicker savedColors, savedDisabled, scale, - scopeOrientation + scopeOrientation, } = this; const selectedColorInHex = color ? hexify(color, alphaChannel) : null; const hueTop = thumbRadius; @@ -833,7 +833,7 @@ export class ColorPicker
@@ -855,7 +855,7 @@ export class ColorPicker @@ -912,7 +912,7 @@ export class ColorPicker scale={scale} tabIndex={0} /> - )) + )), ]}
) : null} @@ -1010,7 +1010,7 @@ export class ColorPicker // logical-prop, which is undesired as channels are always ltr style={{ marginLeft: - index > 0 && !(this.scale === "s" && this.alphaChannel && index === 3) ? "-1px" : "" + index > 0 && !(this.scale === "s" && this.alphaChannel && index === 3) ? "-1px" : "", }} suffixText={suffix} type="number" @@ -1076,8 +1076,8 @@ export class ColorPicker private captureHueSliderColor(x: number): void { const { dimensions: { - slider: { width } - } + slider: { width }, + }, } = this; const hue = (360 / width) * x; @@ -1087,8 +1087,8 @@ export class ColorPicker private captureOpacitySliderValue(x: number): void { const { dimensions: { - slider: { width } - } + slider: { width }, + }, } = this; const alpha = opacityToAlpha((OPACITY_LIMITS.max / width) * x); @@ -1152,8 +1152,8 @@ export class ColorPicker const { dimensions: { slider: { height }, - thumb: { radius } - } + thumb: { radius }, + }, } = this; return radius * 2 - height; @@ -1226,8 +1226,8 @@ export class ColorPicker const context = this.colorFieldRenderingContext; const { dimensions: { - colorField: { height, width } - } + colorField: { height, width }, + }, } = this; context.fillStyle = this.baseColorFieldColor @@ -1275,8 +1275,8 @@ export class ColorPicker private captureColorFieldColor = (x: number, y: number, skipEqual = true): void => { const { dimensions: { - colorField: { height, width } - } + colorField: { height, width }, + }, } = this; const saturation = Math.round((HSV_LIMITS.s / width) * x); const value = Math.round((HSV_LIMITS.v / height) * (height - y)); @@ -1317,7 +1317,7 @@ export class ColorPicker const adjustedSliderDimensions = { width: dimensions.slider.width, height: - dimensions.slider.height + (dimensions.thumb.radius - dimensions.slider.height / 2) * 2 + dimensions.slider.height + (dimensions.thumb.radius - dimensions.slider.height / 2) * 2, }; if (context === "all" || context === "hue-slider") { @@ -1344,8 +1344,8 @@ export class ColorPicker const { dimensions: { colorField: { height, width }, - thumb: { radius } - } + thumb: { radius }, + }, } = this; const x = hsvColor.saturationv() / (HSV_LIMITS.s / width); @@ -1397,8 +1397,8 @@ export class ColorPicker const { dimensions: { slider: { height, width }, - thumb: { radius } - } + thumb: { radius }, + }, } = this; const x = hsvColor.hue() / (360 / width); @@ -1416,8 +1416,8 @@ export class ColorPicker const { dimensions: { slider: { height, width }, - thumb: { radius: thumbRadius } - } + thumb: { radius: thumbRadius }, + }, } = this; const x = 0; @@ -1455,8 +1455,8 @@ export class ColorPicker baseColorFieldColor: previousColor, dimensions: { slider: { height, width }, - thumb: { radius: thumbRadius } - } + thumb: { radius: thumbRadius }, + }, } = this; const x = 0; @@ -1543,8 +1543,8 @@ export class ColorPicker const { dimensions: { slider: { width }, - thumb: { radius } - } + thumb: { radius }, + }, } = this; const x = alphaToOpacity(hsvColor.alpha()) / (OPACITY_LIMITS.max / width); @@ -1568,7 +1568,7 @@ export class ColorPicker ArrowUp: 1, ArrowRight: 1, ArrowDown: -1, - ArrowLeft: -1 + ArrowLeft: -1, }; if (arrowKeyToXOffset[key]) { diff --git a/packages/calcite-components/src/components/color-picker/resources.ts b/packages/calcite-components/src/components/color-picker/resources.ts index 28b2418ca00..d32fed5a4e0 100644 --- a/packages/calcite-components/src/components/color-picker/resources.ts +++ b/packages/calcite-components/src/components/color-picker/resources.ts @@ -30,7 +30,7 @@ export const CSS = { section: "section", slider: "slider", sliders: "sliders", - splitSection: "section--split" + splitSection: "section--split", }; export const DEFAULT_COLOR = Color("#007AC2"); @@ -39,58 +39,58 @@ export const DEFAULT_STORAGE_KEY_PREFIX = "calcite-color-"; export const RGB_LIMITS = { r: 255, g: 255, - b: 255 + b: 255, }; export const HSV_LIMITS = { h: 360, s: 100, - v: 100 + v: 100, }; export const OPACITY_LIMITS = { min: 0, - max: 100 + max: 100, }; export const DIMENSIONS = { s: { slider: { height: 12, - width: 104 + width: 104, }, colorField: { height: 80, - width: 160 + width: 160, }, thumb: { - radius: 10 - } + radius: 10, + }, }, m: { slider: { height: 12, - width: 204 + width: 204, }, colorField: { height: 150, - width: 272 + width: 272, }, thumb: { - radius: 10 - } + radius: 10, + }, }, l: { slider: { height: 12, - width: 384 + width: 384, }, colorField: { height: 200, - width: 464 + width: 464, }, thumb: { - radius: 10 - } - } + radius: 10, + }, + }, }; diff --git a/packages/calcite-components/src/components/color-picker/utils.spec.ts b/packages/calcite-components/src/components/color-picker/utils.spec.ts index ed81e9484b7..907a6b0e0da 100644 --- a/packages/calcite-components/src/components/color-picker/utils.spec.ts +++ b/packages/calcite-components/src/components/color-picker/utils.spec.ts @@ -6,7 +6,7 @@ import { isValidHex, normalizeHex, parseMode, - rgbToHex + rgbToHex, } from "./utils"; import Color from "color"; @@ -52,7 +52,7 @@ describe("utils", () => { rgbToHex({ r: 0, g: 255, - b: 0 + b: 0, }) ).toBe("#00ff00"); @@ -61,7 +61,7 @@ describe("utils", () => { r: 0, g: 255, b: 0, - a: 1 + a: 1, }) ).toBe("#00ff00ff"); }); diff --git a/packages/calcite-components/src/components/color-picker/utils.ts b/packages/calcite-components/src/components/color-picker/utils.ts index 36992aaf31e..2a031636705 100644 --- a/packages/calcite-components/src/components/color-picker/utils.ts +++ b/packages/calcite-components/src/components/color-picker/utils.ts @@ -133,7 +133,7 @@ export const CSSColorMode = enumify({ RGB_CSS: "rgb-css", RGBA_CSS: "rgba-css", HSL_CSS: "hsl-css", - HSLA_CSS: "hsla-css" + HSLA_CSS: "hsla-css", }); type CSSColorMode = Enumify; @@ -143,7 +143,7 @@ export const ObjectColorMode = enumify({ HSL: "hsl", HSLA: "hsla", HSV: "hsv", - HSVA: "hsva" + HSVA: "hsva", }); type ObjectColorMode = Enumify; diff --git a/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.tsx b/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.tsx index 4deb7d983c1..6578f1fcb5e 100644 --- a/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.tsx +++ b/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.tsx @@ -12,7 +12,7 @@ import { CSS } from "./resources"; @Component({ tag: "calcite-combobox-item-group", styleUrl: "combobox-item-group.scss", - shadow: true + shadow: true, }) export class ComboboxItemGroup { // -------------------------------------------------------------------------- diff --git a/packages/calcite-components/src/components/combobox-item-group/resources.ts b/packages/calcite-components/src/components/combobox-item-group/resources.ts index 7bf6797cfbd..9e2cbd2d1a9 100644 --- a/packages/calcite-components/src/components/combobox-item-group/resources.ts +++ b/packages/calcite-components/src/components/combobox-item-group/resources.ts @@ -1,5 +1,5 @@ export const CSS = { list: "list", label: "label", - title: "title" + title: "title", }; diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx index 698bad70a0b..fc0eaf2b02a 100644 --- a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx +++ b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx @@ -7,12 +7,12 @@ import { Host, Prop, VNode, - Watch + Watch, } from "@stencil/core"; import { ConditionalSlotComponent, connectConditionalSlotComponent, - disconnectConditionalSlotComponent + disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot"; import { getElementProp, getSlotted } from "../../utils/dom"; import { guid } from "../../utils/guid"; @@ -20,7 +20,7 @@ import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { ComboboxChildElement } from "../combobox/interfaces"; import { getAncestors, getDepth } from "../combobox/utils"; @@ -33,7 +33,7 @@ import { CSS } from "./resources"; @Component({ tag: "calcite-combobox-item", styleUrl: "combobox-item.scss", - shadow: true + shadow: true, }) export class ComboboxItem implements ConditionalSlotComponent, InteractiveComponent { // -------------------------------------------------------------------------- @@ -159,7 +159,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon class={{ [CSS.custom]: !!this.icon, [CSS.iconActive]: this.icon && this.selected, - [CSS.iconIndent]: true + [CSS.iconIndent]: true, }} flipRtl={this.iconFlipRtl} icon={this.icon || iconPath} @@ -175,7 +175,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon class={{ [CSS.icon]: true, [CSS.dot]: true, - [CSS.iconIndent]: true + [CSS.iconIndent]: true, }} /> ) : ( @@ -183,7 +183,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon class={{ [CSS.icon]: true, [CSS.iconActive]: this.selected, - [CSS.iconIndent]: true + [CSS.iconIndent]: true, }} flipRtl={this.iconFlipRtl} icon={iconPath} @@ -215,7 +215,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon [CSS.label]: true, [CSS.selected]: this.selected, [CSS.active]: this.active, - [CSS.single]: isSingleSelect + [CSS.single]: isSingleSelect, }; const depth = getDepth(this.el); diff --git a/packages/calcite-components/src/components/combobox-item/resources.ts b/packages/calcite-components/src/components/combobox-item/resources.ts index 047475c13e5..13bfcff9342 100644 --- a/packages/calcite-components/src/components/combobox-item/resources.ts +++ b/packages/calcite-components/src/components/combobox-item/resources.ts @@ -9,5 +9,5 @@ export const CSS = { active: "label--active", selected: "label--selected", title: "title", - textContainer: "text-container" + textContainer: "text-container", }; diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index 072db3a3b27..c36564c16ce 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts @@ -9,7 +9,7 @@ import { formAssociated, disabled, t9n, - reflects + reflects, } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; @@ -27,16 +27,16 @@ describe("calcite-combobox", () => { defaults("calcite-combobox", [ { propertyName: "clearDisabled", - defaultValue: false + defaultValue: false, }, { propertyName: "overlayPositioning", - defaultValue: "absolute" + defaultValue: "absolute", }, { propertyName: "flipPlacements", - defaultValue: undefined - } + defaultValue: undefined, + }, ]); }); @@ -44,53 +44,53 @@ describe("calcite-combobox", () => { reflects("calcite-combobox", [ { propertyName: "allowCustomValues", - value: true + value: true, }, { propertyName: "clearDisabled", - value: true + value: true, }, { propertyName: "form", - value: "test-form" + value: "test-form", }, { propertyName: "maxItems", - value: 1 + value: 1, }, { propertyName: "name", - value: "test-name" + value: "test-name", }, { propertyName: "open", - value: true + value: true, }, { // needs to run after `open` since it resets `open` after it's asserted value propertyName: "disabled", - value: true + value: true, }, { propertyName: "placeholderIcon", - value: "banana" + value: "banana", }, { propertyName: "placeholderIconFlipRtl", - value: true + value: true, }, { propertyName: "required", - value: true + value: true, }, { propertyName: "scale", - value: "s" + value: "s", }, { propertyName: "selectionMode", - value: "single" - } + value: "single", + }, ]); }); @@ -144,7 +144,7 @@ describe("calcite-combobox", () => { - ` + `, }); const combobox = await page.find("calcite-combobox"); @@ -171,7 +171,7 @@ describe("calcite-combobox", () => { - ` + `, }); const combobox = await page.find("calcite-combobox"); @@ -556,7 +556,7 @@ describe("calcite-combobox", () => { const page = await newE2EPage({ html: ` - ` + `, }); const eventSpy = await page.spyOnEvent("calciteComboboxChipClose", "window"); @@ -674,7 +674,7 @@ describe("calcite-combobox", () => { - ` + `, }, { selectionMode: "multiple", @@ -684,7 +684,7 @@ describe("calcite-combobox", () => { - ` + `, }, { selectionMode: "ancestors", @@ -695,8 +695,8 @@ describe("calcite-combobox", () => { - ` - } + `, + }, ]; describe("via mouse", () => { @@ -724,7 +724,7 @@ describe("calcite-combobox", () => { - ` + `, }, { selectionMode: "multiple", @@ -734,7 +734,7 @@ describe("calcite-combobox", () => { - ` + `, }, { selectionMode: "ancestors", @@ -745,8 +745,8 @@ describe("calcite-combobox", () => { - ` - } + `, + }, ]; describe("via mouse", () => { @@ -924,7 +924,7 @@ describe("calcite-combobox", () => { margin: 0; padding: 0; } - ` + `, }); const combobox = await page.find("calcite-combobox"); await combobox.callMethod(`setFocus`); diff --git a/packages/calcite-components/src/components/combobox/combobox.stories.ts b/packages/calcite-components/src/components/combobox/combobox.stories.ts index f40685ffdd9..308d1eec3b8 100644 --- a/packages/calcite-components/src/components/combobox/combobox.stories.ts +++ b/packages/calcite-components/src/components/combobox/combobox.stories.ts @@ -8,9 +8,9 @@ import { html } from "../../../support/formatting"; export default { title: "Components/Controls/Combobox", parameters: { - notes: [readme1, readme2] + notes: [readme1, readme2], }, - ...storyFilters() + ...storyFilters(), }; export const simple = (): string => html` @@ -251,7 +251,7 @@ export const flipPositioning_TestOnly = (): string => html`
`; flipPositioning_TestOnly.parameters = { - layout: "fullscreen" + layout: "fullscreen", }; export const darkModeRTL_TestOnly = (): string => html` diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index afb189ad982..e0c6a0061ad 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -10,7 +10,7 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import { debounce } from "lodash-es"; import { filter } from "../../utils/filter"; @@ -26,7 +26,7 @@ import { FloatingUIComponent, LogicalPlacement, OverlayPositioning, - reposition + reposition, } from "../../utils/floating-ui"; import { afterConnectDefaultValueSet, @@ -34,35 +34,35 @@ import { disconnectForm, FormComponent, HiddenFormInputSlot, - submitForm + submitForm, } from "../../utils/form"; import { guid } from "../../utils/guid"; import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label"; import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { connectLocalized, disconnectLocalized } from "../../utils/locale"; import { createObserver } from "../../utils/observers"; import { connectOpenCloseComponent, disconnectOpenCloseComponent, - OpenCloseComponent + OpenCloseComponent, } from "../../utils/openCloseComponent"; import { connectMessages, disconnectMessages, setUpMessages, T9nComponent, - updateMessages + updateMessages, } from "../../utils/t9n"; import { Scale, SelectionMode } from "../interfaces"; import { ComboboxMessages } from "./assets/combobox/t9n"; @@ -92,7 +92,7 @@ const inputUidPrefix = "combobox-input-"; tag: "calcite-combobox", styleUrl: "combobox.scss", shadow: true, - assetsDirs: ["assets"] + assetsDirs: ["assets"], }) export class Combobox implements @@ -338,7 +338,7 @@ export class Combobox overlayPositioning, placement, flipPlacements: filteredFlipPlacements, - type: "menu" + type: "menu", }, delayed ); @@ -977,7 +977,7 @@ export class Combobox return this.items.map((item) => ({ filterDisabled: item.filterDisabled, value: item.value, - label: item.textLabel + label: item.textLabel, })); } @@ -1139,7 +1139,7 @@ export class Combobox return this.selectedItems.map((item, i) => { const chipClasses = { chip: true, - "chip--active": activeChipIndex === i + "chip--active": activeChipIndex === i, }; const ancestors = [...getItemAncestors(item)].reverse(); const pathLabel = [...ancestors, item].map((el) => el.textLabel); @@ -1174,14 +1174,14 @@ export class Combobox {showLabel && ( @@ -1198,7 +1198,7 @@ export class Combobox "input--single": true, "input--transparent": this.activeChipIndex > -1, "input--hidden": showLabel, - "input--icon": !!this.placeholderIcon + "input--icon": !!this.placeholderIcon, }} disabled={disabled} id={`${inputUidPrefix}${guid}`} @@ -1233,7 +1233,7 @@ export class Combobox const classes = { [CSS.listContainer]: true, [FloatingCSS.animation]: true, - [FloatingCSS.animationActive]: open + [FloatingCSS.animationActive]: open, }; return ( @@ -1241,7 +1241,7 @@ export class Combobox aria-hidden="true" class={{ "floating-ui-container": true, - "floating-ui-container--active": open + "floating-ui-container--active": open, }} // eslint-disable-next-line react/jsx-sort-props ref={setFloatingEl} @@ -1311,7 +1311,7 @@ export class Combobox class={{ wrapper: true, "wrapper--single": single || !this.selectedItems.length, - "wrapper--active": open + "wrapper--active": open, }} onClick={this.clickHandler} onKeyDown={this.keyDownHandler} diff --git a/packages/calcite-components/src/components/combobox/resources.ts b/packages/calcite-components/src/components/combobox/resources.ts index 1f023e3fc96..849f016bef3 100644 --- a/packages/calcite-components/src/components/combobox/resources.ts +++ b/packages/calcite-components/src/components/combobox/resources.ts @@ -3,5 +3,5 @@ export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP"; export const ComboboxChildSelector = `${ComboboxItem}, ${ComboboxItemGroup}`; export const CSS = { - listContainer: "list-container" + listContainer: "list-container", }; diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx index 792fd25bc93..b614f8b86a8 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx +++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx @@ -7,7 +7,7 @@ import { Host, Listen, Prop, - VNode + VNode, } from "@stencil/core"; import { dateToISO } from "../../utils/date"; @@ -16,7 +16,7 @@ import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; import { numberStringFormatter } from "../../utils/locale"; @@ -26,7 +26,7 @@ import { Scale } from "../interfaces"; @Component({ tag: "calcite-date-picker-day", styleUrl: "date-picker-day.scss", - shadow: true + shadow: true, }) export class DatePickerDay implements InteractiveComponent { //-------------------------------------------------------------------------- @@ -162,7 +162,7 @@ export class DatePickerDay implements InteractiveComponent { numberStringFormatter.numberFormatOptions = { useGrouping: false, ...(numberingSystem && { numberingSystem }), - ...(locale && { locale }) + ...(locale && { locale }), }; } const formattedDay = numberStringFormatter.localize(String(this.day)); diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.e2e.ts b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.e2e.ts index 0606cf1af9c..8f843a76597 100644 --- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.e2e.ts +++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.e2e.ts @@ -14,7 +14,7 @@ describe("calcite-date-picker-month-header", () => { weekStart: 7, placeholder: "DD/MM/YYYY", days: { - narrow: ["D", "L", "M", "M", "J", "V", "S"] + narrow: ["D", "L", "M", "M", "J", "V", "S"], }, numerals: "0123456789", months: { @@ -32,15 +32,15 @@ describe("calcite-date-picker-month-header", () => { "septiembre", "octubre", "noviembre", - "diciembre" - ] - } + "diciembre", + ], + }, }; it("displays next/previous options", async () => { const page = await newE2EPage({ // intentionally using calcite-date-picker to wire up supporting components to be used in `evaluate` fn below - html: "" + html: "", }); await page.waitForChanges(); @@ -55,7 +55,7 @@ describe("calcite-date-picker-month-header", () => { dateMonthHeader.messages = { nextMonth: "Next month", prevMonth: "Previous month", - year: "Year" + year: "Year", }; document.body.innerHTML = ""; @@ -84,7 +84,7 @@ describe("calcite-date-picker-month-header", () => { dateMonthHeader.messages = { nextMonth: "Next month", prevMonth: "Previous month", - year: "Year" + year: "Year", }; document.body.innerHTML = ""; diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx index 673a22a97ba..bd40861cae0 100644 --- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx +++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx @@ -8,7 +8,7 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import { dateFromRange, @@ -16,7 +16,7 @@ import { getOrder, nextMonth, prevMonth, - formatCalendarYear + formatCalendarYear, } from "../../utils/date"; import { closestElementCrossShadowBoundary } from "../../utils/dom"; @@ -31,7 +31,7 @@ import { CSS, ICON } from "./resources"; @Component({ tag: "calcite-date-picker-month-header", styleUrl: "date-picker-month-header.scss", - shadow: true + shadow: true, }) export class DatePickerMonthHeader { //-------------------------------------------------------------------------- @@ -126,7 +126,7 @@ export class DatePickerMonthHeader { numberStringFormatter.numberFormatOptions = { useGrouping: false, ...(numberingSystem && { numberingSystem }), - ...(locale && { locale }) + ...(locale && { locale }), }; } @@ -162,7 +162,7 @@ export class DatePickerMonthHeader { aria-label={messages.year} class={{ year: true, - [CSS.yearSuffix]: !!suffix + [CSS.yearSuffix]: !!suffix, }} inputmode="numeric" maxlength="4" @@ -257,14 +257,14 @@ export class DatePickerMonthHeader { private onYearChange = (event: Event): void => { this.setYear({ - localizedYear: this.parseCalendarYear((event.target as HTMLInputElement).value) + localizedYear: this.parseCalendarYear((event.target as HTMLInputElement).value), }); }; private onYearInput = (event: Event): void => { this.setYear({ localizedYear: this.parseCalendarYear((event.target as HTMLInputElement).value), - commit: false + commit: false, }); }; @@ -298,7 +298,7 @@ export class DatePickerMonthHeader { private getInRangeDate({ localizedYear, - offset = 0 + offset = 0, }: { localizedYear: string; offset?: number; @@ -329,7 +329,7 @@ export class DatePickerMonthHeader { private setYear({ localizedYear, commit = true, - offset = 0 + offset = 0, }: { localizedYear: string; commit?: boolean; diff --git a/packages/calcite-components/src/components/date-picker-month-header/resources.ts b/packages/calcite-components/src/components/date-picker-month-header/resources.ts index ebc93b28131..c2229b037f2 100644 --- a/packages/calcite-components/src/components/date-picker-month-header/resources.ts +++ b/packages/calcite-components/src/components/date-picker-month-header/resources.ts @@ -5,10 +5,10 @@ export const CSS = { suffix: "suffix", yearSuffix: "year--suffix", yearWrap: "year-wrap", - textReverse: "text--reverse" + textReverse: "text--reverse", }; export const ICON = { chevronLeft: "chevron-left", - chevronRight: "chevron-right" + chevronRight: "chevron-right", }; diff --git a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx index 38b621fb34a..3f79b7af7d8 100644 --- a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx +++ b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx @@ -7,7 +7,7 @@ import { Host, Listen, Prop, - VNode + VNode, } from "@stencil/core"; import { dateFromRange, HoverRange, inRange, sameDate } from "../../utils/date"; import { DateLocaleData } from "../date-picker/utils"; @@ -28,7 +28,7 @@ interface Day { @Component({ tag: "calcite-date-picker-month", styleUrl: "date-picker-month.scss", - shadow: true + shadow: true, }) export class DatePickerMonth { //-------------------------------------------------------------------------- @@ -212,7 +212,7 @@ export class DatePickerMonth { active: false, day, dayInWeek: getDayInWeek(), - date: new Date(year, month - 1, day) + date: new Date(year, month - 1, day), }; }), ...curMonDays.map((day) => { @@ -224,7 +224,7 @@ export class DatePickerMonth { day, dayInWeek: getDayInWeek(), date, - ref: true + ref: true, }; }), ...nextMonDays.map((day) => { @@ -232,9 +232,9 @@ export class DatePickerMonth { active: false, day, dayInWeek: getDayInWeek(), - date: new Date(year, month + 1, day) + date: new Date(year, month + 1, day), }; - }) + }), ]; const weeks: Day[][] = []; @@ -460,7 +460,7 @@ export class DatePickerMonth { "hover--inside-range": this.startDate && isHoverInRange, "hover--outside-range": this.startDate && !isHoverInRange, "focused--start": isFocusedOnStart, - "focused--end": !isFocusedOnStart + "focused--end": !isFocusedOnStart, }} currentMonth={currentMonth} dateTimeFormat={this.dateTimeFormat} diff --git a/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts b/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts index 51c7ccc0912..bb7bac5bb7c 100644 --- a/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts +++ b/packages/calcite-components/src/components/date-picker/date-picker.e2e.ts @@ -17,14 +17,14 @@ describe("calcite-date-picker", () => { defaults("calcite-date-picker", [ { propertyName: "scale", - defaultValue: "m" - } + defaultValue: "m", + }, ]); }); describe("focusable", () => { focusable("calcite-date-picker", { - shadowFocusTargetSelector: "calcite-date-picker-month-header" + shadowFocusTargetSelector: "calcite-date-picker-month-header", }); }); @@ -282,7 +282,7 @@ describe("calcite-date-picker", () => { describe("when the lang is set to Slovak calendar", () => { it("should start the week on Monday", async () => { const page = await newE2EPage({ - html: `` + html: ``, }); await page.waitForChanges(); const text: string = await page.evaluate( @@ -323,7 +323,7 @@ describe("calcite-date-picker", () => { expect(await date.getProperty("messages")).toEqual({ nextMonth: "Next month", prevMonth: "Previous month", - year: "Year" + year: "Year", }); }); diff --git a/packages/calcite-components/src/components/date-picker/date-picker.stories.ts b/packages/calcite-components/src/components/date-picker/date-picker.stories.ts index 1724ccf349e..4236833ad63 100644 --- a/packages/calcite-components/src/components/date-picker/date-picker.stories.ts +++ b/packages/calcite-components/src/components/date-picker/date-picker.stories.ts @@ -7,7 +7,7 @@ import { Attributes, createComponentHTML as create, filterComponentAttributes, - modesDarkDefault + modesDarkDefault, } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; import { locales } from "../../utils/locale"; @@ -21,10 +21,10 @@ export default { chromatic: { // https://www.chromatic.com/docs/threshold diffThreshold: Number(process.env.CHROMATIC_DIFF_THRESHOLD) || 0.3, - delay: 500 - } + delay: 500, + }, }, - ...storyFilters() + ...storyFilters(), }; const testDate = "2020-02-28"; @@ -38,7 +38,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = text("dir", ""); delete this.build; return this; - } + }, }, { name: "lang", @@ -46,7 +46,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = select("lang", locales, "en"); delete this.build; return this; - } + }, }, { name: "max", @@ -54,7 +54,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = text("max", ""); delete this.build; return this; - } + }, }, { name: "min", @@ -62,7 +62,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = text("min", ""); delete this.build; return this; - } + }, }, { name: "next-month-label", @@ -70,7 +70,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = text("next-month-label", ""); delete this.build; return this; - } + }, }, { name: "prev-month-label", @@ -78,7 +78,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = text("prev-month-label", ""); delete this.build; return this; - } + }, }, { name: "range", @@ -86,7 +86,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("range", false); delete this.build; return this; - } + }, }, { name: "scale", @@ -94,7 +94,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = select("scale", scale.values, scale.defaultValue); delete this.build; return this; - } + }, }, { name: "value", @@ -102,8 +102,8 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = text("value", testDate); delete this.build; return this; - } - } + }, + }, ], exceptions ); @@ -118,7 +118,7 @@ export const range = (): string => "calcite-date-picker", createAttributes({ exceptions: ["min", "range"] }).concat([ { name: "min", value: "2016-08-09" }, - { name: "range", value: "true" } + { name: "range", value: "true" }, ]) )}
`; @@ -149,7 +149,7 @@ export const darkModeRTL_TestOnly = (): string => "calcite-date-picker", createAttributes({ exceptions: ["class", "dir"] }).concat([ { name: "dir", value: "rtl" }, - { name: "class", value: "calcite-mode-dark" } + { name: "class", value: "calcite-mode-dark" }, ]) )}
`; @@ -175,7 +175,7 @@ export const germanLang_TestOnly = (): string => "calcite-date-picker", createAttributes({ exceptions: ["lang", "value"] }).concat([ { name: "lang", value: "de" }, - { name: "value", value: "2022-08-11" } + { name: "value", value: "2022-08-11" }, ]) )} `; @@ -186,7 +186,7 @@ export const spanishLang_TestOnly = (): string => "calcite-date-picker", createAttributes({ exceptions: ["lang", "value"] }).concat([ { name: "lang", value: "es" }, - { name: "value", value: "2023-05-11" } + { name: "value", value: "2023-05-11" }, ]) )} `; @@ -197,7 +197,7 @@ export const norwegianLang_TestOnly = (): string => "calcite-date-picker", createAttributes({ exceptions: ["lang", "value"] }).concat([ { name: "lang", value: "nb" }, - { name: "value", value: "2023-05-11" } + { name: "value", value: "2023-05-11" }, ]) )} `; @@ -208,7 +208,7 @@ export const britishLang_TestOnly = (): string => "calcite-date-picker", createAttributes({ exceptions: ["lang", "value"] }).concat([ { name: "lang", value: "en-gb" }, - { name: "value", value: "2024-01-11" } + { name: "value", value: "2024-01-11" }, ]) )} `; @@ -219,7 +219,7 @@ export const chineseLang_TestOnly = (): string => "calcite-date-picker", createAttributes({ exceptions: ["lang", "value"] }).concat([ { name: "lang", value: "zh-cn" }, - { name: "value", value: "2024-01-11" } + { name: "value", value: "2024-01-11" }, ]) )} `; @@ -231,13 +231,13 @@ export const arabLangNumberingSystem_TestOnly = (): string => createAttributes({ exceptions: ["lang", "numberingSystem"] }).concat([ { name: "lang", value: "ar" }, { name: "numbering-system", value: "arab" }, - { name: "value", value: "2022-08-11" } + { name: "value", value: "2022-08-11" }, ]) )} `; arabLangNumberingSystem_TestOnly.parameters = { - chromatic: { diffThreshold: 1 } + chromatic: { diffThreshold: 1 }, }; export const thaiLangNumberingSystem_TestOnly = (): string => @@ -246,7 +246,7 @@ export const thaiLangNumberingSystem_TestOnly = (): string => "calcite-date-picker", createAttributes({ exceptions: ["lang", "numberingSystem"] }).concat([ { name: "lang", value: "th" }, - { name: "numbering-system", value: "thai" } + { name: "numbering-system", value: "thai" }, ]) )} `; diff --git a/packages/calcite-components/src/components/date-picker/date-picker.tsx b/packages/calcite-components/src/components/date-picker/date-picker.tsx index f7d3d3fa6a1..eedf424c83b 100644 --- a/packages/calcite-components/src/components/date-picker/date-picker.tsx +++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx @@ -10,7 +10,7 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import { dateFromISO, @@ -18,13 +18,13 @@ import { dateToISO, getDaysDiff, HoverRange, - setEndOfDay + setEndOfDay, } from "../../utils/date"; import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { connectLocalized, @@ -32,14 +32,14 @@ import { getDateTimeFormat, LocalizedComponent, NumberingSystem, - numberStringFormatter + numberStringFormatter, } from "../../utils/locale"; import { connectMessages, disconnectMessages, setUpMessages, T9nComponent, - updateMessages + updateMessages, } from "../../utils/t9n"; import { HeadingLevel } from "../functional/Heading"; import { DatePickerMessages } from "./assets/date-picker/t9n"; @@ -51,8 +51,8 @@ import { DateLocaleData, getLocaleData, getValueAsDateRange } from "./utils"; tag: "calcite-date-picker", styleUrl: "date-picker.scss", shadow: { - delegatesFocus: true - } + delegatesFocus: true, + }, }) export class DatePicker implements LocalizedComponent, LoadableComponent, T9nComponent { //-------------------------------------------------------------------------- @@ -363,7 +363,7 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom numberStringFormatter.numberFormatOptions = { numberingSystem: this.numberingSystem, locale: this.effectiveLocale, - useGrouping: false + useGrouping: false, }; this.localeData = await getLocaleData(this.effectiveLocale); @@ -412,7 +412,7 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom this.hoverRange = { focused: this.activeRange || "start", start, - end + end, }; if (!this.proximitySelectionDisabled) { if (end) { @@ -437,7 +437,7 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom this.hoverRange = { focused: "start", start: date, - end: start + end: start, }; } else { this.hoverRange.end = date; @@ -451,7 +451,7 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom this.hoverRange = { focused: "start", start: date, - end: start + end: start, }; } else { this.hoverRange.end = date; @@ -514,7 +514,7 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom scale={this.scale} selectedDate={this.activeRange === "end" ? endDate : date} startDate={this.range ? date : undefined} - /> + />, ] ); } diff --git a/packages/calcite-components/src/components/date-picker/utils.spec.ts b/packages/calcite-components/src/components/date-picker/utils.spec.ts index c01c4d2f531..31e3f588e79 100644 --- a/packages/calcite-components/src/components/date-picker/utils.spec.ts +++ b/packages/calcite-components/src/components/date-picker/utils.spec.ts @@ -4,7 +4,7 @@ function fetchFakeData(data: any): () => Promise { return () => new Promise((resolve) => { resolve({ - json: () => Promise.resolve({ data }) + json: () => Promise.resolve({ data }), }); }); } diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx b/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx index d3d5f5fdebe..d9ef9ac4b0a 100644 --- a/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx +++ b/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx @@ -7,7 +7,7 @@ import { Host, Listen, Prop, - VNode + VNode, } from "@stencil/core"; import { getElementProp } from "../../utils/dom"; import { Scale, SelectionMode } from "../interfaces"; @@ -20,8 +20,8 @@ import { CSS } from "./resources"; tag: "calcite-dropdown-group", styleUrl: "dropdown-group.scss", shadow: { - delegatesFocus: true - } + delegatesFocus: true, + }, }) export class DropdownGroup { //-------------------------------------------------------------------------- @@ -93,7 +93,7 @@ export class DropdownGroup { container: true, [CSS.containerSmall]: scale === "s", [CSS.containerMedium]: scale === "m", - [CSS.containerLarge]: scale === "l" + [CSS.containerLarge]: scale === "l", }} title={this.groupTitle} > @@ -117,7 +117,7 @@ export class DropdownGroup { this.requestedDropdownItem = event.detail.requestedDropdownItem; this.calciteInternalDropdownItemChange.emit({ requestedDropdownGroup: this.requestedDropdownGroup, - requestedDropdownItem: this.requestedDropdownItem + requestedDropdownItem: this.requestedDropdownItem, }); } diff --git a/packages/calcite-components/src/components/dropdown-group/resources.ts b/packages/calcite-components/src/components/dropdown-group/resources.ts index 6b8261b0769..66b8bb5ddda 100644 --- a/packages/calcite-components/src/components/dropdown-group/resources.ts +++ b/packages/calcite-components/src/components/dropdown-group/resources.ts @@ -1,5 +1,5 @@ export const CSS = { containerSmall: "container--s", containerMedium: "container--m", - containerLarge: "container--l" + containerLarge: "container--l", }; diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx index d8135690468..a7e3884eabd 100644 --- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx +++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx @@ -8,7 +8,7 @@ import { Listen, Method, Prop, - VNode + VNode, } from "@stencil/core"; import { getElementProp, toAriaBoolean } from "../../utils/dom"; import { ItemKeyboardEvent } from "../dropdown/interfaces"; @@ -19,7 +19,7 @@ import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; /** @@ -28,7 +28,7 @@ import { @Component({ tag: "calcite-dropdown-item", styleUrl: "dropdown-item.scss", - shadow: true + shadow: true, }) export class DropdownItem implements LoadableComponent { //-------------------------------------------------------------------------- @@ -198,7 +198,7 @@ export class DropdownItem implements LoadableComponent { [CSS.containerLarge]: scale === "l", [CSS.containerMulti]: selectionMode === "multiple", [CSS.containerSingle]: selectionMode === "single", - [CSS.containerNone]: selectionMode === "none" + [CSS.containerNone]: selectionMode === "none", }} > {selectionMode !== "none" ? ( @@ -328,7 +328,7 @@ export class DropdownItem implements LoadableComponent { this.calciteDropdownItemSelect.emit(); this.calciteInternalDropdownItemSelect.emit({ requestedDropdownItem: this.el, - requestedDropdownGroup: this.parentDropdownGroupEl + requestedDropdownGroup: this.parentDropdownGroupEl, }); } } diff --git a/packages/calcite-components/src/components/dropdown-item/resources.ts b/packages/calcite-components/src/components/dropdown-item/resources.ts index 6a7d999ea86..a6be186345d 100644 --- a/packages/calcite-components/src/components/dropdown-item/resources.ts +++ b/packages/calcite-components/src/components/dropdown-item/resources.ts @@ -10,5 +10,5 @@ export const CSS = { iconEnd: "dropdown-item-icon-end", iconStart: "dropdown-item-icon-start", itemContent: "dropdown-item-content", - link: "dropdown-link" + link: "dropdown-link", }; diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts index b941e59b113..07c3cdfbca6 100644 --- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts +++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts @@ -17,7 +17,7 @@ const simpleDropdownHTML = html` describe("calcite-dropdown", () => { describe("focusable", () => { focusable(simpleDropdownHTML, { - focusTargetSelector: '[slot="trigger"]' + focusTargetSelector: '[slot="trigger"]', }); }); @@ -33,12 +33,12 @@ describe("calcite-dropdown", () => { defaults("calcite-dropdown", [ { propertyName: "overlayPositioning", - defaultValue: "absolute" + defaultValue: "absolute", }, { propertyName: "flipPlacements", - defaultValue: undefined - } + defaultValue: undefined, + }, ]); }); @@ -46,8 +46,8 @@ describe("calcite-dropdown", () => { disabled(simpleDropdownHTML, { focusTarget: { tab: "calcite-button", - click: "calcite-dropdown-item" - } + click: "calcite-dropdown-item", + }, }); }); @@ -249,21 +249,21 @@ describe("calcite-dropdown", () => { await item1.click(); await page.waitForChanges(); await assertSelectedItems(page, { - expectedItemIds: ["item-1", "item-2"] + expectedItemIds: ["item-1", "item-2"], }); await trigger.click(); await page.waitForChanges(); await item2.click(); await page.waitForChanges(); await assertSelectedItems(page, { - expectedItemIds: ["item-1"] + expectedItemIds: ["item-1"], }); await trigger.click(); await page.waitForChanges(); await item3.click(); await page.waitForChanges(); await assertSelectedItems(page, { - expectedItemIds: ["item-1", "item-3"] + expectedItemIds: ["item-1", "item-3"], }); expect(item1).toHaveAttribute("selected"); @@ -298,14 +298,14 @@ describe("calcite-dropdown", () => { await item1.click(); await page.waitForChanges(); await assertSelectedItems(page, { - expectedItemIds: ["item-1"] + expectedItemIds: ["item-1"], }); await trigger.click(); await page.waitForChanges(); await item3.click(); await page.waitForChanges(); await assertSelectedItems(page, { - expectedItemIds: ["item-3"] + expectedItemIds: ["item-3"], }); expect(item1).not.toHaveAttribute("selected"); @@ -401,49 +401,49 @@ describe("calcite-dropdown", () => { await item1.click(); await page.waitForChanges(); await assertSelectedItems(page, { - expectedItemIds: ["item-1", "item-2", "item-5"] + expectedItemIds: ["item-1", "item-2", "item-5"], }); await trigger.click(); await page.waitForChanges(); await item2.click(); await page.waitForChanges(); await assertSelectedItems(page, { - expectedItemIds: ["item-1", "item-5"] + expectedItemIds: ["item-1", "item-5"], }); await trigger.click(); await page.waitForChanges(); await item3.click(); await page.waitForChanges(); await assertSelectedItems(page, { - expectedItemIds: ["item-1", "item-3", "item-5"] + expectedItemIds: ["item-1", "item-3", "item-5"], }); await trigger.click(); await page.waitForChanges(); await item4.click(); await page.waitForChanges(); await assertSelectedItems(page, { - expectedItemIds: ["item-1", "item-3", "item-4"] + expectedItemIds: ["item-1", "item-3", "item-4"], }); await trigger.click(); await page.waitForChanges(); await item6.click(); await page.waitForChanges(); await assertSelectedItems(page, { - expectedItemIds: ["item-1", "item-3", "item-6"] + expectedItemIds: ["item-1", "item-3", "item-6"], }); await trigger.click(); await page.waitForChanges(); await item7.click(); await page.waitForChanges(); await assertSelectedItems(page, { - expectedItemIds: ["item-1", "item-3", "item-6"] + expectedItemIds: ["item-1", "item-3", "item-6"], }); await trigger.click(); await page.waitForChanges(); await item9.click(); await page.waitForChanges(); await assertSelectedItems(page, { - expectedItemIds: ["item-1", "item-3", "item-6"] + expectedItemIds: ["item-1", "item-3", "item-6"], }); expect(item1).toHaveAttribute("selected"); @@ -487,7 +487,7 @@ describe("calcite-dropdown", () => { 3 4 - ` + `, }); const element = await page.find("calcite-dropdown"); @@ -507,7 +507,7 @@ describe("calcite-dropdown", () => { 3 4 - ` + `, }); const element = await page.find("calcite-dropdown"); @@ -528,7 +528,7 @@ describe("calcite-dropdown", () => { 3 4 - ` + `, }); const element = await page.find("calcite-dropdown"); @@ -621,7 +621,7 @@ describe("calcite-dropdown", () => { 9 10 - ` + `, }); const element = await page.find("calcite-dropdown"); @@ -975,7 +975,7 @@ describe("calcite-dropdown", () => { const page = await newE2EPage({ // load page with the dropdown template, // so they're available in the browser-evaluated fn below - html: wrappedDropdownTemplateHTML + html: wrappedDropdownTemplateHTML, }); await page.waitForChanges(); @@ -1030,7 +1030,7 @@ describe("calcite-dropdown", () => { - ` + `, }); await page.waitForChanges(); @@ -1062,7 +1062,7 @@ describe("calcite-dropdown", () => { - ` + `, }); await page.waitForChanges(); @@ -1093,7 +1093,7 @@ describe("calcite-dropdown", () => { `, "open", { - shadowSelector: ".calcite-dropdown-wrapper" + shadowSelector: ".calcite-dropdown-wrapper", } ); }); diff --git a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts index 140d4c3ce86..c86923adf12 100644 --- a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts +++ b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts @@ -12,10 +12,10 @@ export default { parameters: { notes: [readme1, readme2, readme3], chromatic: { - delay: 500 - } + delay: 500, + }, }, - ...storyFilters() + ...storyFilters(), }; export const simple = (): string => html` @@ -293,7 +293,7 @@ export const scrollingAfterCertainItems_TestOnly = (): string => html` `; scrollingAfterCertainItems_TestOnly.parameters = { - chromatic: { delay: 1500 } + chromatic: { delay: 1500 }, }; export const scrollingWithoutMaxItems_TestOnly = (): string => html` @@ -386,7 +386,7 @@ export const flipPositioning_TestOnly = (): string => html` `; flipPositioning_TestOnly.parameters = { - layout: "fullscreen" + layout: "fullscreen", }; export const alignedCenter_TestOnly = (): string => html` diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx index 4c53fc0202f..c7cd92f1aca 100644 --- a/packages/calcite-components/src/components/dropdown/dropdown.tsx +++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx @@ -9,7 +9,7 @@ import { Method, Prop, VNode, - Watch + Watch, } from "@stencil/core"; import { ItemKeyboardEvent } from "./interfaces"; @@ -17,7 +17,7 @@ import { focusElement, focusElementInGroup, isPrimaryPointerButton, - toAriaBoolean + toAriaBoolean, } from "../../utils/dom"; import { connectFloatingUI, @@ -29,27 +29,27 @@ import { FloatingUIComponent, MenuPlacement, OverlayPositioning, - reposition + reposition, } from "../../utils/floating-ui"; import { guid } from "../../utils/guid"; import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { isActivationKey } from "../../utils/key"; import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { createObserver } from "../../utils/observers"; import { connectOpenCloseComponent, disconnectOpenCloseComponent, - OpenCloseComponent + OpenCloseComponent, } from "../../utils/openCloseComponent"; import { RequestedItem } from "../dropdown-group/interfaces"; import { Scale } from "../interfaces"; @@ -63,8 +63,8 @@ import { SLOTS } from "./resources"; tag: "calcite-dropdown", styleUrl: "dropdown.scss", shadow: { - delegatesFocus: true - } + delegatesFocus: true, + }, }) export class Dropdown implements InteractiveComponent, LoadableComponent, OpenCloseComponent, FloatingUIComponent @@ -273,7 +273,7 @@ export class Dropdown class={{ ["calcite-dropdown-content"]: true, [FloatingCSS.animation]: true, - [FloatingCSS.animationActive]: open + [FloatingCSS.animationActive]: open, }} id={`${guid}-menu`} role="menu" @@ -310,7 +310,7 @@ export class Dropdown overlayPositioning, placement, flipPlacements: filteredFlipPlacements, - type: "menu" + type: "menu", }, delayed ); @@ -469,7 +469,7 @@ export class Dropdown slotChangeHandler = (event: Event): void => { this.defaultAssignedElements = (event.target as HTMLSlotElement).assignedElements({ - flatten: true + flatten: true, }); this.updateItems(); @@ -485,7 +485,7 @@ export class Dropdown updateTriggers = (event: Event): void => { this.triggers = (event.target as HTMLSlotElement).assignedElements({ - flatten: true + flatten: true, }) as HTMLElement[]; this.reposition(true); diff --git a/packages/calcite-components/src/components/dropdown/resources.ts b/packages/calcite-components/src/components/dropdown/resources.ts index 9b1dc062f41..f241e05be2c 100644 --- a/packages/calcite-components/src/components/dropdown/resources.ts +++ b/packages/calcite-components/src/components/dropdown/resources.ts @@ -1,7 +1,7 @@ export const SLOTS = { - dropdownTrigger: "trigger" + dropdownTrigger: "trigger", }; export const CSS = { - calciteDropdownContent: "calcite-dropdown-content" + calciteDropdownContent: "calcite-dropdown-content", }; diff --git a/packages/calcite-components/src/components/fab/fab.e2e.ts b/packages/calcite-components/src/components/fab/fab.e2e.ts index d632a981033..08d897923ee 100755 --- a/packages/calcite-components/src/components/fab/fab.e2e.ts +++ b/packages/calcite-components/src/components/fab/fab.e2e.ts @@ -15,12 +15,12 @@ describe("calcite-fab", () => { defaults("calcite-fab", [ { propertyName: "scale", - defaultValue: "m" + defaultValue: "m", }, { propertyName: "appearance", - defaultValue: "solid" - } + defaultValue: "solid", + }, ]); }); @@ -30,7 +30,7 @@ describe("calcite-fab", () => { it(`should set all internal calcite-button types to 'button'`, async () => { const page = await newE2EPage({ - html: "" + html: "", }); const buttons = await page.findAll("calcite-fab >>> calcite-button"); @@ -123,7 +123,7 @@ describe("calcite-fab", () => { text-enabled appearance="transparent" > - ` + `, }); const fab = await page.find(`calcite-fab >>> .${CSS.button}`); expect(fab.getAttribute("appearance")).toBe("outline-fill"); @@ -139,7 +139,7 @@ describe("calcite-fab", () => { text-enabled appearance="outline" > - ` + `, }); const fab = await page.find(`calcite-fab >>> .${CSS.button}`); expect(fab.getAttribute("appearance")).toBe("outline-fill"); diff --git a/packages/calcite-components/src/components/fab/fab.stories.ts b/packages/calcite-components/src/components/fab/fab.stories.ts index 57d61f01c37..fc7008a9ac9 100644 --- a/packages/calcite-components/src/components/fab/fab.stories.ts +++ b/packages/calcite-components/src/components/fab/fab.stories.ts @@ -4,7 +4,7 @@ import { Attributes, createComponentHTML as create, filterComponentAttributes, - modesDarkDefault + modesDarkDefault, } from "../../../.storybook/utils"; import readme from "./readme.md"; import { ATTRIBUTES } from "../../../.storybook/resources"; @@ -16,9 +16,9 @@ const { scale } = ATTRIBUTES; export default { title: "Components/Buttons/FAB", parameters: { - notes: readme + notes: readme, }, - ...storyFilters() + ...storyFilters(), }; const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { @@ -30,7 +30,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = select("appearance", ["solid", "outline-fill"], "outline-fill"); delete this.build; return this; - } + }, }, { name: "disabled", @@ -38,7 +38,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("disabled", false); delete this.build; return this; - } + }, }, { name: "icon", @@ -46,7 +46,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = text("icon", ICONS.plus); delete this.build; return this; - } + }, }, { name: "label", @@ -54,7 +54,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = text("label", "Label"); delete this.build; return this; - } + }, }, { name: "loading", @@ -62,7 +62,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("loading", false); delete this.build; return this; - } + }, }, { name: "text", @@ -70,7 +70,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = text("text", "Text"); delete this.build; return this; - } + }, }, { name: "text-enabled", @@ -78,7 +78,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("text-enabled", true); delete this.build; return this; - } + }, }, { name: "scale", @@ -86,8 +86,8 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = select("scale", scale.values, scale.defaultValue); delete this.build; return this; - } - } + }, + }, ], exceptions ); @@ -102,12 +102,12 @@ export const darkModeRTL_TestOnly = (): string => createAttributes({ exceptions: ["dir", "class"] }).concat([ { name: "dir", - value: "rtl" + value: "rtl", }, { name: "class", - value: "calcite-mode-dark" - } + value: "calcite-mode-dark", + }, ]) ); diff --git a/packages/calcite-components/src/components/fab/fab.tsx b/packages/calcite-components/src/components/fab/fab.tsx index c7fd410c805..2765fc4e74f 100755 --- a/packages/calcite-components/src/components/fab/fab.tsx +++ b/packages/calcite-components/src/components/fab/fab.tsx @@ -4,13 +4,13 @@ import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { Appearance, Kind, Scale } from "../interfaces"; import { CSS, ICONS } from "./resources"; @@ -18,7 +18,7 @@ import { CSS, ICONS } from "./resources"; @Component({ tag: "calcite-fab", styleUrl: "fab.scss", - shadow: true + shadow: true, }) export class Fab implements InteractiveComponent, LoadableComponent { // -------------------------------------------------------------------------- @@ -145,7 +145,7 @@ export class Fab implements InteractiveComponent, LoadableComponent { icon, label, text, - iconFlipRtl + iconFlipRtl, } = this; const title = !textEnabled ? label || text || null : null; diff --git a/packages/calcite-components/src/components/fab/resources.ts b/packages/calcite-components/src/components/fab/resources.ts index ebeaa7dadcc..0c4a877faa9 100644 --- a/packages/calcite-components/src/components/fab/resources.ts +++ b/packages/calcite-components/src/components/fab/resources.ts @@ -1,7 +1,7 @@ export const CSS = { - button: "button" + button: "button", }; export const ICONS = { - plus: "plus" + plus: "plus", }; diff --git a/packages/calcite-components/src/components/filter/filter.e2e.ts b/packages/calcite-components/src/components/filter/filter.e2e.ts index ec3dd9b492b..7b6aec14757 100644 --- a/packages/calcite-components/src/components/filter/filter.e2e.ts +++ b/packages/calcite-components/src/components/filter/filter.e2e.ts @@ -28,12 +28,12 @@ describe("calcite-filter", () => { reflects("calcite-filter", [ { propertyName: "disabled", - value: true + value: true, }, { propertyName: "scale", - value: "s" - } + value: "s", + }, ]); }); @@ -41,16 +41,16 @@ describe("calcite-filter", () => { defaults("calcite-filter", [ { propertyName: "disabled", - defaultValue: false + defaultValue: false, }, { propertyName: "filteredItems", - defaultValue: [] + defaultValue: [], }, { propertyName: "scale", - defaultValue: "m" - } + defaultValue: "m", + }, ]); }); @@ -151,38 +151,38 @@ describe("calcite-filter", () => { name: "Harry", description: "developer", value: "harry", - metadata: { haircolor: "red", favoriteBand: "MetallicA" } + metadata: { haircolor: "red", favoriteBand: "MetallicA" }, }, { name: "Matt", description: "developer", value: "matt", - metadata: { haircolor: "black", favoriteBand: "Radiohead" } + metadata: { haircolor: "black", favoriteBand: "Radiohead" }, }, { name: "Franco", description: "developer", value: "franco", - metadata: { haircolor: "black", favoriteBand: "The Mars Volta" } + metadata: { haircolor: "black", favoriteBand: "The Mars Volta" }, }, { name: "Katy", description: "engineer", value: "katy", - metadata: { haircolor: "red", favoriteBand: "unknown" } + metadata: { haircolor: "red", favoriteBand: "unknown" }, }, { name: "Jon", description: "developer", value: "jon", - metadata: { haircolor: "brown", favoriteBand: "Hippity Hops" } + metadata: { haircolor: "brown", favoriteBand: "Hippity Hops" }, }, { name: "regex", description: "regex", value: "regex", - metadata: { haircolor: "rainbow", favoriteBand: "regex()" } - } + metadata: { haircolor: "rainbow", favoriteBand: "regex()" }, + }, ]; }); }); @@ -200,7 +200,7 @@ describe("calcite-filter", () => { "franco", "katy", "jon", - "regex" + "regex", ]); const filterChangeEvent = page.waitForEvent("calciteFilterChange"); @@ -260,14 +260,14 @@ describe("calcite-filter", () => { name: "Harry", description: "developer", value: "harry", - metadata: { haircolor: "red", favoriteBand: "MetallicA" } + metadata: { haircolor: "red", favoriteBand: "MetallicA" }, }, { name: "Matt", description: "developer", value: "matt", - metadata: { haircolor: "black", favoriteBand: "Radiohead" } - } + metadata: { haircolor: "black", favoriteBand: "Radiohead" }, + }, ]; }); }); @@ -292,14 +292,14 @@ describe("calcite-filter", () => { name: "Harry", description: "developer", value: "harry", - metadata: { haircolor: "red", favoriteBand: "MetallicA" } + metadata: { haircolor: "red", favoriteBand: "MetallicA" }, }, { name: "Matt", description: "developer", value: "matt", - metadata: { haircolor: "black", favoriteBand: "Radiohead" } - } + metadata: { haircolor: "black", favoriteBand: "Radiohead" }, + }, ]; }); }); diff --git a/packages/calcite-components/src/components/filter/filter.tsx b/packages/calcite-components/src/components/filter/filter.tsx index 1c3065d0fa6..07cd0bd1241 100644 --- a/packages/calcite-components/src/components/filter/filter.tsx +++ b/packages/calcite-components/src/components/filter/filter.tsx @@ -9,7 +9,7 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import { debounce } from "lodash-es"; import { filter } from "../../utils/filter"; @@ -17,13 +17,13 @@ import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { @@ -31,7 +31,7 @@ import { disconnectMessages, setUpMessages, T9nComponent, - updateMessages + updateMessages, } from "../../utils/t9n"; import { Scale } from "../interfaces"; import { FilterMessages } from "./assets/filter/t9n"; @@ -41,9 +41,9 @@ import { CSS, DEBOUNCE_TIMEOUT, ICONS } from "./resources"; tag: "calcite-filter", styleUrl: "filter.scss", shadow: { - delegatesFocus: true + delegatesFocus: true, }, - assetsDirs: ["assets"] + assetsDirs: ["assets"], }) export class Filter implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent diff --git a/packages/calcite-components/src/components/filter/resources.ts b/packages/calcite-components/src/components/filter/resources.ts index 9ff05813270..dcf929a0aa4 100644 --- a/packages/calcite-components/src/components/filter/resources.ts +++ b/packages/calcite-components/src/components/filter/resources.ts @@ -1,11 +1,11 @@ export const CSS = { container: "container", - searchIcon: "search-icon" + searchIcon: "search-icon", }; export const ICONS = { search: "search", - close: "x" + close: "x", }; export const DEBOUNCE_TIMEOUT = 250; diff --git a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts index 9a69c9c3461..c49ab0d463e 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts +++ b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts @@ -16,28 +16,28 @@ describe("calcite-flow-item", () => { defaults("calcite-flow-item", [ { propertyName: "closable", - defaultValue: false + defaultValue: false, }, { propertyName: "closed", - defaultValue: false + defaultValue: false, }, { propertyName: "disabled", - defaultValue: false + defaultValue: false, }, { propertyName: "loading", - defaultValue: false + defaultValue: false, }, { propertyName: "menuOpen", - defaultValue: false + defaultValue: false, }, { propertyName: "showBackButton", - defaultValue: false - } + defaultValue: false, + }, ]); }); @@ -64,7 +64,7 @@ describe("calcite-flow-item", () => { describe("should focus on back button", () => { focusable(`test`, { - shadowFocusTargetSelector: "calcite-action" + shadowFocusTargetSelector: "calcite-action", }); }); @@ -153,7 +153,7 @@ describe("calcite-flow-item", () => { await page.$eval("calcite-flow-item", (panel: HTMLCalcitePanelElement) => panel.scrollContentTo({ top: 0, - behavior: "auto" + behavior: "auto", }) ); @@ -162,7 +162,7 @@ describe("calcite-flow-item", () => { it("honors calciteFlowItemScroll event", async () => { const page = await newE2EPage({ - html: "test" + html: "test", }); const scrollSpy = await page.spyOnEvent("calciteFlowItemScroll"); diff --git a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts index 016b1fd6ca5..5c261b7d6b0 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts +++ b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts @@ -4,7 +4,7 @@ import { createComponentHTML as create, Attribute, filterComponentAttributes, - modesDarkDefault + modesDarkDefault, } from "../../../.storybook/utils"; import { ATTRIBUTES } from "../../../.storybook/resources"; import readme from "./readme.md"; @@ -15,9 +15,9 @@ import { storyFilters } from "../../../.storybook/helpers"; export default { title: "Components/Flow Item", parameters: { - notes: readme + notes: readme, }, - ...storyFilters() + ...storyFilters(), }; const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { @@ -31,7 +31,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("closed", false); delete this.build; return this; - } + }, }, { name: "disabled", @@ -39,7 +39,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("disabled", false); delete this.build; return this; - } + }, }, { name: "closable", @@ -47,7 +47,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("closable", false); delete this.build; return this; - } + }, }, { name: "height-scale", @@ -55,7 +55,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = select("heightScale", scale.values, scale.defaultValue); delete this.build; return this; - } + }, }, { name: "loading", @@ -63,8 +63,8 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("loading", false); delete this.build; return this; - } - } + }, + }, ], exceptions ); @@ -151,12 +151,12 @@ export const darkModeRTL_TestOnly = (): string => createAttributes({ exceptions: ["dir", "class"] }).concat([ { name: "dir", - value: "rtl" + value: "rtl", }, { name: "class", - value: "calcite-mode-dark" - } + value: "calcite-mode-dark", + }, ]), flowItemContent ); diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx index 5fc4745c3b7..c1c5d838fa3 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.tsx +++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx @@ -9,20 +9,20 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import { getElementDir } from "../../utils/dom"; import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { @@ -30,7 +30,7 @@ import { disconnectMessages, setUpMessages, T9nComponent, - updateMessages + updateMessages, } from "../../utils/t9n"; import { HeadingLevel } from "../functional/Heading"; import { SLOTS as PANEL_SLOTS } from "../panel/resources"; @@ -52,7 +52,7 @@ import { CSS, ICONS, SLOTS } from "./resources"; tag: "calcite-flow-item", styleUrl: "flow-item.scss", shadow: true, - assetsDirs: ["assets"] + assetsDirs: ["assets"], }) export class FlowItem implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent @@ -309,7 +309,7 @@ export class FlowItem loading, menuOpen, messages, - backButtonEl + backButtonEl, } = this; const label = messages.back; return ( diff --git a/packages/calcite-components/src/components/flow-item/resources.ts b/packages/calcite-components/src/components/flow-item/resources.ts index 6d738fdf95b..f979e2bb705 100644 --- a/packages/calcite-components/src/components/flow-item/resources.ts +++ b/packages/calcite-components/src/components/flow-item/resources.ts @@ -1,10 +1,10 @@ export const CSS = { - backButton: "back-button" + backButton: "back-button", }; export const ICONS = { backLeft: "chevron-left", - backRight: "chevron-right" + backRight: "chevron-right", }; export const SLOTS = { @@ -15,5 +15,5 @@ export const SLOTS = { headerContent: "header-content", fab: "fab", footer: "footer", - footerActions: "footer-actions" + footerActions: "footer-actions", }; diff --git a/packages/calcite-components/src/components/flow/flow.e2e.ts b/packages/calcite-components/src/components/flow/flow.e2e.ts index ed9e9867937..c3c734ea95e 100755 --- a/packages/calcite-components/src/components/flow/flow.e2e.ts +++ b/packages/calcite-components/src/components/flow/flow.e2e.ts @@ -22,7 +22,7 @@ describe("calcite-flow", () => { Hello World `, { - focusTargetSelector: "#two" + focusTargetSelector: "#two", } ); }); diff --git a/packages/calcite-components/src/components/flow/flow.stories.ts b/packages/calcite-components/src/components/flow/flow.stories.ts index 849cea48bcb..844dee8f73f 100644 --- a/packages/calcite-components/src/components/flow/flow.stories.ts +++ b/packages/calcite-components/src/components/flow/flow.stories.ts @@ -11,10 +11,10 @@ export default { parameters: { notes: { flow: readme, - item: itemReadme - } + item: itemReadme, + }, }, - ...storyFilters() + ...storyFilters(), }; const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { @@ -25,24 +25,24 @@ const createFlowItemAttributes: (group: string) => Attributes = (group) => { return [ { name: "disabled", - value: boolean("disabled", false, group) + value: boolean("disabled", false, group), }, { name: "heading", - value: text("heading", "Heading", group) + value: text("heading", "Heading", group), }, { name: "loading", - value: boolean("loading", false, group) + value: boolean("loading", false, group), }, { name: "menu-open", - value: boolean("menuOpen", false, group) + value: boolean("menuOpen", false, group), }, { name: "description", - value: text("description", "Description", group) - } + value: text("description", "Description", group), + }, ]; }; @@ -153,7 +153,7 @@ export const darkModeRTL_TestOnly = (): string => createAttributes({ exceptions: ["dir"] }).concat( { name: "class", - value: "calcite-mode-dark" + value: "calcite-mode-dark", }, { name: "dir", value: "rtl" } ), diff --git a/packages/calcite-components/src/components/flow/flow.tsx b/packages/calcite-components/src/components/flow/flow.tsx index 40222395191..1ebfe969054 100755 --- a/packages/calcite-components/src/components/flow/flow.tsx +++ b/packages/calcite-components/src/components/flow/flow.tsx @@ -6,7 +6,7 @@ import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; /** @@ -15,7 +15,7 @@ import { @Component({ tag: "calcite-flow", styleUrl: "flow.scss", - shadow: true + shadow: true, }) export class Flow implements LoadableComponent { // -------------------------------------------------------------------------- @@ -167,7 +167,7 @@ export class Flow implements LoadableComponent { const frameDirectionClasses = { [CSS.frame]: true, [CSS.frameAdvancing]: flowDirection === "advancing", - [CSS.frameRetreating]: flowDirection === "retreating" + [CSS.frameRetreating]: flowDirection === "retreating", }; return ( diff --git a/packages/calcite-components/src/components/flow/resources.ts b/packages/calcite-components/src/components/flow/resources.ts index 616205c3c76..933cf467ef3 100644 --- a/packages/calcite-components/src/components/flow/resources.ts +++ b/packages/calcite-components/src/components/flow/resources.ts @@ -1,5 +1,5 @@ export const CSS = { frame: "frame", frameAdvancing: "frame--advancing", - frameRetreating: "frame--retreating" + frameRetreating: "frame--retreating", }; diff --git a/packages/calcite-components/src/components/functional/ExpandToggle.tsx b/packages/calcite-components/src/components/functional/ExpandToggle.tsx index e79d6de16fe..cc2f8820f3d 100644 --- a/packages/calcite-components/src/components/functional/ExpandToggle.tsx +++ b/packages/calcite-components/src/components/functional/ExpandToggle.tsx @@ -18,7 +18,7 @@ interface ExpandToggleProps { const ICONS = { chevronsLeft: "chevrons-left", - chevronsRight: "chevrons-right" + chevronsRight: "chevrons-right", }; function getCalcitePosition(position: Position, el: HTMLElement): Position { @@ -27,7 +27,7 @@ function getCalcitePosition(position: Position, el: HTMLElement): Position { export function toggleChildActionText({ el, - expanded + expanded, }: { el: HTMLElement; expanded: boolean; @@ -44,7 +44,7 @@ const setTooltipReference = ({ tooltip, referenceElement, expanded, - ref + ref, }: { tooltip: HTMLCalciteTooltipElement; referenceElement: HTMLCalciteActionElement; @@ -71,7 +71,7 @@ export const ExpandToggle: FunctionalComponent = ({ position, tooltip, ref, - scale + scale, }) => { const rtl = getElementDir(el) === "rtl"; diff --git a/packages/calcite-components/src/components/functional/FloatingArrow.tsx b/packages/calcite-components/src/components/functional/FloatingArrow.tsx index e2a2a96f110..f7b2f7321e8 100644 --- a/packages/calcite-components/src/components/functional/FloatingArrow.tsx +++ b/packages/calcite-components/src/components/functional/FloatingArrow.tsx @@ -8,13 +8,13 @@ interface FloatingArrowProps extends JSXAttributes { const CSS = { arrow: "calcite-floating-ui-arrow", - arrowStroke: "calcite-floating-ui-arrow__stroke" + arrowStroke: "calcite-floating-ui-arrow__stroke", }; const DEFAULTS = { width: 12, height: 6, - strokeWidth: 1 + strokeWidth: 1, }; /** @@ -32,7 +32,7 @@ const DEFAULTS = { export const FloatingArrow: FunctionalComponent = ({ floatingLayout, key, - ref + ref, }) => { const { width, height, strokeWidth } = DEFAULTS; const svgX = width / 2; diff --git a/packages/calcite-components/src/components/functional/Heading.spec.tsx b/packages/calcite-components/src/components/functional/Heading.spec.tsx index cb5b1a7031f..888bec6d0de 100644 --- a/packages/calcite-components/src/components/functional/Heading.spec.tsx +++ b/packages/calcite-components/src/components/functional/Heading.spec.tsx @@ -21,7 +21,7 @@ describe("Heading", () => { My Heading - ) + ), }); expect(page.root).toEqualHtml(`

My Heading

`); @@ -30,7 +30,7 @@ describe("Heading", () => { it("should render a div", async () => { const page = await newSpecPage({ components: [], - template: () => My Heading + template: () => My Heading, }); expect(page.root).toEqualHtml(`
My Heading
`); diff --git a/packages/calcite-components/src/components/functional/XButton.tsx b/packages/calcite-components/src/components/functional/XButton.tsx index 6f29b3ef9d8..0fdff0c0d20 100644 --- a/packages/calcite-components/src/components/functional/XButton.tsx +++ b/packages/calcite-components/src/components/functional/XButton.tsx @@ -10,7 +10,7 @@ export interface XButtonOptions extends JSXAttributes { } export const CSS = { - button: "x-button" + button: "x-button", }; export function XButton({ @@ -19,7 +19,7 @@ export function XButton({ label, onClick, ref, - scale + scale, }: XButtonOptions): FunctionalComponent { return ( This data was collected over a 24 hour period - ` + `, }, { name: "shadow-component-b", - html: "" - } + html: "", + }, ]; for (let i = 0; i < customComponents.length; i++) { diff --git a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts index 2525c1a2d47..7c4f926c2ad 100644 --- a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts +++ b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts @@ -12,9 +12,9 @@ const referenceElementHTML = `Ut enim ad minim veniam, quis html` diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx index 4b221917173..2a0551d514b 100644 --- a/packages/calcite-components/src/components/tooltip/tooltip.tsx +++ b/packages/calcite-components/src/components/tooltip/tooltip.tsx @@ -9,7 +9,7 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import { toAriaBoolean } from "../../utils/dom"; import { @@ -22,13 +22,13 @@ import { LogicalPlacement, OverlayPositioning, ReferenceElement, - reposition + reposition, } from "../../utils/floating-ui"; import { guid } from "../../utils/guid"; import { connectOpenCloseComponent, disconnectOpenCloseComponent, - OpenCloseComponent + OpenCloseComponent, } from "../../utils/openCloseComponent"; import { ARIA_DESCRIBED_BY, CSS } from "./resources"; @@ -44,7 +44,7 @@ const manager = new TooltipManager(); @Component({ tag: "calcite-tooltip", styleUrl: "tooltip.scss", - shadow: true + shadow: true, }) export class Tooltip implements FloatingUIComponent, OpenCloseComponent { // -------------------------------------------------------------------------- @@ -221,7 +221,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent { overlayPositioning, offsetDistance, offsetSkidding, - arrowEl + arrowEl, } = this; return reposition( @@ -234,7 +234,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent { offsetDistance, offsetSkidding, arrowEl, - type: "tooltip" + type: "tooltip", }, delayed ); @@ -275,7 +275,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent { const { el, referenceElement, effectiveReferenceElement } = this; if (warn && referenceElement && !effectiveReferenceElement) { console.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, { - el + el, }); } @@ -339,7 +339,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
{ defaults("calcite-tree-item", [ { propertyName: "selected", - defaultValue: false + defaultValue: false, }, { propertyName: "expanded", - defaultValue: false + defaultValue: false, }, { propertyName: "parentExpanded", - defaultValue: false + defaultValue: false, }, { propertyName: "depth", - defaultValue: 0 + defaultValue: 0, }, { propertyName: "hasChildren", - defaultValue: false + defaultValue: false, }, { propertyName: "indeterminate", - defaultValue: false - } + defaultValue: false, + }, ]); }); @@ -374,7 +374,7 @@ describe("calcite-tree-item", () => { - ` + `, }); await page.keyboard.press("Tab"); @@ -405,7 +405,7 @@ describe("calcite-tree-item", () => { - ` + `, }); await page.keyboard.press("Tab"); diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx index b7733e7323b..04d3c10c0d3 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.tsx +++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx @@ -9,7 +9,7 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import { slotChangeHasAssignedElement, @@ -17,18 +17,18 @@ import { getElementDir, getSlotted, nodeListToArray, - toAriaBoolean + toAriaBoolean, } from "../../utils/dom"; import { ConditionalSlotComponent, connectConditionalSlotComponent, - disconnectConditionalSlotComponent + disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot"; import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { CSS_UTILITY } from "../../utils/resources"; import { FlipContext, Scale, SelectionMode } from "../interfaces"; @@ -43,7 +43,7 @@ import { CSS, ICONS, SLOTS } from "./resources"; @Component({ tag: "calcite-tree-item", styleUrl: "tree-item.scss", - shadow: true + shadow: true, }) export class TreeItem implements ConditionalSlotComponent, InteractiveComponent { //-------------------------------------------------------------------------- @@ -202,7 +202,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent { const items = getSlotted(el, SLOTS.children, { all: true, - selector: "calcite-tree-item" + selector: "calcite-tree-item", }); items.forEach((item) => (item.parentExpanded = expanded)); }; diff --git a/packages/calcite-components/src/components/tree/tree.e2e.ts b/packages/calcite-components/src/components/tree/tree.e2e.ts index adf96e48eb9..10bfb8c06a6 100644 --- a/packages/calcite-components/src/components/tree/tree.e2e.ts +++ b/packages/calcite-components/src/components/tree/tree.e2e.ts @@ -21,16 +21,16 @@ describe("calcite-tree", () => { defaults("calcite-tree", [ { propertyName: "lines", - defaultValue: false + defaultValue: false, }, { propertyName: "scale", - defaultValue: "m" + defaultValue: "m", }, { propertyName: "selectionMode", - defaultValue: "single" - } + defaultValue: "single", + }, ]); }); @@ -41,7 +41,7 @@ describe("calcite-tree", () => { 1 2 3 - ` + `, }); await page.keyboard.press("Tab"); @@ -55,7 +55,7 @@ describe("calcite-tree", () => { 1 2 3 - ` + `, }); await page.keyboard.press("Tab"); @@ -72,7 +72,7 @@ describe("calcite-tree", () => { const page = await newE2EPage({ html: html` 1 - ` + `, }); await page.keyboard.press("Tab"); @@ -223,7 +223,7 @@ describe("calcite-tree", () => { Three - ` + `, }); const tree = await page.find("calcite-tree"); @@ -263,7 +263,7 @@ describe("calcite-tree", () => { - ` + `, }); await page.waitForChanges(); @@ -324,7 +324,7 @@ describe("calcite-tree", () => { html: html` 1 2 - ` + `, }); const tree = await page.find("calcite-tree"); @@ -389,7 +389,7 @@ describe("calcite-tree", () => { const page = await newE2EPage({ html: html` 1 - ` + `, }); const tree = await page.find("calcite-tree"); @@ -411,7 +411,7 @@ describe("calcite-tree", () => { 1 2 - ` + `, }); const checkbox = await page.find( `calcite-tree-item >>> .${CSS.nodeContainer} .${CSS.checkboxLabel} .${CSS.checkbox}` @@ -466,7 +466,7 @@ describe("calcite-tree", () => { -
` + `, }); const container = await page.find("#container"); @@ -499,7 +499,7 @@ describe("calcite-tree", () => { - ` + `, }); const container = await page.find("#container"); @@ -532,7 +532,7 @@ describe("calcite-tree", () => { - ` + `, }); const container = await page.find("#container"); @@ -593,7 +593,7 @@ describe("calcite-tree", () => { - ` + `, }); const parentEl = await page.find(`#${parent}`); @@ -707,7 +707,7 @@ describe("calcite-tree", () => { Root Item 3 - ` + `, }); const container = await page.find("#container"); diff --git a/packages/calcite-components/src/components/tree/tree.stories.ts b/packages/calcite-components/src/components/tree/tree.stories.ts index 067b94d33cd..008fad0a6bc 100644 --- a/packages/calcite-components/src/components/tree/tree.stories.ts +++ b/packages/calcite-components/src/components/tree/tree.stories.ts @@ -159,10 +159,10 @@ export default { parameters: { notes: [readme, treeItemReadme], chromatic: { - delay: 1000 - } + delay: 1000, + }, }, - ...storyFilters() + ...storyFilters(), }; const selectionModes = ["single", "children", "multichildren", "ancestors", "none", "multiple"]; diff --git a/packages/calcite-components/src/components/tree/tree.tsx b/packages/calcite-components/src/components/tree/tree.tsx index 724cb4e5113..77165d47654 100644 --- a/packages/calcite-components/src/components/tree/tree.tsx +++ b/packages/calcite-components/src/components/tree/tree.tsx @@ -7,7 +7,7 @@ import { Host, Listen, Prop, - VNode + VNode, } from "@stencil/core"; import { focusElement, getRootNode, nodeListToArray } from "../../utils/dom"; import { Scale, SelectionMode } from "../interfaces"; @@ -20,7 +20,7 @@ import { getEnabledSiblingItem } from "./utils"; @Component({ tag: "calcite-tree", styleUrl: "tree.scss", - shadow: true + shadow: true, }) export class Tree { //-------------------------------------------------------------------------- diff --git a/packages/calcite-components/src/components/value-list-item/resources.ts b/packages/calcite-components/src/components/value-list-item/resources.ts index 5f5b4da0f88..cda5c28279d 100644 --- a/packages/calcite-components/src/components/value-list-item/resources.ts +++ b/packages/calcite-components/src/components/value-list-item/resources.ts @@ -1,8 +1,8 @@ export const ICONS = { - drag: "drag" + drag: "drag", }; export const SLOTS = { actionsEnd: "actions-end", - actionsStart: "actions-start" + actionsStart: "actions-start", }; diff --git a/packages/calcite-components/src/components/value-list-item/value-list-item.e2e.ts b/packages/calcite-components/src/components/value-list-item/value-list-item.e2e.ts index 85fc83bb115..c30b114251d 100644 --- a/packages/calcite-components/src/components/value-list-item/value-list-item.e2e.ts +++ b/packages/calcite-components/src/components/value-list-item/value-list-item.e2e.ts @@ -54,7 +54,7 @@ describe("calcite-value-list-item", () => { it("should fire event calciteListItemChange when item is clicked", async () => { const page = await newE2EPage({ - html: `` + html: ``, }); const item = await page.find("calcite-value-list-item"); await page.evaluate(() => @@ -76,7 +76,7 @@ describe("calcite-value-list-item", () => { it("prevents deselection when deselectDisabled is true", async () => { const page = await newE2EPage({ - html: `` + html: ``, }); const item = await page.find("calcite-value-list-item"); @@ -87,7 +87,7 @@ describe("calcite-value-list-item", () => { it("prevents selection when nonInteractive is true", async () => { const page = await newE2EPage({ - html: `` + html: ``, }); const item = await page.find("calcite-value-list-item"); @@ -98,7 +98,7 @@ describe("calcite-value-list-item", () => { it("prevents deselection when nonInteractive is true", async () => { const page = await newE2EPage({ - html: `` + html: ``, }); const item = await page.find("calcite-value-list-item"); @@ -126,7 +126,7 @@ describe("calcite-value-list-item", () => { it("allows for easy removal", async () => { const page = await newE2EPage({ - html: `` + html: ``, }); const item = await page.find("calcite-value-list-item"); diff --git a/packages/calcite-components/src/components/value-list-item/value-list-item.tsx b/packages/calcite-components/src/components/value-list-item/value-list-item.tsx index 0a71fc66c34..3160127ae2d 100644 --- a/packages/calcite-components/src/components/value-list-item/value-list-item.tsx +++ b/packages/calcite-components/src/components/value-list-item/value-list-item.tsx @@ -8,12 +8,12 @@ import { Listen, Method, Prop, - VNode + VNode, } from "@stencil/core"; import { ConditionalSlotComponent, connectConditionalSlotComponent, - disconnectConditionalSlotComponent + disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot"; import { getSlotted } from "../../utils/dom"; import { guid } from "../../utils/guid"; @@ -21,13 +21,13 @@ import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { CSS, SLOTS as PICK_LIST_SLOTS } from "../pick-list-item/resources"; import { ICON_TYPES } from "../pick-list/resources"; @@ -42,7 +42,7 @@ import { ICONS, SLOTS } from "./resources"; @Component({ tag: "calcite-value-list-item", styleUrl: "value-list-item.scss", - shadow: true + shadow: true, }) export class ValueListItem implements ConditionalSlotComponent, InteractiveComponent, LoadableComponent @@ -268,7 +268,7 @@ export class ValueListItem { const page = await newE2EPage({ html: ` - ` + `, }); const item = await page.find("calcite-value-list-item"); @@ -82,7 +82,7 @@ describe("calcite-value-list", () => { const page = await newE2EPage({ html: ` - ` + `, }); const item = await page.find("calcite-value-list-item"); @@ -114,7 +114,7 @@ describe("calcite-value-list", () => { - ` + `, }); } @@ -126,11 +126,11 @@ describe("calcite-value-list", () => { page, { element: `calcite-value-list-item[value="one"]`, - shadow: `.${CSS.handle}` + shadow: `.${CSS.handle}`, }, { element: `calcite-value-list-item[value="two"]`, - shadow: `.${CSS.handle}` + shadow: `.${CSS.handle}`, } ); @@ -197,20 +197,20 @@ describe("calcite-value-list", () => { - ` + `, }); await dragAndDrop( page, { element: `calcite-value-list-item[value="d"]`, - shadow: `.${CSS.handle}` + shadow: `.${CSS.handle}`, }, { element: `#first-letters`, pointerPosition: { - vertical: "bottom" - } + vertical: "bottom", + }, } ); @@ -218,13 +218,13 @@ describe("calcite-value-list", () => { page, { element: `calcite-value-list-item[value="e"]`, - shadow: `.${CSS.handle}` + shadow: `.${CSS.handle}`, }, { element: `#numbers`, pointerPosition: { - vertical: "bottom" - } + vertical: "bottom", + }, } ); @@ -232,13 +232,13 @@ describe("calcite-value-list", () => { page, { element: `calcite-value-list-item[value="e"]`, - shadow: `.${CSS.handle}` + shadow: `.${CSS.handle}`, }, { element: `#no-group`, pointerPosition: { - vertical: "bottom" - } + vertical: "bottom", + }, } ); diff --git a/packages/calcite-components/src/components/value-list/value-list.stories.ts b/packages/calcite-components/src/components/value-list/value-list.stories.ts index cadd039084f..0964b99640a 100644 --- a/packages/calcite-components/src/components/value-list/value-list.stories.ts +++ b/packages/calcite-components/src/components/value-list/value-list.stories.ts @@ -5,7 +5,7 @@ import { Attributes, createComponentHTML as create, filterComponentAttributes, - modesDarkDefault + modesDarkDefault, } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; import itemReadme from "../value-list-item/readme.md"; @@ -14,9 +14,9 @@ import readme from "./readme.md"; export default { title: "Components/Value List", parameters: { - notes: [readme, itemReadme] + notes: [readme, itemReadme], }, - ...storyFilters() + ...storyFilters(), }; const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { @@ -28,7 +28,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("disabled", false); delete this.build; return this; - } + }, }, { name: "drag-enabled", @@ -36,7 +36,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("dragEnabled", false); delete this.build; return this; - } + }, }, { name: "filter-enabled", @@ -44,7 +44,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("filterEnabled", false); delete this.build; return this; - } + }, }, { name: "loading", @@ -52,7 +52,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("loading", false); delete this.build; return this; - } + }, }, { name: "multiple", @@ -60,7 +60,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("multiple", false); delete this.build; return this; - } + }, }, { name: "selection-follows-focus", @@ -68,8 +68,8 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ this.value = boolean("selection-follows-focus", false); delete this.build; return this; - } - } + }, + }, ], exceptions ); @@ -126,7 +126,7 @@ export const darkModeRTL_TestOnly = (): string => html` "calcite-value-list", createAttributes({ exceptions: ["dir", "class"] }).concat([ { name: "dir", value: "rtl" }, - { name: "class", value: "calcite-mode-dark" } + { name: "class", value: "calcite-mode-dark" }, ]), html` diff --git a/packages/calcite-components/src/components/value-list/value-list.tsx b/packages/calcite-components/src/components/value-list/value-list.tsx index 65467a8b272..c44050e61a4 100644 --- a/packages/calcite-components/src/components/value-list/value-list.tsx +++ b/packages/calcite-components/src/components/value-list/value-list.tsx @@ -9,20 +9,20 @@ import { Prop, State, VNode, - Watch + Watch, } from "@stencil/core"; import Sortable from "sortablejs"; import { connectInteractive, disconnectInteractive, InteractiveComponent, - updateHostInteraction + updateHostInteraction, } from "../../utils/interactive"; import { componentFocusable, LoadableComponent, setComponentLoaded, - setUpLoadableComponent + setUpLoadableComponent, } from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; import { createObserver } from "../../utils/observers"; @@ -31,7 +31,7 @@ import { disconnectMessages, setUpMessages, T9nComponent, - updateMessages + updateMessages, } from "../../utils/t9n"; import { calciteInternalListItemValueChangeHandler, @@ -54,7 +54,7 @@ import { removeItem, selectSiblings, setFocus, - setUpItems + setUpItems, } from "../pick-list/shared-list-logic"; import List from "../pick-list/shared-list-render"; import { ListItemAndHandle } from "../value-list-item/interfaces"; @@ -66,7 +66,7 @@ import { disconnectSortableComponent, onSortingStart, SortableComponent, - onSortingEnd + onSortingEnd, } from "../../utils/sortableComponent"; import { focusElement } from "../../utils/dom"; @@ -79,7 +79,7 @@ import { focusElement } from "../../utils/dom"; tag: "calcite-value-list", styleUrl: "value-list.scss", shadow: true, - assetsDirs: ["assets"] + assetsDirs: ["assets"], }) export class ValueList< ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement @@ -358,7 +358,7 @@ export class ValueList< this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item")); const values = this.items.map((item) => item.value); this.calciteListOrderChange.emit(values); - } + }, }); } diff --git a/packages/calcite-components/src/demos/_assets/head.ts b/packages/calcite-components/src/demos/_assets/head.ts index a2955da1e41..eeda4a8ab55 100644 --- a/packages/calcite-components/src/demos/_assets/head.ts +++ b/packages/calcite-components/src/demos/_assets/head.ts @@ -13,11 +13,11 @@ const SCRIPTS: Script[] = [ { src: "build/calcite.esm.js", - type: "module" + type: "module", }, { - src: "demos/_assets/demo-dom-swapper.js" - } + src: "demos/_assets/demo-dom-swapper.js", + }, ]; const parseTemplate = (text: string): HTMLTemplateElement | null => { diff --git a/packages/calcite-components/src/demos/_assets/locales.ts b/packages/calcite-components/src/demos/_assets/locales.ts index 433865154d7..3954d09cf0c 100644 --- a/packages/calcite-components/src/demos/_assets/locales.ts +++ b/packages/calcite-components/src/demos/_assets/locales.ts @@ -11,242 +11,242 @@ export const locales: Locale[] = [ { name: "Arabic", locale: "ar", - dir: "rtl" + dir: "rtl", }, { name: "Arabic (Arab Numerals)", locale: "ar", dir: "rtl", - numberingSystem: "arab" + numberingSystem: "arab", }, { name: "Arabic (Arab Ext Numerals)", locale: "ar", dir: "rtl", - numberingSystem: "arabext" + numberingSystem: "arabext", }, { name: "Bulgarian", - locale: "bg" + locale: "bg", }, { name: "Bosnian", - locale: "bs" + locale: "bs", }, { name: "Catalan", - locale: "ca" + locale: "ca", }, { name: "Czech", - locale: "cs" + locale: "cs", }, { name: "Danish", - locale: "da" + locale: "da", }, { name: "German", - locale: "de" + locale: "de", }, { name: "German (Austria)", - locale: "de-AT" + locale: "de-AT", }, { name: "German (Switzerland)", - locale: "de-CH" + locale: "de-CH", }, { name: "Greek", - locale: "el" + locale: "el", }, { name: "English", - locale: "en" + locale: "en", }, { name: "English (Australia)", - locale: "en-AU" + locale: "en-AU", }, { name: "English (Canada)", - locale: "en-CA" + locale: "en-CA", }, { name: "English (Great Britain)", - locale: "en-GB" + locale: "en-GB", }, { name: "English (United States)", - locale: "en-US" + locale: "en-US", }, { name: "Spanish", - locale: "es" + locale: "es", }, { name: "Spanish (Mexico)", - locale: "es-MX" + locale: "es-MX", }, { name: "Estonian", - locale: "et" + locale: "et", }, { name: "Finnish", - locale: "fi" + locale: "fi", }, { name: "French", - locale: "fr" + locale: "fr", }, { name: "French (Switzerland)", - locale: "fr-CH" + locale: "fr-CH", }, { name: "Hebrew", - locale: "he" + locale: "he", }, { name: "Hindi", - locale: "hi" + locale: "hi", }, { name: "Croatian", - locale: "hr" + locale: "hr", }, { name: "Hungarian", - locale: "hu" + locale: "hu", }, { name: "Indonesian (ISO 3166)", - locale: "id" + locale: "id", }, { name: "Italian", - locale: "it" + locale: "it", }, { name: "Italian (Switzerland)", - locale: "it-CH" + locale: "it-CH", }, { name: "Japanese", - locale: "ja" + locale: "ja", }, { name: "Korean", - locale: "ko" + locale: "ko", }, { name: "Lithuanian", - locale: "lt" + locale: "lt", }, { name: "Latvian", - locale: "lv" + locale: "lv", }, { name: "Macedonian", - locale: "mk" + locale: "mk", }, { name: "Norwegian", - locale: "no" + locale: "no", }, { name: "Dutch", - locale: "nl" + locale: "nl", }, { name: "Polish", - locale: "pl" + locale: "pl", }, { name: "Portuguese", - locale: "pt" + locale: "pt", }, { name: "Portuguese (Brazil)", - locale: "pt-BR" + locale: "pt-BR", }, { name: "Portuguese (Portugal)", - locale: "pt-PT" + locale: "pt-PT", }, { name: "Romanian", - locale: "ro" + locale: "ro", }, { name: "Russian", - locale: "ru" + locale: "ru", }, { name: "Slovak", - locale: "sk" + locale: "sk", }, { name: "Slovenian", - locale: "sl" + locale: "sl", }, { name: "Serbian", - locale: "sr" + locale: "sr", }, { name: "Swedish", - locale: "sv" + locale: "sv", }, { name: "Thai", - locale: "th" + locale: "th", }, { name: "Thai (Thai digits)", locale: "th", - numberingSystem: "thai" + numberingSystem: "thai", }, { name: "Turkish", - locale: "tr" + locale: "tr", }, { name: "Ukrainian", - locale: "uk" + locale: "uk", }, { name: "Vietnamese", - locale: "vi" + locale: "vi", }, { name: "Chinese (China)", - locale: "zh-CN" + locale: "zh-CN", }, { name: "Chinese (China) (Hanidec numerals)", locale: "zh-CN", - numberingSystem: "hanidec" + numberingSystem: "hanidec", }, { name: "Chinese (Hong Kong)", - locale: "zh-HK" + locale: "zh-HK", }, { name: "Chinese (Hong Kong) (Hanidec numerals)", locale: "zh-HK", - numberingSystem: "hanidec" + numberingSystem: "hanidec", }, { name: "Chinese (Taiwan)", - locale: "zh-TW" + locale: "zh-TW", }, { name: "Chinese (Taiwan) (Hanidec numerals)", locale: "zh-TW", - numberingSystem: "hanidec" - } + numberingSystem: "hanidec", + }, ]; diff --git a/packages/calcite-components/src/demos/alert.html b/packages/calcite-components/src/demos/alert.html index 0760b000513..c117b9538cd 100644 --- a/packages/calcite-components/src/demos/alert.html +++ b/packages/calcite-components/src/demos/alert.html @@ -80,7 +80,7 @@ "
Something failed
", "
" + id + " That thing you wanted to do didn't work as expected
", "Take action", - "" + "", ].join("\n"); // if the id element doesn't exist, insert into page if (!document.querySelector("#" + id)) { diff --git a/packages/calcite-components/src/demos/date-picker.html b/packages/calcite-components/src/demos/date-picker.html index 86a65cb1837..d83dc891301 100644 --- a/packages/calcite-components/src/demos/date-picker.html +++ b/packages/calcite-components/src/demos/date-picker.html @@ -240,7 +240,7 @@

Date-picker

"tamldec", "telu", "thai", - "tibt" + "tibt", ]; let selectedLang = "th"; @@ -302,7 +302,7 @@

Date-picker

document.addEventListener("calciteDropdownSelect", ({ target: { selectedItems } }) => createLocaleDatePicker({ numberingSystem: selectedItems[0].getAttribute("data-numbering-system") || selectedNumberingSystem, - lang: selectedItems[0].getAttribute("data-lang") || selectedLang + lang: selectedItems[0].getAttribute("data-lang") || selectedLang, }) ); diff --git a/packages/calcite-components/src/demos/form.html b/packages/calcite-components/src/demos/form.html index a58fdf00c26..3713497977d 100644 --- a/packages/calcite-components/src/demos/form.html +++ b/packages/calcite-components/src/demos/form.html @@ -224,7 +224,7 @@

Switch

const entries = Object.fromEntries( Array.from(formData.keys()).map((key) => [ key, - formData.getAll(key).length > 1 ? formData.getAll(key) : formData.get(key) + formData.getAll(key).length > 1 ? formData.getAll(key) : formData.get(key), ]) ); console.log(entries); diff --git a/packages/calcite-components/src/demos/graph.html b/packages/calcite-components/src/demos/graph.html index 0c1c86fed89..67cf06e9474 100644 --- a/packages/calcite-components/src/demos/graph.html +++ b/packages/calcite-components/src/demos/graph.html @@ -93,7 +93,7 @@ [70, 48], [80, 30], [90, 10], - [100, 0] + [100, 0], ]; document.querySelectorAll("calcite-graph").forEach(function (graphElement) { graphElement.data = data; diff --git a/packages/calcite-components/src/demos/input-number.html b/packages/calcite-components/src/demos/input-number.html index 33d750653e4..4be99aaa104 100644 --- a/packages/calcite-components/src/demos/input-number.html +++ b/packages/calcite-components/src/demos/input-number.html @@ -110,7 +110,7 @@ "vi", "zh-CN", "zh-HK", - "zh-TW" + "zh-TW", ]; diff --git a/packages/calcite-components/src/demos/input.html b/packages/calcite-components/src/demos/input.html index 116f7d7e9ff..d5befb34d19 100644 --- a/packages/calcite-components/src/demos/input.html +++ b/packages/calcite-components/src/demos/input.html @@ -110,7 +110,7 @@ "vi", "zh-CN", "zh-HK", - "zh-TW" + "zh-TW", ]; diff --git a/packages/calcite-components/src/demos/mode/auto.html b/packages/calcite-components/src/demos/mode/auto.html index 99b670c0142..b9e9d2680a3 100644 --- a/packages/calcite-components/src/demos/mode/auto.html +++ b/packages/calcite-components/src/demos/mode/auto.html @@ -10,8 +10,8 @@ @@ -45,20 +45,20 @@ ) { const customWebMap = new WebMap({ portalItem: { - id: "cc316ca9e0824970ad29ac558161d42d" + id: "cc316ca9e0824970ad29ac558161d42d", }, - basemap: "gray-vector" // Overrides webmap basemap (dark-gray-vector) + basemap: "gray-vector", // Overrides webmap basemap (dark-gray-vector) }); const view = new MapView({ container: "viewDiv", - map: customWebMap + map: customWebMap, }); view.when(function () { const layerList = new LayerList({ view: view, selectionEnabled: true, - container: "layerlist-container" + container: "layerlist-container", }); view.ui.move("zoom", "bottom-right"); diff --git a/packages/calcite-components/src/demos/pick-list.html b/packages/calcite-components/src/demos/pick-list.html index e622dd15208..0acb0ec87cc 100644 --- a/packages/calcite-components/src/demos/pick-list.html +++ b/packages/calcite-components/src/demos/pick-list.html @@ -185,7 +185,7 @@ @@ -199,7 +199,7 @@ @@ -225,7 +225,7 @@ diff --git a/packages/calcite-components/src/demos/shell-panel.html b/packages/calcite-components/src/demos/shell-panel.html index 8c41f7096d8..1c80efa6a50 100644 --- a/packages/calcite-components/src/demos/shell-panel.html +++ b/packages/calcite-components/src/demos/shell-panel.html @@ -10,8 +10,8 @@ @@ -63,19 +63,19 @@ ) { const webmap = new WebMap({ portalItem: { - id: "cc316ca9e0824970ad29ac558161d42d" - } + id: "cc316ca9e0824970ad29ac558161d42d", + }, }); const view = new MapView({ container: "viewDiv", - map: webmap + map: webmap, }); view.when(function () { const layerList = new LayerList({ view: view, selectionEnabled: true, - container: "layerlist-container" + container: "layerlist-container", }); view.ui.move("zoom", "bottom-right"); diff --git a/packages/calcite-components/src/demos/shell/block-configurations.html b/packages/calcite-components/src/demos/shell/block-configurations.html index 0ea6b403d6c..de7f2d85e7d 100644 --- a/packages/calcite-components/src/demos/shell/block-configurations.html +++ b/packages/calcite-components/src/demos/shell/block-configurations.html @@ -38,13 +38,13 @@ ) { const webmap = new WebMap({ portalItem: { - id: "cc316ca9e0824970ad29ac558161d42d" - } + id: "cc316ca9e0824970ad29ac558161d42d", + }, }); const view = new MapView({ container: "viewDiv", - map: webmap + map: webmap, }); view.when(function () { view.ui.move("zoom", "bottom-right"); diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-2-shell-header.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-2-shell-header.html index d140e09dc43..26bf5362e6b 100644 --- a/packages/calcite-components/src/demos/shell/demo-app-advanced-2-shell-header.html +++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-2-shell-header.html @@ -33,18 +33,18 @@ require(["esri/WebMap", "esri/views/MapView", "esri/widgets/LayerList"], function (WebMap, MapView, LayerList) { const webmap = new WebMap({ portalItem: { - id: "cc316ca9e0824970ad29ac558161d42d" - } + id: "cc316ca9e0824970ad29ac558161d42d", + }, }); const view = new MapView({ container: "viewDiv", - map: webmap + map: webmap, }); view.when(function () { const layerList = new LayerList({ view: view, selectionEnabled: true, - container: "layerlist-container" + container: "layerlist-container", }); }); }); diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-2.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-2.html index 5abbc68de0e..1d2d7245146 100644 --- a/packages/calcite-components/src/demos/shell/demo-app-advanced-2.html +++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-2.html @@ -33,18 +33,18 @@ require(["esri/WebMap", "esri/views/MapView", "esri/widgets/LayerList"], function (WebMap, MapView, LayerList) { const webmap = new WebMap({ portalItem: { - id: "cc316ca9e0824970ad29ac558161d42d" - } + id: "cc316ca9e0824970ad29ac558161d42d", + }, }); const view = new MapView({ container: "viewDiv", - map: webmap + map: webmap, }); view.when(function () { const layerList = new LayerList({ view: view, selectionEnabled: true, - container: "layerlist-container" + container: "layerlist-container", }); }); }); diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-3.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-3.html index ab33d7b0a5c..28eb3f536f5 100644 --- a/packages/calcite-components/src/demos/shell/demo-app-advanced-3.html +++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-3.html @@ -33,18 +33,18 @@ require(["esri/WebMap", "esri/views/MapView", "esri/widgets/LayerList"], function (WebMap, MapView, LayerList) { const webmap = new WebMap({ portalItem: { - id: "cc316ca9e0824970ad29ac558161d42d" - } + id: "cc316ca9e0824970ad29ac558161d42d", + }, }); const view = new MapView({ container: "viewDiv", - map: webmap + map: webmap, }); view.when(function () { const layerList = new LayerList({ view: view, selectionEnabled: true, - container: "layerlist-container" + container: "layerlist-container", }); }); }); diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row-async.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row-async.html index b5890523398..eda5f794f7a 100644 --- a/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row-async.html +++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row-async.html @@ -38,14 +38,14 @@ ) { const webmap = new WebMap({ portalItem: { - id: "cc316ca9e0824970ad29ac558161d42d" - } + id: "cc316ca9e0824970ad29ac558161d42d", + }, }); const view = new MapView({ container: "viewDiv", map: webmap, - padding: { left: 49, right: 49 } + padding: { left: 49, right: 49 }, }); view.when(function () { view.ui.move("zoom", "bottom-right"); diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row.html b/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row.html index fec1fcc8720..ee4d2c9a063 100644 --- a/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row.html +++ b/packages/calcite-components/src/demos/shell/demo-app-advanced-center-row.html @@ -38,14 +38,14 @@ ) { const webmap = new WebMap({ portalItem: { - id: "cc316ca9e0824970ad29ac558161d42d" - } + id: "cc316ca9e0824970ad29ac558161d42d", + }, }); const view = new MapView({ container: "viewDiv", map: webmap, - padding: { left: 49, right: 49 } + padding: { left: 49, right: 49 }, }); view.when(function () { view.ui.move("zoom", "bottom-right"); diff --git a/packages/calcite-components/src/demos/shell/demo-app-advanced.html b/packages/calcite-components/src/demos/shell/demo-app-advanced.html index c45fcc2b09d..164a7d7cc81 100644 --- a/packages/calcite-components/src/demos/shell/demo-app-advanced.html +++ b/packages/calcite-components/src/demos/shell/demo-app-advanced.html @@ -10,8 +10,8 @@ @@ -44,19 +44,19 @@ ) { const webmap = new WebMap({ portalItem: { - id: "cc316ca9e0824970ad29ac558161d42d" - } + id: "cc316ca9e0824970ad29ac558161d42d", + }, }); const view = new MapView({ container: "viewDiv", - map: webmap + map: webmap, }); view.when(function () { const layerList = new LayerList({ view: view, selectionEnabled: true, - container: "layerlist-container" + container: "layerlist-container", }); view.ui.move("zoom", "bottom-right"); diff --git a/packages/calcite-components/src/demos/shell/demo-app-blank.html b/packages/calcite-components/src/demos/shell/demo-app-blank.html index 8ce07b81953..1a14370eca2 100644 --- a/packages/calcite-components/src/demos/shell/demo-app-blank.html +++ b/packages/calcite-components/src/demos/shell/demo-app-blank.html @@ -36,13 +36,13 @@ ) { const webmap = new WebMap({ portalItem: { - id: "cc316ca9e0824970ad29ac558161d42d" - } + id: "cc316ca9e0824970ad29ac558161d42d", + }, }); const view = new MapView({ container: "viewDiv", - map: webmap + map: webmap, }); view.when(function () { view.ui.move("zoom", "bottom-right"); diff --git a/packages/calcite-components/src/demos/shell/demo-app-center-row-action-bar.html b/packages/calcite-components/src/demos/shell/demo-app-center-row-action-bar.html index 1cdafbd56a7..a2910666ec4 100644 --- a/packages/calcite-components/src/demos/shell/demo-app-center-row-action-bar.html +++ b/packages/calcite-components/src/demos/shell/demo-app-center-row-action-bar.html @@ -38,14 +38,14 @@ ) { const webmap = new WebMap({ portalItem: { - id: "cc316ca9e0824970ad29ac558161d42d" - } + id: "cc316ca9e0824970ad29ac558161d42d", + }, }); const view = new MapView({ container: "viewDiv", map: webmap, - padding: { left: 49, right: 49 } + padding: { left: 49, right: 49 }, }); view.when(function () { view.ui.move("zoom", "bottom-right"); diff --git a/packages/calcite-components/src/demos/shell/demo-app-full-window-reversed.html b/packages/calcite-components/src/demos/shell/demo-app-full-window-reversed.html index a6740b2c163..aaabe39c98b 100644 --- a/packages/calcite-components/src/demos/shell/demo-app-full-window-reversed.html +++ b/packages/calcite-components/src/demos/shell/demo-app-full-window-reversed.html @@ -32,14 +32,14 @@ diff --git a/packages/calcite-components/src/demos/shell/demo-app-full-window.html b/packages/calcite-components/src/demos/shell/demo-app-full-window.html index 6fe7d480b47..188f25620fc 100644 --- a/packages/calcite-components/src/demos/shell/demo-app-full-window.html +++ b/packages/calcite-components/src/demos/shell/demo-app-full-window.html @@ -32,14 +32,14 @@ diff --git a/packages/calcite-components/src/demos/shell/demo-app-rtl.html b/packages/calcite-components/src/demos/shell/demo-app-rtl.html index caef4d200fb..54143175169 100644 --- a/packages/calcite-components/src/demos/shell/demo-app-rtl.html +++ b/packages/calcite-components/src/demos/shell/demo-app-rtl.html @@ -38,21 +38,21 @@

calcite-shell

diff --git a/packages/calcite-components/src/demos/shell/demo-app.html b/packages/calcite-components/src/demos/shell/demo-app.html index a2aebc6278b..695f159d9f9 100644 --- a/packages/calcite-components/src/demos/shell/demo-app.html +++ b/packages/calcite-components/src/demos/shell/demo-app.html @@ -38,21 +38,21 @@

calcite-shell

diff --git a/packages/calcite-components/src/demos/shell/nesting-testing-flow.html b/packages/calcite-components/src/demos/shell/nesting-testing-flow.html index d7eacbf9c45..82a6b21d405 100644 --- a/packages/calcite-components/src/demos/shell/nesting-testing-flow.html +++ b/packages/calcite-components/src/demos/shell/nesting-testing-flow.html @@ -42,13 +42,13 @@ ) { const webmap = new WebMap({ portalItem: { - id: "cc316ca9e0824970ad29ac558161d42d" - } + id: "cc316ca9e0824970ad29ac558161d42d", + }, }); const view = new MapView({ container: "viewDiv", - map: webmap + map: webmap, }); view.when(function () { view.ui.move("zoom", "bottom-right"); diff --git a/packages/calcite-components/src/demos/shell/nesting-testing.html b/packages/calcite-components/src/demos/shell/nesting-testing.html index 15233c4481b..31f24b07aa8 100644 --- a/packages/calcite-components/src/demos/shell/nesting-testing.html +++ b/packages/calcite-components/src/demos/shell/nesting-testing.html @@ -42,13 +42,13 @@ ) { const webmap = new WebMap({ portalItem: { - id: "cc316ca9e0824970ad29ac558161d42d" - } + id: "cc316ca9e0824970ad29ac558161d42d", + }, }); const view = new MapView({ container: "viewDiv", - map: webmap + map: webmap, }); view.when(function () { view.ui.move("zoom", "bottom-right"); diff --git a/packages/calcite-components/src/demos/shell/popup-config-example.html b/packages/calcite-components/src/demos/shell/popup-config-example.html index cec3e714d0f..54b53e0bf1c 100644 --- a/packages/calcite-components/src/demos/shell/popup-config-example.html +++ b/packages/calcite-components/src/demos/shell/popup-config-example.html @@ -39,9 +39,9 @@ ) { const customWebMap = new WebMap({ portalItem: { - id: "cc316ca9e0824970ad29ac558161d42d" + id: "cc316ca9e0824970ad29ac558161d42d", }, - basemap: "gray-vector" // Overrides webmap basemap (dark-gray-vector) + basemap: "gray-vector", // Overrides webmap basemap (dark-gray-vector) }); const view = new MapView({ @@ -49,8 +49,8 @@ map: customWebMap, padding: { left: 45, - right: 330 - } + right: 330, + }, }); view.when(function () { view.ui.move("zoom", "bottom-right"); diff --git a/packages/calcite-components/src/demos/shell/resizable-panels.html b/packages/calcite-components/src/demos/shell/resizable-panels.html index cabd9c7bd95..2de8ce5143f 100644 --- a/packages/calcite-components/src/demos/shell/resizable-panels.html +++ b/packages/calcite-components/src/demos/shell/resizable-panels.html @@ -10,8 +10,8 @@ @@ -45,19 +45,19 @@ ) { const webmap = new WebMap({ portalItem: { - id: "cc316ca9e0824970ad29ac558161d42d" - } + id: "cc316ca9e0824970ad29ac558161d42d", + }, }); const view = new MapView({ container: "viewDiv", - map: webmap + map: webmap, }); view.when(function () { const layerList = new LayerList({ view: view, selectionEnabled: true, - container: "layerlist-container" + container: "layerlist-container", }); view.ui.move("zoom", "bottom-right"); diff --git a/packages/calcite-components/src/demos/slider.html b/packages/calcite-components/src/demos/slider.html index ab4c4a1d5d5..662d53fba7f 100644 --- a/packages/calcite-components/src/demos/slider.html +++ b/packages/calcite-components/src/demos/slider.html @@ -2572,7 +2572,7 @@

Slider

[40, 25], [60, 55], [80, 10], - [100, 0] + [100, 0], ]; [].slice.call(document.querySelectorAll(".js-histogram")).forEach(function (graphElement) { graphElement.histogram = histogram; @@ -2593,7 +2593,7 @@

Slider

[-60, 25], [-40, 55], [-20, 10], - [0, 0] + [0, 0], ]) ); diff --git a/packages/calcite-components/src/tests/commonTests.ts b/packages/calcite-components/src/tests/commonTests.ts index 819eaaa4fdb..a54266b97d3 100644 --- a/packages/calcite-components/src/tests/commonTests.ts +++ b/packages/calcite-components/src/tests/commonTests.ts @@ -42,7 +42,7 @@ async function simplePageSetup(componentTagOrHTML: TagOrHTML): Promise const componentTag = getTag(componentTagOrHTML); const page = await newE2EPage({ html: isHTML(componentTagOrHTML) ? componentTagOrHTML : `<${componentTag}>`, - failOnConsoleError: true + failOnConsoleError: true, }); await page.waitForChanges(); @@ -376,7 +376,7 @@ async function assertLabelable({ componentTag, propertyToToggle, focusTargetSelector = componentTag, - shadowFocusTargetSelector + shadowFocusTargetSelector, }: { page: E2EPage; componentTag: string; @@ -470,7 +470,7 @@ export function labelable(componentTagOrHtml: TagOrHTML, options?: LabelableOpti componentTag, propertyToToggle, focusTargetSelector, - shadowFocusTargetSelector + shadowFocusTargetSelector, }); }); @@ -487,7 +487,7 @@ export function labelable(componentTagOrHtml: TagOrHTML, options?: LabelableOpti componentTag, propertyToToggle, focusTargetSelector, - shadowFocusTargetSelector + shadowFocusTargetSelector, }); }); @@ -508,7 +508,7 @@ export function labelable(componentTagOrHtml: TagOrHTML, options?: LabelableOpti componentTag, propertyToToggle, focusTargetSelector, - shadowFocusTargetSelector + shadowFocusTargetSelector, }); }); @@ -530,7 +530,7 @@ export function labelable(componentTagOrHtml: TagOrHTML, options?: LabelableOpti componentTag, propertyToToggle, focusTargetSelector, - shadowFocusTargetSelector + shadowFocusTargetSelector, }); }); @@ -549,7 +549,7 @@ export function labelable(componentTagOrHtml: TagOrHTML, options?: LabelableOpti componentTag, propertyToToggle, focusTargetSelector, - shadowFocusTargetSelector + shadowFocusTargetSelector, }); }); @@ -571,7 +571,7 @@ export function labelable(componentTagOrHtml: TagOrHTML, options?: LabelableOpti componentTag, propertyToToggle, focusTargetSelector, - shadowFocusTargetSelector + shadowFocusTargetSelector, }); }); } @@ -625,7 +625,7 @@ export function formAssociated(componentTagOrHtml: TagOrHTML, options: FormAssoc this should cover button and calcite-button submit cases --> - ` + `, }); await page.waitForChanges(); const component = await page.find(componentTag); @@ -653,7 +653,7 @@ export function formAssociated(componentTagOrHtml: TagOrHTML, options: FormAssoc keeping things simple by using submit-type input this should cover button and calcite-button submit cases --> - ` + `, }); await page.waitForChanges(); const component = await page.find(componentTag); @@ -1176,7 +1176,7 @@ export function floatingUIOwner( content: `body { height: ${scrollablePageSizeInPx}px; width: ${scrollablePageSizeInPx}px; - }` + }`, }); await page.waitForChanges(); @@ -1279,7 +1279,7 @@ export async function t9n(componentTestSetup: ComponentTestSetup): Promise expect(await getCurrentMessages()).toEqual({ ...messages, - ...messageOverride + ...messageOverride, }); // reset test changes @@ -1298,7 +1298,7 @@ export async function t9n(componentTestSetup: ComponentTestSetup): Promise const fakeEsMessages = { ...enMessages, // reuse real message bundle in case component rendering depends on strings - [fakeBundleIdentifier]: true // we inject a fake identifier for assertion-purposes + [fakeBundleIdentifier]: true, // we inject a fake identifier for assertion-purposes }; window.fetch = orig; return new Response(new Blob([JSON.stringify(fakeEsMessages, null, 2)], { type: "application/json" })); diff --git a/packages/calcite-components/src/tests/globalStyles.e2e.ts b/packages/calcite-components/src/tests/globalStyles.e2e.ts index 5cb80318ed5..35341d3c847 100644 --- a/packages/calcite-components/src/tests/globalStyles.e2e.ts +++ b/packages/calcite-components/src/tests/globalStyles.e2e.ts @@ -15,7 +15,7 @@ describe("global styles", () => { "calcite-animate__in-up", "calcite-animate__in-left", "calcite-animate__in-right", - "calcite-animate__in-scale" + "calcite-animate__in-scale", ]; globalClasses.forEach((className) => { @@ -34,7 +34,7 @@ describe("global styles", () => { return { name: animationName, duration: animationDuration, - opacity: opacity + opacity: opacity, }; }); expect(noticeAnimation?.duration).toEqual("0.15s"); @@ -56,7 +56,7 @@ describe("global styles", () => {
- ` + `, }); await page.waitForChanges(); const eleTransitionDuration = await page.evaluate(() => { @@ -69,7 +69,7 @@ describe("global styles", () => { it("should not be able to disable animations with --calcite-duration-factor at component level", async () => { const page = await newE2EPage({ - html: html`
` + html: html`
`, }); await page.waitForChanges(); await page.$eval("div", (element: any) => { @@ -84,7 +84,7 @@ describe("global styles", () => { it("should set animation duration to default value 150ms", async () => { const page = await newE2EPage({ - html: html`
` + html: html`
`, }); const eleTransitionDuration = await page.evaluate(() => { const ele = document.querySelector("div"); diff --git a/packages/calcite-components/src/tests/utils.ts b/packages/calcite-components/src/tests/utils.ts index bcaa397658f..e9285f4e6a4 100644 --- a/packages/calcite-components/src/tests/utils.ts +++ b/packages/calcite-components/src/tests/utils.ts @@ -54,7 +54,7 @@ export async function dragAndDrop( const { vertical: verticalPos, horizontal: horizontalPos, - offset = [0, 0] + offset = [0, 0], }: PointerPosition = typeof selector === "string" || !selector.pointerPosition ? { vertical: "center" } : selector.pointerPosition; @@ -72,7 +72,7 @@ export async function dragAndDrop( screenX: eventX, screenY: eventY, clientX: eventX, - clientY: eventY + clientY: eventY, }; } @@ -288,7 +288,7 @@ export async function skipAnimations(page: E2EPage): Promise { await page.addStyleTag({ // using 0.01 to ensure `openCloseComponent` utils work consistently // this should be removed once https://github.com/Esri/calcite-components/issues/6604 is addressed - content: `:root { --calcite-duration-factor: 0.01; }` + content: `:root { --calcite-duration-factor: 0.01; }`, }); } diff --git a/packages/calcite-components/src/utils/config.ts b/packages/calcite-components/src/utils/config.ts index 04d4f201b20..0af0bd0de8c 100644 --- a/packages/calcite-components/src/utils/config.ts +++ b/packages/calcite-components/src/utils/config.ts @@ -7,7 +7,7 @@ const configOverrides = globalThis["calciteComponentsConfig"]; const config = { - ...configOverrides + ...configOverrides, }; export { config }; diff --git a/packages/calcite-components/src/utils/date.spec.ts b/packages/calcite-components/src/utils/date.spec.ts index cee90e6e4de..9d5200c0050 100644 --- a/packages/calcite-components/src/utils/date.spec.ts +++ b/packages/calcite-components/src/utils/date.spec.ts @@ -10,7 +10,7 @@ import { parseCalendarYear, parseDateString, prevMonth, - sameDate + sameDate, } from "./date"; import arabic from "../components/date-picker/assets/date-picker/nls/ar.json"; @@ -148,14 +148,14 @@ describe("format number", () => { it("preserves standard numerals", () => { numberStringFormatter.numberFormatOptions = { locale: "dummyLocale", - numberingSystem: "dummyNumberingSystem" as any + numberingSystem: "dummyNumberingSystem" as any, }; expect(numberStringFormatter.localize("123")).toEqual("123"); }); it("converts standard numerals to arabic", () => { numberStringFormatter.numberFormatOptions = { locale: "ar", - numberingSystem: "arab" + numberingSystem: "arab", }; expect(numberStringFormatter.localize("123")).toEqual("١٢٣"); }); @@ -165,14 +165,14 @@ describe("parse number", () => { it("correctly parses number string", () => { numberStringFormatter.numberFormatOptions = { locale: "dummyLocale", - numberingSystem: "dummyNumberingSystem" as NumberingSystem + numberingSystem: "dummyNumberingSystem" as NumberingSystem, }; expect(numberStringFormatter.localize("123")).toEqual("123"); }); it("parses arabic number", () => { numberStringFormatter.numberFormatOptions = { locale: "ar", - numberingSystem: "arab" + numberingSystem: "arab", }; expect(numberStringFormatter.delocalize("٧٨٩")).toEqual("789"); }); diff --git a/packages/calcite-components/src/utils/date.ts b/packages/calcite-components/src/utils/date.ts index 539b4ff1a93..c6cc99c30df 100644 --- a/packages/calcite-components/src/utils/date.ts +++ b/packages/calcite-components/src/utils/date.ts @@ -220,7 +220,7 @@ export function parseDateString( return { day: parseInt(day), month: parseInt(month) - 1, // this subtracts by 1 because the month in the Date contructor is zero-based https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getMonth - year: parseInt(year) + year: parseInt(year), }; } diff --git a/packages/calcite-components/src/utils/dom.e2e.ts b/packages/calcite-components/src/utils/dom.e2e.ts index 452214b8613..453b88204a4 100644 --- a/packages/calcite-components/src/utils/dom.e2e.ts +++ b/packages/calcite-components/src/utils/dom.e2e.ts @@ -37,7 +37,7 @@ describe("queries", () => { beforeEach(async () => { page = await newE2EPage({ - html: outsideHostHTML + html: outsideHostHTML, }); function setUpTestComponent({ insideHostHTML, componentTag, insideShadowHTML }: SetUpTestComponentOptions) { @@ -62,7 +62,7 @@ describe("queries", () => { ${getHost} ${queryElementRoots} ${setUpTestComponent} - ` + `, }); await page.waitForFunction(() => (window as TestWindow).queryElementRoots); @@ -75,20 +75,20 @@ describe("queries", () => { componentTag, insideShadowHTML, myButtonClass, - myButtonId + myButtonId, }: SetUpTestComponentOptions): string => { (window as TestWindow).setUpTestComponent({ insideHostHTML, componentTag, insideShadowHTML, myButtonClass, - myButtonId + myButtonId, }); const testComponent = document.querySelector("test-component"); const queryEl = testComponent.shadowRoot.querySelector("div"); const resultEl: HTMLElement = (window as TestWindow).queryElementRoots(queryEl, { - selector: `button.${myButtonClass}` + selector: `button.${myButtonClass}`, }); return resultEl?.textContent; @@ -106,20 +106,20 @@ describe("queries", () => { componentTag, insideShadowHTML, myButtonClass, - myButtonId + myButtonId, }: SetUpTestComponentOptions): string => { (window as TestWindow).setUpTestComponent({ insideHostHTML, componentTag, insideShadowHTML, myButtonClass, - myButtonId + myButtonId, }); const testComponent = document.querySelector("test-component"); const queryEl = testComponent.shadowRoot.querySelector("div"); const resultEl: HTMLElement = (window as TestWindow).queryElementRoots(queryEl, { - id: myButtonId + id: myButtonId, }); return resultEl?.textContent; @@ -137,14 +137,14 @@ describe("queries", () => { componentTag, insideShadowHTML, myButtonClass, - myButtonId + myButtonId, }: SetUpTestComponentOptions): string => { (window as TestWindow).setUpTestComponent({ insideHostHTML, componentTag, insideShadowHTML, myButtonClass, - myButtonId + myButtonId, }); const queryEl = document.body.querySelector("span"); @@ -165,14 +165,14 @@ describe("queries", () => { componentTag, insideShadowHTML, myButtonClass, - myButtonId + myButtonId, }: SetUpTestComponentOptions): string => { (window as TestWindow).setUpTestComponent({ insideHostHTML, componentTag, insideShadowHTML, myButtonClass, - myButtonId + myButtonId, }); const queryEl = document.body.querySelector("span"); diff --git a/packages/calcite-components/src/utils/dom.spec.ts b/packages/calcite-components/src/utils/dom.spec.ts index 2d1c6d8bb24..c3a4aa27aff 100644 --- a/packages/calcite-components/src/utils/dom.spec.ts +++ b/packages/calcite-components/src/utils/dom.spec.ts @@ -11,7 +11,7 @@ import { slotChangeGetAssignedElements, slotChangeHasAssignedElement, toAriaBoolean, - getShadowRootNode + getShadowRootNode, } from "./dom"; import { guidPattern } from "./guid.spec"; @@ -161,7 +161,7 @@ describe("dom", () => { it("returns nothing with non-matching child selector", () => expect( getSlotted(getTestComponent(), testSlotName, { - selector: "non-existent-slot" + selector: "non-existent-slot", }) ).toBeNull()); }); @@ -179,7 +179,7 @@ describe("dom", () => { expect( getSlotted(getTestComponent(), testSlotName, { - direct: true + direct: true, }) ).toBeTruthy(); }); @@ -196,7 +196,7 @@ describe("dom", () => { expect( getSlotted(getTestComponent(), testSlotName, { all: true, - direct: true + direct: true, }) ).toBeTruthy(); }); @@ -221,7 +221,7 @@ describe("dom", () => { expect( getSlotted(getTestComponent(), testSlotName, { all: true, - selector: "span" + selector: "span", }) ).toHaveLength(3)); @@ -229,7 +229,7 @@ describe("dom", () => { expect( getSlotted(getTestComponent(), testSlotName, { all: true, - selector: "non-existent" + selector: "non-existent", }) ).toHaveLength(0)); }); @@ -248,7 +248,7 @@ describe("dom", () => { expect( getSlotted(getTestComponent(), testSlotName, { all: true, - direct: true + direct: true, }) ).toHaveLength(1); }); @@ -266,7 +266,7 @@ describe("dom", () => { expect( getSlotted(getTestComponent(), testSlotName, { all: true, - direct: true + direct: true, }) ).toHaveLength(0); }); diff --git a/packages/calcite-components/src/utils/dom.ts b/packages/calcite-components/src/utils/dom.ts index e759a3c679a..3da1128518f 100644 --- a/packages/calcite-components/src/utils/dom.ts +++ b/packages/calcite-components/src/utils/dom.ts @@ -8,7 +8,7 @@ import { CSS_UTILITY } from "./resources"; * See https://github.com/focus-trap/tabbable#tabbable */ export const tabbableOptions = { - getShadowRoot: true + getShadowRoot: true, }; /** @@ -127,7 +127,7 @@ export function queryElementRoots( element: Element, { selector, - id + id, }: { selector?: string; id?: string; @@ -452,7 +452,7 @@ export function slotChangeHasAssignedElement(event: Event): boolean { */ export function slotChangeGetAssignedElements(event: Event): Element[] { return (event.target as HTMLSlotElement).assignedElements({ - flatten: true + flatten: true, }); } diff --git a/packages/calcite-components/src/utils/floating-ui.spec.ts b/packages/calcite-components/src/utils/floating-ui.spec.ts index 0f972aaace4..4395771f50b 100644 --- a/packages/calcite-components/src/utils/floating-ui.spec.ts +++ b/packages/calcite-components/src/utils/floating-ui.spec.ts @@ -13,7 +13,7 @@ const { placements, positionFloatingUI, reposition, - repositionDebounceTimeout + repositionDebounceTimeout, } = floatingUI; it("should set calcite placement to FloatingUI placement", () => { @@ -49,7 +49,7 @@ describe("repositioning", () => { /* noop */ }, overlayPositioning: "absolute", - placement: "auto" + placement: "auto", }; } @@ -64,7 +64,7 @@ describe("repositioning", () => { referenceEl, overlayPositioning: fakeFloatingUiComponent.overlayPositioning, placement: fakeFloatingUiComponent.placement, - type: "popover" + type: "popover", }; }); diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index 36c7226b875..c3a36b2d84c 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -12,7 +12,7 @@ import { shift, Side, Strategy, - VirtualElement + VirtualElement, } from "@floating-ui/dom"; import { Build } from "@stencil/core"; import { debounce, DebouncedFunc } from "lodash-es"; @@ -79,7 +79,7 @@ export const positionFloatingUI = offsetDistance, offsetSkidding, arrowEl, - type + type, }: { referenceEl: ReferenceElement; floatingEl: HTMLElement; @@ -102,7 +102,7 @@ export const positionFloatingUI = y, placement: effectivePlacement, strategy: position, - middlewareData + middlewareData, } = await computePosition(referenceEl, floatingEl, { strategy: overlayPositioning, placement: @@ -116,8 +116,8 @@ export const positionFloatingUI = offsetDistance, offsetSkidding, arrowEl, - type - }) + type, + }), }); if (arrowEl && middlewareData.arrow) { @@ -135,7 +135,7 @@ export const positionFloatingUI = ...reset, [alignment]: `${alignment == "left" ? x : y}px`, [side]: "100%", - transform + transform, }); } @@ -153,7 +153,7 @@ export const positionFloatingUI = position, top: "0", left: "0", - transform + transform, }); }; @@ -208,7 +208,7 @@ export const placements = [ "leading-end", "trailing-end", "trailing", - "trailing-start" + "trailing-start", ] as const; export type LogicalPlacement = (typeof placements)[number]; @@ -225,7 +225,7 @@ export const effectivePlacements: EffectivePlacement[] = [ "right-start", "right-end", "left-start", - "left-end" + "left-end", ]; export const menuPlacements: MenuPlacement[] = ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"]; @@ -236,7 +236,7 @@ export const menuEffectivePlacements: EffectivePlacement[] = [ "top-end", "bottom-start", "bottom", - "bottom-end" + "bottom-end", ]; export const flipPlacements: EffectivePlacement[] = [ @@ -251,7 +251,7 @@ export const flipPlacements: EffectivePlacement[] = [ "right-start", "right-end", "left-start", - "left-end" + "left-end", ]; export type MenuPlacement = Extract< @@ -307,7 +307,7 @@ export type FloatingLayout = Extract; export const FloatingCSS = { animation: "calcite-floating-ui-anim", - animationActive: "calcite-floating-ui-anim--active" + animationActive: "calcite-floating-ui-anim--active", }; function getMiddleware({ @@ -317,7 +317,7 @@ function getMiddleware({ offsetDistance, offsetSkidding, arrowEl, - type + type, }: { placement: LogicalPlacement; flipDisabled?: boolean; @@ -333,8 +333,8 @@ function getMiddleware({ return [ ...defaultMiddleware, flip({ - fallbackPlacements: flipPlacements || ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"] - }) + fallbackPlacements: flipPlacements || ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"], + }), ]; } @@ -343,8 +343,8 @@ function getMiddleware({ ...defaultMiddleware, offset({ mainAxis: typeof offsetDistance === "number" ? offsetDistance : 0, - crossAxis: typeof offsetSkidding === "number" ? offsetSkidding : 0 - }) + crossAxis: typeof offsetSkidding === "number" ? offsetSkidding : 0, + }), ]; if (placement === "auto" || placement === "auto-start" || placement === "auto-end") { @@ -358,7 +358,7 @@ function getMiddleware({ if (arrowEl) { middleware.push( arrow({ - element: arrowEl + element: arrowEl, }) ); } @@ -439,7 +439,7 @@ function getDebouncedReposition(component: FloatingUIComponent): DebouncedFunc { diff --git a/packages/calcite-components/src/utils/focusTrapComponent.ts b/packages/calcite-components/src/utils/focusTrapComponent.ts index 5b27547432e..6378d749f06 100644 --- a/packages/calcite-components/src/utils/focusTrapComponent.ts +++ b/packages/calcite-components/src/utils/focusTrapComponent.ts @@ -71,7 +71,7 @@ export function connectFocusTrap(component: FocusTrapComponent, options?: Connec // the following options are not overrideable document: el.ownerDocument, tabbableOptions, - trapStack + trapStack, }; component.focusTrap = createFocusTrap(focusTrapNode, focusTrapOptions); diff --git a/packages/calcite-components/src/utils/form.tsx b/packages/calcite-components/src/utils/form.tsx index 20ca3320b8a..4e0bf198409 100644 --- a/packages/calcite-components/src/utils/form.tsx +++ b/packages/calcite-components/src/utils/form.tsx @@ -152,7 +152,7 @@ function hasRegisteredFormComponentParent( formComponentEl.dispatchEvent( new CustomEvent(formComponentRegisterEventName, { bubbles: true, - composed: true + composed: true, }) ); @@ -408,7 +408,7 @@ interface HiddenFormInputSlotProps { * @param root0.component */ export const HiddenFormInputSlot: FunctionalComponent = ({ - component + component, }) => { syncHiddenFormInput(component); diff --git a/packages/calcite-components/src/utils/globalAttributes.spec.ts b/packages/calcite-components/src/utils/globalAttributes.spec.ts index 333ab02761c..0b7ab678e7b 100644 --- a/packages/calcite-components/src/utils/globalAttributes.spec.ts +++ b/packages/calcite-components/src/utils/globalAttributes.spec.ts @@ -19,7 +19,7 @@ describe("globalAttributes", () => { const globalComponent: GlobalAttrComponent = { el: fakeComponent, - globalAttributes: {} + globalAttributes: {}, }; watchGlobalAttributes(globalComponent, ["lang"]); @@ -61,8 +61,8 @@ describe("globalAttributes", () => { const globalComponent: GlobalAttrComponent = { el: fakeComponent, globalAttributes: { - lang: "test" - } + lang: "test", + }, }; watchGlobalAttributes(globalComponent, ["lang"]); diff --git a/packages/calcite-components/src/utils/interactive.spec.ts b/packages/calcite-components/src/utils/interactive.spec.ts index 16c7a20c4c5..fb141490e87 100644 --- a/packages/calcite-components/src/utils/interactive.spec.ts +++ b/packages/calcite-components/src/utils/interactive.spec.ts @@ -10,7 +10,7 @@ describe("interactive", () => { const fakeInteractive = { el: fakeInteractiveEl, - disabled: false + disabled: false, }; updateHostInteraction(fakeInteractive); diff --git a/packages/calcite-components/src/utils/key.ts b/packages/calcite-components/src/utils/key.ts index 5c64eee8319..4831e2ef349 100644 --- a/packages/calcite-components/src/utils/key.ts +++ b/packages/calcite-components/src/utils/key.ts @@ -29,5 +29,5 @@ export const letterKeys = [ "w", "x", "y", - "z" + "z", ]; diff --git a/packages/calcite-components/src/utils/label.spec.ts b/packages/calcite-components/src/utils/label.spec.ts index 60278cbe530..d0e22c2e9d3 100644 --- a/packages/calcite-components/src/utils/label.spec.ts +++ b/packages/calcite-components/src/utils/label.spec.ts @@ -7,7 +7,7 @@ describe("label", () => { el: null, label: null, labelEl: null, - onLabelClick: jest.fn() + onLabelClick: jest.fn(), }; return { ...base, ...overrides }; @@ -34,7 +34,7 @@ describe("label", () => { const fakeLabelableEl = document.querySelector("#unlabeled"); const nonLabelable = createFakeLabelable({ - el: fakeLabelableEl + el: fakeLabelableEl, }); connectLabel(nonLabelable); @@ -58,7 +58,7 @@ describe("label", () => { const labelable = createFakeLabelable({ el: fakeLabelableEl, - disabled: true + disabled: true, }); connectLabel(labelable); @@ -83,7 +83,7 @@ describe("label", () => { wireUpFakeLabel(labelEl); const labelable = createFakeLabelable({ - el: fakeLabelableEl + el: fakeLabelableEl, }); connectLabel(labelable); @@ -117,7 +117,7 @@ describe("label", () => { wireUpFakeLabel(labelEl); const labelable = createFakeLabelable({ - el: fakeLabelableEl + el: fakeLabelableEl, }); connectLabel(labelable); @@ -152,7 +152,7 @@ describe("label", () => { wireUpFakeLabel(labelEl); const labelable = createFakeLabelable({ - el: fakeLabelableEl + el: fakeLabelableEl, }); connectLabel(labelable); @@ -189,7 +189,7 @@ describe("label", () => { wireUpFakeLabel(labelEl); const labelable = createFakeLabelable({ - el: fakeLabelableEl + el: fakeLabelableEl, }); connectLabel(labelable); @@ -226,7 +226,7 @@ describe("label", () => { wireUpFakeLabel(labelEl); const innerLabelable = createFakeLabelable({ - el: fakeInnerLabelableEl + el: fakeInnerLabelableEl, }); connectLabel(innerLabelable); @@ -234,7 +234,7 @@ describe("label", () => { expect(innerLabelable.labelEl).toBeNull(); const outerLabelable = createFakeLabelable({ - el: fakeOuterLabelableEl + el: fakeOuterLabelableEl, }); connectLabel(outerLabelable); @@ -265,7 +265,7 @@ describe("label", () => { expect( getLabelText( createFakeLabelable({ - labelEl + labelEl, }) ) ).toBe("from-text-content"); @@ -274,7 +274,7 @@ describe("label", () => { getLabelText( createFakeLabelable({ label, - labelEl + labelEl, }) ) ).toBe("from-label"); diff --git a/packages/calcite-components/src/utils/locale.spec.ts b/packages/calcite-components/src/utils/locale.spec.ts index 96d972e4182..58cd0b4a197 100644 --- a/packages/calcite-components/src/utils/locale.spec.ts +++ b/packages/calcite-components/src/utils/locale.spec.ts @@ -7,7 +7,7 @@ import { locales, numberingSystems, NumberStringFormatOptions, - numberStringFormatter + numberStringFormatter, } from "./locale"; describe("NumberStringFormat", () => { @@ -22,7 +22,7 @@ describe("NumberStringFormat", () => { // not create the formatter numberStringFormatter.numberFormatOptions = { locale: defaultLocale, - numberingSystem: defaultNumberingSystem + numberingSystem: defaultNumberingSystem, }; expect(numberStringFormatter.numberFormatter).toBeUndefined(); expect(numberStringFormatter.numberFormatOptions).toBeUndefined(); @@ -30,7 +30,7 @@ describe("NumberStringFormat", () => { // setting a non-locale/numberingSystem option creates the formatter // with the default locale/numberingSystem values numberStringFormatter.numberFormatOptions = { - useGrouping: true + useGrouping: true, } as NumberStringFormatOptions; expect(numberStringFormatter.numberFormatter).toBeDefined(); @@ -45,7 +45,7 @@ describe("NumberStringFormat", () => { numberStringFormatter.numberFormatOptions = { locale, numberingSystem: "latn", - useGrouping: false + useGrouping: false, }; const localizedNumberString = numberStringFormatter.localize(numberString); const delocalizedNumberString = numberStringFormatter.delocalize(localizedNumberString); @@ -57,7 +57,7 @@ describe("NumberStringFormat", () => { numberStringFormatter.numberFormatOptions = { locale, numberingSystem: "latn", - useGrouping: false + useGrouping: false, }; const localizedNumberString = numberStringFormatter.localize(numberString); const delocalizedNumberString = numberStringFormatter.delocalize(localizedNumberString); @@ -69,7 +69,7 @@ describe("NumberStringFormat", () => { numberStringFormatter.numberFormatOptions = { locale, numberingSystem: "latn", - useGrouping: false + useGrouping: false, }; const localizedNumberString = numberStringFormatter.localize(numberString); const delocalizedNumberString = numberStringFormatter.delocalize(localizedNumberString); @@ -81,7 +81,7 @@ describe("NumberStringFormat", () => { numberStringFormatter.numberFormatOptions = { locale, numberingSystem: "latn", - useGrouping: false + useGrouping: false, }; const localizedNumberString = numberStringFormatter.localize(numberString); const delocalizedNumberString = numberStringFormatter.delocalize(localizedNumberString); @@ -94,7 +94,7 @@ describe("NumberStringFormat", () => { locale, // the group separator is different in arabic depending on the numberingSystem numberingSystem: locale === "ar" ? "arab" : "latn", - useGrouping: true + useGrouping: true, }; const localizedNumberString = numberStringFormatter.localize(numberString); const delocalizedNumberString = numberStringFormatter.delocalize(localizedNumberString); @@ -107,7 +107,7 @@ describe("NumberStringFormat", () => { locale, // the group separator is different in arabic depending on the numberingSystem numberingSystem: locale === "ar" ? "arab" : "latn", - useGrouping: true + useGrouping: true, }; const localizedNumberString = numberStringFormatter.localize(numberString); const delocalizedNumberString = numberStringFormatter.delocalize(localizedNumberString); @@ -123,7 +123,7 @@ describe("NumberStringFormat", () => { numberStringFormatter.numberFormatOptions = { locale: numberingSystem === "arab" ? "ar" : "en", numberingSystem, - useGrouping: true + useGrouping: true, }; const localizedNumberString = numberStringFormatter.localize(numberString); const delocalizedNumberString = numberStringFormatter.delocalize(localizedNumberString); diff --git a/packages/calcite-components/src/utils/locale.ts b/packages/calcite-components/src/utils/locale.ts index 448d2bd90dd..9800eb43ace 100644 --- a/packages/calcite-components/src/utils/locale.ts +++ b/packages/calcite-components/src/utils/locale.ts @@ -44,7 +44,7 @@ export const t9nLocales = [ "vi", "zh-CN", "zh-HK", - "zh-TW" + "zh-TW", ]; export const locales = [ @@ -97,7 +97,7 @@ export const locales = [ "vi", "zh-CN", "zh-HK", - "zh-TW" + "zh-TW", ]; export const numberingSystems = [ @@ -122,7 +122,7 @@ export const numberingSystems = [ "tamldec", "telu", "thai", - "tibt" + "tibt", ] as const; export const supportedLocales = [...new Set([...t9nLocales, ...locales])] as const; @@ -236,7 +236,7 @@ export function connectLocalized(component: LocalizedComponent): void { mutationObserver?.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"], - subtree: true + subtree: true, }); } @@ -397,15 +397,15 @@ export class NumberStringFormat { this._digits = [ ...new Intl.NumberFormat(this._numberFormatOptions.locale, { useGrouping: false, - numberingSystem: this._numberFormatOptions.numberingSystem - } as Intl.NumberFormatOptions).format(9876543210) + numberingSystem: this._numberFormatOptions.numberingSystem, + } as Intl.NumberFormatOptions).format(9876543210), ].reverse(); const index = new Map(this._digits.map((d, i) => [d, i])); // numberingSystem is parsed to return consistent decimal separator across browsers. const parts = new Intl.NumberFormat(this._numberFormatOptions.locale, { - numberingSystem: this._numberFormatOptions.numberingSystem + numberingSystem: this._numberFormatOptions.numberingSystem, } as Intl.NumberFormatOptions).formatToParts(-12345678.9); this._actualGroup = parts.find((d) => d.type === "group").value; diff --git a/packages/calcite-components/src/utils/mode.ts b/packages/calcite-components/src/utils/mode.ts index 765fa011d31..fead0340943 100644 --- a/packages/calcite-components/src/utils/mode.ts +++ b/packages/calcite-components/src/utils/mode.ts @@ -31,6 +31,6 @@ export function initModeChangeEvent(): void { // emits event when toggling between mode classes on new MutationObserver(() => modeChangeHandler(getMode())).observe(document.body, { attributes: true, - attributeFilter: ["class"] + attributeFilter: ["class"], }); } diff --git a/packages/calcite-components/src/utils/number.spec.ts b/packages/calcite-components/src/utils/number.spec.ts index 885c221a4d1..0bcd61b28e3 100644 --- a/packages/calcite-components/src/utils/number.spec.ts +++ b/packages/calcite-components/src/utils/number.spec.ts @@ -5,7 +5,7 @@ import { expandExponentialNumberString, isValidNumber, parseNumberString, - sanitizeNumberString + sanitizeNumberString, } from "./number"; describe("isValidNumber", () => { @@ -124,7 +124,7 @@ describe("BigDecimal", () => { numberStringFormatter.numberFormatOptions = { locale: "en", numberingSystem: "latn", - useGrouping: true + useGrouping: true, }; expect(new BigDecimal("123.0123456789").format(numberStringFormatter)).toBe("123.0123456789"); }); @@ -135,7 +135,7 @@ describe("BigDecimal", () => { locale, // the group separator is different in arabic depending on the numberingSystem numberingSystem: locale === "ar" ? "arab" : "latn", - useGrouping: true + useGrouping: true, }; const parts = new BigDecimal("-12345678.9").formatToParts(numberStringFormatter); @@ -186,7 +186,7 @@ describe("addLocalizedTrailingDecimalZeros", () => { locale, // the group separator is different in arabic depending on the numberingSystem numberingSystem: locale === "ar" ? "arab" : "latn", - useGrouping: true + useGrouping: true, }; const stringWithTrailingZeros = "123456.1000"; @@ -222,7 +222,7 @@ describe("addLocalizedTrailingDecimalZeros", () => { locale, // the group separator is different in arabic depending on the numberingSystem numberingSystem: locale === "ar" ? "arab" : "latn", - useGrouping: true + useGrouping: true, }; const localizedValue = numberStringFormatter.localize("0.001"); expect(addLocalizedTrailingDecimalZeros(localizedValue, "0.001", numberStringFormatter)).toBe(localizedValue); diff --git a/packages/calcite-components/src/utils/openCloseComponent.ts b/packages/calcite-components/src/utils/openCloseComponent.ts index c32a302499f..c76a657b287 100644 --- a/packages/calcite-components/src/utils/openCloseComponent.ts +++ b/packages/calcite-components/src/utils/openCloseComponent.ts @@ -127,7 +127,7 @@ export function connectOpenCloseComponent(component: OpenCloseComponent): void { componentToTransitionListeners.set(component, [ component.transitionEl, boundOnTransitionStart, - boundOnTransitionEnd + boundOnTransitionEnd, ]); component.transitionEl.addEventListener("transitionstart", boundOnTransitionStart); diff --git a/packages/calcite-components/src/utils/resources.ts b/packages/calcite-components/src/utils/resources.ts index 440e7514677..5b7478c3ff5 100644 --- a/packages/calcite-components/src/utils/resources.ts +++ b/packages/calcite-components/src/utils/resources.ts @@ -12,16 +12,16 @@ interface Mode { export const MODES: Mode[] = [ { name: "light", - className: lightMode + className: lightMode, }, { name: "dark", - className: darkMode + className: darkMode, }, { name: "auto", - className: autoMode - } + className: autoMode, + }, ]; export const CSS_UTILITY = { @@ -35,9 +35,9 @@ export const CSS_UTILITY = { calciteAnimateInDown: "calcite-animate__in-down", calciteAnimateInRight: "calcite-animate__in-right", calciteAnimateInLeft: "calcite-animate__in-left", - calciteAnimateInScale: "calcite-animate__in-scale" + calciteAnimateInScale: "calcite-animate__in-scale", }; export const TEXT = { - loading: "Loading" + loading: "Loading", }; diff --git a/packages/calcite-components/src/utils/t9n.ts b/packages/calcite-components/src/utils/t9n.ts index d942cd0cef9..30bfe51febb 100644 --- a/packages/calcite-components/src/utils/t9n.ts +++ b/packages/calcite-components/src/utils/t9n.ts @@ -31,7 +31,7 @@ function throwMessageFetchError(): never { function mergeMessages(component: T9nComponent): void { component.messages = { ...component.defaultMessages, - ...component.messageOverrides + ...component.messageOverrides, }; } diff --git a/packages/calcite-components/src/utils/time.ts b/packages/calcite-components/src/utils/time.ts index 6d7780c4618..b87207c9f55 100644 --- a/packages/calcite-components/src/utils/time.ts +++ b/packages/calcite-components/src/utils/time.ts @@ -35,7 +35,7 @@ function createLocaleDateTimeFormatter( hour: "2-digit", minute: "2-digit", timeZone: "UTC", - numberingSystem: getSupportedNumberingSystem(numberingSystem) + numberingSystem: getSupportedNumberingSystem(numberingSystem), }; if (includeSeconds) { options.second = "2-digit"; @@ -178,7 +178,7 @@ export function localizeTimeString({ value, locale, numberingSystem, - includeSeconds = true + includeSeconds = true, }: LocalizeTimeStringParameters): string { if (!isValidTime(value)) { return null; @@ -198,7 +198,7 @@ interface LocalizeTimeStringToPartsParameters { export function localizeTimeStringToParts({ value, locale, - numberingSystem + numberingSystem, }: LocalizeTimeStringToPartsParameters): LocalizedTime { if (!isValidTime(value)) { return null; @@ -216,7 +216,7 @@ export function localizeTimeStringToParts({ localizedMinuteSuffix: getLocalizedTimePart("minuteSuffix", parts), localizedSecond: getLocalizedTimePart("second", parts), localizedSecondSuffix: getLocalizedTimePart("secondSuffix", parts), - localizedMeridiem: getLocalizedTimePart("meridiem", parts) + localizedMeridiem: getLocalizedTimePart("meridiem", parts), }; } return null; @@ -247,13 +247,13 @@ export function parseTimeString(value: string): Time { return { hour, minute, - second + second, }; } return { hour: null, minute: null, - second: null + second: null, }; } diff --git a/packages/calcite-components/stencil.config.ts b/packages/calcite-components/stencil.config.ts index 9418fda57d0..a2eb79b9988 100644 --- a/packages/calcite-components/stencil.config.ts +++ b/packages/calcite-components/stencil.config.ts @@ -32,8 +32,8 @@ export const create: () => Config = () => ({ "calcite-date-picker", "calcite-date-picker-day", "calcite-date-picker-month", - "calcite-date-picker-month-header" - ] + "calcite-date-picker-month-header", + ], }, { components: ["calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item"] }, { components: ["calcite-fab"] }, @@ -78,7 +78,7 @@ export const create: () => Config = () => ({ { components: ["calcite-tip", "calcite-tip-group", "calcite-tip-manager"] }, { components: ["calcite-tooltip"] }, { components: ["calcite-tree", "calcite-tree-item"] }, - { components: ["calcite-value-list", "calcite-value-list-item"] } + { components: ["calcite-value-list", "calcite-value-list-item"] }, ], outputTargets: [ reactOutputTarget({ @@ -86,7 +86,7 @@ export const create: () => Config = () => ({ proxiesFile: "../calcite-components-react/src/components.ts", excludeComponents: ["context-consumer"], customElementsDir: "dist/components", - includeImportCustomElements: true + includeImportCustomElements: true, }), { type: "dist-hydrate-script" }, { type: "dist-custom-elements", autoDefineCustomElements: true }, @@ -95,7 +95,7 @@ export const create: () => Config = () => ({ { type: "docs-json", file: "./dist/extras/docs-json.json" }, { type: "docs-vscode", - file: "./dist/extras/vscode-data.json" + file: "./dist/extras/vscode-data.json", }, { type: "custom", name: "preact", generator: generatePreactTypes }, { @@ -104,18 +104,18 @@ export const create: () => Config = () => ({ prerenderConfig: "./prerender.config.ts", copy: [ { src: "demos", dest: "demos" }, - { src: "robots.txt", dest: "robots.txt" } + { src: "robots.txt", dest: "robots.txt" }, ], serviceWorker: { - unregister: true - } - } + unregister: true, + }, + }, ], globalStyle: "src/assets/styles/global.scss", globalScript: "src/utils/globalScript.ts", plugins: [ sass({ - injectGlobalPaths: ["src/assets/styles/includes.scss"] + injectGlobalPaths: ["src/assets/styles/includes.scss"], }), postcss({ plugins: [ @@ -123,28 +123,28 @@ export const create: () => Config = () => ({ autoprefixer(), stylelint({ configFile: ".stylelintrc-postcss.json", - fix: true - }) - ] - }) + fix: true, + }), + ], + }), ], testing: { watchPathIgnorePatterns: ["/../../node_modules", "/dist", "/www", "/hydrate"], moduleNameMapper: { "^/assets/(.*)$": "/src/tests/iconPathDataStub.ts", - "^lodash-es$": "lodash" + "^lodash-es$": "lodash", }, - setupFilesAfterEnv: ["/src/tests/setupTests.ts"] + setupFilesAfterEnv: ["/src/tests/setupTests.ts"], }, hydratedFlag: { selector: "attribute", - name: "calcite-hydrated" + name: "calcite-hydrated", }, preamble: `All material copyright ESRI, All Rights Reserved, unless otherwise specified.\nSee https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.\nv${version}`, extras: { experimentalImportInjection: true, - scriptDataOpts: true - } + scriptDataOpts: true, + }, }); export const config = create(); diff --git a/packages/calcite-components/support/generateT9nDocsJSON.ts b/packages/calcite-components/support/generateT9nDocsJSON.ts index 2be3d3dcc30..5bead37100b 100755 --- a/packages/calcite-components/support/generateT9nDocsJSON.ts +++ b/packages/calcite-components/support/generateT9nDocsJSON.ts @@ -4,7 +4,7 @@ const { fileURLToPath } = await import("url"); const { existsSync, - promises: { readFile, readdir, writeFile } + promises: { readFile, readdir, writeFile }, } = await import("fs"); try { const __dirname = dirname(fileURLToPath(import.meta.url)); diff --git a/packages/calcite-components/support/generateT9nTypes.ts b/packages/calcite-components/support/generateT9nTypes.ts index e844d1c5907..e739aa1076a 100644 --- a/packages/calcite-components/support/generateT9nTypes.ts +++ b/packages/calcite-components/support/generateT9nTypes.ts @@ -4,7 +4,7 @@ import { InputData, jsonInputForTargetLanguage, quicktype } from "quicktype-core (async () => { const { - promises: { readFile, writeFile } + promises: { readFile, writeFile }, } = await import("fs"); const rootBundleFile = "messages.json"; @@ -35,8 +35,8 @@ import { InputData, jsonInputForTargetLanguage, quicktype } from "quicktype-core lang: "typescript", inferMaps: false, rendererOptions: { - "just-types": "true" - } + "just-types": "true", + }, }) ).lines .join("\n") @@ -50,7 +50,7 @@ import { InputData, jsonInputForTargetLanguage, quicktype } from "quicktype-core await writeFile( declarationFile, format(typingsContent, { - filepath: declarationFile + filepath: declarationFile, }) ); const t9nPath = `${bundle.split("/t9n")[0]}/t9n`; diff --git a/packages/calcite-components/support/patchESMResolution.ts b/packages/calcite-components/support/patchESMResolution.ts index 709dda0860f..74e6f8ed36d 100644 --- a/packages/calcite-components/support/patchESMResolution.ts +++ b/packages/calcite-components/support/patchESMResolution.ts @@ -2,7 +2,7 @@ // https://github.com/Esri/calcite-design-system/issues/5141 (async function () { const { - promises: { readFile, readdir, writeFile } + promises: { readFile, readdir, writeFile }, } = await import("fs"); const { dirname, normalize } = await import("path"); const { quote } = await import("shell-quote"); diff --git a/packages/calcite-components/support/patchTreeShaking.ts b/packages/calcite-components/support/patchTreeShaking.ts index dc86c4b9013..e1816cb1796 100644 --- a/packages/calcite-components/support/patchTreeShaking.ts +++ b/packages/calcite-components/support/patchTreeShaking.ts @@ -2,7 +2,7 @@ // https://github.com/ionic-team/stencil/issues/3470 (async function () { const { - promises: { readFile, writeFile } + promises: { readFile, writeFile }, } = await import("fs"); const { dirname, normalize } = await import("path"); const { quote } = await import("shell-quote"); diff --git a/packages/calcite-components/support/preact.ts b/packages/calcite-components/support/preact.ts index a05a58eb2e4..d1053d3ba58 100644 --- a/packages/calcite-components/support/preact.ts +++ b/packages/calcite-components/support/preact.ts @@ -1,7 +1,7 @@ import { OutputTargetCustom, OutputTargetDist, - OutputTargetDistTypes + OutputTargetDistTypes, } from "@stencil/core/internal/stencil-public-compiler"; import { join } from "path"; diff --git a/packages/calcite-components/support/syncEnT9nBundles.ts b/packages/calcite-components/support/syncEnT9nBundles.ts index 2c339c0c7eb..e72958b9bd1 100644 --- a/packages/calcite-components/support/syncEnT9nBundles.ts +++ b/packages/calcite-components/support/syncEnT9nBundles.ts @@ -1,6 +1,6 @@ (async function () { const { - promises: { readFile, copyFile } + promises: { readFile, copyFile }, } = await import("fs"); const { resolve, sep, win32 } = await import("path"); diff --git a/packages/calcite-components/tailwind.config.ts b/packages/calcite-components/tailwind.config.ts index e86ba4a2c01..ceb2f1923e1 100644 --- a/packages/calcite-components/tailwind.config.ts +++ b/packages/calcite-components/tailwind.config.ts @@ -2,5 +2,5 @@ import calcitePreset from "./calcite-preset"; export default { presets: [calcitePreset], - content: ["./src/components/**/*.scss"] + content: ["./src/components/**/*.scss"], };