q2-tecton-elements 1.12.0-alpha.0 → 1.12.2

package/dist/test/elements/q2-tag-test.js

@@ -0,0 +1,151 @@
+import { setup, getFocusedAttribute } from '../helpers';
+describe('q2-tag', () => {
+  let page;
+  let tag;
+  let optionList;
+  let controlBtn;
+  let allOptions;
+  let optionContainer;
+  let clickSpy;
+  let changeSpy;
+  const getFocusedValue = async (page) => {
+    return await page.$eval('body', () => document.activeElement.getAttribute('value'));
+  };
+  it('does not render button or dropdown by default', async () => {
+    page = await setup({
+      html: `<q2-tag label="My tag"></q2-tag>`
+    });
+    optionList = await page.find('q2-tag >>> q2-option-list');
+    controlBtn = await page.find('q2-tag >>> button');
+    expect(controlBtn).toBeNull();
+    expect(optionList).toBeNull();
+  });
+  describe('when options are provided', () => {
+    beforeEach(async () => {
+      page = await setup({
+        html: `
+                    <q2-tag label="My tag">
+                        <q2-option value="1">Option 1</q2-option>
+                        <q2-option value="2">Option 2</q2-option>
+                        <q2-option value="3">Option 3</q2-option>
+                    </q2-tag>
+                `
+      });
+      tag = await page.find('q2-tag');
+      allOptions = await page.findAll('q2-option');
+      optionList = await page.find('q2-tag >>> q2-option-list');
+      optionContainer = await page.find('q2-tag >>> q2-option-list >>> .options');
+      controlBtn = await page.find('q2-tag >>> button');
+      clickSpy = await tag.spyOnEvent('click');
+      changeSpy = await tag.spyOnEvent('change');
+    });
+    it('can select option via keyboard', async () => {
+      const tagWrapper = await page.find('q2-tag >>> .tag-wrapper');
+      expect(tagWrapper.classList.contains('has-options')).toBe(true);
+      expect(optionList).not.toHaveAttribute('open');
+      await controlBtn.press('ArrowDown');
+      await page.waitForChanges();
+      expect(tag).toHaveAttribute('open');
+      expect(optionList).toHaveAttribute('open');
+      expect(await getFocusedValue(page)).toEqual('1');
+      await optionContainer.press('ArrowDown');
+      await page.waitForChanges();
+      expect(await getFocusedValue(page)).toEqual('2');
+      await allOptions[1].press(' ');
+      await page.waitForChanges();
+      expect(tag).not.toHaveAttribute('open');
+      expect(optionList).not.toHaveAttribute('open');
+      expect(clickSpy).toHaveReceivedEventDetail({
+        value: '2'
+      });
+      expect(changeSpy).not.toHaveReceivedEvent();
+    });
+    it('can select option via mouse', async () => {
+      const tagWrapper = await page.find('q2-tag >>> .tag-wrapper');
+      expect(tagWrapper.classList.contains('has-options')).toBe(true);
+      expect(optionList).not.toHaveAttribute('open');
+      await controlBtn.click();
+      await page.waitForChanges();
+      expect(tag).toHaveAttribute('open');
+      expect(optionList).toHaveAttribute('open');
+      await allOptions[1].click();
+      await page.waitForChanges();
+      expect(tag).not.toHaveAttribute('open');
+      expect(optionList).not.toHaveAttribute('open');
+      expect(clickSpy).toHaveReceivedEventDetail({
+        value: '2'
+      });
+      expect(changeSpy).not.toHaveReceivedEvent();
+    });
+    describe('when keyboard is pressed', () => {
+      it('opens list and focuses first option on ArrowDown', async () => {
+        await controlBtn.press('ArrowDown');
+        await page.waitForChanges();
+        expect(tag).toHaveAttribute('open');
+        expect(optionList).toHaveAttribute('open');
+        expect(await getFocusedAttribute(page, 'value')).toEqual('1');
+      });
+      it('opens list and focuses first option on ArrowUp', async () => {
+        await controlBtn.press('ArrowUp');
+        await page.waitForChanges();
+        expect(tag).toHaveAttribute('open');
+        expect(optionList).toHaveAttribute('open');
+        expect(await getFocusedAttribute(page, 'value')).toEqual('1');
+      });
+      it('opens list and focuses first option on Enter', async () => {
+        await controlBtn.press('Enter');
+        await page.waitForChanges();
+        expect(tag).toHaveAttribute('open');
+        expect(optionList).toHaveAttribute('open');
+        expect(await getFocusedAttribute(page, 'value')).toEqual('1');
+      });
+      it('opens list and focuses first option on Space', async () => {
+        await controlBtn.press(' ');
+        await page.waitForChanges();
+        expect(tag).toHaveAttribute('open');
+        expect(optionList).toHaveAttribute('open');
+        expect(await getFocusedValue(page)).toEqual('1');
+      });
+      it('opens list and focuses last option on Home', async () => {
+        await controlBtn.press('Home');
+        await page.waitForChanges();
+        expect(tag).toHaveAttribute('open');
+        expect(optionList).toHaveAttribute('open');
+        expect(await getFocusedAttribute(page, 'value')).toEqual('1');
+      });
+      it('opens list and focuses last option on End', async () => {
+        await controlBtn.press('End');
+        await page.waitForChanges();
+        expect(tag).toHaveAttribute('open');
+        expect(optionList).toHaveAttribute('open');
+        expect(await getFocusedAttribute(page, 'value')).toEqual('3');
+      });
+    });
+  });
+  describe('focus', () => {
+    let page;
+    let tag;
+    beforeEach(async () => {
+      page = await setup({
+        html: `
+                    <q2-tag label="My tag">
+                        <q2-option value="1">Option 1</q2-option>
+                        <q2-option value="2">Option 2</q2-option>
+                        <q2-option value="3">Option 3</q2-option>
+                    </q2-tag>
+                `
+      });
+      tag = await page.find('q2-tag');
+    });
+    it('focuses active option and opens the list when focus event is dispatched', async function () {
+      await tag.triggerEvent('focus');
+      await page.waitForChanges();
+      expect(await getFocusedAttribute(page, 'test-id')).toEqual('btn-control');
+    });
+    it('focuses active option and opens the list when element.focus() is called', async function () {
+      await tag.focus();
+      await page.waitForChanges();
+      expect(await getFocusedAttribute(page, 'test-id')).toEqual('btn-control');
+    });
+  });
+});

