@simplysm/angular 14.0.30 → 14.0.33

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

@@ -0,0 +1,305 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+import { setupRipple } from "../../core/ripple/setupRipple";
+import { setupModelHook } from "../../core/setupModelHook";
+import { NgIcon } from "@ng-icons/core";
+import { tablerCheck } from "@ng-icons/tabler-icons";
+
+@Component({
+  selector: "sd-checkbox",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [NgIcon],
+  template: `
+    <div class="_indicator_rect">
+      <div class="_indicator">
+        @if (!radio()) {
+          <ng-icon [svg]="icon()" />
+        } @else {
+          <div></div>
+        }
+      </div>
+    </div>
+    <div class="_contents" [style]="contentStyle()">
+      <ng-content />
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "sass:map";
+
+      @use "../../../scss/commons/variables";
+      @use "../../../scss/commons/mixins";
+
+      sd-checkbox {
+        @include mixins.form-control-base();
+        color: inherit;
+        cursor: pointer;
+
+        height: calc(
+          var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2 + 2px
+        );
+        gap: var(--gap-sm);
+
+        @supports not (appearance: auto) {
+          gap: 0;
+          > * + * {
+            margin-left: var(--gap-sm);
+          }
+        }
+
+        > ._indicator_rect {
+          display: inline-block;
+          vertical-align: -0.125em;
+          user-select: none;
+
+          width: calc(var(--font-size-default) + 2px);
+          height: calc(var(--font-size-default) + 2px);
+          border: 1px solid var(--trans-light);
+          background: var(--theme-secondary-lightest);
+
+          > ._indicator {
+            margin: -1px -2px;
+            text-align: center;
+            opacity: 0;
+            color: var(--text-trans-rev-default);
+
+            > ng-icon {
+              > svg {
+                vertical-align: top;
+                stroke-width: 2.5px !important;
+              }
+            }
+          }
+        }
+
+        ._contents {
+          display: inline-block;
+          vertical-align: top;
+          padding-left: var(--gap-sm);
+        }
+
+        > ._indicator_rect + ._contents:empty {
+          display: none;
+        }
+
+        &:focus > ._indicator_rect {
+          border-color: var(--theme-primary-dark);
+        }
+
+        &[data-sd-checked="true"] {
+          > ._indicator_rect {
+            background: var(--theme-primary-default);
+
+            > ._indicator {
+              opacity: 1;
+            }
+          }
+        }
+
+        @each $key, $val in map.get(variables.$vars, theme) {
+          &[data-sd-theme="#{$key}"] {
+            > ._indicator_rect {
+              background: var(--theme-#{$key}-lightest);
+
+              > ._indicator {
+                color: var(--theme-#{$key}-default);
+              }
+            }
+
+            &:focus {
+              > ._indicator_rect {
+                border-color: var(--theme-#{$key}-default);
+              }
+            }
+
+            &[data-sd-checked="true"] {
+              > ._indicator_rect {
+                background: var(--theme-#{$key}-default);
+
+                > ._indicator {
+                  color: var(--text-trans-rev-default);
+                }
+              }
+            }
+          }
+        }
+
+        &[data-sd-theme="white"] {
+          > ._indicator_rect {
+            background: var(--control-color);
+            border-color: var(--text-trans-lightest);
+          }
+
+          &:focus {
+            > ._indicator_rect {
+              border-color: var(--text-trans-default);
+            }
+          }
+
+          &[data-sd-checked="true"] {
+            > ._indicator_rect {
+              background: var(--theme-primary-default);
+            }
+          }
+        }
+
+        &[data-sd-radio="true"] {
+          > ._indicator_rect {
+            border-radius: 100%;
+            padding: var(--gap-xs);
+
+            > ._indicator {
+              border-radius: 100%;
+              width: 100%;
+              height: 100%;
+              background: var(--theme-primary-default);
+            }
+          }
+
+          &[data-sd-checked="true"] {
+            > ._indicator_rect {
+              background: var(--theme-secondary-lightest);
+              border-color: var(--theme-primary-dark);
+            }
+          }
+        }
+
+        &[data-sd-size="sm"] {
+          height: calc(
+            var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px
+          );
+          padding: var(--gap-xs) var(--gap-sm);
+          gap: var(--gap-xs);
+
+          @supports not (appearance: auto) {
+            gap: 0;
+            > * + * {
+              margin-left: var(--gap-xs);
+            }
+          }
+        }
+
+        &[data-sd-size="lg"] {
+          height: calc(
+            var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px
+          );
+          padding: var(--gap-default) var(--gap-lg);
+          gap: var(--gap-default);
+
+          @supports not (appearance: auto) {
+            gap: 0;
+            > * + * {
+              margin-left: var(--gap-default);
+            }
+          }
+        }
+
+        &[data-sd-inset="true"] {
+          height: calc(
+            var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2
+          );
+          border: none;
+          justify-content: center;
+          text-align: center;
+
+          &[data-sd-size="sm"] {
+            height: calc(
+              var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2
+            );
+          }
+
+          &[data-sd-size="lg"] {
+            height: calc(
+              var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2
+            );
+          }
+        }
+
+        &[data-sd-inline="true"] {
+          display: inline-block;
+          vertical-align: top;
+          padding: 0;
+          border: none;
+          height: calc(var(--font-size-default) * var(--line-height-strip-unit));
+          width: auto;
+        }
+
+        &[data-sd-disabled="true"] {
+          opacity: 0.3;
+          pointer-events: none;
+        }
+      }
+    `,
+  ],
+  host: {
+    "[attr.data-sd-checked]": "value()",
+    "[attr.data-sd-disabled]": "disabled()",
+    "[attr.data-sd-inline]": "inline()",
+    "[attr.data-sd-inset]": "inset()",
+    "[attr.data-sd-radio]": "radio()",
+    "[attr.data-sd-size]": "size()",
+    "[attr.data-sd-theme]": "theme()",
+    "[attr.tabindex]": "0",
+    "(click)": "onClick()",
+    "(keydown)": "onKeydown($event)",
+  },
+})
+export class SdCheckbox {
+  value = model(false);
+  canChangeFn = input<(item: boolean) => boolean | Promise<boolean>>(() => true);
+
+  icon = input(tablerCheck);
+  radio = input(false, { transform: booleanAttribute });
+  disabled = input(false, { transform: booleanAttribute });
+
+  size = input<"sm" | "lg">();
+  inline = input(false, { transform: booleanAttribute });
+  inset = input(false, { transform: booleanAttribute });
+  theme = input<
+    | "primary"
+    | "secondary"
+    | "info"
+    | "success"
+    | "warning"
+    | "danger"
+    | "gray"
+    | "blue-gray"
+    | "white"
+  >();
+
+  contentStyle = input<string>();
+
+  constructor() {
+    setupModelHook(this.value, this.canChangeFn);
+    setupRipple(() => !this.disabled());
+  }
+
+  onClick() {
+    if (this.disabled()) return;
+    if (this.radio()) {
+      this.value.set(true);
+    } else {
+      this.value.update((v) => !v);
+    }
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    if (event.key === " ") {
+      event.preventDefault();
+      if (this.disabled()) return;
+      if (this.radio()) {
+        this.value.set(true);
+      } else {
+        this.value.update((v) => !v);
+      }
+    }
+  }
+}

