@api-client/ui 0.0.1

package/src/ui/button/UiButton.styles.ts

@@ -0,0 +1,369 @@
+import { css } from 'lit';
+
+export default css`
+:host {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: content-box;
+  outline: none;
+  writing-mode: horizontal-tb !important;
+  text-rendering: auto;
+  cursor: default;
+  user-select: none;
+  height: 40px;
+  width: fit-content;
+  -webkit-tap-highlight-color: transparent;
+
+  border-radius: 20px;
+
+  font-family: var(--md-sys-typescale-label-large-font-family-name);
+  font-style: var(--md-sys-typescale-label-large-font-family-style);
+  font-weight: var(--md-sys-typescale-label-large-font-weight, 500);
+  font-size: var(--md-sys-typescale-label-large-font-size, 14px);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  line-height: var(--md-sys-typescale-label-large-height);
+  text-transform: var(--md-sys-typescale-label-large-text-transform);
+  text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+}
+
+.surface {
+  width: inherit;
+  height: inherit;
+  position: relative;
+  border-radius: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.container,
+.state {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+}
+
+.container {
+  z-index: 1;
+  transition: box-shadow 160ms cubic-bezier(.4,0,.2,1), background-color 230ms cubic-bezier(.4,0,.2,1);
+}
+
+.state {
+  z-index: 2;
+  opacity: 0;
+  transition: opacity 260ms cubic-bezier(.4,0,.2,1);
+}
+
+.content {
+  z-index: 3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 0px 24px;
+  white-space: nowrap;
+}
+
+.ripple {
+  border-radius: inherit;
+  z-index: 3;
+}
+
+.surface.withIcon .content {
+  padding: 0 24px 0 16px;
+}
+
+:host([trailingIcon]) .surface.withIcon .content {
+  padding: 0 16px 0 24px;
+}
+
+.surface.withIcon slot[name="icon"]::slotted(*) {
+  margin-right: 8px;
+  margin-left: 0px;
+}
+
+:host([trailingIcon]) .surface.withIcon slot[name="icon"]::slotted(*) {
+  margin-left: 8px;
+  margin-right: 0px;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+}
+
+/* Filled styles */
+
+:host([type="filled"]) {
+  --md-ripple-hover-state-layer-color: var(--md-sys-color-on-primary);
+  --md-ripple-focus-state-layer-color: var(--md-sys-color-on-primary);
+  --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-primary);
+}
+
+:host([type="filled"]) .surface {
+  color: var(--md-sys-color-on-primary);
+}
+
+:host([type="filled"]) .container {
+  background-color: var(--md-sys-color-primary);
+}
+
+:host([type="filled"]) .content slot::slotted(*) {
+  color: var(--md-sys-color-on-primary);
+  fill: var(--md-sys-color-on-primary);
+}
+
+:host([type="filled"]:hover) .container {
+  box-shadow: var(--md-sys-elevation-1);
+}
+
+:host([type="filled"]:hover) .state {
+  background-color: var(--md-sys-color-on-primary);
+  opacity: var(--md-sys-state-hover-state-layer-opacity);
+}
+
+:host([type="filled"]:focus) .state {
+  background-color: var(--md-sys-color-on-primary);
+  opacity: var(--md-sys-state-focus-state-layer-opacity);
+}
+
+:host([type="filled"]:active) .state,
+:host([type="filled"]) .pressed .state {
+  background-color: var(--md-sys-color-on-primary);
+  opacity: var(--md-sys-state-pressed-state-layer-opacity);
+}
+
+:host([type="filled"][disabled]) .container {
+  background-color: var(--md-sys-color-on-surface);
+  opacity: 0.12;
+}
+
+:host([type="filled"][disabled]) .content {
+  opacity: 0.38;
+}
+
+:host([type="filled"][disabled]) .content,
+:host([type="filled"][disabled]) .content slot::slotted(*) {
+  color: var(--md-sys-color-on-surface) !important;
+  fill: var(--md-sys-color-on-surface) !important;
+}
+
+/* Elevated button */
+
+:host([type="elevated"]) {
+  --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
+  --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
+  --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
+}
+
+:host([type="elevated"]) .container {
+  background-color: var(--md-sys-color-surface);
+  box-shadow: var(--md-sys-elevation-1);
+}
+
+:host([type="elevated"]) .surface {
+  color: var(--md-sys-color-primary);
+}
+
+:host([type="elevated"]) .content slot::slotted(*) {
+  color: var(--md-sys-color-primary);
+  fill: var(--md-sys-color-primary);
+}
+
+:host([type="elevated"]:hover) .container {
+  box-shadow: var(--md-sys-elevation-2);
+}
+
+:host([type="elevated"]:hover) .state {
+  background-color: var(--md-sys-color-primary);
+  opacity: var(--md-sys-state-hover-state-layer-opacity);
+}
+
+:host([type="elevated"]:focus) .container {
+  box-shadow: var(--md-sys-elevation-1);
+}
+
+:host([type="elevated"]:focus) .state {
+  background-color: var(--md-sys-color-primary);
+  opacity: var(--md-sys-state-focus-state-layer-opacity);
+}
+
+:host([type="elevated"]:active) .container,
+:host([type="elevated"]) .pressed .container {
+  box-shadow: var(--md-sys-elevation-1);
+}
+
+:host([type="elevated"]:active) .state,
+:host([type="elevated"]) .pressed .state {
+  background-color: var(--md-sys-color-primary);
+  opacity: var(--md-sys-state-pressed-state-layer-opacity);
+}
+
+:host([type="elevated"][disabled]) .container {
+  background-color: var(--md-sys-color-on-surface);
+  opacity: 0.12;
+}
+
+:host([type="elevated"][disabled]) .content {
+  opacity: 0.38;
+}
+
+:host([type="elevated"][disabled]) .content,
+:host([type="elevated"][disabled]) .content slot::slotted(*) {
+  color: var(--md-sys-color-on-surface);
+  fill: var(--md-sys-color-on-surface) !important;
+}
+
+:host([type="elevated"][disabled]) .container {
+  box-shadow: var(--md-sys-elevation-0);
+}
+
+/* Tonal button */
+
+:host([type="tonal"]) {
+  --md-ripple-hover-state-layer-color: var(--md-sys-color-on-secondary-container);
+  --md-ripple-focus-state-layer-color: var(--md-sys-color-on-secondary-container);
+  --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-secondary-container);
+}
+
+:host([type="tonal"]) .container {
+  background-color: var(--md-sys-color-secondary-container);
+}
+
+:host([type="tonal"]) .surface {
+  color: var(--md-sys-color-on-secondary-container);
+}
+
+:host([type="tonal"]) .content slot::slotted(*) {
+  color: var(--md-sys-color-on-secondary-container);
+  fill: var(--md-sys-color-on-secondary-container);
+}
+
+:host([type="tonal"]:hover) .container {
+  box-shadow: var(--md-sys-elevation-1);
+}
+
+:host([type="tonal"]:hover) .state {
+  background-color: var(--md-sys-color-on-secondary-container);
+  opacity: var(--md-sys-state-hover-state-layer-opacity);
+}
+
+:host([type="tonal"]:focus) .state {
+  background-color: var(--md-sys-color-on-secondary-container);
+  opacity: var(--md-sys-state-focus-state-layer-opacity);
+}
+
+:host([type="tonal"]:active) .state,
+:host([type="tonal"]) .pressed .state {
+  background-color: var(--md-sys-color-on-secondary-container);
+  opacity: var(--md-sys-state-pressed-state-layer-opacity);
+}
+
+:host([type="tonal"][disabled]) .container {
+  background-color: var(--md-sys-color-on-surface);
+  opacity: 0.12;
+}
+
+:host([type="tonal"][disabled]) .content {
+  opacity: 0.38;
+}
+
+:host([type="tonal"][disabled]) .content,
+:host([type="tonal"][disabled]) .content slot::slotted(*) {
+  color: var(--md-sys-color-on-surface) !important;
+  fill: var(--md-sys-color-on-surface) !important;
+}
+
+/* Outlined button */
+
+:host([type="outlined"]) {
+  --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
+  --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
+  --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
+}
+
+:host([type="outlined"]) .container {
+  border: 1px var(--md-sys-color-outline) solid;
+}
+
+:host([type="outlined"]) .surface {
+  color: var(--md-sys-color-primary);
+}
+
+:host([type="outlined"]) .content slot::slotted(*) {
+  color: var(--md-sys-color-primary);
+  fill: var(--md-sys-color-primary);
+}
+
+:host([type="outlined"]:hover) .state {
+  background-color: var(--md-sys-color-primary);
+  opacity: var(--md-sys-state-hover-state-layer-opacity);
+}
+
+:host([type="outlined"]:focus) .state {
+  background-color: var(--md-sys-color-primary);
+  opacity: var(--md-sys-state-focus-state-layer-opacity);
+}
+
+:host([type="outlined"]:active) .state,
+:host([type="outlined"]) .pressed .state {
+  background-color: var(--md-sys-color-primary);
+  opacity: var(--md-sys-state-pressed-state-layer-opacity);
+}
+
+:host([type="outlined"][disabled]) .container {
+  opacity: 0.12;
+}
+
+:host([type="outlined"][disabled]) .content {
+  opacity: 0.38;
+}
+
+:host([type="outlined"][disabled]) .content,
+:host([type="outlined"][disabled]) .content slot::slotted(*) {
+  color: var(--md-sys-color-on-surface) !important;
+  fill: var(--md-sys-color-on-surface) !important;
+}
+
+/* Text button */
+
+:host([type="text"]) {
+  --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
+  --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
+  --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
+  color: var(--md-sys-color-primary)
+}
+
+:host([type="text"]) .content slot::slotted(*) {
+  color: var(--md-sys-color-primary);
+  fill: var(--md-sys-color-primary);
+}
+
+:host([type="text"][disabled]) .content {
+  opacity: 0.38;
+}
+
+:host([type="text"][disabled]) .content,
+:host([type="text"][disabled]) .content slot::slotted(*) {
+  color: var(--md-sys-color-on-surface) !important;
+  fill: var(--md-sys-color-on-surface) !important;
+}
+
+:host([type="text"]:hover) .state {
+  background-color: var(--md-sys-color-primary);
+  opacity: var(--md-sys-state-hover-state-layer-opacity);
+}
+
+:host([type="text"]:focus) .state {
+  background-color: var(--md-sys-color-primary);
+  opacity: var(--md-sys-state-focus-state-layer-opacity);
+}
+
+:host([type="text"]:active) .state,
+:host([type="text"]) .pressed .state {
+  background-color: var(--md-sys-color-primary);
+  opacity: var(--md-sys-state-pressed-state-layer-opacity);
+}
+`;