package/dist/test/helpers.js

@@ -69,14 +69,17 @@ export async function setup(pageOptions) {
   const page = await newE2EPage(pageOptions);
   await page.evaluate(function () {
     this.TectonElements = this.TectonElements || {};
-    this.TectonElements.loc = (key, substitutions) => {
+    this.TectonElements.loc = (key, subs) => {
       const string = (this.TEST_STRINGS && this.TEST_STRINGS[key]) || key;
-      if (Array.isArray(substitutions)) {
+      if (Array.isArray(subs)) {
         const regex = /({[0-9]})/g;
         return string.replace(regex, match => {
-          return substitutions[parseInt(match[1])];
+          return subs[parseInt(match[1])];
         });
       }
+      else if (typeof subs === 'object') {
+        return Object.entries(subs).reduce((accum, [key, value]) => accum.replace(`{${key}}`, value), string);
+      }
       return string;
     };
   });
@@ -105,6 +108,14 @@ export function makeDomRect(customAttributes) {
   };
   return Object.assign(Object.assign({}, defaults), customAttributes);
 }
+export const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQYV2NgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=';
 export async function getActiveElementTestId(page) {
   return await page.$eval('body', () => { var _a, _b; return (_b = (_a = document.activeElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement.getAttribute('test-id')) !== null && _b !== void 0 ? _b : null; });
 }
+export async function getFocusedAttribute(page, attribute) {
+  return await page.$eval('body', (_, attribute) => {
+    var _a, _b, _c;
+    const activeElement = (_b = (_a = document.activeElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) !== null && _b !== void 0 ? _b : document.activeElement;
+    return (_c = activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute(attribute)) !== null && _c !== void 0 ? _c : null;
+  }, attribute);
+}

package/dist/types/components/q2-calendar/helpers.d.ts

@@ -14,6 +14,7 @@ export declare function validateInput(input: string, validDays: number[], validD
 invalidDates: string[], // black list
 startDate: string, endDate: string, formatString: string, assume: string): InputValidation;
 export declare function handleMissingZeros(input: any): string;
+export declare function reorderDateString(input: string): string;
 export declare function firstDayOfWeekInMonth(month: number, year: number): number;
 export declare function getDays(): string[];
 export declare function getDaysOfWeek(): string[];

package/dist/types/components/q2-calendar/index.d.ts

@@ -12,6 +12,7 @@ export declare class Q2Calendar implements ComponentInterface {
   ariaLabel: string;
   optional: boolean;
   disabled: boolean;
+  readonly: boolean;
   invalid: boolean;
   typeable: boolean;
   placeholder: string;

package/dist/types/components/q2-card/index.d.ts

@@ -0,0 +1,31 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class Q2Card implements ComponentInterface {
+  title: string;
+  description: string;
+  avatarName: string;
+  avatarInitials: string;
+  avatarIcon: string;
+  avatarSrc: string;
+  isSmall: boolean;
+  isTouch: boolean;
+  url: string;
+  target: '_self' | '_blank' | '_parent' | '_top';
+  isAutoTouch: boolean;
+  isAutoSmall: boolean;
+  hostElement: HTMLElement;
+  click: EventEmitter;
+  clickableElement: HTMLElement;
+  containerElement: HTMLElement;
+  avatarElement: HTMLElement;
+  resizeObserver: ResizeObserver;
+  componentDidLoad(): void;
+  willDestroyElement(): void;
+  handleClick: (event: MouseEvent) => boolean;
+  onHostElementFocus(event: any): void;
+  determineAutoTouch(): void;
+  determineAutoSmall(): void;
+  generateAvatar(): any;
+  generateContent(): any;
+  generateContainerClasses(): string;
+  render(): any;
+}

package/dist/types/components/q2-checkbox/index.d.ts

@@ -7,6 +7,7 @@ export declare class Q2Checkbox implements ComponentInterface {
   ariaLabel: string;
   indeterminate: boolean;
   disabled: boolean;
+  readonly: boolean;
   value: string;
   name: string;
   hasError: boolean;
@@ -21,8 +22,9 @@ export declare class Q2Checkbox implements ComponentInterface {
   delegateFocus(event: FocusEvent): void;
   ariaLabelObserver(): void;
   change: EventEmitter;
-  onInputChange: (event: Event) => void;
+  onInputClick: (event: Event) => void;
   onControlClick: (event: Event) => void;
+  onKeyDown: (event: KeyboardEvent) => void;
   render(): any;
   generateCheckboxSVG(): any;
   generateCheckBoxSVGFill(): any;

package/dist/types/components/q2-checkbox-group/index.d.ts

@@ -3,6 +3,7 @@ export declare class Q2CheckboxGroup implements ComponentInterface {
   label: string;
   value: object;
   disabled: boolean;
+  readonly: boolean;
   optional: boolean;
   hasError: boolean;
   hostElement: HTMLElement;

package/dist/types/components/q2-input/index.d.ts

@@ -16,6 +16,8 @@ export declare class Q2Input {
   readonly: boolean;
   clearable: boolean;
   optional: boolean;
+  min: number;
+  max: number;
   formatModifier: string;
   maxlength: number;
   pseudo: boolean;
@@ -28,6 +30,7 @@ export declare class Q2Input {
   ariaHaspopup: string;
   ariaExpanded: boolean;
   ariaActivedescendant: any;
+  current: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
   errors: string[];
   hints: string[];
   formattedValueObject: IFormatterValueObject;

package/dist/types/components/q2-option/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { ComponentInterface } from '../../stencil-public-runtime';
 export declare class Q2Option implements ComponentInterface {
   role: string;
   tabindex: string;
@@ -11,9 +11,8 @@ export declare class Q2Option implements ComponentInterface {
   hidden: boolean;
   multiline: boolean;
   active: boolean;
+  noSelect: boolean;
   _multiSelectHidden: boolean;
   hostElement: HTMLElement;
-  click: EventEmitter;
-  onClick: (event: MouseEvent) => void;
   render(): any;
 }

package/dist/types/components/q2-option-list/index.d.ts

@@ -0,0 +1,62 @@
+import { Event, ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export interface IOptionValue {
+  value: string;
+  display?: string;
+}
+export declare class Q2OptionList implements ComponentInterface {
+  role: 'listbox' | 'menu';
+  direction: 'up' | 'down';
+  open: boolean;
+  customSearch: boolean;
+  noSelect: boolean;
+  align: 'left' | 'right';
+  selectedOptions: IOptionValue[];
+  multiple: boolean;
+  disabled: boolean;
+  type: 'menu' | 'listbox';
+  change: EventEmitter<{
+    value: string;
+    values: IOptionValue[];
+  }>;
+  optionListState: EventEmitter<{
+    open: boolean;
+  }>;
+  hasOptions: boolean;
+  contentElement: HTMLElement;
+  activeIndex: number;
+  scheduledAfterRender: Array<() => void>;
+  searchString: string;
+  searchStringTimer: number;
+  hostElement: HTMLElement;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  get allOptions(): HTMLQ2OptionElement[];
+  checkOptions(): void;
+  getRootSlot(element: Element): any;
+  scrollToActiveOption(): void;
+  resizeIframe(): void;
+  openDropdownWithActiveElement(activeIndex: number): void;
+  getDefaultActiveIndex(): number;
+  updateSingleOptionAttrs(): void;
+  updateMultipleOptionAttrs(): void;
+  setActiveOption(): void;
+  setFocusedOption(): void;
+  getNextVisibleIndex(direction: any): any;
+  selectOption(selectedValue: string): void;
+  adjustActiveOptionAndScroll(numToAdd: number): void;
+  resetTimer(): void;
+  searchAndFocus(key: string): void;
+  selectedOptionsUpdated(): void;
+  openChanged(newValue: boolean): void;
+  delegateFocus(event: FocusEvent): void;
+  handleClick(event: MouseEvent): void;
+  toggle(): void;
+  setDefaultActiveElement(): void;
+  setActiveElement(index: number): void;
+  handleExternalKeydown(event: KeyboardEvent): void;
+  keydownHandler: (event: KeyboardEvent, ignoreSelectionEvents?: boolean) => void;
+  focusoutHandler: (event: FocusEvent) => void;
+  clickHandler: (event: Event) => void;
+  render(): any;
+}

package/dist/types/components/q2-pagination/index.d.ts

@@ -0,0 +1,30 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+export declare class Q2Pagination implements ComponentInterface {
+  recordType: string;
+  perPage: number;
+  total: number;
+  page: number;
+  pages: number;
+  recordsOnly: boolean;
+  pagesOnly: boolean;
+  hostElement: HTMLElement;
+  change: any;
+  isSmall: boolean;
+  inputField: HTMLQ2InputElement;
+  containerElement: HTMLElement;
+  containerWidth: number;
+  resizeObserver: ResizeObserver;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  onHostElementFocus(event: any): void;
+  get isFullViewHidden(): boolean;
+  get pageWithDefault(): number;
+  get perPageWithDefault(): number;
+  get totalWithDefault(): number;
+  get recordTypeWithDefault(): string;
+  get currentRange(): string;
+  get totalPages(): number;
+  handlePageChange: (page: number) => void;
+  checkSize(): void;
+  render(): any;
+}

package/dist/types/components/q2-pill/index.d.ts

@@ -0,0 +1,39 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { IOptionValue } from '../q2-option-list';
+export declare class Q2Pill implements ComponentInterface {
+  disabled: boolean;
+  active: boolean;
+  open: boolean;
+  multiple: boolean;
+  label: string;
+  value: string;
+  theme: 'primary' | 'secondary' | 'tertiary';
+  selectedOptions: IOptionValue[];
+  hasOptions: boolean;
+  hostElement: HTMLElement;
+  change: EventEmitter<{
+    value: string;
+    values: IOptionValue[];
+    active: boolean;
+  }>;
+  scheduledAfterRender: Array<() => void>;
+  primaryBtn: HTMLButtonElement;
+  optionList: HTMLQ2OptionListElement;
+  mutationObserver: MutationObserver;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  disconnectedCallback(): void;
+  get buttonContent(): string;
+  determineHasOptions: () => void;
+  clearSelectedOptions: () => void;
+  delegateFocus(event: FocusEvent): void;
+  optionListStateEvent({ detail: { open } }: CustomEvent): void;
+  handleClick: (event: MouseEvent) => void;
+  handleKeydown: (event: KeyboardEvent) => void;
+  handleChange: (event: any) => void;
+  handleFocusout: (event: FocusEvent) => void;
+  handleWrapperClick: () => void;
+  generateIcon(): any;
+  render(): any;
+}

package/dist/types/components/q2-radio/index.d.ts

@@ -8,16 +8,19 @@ export declare class Q2Radio implements ComponentInterface {
   name: string;
   ariaLabel: string;
   groupDisabled: boolean;
+  groupReadonly: boolean;
   groupTileLayout: boolean;
   hostElement: HTMLElement;
   id: string;
   inputField: HTMLInputElement;
+  isLoaded: boolean;
   change: EventEmitter;
   componentWillLoad(): void;
   componentDidLoad(): void;
   ariaLabelObserver(): void;
+  checkedObserver(): void;
   onHostClick(event: Event): void;
   delegateFocus(event: FocusEvent): void;
-  inputChange: (event: Event) => void;
+  inputChange: (event: Event) => boolean;
   render(): any;
 }

package/dist/types/components/q2-radio-group/index.d.ts

@@ -5,6 +5,7 @@ export declare class Q2RadioGroup implements ComponentInterface {
   disabled: boolean;
   name: string;
   optional: boolean;
+  readonly: boolean;
   tilelayout: boolean;
   tileAlignment: 'left' | 'center' | 'right';
   hasError: boolean;
@@ -14,15 +15,18 @@ export declare class Q2RadioGroup implements ComponentInterface {
   get radioElements(): HTMLQ2RadioElement[];
   onMutationObserved: () => void;
   onInnerRadioChange: (event: CustomEvent) => void;
+  componentWillLoad(): void;
   componentDidLoad(): void;
-  valueUpdated(): void;
+  valueUpdated(newVal: any): void;
   nameUpdated(): void;
   disabledUpdated(): void;
+  readonlyUpdated(): void;
   tileLayoutUpdated(): void;
   change: EventEmitter;
   onHostElementChange(event: CustomEvent): void;
   delegateFocus(event: FocusEvent): void;
   keydownHandler(event: KeyboardEvent): void;
+  labelDOM(): any;
   render(): any;
   inputDom(): any;
 }

package/dist/types/components/q2-select/index.d.ts

@@ -7,6 +7,7 @@ export declare class Q2Select implements ComponentInterface {
   ariaLabel: string;
   selectedOptions: any;
   disabled: boolean;
+  readonly: boolean;
   invalid: boolean;
   errors: string[];
   multiple: boolean;

package/dist/types/components/q2-tag/index.d.ts

@@ -0,0 +1,28 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class Q2Tag implements ComponentInterface {
+  open: boolean;
+  role: string;
+  label: string;
+  theme: 'primary' | 'secondary' | 'tertiary';
+  hasOptions: boolean;
+  hostElement: HTMLElement;
+  click: EventEmitter<{
+    value: string;
+  }>;
+  dropdownBtn: HTMLButtonElement;
+  optionList: HTMLQ2OptionListElement;
+  mutationObserver: MutationObserver;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  determineHasOptions: () => void;
+  delegateFocus(event: FocusEvent): void;
+  optionListStateEvent({ detail: { open } }: CustomEvent): void;
+  handleChange: (event: any) => void;
+  handleClick: (event: MouseEvent) => void;
+  handleKeydown: (event: KeyboardEvent) => void;
+  handleButtonFocusout: (event: FocusEvent) => void;
+  handleOptionListFocusout: (event: FocusEvent) => void;
+  handleWrapperClick: () => void;
+  render(): any;
+}