package/src/controls/checkbox/sd-switch.ts

@@ -0,0 +1,145 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+  ViewEncapsulation,
+} from "@angular/core";
+
+@Component({
+  selector: "sd-switch",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  host: {
+    "[attr.data-sd-on]": "value()",
+    "[attr.data-sd-disabled]": "disabled()",
+    "[attr.data-sd-inline]": "inline()",
+    "[attr.data-sd-inset]": "inset()",
+    "[attr.data-sd-size]": "size()",
+    "[attr.data-sd-theme]": "theme()",
+    "[attr.tabindex]": "'0'",
+    "(click)": "onClick($event)",
+    "(keydown)": "onKeydown($event)",
+  },
+  template: `
+    <div>
+      <div></div>
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "sass:map";
+
+      @use "../../../scss/commons/variables";
+
+      sd-switch {
+        display: block;
+        padding: var(--gap-sm) 0;
+        border: 1px solid transparent;
+        vertical-align: top;
+        cursor: pointer;
+
+        > div {
+          height: var(--line-height);
+          width: calc(var(--line-height) * 2 - var(--gap-xs));
+          padding: calc(var(--gap-xs) / 2);
+          border-radius: calc(var(--line-height) / 2);
+          text-align: left;
+
+          background: var(--theme-gray-lighter);
+
+          > div {
+            display: inline-block;
+            width: calc(var(--line-height) - var(--gap-xs));
+            height: calc(var(--line-height) - var(--gap-xs));
+            border-radius: 100%;
+
+            background: var(--control-color);
+
+            transition: transform var(--animation-duration);
+          }
+        }
+
+        &[data-sd-on="true"] {
+          > div {
+            background: var(--theme-success-default);
+
+            > div {
+              transform: translateX(100%);
+            }
+          }
+        }
+
+        &[data-sd-inline="true"] {
+          display: inline-block;
+          padding: 0;
+          border: none;
+        }
+
+        &[data-sd-inset="true"] {
+          border: none;
+        }
+
+        &[data-sd-size="sm"] {
+          padding: var(--gap-sm) 0;
+        }
+
+        &[data-sd-size="lg"] {
+          padding: var(--gap-default) 0;
+        }
+
+        @each $key, $val in map.get(variables.$vars, theme) {
+          &[data-sd-theme="#{$key}"] {
+            &[data-sd-on="true"] {
+              > div {
+                background: var(--theme-#{$key}-default);
+              }
+            }
+          }
+        }
+
+        &[data-sd-disabled="true"] {
+          > div {
+            opacity: 0.5;
+
+            > div {
+              background: var(--theme-gray-default);
+            }
+          }
+        }
+      }
+    `,
+  ],
+})
+export class SdSwitch {
+  value = model(false);
+
+  disabled = input(false, { transform: booleanAttribute });
+  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"
+  >();
+
+  onClick(event: Event) {
+    if (this.disabled()) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.value.update((v) => !v);
+  }
+
+  onKeydown(event: KeyboardEvent) {
+    if (event.key === " ") {
+      event.preventDefault();
+      if (this.disabled()) return;
+      this.value.update((v) => !v);
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+import {
+  afterNextRender,
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  input,
+  signal,
+  viewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+import type { SdResizeEvent } from "../../core/events/sd-resize-event.plugin";
+
+@Component({
+  selector: "sd-collapse",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  template: `
+    <div
+      #contentEl
+      class="_content"
+      [style.margin-top]="contentMarginTop()"
+      [style.transition]="contentTransition()"
+      (sdResize)="onContentResize($any($event))"
+    >
+      <ng-content />
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      sd-collapse {
+        display: block;
+        overflow: hidden;
+      }
+    `,
+  ],
+})
+export class SdCollapse {
+  open = input(false, { transform: booleanAttribute });
+
+  private readonly _contentElRef =
+    viewChild.required<ElementRef<HTMLElement>>("contentEl");
+
+  contentHeight = signal(0);
+
+  contentMarginTop = computed(() => {
+    return this.open() ? "" : `-${this.contentHeight()}px`;
+  });
+
+  contentTransition = computed(() => {
+    return this.open() ? "margin-top 0.1s ease-out" : "margin-top 0.1s ease-in";
+  });
+
+  constructor() {
+    afterNextRender(() => {
+      this.contentHeight.set(this._contentElRef().nativeElement.offsetHeight);
+    });
+
+    effect(() => {
+      // Re-measure height on open transition to handle stale values from closed state
+      this.open();
+      this.contentHeight.set(this._contentElRef().nativeElement.offsetHeight);
+    });
+  }
+
+  onContentResize(event: SdResizeEvent): void {
+    if (event.heightChanged) {
+      this.contentHeight.set(this._contentElRef().nativeElement.offsetHeight);
+    }
+  }
+}

package/src/controls/dropdown/sd-dropdown-popup.ts

@@ -0,0 +1,95 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  inject,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdDropdown } from "./sd-dropdown";
+
+@Component({
+  selector: "sd-dropdown-popup",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [],
+  host: {
+    "(keydown)": "onKeydown($event)",
+  },
+  template: `
+    <div>
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../scss/commons/mixins";
+      @use "../../../scss/commons/variables";
+
+      sd-dropdown-popup {
+        position: fixed;
+        z-index: var(--z-index-dropdown);
+        opacity: 0;
+        transform: translateY(-0.625rem);
+        transition: 0.1s linear;
+        transition-property: transform, opacity;
+        pointer-events: none;
+        background: var(--control-color);
+        min-width: 7.5rem;
+        @include mixins.elevation(4);
+        overflow: hidden;
+        border-radius: var(--border-radius-default);
+        border: 1px solid var(--border-color-light);
+
+        > div {
+          width: 100%;
+          height: 100%;
+          overflow: auto;
+          white-space: nowrap;
+        }
+
+        &:focus {
+          outline: 1px solid var(--theme-primary-default);
+        }
+
+        @media all and (max-width: variables.$breakpoint-mobile) {
+          @include mixins.elevation(0);
+          border: 1px solid var(--border-color-default);
+        }
+
+        &[data-sd-mobile] {
+          position: fixed;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          top: auto;
+          max-height: 80vh;
+          border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
+          opacity: 1;
+          pointer-events: auto;
+          transform: none;
+          animation: sd-dropdown-slide-up 0.2s ease-out;
+          @include mixins.elevation(8);
+        }
+      }
+
+      @keyframes sd-dropdown-slide-up {
+        from {
+          transform: translateY(100%);
+        }
+        to {
+          transform: translateY(0);
+        }
+      }
+    `,
+  ],
+})
+export class SdDropdownPopup {
+  private readonly _parentControl = inject<SdDropdown>(
+    forwardRef(() => SdDropdown),
+  );
+
+  onKeydown(event: KeyboardEvent): void {
+    this._parentControl.onPopupKeydown(event);
+  }
+}