@origostudio/origo-design 0.0.49 → 0.0.50

package/packages/angular-renderer/src/components/primitives/multi-select/multi-select.component.html

@@ -0,0 +1,150 @@
+<div class="origo-multi-select__wrapper">
+  <div class="origo-multi-select__control">
+    <button
+      type="button"
+      class="origo-multi-select__trigger"
+      [id]="contract().id + '-trigger'"
+      role="combobox"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-haspopup]="'listbox'"
+      [attr.aria-controls]="isOpen() ? contract().id + '-listbox' : null"
+      [attr.aria-activedescendant]="
+        isOpen() && activeIndex() >= 0 ? contract().id + '-option-' + activeIndex() : null
+      "
+      [attr.aria-invalid]="computedInvalid() ? 'true' : null"
+      [attr.aria-required]="computedRequired() ? 'true' : null"
+      [attr.aria-label]="computedAriaLabel()"
+      [attr.aria-describedby]="computedAriaDescribedBy()"
+      [disabled]="computedDisabled()"
+      (click)="toggleOpen()"
+      (keydown)="onKeydown($event)"
+    >
+      <div class="origo-multi-select__display">
+        @if (computedDisplay() === 'chip' && computedSelectedOptions().length > 0) {
+          <div class="origo-multi-select__chips">
+            @for (opt of computedSelectedOptions(); track opt.value) {
+              <span class="origo-multi-select__chip">
+                <span class="origo-multi-select__chip-label">{{ opt.label }}</span>
+                <span
+                  class="origo-multi-select__chip-remove"
+                  role="button"
+                  tabindex="0"
+                  aria-label="Remove item"
+                  (click)="removeOption(opt.value, $event)"
+                  (keydown.enter)="removeOption(opt.value, $event)"
+                  >✕</span
+                >
+              </span>
+            }
+          </div>
+        } @else {
+          <span
+            class="origo-multi-select__label"
+            [class.origo-multi-select__label--placeholder]="!displaySummary()"
+          >
+            {{ displaySummary() || computedPlaceholder() }}
+          </span>
+        }
+      </div>
+
+      <span class="origo-multi-select__icons">
+        @if (
+          computedClearable() && value().length > 0 && !computedDisabled() && !computedReadonly()
+        ) {
+          <span
+            class="origo-multi-select__clear"
+            role="button"
+            tabindex="0"
+            aria-label="Clear selection"
+            (click)="clear($event)"
+            (keydown.enter)="clear($event)"
+            >✕</span
+          >
+        }
+        <span class="origo-multi-select__arrow" aria-hidden="true">▼</span>
+      </span>
+    </button>
+  </div>
+
+  @if (isOpen()) {
+    <div
+      class="origo-multi-select__dropdown"
+      [id]="contract().id + '-listbox'"
+      role="listbox"
+      aria-multiselectable="true"
+      [attr.aria-label]="computedAriaLabel()"
+    >
+      @if (computedFilter()) {
+        <div class="origo-select__filter-container">
+          <input
+            type="text"
+            class="origo-multi-select__filter-input"
+            [placeholder]="computedFilterPlaceholder()"
+            [value]="filterQuery()"
+            (input)="onFilterInput($event)"
+            (keydown)="onKeydown($event)"
+            aria-label="Filter options"
+          />
+        </div>
+      }
+
+      @if (computedShowToggleAll()) {
+        <div
+          class="origo-multi-select__toggle-all"
+          role="button"
+          tabindex="0"
+          (click)="toggleAll()"
+          (keydown.enter)="toggleAll()"
+        >
+          <input
+            type="checkbox"
+            class="origo-multi-select__checkbox"
+            [checked]="isAllSelected()"
+            tabindex="-1"
+            aria-hidden="true"
+          />
+          <span>Toggle All</span>
+        </div>
+      }
+
+      <ul class="origo-multi-select__options">
+        @for (opt of filteredOptions(); track opt.value; let idx = $index) {
+          <li
+            class="origo-multi-select__option"
+            [class.origo-multi-select__option--selected]="isSelected(opt)"
+            [class.origo-multi-select__option--active]="activeIndex() === idx"
+            [class.origo-multi-select__option--disabled]="opt.disabled"
+            [id]="contract().id + '-option-' + idx"
+            role="option"
+            [attr.aria-selected]="isSelected(opt)"
+            [attr.aria-disabled]="opt.disabled ? 'true' : null"
+            (click)="!opt.disabled && toggleOption(opt.value)"
+          >
+            <input
+              type="checkbox"
+              class="origo-multi-select__checkbox"
+              [checked]="isSelected(opt)"
+              [disabled]="opt.disabled"
+              tabindex="-1"
+              aria-hidden="true"
+            />
+            <span>{{ opt.label }}</span>
+          </li>
+        } @empty {
+          <li class="origo-multi-select__no-options" role="presentation">No options found</li>
+        }
+      </ul>
+    </div>
+  }
+</div>
+
+@if (computedErrorText()) {
+  <div class="origo-multi-select__error" [id]="contract().id + '-error'">
+    {{ computedErrorText() }}
+  </div>
+}
+@if (computedHelpText()) {
+  <div class="origo-multi-select__help" [id]="contract().id + '-help'">
+    {{ computedHelpText() }}
+  </div>
+}

package/packages/angular-renderer/src/components/primitives/multi-select/multi-select.component.scss

