@ship-ui/core 0.15.26 → 0.15.29

package/index.d.ts

@@ -223,6 +223,7 @@ declare class ShipBlueprintComponent implements AfterViewInit, OnDestroy {
 }
 
 declare class ShipButtonGroupComponent {
+    id: string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipButtonGroupComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipButtonGroupComponent, "sh-button-group", never, {}, {}, never, ["*"], true, never>;
 }
@@ -757,6 +758,7 @@ declare class ShipTableComponent {
 }
 
 declare class ShipTabsComponent {
+    id: string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipTabsComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipTabsComponent, "sh-tabs", never, {}, {}, never, ["*"], true, never>;
 }
@@ -829,6 +831,15 @@ declare class ShipFileDragDropDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShipFileDragDropDirective, "[shDragDrop]", never, {}, { "filesDropped": "filesDropped"; }, never, never, true, never>;
 }
 
+type MaskingFunction = (cleanValue: string) => string | null;
+declare class ShipInputMaskDirective {
+    #private;
+    shInputMask: _angular_core.InputSignal<string | MaskingFunction>;
+    onInput(event: InputEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipInputMaskDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ShipInputMaskDirective, "[shInputMask]", never, { "shInputMask": { "alias": "shInputMask"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 declare class ShipPreventWheelDirective {
     wheel(event: WheelEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipPreventWheelDirective, never>;
@@ -876,5 +887,5 @@ interface ShipConfig {
     sidenavType?: 'overlay' | 'simple';
 }
 
-export { GridSortableDirective, SHIP_CONFIG, ShipAlertComponent, ShipAlertContainerComponent, ShipAlertModule, ShipAlertService, ShipBlueprintComponent, ShipButtonComponent, ShipButtonGroupComponent, ShipCardComponent, ShipCheckboxComponent, ShipChipComponent, ShipColorPickerComponent, ShipDatepickerComponent, ShipDatepickerInputComponent, ShipDaterangeInputComponent, ShipDialogComponent, ShipDialogService, ShipDividerComponent, ShipEventCardComponent, ShipFileDragDropDirective, ShipFileUploadComponent, ShipFormFieldComponent, ShipIconComponent, ShipListComponent, ShipMenuComponent, ShipPopoverComponent, ShipPreventWheelDirective, ShipProgressBarComponent, ShipRadioComponent, ShipRangeSliderComponent, ShipResizeDirective, ShipSelectComponent, ShipSidenavComponent, ShipSortDirective, ShipSortableComponent, ShipSortableDirective, ShipSpinnerComponent, ShipStepperComponent, ShipStickyColumnsDirective, ShipTableComponent, ShipTabsComponent, ShipToggleCardComponent, ShipToggleComponent, ShipTooltipComponent, ShipTooltipDirective, ShipTooltipWrapper, ShipVirtualScrollComponent, TEST_NODES, moveIndex, watchHostClass };
+export { GridSortableDirective, SHIP_CONFIG, ShipAlertComponent, ShipAlertContainerComponent, ShipAlertModule, ShipAlertService, ShipBlueprintComponent, ShipButtonComponent, ShipButtonGroupComponent, ShipCardComponent, ShipCheckboxComponent, ShipChipComponent, ShipColorPickerComponent, ShipDatepickerComponent, ShipDatepickerInputComponent, ShipDaterangeInputComponent, ShipDialogComponent, ShipDialogService, ShipDividerComponent, ShipEventCardComponent, ShipFileDragDropDirective, ShipFileUploadComponent, ShipFormFieldComponent, ShipIconComponent, ShipInputMaskDirective, ShipListComponent, ShipMenuComponent, ShipPopoverComponent, ShipPreventWheelDirective, ShipProgressBarComponent, ShipRadioComponent, ShipRangeSliderComponent, ShipResizeDirective, ShipSelectComponent, ShipSidenavComponent, ShipSortDirective, ShipSortableComponent, ShipSortableDirective, ShipSpinnerComponent, ShipStepperComponent, ShipStickyColumnsDirective, ShipTableComponent, ShipTabsComponent, ShipToggleCardComponent, ShipToggleComponent, ShipTooltipComponent, ShipTooltipDirective, ShipTooltipWrapper, ShipVirtualScrollComponent, TEST_NODES, moveIndex, watchHostClass };
 export type { AfterDropResponse, BlueprintNode, Coordinates, ShipAlertItem, ShipAlertItemInternal, ShipAlertType, ShipDialogOptions, ShipDialogReturn, ShipDialogServiceOptions, ShipPopoverOptions, ShipProgressBarMode, ShipSidenavType };

package/package.json

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

package/styles/components/ship-button-group.component.scss

@@ -4,6 +4,7 @@ $shipButtonGroup: true !default;
 @if $shipButtonGroup == true {
   sh-button-group {
     --btng-bg: var(--base-1);
+    --btng-item-bg: var(--base-3);
     --btng-c: var(--base-12);
     --btng-ic: var(--base-12);
     --btng-bc: var(--base-4);
@@ -16,6 +17,7 @@ $shipButtonGroup: true !default;
     border: 1px solid var(--btng-bc);
     border-radius: var(--btng-s);
     height: var(--btng-h);
+    background: var(--btng-bg);
     overflow: hidden;
 
     &.small {
@@ -25,8 +27,9 @@ $shipButtonGroup: true !default;
 
     &.type-b {
       --btng-bg: var(--base-3);
+      --btng-item-bg: var(--base-1);
+      --btng-s-a: var(--shape-2);
 
-      background: var(--base-3);
       padding: p2r(3);
       gap: p2r(4);
       border: 0;
@@ -35,16 +38,22 @@ $shipButtonGroup: true !default;
         border-radius: p2r(6);
         border: 0;
 
+        @supports not (anchor-name: --anchor) {
+          --btng-item-bg: var(--base-3);
+        }
+
         &:hover {
           --btng-bg: var(--base-2);
-
-          box-shadow: var(--box-shadow-10);
         }
 
+        &:hover,
         &.active {
           --btng-bg: var(--base-1);
-
           box-shadow: var(--box-shadow-10);
+
+          @supports not (anchor-name: --anchor) {
+            --btng-item-bg: var(--base-1);
+          }
         }
       }
     }
@@ -68,7 +77,7 @@ $shipButtonGroup: true !default;
       overflow: visible;
       vertical-align: middle;
       white-space: nowrap;
-      background: var(--btng-bg);
+      background: transparent;
       color: var(--btng-c);
       font: var(--btng-f);
       border-left: 1px solid var(--btng-bc);
@@ -85,11 +94,54 @@ $shipButtonGroup: true !default;
         border-left: 0;
       }
 
-      &:hover,
-      &.active {
-        --btng-c: var(--base-12);
-        --btng-ic: var(--base-12);
-        --btng-bg: var(--base-3);
+      @supports not (anchor-name: --anchor) {
+        --btng-item-bg: var(--base-1);
+        background: var(--btng-item-bg);
+
+        &:hover,
+        &.active {
+          --btng-c: var(--base-12);
+          --btng-ic: var(--base-12);
+          --btng-bg: var(--base-3);
+          --btng-item-bg: var(--base-3);
+        }
+      }
+
+      @supports (anchor-name: --anchor) {
+        z-index: 1;
+        &.active {
+          position: relative;
+          anchor-name: var(--btng-id);
+        }
+      }
+    }
+
+    @supports (anchor-name: --anchor) {
+      &:after {
+        content: '';
+        background: var(--btng-item-bg);
+        pointer-events: none;
+        position: absolute;
+        z-index: 0;
+        top: anchor(top);
+        bottom: anchor(bottom);
+        left: anchor(left);
+        right: anchor(right);
+        position-anchor: var(--btng-id);
+        transition: all 0.175s ease-out;
+        border-radius: var(--btng-s-a);
+      }
+
+      &:not(.type-b):has(button:first-child.active) {
+        &:after {
+          --btng-s-a: #{p2r(4 0 0 4)};
+        }
+      }
+
+      &:not(.type-b):has(button:last-child.active) {
+        &:after {
+          --btng-s-a: #{p2r(0 4 4 0)};
+        }
       }
     }
   }

package/styles/components/ship-tabs.component.scss

@@ -15,6 +15,7 @@ $shipTabs: true !default;
     display: flex;
     gap: p2r(16);
     border-bottom: 1px solid var(--base-4);
+    position: relative;
 
     button,
     [tab] {
@@ -49,8 +50,15 @@ $shipTabs: true !default;
       &.active {
         color: var(--tabs-c-active);
 
-        &::after {
-          display: block;
+        @supports (anchor-name: --anchor) {
+          position: relative;
+          anchor-name: var(--tabs-id);
+        }
+
+        @supports not (anchor-name: --anchor) {
+          &::after {
+            display: block;
+          }
         }
       }
 
@@ -58,11 +66,31 @@ $shipTabs: true !default;
         content: '';
         display: none;
         width: 100%;
-        height: 2px;
+        height: p2r(2);
         background: var(--tabs-sel-bg);
         position: absolute;
         left: 0;
         bottom: 0;
+
+        @supports (anchor-name: --anchor) {
+          display: none;
+        }
+      }
+    }
+
+    @supports (anchor-name: --anchor) {
+      &:after {
+        content: '';
+        background: var(--tabs-sel-bg);
+        pointer-events: none;
+        position: absolute;
+        z-index: 10;
+        height: p2r(2);
+        bottom: anchor(bottom);
+        left: anchor(left);
+        right: anchor(right);
+        position-anchor: var(--tabs-id);
+        transition: all 0.175s ease-out;
       }
     }
 

package/styles/core/helpers/mixins/scroll-shadows.scss

@@ -0,0 +1,44 @@
+@use 'sass:list' as list;
+@use 'sass:map' as map;
+
+@mixin scroll-shadows($options) {
+  $background: map.get($options, 'background');
+  $colorFrom: map.get($options, 'colorFrom');
+  $colorTo: map.get($options, 'colorTo');
+  $size: map.get($options, 'size');
+  $fadeInSize: map.get($options, 'fadeInSize');
+
+  @if $background == null {
+    $background: var(--base1);
+  }
+
+  @if $colorFrom == null {
+    $colorFrom: rgb(from var(--base-12) r g b / 10%);
+  }
+
+  @if $colorTo == null {
+    $colorTo: rgb(from var(--base-12) r g b / 0%);
+  }
+
+  @if $size == null {
+    $size: p2r(14);
+  }
+
+  @if $fadeInSize == null {
+    $fadeInSize: p2r(40);
+  }
+
+  background:
+    linear-gradient($background 30%, rgba(255, 255, 255, 0)) center top,
+    linear-gradient(rgba(255, 255, 255, 0), $background 70%) center bottom,
+    radial-gradient(farthest-side at 50% 0, $colorFrom, $colorTo) center top,
+    radial-gradient(farthest-side at 50% 100%, $colorFrom, $colorTo) center bottom;
+
+  background-repeat: no-repeat;
+  background-size:
+    100% $fadeInSize,
+    100% $fadeInSize,
+    100% $size,
+    100% $size;
+  background-attachment: local, local, scroll, scroll;
+}

package/styles/helpers.scss

@@ -10,4 +10,5 @@
 @forward './core/helpers/mixins/wrapper';
 @forward './core/helpers/mixins/ellipsis';
 @forward './core/helpers/mixins/overflow-scrolling';
+@forward './core/helpers/mixins/scroll-shadows';
 // @forward './core/helpers/mixins/border-gradient';