@simplysm/angular 14.0.30 → 14.0.33

package/src/controls/input/sd-textfield.ts

@@ -0,0 +1,396 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+import { setupInvalid } from "../../core/validation/setupInvalid";
+import {
+  textfieldTypeHandlers,
+  type SdTextfieldTypes,
+} from "./sd-textfield-type-handlers";
+
+@Component({
+  selector: "sd-textfield",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  template: `
+    <div
+      [style]="inputStyle()"
+      [class]="inputClass() ? '_contents ' + inputClass() : '_contents'"
+      [attr.title]="title() ?? placeholder()"
+      [style.visibility]="!readonly() && !disabled() ? 'hidden' : undefined"
+    >
+      @if (controlType() === "password") {
+        <span class="tx-trans-light">****</span>
+      } @else {
+        @if (controlValue()) {
+          <pre>{{ controlValueText() ?? controlValue() }} </pre>
+        } @else if (placeholder()) {
+          <span class="tx-trans-lighter">{{ placeholder() }}</span>
+        } @else {
+          <span>&nbsp;</span>
+        }
+      }
+    </div>
+    @if (!readonly() && !disabled()) {
+      <input
+        [style]="inputStyle()"
+        [class]="inputClass()"
+        [attr.title]="title() ?? placeholder()"
+        [attr.placeholder]="placeholder()"
+        [attr.min]="min()"
+        [attr.max]="max()"
+        [type]="controlType()"
+        [attr.inputmode]="type() === 'number' ? 'numeric' : undefined"
+        [value]="controlValue()"
+        [attr.autocomplete]="autocomplete()"
+        [attr.step]="controlStep()"
+        (input)="onInput($event)"
+        (paste)="onInputPaste($event)"
+      />
+    }
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "sass:map";
+
+      @use "../../../scss/commons/variables";
+      @use "../../../scss/commons/mixins";
+
+      sd-textfield {
+        display: block;
+        position: relative;
+
+        > input,
+        > ._contents {
+          @include mixins.form-control-base();
+
+          overflow: auto;
+          width: 100%;
+
+          border: 1px solid var(--trans-lighter);
+          border-radius: var(--border-radius-default);
+          background: var(--theme-secondary-lightest);
+
+          &:focus {
+            outline: none;
+            border-color: var(--theme-secondary-default);
+          }
+
+          &[type="date"],
+          &[type="month"],
+          &[type="datetime-local"] {
+            padding-top: calc(var(--gap-sm) - 1px);
+            padding-bottom: calc(var(--gap-sm) - 1px);
+          }
+
+          &::-webkit-scrollbar {
+            display: none;
+          }
+
+          &::-webkit-input-placeholder {
+            color: var(--text-trans-lighter);
+          }
+
+          &::-webkit-outer-spin-button,
+          &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+          }
+
+          &::-webkit-calendar-picker-indicator {
+            cursor: pointer;
+            margin: auto;
+          }
+        }
+
+        > ._contents {
+          display: none;
+        }
+
+        &[data-sd-type="number"] {
+          > input,
+          > ._contents {
+            text-align: right;
+          }
+        }
+
+        @each $key, $val in map.get(variables.$vars, theme) {
+          &[data-sd-theme="#{$key}"] {
+            > input,
+            > ._contents {
+              background: var(--theme-#{$key}-lightest);
+            }
+          }
+        }
+
+        &[data-sd-size="sm"] {
+          > input,
+          > ._contents {
+            padding: var(--gap-xs) var(--gap-sm);
+
+            &[type="date"],
+            &[type="month"],
+            &[type="datetime-local"],
+            &[type="color"] {
+              padding-top: calc(var(--gap-xs) - 1px);
+              padding-bottom: calc(var(--gap-xs) - 1px);
+            }
+          }
+        }
+
+        &[data-sd-size="lg"] {
+          > input,
+          > ._contents {
+            padding: var(--gap-default) var(--gap-lg);
+
+            &[type="date"],
+            &[type="month"],
+            &[type="datetime-local"],
+            &[type="color"] {
+              padding-top: calc(var(--gap-default) - 1px);
+              padding-bottom: calc(var(--gap-default) - 1px);
+            }
+          }
+        }
+
+        &[data-sd-inline="true"] {
+          display: inline-block;
+          vertical-align: top;
+
+          > input,
+          > ._contents {
+            width: auto;
+            vertical-align: top;
+          }
+        }
+
+        &[data-sd-inset="true"] {
+          > ._contents {
+            display: block;
+          }
+
+          > input {
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+
+          > input,
+          > ._contents {
+            width: 100%;
+            border: none;
+            border-radius: 0;
+          }
+
+          > input:focus {
+            outline: 1px solid var(--theme-primary-default);
+            outline-offset: -1px;
+          }
+
+          &[data-sd-type="month"] {
+            > input,
+            > ._contents {
+              width: 8.25em;
+            }
+          }
+
+          &[data-sd-type="date"] {
+            > input,
+            > ._contents {
+              width: 8.25em;
+            }
+          }
+
+          &[data-sd-type="datetime-local"] {
+            > input,
+            > ._contents {
+              width: 14em;
+            }
+          }
+
+          &[data-sd-type="year"] {
+            > input,
+            > ._contents {
+              width: 4em;
+            }
+          }
+
+          &[data-sd-type="color"] {
+            > input,
+            > ._contents {
+              height: calc(
+                var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2
+              );
+            }
+
+            &[data-sd-size="sm"] {
+              > input,
+              > ._contents {
+                height: calc(
+                  var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2
+                );
+              }
+            }
+
+            &[data-sd-size="lg"] {
+              > input,
+              > ._contents {
+                height: calc(
+                  var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2
+                );
+              }
+            }
+          }
+        }
+
+        &[data-sd-disabled="true"] {
+          > ._contents {
+            display: block;
+            background: var(--theme-gray-lightest);
+            color: var(--text-trans-light);
+          }
+
+          &[data-sd-inset="true"] {
+            > ._contents {
+              background: var(--control-color);
+              color: var(--text-trans-default);
+            }
+          }
+        }
+
+        &[data-sd-readonly="true"] {
+          > ._contents {
+            display: block;
+          }
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-type]": "controlType()",
+    "[attr.data-sd-disabled]": "disabled()",
+    "[attr.data-sd-readonly]": "readonly()",
+    "[attr.data-sd-inline]": "inline()",
+    "[attr.data-sd-inset]": "inset()",
+    "[attr.data-sd-size]": "size()",
+    "[attr.data-sd-theme]": "theme()",
+  },
+})
+export class SdTextfield<K extends keyof SdTextfieldTypes> {
+  value = model<SdTextfieldTypes[K]>();
+
+  type = input.required<K>();
+  placeholder = input<string>();
+  title = input<string>();
+  inputStyle = input<string>();
+  inputClass = input<string>();
+
+  disabled = input(false, { transform: booleanAttribute });
+  readonly = input(false, { transform: booleanAttribute });
+
+  required = input(false, { transform: booleanAttribute });
+  min = input<SdTextfieldTypes[K]>();
+  max = input<SdTextfieldTypes[K]>();
+  minlength = input<number>();
+  maxlength = input<number>();
+  pattern = input<string>();
+  validatorFn = input<(value: SdTextfieldTypes[K] | undefined) => string | undefined>();
+  format = input<string>();
+
+  step = input<number>();
+  autocomplete = input<string>();
+  useNumberComma = input(true, { transform: booleanAttribute });
+  minDigits = input<number>();
+
+  inline = input(false, { transform: booleanAttribute });
+  inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
+  theme = input<
+    "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray"
+  >();
+
+  private readonly _handler = computed(() => textfieldTypeHandlers[this.type()]);
+
+  controlType = computed(() => this._handler().controlType);
+
+  controlStep = computed(() => this._handler().getControlStep(this.step()));
+
+  controlValue = computed(() => {
+    const value = this.value();
+    if (value == null) return "";
+    return this._handler().toControlValue(value, {
+      useNumberComma: this.useNumberComma(),
+      format: this.format(),
+    });
+  });
+
+  controlValueText = computed(() => {
+    const value = this.value();
+    if (value == null) return undefined;
+    return this._handler().toDisplayText(value, {
+      minDigits: this.minDigits(),
+    });
+  });
+
+  constructor() {
+    setupInvalid(() => {
+      const value = this.value();
+      const handlerErrors = this._handler().validate(value, {
+        required: this.required(),
+        min: this.min(),
+        max: this.max(),
+        minlength: this.minlength(),
+        maxlength: this.maxlength(),
+        pattern: this.pattern(),
+        format: this.format(),
+      });
+
+      const errorMessages = [...handlerErrors];
+
+      if (this.validatorFn()) {
+        const message = this.validatorFn()!(value);
+        if (message !== undefined) {
+          errorMessages.push(message);
+        }
+      }
+
+      return errorMessages.join("\r\n");
+    });
+  }
+
+  onInput(event: Event): void {
+    const inputEl = event.target as HTMLInputElement;
+    if (inputEl.value === "") {
+      this.value.set(undefined);
+      return;
+    }
+    const parsed = this._handler().parse(inputEl.value, { format: this.format() });
+    if (parsed === undefined) {
+      return;
+    }
+    this.value.set(parsed as SdTextfieldTypes[K]);
+  }
+
+  onInputPaste(event: ClipboardEvent): void {
+    event.preventDefault();
+    const text = event.clipboardData?.getData("text/plain").trim();
+    if (text == null || text === "") {
+      this.value.set(undefined);
+      return;
+    }
+    const parsed = this._handler().parse(text, { format: this.format() });
+    if (parsed === undefined) {
+      const inputEl = event.target as HTMLInputElement;
+      inputEl.value = this.controlValue();
+      return;
+    }
+    this.value.set(parsed as SdTextfieldTypes[K] | undefined);
+  }
+}

package/src/controls/list/sd-list-item.ts

@@ -0,0 +1,145 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  contentChildren,
+  input,
+  model,
+  TemplateRef,
+  ViewEncapsulation,
+} from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { NgIcon } from "@ng-icons/core";
+import { SdCollapse } from "../collapse/sd-collapse";
+import { SdCollapseIcon } from "../collapse/sd-collapse-icon";
+import { SdList } from "./sd-list";
+import { setupRipple } from "../../core/ripple/setupRipple";
+
+@Component({
+  selector: "sd-list-item",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon],
+  template: `
+    <div class="_content" [style]="contentStyle()" [class]="contentClass()" tabindex="0" (click)="onContentClick()" (keydown.enter)="onContentClick()">
+      @if (layout() === "accordion" && hasChildren()) {
+        <sd-collapse-icon [open]="open()" />
+      }
+      @if (selectedIcon() !== undefined && !hasChildren()) {
+        <ng-icon
+          [class.tx-theme-primary-default]="selected()"
+          [class.tx-trans-lightest]="!selected()"
+          [svg]="selectedIcon()!"
+        />
+      }
+      <div class="_label">
+        <ng-content />
+      </div>
+      @if (toolTpl()) {
+        <div class="_tool">
+          <ng-template [ngTemplateOutlet]="toolTpl()!" />
+        </div>
+      }
+    </div>
+    @if (hasChildren()) {
+      <sd-collapse [open]="childrenOpen()">
+        <ng-content select="sd-list" />
+      </sd-collapse>
+    }
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-list-item {
+        display: block;
+
+        > ._content {
+          display: flex;
+          align-items: center;
+          padding: var(--gap-sm) var(--gap-default);
+          cursor: pointer;
+          gap: var(--gap-sm);
+
+          > ._label {
+            flex: 1;
+          }
+        }
+
+        &:hover > ._content {
+          background: var(--trans-lighter);
+        }
+
+        &[data-sd-selected="true"] > ._content {
+          background: var(--trans-lighter);
+          font-weight: bold;
+        }
+
+        &[data-sd-readonly="true"] {
+          > ._content {
+            cursor: default;
+          }
+
+          &:hover > ._content {
+            background: transparent;
+          }
+        }
+
+        &[data-sd-layout="flat"] {
+          > ._content {
+            font-size: 0.85em;
+            opacity: 0.7;
+            cursor: default;
+          }
+
+          &:hover > ._content {
+            background: transparent;
+          }
+        }
+
+        &[data-sd-has-children="false"] {
+          > ._content {
+            padding-left: calc(var(--gap-default) + var(--gap-sm) + 0.75em);
+          }
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-layout]": "layout()",
+    "[attr.data-sd-selected]": "selected()",
+    "[attr.data-sd-readonly]": "readonly()",
+    "[attr.data-sd-has-children]": "hasChildren()",
+  },
+})
+export class SdListItem {
+  layout = input<"accordion" | "flat">("accordion");
+  open = model(false);
+  selected = input(false, { transform: booleanAttribute });
+  selectedIcon = input<string>();
+  readonly = input(false, { transform: booleanAttribute });
+  contentStyle = input<string>();
+  contentClass = input<string>();
+
+  toolTpl = contentChild<TemplateRef<void>>("toolTpl");
+
+  private readonly _childLists = contentChildren(SdList);
+
+  hasChildren = computed(() => this._childLists().length > 0);
+
+  childrenOpen = computed(() => {
+    return this.layout() === "flat" ? true : this.open();
+  });
+
+  constructor() {
+    setupRipple(() => !this.readonly() && this.layout() !== "flat");
+  }
+
+  onContentClick(): void {
+    if (this.readonly()) return;
+    if (this.layout() === "accordion" && this.hasChildren()) {
+      this.open.update((v) => !v);
+    }
+  }
+}

