@ship-ui/core 0.13.28 → 0.13.29

package/index.d.ts

@@ -289,6 +289,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 +770,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.29",
   "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-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
 );