@ship-ui/core 0.13.2 → 0.13.4

package/index.d.ts

@@ -463,6 +463,7 @@ declare class ShipSelectComponent {
     selectedOptionValues: _angular_core.Signal<unknown[]>;
     filteredOptions: _angular_core.Signal<unknown[]>;
     inputRefEl: _angular_core.Signal<HTMLInputElement | null | undefined>;
+    focusEffect: _angular_core.EffectRef;
     openAbortController: AbortController | null;
     isOpenEffect: _angular_core.EffectRef;
     _inputValue: string;
@@ -474,8 +475,9 @@ declare class ShipSelectComponent {
     ngOnInit(): void;
     setInitInput(): void;
     setSelectedOptionsFromValue(value: string): void;
-    setInputValueFromSelectedOptions(): void;
+    setInputValueFromOptions(options: unknown[]): void;
     getLabel(option: unknown): unknown;
+    getLabelAsSlug(option: unknown): string;
     toggleOptionByIndex(optionIndex: number, event?: MouseEvent): void;
     removeSelectedOptionByIndex($event: MouseEvent, optionRemoveIndex: number): void;
     isSelected(optionIndex: number): boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ship-ui/core",
   "license": "MIT",
-  "version": "0.13.2",
+  "version": "0.13.4",
   "peerDependencies": {
     "@angular/common": ">=19",
     "@angular/core": ">=19"

package/styles/components/sparkle-checkbox.component.scss

@@ -1,245 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipCheckbox: true !default;
-
-@if $shipCheckbox == true {
-  sh-checkbox {
-    --box-bw: #{p2r(1)};
-    --box-bc: var(--base-4);
-    --box-c: var(--base-8);
-    --box-bg: var(--base-2);
-
-    display: flex;
-    align-items: center;
-    gap: p2r(8);
-    cursor: pointer;
-    user-select: none;
-    position: relative;
-
-    > input[type='checkbox'] {
-      appearance: none;
-      position: absolute;
-      inset: 0;
-      cursor: pointer;
-
-      &:focus {
-        outline: none;
-      }
-    }
-
-    &:has(input[disabled]),
-    &[disabled]:not([disabled='false']) {
-      opacity: 0.5;
-      pointer-events: none;
-      user-select: none;
-      cursor: initial;
-    }
-
-    .box {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: p2r(20);
-      height: p2r(20);
-      cursor: pointer;
-      position: relative;
-      border-radius: var(--shape-1);
-      border: var(--box-bw) solid var(--box-bc);
-      background: var(--box-bg);
-      font-size: p2r(12);
-      color: var(--box-c);
-
-      sh-icon {
-        opacity: 0;
-        font-weight: bold;
-        transition: opacity 75ms linear;
-
-        &.indeterminate-indicator {
-          display: none;
-        }
-      }
-    }
-
-    &.indeterminate {
-      .box sh-icon {
-        &.indeterminate-indicator {
-          display: block;
-        }
-
-        &.default-indicator {
-          display: none;
-        }
-      }
-    }
-
-    &:has(input[type='checkbox']:checked),
-    &.indeterminate,
-    &.active {
-      .box sh-icon {
-        opacity: 1;
-      }
-    }
-
-    &:hover {
-      .box sh-icon {
-        opacity: 0.5;
-      }
-    }
-
-    &.primary {
-      --box-c: var(--primary-8);
-    }
-
-    &.accent {
-      --box-c: var(--accent-8);
-    }
-
-    &.warn {
-      --box-c: var(--warn-8);
-    }
-
-    &.error {
-      --box-c: var(--error-8);
-    }
-
-    &.success {
-      --box-c: var(--success-8);
-    }
-
-    &.simple,
-    &.outlined {
-      --box-bg: var(--base-3);
-      --box-bc: var(--base-6);
-
-      &.primary {
-        --box-bg: var(--primary-3);
-        --box-bc: var(--primary-6);
-      }
-
-      &.accent {
-        --box-bg: var(--accent-3);
-        --box-bc: var(--accent-6);
-      }
-
-      &.warn {
-        --box-bg: var(--warn-3);
-        --box-bc: var(--warn-6);
-      }
-
-      &.error {
-        --box-bg: var(--error-3);
-        --box-bc: var(--error-6);
-      }
-
-      &.success {
-        --box-bg: var(--success-3);
-        --box-bc: var(--success-6);
-      }
-    }
-
-    &.simple {
-      --box-bc: var(--box-bg);
-
-      &.primary,
-      &.accent,
-      &.warn,
-      &.error,
-      &.success {
-        --box-bc: var(--box-bg);
-      }
-    }
-
-    &.flat,
-    &.raised {
-      &.primary,
-      &.accent,
-      &.warn,
-      &.error,
-      &.success {
-        --box-bc: var(--base-4);
-        --box-c: var(--base-8);
-        --box-bg: var(--base-2);
-      }
-    }
-
-    &.flat:has(input[type='checkbox']:checked),
-    &.flat.indeterminate,
-    &.flat.active {
-      @extend %flat;
-    }
-
-    &.raised:has(input[type='checkbox']:checked),
-    &.raised.indeterminate,
-    &.raised.active {
-      @extend %raised;
-    }
-  }
-
-  .ship-popup-menu sh-option[selected] {
-    sh-checkbox {
-      sh-icon {
-        opacity: 1;
-      }
-
-      &.flat {
-        @extend %flat;
-      }
-
-      &.raised {
-        @extend %raised;
-      }
-    }
-  }
-
-  %flat {
-    --box-bw: 0;
-    --box-bg: var(--base-8);
-    --box-c: #fff;
-
-    &.primary {
-      --box-bg: var(--primary-8);
-    }
-
-    &.accent {
-      --box-bg: var(--accent-8);
-    }
-
-    &.warn {
-      --box-bg: var(--warn-8);
-    }
-
-    &.error {
-      --box-bg: var(--error-8);
-    }
-
-    &.success {
-      --box-bg: var(--success-8);
-    }
-  }
-
-  %raised {
-    --box-bw: 0;
-    --box-bg: var(--base-g2);
-    --box-c: #fff;
-
-    &.primary {
-      --box-bg: var(--primary-g2);
-    }
-
-    &.accent {
-      --box-bg: var(--accent-g2);
-    }
-
-    &.warn {
-      --box-bg: var(--warn-g2);
-    }
-
-    &.error {
-      --box-bg: var(--error-g2);
-    }
-
-    &.success {
-      --box-bg: var(--success-g2);
-    }
-  }
-}

package/styles/components/sparkle-select.component.scss

@@ -1,139 +0,0 @@
-@use '../helpers.scss' as *;
-
-$shipSelect: false !default;
-
-@if $shipSelect == true {
-  sh-select {
-    --miw: #{p2r(210)};
-
-    display: flex;
-
-    sh-form-field {
-      display: flex;
-      --ff-mw: var(--miw);
-    }
-
-    sh-popover {
-      flex: 1 0;
-
-      &:has(.ship-options:empty) .popover {
-        opacity: 0;
-      }
-    }
-
-    .selected-value {
-      width: 100%;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: p2r(4);
-      color: var(--base-8);
-
-      input {
-        margin: 0;
-      }
-
-      &.is-selected {
-        color: var(--base-12);
-      }
-    }
-
-    sh-form-field .input-wrap .input {
-      position: relative;
-      display: flex;
-      flex-wrap: wrap;
-
-      --ff-space: #{p2r(7 10)};
-
-      textarea,
-      input {
-        opacity: 0;
-        width: 0;
-        height: 0;
-        position: absolute;
-      }
-
-      &.show-search-text {
-        input {
-          opacity: 1;
-          height: initial;
-          min-width: min-content;
-          field-sizing: content;
-          font: var(--paragraph-30);
-          position: relative;
-        }
-
-        textarea {
-          opacity: 1;
-          height: initial;
-          margin: p2r(4 0 0);
-        }
-      }
-    }
-
-    sh-form-field.small .input-wrap .input {
-      --ff-space: #{p2r(5 8)};
-
-      sh-chip {
-        --chip-h: #{p2r(20)};
-        font-size: 80%;
-      }
-    }
-  }
-
-  .ship-options {
-    padding: p2r(8 0);
-    display: flex;
-    flex-direction: column;
-    max-height: p2r(180);
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    .option {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      min-height: p2r(32);
-      margin: p2r(0 8);
-      padding: p2r(0 8);
-      gap: p2r(8);
-      width: calc(100% - #{p2r(16)});
-      border-radius: var(--shape-2);
-      appearance: none;
-      background-color: transparent;
-      border: 0;
-      cursor: pointer;
-      color: var(--base-12);
-      user-select: none;
-
-      &[disabled] {
-        opacity: 0.3;
-        cursor: initial;
-
-        &:hover {
-          background-color: transparent;
-        }
-      }
-
-      sh-icon {
-        font-size: p2r(16);
-      }
-
-      &.active,
-      &:checked,
-      &:hover {
-        background-color: var(--base-2);
-        color: var(--base-12);
-      }
-
-      &.focused {
-        background-color: var(--primary-1);
-        color: var(--base-12);
-
-        &:hover {
-          background-color: var(--primary-2);
-        }
-      }
-    }
-  }
-}