diff --git a/.eslintrc.json b/.eslintrc.json index 8f0ba74d933..72ce9df08c6 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -14,14 +14,23 @@ }, "plugins": ["@typescript-eslint", "eslint-plugin-react", "prettier"], "rules": { + "@stencil/ban-exported-const-enums": "warn", + "@stencil/decorators-style": "warn", "@stencil/own-methods-must-be-private": "off", "@stencil/own-props-must-be-private": "off", + "@stencil/strict-mutable": "warn", + "@stencil/prefer-vdom-listener": "warn", "@stencil/required-jsdoc": "off", "@stencil/strict-boolean-conditions": "off", + "@typescript-eslint/ban-types": "warn", + "@typescript-eslint/explicit-module-boundary-types": "warn", "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/no-use-before-define": ["error", { "functions": false }], - "lines-between-class-members": ["error", "always"], + "@typescript-eslint/no-inferrable-types": "warn", + "@typescript-eslint/no-use-before-define": ["warn", { "functions": false }], + "lines-between-class-members": ["warn", "always"], "no-multiple-empty-lines": ["error", { "max": 1 }], + "no-var": "warn", + "prefer-const": "warn", "react/jsx-uses-react": "error", "react/jsx-uses-vars": "error" }, diff --git a/.lintstagedrc.json b/.lintstagedrc.json index 722a6449a30..b06713e1429 100644 --- a/.lintstagedrc.json +++ b/.lintstagedrc.json @@ -1,5 +1,5 @@ { "*.{json,md}": ["prettier --write"], - "*.scss": ["prettier --write"], - "*.{ts,tsx}": ["prettier --write"] + "*.scss": ["stylelint --fix", "prettier --write"], + "*.{ts,tsx}": ["tslint --project tsconfig-tslint.json --fix", "eslint --ext .ts,.tsx --fix", "prettier --write"] } diff --git a/.stylelintrc.json b/.stylelintrc.json index 00c5ac9753e..79e6ca57662 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,4 +1,5 @@ { + "defaultSeverity": "warning", "extends": "stylelint-config-recommended-scss", "rules": { "declaration-block-semicolon-newline-after": "always-multi-line", diff --git a/.travis.yml b/.travis.yml index 8a941c2c819..456ccb90ec6 100644 --- a/.travis.yml +++ b/.travis.yml @@ -6,6 +6,6 @@ node_js: - lts/* notifications: webhooks: - secure: "NmCqqWhKFtoNofWB8t09v6nTkUCrj5aWKV9/n4rNmdY7ee/gktqehR3P3zfJK1iSlvJ3ewgp/alqCpcgto1mM3QljHp5QAs3f9la8Klqihy5zrRp21N9nsdPJpgLlQd/FhWh5Ss+t0dJ/nPqSWH1j2kvFjjUK1fSxzAIZ2XP/mn9uogmUCiq2uzzmno+ucctgB9c9otAXPFijwTnOYHnUvvcclnUMMR+6hDW+i1rPXE07GslWQKwN4VicKSdC2W5KDEc2xjRbpeVodky6183uVIqB/6cy1t4Q7PiBoRpAQUa9pZBZCUuSQoR++bDIdczMP+LoqZ9IgLEkqneUwEJ4Tv/D1XPGDRyX01Vc86RT/9HAbaPGocpjxH+C/27YgLIZwvMKspd/w4ohJsXKbXf3p+2cRO37vayOt8SXV9l35f5wA4iBM+Pz/EqRZ7iHD/DUnh2MrLeWLmOIGUtjjgIs8r6n/1N3c+3Hv6DdlBnyttDAQX1EPW6rFdxmO4z8/bHdugPrYNsYeJhDWQru2gaQ/zTCgSRucUjjpCQzW0C1AGfp9IkiQ71s+uQJhGrnAkwBrf8qPjsKy2EzooMvQ0K2wPQ+W+ibUjmcThAu8A9wjx0tZDdyTQB8KzoJJvUuphh6V43a5ZWB5PyYbn3ldHBtlzjLno0xWlygvSuf3JHnas=" + secure: "NtIaVttZMs7AUSzJHGriM2fdQcdzpg65d7f/10Hdeu0wSjhmKiV/74QRcwc60MhNdWSxgq4ecdsR/n1Bhm4e5RvPTxLKBZrjeUn72UefZ/B7Kt4QMQWhBMp6AxShsPQNBkSSuk7jL/QrbGuaLBjmquzxJBHp3et9BKth+Ew+T4NQk7J9EqNtrWlipV1acobkQW8nJZEg3Y1bESaVY69ebozVYJMDDjk0SL2XYCUAz2w9aZ2x/sodzjLLxC01Ouxd7G1h/Zvuvvhjqh3UmgH15E1QUcFI7X/zU+bwIg+trndALQbuVBuzSVpWiIM3Pe5+uiBtkSQqQRHkZj91OHDSKjTLwAsWhHHw6d+/GYTaZ0ful2riwxMyXpNR4Zv65aEnYMftZ4hk7okrVwkIBtpiUwwIe/F1RF2h+X0I8ontDevNqd492ZyXFUOtebOiWYOmgJPOso1dAl+ADnkoyJNY14o6ouBl4TPji71T8jGzGVGz3Cn5/Ww8sE60cFgLoHacXxtoe43nsx384skBfGKPrxujj2GoVRRInJCd2jECpNDVTVlXwnojtOoR0LUboJYpVHA40QAcm88YiscY+PZbIreF/kCcxEAmFw95CY5p9op93bfUgbetp7bGkbtAptRtiDA4Wz5EqUSSh5POSKUhCAqMpYU1It1Th7LHqRgelcU=" script: - npm test diff --git a/package.json b/package.json index c6c5e8c5a91..9d08070b165 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,11 @@ "start": "npm run copy-icons && stencil build --dev --watch --serve", "test": "npm run copy-icons && stencil test --spec --e2e", "test.watch": "npm run copy-icons && stencil test --spec --e2e --watchAll", + "lint": "npm-run-all --parallel lint:*", + "lint:ts": "concurrently \"tslint --project tsconfig-tslint.json\" \"eslint --ext .ts,.tsx .\"", + "lint:styles": "stylelint \"src/**/*.scss\"", "posttest": "stencil build --prerender", - "prettier": "npm-run-all --parallel prettier:**", + "prettier": "npm-run-all --parallel prettier:*", "prettier:ts": "prettier --write \"src/**/*.ts?(x)\"", "prettier:styles": "prettier --write \"src/**/*.scss\"", "release:prepare": "npm version prerelease --preid=beta --no-git-tag-version ", diff --git a/src/components/calcite-accordion-item/calcite-accordion-item.tsx b/src/components/calcite-accordion-item/calcite-accordion-item.tsx index 9e5e2d5f314..123a9b5e605 100644 --- a/src/components/calcite-accordion-item/calcite-accordion-item.tsx +++ b/src/components/calcite-accordion-item/calcite-accordion-item.tsx @@ -1,20 +1,11 @@ -import { - Component, - Element, - Event, - EventEmitter, - h, - Host, - Listen, - Prop, -} from "@stencil/core"; +import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop } from "@stencil/core"; import { getElementDir, getElementProp } from "../../utils/dom"; import { getKey } from "../../utils/key"; @Component({ tag: "calcite-accordion-item", styleUrl: "calcite-accordion-item.scss", - shadow: true, + shadow: true }) export class CalciteAccordionItem { //-------------------------------------------------------------------------- @@ -23,7 +14,7 @@ export class CalciteAccordionItem { // //-------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalciteAccordionItemElement; //-------------------------------------------------------------------------- // @@ -31,7 +22,7 @@ export class CalciteAccordionItem { // //-------------------------------------------------------------------------- - @Prop({ reflect: true, mutable: true }) active: boolean = false; + @Prop({ reflect: true, mutable: true }) active = false; /** pass a title for the accordion item */ @Prop() itemTitle?: string; @@ -49,8 +40,11 @@ export class CalciteAccordionItem { //-------------------------------------------------------------------------- @Event() calciteAccordionItemKeyEvent: EventEmitter; + @Event() calciteAccordionItemSelect: EventEmitter; + @Event() calciteAccordionItemClose: EventEmitter; + @Event() calciteAccordionItemRegister: EventEmitter; //-------------------------------------------------------------------------- @@ -63,7 +57,7 @@ export class CalciteAccordionItem { this.itemPosition = this.getItemPosition(); this.calciteAccordionItemRegister.emit({ parent: this.parent, - position: this.itemPosition, + position: this.itemPosition }); } @@ -71,13 +65,7 @@ export class CalciteAccordionItem { const dir = getElementDir(this.el); const iconScale = this.scale !== "l" ? "s" : "m"; - const iconEl = ( - - ); + const iconEl = ; return ( -
+
{this.icon ? iconEl : null}
{this.itemTitle} @@ -136,7 +121,7 @@ export class CalciteAccordionItem { case "End": this.calciteAccordionItemKeyEvent.emit({ parent: this.parent, - item: e, + item: e }); e.preventDefault(); break; @@ -161,7 +146,7 @@ export class CalciteAccordionItem { private parent = this.el.parentElement as HTMLCalciteAccordionElement; /** position within parent */ - private itemPosition: Number; + private itemPosition: number; /** the latest requested item */ private requestedAccordionItem: HTMLCalciteAccordionItemElement; @@ -205,7 +190,7 @@ export class CalciteAccordionItem { private emitRequestedItem() { this.calciteAccordionItemSelect.emit({ - requestedAccordionItem: this.el as HTMLCalciteAccordionItemElement, + requestedAccordionItem: this.el as HTMLCalciteAccordionItemElement }); } diff --git a/src/components/calcite-accordion/calcite-accordion.tsx b/src/components/calcite-accordion/calcite-accordion.tsx index e7e2724150c..8da4acdc292 100644 --- a/src/components/calcite-accordion/calcite-accordion.tsx +++ b/src/components/calcite-accordion/calcite-accordion.tsx @@ -1,19 +1,10 @@ -import { - Component, - Element, - Event, - EventEmitter, - h, - Host, - Listen, - Prop, -} from "@stencil/core"; +import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop } from "@stencil/core"; import { getKey } from "../../utils/key"; @Component({ tag: "calcite-accordion", styleUrl: "calcite-accordion.scss", - shadow: true, + shadow: true }) export class CalciteAccordion { //-------------------------------------------------------------------------- @@ -22,7 +13,7 @@ export class CalciteAccordion { // //-------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalciteAccordionElement; //-------------------------------------------------------------------------- // @@ -37,26 +28,19 @@ export class CalciteAccordion { @Prop({ mutable: true, reflect: true }) scale: "s" | "m" | "l" = "m"; /** specify the appearance - default (containing border), or minimal (no containing border), defaults to default */ - @Prop({ mutable: true, reflect: true }) appearance: - | "default" - | "minimal" - | "transparent" = "default"; + @Prop({ mutable: true, reflect: true }) appearance: "default" | "minimal" | "transparent" = + "default"; /** specify the placement of the icon in the header, defaults to end */ @Prop({ mutable: true, reflect: true }) iconPosition: "start" | "end" = "end"; /** specify the type of the icon in the header, defaults to chevron */ - @Prop({ mutable: true, reflect: true }) iconType: - | "chevron" - | "caret" - | "plus-minus" = "chevron"; + @Prop({ mutable: true, reflect: true }) iconType: "chevron" | "caret" | "plus-minus" = "chevron"; /** specify the selection mode - multi (allow any number of open items), single (allow one open item), * or single-persist (allow and require one open item), defaults to multi */ - @Prop({ mutable: true, reflect: true }) selectionMode: - | "multi" - | "single" - | "single-persist" = "multi"; + @Prop({ mutable: true, reflect: true }) selectionMode: "multi" | "single" | "single-persist" = + "multi"; //-------------------------------------------------------------------------- // @@ -74,21 +58,20 @@ export class CalciteAccordion { connectedCallback() { // validate props - let appearance = ["default", "minimal", "transparent"]; + const appearance = ["default", "minimal", "transparent"]; if (!appearance.includes(this.appearance)) this.appearance = "default"; - let iconPosition = ["start", "end"]; + const iconPosition = ["start", "end"]; if (!iconPosition.includes(this.iconPosition)) this.iconPosition = "end"; - let iconType = ["chevron", "caret", "plus-minus"]; + const iconType = ["chevron", "caret", "plus-minus"]; if (!iconType.includes(this.iconType)) this.iconType = "chevron"; - let scale = ["s", "m", "l"]; + const scale = ["s", "m", "l"]; if (!scale.includes(this.scale)) this.scale = "m"; - let selectionMode = ["multi", "single", "single-persist"]; - if (!selectionMode.includes(this.selectionMode)) - this.selectionMode = "multi"; + const selectionMode = ["multi", "single", "single-persist"]; + if (!selectionMode.includes(this.selectionMode)) this.selectionMode = "multi"; } componentDidLoad() { @@ -112,16 +95,14 @@ export class CalciteAccordion { // //-------------------------------------------------------------------------- - @Listen("calciteAccordionItemKeyEvent") calciteAccordionItemKeyEvent( - e: CustomEvent - ) { + @Listen("calciteAccordionItemKeyEvent") calciteAccordionItemKeyEvent(e: CustomEvent) { const item = e.detail.item; const parent = e.detail.parent as HTMLCalciteAccordionElement; if (this.el === parent) { const key = getKey(item.key); - let itemToFocus = e.target; - let isFirstItem = this.itemIndex(itemToFocus) === 0; - let isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1; + const itemToFocus = e.target; + const isFirstItem = this.itemIndex(itemToFocus) === 0; + const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1; switch (key) { case "ArrowDown": if (isLastItem) this.focusFirstItem(); @@ -141,23 +122,19 @@ export class CalciteAccordion { } } - @Listen("calciteAccordionItemRegister") registerCalciteAccordionItem( - e: CustomEvent - ) { + @Listen("calciteAccordionItemRegister") registerCalciteAccordionItem(e: CustomEvent) { const item = { item: e.target as HTMLCalciteAccordionItemElement, parent: e.detail.parent as HTMLCalciteAccordionElement, - position: e.detail.position as Number, + position: e.detail.position as number }; if (this.el === item.parent) this.items.push(item); } - @Listen("calciteAccordionItemSelect") updateActiveItemOnChange( - event: CustomEvent - ) { + @Listen("calciteAccordionItemSelect") updateActiveItemOnChange(event: CustomEvent) { this.requestedAccordionItem = event.detail.requestedAccordionItem; this.calciteAccordionChange.emit({ - requestedAccordionItem: this.requestedAccordionItem, + requestedAccordionItem: this.requestedAccordionItem }); } diff --git a/src/components/calcite-alert/calcite-alert.tsx b/src/components/calcite-alert/calcite-alert.tsx index 7a3e7d35660..e58704d562f 100644 --- a/src/components/calcite-alert/calcite-alert.tsx +++ b/src/components/calcite-alert/calcite-alert.tsx @@ -36,7 +36,7 @@ export class CalciteAlert { // //-------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalciteAlertElement; //-------------------------------------------------------------------------- // @@ -45,10 +45,10 @@ export class CalciteAlert { //--------------------------------------------------------------------------- /** Is the alert currently active or not */ - @Prop({ reflect: true, mutable: true }) active: boolean = false; + @Prop({ reflect: true, mutable: true }) active = false; /** Close the alert automatically (recommended for passive, non-blocking alerts) */ - @Prop() autoDismiss: boolean = false; + @Prop() autoDismiss = false; /** Duration of autoDismiss (only used with `autoDismiss`) */ @Prop({ reflect: true, mutable: true }) autoDismissDuration: "fast" | "medium" | "slow" = this @@ -66,7 +66,7 @@ export class CalciteAlert { @Prop({ mutable: true, reflect: true }) scale: "s" | "m" | "l" = "m"; /** specify if the alert should display an icon */ - @Prop() icon: boolean = false; + @Prop() icon = false; /** string to override English close text */ @Prop() intlClose: string = TEXT.intlClose; @@ -79,13 +79,13 @@ export class CalciteAlert { connectedCallback() { // prop validations - let colors = ["blue", "red", "green", "yellow"]; + const colors = ["blue", "red", "green", "yellow"]; if (!colors.includes(this.color)) this.color = "blue"; - let scale = ["s", "m", "l"]; + const scale = ["s", "m", "l"]; if (!scale.includes(this.scale)) this.scale = "m"; - let durations = ["slow", "medium", "fast"]; + const durations = ["slow", "medium", "fast"]; if (this.autoDismissDuration !== null && !durations.includes(this.autoDismissDuration)) { this.autoDismissDuration = "medium"; } @@ -184,10 +184,10 @@ export class CalciteAlert { @State() queue: HTMLCalciteAlertElement[] = []; /** the count of queued alerts */ - @State() queueLength: number = 0; + @State() queueLength = 0; /** is the alert queued */ - @State() queued: boolean = false; + @State() queued = false; /** the close button element */ private closeButton?: HTMLButtonElement; @@ -264,7 +264,7 @@ export class CalciteAlert { } private setIcon() { - var path = this.iconDefaults[this.color]; + const path = this.iconDefaults[this.color]; return (
diff --git a/src/components/calcite-button/calcite-button.tsx b/src/components/calcite-button/calcite-button.tsx index 038a9848e11..1d5663167ea 100644 --- a/src/components/calcite-button/calcite-button.tsx +++ b/src/components/calcite-button/calcite-button.tsx @@ -20,7 +20,7 @@ export class CalciteButton { // //-------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalciteButtonElement; //-------------------------------------------------------------------------- // @@ -77,16 +77,16 @@ export class CalciteButton { connectedCallback() { // prop validations - let appearance = ["solid", "outline", "clear", "transparent"]; + const appearance = ["solid", "outline", "clear", "transparent"]; if (!appearance.includes(this.appearance)) this.appearance = "solid"; - let color = ["blue", "red", "dark", "light"]; + const color = ["blue", "red", "dark", "light"]; if (!color.includes(this.color)) this.color = "blue"; - let scale = ["s", "m", "l"]; + const scale = ["s", "m", "l"]; if (!scale.includes(this.scale)) this.scale = "m"; - let width = ["auto", "half", "full"]; + const width = ["auto", "half", "full"]; if (!width.includes(this.width)) this.width = "auto"; this.childElType = this.href ? "a" : "button"; @@ -195,7 +195,7 @@ export class CalciteButton { private getAttributes() { // spread attributes from the component to rendered child, filtering out props - let props = [ + const props = [ "appearance", "color", "dir", diff --git a/src/components/calcite-card/calcite-card.tsx b/src/components/calcite-card/calcite-card.tsx index 5fcdd8cbbcf..145484f5246 100644 --- a/src/components/calcite-card/calcite-card.tsx +++ b/src/components/calcite-card/calcite-card.tsx @@ -37,13 +37,13 @@ export class CalciteCard { //-------------------------------------------------------------------------- /** When true, the cards content is waiting to be loaded. This state shows a busy indicator.*/ - @Prop({ reflect: true }) loading: boolean = false; + @Prop({ reflect: true }) loading = false; /** Indicates whether the card is selected. */ - @Prop({ reflect: true, mutable: true }) selected: boolean = false; + @Prop({ reflect: true, mutable: true }) selected = false; /** Indicates whether the card is selectable. */ - @Prop({ reflect: true, mutable: true }) selectable: boolean = false; + @Prop({ reflect: true, mutable: true }) selectable = false; /** The theme of the card.*/ @Prop({ reflect: true, mutable: true }) theme: "light" | "dark"; diff --git a/src/components/calcite-chip/calcite-chip.tsx b/src/components/calcite-chip/calcite-chip.tsx index 23702e6bf5f..406c6196fb5 100644 --- a/src/components/calcite-chip/calcite-chip.tsx +++ b/src/components/calcite-chip/calcite-chip.tsx @@ -1,19 +1,11 @@ -import { - Component, - h, - Host, - Prop, - Event, - EventEmitter, - Element, -} from "@stencil/core"; +import { Component, h, Host, Prop, Event, EventEmitter, Element } from "@stencil/core"; import { getElementDir } from "../../utils/dom"; import { CSS, TEXT } from "./resources"; @Component({ tag: "calcite-chip", styleUrl: "calcite-chip.scss", - shadow: true, + shadow: true }) export class CalciteChip { //-------------------------------------------------------------------------- @@ -30,16 +22,11 @@ export class CalciteChip { @Prop({ reflect: true }) scale: "s" | "m" | "l" = "m"; /** specify the color of the button, defaults to blue */ - @Prop({ mutable: true, reflect: true }) color: - | "blue" - | "red" - | "yellow" - | "green" - | "grey" = "grey"; + @Prop({ mutable: true, reflect: true }) color: "blue" | "red" | "yellow" | "green" | "grey" = + "grey"; /** specify the appearance style of the button, defaults to solid. */ - @Prop({ mutable: true, reflect: true }) appearance: "solid" | "clear" = - "solid"; + @Prop({ mutable: true, reflect: true }) appearance: "solid" | "clear" = "solid"; /** optionally pass an icon to display - accepts Calcite UI icon names */ @Prop({ reflect: true }) icon?: string; @@ -53,7 +40,7 @@ export class CalciteChip { // // -------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalciteChipElement; // -------------------------------------------------------------------------- // @@ -82,13 +69,13 @@ export class CalciteChip { //-------------------------------------------------------------------------- connectedCallback() { // prop validations - let scale = ["s", "m", "l"]; + const scale = ["s", "m", "l"]; if (!scale.includes(this.scale)) this.scale = "m"; - let appearance = ["solid", "clear"]; + const appearance = ["solid", "clear"]; if (!appearance.includes(this.appearance)) this.appearance = "solid"; - let color = ["blue", "green", "grey", "yellow", "red"]; + const color = ["blue", "green", "grey", "yellow", "red"]; if (!color.includes(this.color)) this.color = "grey"; } @@ -96,20 +83,10 @@ export class CalciteChip { const dir = getElementDir(this.el); const iconScale = this.scale !== "l" ? "s" : "m"; - const iconEl = ( - - ); + const iconEl = ; const closeButton = ( - ); diff --git a/src/components/calcite-color/calcite-color.e2e.ts b/src/components/calcite-color/calcite-color.e2e.ts index 996109aa76a..369101b39f1 100644 --- a/src/components/calcite-color/calcite-color.e2e.ts +++ b/src/components/calcite-color/calcite-color.e2e.ts @@ -415,7 +415,7 @@ describe("calcite-color", () => { await page.waitForChanges(); await saveColor.click(); - let savedColors = await page.findAll(`calcite-color >>> .${CSS.savedColors} calcite-color-swatch`); + const savedColors = await page.findAll(`calcite-color >>> .${CSS.savedColors} calcite-color-swatch`); expect(savedColors).toHaveLength(3); }); diff --git a/src/components/calcite-color/calcite-color.tsx b/src/components/calcite-color/calcite-color.tsx index 9faadc7fa0c..c078527159e 100644 --- a/src/components/calcite-color/calcite-color.tsx +++ b/src/components/calcite-color/calcite-color.tsx @@ -39,7 +39,7 @@ export class CalciteColor { //-------------------------------------------------------------------------- @Element() - el: HTMLDivElement; + el: HTMLCalciteColorElement; //-------------------------------------------------------------------------- // diff --git a/src/components/calcite-color/utils.ts b/src/components/calcite-color/utils.ts index b62198b8242..540db8a5743 100644 --- a/src/components/calcite-color/utils.ts +++ b/src/components/calcite-color/utils.ts @@ -9,9 +9,9 @@ export function rgbToHex(color: RGB): string { .padStart(2, "0")}`.toLowerCase(); } -export const hexChar: RegExp = /^[0-9A-F]{1}$/i; -const shortHandHex: RegExp = /^#[0-9A-F]{3}$/i; -const longhandHex: RegExp = /^#[0-9A-F]{6}$/i; +export const hexChar = /^[0-9A-F]{1}$/i; +const shortHandHex = /^#[0-9A-F]{3}$/i; +const longhandHex = /^#[0-9A-F]{6}$/i; export function isValidHex(hex: string): boolean { return isShorthandHex(hex) || isLonghandHex(hex); diff --git a/src/components/calcite-combobox-item/calcite-combobox-item.tsx b/src/components/calcite-combobox-item/calcite-combobox-item.tsx index 2b20dd0b7a4..5103847fe64 100644 --- a/src/components/calcite-combobox-item/calcite-combobox-item.tsx +++ b/src/components/calcite-combobox-item/calcite-combobox-item.tsx @@ -10,7 +10,7 @@ import { h, State, Watch, - VNode, + VNode } from "@stencil/core"; import { getElementDir, getElementProp } from "../../utils/dom"; import { CSS } from "./resources"; @@ -19,7 +19,7 @@ import { getKey } from "../../utils/key"; @Component({ tag: "calcite-combobox-item", styleUrl: "./calcite-combobox-item.scss", - shadow: true, + shadow: true }) export class CalciteComboboxItem { // -------------------------------------------------------------------------- @@ -53,7 +53,7 @@ export class CalciteComboboxItem { // // -------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalciteComboboxItemElement; @State() isSelected = this.selected; @@ -85,6 +85,7 @@ export class CalciteComboboxItem { * @event calciteComboboxItemChange */ @Event() calciteComboboxItemChange: EventEmitter; + @Event() calciteComboboxItemKeyEvent: EventEmitter; // -------------------------------------------------------------------------- @@ -110,7 +111,7 @@ export class CalciteComboboxItem { case "Escape": this.calciteComboboxItemKeyEvent.emit({ event: event, - item: this.el, + item: this.el }); event.preventDefault(); break; @@ -181,7 +182,7 @@ export class CalciteComboboxItem { [CSS.label]: true, [CSS.selected]: this.isSelected, [CSS.nested]: this.isNested, - [CSS.parent]: !this.isNested, + [CSS.parent]: !this.isNested }; const scale = getElementProp(this.el, "scale", "m"); const dir = getElementDir(this.el); diff --git a/src/components/calcite-combobox/calcite-combobox.tsx b/src/components/calcite-combobox/calcite-combobox.tsx index 88fad3f99ce..6ce47375218 100644 --- a/src/components/calcite-combobox/calcite-combobox.tsx +++ b/src/components/calcite-combobox/calcite-combobox.tsx @@ -55,7 +55,7 @@ export class CalciteCombobox { // // -------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalciteComboboxElement; @State() items: HTMLCalciteComboboxItemElement[] = []; @@ -77,7 +77,7 @@ export class CalciteCombobox { connectedCallback() { // prop validations - let scale = ["s", "m", "l"]; + const scale = ["s", "m", "l"]; if (!scale.includes(this.scale)) this.scale = "m"; if (Build.isBrowser) { this.observer = new MutationObserver(this.updateItems); @@ -103,6 +103,7 @@ export class CalciteCombobox { // -------------------------------------------------------------------------- @Event() calciteLookupChange: EventEmitter; + @Event() calciteComboboxChipDismiss: EventEmitter; @Listen("calciteComboboxItemChange") calciteComboboxItemChangeHandler( @@ -226,8 +227,8 @@ export class CalciteCombobox { }> ): void { const { item, event: keyboardEvent } = event.detail; - let isFirstItem = this.itemIndex(item) === 0; - let isLastItem = this.itemIndex(item) === this.items.length - 1; + const isFirstItem = this.itemIndex(item) === 0; + const isLastItem = this.itemIndex(item) === this.items.length - 1; const shiftKey = keyboardEvent.shiftKey; const keyCode = getKey(keyboardEvent.key); switch (keyCode) { diff --git a/src/components/calcite-date-day/calcite-date-day.tsx b/src/components/calcite-date-day/calcite-date-day.tsx index da49a89ac2e..ce1c8320097 100644 --- a/src/components/calcite-date-day/calcite-date-day.tsx +++ b/src/components/calcite-date-day/calcite-date-day.tsx @@ -1,19 +1,10 @@ -import { - Component, - Element, - Prop, - Host, - Event, - EventEmitter, - Listen, - h, -} from "@stencil/core"; +import { Component, Element, Prop, Host, Event, EventEmitter, Listen, h } from "@stencil/core"; import { getKey } from "../../utils/key"; @Component({ tag: "calcite-date-day", styleUrl: "calcite-date-day.scss", - shadow: true, + shadow: true }) export class CalciteDateDay { //-------------------------------------------------------------------------- @@ -22,7 +13,7 @@ export class CalciteDateDay { // //-------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalciteDateDayElement; //-------------------------------------------------------------------------- // @@ -32,16 +23,22 @@ export class CalciteDateDay { /** Day of the month to be shown. */ @Prop() day: number; + /** Date is outside of range and can't be selected */ - @Prop({ reflect: true }) disabled: boolean = false; + @Prop({ reflect: true }) disabled = false; + /** Date is in the current month. */ - @Prop({ reflect: true }) currentMonth: boolean = false; + @Prop({ reflect: true }) currentMonth = false; + /** Date is the current selected date of the picker */ - @Prop({ reflect: true }) selected: boolean = false; + @Prop({ reflect: true }) selected = false; + /** Date is actively in focus for keyboard navigation */ - @Prop({ reflect: true }) active: boolean = false; + @Prop({ reflect: true }) active = false; + /** Locale to display the day in */ @Prop() locale: string; + /** specify the scale of the date picker */ @Prop({ reflect: true }) scale: "s" | "m" | "l"; diff --git a/src/components/calcite-date-month-header/calcite-date-month-header.tsx b/src/components/calcite-date-month-header/calcite-date-month-header.tsx index 89e4819559b..6e361a76856 100644 --- a/src/components/calcite-date-month-header/calcite-date-month-header.tsx +++ b/src/components/calcite-date-month-header/calcite-date-month-header.tsx @@ -16,7 +16,7 @@ export class CalciteDateMonthHeader { // //-------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalciteDateMonthHeaderElement; //-------------------------------------------------------------------------- // @@ -26,18 +26,25 @@ export class CalciteDateMonthHeader { /** Already selected date. */ @Prop() selectedDate: Date; + /** Focused date with indicator (will become selected date if user proceeds) */ @Prop() activeDate: Date; + /** Minimum date of the calendar below which is disabled. */ @Prop() min: Date; + /** Maximum date of the calendar above which is disabled. */ @Prop() max: Date; + /** User's language and region as BCP 47 formatted string. */ @Prop() locale: string; + /** Localized string for previous month. */ @Prop() intlPrevMonth: string; + /** Localized string for next month. */ @Prop() intlNextMonth: string; + /** specify the scale of the date picker */ @Prop({ reflect: true }) scale: "s" | "m" | "l"; @@ -139,7 +146,7 @@ export class CalciteDateMonthHeader { * Parse localized year string from input, * set to active if in range */ - private setYear(localizedYear: string, increment: number = 0) { + private setYear(localizedYear: string, increment = 0) { const { min, max, activeDate, locale, yearInput } = this; const parsedYear = parseInt(replaceArabicNumerals(localizedYear)); const length = parsedYear.toString().length; diff --git a/src/components/calcite-date-month/calcite-date-month.tsx b/src/components/calcite-date-month/calcite-date-month.tsx index 9c56d2e04c6..764ea8f3235 100644 --- a/src/components/calcite-date-month/calcite-date-month.tsx +++ b/src/components/calcite-date-month/calcite-date-month.tsx @@ -1,13 +1,4 @@ -import { - Component, - Element, - Prop, - Host, - Event, - EventEmitter, - h, - Listen, -} from "@stencil/core"; +import { Component, Element, Prop, Host, Event, EventEmitter, h, Listen } from "@stencil/core"; import { getFirstDayOfWeek, getLocalizedWeekdays } from "../../utils/locale"; import { inRange, sameDate, dateFromRange } from "../../utils/date"; import { getKey } from "../../utils/key"; @@ -15,7 +6,7 @@ import { getKey } from "../../utils/key"; @Component({ tag: "calcite-date-month", styleUrl: "calcite-date-month.scss", - shadow: true, + shadow: true }) export class CalciteDateMonth { //-------------------------------------------------------------------------- @@ -24,7 +15,7 @@ export class CalciteDateMonth { // //-------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalciteDateMonthElement; //-------------------------------------------------------------------------- // @@ -34,14 +25,19 @@ export class CalciteDateMonth { /** Already selected date.*/ @Prop() selectedDate: Date; + /** Date currently active.*/ @Prop() activeDate: Date = new Date(); + /** Minimum date of the calendar below which is disabled.*/ @Prop() min: Date; + /** Maximum date of the calendar above which is disabled.*/ @Prop() max: Date; + /** User's language and region as BCP 47 formatted string. */ - @Prop() locale: string = "en-US"; + @Prop() locale = "en-US"; + /** specify the scale of the date picker */ @Prop({ reflect: true }) scale: "s" | "m" | "l"; @@ -55,6 +51,7 @@ export class CalciteDateMonth { * Event emitted when user selects the date. */ @Event() calciteDateSelect: EventEmitter; + /** * Active date for the user keyboard access. */ @@ -101,11 +98,7 @@ export class CalciteDateMonth { case "End": e.preventDefault(); this.activeDate.setDate( - new Date( - this.activeDate.getFullYear(), - this.activeDate.getMonth() + 1, - 0 - ).getDate() + new Date(this.activeDate.getFullYear(), this.activeDate.getMonth() + 1, 0).getDate() ); this.addDays(); break; @@ -136,10 +129,7 @@ export class CalciteDateMonth { const month = this.activeDate.getMonth(); const year = this.activeDate.getFullYear(); const startOfWeek = getFirstDayOfWeek(this.locale); - const weekDays = getLocalizedWeekdays( - this.locale, - this.scale === "s" ? "narrow" : "short" - ); + const weekDays = getLocalizedWeekdays(this.locale, this.scale === "s" ? "narrow" : "short"); const curMonDays = this.getCurrentMonthDays(month, year); const prevMonDays = this.getPrevMonthdays(month, year, startOfWeek); const nextMonDays = this.getNextMonthDays(month, year, startOfWeek); @@ -191,7 +181,7 @@ export class CalciteDateMonth { locale={this.locale} /> ); - }), + }) ]; const weeks = []; @@ -237,32 +227,24 @@ export class CalciteDateMonth { private addMonths(step: number) { const nextDate = new Date(this.activeDate); nextDate.setMonth(this.activeDate.getMonth() + step); - this.calciteActiveDateChange.emit( - dateFromRange(nextDate, this.min, this.max) - ); + this.calciteActiveDateChange.emit(dateFromRange(nextDate, this.min, this.max)); this.activeFocus = true; } /** * Add n days to the current date */ - private addDays(step: number = 0) { + private addDays(step = 0) { const nextDate = new Date(this.activeDate); nextDate.setDate(this.activeDate.getDate() + step); - this.calciteActiveDateChange.emit( - dateFromRange(nextDate, this.min, this.max) - ); + this.calciteActiveDateChange.emit(dateFromRange(nextDate, this.min, this.max)); this.activeFocus = true; } /** * Get dates for last days of the previous month */ - private getPrevMonthdays( - month: number, - year: number, - startOfWeek: number - ): number[] { + private getPrevMonthdays(month: number, year: number, startOfWeek: number): number[] { const lastDate = new Date(year, month, 0); const date = lastDate.getDate(); const day = lastDate.getDay(); @@ -291,11 +273,7 @@ export class CalciteDateMonth { /** * Get dates for first days of the next month */ - private getNextMonthDays( - month: number, - year: number, - startOfWeek: number - ): number[] { + private getNextMonthDays(month: number, year: number, startOfWeek: number): number[] { const endDay = new Date(year, month + 1, 0).getDay(); const days = []; if (endDay === (startOfWeek + 6) % 7) { diff --git a/src/components/calcite-date/calcite-date.tsx b/src/components/calcite-date/calcite-date.tsx index 33993e65fe8..4bc98f10398 100644 --- a/src/components/calcite-date/calcite-date.tsx +++ b/src/components/calcite-date/calcite-date.tsx @@ -27,7 +27,7 @@ export class CalciteDate { // Element // //-------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalciteDateElement; //-------------------------------------------------------------------------- // @@ -36,22 +36,31 @@ export class CalciteDate { //-------------------------------------------------------------------------- /** Selected date */ @Prop({ reflect: true, mutable: true }) value?: string; + /** Selected date as full date object*/ @Prop({ mutable: true }) valueAsDate?: Date; + /** Earliest allowed date ("yyyy-mm-dd") */ @Prop() min?: string; + /** Latest allowed date ("yyyy-mm-dd") */ @Prop() max?: string; + /** Expand or collapse when calendar does not have input */ - @Prop({ reflect: true }) active: boolean = false; + @Prop({ reflect: true }) active = false; + /** Localized string for "previous month" */ @Prop() intlPrevMonth?: string = TEXT.prevMonth; + /** Localized string for "next month" */ @Prop() intlNextMonth?: string = TEXT.nextMonth; + /** BCP 47 language tag for desired language and country format */ @Prop() locale?: string = "en-US"; + /** Show only calendar popup */ @Prop() noCalendarInput?: boolean = false; + /** specify the scale of the date picker */ @Prop({ reflect: true }) scale: "s" | "m" | "l" = "m"; @@ -184,8 +193,11 @@ export class CalciteDate { // //-------------------------------------------------------------------------- private localeData: DateFormattingData = getLocaleFormatData(this.locale); + private hasShadow: boolean = Build.isBrowser && !!document.head.attachShadow; + private inputProxy: HTMLInputElement; + private observer: MutationObserver; //-------------------------------------------------------------------------- diff --git a/src/components/calcite-dropdown-group/calcite-dropdown-group.tsx b/src/components/calcite-dropdown-group/calcite-dropdown-group.tsx index f62d063916e..2e7f3f6af63 100644 --- a/src/components/calcite-dropdown-group/calcite-dropdown-group.tsx +++ b/src/components/calcite-dropdown-group/calcite-dropdown-group.tsx @@ -1,19 +1,10 @@ -import { - Component, - Element, - Event, - EventEmitter, - h, - Host, - Listen, - Prop, -} from "@stencil/core"; +import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop } from "@stencil/core"; import { GroupRegistration, ItemRegistration } from "../../interfaces/Dropdown"; @Component({ tag: "calcite-dropdown-group", styleUrl: "calcite-dropdown-group.scss", - shadow: true, + shadow: true }) export class CalciteDropdownGroup { //-------------------------------------------------------------------------- @@ -34,10 +25,7 @@ export class CalciteDropdownGroup { /** specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item), none (no active items), defaults to single */ - @Prop({ mutable: true, reflect: true }) selectionMode: - | "multi" - | "single" - | "none" = "single"; + @Prop({ mutable: true, reflect: true }) selectionMode: "multi" | "single" | "none" = "single"; //-------------------------------------------------------------------------- // @@ -46,6 +34,7 @@ export class CalciteDropdownGroup { //-------------------------------------------------------------------------- @Event() calciteDropdownGroupRegister: EventEmitter; + @Event() calciteDropdownItemChange: EventEmitter; //-------------------------------------------------------------------------- @@ -56,9 +45,8 @@ export class CalciteDropdownGroup { connectedCallback() { // validate props - let selectionMode = ["multi", "single", "none"]; - if (!selectionMode.includes(this.selectionMode)) - this.selectionMode = "single"; + const selectionMode = ["multi", "single", "none"]; + if (!selectionMode.includes(this.selectionMode)) this.selectionMode = "single"; } componentDidLoad() { @@ -68,7 +56,7 @@ export class CalciteDropdownGroup { items: this.items, position: this.groupPosition, group: this.el, - titleEl: this.titleEl, + titleEl: this.titleEl }); } @@ -104,20 +92,18 @@ export class CalciteDropdownGroup { this.items.push({ item, - position: event.detail.position, + position: event.detail.position }); event.stopPropagation(); } - @Listen("calciteDropdownItemSelect") updateActiveItemOnChange( - event: CustomEvent - ) { + @Listen("calciteDropdownItemSelect") updateActiveItemOnChange(event: CustomEvent) { this.requestedDropdownGroup = event.detail.requestedDropdownGroup; this.requestedDropdownItem = event.detail.requestedDropdownItem; this.calciteDropdownItemChange.emit({ requestedDropdownGroup: this.requestedDropdownGroup, - requestedDropdownItem: this.requestedDropdownItem, + requestedDropdownItem: this.requestedDropdownItem }); } diff --git a/src/components/calcite-dropdown-item/calcite-dropdown-item.tsx b/src/components/calcite-dropdown-item/calcite-dropdown-item.tsx index e9255a6b669..a227674c415 100644 --- a/src/components/calcite-dropdown-item/calcite-dropdown-item.tsx +++ b/src/components/calcite-dropdown-item/calcite-dropdown-item.tsx @@ -33,7 +33,7 @@ export class CalciteDropdownItem { // //-------------------------------------------------------------------------- - @Prop({ reflect: true, mutable: true }) active: boolean = false; + @Prop({ reflect: true, mutable: true }) active = false; /** optionally pass an icon to display at the start of an item - accepts calcite ui icon names */ @Prop({ reflect: true }) iconStart?: string; diff --git a/src/components/calcite-dropdown/calcite-dropdown.tsx b/src/components/calcite-dropdown/calcite-dropdown.tsx index 96269137175..1e7ac96b317 100644 --- a/src/components/calcite-dropdown/calcite-dropdown.tsx +++ b/src/components/calcite-dropdown/calcite-dropdown.tsx @@ -23,13 +23,13 @@ export class CalciteDropdown { // //-------------------------------------------------------------------------- - @Prop({ reflect: true, mutable: true }) active: boolean = false; + @Prop({ reflect: true, mutable: true }) active = false; /** specify the alignment of dropdown, defaults to start */ @Prop({ mutable: true, reflect: true }) alignment: "start" | "center" | "end" = "start"; /** specify the max items to display before showing the scroller, must be greater than 0 **/ - @Prop() maxItems: number = 0; + @Prop() maxItems = 0; /** specify the theme of the dropdown, defaults to light */ @Prop({ mutable: true, reflect: true }) theme: "light" | "dark"; @@ -55,7 +55,7 @@ export class CalciteDropdown { if the selection-mode of the selected item's containing group is "none", the dropdown will always close */ - @Prop({ mutable: true, reflect: true }) disableCloseOnSelect: boolean = false; + @Prop({ mutable: true, reflect: true }) disableCloseOnSelect = false; /** is the dropdown disabled */ @Prop({ reflect: true }) disabled?: boolean; @@ -67,16 +67,16 @@ export class CalciteDropdown { connectedCallback() { // validate props - let alignment = ["start", "center", "end"]; + const alignment = ["start", "center", "end"]; if (!alignment.includes(this.alignment)) this.alignment = "start"; - let scale = ["s", "m", "l"]; + const scale = ["s", "m", "l"]; if (!scale.includes(this.scale)) this.scale = "m"; - let width = ["s", "m", "l"]; + const width = ["s", "m", "l"]; if (!width.includes(this.width)) this.width = "m"; - let type = ["hover", "click"]; + const type = ["hover", "click"]; if (!type.includes(this.type)) this.type = "hover"; } @@ -197,12 +197,12 @@ export class CalciteDropdown { @Listen("calciteDropdownItemKeyEvent") calciteDropdownItemKeyEvent( e: CustomEvent ) { - let { keyboardEvent } = e.detail; + const { keyboardEvent } = e.detail; // handle edge const target = keyboardEvent.target as HTMLCalciteDropdownItemElement; - let itemToFocus = target.nodeName !== "A" ? target : target.parentNode; - let isFirstItem = this.itemIndex(itemToFocus) === 0; - let isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1; + const itemToFocus = target.nodeName !== "A" ? target : target.parentNode; + const isFirstItem = this.itemIndex(itemToFocus) === 0; + const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1; switch (getKey(keyboardEvent.key)) { case "Tab": if (isLastItem && !keyboardEvent.shiftKey) this.closeCalciteDropdown(); diff --git a/src/components/calcite-graph/calcite-graph.e2e.ts b/src/components/calcite-graph/calcite-graph.e2e.ts index 9b416350a13..b05aaba4d4f 100644 --- a/src/components/calcite-graph/calcite-graph.e2e.ts +++ b/src/components/calcite-graph/calcite-graph.e2e.ts @@ -7,16 +7,16 @@ describe("calcite-graph", () => { defaults("calcite-graph", [ { propertyName: "width", - defaultValue: 300, + defaultValue: 300 }, { propertyName: "height", - defaultValue: 100, + defaultValue: 100 }, { propertyName: "data", - defaultValue: [], - }, + defaultValue: [] + } ])); it("draws an area graph", async () => { @@ -27,12 +27,12 @@ describe("calcite-graph", () => { [0, 4], [1, 7], [4, 6], - [6, 2], + [6, 2] ]; }); await page.waitForChanges(); const path = await page.find("calcite-graph path"); - let d = await path.getAttribute("d"); + const d = await path.getAttribute("d"); expect(d).toBe( "M 0,60 L 0,20 L 0,20 C 16.666666666666664,-10.000000000000014 33.333333333333336,-40 50,-40 C 100,-40 150,-33.33333333333334 200,-20 C 233.33333333333334,-11.111111111111114 266.66666666666663,24.444444444444443 300,60 L 300,60 Z" ); diff --git a/src/components/calcite-graph/calcite-graph.tsx b/src/components/calcite-graph/calcite-graph.tsx index 80e6bb8f753..9e1e546e826 100644 --- a/src/components/calcite-graph/calcite-graph.tsx +++ b/src/components/calcite-graph/calcite-graph.tsx @@ -5,7 +5,7 @@ import { area, range, translate } from "./util"; @Component({ tag: "calcite-graph", - styleUrl: "calcite-graph.scss", + styleUrl: "calcite-graph.scss" }) export class CalciteGraph { //-------------------------------------------------------------------------- @@ -14,7 +14,7 @@ export class CalciteGraph { // //-------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalciteGraphElement; //-------------------------------------------------------------------------- // @@ -29,10 +29,10 @@ export class CalciteGraph { @Prop() data: DataSeries = []; /** Width of graph in pixels*/ - @Prop() width: number = 300; + @Prop() width = 300; /** Width of graph in pixels*/ - @Prop() height: number = 100; + @Prop() height = 100; /** Start of highlight color if highlighting range */ @Prop() highlightMin: number; @@ -46,8 +46,6 @@ export class CalciteGraph { // //-------------------------------------------------------------------------- - componentWillUpdate(): void {} - render() { const { data, width, height, highlightMax, highlightMin } = this; const id = this.maskId; @@ -126,11 +124,7 @@ export class CalciteGraph { - + ) : ( diff --git a/src/components/calcite-icon/calcite-icon.e2e.ts b/src/components/calcite-icon/calcite-icon.e2e.ts index f9ac9f57cd4..04462c412e9 100644 --- a/src/components/calcite-icon/calcite-icon.e2e.ts +++ b/src/components/calcite-icon/calcite-icon.e2e.ts @@ -65,7 +65,7 @@ describe("calcite-icon", () => { await page.waitForChanges(); const icon = await page.find(`calcite-icon`); - let path = await page.find(`calcite-icon >>> path`); + const path = await page.find(`calcite-icon >>> path`); expect(await path.getAttribute("d")).toBeFalsy(); diff --git a/src/components/calcite-icon/calcite-icon.tsx b/src/components/calcite-icon/calcite-icon.tsx index a1dd277e6d1..ab9a987c42e 100644 --- a/src/components/calcite-icon/calcite-icon.tsx +++ b/src/components/calcite-icon/calcite-icon.tsx @@ -20,7 +20,7 @@ export class CalciteIcon { //-------------------------------------------------------------------------- @Element() - el: HTMLElement; + el: HTMLCalciteIconElement; //-------------------------------------------------------------------------- // @@ -42,7 +42,7 @@ export class CalciteIcon { @Prop({ reflect: true }) - mirrored: boolean = false; + mirrored = false; /** * Icon scale. Can be "s" | "m" | "l". diff --git a/src/components/calcite-input-message/calcite-input-message.tsx b/src/components/calcite-input-message/calcite-input-message.tsx index f99e935eba1..a0bd409bf61 100644 --- a/src/components/calcite-input-message/calcite-input-message.tsx +++ b/src/components/calcite-input-message/calcite-input-message.tsx @@ -4,7 +4,7 @@ import { getElementDir, getElementProp } from "../../utils/dom"; @Component({ tag: "calcite-input-message", styleUrl: "calcite-input-message.scss", - shadow: true, + shadow: true }) export class CalciteInputMessage { //-------------------------------------------------------------------------- @@ -13,7 +13,7 @@ export class CalciteInputMessage { // //-------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalciteInputMessageElement; //-------------------------------------------------------------------------- // @@ -21,7 +21,7 @@ export class CalciteInputMessage { // //-------------------------------------------------------------------------- - @Prop({ reflect: true, mutable: true }) active: boolean = false; + @Prop({ reflect: true, mutable: true }) active = false; /** optionally display an icon based on status */ @Prop({ reflect: true }) icon: boolean; @@ -36,8 +36,7 @@ export class CalciteInputMessage { @Prop({ mutable: true, reflect: true }) theme: "light" | "dark"; /** specify the appearance of any slotted message - default (displayed under input), or floating (positioned absolutely under input) */ - @Prop({ mutable: true, reflect: true }) type: "default" | "floating" = - "default"; + @Prop({ mutable: true, reflect: true }) type: "default" | "floating" = "default"; //-------------------------------------------------------------------------- // @@ -46,15 +45,15 @@ export class CalciteInputMessage { //-------------------------------------------------------------------------- connectedCallback() { // validate props - let statusOptions = ["invalid", "valid", "idle"]; + const statusOptions = ["invalid", "valid", "idle"]; if (!statusOptions.includes(this.status)) this.status = getElementProp(this.el.parentElement, "status", "idle"); - let scale = ["s", "m", "l"]; + const scale = ["s", "m", "l"]; if (!scale.includes(this.scale)) this.scale = getElementProp(this.el.parentElement, "scale", "m"); - let type = ["default", "floating"]; + const type = ["default", "floating"]; if (!type.includes(this.type)) this.type = "default"; } @@ -83,7 +82,7 @@ export class CalciteInputMessage { private iconDefaults = { valid: "check-circle", invalid: "exclamation-mark-triangle", - idle: "information", + idle: "information" }; // the icon to be rendered if icon is requested @@ -97,11 +96,7 @@ export class CalciteInputMessage { private setIcon(iconName) { return ( - + ); } } diff --git a/src/components/calcite-input/calcite-input.tsx b/src/components/calcite-input/calcite-input.tsx index 7ecc62c7cd6..3af7fa4e505 100644 --- a/src/components/calcite-input/calcite-input.tsx +++ b/src/components/calcite-input/calcite-input.tsx @@ -37,7 +37,7 @@ export class CalciteInput { @Prop({ mutable: true, reflect: true }) status: "invalid" | "valid" | "idle"; /** specify if the input is in loading state */ - @Prop({ mutable: true, reflect: true }) loading: boolean = false; + @Prop({ mutable: true, reflect: true }) loading = false; /** specify the scale of the input, defaults to m */ @Prop({ mutable: true, reflect: true }) scale: "s" | "m" | "l"; @@ -98,10 +98,10 @@ export class CalciteInput { @Prop({ mutable: true, reflect: true }) theme: "light" | "dark"; /** is the input required */ - @Prop() required: boolean = false; + @Prop() required = false; /** should the input autofocus */ - @Prop() autofocus: boolean = false; + @Prop() autofocus = false; /** explicitly whitelist placeholder attribute */ @Prop() placeholder: string; @@ -130,21 +130,21 @@ export class CalciteInput { connectedCallback() { // validate props - let status = ["invalid", "valid", "idle"]; - let foundStatus = getElementProp(this.el, "status", "idle"); + const status = ["invalid", "valid", "idle"]; + const foundStatus = getElementProp(this.el, "status", "idle"); if (!status.includes(this.status)) this.status = !status.includes(foundStatus) ? "idle" : foundStatus; - let scale = ["s", "m", "l"]; - let foundScale = getElementProp(this.el, "scale", "m"); + const scale = ["s", "m", "l"]; + const foundScale = getElementProp(this.el, "scale", "m"); if (!scale.includes(this.scale)) { this.scale = !scale.includes(foundScale) ? "m" : foundScale; } - let alignment = ["start", "end"]; + const alignment = ["start", "end"]; if (!alignment.includes(this.alignment)) this.alignment = "start"; - let type = [ + const type = [ "color", "date", "datetime-local", @@ -164,12 +164,12 @@ export class CalciteInput { ]; if (!type.includes(this.type)) this.type = "text"; - let numberButtonType = ["vertical", "horizontal", "none"]; + const numberButtonType = ["vertical", "horizontal", "none"]; if (!numberButtonType.includes(this.numberButtonType)) this.numberButtonType = "vertical"; // if an icon string is not provided, but icon is true and a default icon is present // for the requested type, set that as the icon - let typesWithIcons = ["date", "email", "password", "search", "tel", "time"]; + const typesWithIcons = ["date", "email", "password", "search", "tel", "time"]; this.icon = this.icon ? (this.icon as string) : this.icon !== false && typesWithIcons.includes(this.type) @@ -363,7 +363,9 @@ export class CalciteInput { //-------------------------------------------------------------------------- @Event() calciteInputFocus: EventEmitter; + @Event() calciteInputBlur: EventEmitter; + @Event({ eventName: "calciteInputInput", cancelable: true @@ -394,16 +396,18 @@ export class CalciteInput { private childEl?: HTMLInputElement | HTMLTextAreaElement; /** determine if there is a slotted action for styling purposes */ - private hasAction: boolean = false; + private hasAction = false; /** determine if there is a slotted action for styling purposes */ private slottedActionEl?: HTMLSlotElement; /** track if the input is clearable */ - private isClearable: boolean = false; + private isClearable = false; private minString?: string; + private maxString?: string; + private stepString?: string; //-------------------------------------------------------------------------- @@ -454,7 +458,7 @@ export class CalciteInput { private getAttributes() { // spread attributes from the component to rendered child, filtering out props - let props = [ + const props = [ "alignment", "dir", "clearable", @@ -485,9 +489,9 @@ export class CalciteInput { // prevent blur and re-focus of input on mousedown e.preventDefault(); if (this.childElType === "input" && this.type === "number") { - let inputMax = this.maxString ? parseFloat(this.maxString) : null; - let inputMin = this.minString ? parseFloat(this.minString) : null; - let inputStep = this.stepString ? parseFloat(this.stepString) : 1; + const inputMax = this.maxString ? parseFloat(this.maxString) : null; + const inputMin = this.minString ? parseFloat(this.minString) : null; + const inputStep = this.stepString ? parseFloat(this.stepString) : 1; let inputVal = this.value && this.value !== "" ? parseFloat(this.value) : 0; switch (e.target.dataset.adjustment) { diff --git a/src/components/calcite-label/calcite-label.tsx b/src/components/calcite-label/calcite-label.tsx index c2fb280ab82..9a79a65956b 100644 --- a/src/components/calcite-label/calcite-label.tsx +++ b/src/components/calcite-label/calcite-label.tsx @@ -41,13 +41,13 @@ export class CalciteLabel { //-------------------------------------------------------------------------- connectedCallback() { - let status = ["invalid", "valid", "idle"]; + const status = ["invalid", "valid", "idle"]; if (!status.includes(this.status)) this.status = "idle"; - let layout = ["inline", "inline-space-between", "default"]; + const layout = ["inline", "inline-space-between", "default"]; if (!layout.includes(this.layout)) this.layout = "default"; - let scale = ["s", "m", "l"]; + const scale = ["s", "m", "l"]; if (!scale.includes(this.scale)) this.scale = "m"; } @@ -115,8 +115,8 @@ export class CalciteLabel { // wrap slotted text nodes in span to handle spacing of inline and inline space between layouts private handleSlottedContent() { - let nodeList = []; - let requestedSlottedContent = this.el.childNodes; + const nodeList = []; + const requestedSlottedContent = this.el.childNodes; // iterate over slotted nodes and wrap text nodes in span if (requestedSlottedContent) { requestedSlottedContent.forEach(function (item) { @@ -143,7 +143,7 @@ export class CalciteLabel { private getAttributes() { // spread attributes from the component to rendered child, filtering out props - let props = ["layout", "theme", "scale", "status"]; + const props = ["layout", "theme", "scale", "status"]; return Array.from(this.el.attributes) .filter((a) => a && !props.includes(a.name)) .reduce((acc, { name, value }) => ({ ...acc, [name]: value }), {}); diff --git a/src/components/calcite-link/calcite-link.tsx b/src/components/calcite-link/calcite-link.tsx index 43692092bda..8c4eae8c459 100644 --- a/src/components/calcite-link/calcite-link.tsx +++ b/src/components/calcite-link/calcite-link.tsx @@ -19,7 +19,7 @@ export class CalciteLink { // //-------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalciteLinkElement; //-------------------------------------------------------------------------- // @@ -46,7 +46,7 @@ export class CalciteLink { @Prop({ reflect: true }) disabled?: boolean; /** Allows the text to be selectable */ - @Prop({ reflect: true }) userSelect: boolean = true; + @Prop({ reflect: true }) userSelect = true; //-------------------------------------------------------------------------- // @@ -57,7 +57,7 @@ export class CalciteLink { connectedCallback() { // prop validations - let color = ["blue", "red", "dark", "light"]; + const color = ["blue", "red", "dark", "light"]; if (!color.includes(this.color)) this.color = "blue"; this.childElType = this.href ? "a" : "span"; @@ -120,7 +120,7 @@ export class CalciteLink { private getAttributes() { // spread attributes from the component to rendered child, filtering out props - let props = ["color", "dir", "icon", "icon-position", "id", "theme"]; + const props = ["color", "dir", "icon", "icon-position", "id", "theme"]; return Array.from(this.el.attributes) .filter((a) => a && !props.includes(a.name)) .reduce((acc, { name, value }) => ({ ...acc, [name]: value }), {}); diff --git a/src/components/calcite-loader/calcite-loader.tsx b/src/components/calcite-loader/calcite-loader.tsx index 3c84e8bfa1c..9b4a6c04e13 100644 --- a/src/components/calcite-loader/calcite-loader.tsx +++ b/src/components/calcite-loader/calcite-loader.tsx @@ -12,7 +12,7 @@ export class CalciteLoader { // Element // //-------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalciteLoaderElement; //-------------------------------------------------------------------------- // @@ -20,17 +20,23 @@ export class CalciteLoader { // //-------------------------------------------------------------------------- /** Show the loader */ - @Prop({ reflect: true }) active: boolean = false; + @Prop({ reflect: true }) active = false; + /** Inline loaders are smaller and will appear to the left of the text */ - @Prop({ reflect: true }) inline: boolean = false; + @Prop({ reflect: true }) inline = false; + /** Speficy the scale of the loader. Defaults to "m" */ @Prop({ reflect: true }) scale: "s" | "m" | "l" = "m"; + /** Use indeterminate if finding actual progress value is impossible */ @Prop({ reflect: true }) type: "indeterminate" | "determinate"; + /** Percent complete of 100, only valid for determinate indicators */ @Prop() value = 0; + /** Text which should appear under the loading indicator (optional) */ - @Prop() text: string = ""; + @Prop() text = ""; + /** Turn off spacing around the loader */ @Prop() noPadding?: boolean; @@ -43,10 +49,10 @@ export class CalciteLoader { connectedCallback() { // prop validations - let scales = ["s", "m", "l"]; + const scales = ["s", "m", "l"]; if (!scales.includes(this.scale)) this.scale = "m"; - let types = ["indeterminate", "determinate"]; + const types = ["indeterminate", "determinate"]; if (!types.includes(this.type)) this.type = "indeterminate"; } diff --git a/src/components/calcite-modal/calcite-modal.tsx b/src/components/calcite-modal/calcite-modal.tsx index e390f7f12cb..55bbbf2871f 100644 --- a/src/components/calcite-modal/calcite-modal.tsx +++ b/src/components/calcite-modal/calcite-modal.tsx @@ -27,7 +27,7 @@ export class CalciteModal { // Element // //-------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalciteModalElement; //-------------------------------------------------------------------------- // @@ -36,31 +36,44 @@ export class CalciteModal { //-------------------------------------------------------------------------- /** Add the active attribute to open the modal */ @Prop() active?: boolean; + /** Optionally pass a function to run before close */ @Prop() beforeClose: (el: HTMLElement) => Promise = () => Promise.resolve(); + /** Disables the display a close button within the Modal */ @Prop() disableCloseButton?: boolean; + /** Aria label for the close button */ - @Prop() intlClose: string = "Close"; + @Prop() intlClose = "Close"; + /** Prevent the modal from taking up the entire screen on mobile */ @Prop({ reflect: true }) docked: boolean; + /** Specify an element to focus when the modal is first opened */ @Prop() firstFocus?: HTMLElement; + /** Flag to disable the default close on escape behavior */ @Prop() disableEscape?: boolean; + /** specify the scale of modal, defaults to m */ @Prop({ reflect: true }) scale: "s" | "m" | "l" = "m"; + /** Set the width of the modal. Can use stock sizes or pass a number (in pixels) */ @Prop({ reflect: true }) width: "s" | "m" | "l" | number = "m"; + /** Set the modal to always be fullscreen (overrides width) */ @Prop({ reflect: true }) fullscreen: boolean; + /** Adds a color bar at the top for visual impact, * Use color to add importance to destructive/workflow dialogs. */ @Prop({ reflect: true }) color?: "red" | "blue"; + /** Select theme (light or dark) */ @Prop({ reflect: true }) theme: "light" | "dark"; + /** Background color of modal content */ @Prop({ reflect: true }) backgroundColor: "white" | "grey" = "white"; + /** Turn off spacing around the content area slot */ @Prop() noPadding?: boolean; @@ -187,6 +200,7 @@ export class CalciteModal { //-------------------------------------------------------------------------- /** Fired when the modal begins the open animation */ @Event() calciteModalOpen: EventEmitter; + /** Fired when the modal begins the close animation */ @Event() calciteModalClose: EventEmitter; @@ -210,7 +224,7 @@ export class CalciteModal { } /** Set the scroll top of the modal content */ - @Method() async scrollContent(top: number = 0, left: number = 0): Promise { + @Method() async scrollContent(top = 0, left = 0): Promise { if (this.modalContent) { if (this.modalContent.scrollTo) { this.modalContent.scrollTo({ top, left, behavior: "smooth" }); @@ -264,8 +278,11 @@ export class CalciteModal { // //-------------------------------------------------------------------------- @State() isActive: boolean; + private previousActiveElement: HTMLElement; + private closeButtonEl: HTMLButtonElement; + private modalContent: HTMLDivElement; private focusFirstElement() { diff --git a/src/components/calcite-notice/calcite-notice.tsx b/src/components/calcite-notice/calcite-notice.tsx index 8de0dca3f41..4929bd949e4 100644 --- a/src/components/calcite-notice/calcite-notice.tsx +++ b/src/components/calcite-notice/calcite-notice.tsx @@ -36,7 +36,7 @@ export class CalciteNotice { //--------------------------------------------------------------------------- /** Is the notice currently active or not */ - @Prop({ reflect: true, mutable: true }) active: boolean = false; + @Prop({ reflect: true, mutable: true }) active = false; /** Color for the notice (will apply to top border and icon) */ @Prop({ reflect: true, mutable: true }) color: "blue" | "green" | "red" | "yellow" = "blue"; @@ -57,7 +57,7 @@ export class CalciteNotice { @Prop({ reflect: true, mutable: true }) dismissible?: boolean = false; /** If false, no icon will be shown in the notice */ - @Prop() icon: boolean = false; + @Prop() icon = false; //-------------------------------------------------------------------------- // @@ -67,13 +67,13 @@ export class CalciteNotice { connectedCallback() { // prop validations - let colors = ["blue", "red", "green", "yellow"]; + const colors = ["blue", "red", "green", "yellow"]; if (!colors.includes(this.color)) this.color = "blue"; - let scales = ["s", "m", "l"]; + const scales = ["s", "m", "l"]; if (!scales.includes(this.scale)) this.scale = "m"; - let widths = ["auto", "half", "full"]; + const widths = ["auto", "half", "full"]; if (!widths.includes(this.width)) this.width = "auto"; } @@ -169,7 +169,7 @@ export class CalciteNotice { }; private setIcon() { - var path = this.iconDefaults[this.color]; + const path = this.iconDefaults[this.color]; return (
diff --git a/src/components/calcite-pagination/calcite-pagination.tsx b/src/components/calcite-pagination/calcite-pagination.tsx index 4ee6ab685d0..0092ba151ee 100644 --- a/src/components/calcite-pagination/calcite-pagination.tsx +++ b/src/components/calcite-pagination/calcite-pagination.tsx @@ -1,13 +1,4 @@ -import { - Component, - Element, - Event, - EventEmitter, - h, - Host, - Prop, - Method, -} from "@stencil/core"; +import { Component, Element, Event, EventEmitter, h, Host, Prop, Method } from "@stencil/core"; import { CSS, TEXT } from "./resources"; @@ -21,7 +12,7 @@ export interface CalcitePaginationDetail { @Component({ tag: "calcite-pagination", styleUrl: "calcite-pagination.scss", - shadow: true, + shadow: true }) export class CalcitePagination { //-------------------------------------------------------------------------- @@ -55,7 +46,7 @@ export class CalcitePagination { // Private Properties // // -------------------------------------------------------------------------- - @Element() el: HTMLElement; + @Element() el: HTMLCalcitePaginationElement; //-------------------------------------------------------------------------- // @@ -65,7 +56,7 @@ export class CalcitePagination { connectedCallback() { // prop validations - let scale = ["s", "m", "l"]; + const scale = ["s", "m", "l"]; if (!scale.includes(this.scale)) this.scale = "m"; } @@ -104,8 +95,7 @@ export class CalcitePagination { private getLastStart(): number { const { total, num } = this; - const lastStart = - total % num === 0 ? total - num : Math.floor(total / num) * num; + const lastStart = total % num === 0 ? total - num : Math.floor(total / num) * num; return lastStart + 1; } @@ -131,7 +121,7 @@ export class CalcitePagination { this.calcitePaginationUpdate.emit({ start: this.start, total: this.total, - num: this.num, + num: this.num }); } @@ -142,7 +132,7 @@ export class CalcitePagination { //-------------------------------------------------------------------------- renderPages() { - let lastStart = this.getLastStart(); + const lastStart = this.getLastStart(); let end; let nextStart; @@ -182,7 +172,7 @@ export class CalcitePagination {