ngx-techlify-core 18.91.0 → 18.92.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-techlify-core",
-  "version": "18.91.0",
+  "version": "18.92.0",
   "peerDependencies": {
     "@angular/common": ">=18",
     "@angular/core": ">=18",

package/styles/html-elements.scss

@@ -0,0 +1,280 @@
+//Remove default focus outline
+button,
+a,
+input {
+    outline: none !important;
+}
+
+//Adding a more modern looking scrollbar (Mostly for windows devices)
+::-webkit-scrollbar {
+    width: 0.5em;
+}
+
+::-webkit-scrollbar-track {
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: gray;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #4d4c4c;
+}
+
+//Icon Styling
+.icon-md {
+    height: 24px !important;
+    width: 24px !important;
+    font-size: 24px !important;
+    margin: 0 1px;
+}
+
+.icon-sm {
+    height: 20px !important;
+    width: 20px !important;
+    font-size: 20px !important;
+}
+
+.icon-xs {
+    height: 16px !important;
+    width: 16px !important;
+    font-size: 16px !important;
+}
+
+.mat-icon-xl {
+    height: 40px !important;
+    width: 40px !important;
+    font-size: 40px !important;
+}
+
+.mat-icon-20px {
+    font-size: 20px !important;
+    height: 20px !important;
+    width: 20px !important;
+}
+
+.mat-small-icon {
+    height: 16px !important;
+    width: 16px !important;
+    font-size: 16px !important;
+}
+
+//Button Styling
+.mat-btn-md {
+    height: 25px !important;
+    padding: 0 8px !important;
+}
+
+//Override the letter spacing to match the earlier button version
+.mdc-button__label {
+    letter-spacing: normal !important;
+}
+
+.mat-mdc-button {
+    .mat-icon {
+        height: 24px !important;
+        width: 24px !important;
+        font-size: 24px !important;
+    }
+}
+
+//Button toggle
+.mat-button-toggle-group {
+    height: 48px !important;
+    align-items: center;
+}
+
+.mat-button-toggle-button {
+    height: 48px !important;
+}
+
+.mat-button-toggle-label-content {
+    padding: 0 8px !important;
+    font-size: 14px !important;
+}
+
+//Slide toggle
+.mat-mdc-slide-toggle {
+    label {
+        margin: 0 !important;
+    }
+}
+
+.small-slide-toggle {
+    transform: scale(0.8);
+    transform-origin: left center;
+}
+
+//Font styles
+.fs-8 {
+    font-size: 8px !important;
+}
+
+.fs-12 {
+    font-size: 12px !important;
+}
+
+.fs-13 {
+    font-size: 13px !important;
+}
+
+.fs-16 {
+    font-size: 16px !important;
+}
+
+.fs-18 {
+    font-size: 18px !important;
+}
+
+//Clickable
+.clickable {
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+//Form fields
+//override mat hint for custom date select less padding
+.mat-mdc-form-field-hint-wrapper {
+    padding: 0 4px !important;
+}
+
+.mat-mdc-floating-label {
+    pointer-events: none !important;
+}
+
+.nil-subscript-wrapper {
+    .mat-mdc-form-field-subscript-wrapper {
+        height: 0 !important;
+    }
+}
+
+.create-another {
+    .mat-mdc-checkbox {
+        label {
+            margin: 0 !important;
+        }
+    }
+
+    .mdc-checkbox {
+        padding: 0 !important;
+    }
+
+    .mdc-checkbox__background {
+        position: relative;
+        top: 0px;
+        left: 0px;
+    }
+}
+
+//Set the disabled color
+.mat-mdc-form-field.mat-form-field-disabled {
+    .mat-mdc-input-element {
+        color: #555555 !important;
+        -webkit-text-fill-color: #555555 !important;
+    }
+
+    .mat-mdc-select-value {
+        color: #555555 !important;
+    }
+}
+
+//Cards
+.mat-mdc-card {
+    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+    padding: 16px;
+}
+
+.mat-mdc-card-content {
+    padding: 0 !important;
+}
+
+//Dialogs
+.mat-mdc-dialog-surface {
+    padding: 24px;
+}
+
+.mat-mdc-dialog-title {
+    padding: 0 !important;
+
+    .mat-mdc-dialog-title::before {
+        height: 0 !important;
+    }
+
+    * {
+        position: relative;
+        top: -30px !important;
+    }
+}
+
+//Override dialog container top padding
+.mat-mdc-dialog-container .mat-mdc-dialog-title+.mat-mdc-dialog-content {
+    padding-top: 6px !important;
+}
+
+//Tables
+.mdc-data-table__cell,
+.mdc-data-table__header-cell {
+    padding: 0 8px !important;
+}
+
+//Override footer border
+.mdc-data-table__row:last-child .mat-mdc-cell {
+    border-bottom: inset !important;
+}
+
+//Custom styling for action columns
+.mat-column-actions {
+    .mat-mdc-icon-button {
+        width: 30px !important;
+        height: 30px !important;
+        top: 6px !important;
+
+        .mat-icon {
+            bottom: 9px !important;
+            right: 9px !important;
+        }
+    }
+}
+
+//Progress bar
+.mat-mdc-progress-bar {
+    border-radius: 2px;
+}
+
+//Chips / Pills
+.chip-mini-grey {
+    background-color: #d9d9d9 !important;
+    border-radius: 3px;
+    display: inline-block;
+    padding: 0px 6px;
+    font-size: 13px;
+}
+
+.chip-mini-outline {
+    background-color: #fff !important;
+    border-radius: 3px;
+    display: inline-block;
+    padding: 0px 6px;
+    outline: 1px solid #bbb;
+    font-size: 13px;
+}
+
+//Badges
+.techlify-badge-grey-outlined {
+    background-color: #F2F3F5 !important;
+    font-weight: 400 !important;
+    font-size: 12px !important;
+    color: black !important;
+}
+
+.techlify-badge-white-outlined {
+    font-weight: 400 !important;
+    font-size: 12px !important;
+    border-style: solid !important;
+    border-width: thin !important;
+    color: black !important;
+    border-color: black !important;
+}

package/styles/layout.scss

@@ -0,0 +1,131 @@
+//Filters Styling
+.fl-md {
+    width: 200px !important;
+
+    .mat-mdc-form-field {
+        width: 100% !important;
+    }
+}
+
+.fl-sm {
+    width: 150px !important;
+
+    .mat-mdc-form-field {
+        width: 100% !important;
+    }
+}
+
+//Fixed width helpers
+.wpx-50 {
+    width: 50px !important;
+}
+
+.wpx-100 {
+    width: 100px !important;
+}
+
+.wpx-120 {
+    width: 120px !important;
+}
+
+.wpx-125 {
+    width: 125px !important;
+}
+
+.wpx-150 {
+    width: 150px !important;
+}
+
+.wpx-200 {
+    width: 200px !important;
+}
+
+.wpx-250 {
+    width: 250px !important;
+}
+
+.min-wpx-200 {
+    min-width: 200px !important;
+}
+
+.max-width-px-115 {
+    max-width: 115px;
+}
+
+.w-description {
+    width: 300px !important;
+}
+
+.side-panel {
+    width: 300px !important;
+    min-width: 300px !important;
+    flex-shrink: 0 !important;
+}
+
+//Height helpers
+.h-250px {
+    height: 250px !important;
+}
+
+.scroll-y {
+    overflow-y: auto;
+}
+
+//Flex-basis helpers (Bootstrap 5 has no percentage/zero flex-basis utilities)
+.flex-basis-0 {
+    flex-basis: 0;
+}
+
+@each $basis in 5, 8, 10, 15, 20, 25, 30, 35, 40, 45, 48, 49, 50, 60, 65, 70, 80, 90, 95, 100 {
+    .flex-basis-#{$basis} {
+        flex-basis: $basis * 1%;
+    }
+}
+
+//Calc-based flex-basis helpers (percentage minus a gap), replacing fxFlex="0 1 calc(N% - X)"
+.flex-basis-50-minus-1rem {
+    flex-basis: calc(50% - 1rem);
+}
+
+.flex-basis-50-minus-0-2rem {
+    flex-basis: calc(50% - 0.2rem);
+}
+
+.flex-basis-20-minus-1rem {
+    flex-basis: calc(20% - 1rem);
+}
+
+.flex-basis-15-minus-1rem {
+    flex-basis: calc(15% - 1rem);
+}
+
+.flex-basis-50-minus-4px {
+    flex-basis: calc(50% - 4px);
+}
+
+//Responsive flex-basis helpers (lg >= 992px, xl >= 1200px)
+@media (min-width: 992px) {
+    .flex-lg-basis-50 {
+        flex-basis: 50%;
+    }
+}
+
+@media (min-width: 1200px) {
+    .flex-xl-basis-30 {
+        flex-basis: 30%;
+    }
+
+    .flex-xl-basis-30-minus-1rem {
+        flex: 0 1 calc(30% - 1rem);
+    }
+}
+
+//Column-gap helpers matching Bootstrap 5.3's column-gap-* (not available in 5.2).
+//Use on wrapping rows to space items horizontally without adding vertical gap.
+$techlify-column-gaps: (1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 3rem);
+
+@each $key, $gap in $techlify-column-gaps {
+    .column-gap-#{$key} {
+        column-gap: $gap !important;
+    }
+}