package/src/controls/pagination/sd-pagination.ts

@@ -0,0 +1,127 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+  numberAttribute,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdAnchor } from "../button/sd-anchor";
+import { NgIcon } from "@ng-icons/core";
+import {
+  tablerChevronLeft,
+  tablerChevronRight,
+  tablerChevronsLeft,
+  tablerChevronsRight,
+} from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-pagination",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdAnchor, NgIcon],
+  template: `
+    <sd-anchor class="nav-first" [disabled]="!hasPrev()" (click)="goToFirst()">
+      <ng-icon [svg]="icons.tablerChevronsLeft" />
+    </sd-anchor>
+    <sd-anchor class="nav-prev-group" [disabled]="!hasPrev()" (click)="goToPrevGroup()">
+      <ng-icon [svg]="icons.tablerChevronLeft" />
+    </sd-anchor>
+
+    @for (page of displayPages(); track page) {
+      <sd-anchor
+        class="page-anchor"
+        [style.text-decoration]="page === currentPage() + 1 ? 'underline' : ''"
+        (click)="goToPage(page - 1)"
+      >{{ page }}</sd-anchor>
+    }
+
+    <sd-anchor class="nav-next-group" [disabled]="!hasNext()" (click)="goToNextGroup()">
+      <ng-icon [svg]="icons.tablerChevronRight" />
+    </sd-anchor>
+    <sd-anchor class="nav-last" [disabled]="!hasNext()" (click)="goToLast()">
+      <ng-icon [svg]="icons.tablerChevronsRight" />
+    </sd-anchor>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-pagination {
+        > sd-anchor {
+          display: inline-block;
+          padding: var(--gap-xs);
+        }
+      }
+    `,
+  ],
+  host: {
+    class: "flex-row gap-xs",
+  },
+})
+export class SdPagination {
+  icons = { tablerChevronsLeft, tablerChevronLeft, tablerChevronRight, tablerChevronsRight };
+
+  currentPage = model(0);
+  totalPageCount = input(0, { transform: numberAttribute });
+  visiblePageCount = input(10, { transform: numberAttribute });
+
+  private readonly _groupIndex = computed(() => {
+    return Math.floor(this.currentPage() / Math.max(this.visiblePageCount(), 1));
+  });
+
+  hasPrev = computed(() => {
+    if (this.totalPageCount() === 0) {
+      return false;
+    }
+    return this._groupIndex() > 0;
+  });
+
+  hasNext = computed(() => {
+    const totalPageCount = this.totalPageCount();
+    if (totalPageCount === 0) {
+      return false;
+    }
+    const lastGroupIndex = Math.floor((totalPageCount - 1) / Math.max(this.visiblePageCount(), 1));
+    return this._groupIndex() < lastGroupIndex;
+  });
+
+  displayPages = computed(() => {
+    const totalPageCount = this.totalPageCount();
+    if (totalPageCount === 0) {
+      return [] as number[];
+    }
+
+    const visiblePageCount = this.visiblePageCount();
+    const startPage = this._groupIndex() * visiblePageCount + 1;
+    const endPage = Math.min(startPage + visiblePageCount - 1, totalPageCount);
+
+    const pages: number[] = [];
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    return pages;
+  });
+
+  goToPage(page: number): void {
+    this.currentPage.set(page);
+  }
+
+  goToNextGroup(): void {
+    this.currentPage.set((this._groupIndex() + 1) * Math.max(this.visiblePageCount(), 1));
+  }
+
+  goToPrevGroup(): void {
+    if (!this.hasPrev()) return;
+    this.currentPage.set((this._groupIndex() - 1) * Math.max(this.visiblePageCount(), 1));
+  }
+
+  goToFirst(): void {
+    this.currentPage.set(0);
+  }
+
+  goToLast(): void {
+    if (this.totalPageCount() === 0) return;
+    this.currentPage.set(this.totalPageCount() - 1);
+  }
+}

package/src/controls/select/sd-select-button.ts

@@ -0,0 +1,43 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from "@angular/core";
+import { setupRipple } from "../../core/ripple/setupRipple";
+
+@Component({
+  selector: "sd-select-button",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  template: `
+    <ng-content />
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-select-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--gap-sm) var(--gap-default);
+        cursor: pointer;
+        border-left: 1px solid var(--trans-lighter);
+        position: relative;
+        overflow: hidden;
+
+        &:hover {
+          background: var(--trans-lighter);
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.tabindex]": "0",
+  },
+})
+export class SdSelectButton {
+  constructor() {
+    setupRipple(() => true);
+  }
+}