@@ -0,0 +1,240 @@
+:host {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  font-family: var(--origo-typography-input-font-family);
+  font-size: var(--origo-typography-input-font-size);
+  font-weight: var(--origo-typography-input-font-weight);
+  line-height: var(--origo-typography-input-line-height);
+}
+
+:host(.origo-multi-select--fluid) {
+  display: block;
+  width: 100%;
+}
+
+.origo-multi-select__wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+}
+
+.origo-multi-select__control {
+  display: flex;
+  width: 100%;
+}
+
+.origo-multi-select__trigger {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--origo-color-surface-background);
+  color: var(--origo-color-text-primary);
+  padding: var(--origo-spacing-container-padding);
+  border: var(--origo-border-width-default) solid var(--origo-color-border-default);
+  border-radius: var(--origo-radius-sm);
+  box-shadow: var(--origo-shadow-sm);
+  font-family: inherit;
+  font-size: inherit;
+  text-align: start;
+  cursor: pointer;
+  transition: all var(--origo-duration-fast) ease-in-out;
+
+  &:hover:not(:disabled) {
+    border-color: var(--origo-color-border-hover);
+  }
+
+  &:active:not(:disabled) {
+    border-color: var(--origo-color-border-active);
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: var(--origo-border-width-thick) solid var(--origo-color-focus);
+    outline-offset: var(--origo-border-offset-negative);
+    border-color: var(--origo-color-focus);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--origo-opacity-disabled);
+    background-color: var(--origo-color-surface-disabled);
+    color: var(--origo-color-text-disabled);
+  }
+}
+
+:host(.origo-multi-select--filled) .origo-multi-select__trigger {
+  background-color: var(--origo-color-surface-subtle);
+  border: none;
+}
+
+:host(.origo-multi-select--invalid) .origo-multi-select__trigger {
+  border-color: var(--origo-color-text-danger);
+}
+
+.origo-multi-select__display {
+  flex: 1;
+  overflow: hidden;
+}
+
+.origo-multi-select__label {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &--placeholder {
+    color: var(--origo-color-text-muted);
+  }
+}
+
+.origo-multi-select__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--origo-spacing-xs);
+}
+
+.origo-multi-select__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--origo-spacing-xs);
+  padding: var(--origo-spacing-xs) var(--origo-spacing-sm);
+  background-color: var(--origo-color-surface-subtle);
+  color: var(--origo-color-text-primary);
+  border-radius: var(--origo-radius-sm);
+  font-size: var(--origo-typography-caption-font-size);
+}
+
+.origo-multi-select__chip-remove {
+  cursor: pointer;
+  color: var(--origo-color-text-muted);
+
+  &:hover {
+    color: var(--origo-color-text-primary);
+  }
+}
+
+.origo-multi-select__icons {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--origo-spacing-xs);
+  margin-inline-start: var(--origo-spacing-sm);
+}
+
+.origo-multi-select__clear {
+  cursor: pointer;
+  color: var(--origo-color-text-muted);
+  font-size: var(--origo-typography-caption-font-size);
+
+  &:hover {
+    color: var(--origo-color-text-primary);
+  }
+}
+
+.origo-multi-select__arrow {
+  color: var(--origo-color-text-muted);
+  font-size: var(--origo-typography-caption-font-size);
+}
+
+.origo-multi-select__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  margin-top: var(--origo-spacing-xs);
+  box-sizing: border-box;
+  background-color: var(--origo-color-surface-background);
+  border: var(--origo-border-width-default) solid var(--origo-color-border-default);
+  border-radius: var(--origo-radius-sm);
+  box-shadow: var(--origo-shadow-md);
+  max-height: 16rem;
+  overflow-y: auto;
+}
+
+.origo-multi-select__filter-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--origo-spacing-xs);
+  background-color: var(--origo-color-surface-background);
+  color: var(--origo-color-text-primary);
+  border: var(--origo-border-width-default) solid var(--origo-color-border-default);
+  border-radius: var(--origo-radius-sm);
+  font-family: inherit;
+  font-size: inherit;
+
+  &:focus {
+    outline: var(--origo-border-width-thick) solid var(--origo-color-focus);
+    outline-offset: var(--origo-border-offset-negative);
+  }
+}
+
+.origo-multi-select__toggle-all {
+  display: flex;
+  align-items: center;
+  gap: var(--origo-spacing-xs);
+  padding: var(--origo-spacing-xs) var(--origo-spacing-container-padding);
+  border-bottom: var(--origo-border-width-default) solid var(--origo-color-border-default);
+  font-weight: bold;
+  font-size: var(--origo-typography-caption-font-size);
+  color: var(--origo-color-text-primary);
+  cursor: pointer;
+  background-color: var(--origo-color-surface-subtle);
+}
+
+.origo-multi-select__options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.origo-multi-select__option {
+  display: flex;
+  align-items: center;
+  gap: var(--origo-spacing-xs);
+  padding: var(--origo-spacing-container-padding);
+  color: var(--origo-color-text-primary);
+  cursor: pointer;
+  transition: background-color var(--origo-duration-fast) ease-in-out;
+
+  &:hover,
+  &--active {
+    background-color: var(--origo-color-surface-subtle);
+  }
+
+  &--selected {
+    background-color: var(--origo-color-surface-subtle);
+  }
+
+  &--disabled {
+    opacity: var(--origo-opacity-disabled);
+    cursor: not-allowed;
+  }
+}
+
+.origo-multi-select__checkbox {
+  margin: 0;
+  accent-color: var(--origo-color-focus);
+}
+
+.origo-multi-select__no-options {
+  padding: var(--origo-spacing-container-padding);
+  color: var(--origo-color-text-muted);
+  text-align: center;
+}
+
+.origo-multi-select__error {
+  color: var(--origo-color-text-danger);
+  font-size: var(--origo-typography-caption-font-size);
+  margin-top: var(--origo-spacing-xs);
+}
+
+.origo-multi-select__help {
+  color: var(--origo-color-text-muted);
+  font-size: var(--origo-typography-caption-font-size);
+  margin-top: var(--origo-spacing-xs);
+}