@pecb-ui/components 1.1.11 → 1.1.13

package/lib/components/shadow/shadow.directive.scss

@@ -0,0 +1,42 @@
+@use "../../../styles/abstracts/variables" as *;
+
+// =============================================================================
+// SHADOW SOFT CLASSES
+// =============================================================================
+
+@each $name, $value in $shadow-soft-map {
+  .pecb-shadow-soft--#{$name} {
+    box-shadow: $value;
+  }
+}
+
+// =============================================================================
+// SHADOW HARD CLASSES
+// =============================================================================
+
+@each $name, $value in $shadow-hard-map {
+  .pecb-shadow-hard--#{$name} {
+    box-shadow: $value;
+  }
+}
+
+// =============================================================================
+// BLUR CLASSES (element filter)
+// =============================================================================
+
+@each $name, $value in $blur-map {
+  .pecb-blur--#{$name} {
+    filter: blur($value);
+  }
+}
+
+// =============================================================================
+// BACKDROP BLUR CLASSES (glass-morphism)
+// =============================================================================
+
+@each $name, $value in $blur-map {
+  .pecb-backdrop-blur--#{$name} {
+    backdrop-filter: blur($value);
+    -webkit-backdrop-filter: blur($value);
+  }
+}

package/navigation/index.d.ts

@@ -1 +1 @@
-export { AdminHeaderAction, AdminHeaderActionType, AdminHeaderBadgeVariant, AdminHeaderComponent, AdminHeaderField, AdminHeaderFieldTemplateDirective, AdminHeaderFieldType, AdminHeaderMetadata, AdminHeaderMetadataType, AdminHeaderProfile, AffixComponent, AffixPosition, AnchorComponent, AnchorDirection, AnchorItem, AnchorLevel, BackToTopComponent, BreadcrumbSeparator, BreadcrumbsComponent, DEFAULT_LANGUAGES, HeaderActionButton, HeaderActionsComponent, HeaderComponent, HeaderDividerComponent, HeaderLanguageComponent, HeaderLanguageOption, HeaderSearchCategory, HeaderSearchComponent, HeaderUserComponent, LanguageDisplayMode, LanguageDropdownComponent, LanguageOption, StepItem, StepOrder, StepState, StepperComponent, StepperDirection, StepperSize, StepperTailStyle, StepperType, TabComponent, TabSize, TabStyle } from '@pecb-ui/components';
+export { APP_SIDEBAR_MENU_ICONS, AdminHeaderAction, AdminHeaderActionType, AdminHeaderBadgeVariant, AdminHeaderComponent, AdminHeaderField, AdminHeaderFieldTemplateDirective, AdminHeaderFieldType, AdminHeaderMetadata, AdminHeaderMetadataType, AdminHeaderProfile, AffixComponent, AffixPosition, AnchorComponent, AnchorDirection, AnchorItem, AnchorLevel, AppHeaderAction, AppHeaderChip, AppHeaderChipTone, AppHeaderComponent, AppHeaderLabels, AppHeaderNotification, AppSidebarComponent, AppSidebarLabels, AppSidebarMenuItem, AppSidebarMenuOption, AppSidebarMenuOptionChange, AppSidebarNavGroup, AppSidebarNavItem, AppSidebarProduct, AppSidebarRouterLink, AppSidebarUser, BackToTopComponent, BreadcrumbSeparator, BreadcrumbsComponent, DEFAULT_APP_HEADER_LABELS, DEFAULT_APP_SIDEBAR_LABELS, DEFAULT_APP_SIDEBAR_LANGUAGES, DEFAULT_APP_SIDEBAR_MENU, DEFAULT_APP_SIDEBAR_ROLES, DEFAULT_LANGUAGES, HeaderActionButton, HeaderActionsComponent, HeaderComponent, HeaderDividerComponent, HeaderLanguageComponent, HeaderLanguageOption, HeaderSearchCategory, HeaderSearchComponent, HeaderUserComponent, LanguageDisplayMode, LanguageDropdownComponent, LanguageOption, StepItem, StepOrder, StepState, StepperComponent, StepperDirection, StepperSize, StepperTailStyle, StepperType, TabComponent, TabSize, TabStyle } from '@pecb-ui/components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pecb-ui/components",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "description": "Professional Angular UI Components Library with TypeScript and SCSS by PECB",
   "author": "PECB",
   "license": "MIT",