package/src/ui/button/UiButton.ts

@@ -0,0 +1,207 @@
+import { html, TemplateResult } from "lit";
+import { property, queryAsync, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { when } from 'lit/directives/when.js';
+import { BeginPressConfig, EndPressConfig } from "../controllers/ActionController.js";
+import { Button } from "./Button.js";
+import { ripple } from '../effects/rippleDirective.js';
+import UiRipple from "../effects/ripple.js";
+import '../../define/ui/ui-ripple.js';
+
+/**
+ * The type of the button rendered.
+ */
+export enum ButtonType {
+  'elevated' = 'elevated',
+  'filled' = 'filled',
+  'tonal' = 'tonal',
+  'outlined' = 'outlined',
+  'text' = 'text',
+}
+
+/**
+ * A material design button.
+ * 
+ * Note, this control is form associated.
+ * 
+ * @slot icon - A slot for the icon element
+ * @slot - The default slot for the label
+ */
+export default class UiButton extends Button {
+  static get formAssociated(): boolean {
+    return true;
+  }
+
+  #_internals = this.attachInternals();
+
+  get form(): HTMLFormElement | null {
+    return this.#_internals && this.#_internals.form;
+  }
+
+  /**
+   * The type of the rendered button according to Material 3 spec.
+   * 
+   * @default {ButtonType.filled}
+   * @attribute
+   */
+  @property({ type: String, reflect: true, }) type: ButtonType;
+
+  /**
+   * Determines when the element has an icon in the "icon" slot.
+   */
+  @state() protected _hasIcon: boolean;
+
+  /**
+   * The name of the button, submitted as a pair with the button's value as part of the form data, 
+   * when that button is used to submit the form.
+   * @attribute
+   */
+  @property({ type: String }) name?: string;
+
+  #_value?: string;
+
+  /**
+   * Defines the value associated with the button's name when it's submitted with the form data. 
+   * This value is passed to the server in params when the form is submitted using this button.
+   * @attribute
+   */
+  @property({ type: String })
+  get value(): string | undefined {
+    return this.#_value;
+  }
+
+  set value(value: string | undefined) {
+    if (this.#_value === value) {
+      return;
+    }
+    this.#_value = value;
+    this.#_internals?.setFormValue(value || null);
+  }
+
+  /**
+   * Whether to render the icon at the inline end of the label rather than the
+   * inline start.
+   * @attribute
+   */
+  @property({ type: Boolean, attribute: 'trailingicon', reflect: true }) trailingIcon = false;
+
+  @queryAsync('ui-ripple') protected ripple!: Promise<UiRipple | null>;
+
+  @state() protected showRipple = false;
+
+  /**
+   * Whether the button is a submit button for a form.
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true, }) submit?: boolean;
+
+  protected readonly getRipple = (): Promise<UiRipple | null> => {
+    this.showRipple = true;
+    return this.ripple;
+  };
+
+  constructor() {
+    super();
+
+    this.type = ButtonType.filled;
+    this._hasIcon = false;
+  }
+
+  protected async pressRipple(): Promise<void> {
+    const element = await this.getRipple();
+    if (element && !element.isPressed) {
+      element.beginPress();
+    }
+  }
+
+  protected async endRipple(): Promise<void> {
+    const element = await this.getRipple();
+    element?.endPress();
+  }
+
+  override beginPress(options: BeginPressConfig): void {
+    super.beginPress(options);
+    this.pressRipple();
+  }
+
+  override endPress(config: EndPressConfig): void {
+    super.endPress(config);
+    this.endRipple();
+    const { cancelled, reason } = config;
+    if (cancelled) {
+      return;
+    }
+    if (!reason || reason === 'enter' || reason === 'space') {
+      this._submitHandler();
+    }
+    if (reason === 'enter' || reason === 'space') {
+      this.click();
+    }
+  }
+
+  protected _submitHandler(): void {
+    const { form, name, value, submit, disabled } = this;
+    if (!form || !submit || disabled) {
+      return;
+    }
+    let button: HTMLButtonElement | undefined;
+    if (name || value) {
+      button = document.createElement('button');
+      if (name) {
+        button.name = name;
+      }
+      if (value) {
+        button.value = value;
+      }
+      button.type = 'submit';
+      button.hidden = true;
+      form.append(button);
+    }
+    try {
+      form.requestSubmit(button);
+    } catch (_) {
+      // ...
+    }
+    if (button) {
+      form.removeChild(button);
+    }
+  }
+
+  /**
+   * Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
+   */
+  protected _iconSlotChange(e: Event): void {
+    const slot = e.target as HTMLSlotElement;
+    this._hasIcon = !!slot.assignedNodes().length;
+  }
+
+  protected override render(): TemplateResult {
+    const { pressed = false, trailingIcon = false } = this;
+    const containerClasses = classMap({
+      surface: true,
+      withIcon: this._hasIcon,
+      pressed,
+    });
+    return html`
+    <div class="${containerClasses}" ${ripple(this.getRipple)}>
+      <div class="container"></div>
+      <div class="state"></div>
+      ${when(this.showRipple, this.renderRipple)}
+      <div class="content">
+        ${trailingIcon ? '' : this._iconTemplate()}
+        <slot></slot>
+        ${trailingIcon ? this._iconTemplate() : ''}
+      </div>
+    </div>
+    `;
+  }
+
+  protected _iconTemplate(): TemplateResult {
+    return html`<slot name="icon" @slotchange="${this._iconSlotChange}"></slot>`;
+  }
+
+  protected renderRipple = (): TemplateResult => {
+    const { disabled } = this;
+    return html`<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
+  };
+}