@api-client/ui 0.0.4 → 0.0.7

package/src/ui/dialog/UiDialog.ts

@@ -84,6 +84,9 @@ export default class UiDialog extends UiElement {
 
   /**
    * Opens the dialog as modal when toggling dialog's open state.
+   * 
+   * Setting this value after the dialog was opened has no effect.
+   * 
    * @attribute
    */
   @property({ type: Boolean }) modal = false;

package/src/ui/effects/ripple.ts

@@ -152,6 +152,11 @@ export default class UiRipple extends LitElement {
   }
 
   protected startPressAnimation(positionEvent?: Event | null): void {
+    const { mdRoot } = this;
+    if (!mdRoot) {
+      return;
+    }
+
     this.determineRippleSize();
     const { startPoint, endPoint } =
       this.getTranslationCoordinates(positionEvent);
@@ -160,7 +165,7 @@ export default class UiRipple extends LitElement {
 
     const signal = this.pressAnimationSignal.start();
 
-    const growAnimation = this.mdRoot.animate(
+    const growAnimation = mdRoot.animate(
       {
         top: [0, 0],
         left: [0, 0],

package/src/ui/icons/Icons.ts

@@ -5,13 +5,13 @@ import { svg, SVGTemplateResult } from 'lit';
  * @param tpl Icon definition
  * @returns Complete SVG icon definition
  */
-export const iconWrapper = (tpl: SVGTemplateResult, width = 24, height = 24): SVGTemplateResult => svg`<svg viewBox="0 0 ${width} ${height}" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;">${tpl}</svg>`;
+export const iconWrapper = (tpl: SVGTemplateResult, width = 24, height = 24, top = 0, left = 0): SVGTemplateResult => svg`<svg viewBox="${top} ${left} ${width} ${height}" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;">${tpl}</svg>`;
 
 export type IconType = 
   'add' | 'api' | 'apps' | 'arrowBack' | 'arrowDropDown' | 'cancel' | 'cancelFilled' | 'check' | 'checkBox' | 'checkBoxBlank' | 'checkIndeterminate' | 'chevronLeft' | 'chevronRight' | 'close' | 'cloud' | 'cloudFilled' | 'collectionsBookmark' | 'deleteFile' | 'deleteOutline' | 'edit' | 'environment' | 'expandMore' | 
   'fileDownload' | 'folder' | 'folderFilled' | 'folderShared' | 'help' | 'history' | 'info' | 'key' | 'menu' | 'leaderBoard' |
   'moreVert' | 'openInNew' | 'personAdd' | 'playArrow' | 'project' | 'remove' | 'rename' | 'request' | 'restoreFromTrash' | 'save' |
-  'schema' | 'schemaEntity' | 'schemaModel' | 'schemaNamespace' | 'search' | 'send' | 'settings' | 'space' | 'taskAlt' | 'timeline' | 'viewGrid' | 'viewList' | 'visibility' | 'visibilityOff' | 'warning';
+  'schema' | 'schemaEntity' | 'schemaModel' | 'schemaNamespace' | 'search' | 'send' | 'settings' | 'space' | 'taskAlt' | 'timeline' | 'tune' | 'viewGrid' | 'viewList' | 'visibility' | 'visibilityOff' | 'warning';
 
 export const add = iconWrapper(svg`<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>`);
 export const api = iconWrapper(svg`<path d="M0,0H24V24H0Z" style="fill:none"/><path d="M22.45,15.1a4.87,4.87,0,0,0-3.74-4.73,5.29,5.29,0,0,0,.05-.56A4.88,4.88,0,0,0,9.3,8.12,2.85,2.85,0,0,0,5,10.54,4.86,4.86,0,0,0,6.48,20H17.87v0A4.87,4.87,0,0,0,22.45,15.1Z"/>`);
@@ -65,6 +65,7 @@ export const settings = iconWrapper(svg`<path d="M0 0h24v24H0V0z" fill="none"/><
 export const space = iconWrapper(svg`<path d="M62.14,110.18a11.26,11.26,0,1,1-11.27,11.26,11.29,11.29,0,0,1,11.27-11.26m0-11.27a22.53,22.53,0,1,0,22.52,22.53A22.6,22.6,0,0,0,62.14,98.91Zm33.78-45A11.26,11.26,0,1,1,84.66,65.13,11.3,11.3,0,0,1,95.92,53.87m0-11.26a22.52,22.52,0,1,0,22.52,22.52A22.58,22.58,0,0,0,95.92,42.61Zm33.78,67.57a11.26,11.26,0,1,1-11.26,11.26,11.28,11.28,0,0,1,11.26-11.26m0-11.27a22.53,22.53,0,1,0,22.53,22.53A22.6,22.6,0,0,0,129.7,98.91Z"/><rect width="192" height="192" style="fill:none"/>`, 192, 192);
 export const taskAlt = iconWrapper(svg`<rect fill="none" height="24" width="24"/><path d="M22,5.18L10.59,16.6l-4.24-4.24l1.41-1.41l2.83,2.83l10-10L22,5.18z M19.79,10.22C19.92,10.79,20,11.39,20,12 c0,4.42-3.58,8-8,8s-8-3.58-8-8c0-4.42,3.58-8,8-8c1.58,0,3.04,0.46,4.28,1.25l1.44-1.44C16.1,2.67,14.13,2,12,2C6.48,2,2,6.48,2,12 c0,5.52,4.48,10,10,10s10-4.48,10-10c0-1.19-0.22-2.33-0.6-3.39L19.79,10.22z"/>`);
 export const timeline = iconWrapper(svg`<path d="M3 18Q2.175 18 1.588 17.413Q1 16.825 1 16Q1 15.175 1.588 14.587Q2.175 14 3 14Q3.15 14 3.263 14Q3.375 14 3.5 14.05L8.05 9.5Q8 9.375 8 9.262Q8 9.15 8 9Q8 8.175 8.588 7.587Q9.175 7 10 7Q10.825 7 11.413 7.587Q12 8.175 12 9Q12 9.05 11.95 9.5L14.5 12.05Q14.625 12 14.738 12Q14.85 12 15 12Q15.15 12 15.262 12Q15.375 12 15.5 12.05L19.05 8.5Q19 8.375 19 8.262Q19 8.15 19 8Q19 7.175 19.587 6.588Q20.175 6 21 6Q21.825 6 22.413 6.588Q23 7.175 23 8Q23 8.825 22.413 9.412Q21.825 10 21 10Q20.85 10 20.738 10Q20.625 10 20.5 9.95L16.95 13.5Q17 13.625 17 13.738Q17 13.85 17 14Q17 14.825 16.413 15.412Q15.825 16 15 16Q14.175 16 13.588 15.412Q13 14.825 13 14Q13 13.85 13 13.738Q13 13.625 13.05 13.5L10.5 10.95Q10.375 11 10.262 11Q10.15 11 10 11Q9.95 11 9.5 10.95L4.95 15.5Q5 15.625 5 15.738Q5 15.85 5 16Q5 16.825 4.412 17.413Q3.825 18 3 18Z"/>`);
+export const tune = iconWrapper(svg`<path d="M440 936V696h80v80h320v80H520v80h-80Zm-320-80v-80h240v80H120Zm160-160v-80H120v-80h160v-80h80v240h-80Zm160-80v-80h400v80H440Zm160-160V216h80v80h160v80H680v80h-80Zm-480-80v-80h400v80H120Z"/>`, 960, 960, 0, 96);
 export const viewGrid = iconWrapper(svg`<rect fill="none" height="24" width="24"/><path d="M3,5v14h18V5H3z M7,7v2H5V7H7z M5,13v-2h2v2H5z M5,15h2v2H5V15z M19,17H9v-2h10V17z M19,13H9v-2h10V13z M19,9H9V7h10V9z"/>`);
 export const viewList = iconWrapper(svg`<g><rect fill="none" height="24" width="24"/></g><path d="M3,3v8h8V3H3z M9,9H5V5h4V9z M3,13v8h8v-8H3z M9,19H5v-4h4V19z M13,3v8h8V3H13z M19,9h-4V5h4V9z M13,13v8h8v-8H13z M19,19h-4v-4h4V19z"/>`);
 export const visibility = iconWrapper(svg`<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path>`);

package/src/ui/input/CheckedElement.ts

@@ -255,10 +255,10 @@ export default class CheckedElement extends UiElement {
     }
   }
 
-  protected _notifyChange(): void {
+  override notifyChange(): void {
     // The <input type="checkbox"/> dispatches both events.
     this.dispatchEvent(new Event('input'));
-    this.dispatchEvent(new Event('change'));
+    super.notifyChange();
   }
 
   protected _invalidHandler(): void {
@@ -280,7 +280,7 @@ export default class CheckedElement extends UiElement {
   }
 
   protected _postCheckedChange(): void {
-    this._notifyChange();
+    this.notifyChange();
     this.#_internals.checkValidity();
   }
 

package/src/ui/input/Input.ts

@@ -968,7 +968,7 @@ export default abstract class Input extends UiElement {
       return html``;
     }
     return html`
-    <span class="label" id="${this.labelId}">${this.renderLabelText()}</span>
+    <span class="label" id="${this.labelId}" title="label">${label}</span>
     `;
   }
 

package/src/ui/list/UiDivider.element.ts

@@ -0,0 +1,41 @@
+import { html, LitElement, TemplateResult } from "lit";
+import { property } from "lit/decorators.js";
+
+export enum DividerType {
+  'full' = 'full',
+  'inset' = 'inset',
+  'middle' = 'middle',
+}
+
+/**
+ * A divider element.
+ */
+export default class UiDivider extends LitElement {
+  /**
+   * The predefined type of the divider.
+   * @attribute
+   */
+  @property({ type: String, reflect: true }) type: DividerType;
+
+  /**
+   * Whether to render the divider as a vertical separation.
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) vertical = false;
+
+  constructor() {
+    super();
+    this.type = DividerType.full;
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'presentation');
+    }
+  }
+
+  protected override render(): TemplateResult {
+    return html`<div class="container"></div>`;
+  }
+}

package/src/ui/list/UiDivider.styles.ts

@@ -0,0 +1,49 @@
+import { css } from "lit";
+
+export default css`
+:host {
+  display: block;
+  margin-top: 8px;
+  margin-bottom: 8px;
+
+  --ui-divider-padding: 16px;
+  --ui-divider-vertical-separation: 8px;
+}
+
+.container {
+  height: 1px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.container::before {
+  content: '';
+  height: inherit;
+  background-color: var(--md-sys-color-outline-variant);
+  display: block;
+}
+
+:host([type="inset"]) .container {
+  padding-left: var(--ui-divider-padding);
+}
+
+:host([type="middle"]) .container {
+  padding-left: var(--ui-divider-padding);
+  padding-right: var(--ui-divider-padding);
+}
+
+:host([vertical]) {
+  margin: 0;
+  height: auto;
+}
+
+:host([vertical]) .container {
+  width: 1px;
+  height: 100%;
+  margin: 0 var(--ui-divider-vertical-separation);
+}
+
+:host([vertical][type="middle"]) .container {
+  padding: var(--ui-divider-padding) 0 var(--ui-divider-padding) 0;
+}
+`;

package/src/ui/tabs/UiTabs.ts

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-cycle */
 /* eslint-disable no-param-reassign */
-import { html, LitElement, nothing, TemplateResult } from "lit";
+import { html, LitElement, nothing, PropertyValues, TemplateResult } from "lit";
 import { property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { ClassInfo, classMap } from "lit/directives/class-map.js";
 import { StyleInfo, styleMap } from "lit/directives/style-map.js";
@@ -38,6 +38,8 @@ export default class UiTabs extends LitElement {
 
   activeItem: UiTab | null = null;
 
+  previousItem: UiTab | null = null;
+
   @queryAssignedElements({ flatten: true }) protected assignedElements!: HTMLElement[] | null;
 
   @query('.pointer') protected pointer!: HTMLElement;
@@ -80,18 +82,46 @@ export default class UiTabs extends LitElement {
 
   @state() protected indicated = false;
 
-  // constructor() {
-  //   super();
+  protected observer: IntersectionObserver;
+
+  /**
+   * This is set by the intersection observer. Once the tabs are in the view it turns to `true`.
+   * This we can properly visualize selection.
+   */
+  @state() isVisible?: boolean;
+
+  constructor() {
+    super();
 
-  //   // this.addEventListener('keydown', this.handleKeydown.bind(this));
-  //   // this.addEventListener('click', this.handleClick.bind(this));
-  // }
+    this.observer = new IntersectionObserver(this.intersectionCallback.bind(this), {
+      threshold: 1.0,
+      rootMargin: '0px',
+    });
+  }
+
+  protected override willUpdate(cp: PropertyValues<this>): void {
+    if (cp.has('isVisible')) {
+      this.handleVisibility();
+    }
+    super.willUpdate(cp);
+  }
 
   override connectedCallback(): void {
     super.connectedCallback();
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'tablist');
     }
+    this.observer.observe(this);
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.observer.unobserve(this);
+  }
+
+  protected intersectionCallback(entries: IntersectionObserverEntry[]): void {
+    const [entry] = entries;
+    this.isVisible = entry.isIntersecting;
   }
 
   protected async updateItems(): Promise<void> {
@@ -143,6 +173,7 @@ export default class UiTabs extends LitElement {
       tab.highlight();
       return;
     }
+    this.previousItem = activeItem;
     if (activeItem) {
       this.deselectItem(activeItem);
     }
@@ -172,16 +203,13 @@ export default class UiTabs extends LitElement {
   }
 
   protected selectItem(tab: UiTab, focus = false): void {
-    if (this.activeItem === tab) {
-      return;
-    }
+    this.activeItem = tab;
     if (this.hasAttribute('tabindex')) {
       this.removeAttribute('tabindex');
     }
     tab.setAttribute('aria-selected', 'true');
     tab.setAttribute('tabindex', '0');
     tab.selected = true;
-    this.activeItem = tab;
     tab.priority = this.priority;
     tab.scrollIntoView({ inline: 'nearest', behavior: 'auto', block: 'nearest' });
     if (focus) {
@@ -196,8 +224,19 @@ export default class UiTabs extends LitElement {
     tab.indicated = false;
   }
 
+  protected handleVisibility(): void {
+    const { previousItem, activeItem } = this;
+    if (!activeItem) {
+      return;
+    }
+    this.positionPointer(activeItem, previousItem);
+  }
+
   protected async positionPointer(tab: UiTab, old?: UiTab | null): Promise<void> {
-    const { items, pointer } = this;
+    const { items, pointer, isVisible } = this;
+    if (!isVisible) {
+      return;
+    }
     const index = items.indexOf(tab);
     if (index < 0 || !pointer) {
       this.pointerStyles = undefined;
@@ -209,15 +248,18 @@ export default class UiTabs extends LitElement {
       tab.indicated = true;
       return;
     }
+    const isPrimary = this.priority === 'primary';
+    const final = isPrimary ? this.getPrimaryLeft(tab) : this.getSecondaryLeft(tab);
+    if (this.pointerStyles && this.pointerStyles.left === `${final}px`) {
+      return;
+    }
 
     // first position this indicator in the place of the old one.
     // update the view and then run the animation.
     this.indicated = true;
-    const isPrimary = this.priority === 'primary';
     const left = isPrimary ? this.getPrimaryLeft(old) : this.getSecondaryLeft(old);
     this.pointerStyles = { left };
     await this.updateComplete;
-    const final = isPrimary ? this.getPrimaryLeft(tab) : this.getSecondaryLeft(tab);
     const frames = isPrimary ? this.getPrimaryKeyframes(left, final) : this.getSecondaryKeyframes(left, final);
     
     if (this.moveAnimation) {

package/test/amf/authorization/OAuth2Method.test.ts

@@ -210,7 +210,7 @@ describe.skip('OAuth 2', () => {
     it('updates query parameter on token request', async () => {
       const input = (element.shadowRoot!.querySelector('.form-input[name="queryTokenResource"]')) as Input;
       input.value = 'test';
-      input.dispatchEvent(new Event('change'));
+      input.notifyChange();
       const info = element.serialize() as IOAuth2Authorization;
       const cd = info.customData as IOAuth2CustomData;
       const token = cd.token as IOAuth2TokenRequestCustomData;

package/test/elements/http/HttpAssertions.test.ts

@@ -1,16 +1,15 @@
 import { 
   DataSteps, FlowResponseDataEnum, FlowSourceEnum, TransformationSteps,
-  HttpAssertions as CoreAssertions,
+  HttpAssertions as CoreAssertions, IHttpStep,
 } from '@api-client/core/build/browser.js';
-import { IHttpStep } from '@api-client/core/build/src/models/http-actions/HttpStep.js';
 import { assert, fixture, html } from '@open-wc/testing';
 import { resetMouse, setViewport } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import '../../../src/define/http/http-assertions.js';
-import HttpAssertionsElement from '../../../src/elements/http/HttpAssertions.js';
-import UiChip from '../../../src/ui/chip/UiChip.js';
-import Input from '../../../src/ui/input/Input.js';
+import type HttpAssertionsElement from '../../../src/elements/http/HttpAssertions.element.js';
+import type UiChip from '../../../src/ui/chip/UiChip.js';
+import type Input from '../../../src/ui/input/Input.js';
 import { UiMock } from '../../helpers/UiMock.js';
+import '../../../src/define/http/http-assertions.js';
 
 describe('element', () => {
   describe('http', () => {