@@ -32,11 +32,15 @@
     "@angular/cdk": "^20.0.0",
     "@angular/animations": "^20.0.0",
     "@angular/platform-browser": "^20.0.0",
-    "rxjs": "^7.8.0"
+    "rxjs": "^7.8.0",
+    "@angular/router": "^20.0.0"
   },
   "peerDependenciesMeta": {
     "@angular/animations": {
       "optional": true
+    },
+    "@angular/router": {
+      "optional": true
     }
   },
   "dependencies": {

package/styles/abstracts/_mixins.scss

@@ -0,0 +1,331 @@
+@use "sass:color";
+@use "sass:map";
+@use "variables" as *;
+
+// Responsive breakpoint mixin
+@mixin respond-to($breakpoint) {
+  @if $breakpoint == "xs" {
+    @media (min-width: $breakpoint-xs) {
+      @content;
+    }
+  } @else if $breakpoint == "sm" {
+    @media (min-width: $breakpoint-sm) {
+      @content;
+    }
+  } @else if $breakpoint == "md" {
+    @media (min-width: $breakpoint-md) {
+      @content;
+    }
+  } @else if $breakpoint == "lg" {
+    @media (min-width: $breakpoint-lg) {
+      @content;
+    }
+  } @else if $breakpoint == "xl" {
+    @media (min-width: $breakpoint-xl) {
+      @content;
+    }
+  }
+}
+
+// Flexbox utilities
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+// Truncate text
+@mixin text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Multi-line truncate
+@mixin line-clamp($lines: 2) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+// Custom scrollbar
+@mixin custom-scrollbar($thumb-color: $neutral-4, $track-color: $neutral-5) {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $track-color;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $thumb-color;
+    border-radius: $border-radius-md;
+
+    &:hover {
+      background: color.adjust($thumb-color, $lightness: -10%);
+    }
+  }
+}
+
+// Button reset
+@mixin button-reset {
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+// Aspect ratio
+@mixin aspect-ratio($width: 16, $height: 9) {
+  position: relative;
+
+  &::before {
+    content: "";
+    display: block;
+    padding-top: calc(($height / $width) * 100%);
+  }
+
+  > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// Focus visible styles
+@mixin focus-visible($color: $primary-color) {
+  &:focus-visible {
+    outline: 2px solid $color;
+    outline-offset: 2px;
+  }
+}
+
+// Elevation/Shadow
+@mixin elevation($level: 1) {
+  @if $level == 1 {
+    box-shadow: $shadow-sm;
+  } @else if $level == 2 {
+    box-shadow: $shadow-md;
+  } @else if $level == 3 {
+    box-shadow: $shadow-lg;
+  } @else if $level == 4 {
+    box-shadow: $shadow-xl;
+  }
+}
+
+// Transition
+@mixin transition($properties...) {
+  transition-property: $properties;
+  transition-duration: $transition-base;
+  transition-timing-function: ease-in-out;
+}
+
+// Shadow Soft
+@mixin shadow-soft($size: "medium") {
+  box-shadow: map.get($shadow-soft-map, $size);
+}
+
+// Shadow Hard
+@mixin shadow-hard($size: "medium") {
+  box-shadow: map.get($shadow-hard-map, $size);
+}
+
+// Blur (backdrop or element)
+@mixin blur($size: "medium") {
+  $value: map.get($blur-map, $size);
+  filter: blur($value);
+}
+
+// Backdrop blur (glass-morphism)
+@mixin backdrop-blur($size: "medium") {
+  $value: map.get($blur-map, $size);
+  backdrop-filter: blur($value);
+  -webkit-backdrop-filter: blur($value);
+}
+
+// ============================================
+// TYPOGRAPHY MIXINS
+// ============================================
+
+// Base typography
+@mixin font-base {
+  font-family: $font-family-base;
+}
+
+// Headings
+@mixin h1($weight: $font-weight-regular) {
+  @include font-base;
+  font-size: $font-size-32;
+  font-weight: $weight;
+  line-height: $line-height-heading;
+}
+
+@mixin h1-bold {
+  @include h1($font-weight-bold);
+}
+
+@mixin h1-medium {
+  @include h1($font-weight-medium);
+}
+
+@mixin h2($weight: $font-weight-regular) {
+  @include font-base;
+  font-size: $font-size-24;
+  font-weight: $weight;
+  line-height: $line-height-heading;
+}
+
+@mixin h2-bold {
+  @include h2($font-weight-bold);
+}
+
+@mixin h2-medium {
+  @include h2($font-weight-medium);
+}
+
+@mixin h3($weight: $font-weight-regular) {
+  @include font-base;
+  font-size: $font-size-20;
+  font-weight: $weight;
+  line-height: $line-height-heading;
+}
+
+@mixin h3-bold {
+  @include h3($font-weight-bold);
+}
+
+@mixin h3-medium {
+  @include h3($font-weight-medium);
+}
+
+// Body text
+@mixin body-12($weight: $font-weight-regular) {
+  @include font-base;
+  font-size: $font-size-12;
+  font-weight: $weight;
+  line-height: $line-height-base;
+}
+
+@mixin body-13($weight: $font-weight-regular) {
+  @include font-base;
+  font-size: $font-size-13;
+  font-weight: $weight;
+  line-height: $line-height-base;
+}
+
+@mixin body-14($weight: $font-weight-regular) {
+  @include font-base;
+  font-size: $font-size-14;
+  font-weight: $weight;
+  line-height: $line-height-base;
+}
+
+@mixin body-16($weight: $font-weight-regular) {
+  @include font-base;
+  font-size: $font-size-16;
+  font-weight: $weight;
+  line-height: $line-height-base;
+}
+
+@mixin body-18($weight: $font-weight-regular) {
+  @include font-base;
+  font-size: $font-size-18;
+  font-weight: $weight;
+  line-height: $line-height-base;
+}
+
+// Caption
+@mixin caption($weight: $font-weight-regular) {
+  @include font-base;
+  font-size: $font-size-caption;
+  font-weight: $weight;
+  line-height: $line-height-base;
+}
+
+@mixin caption-bold {
+  @include caption($font-weight-bold);
+}
+
+// Hero text
+@mixin hero-1($weight: $font-weight-regular) {
+  @include font-base;
+  font-size: $font-size-48;
+  font-weight: $weight;
+  line-height: $line-height-tight;
+}
+
+@mixin hero-1-medium {
+  @include hero-1($font-weight-medium);
+}
+
+@mixin hero-1-bold {
+  @include hero-1($font-weight-bold);
+}
+
+@mixin hero-2($weight: $font-weight-regular) {
+  @include font-base;
+  font-size: $font-size-40;
+  font-weight: $weight;
+  line-height: $line-height-tight;
+}
+
+@mixin hero-2-medium {
+  @include hero-2($font-weight-medium);
+}
+
+@mixin hero-2-bold {
+  @include hero-2($font-weight-bold);
+}
+
+@mixin hero-3($weight: $font-weight-regular) {
+  @include font-base;
+  font-size: $font-size-32;
+  font-weight: $weight;
+  line-height: $line-height-tight;
+}
+
+@mixin hero-3-medium {
+  @include hero-3($font-weight-medium);
+}
+
+@mixin hero-3-bold {
+  @include hero-3($font-weight-bold);
+}
+
+// Content container — the centred page measure from the PECB designs
+// (`.wrap { max-width: 1180px; margin: 0 auto; padding: 14px }`, gutter
+// widening to 16px below 880px). Emitted as `.pecb-container` in base/container;
+// include the mixin directly when a component needs the measure in its own CSS.
+@mixin content-container($max-width: var(--pecb-container-max-width, 1180px)) {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: $max-width;
+  margin-inline: auto;
+  padding: 14px;
+
+  @media (max-width: 880px) {
+    padding: 16px;
+  }
+}