package/styles/style.scss

@@ -1,108 +1,3 @@
-//Icon Styling
-.icon-md {
-    height: 24px !important;
-    width: 24px !important;
-    font-size: 24px !important;
-    margin: 0 1px;
-}
-
-.icon-sm {
-    height: 20px !important;
-    width: 20px !important;
-    font-size: 20px !important;
-}
-
-.icon-xs {
-    height: 16px !important;
-    width: 16px !important;
-    font-size: 16px !important;
-}
-
-//Filters Styling
-.fl-md {
-    width: 200px !important;
-
-    .mat-mdc-form-field {
-        width: 100% !important;
-    }
-}
-
-.fl-sm {
-    width: 150px !important;
-
-    .mat-mdc-form-field {
-        width: 100% !important;
-    }
-}
-
-//Button Styling
-.mat-btn-md {
-    height: 25px !important;
-    padding: 0 8px !important;
-}
-
-//Font styles
-.fs-12 {
-    font-size: 12px !important;
-}
-
-.fs-16 {
-    font-size: 16px !important;
-}
-
-.fs-13 {
-    font-size: 13px !important;
-}
-
-.fs-18 {
-    font-size: 18px !important;
-}
-
-
-//Clickable
-.clickable {
-    &:hover {
-        cursor: pointer;
-    }
-}
-
-//override mat hint for custom date select less padding
-.mat-mdc-form-field-hint-wrapper {
-    padding: 0 4px !important;
-}
-
-.nil-subscript-wrapper {
-    .mat-mdc-form-field-subscript-wrapper {
-        height: 0 !important;
-    }
-}
-
-.create-another {
-    .mat-mdc-checkbox {
-        label {
-            margin: 0 !important;
-        }
-    }
-
-    .mdc-checkbox {
-        padding: 0 !important;
-    }
-
-    .mdc-checkbox__background {
-        position: relative;
-        top: 0px;
-        left: 0px;
-    }
-}
-
-//Set the disabled color
-.mat-mdc-form-field.mat-form-field-disabled {
-    .mat-mdc-input-element {
-        color: #555555 !important;
-        -webkit-text-fill-color: #555555 !important;
-    }
-
-    .mat-mdc-select-value {
-        color: #555555 !important;
-    }
-}
+// Entry point for all ngx-techlify-core styles
+@import './layout.scss';
+@import './html-elements.scss';