@ship-ui/core 0.13.28 → 0.13.30

package/index.d.ts

@@ -207,18 +207,15 @@ declare class ShipColorPickerComponent {
 
 declare class ShipDatepickerInputComponent {
     #private;
-    inputWrapRef: _angular_core.Signal<ElementRef<HTMLDivElement>>;
     masking: _angular_core.InputSignal<string>;
     closed: _angular_core.OutputEmitterRef<Date | null>;
     _maskedDate: _angular_core.Signal<string | Date | null>;
     internalDate: _angular_core.WritableSignal<Date | null>;
     isOpen: _angular_core.ModelSignal<boolean>;
-    styleClasses: _angular_core.WritableSignal<null>;
+    currentClass: _angular_core.Signal<string>;
     onDateChange(date: Date | null): void;
     open($event: MouseEvent): void;
     close(): void;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipDatepickerInputComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipDatepickerInputComponent, "sh-datepicker-input", never, { "masking": { "alias": "masking"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "isOpen": "isOpenChange"; }, never, ["label", "[prefix]", "[textPrefix]", "input", "[textSuffix]", "[suffix]"], true, never>;
 }
@@ -240,6 +237,8 @@ declare class ShipDatepickerComponent {
         opacity: string;
     } | null>;
     weekdays: _angular_core.Signal<string[]>;
+    currentClasses: _angular_core.Signal<string>;
+    someEffect: _angular_core.EffectRef;
     getLastVisibleMonth(): Date;
     getOffsetDate(monthOffset: number): Date;
     getMonthDates(monthOffset: number): Date[];
@@ -289,6 +288,11 @@ declare class ShipDividerComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipDividerComponent, "sh-divider", never, {}, {}, never, ["*"], true, never>;
 }
 
+declare class ShipEventCardComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipEventCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipEventCardComponent, "sh-event-card", never, {}, {}, never, ["*", "[actions]", "button"], true, never>;
+}
+
 declare class ShipFileUploadComponent {
     _el: ElementRef<any>;
     inputRef: _angular_core.Signal<ElementRef<HTMLInputElement>>;
@@ -765,5 +769,5 @@ interface ShipConfig {
     sidenavType?: 'overlay' | 'simple';
 }
 
-export { GridSortableDirective, SHIP_CONFIG, ShipAlertComponent, ShipAlertContainerComponent, ShipAlertModule, ShipAlertService, ShipButtonComponent, ShipButtonGroupComponent, ShipCardComponent, ShipCheckboxComponent, ShipChipComponent, ShipColorPickerComponent, ShipDatepickerComponent, ShipDatepickerInputComponent, ShipDaterangeInputComponent, ShipDialogComponent, ShipDialogService, ShipDividerComponent, ShipFileDragDropDirective, ShipFileUploadComponent, ShipFormFieldComponent, ShipIconComponent, ShipListComponent, ShipMenuComponent, ShipPopoverComponent, ShipPreventWheelDirective, ShipProgressBarComponent, ShipRadioComponent, ShipRangeSliderComponent, ShipResizeDirective, ShipSelectComponent, ShipSidenavComponent, ShipSortDirective, ShipSortableComponent, ShipSortableDirective, ShipSpinnerComponent, ShipStepperComponent, ShipStickyColumnsDirective, ShipStickyRowsDirective, ShipTableComponent, ShipTabsComponent, ShipToggleCardComponent, ShipToggleComponent, ShipTooltipComponent, ShipTooltipDirective, ShipTooltipWrapper, ShipVirtualScrollComponent, moveIndex, watchHostClass };
+export { GridSortableDirective, SHIP_CONFIG, ShipAlertComponent, ShipAlertContainerComponent, ShipAlertModule, ShipAlertService, 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, ShipStickyRowsDirective, ShipTableComponent, ShipTabsComponent, ShipToggleCardComponent, ShipToggleComponent, ShipTooltipComponent, ShipTooltipDirective, ShipTooltipWrapper, ShipVirtualScrollComponent, moveIndex, watchHostClass };
 export type { AfterDropResponse, ShipAlertItem, ShipAlertItemInternal, ShipAlertType, ShipDialogOptions, ShipDialogReturn, ShipDialogServiceOptions, ShipPopoverOptions, ShipProgressBarMode, ShipSidenavType };

package/package.json

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

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

@@ -33,7 +33,6 @@ $shipButtonGroup: true !default;
       gap: p2r(8);
       position: relative;
       padding: var(--btng-p);
-      transition: color 80ms linear;
       min-width: auto;
       cursor: pointer;
       outline: none;
@@ -47,6 +46,14 @@ $shipButtonGroup: true !default;
       color: var(--btng-c);
       font: var(--btng-f);
       border-left: 1px solid var(--btng-bc);
+      transition:
+        color 80ms linear,
+        transform 125ms linear;
+      transform: scale(1);
+
+      &:active {
+        transform: scale(0.96);
+      }
 
       &:first-child {
         border-left: 0;

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

@@ -46,7 +46,14 @@ $shipButtonShadow: false !default;
 
     background: var(--btn-bg);
     color: var(--btn-c);
-    transition: background 75ms linear;
+    transition:
+      background 75ms linear,
+      transform 125ms linear;
+    transform: scale(1);
+
+    &:active {
+      transform: scale(0.98);
+    }
 
     sh-icon {
       color: var(--btn-ic);

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

@@ -60,15 +60,25 @@ $shipDatepicker: true !default;
     }
   }
 
+  sh-datepicker-input.sharp sh-datepicker,
+  sh-daterange-input.sharp sh-datepicker,
+  sh-datepicker.sharp {
+    --dp-sel-s: var(--shape-1);
+    --dp-ar: 1/0.8;
+    --dp-day-g: #{p2r(8 0)};
+  }
+
   sh-datepicker {
     --dp-sel-bg: var(--base-8);
     --dp-sel-bw: 0;
     --dp-sel-bc: transparent;
+    --dp-sel-s: 50%;
     --dp-sel-c: #fff;
     --dp-day-c: var(--base-8);
     --dp-day-g: #{p2r(4 0)};
     --dp-day-f: var(--paragraph-20);
     --dp-width: #{p2r(300)};
+    --dp-ar: 1/1;
 
     width: 100%;
     max-width: var(--dp-width);
@@ -101,14 +111,14 @@ $shipDatepicker: true !default;
           &.month-start,
           &.week-start,
           &.first {
-            border-top-left-radius: 50%;
-            border-bottom-left-radius: 50%;
+            border-top-left-radius: var(--dp-sel-s);
+            border-bottom-left-radius: var(--dp-sel-s);
           }
           &.month-end,
           &.week-end,
           &.last {
-            border-top-right-radius: 50%;
-            border-bottom-right-radius: 50%;
+            border-top-right-radius: var(--dp-sel-s);
+            border-bottom-right-radius: var(--dp-sel-s);
           }
 
           &.first,
@@ -158,7 +168,7 @@ $shipDatepicker: true !default;
     .month {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
-      grid-template-rows: 1fr 7fr;
+      grid-template-rows: 1fr 6fr;
       gap: var(--dp-day-g);
       align-items: flex-start;
 
@@ -187,7 +197,7 @@ $shipDatepicker: true !default;
           display: flex;
           align-items: center;
           justify-content: center;
-          aspect-ratio: 1/1;
+          aspect-ratio: var(--dp-ar);
           cursor: pointer;
           position: relative;
           z-index: 1;
@@ -212,7 +222,7 @@ $shipDatepicker: true !default;
               transform 75ms linear,
               opacity 75ms linear;
             background: var(--dp-sel-bg);
-            border-radius: 50%;
+            border-radius: var(--dp-sel-s);
             border: var(--dp-sel-bw) solid var(--dp-sel-bc);
             opacity: 0;
             box-sizing: border-box;

package/styles/components/ship-event-card.component.scss

@@ -0,0 +1,208 @@
+@use '../helpers.scss' as *;
+
+$shipEventCard: true !default;
+
+@if $shipEventCard == true {
+  sh-event-card {
+    --ec-c: var(--base-12);
+    --ec-bg: var(--base-1);
+    --ec-bc: var(--base-4);
+    --ec-s: var(--shape-2);
+
+    display: flex;
+    gap: p2r(8);
+    width: 100%;
+    padding: p2r(16);
+    border-radius: var(--ec-s);
+    background: var(--ec-bg);
+    border: 1px solid var(--ec-bc);
+    color: var(--ec-c);
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: p2r(4);
+      flex: 1;
+
+      > * {
+        color: var(--ec-c);
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font: var(--paragraph-20B);
+      }
+    }
+
+    .actions [actions],
+    .actions {
+      display: flex;
+      gap: p2r(8);
+      align-items: center;
+
+      [shButton] {
+        --btn-bs: none;
+      }
+    }
+
+    &:before {
+      content: '';
+      display: block;
+      border-radius: p2r(3);
+      width: p2r(6);
+      background: var(--ec-c);
+    }
+
+    &.dynamic {
+      --ec-bg: rgb(from var(--ec-c) r g b / 0.14);
+      color: var(--ec-c);
+      border: 0;
+
+      .content {
+        p {
+          --ec-pc: rgb(from var(--ec-c) r g b / 0.65);
+          color: var(--ec-pc);
+        }
+      }
+
+      sh-icon {
+        color: inherit;
+      }
+    }
+
+    &.primary {
+      --ec-c: var(--primary-8);
+    }
+
+    &.accent {
+      --ec-c: var(--accent-8);
+    }
+
+    &.warn {
+      --ec-c: var(--warn-8);
+    }
+
+    &.error {
+      --ec-c: var(--error-8);
+    }
+
+    &.success {
+      --ec-c: var(--success-8);
+    }
+
+    &.simple,
+    &.outlined {
+      --ec-c: var(--base-12);
+      --ec-bg: var(--base-2);
+
+      &.primary {
+        --ec-c: var(--primary-8);
+        --ec-bg: var(--primary-1);
+        --ec-bc: var(--primary-4);
+      }
+
+      &.accent {
+        --ec-c: var(--accent-8);
+        --ec-bg: var(--accent-1);
+        --ec-bc: var(--accent-4);
+      }
+
+      &.warn {
+        --ec-c: var(--warn-8);
+        --ec-bg: var(--warn-1);
+        --ec-bc: var(--warn-4);
+      }
+
+      &.error {
+        --ec-c: var(--error-8);
+        --ec-bg: var(--error-1);
+        --ec-bc: var(--error-4);
+      }
+
+      &.success {
+        --ec-c: var(--success-8);
+        --ec-bg: var(--success-1);
+        --ec-bc: var(--success-4);
+      }
+    }
+
+    &.simple,
+    &.simple.primary,
+    &.simple.accent,
+    &.simple.warn,
+    &.simple.error,
+    &.simple.success {
+      --ec-bc: var(--ec-bg);
+    }
+
+    &.flat {
+      --ec-c: #fff;
+      --ec-ic: #fff;
+      --ec-bg: var(--base-8);
+
+      border: 0;
+
+      &.primary {
+        --ec-c: var(--primary-c8);
+        --ec-bg: var(--primary-8);
+      }
+
+      &.accent {
+        --ec-c: var(--accent-c8);
+        --ec-bg: var(--accent-8);
+      }
+
+      &.warn {
+        --ec-c: var(--warn-c8);
+        --ec-bg: var(--warn-8);
+      }
+
+      &.error {
+        --ec-c: var(--error-c8);
+        --ec-bg: var(--error-8);
+      }
+
+      &.success {
+        --ec-c: var(--success-c8);
+        --ec-bg: var(--success-8);
+      }
+    }
+
+    &.raised {
+      --ec-c: #fff;
+      --ec-ic: #fff;
+      --ec-bg: var(--base-g6);
+
+      border: 0;
+
+      &.primary {
+        --ec-c: var(--primary-c8);
+        --ec-bg: var(--primary-g2);
+      }
+
+      &.accent {
+        --ec-c: var(--accent-c8);
+        --ec-bg: var(--accent-g2);
+      }
+
+      &.warn {
+        --ec-c: var(--warn-c8);
+        --ec-bg: var(--warn-g2);
+      }
+
+      &.error {
+        --ec-c: var(--error-c8);
+        --ec-bg: var(--error-g2);
+      }
+
+      &.success {
+        --ec-c: var(--success-c8);
+        --ec-bg: var(--success-g2);
+      }
+    }
+  }
+}

package/styles/components/ship-form-field.component.scss

@@ -49,6 +49,13 @@ $shipFormFieldShadow: false !default;
     position: relative;
     width: 100%;
 
+    transition: transform 125ms linear;
+    transform: scale(1);
+
+    &:active {
+      transform: scale(0.995);
+    }
+
     &[read-only],
     &[read-only='true'],
     &[readonly='true'],

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

@@ -52,6 +52,13 @@ $shipList: true !default;
       background-color: transparent;
       text-decoration: none;
 
+      transition: transform 125ms linear;
+      transform: scale(1);
+
+      &:active {
+        transform: scale(0.98);
+      }
+
       &:focus {
         outline: none;
       }

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

@@ -174,6 +174,12 @@ $shipMenu: true !default;
         border: 0;
         cursor: pointer;
         color: var(--base-12);
+        transition: transform 125ms linear;
+        transform: scale(1);
+
+        &:active {
+          transform: scale(0.98);
+        }
 
         &[disabled] {
           opacity: 0.3;

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

@@ -30,6 +30,13 @@ $shipTabs: true !default;
       cursor: pointer;
       position: relative;
 
+      transition: transform 125ms linear;
+      transform: scale(1);
+
+      &:active {
+        transform: scale(0.98);
+      }
+
       &:focus {
         outline: none;
       }

package/styles/index.scss

@@ -22,6 +22,7 @@ $shipButton: true !default;
 $shipProgressBar: true !default;
 $shipCheckbox: true !default;
 $shipDatepicker: true !default;
+$shipEventCard: true !default;
 $shipIcon: true !default;
 $shipMenu: true !default;
 $shipDivider: true !default;
@@ -69,6 +70,9 @@ $shipFileUpload: true !default;
 @use './components/ship-datepicker.component.scss' with (
   $shipDatepicker: $shipDatepicker
 );
+@use './components/ship-event-card.component.scss' with (
+  $shipEventCard: $shipEventCard
+);
 @use './components/ship-icon.component.scss' with (
   $shipIcon: $shipIcon
 );