@foxeltech/angular-ui 0.0.13 → 0.2.0

package/package.json

@@ -1,11 +1,7 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.0.13",
+  "version": "0.2.0",
   "license": "MIT",
-  "main": "bundles/ui.umd.js",
-  "module": "fesm2022/foxeltech-angular-ui.mjs",
-  "es2020": "fesm2020/ui.mjs",
-  "typings": "index.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -52,5 +48,9 @@
       "default": "./fesm2022/foxeltech-angular-ui.mjs"
     }
   },
-  "sideEffects": false
+  "sideEffects": [
+    "*.css"
+  ],
+  "module": "fesm2022/foxeltech-angular-ui.mjs",
+  "typings": "index.d.ts"
 }

package/src/lib/styles/components.css

@@ -79,6 +79,11 @@
 .mat-mdc-tooltip {
   border-radius: 6px !important;
   background-color: rgb(var(--bg-primary)) !important;
+  --mdc-plain-tooltip-container-color: rgb(var(--bg-primary));
+  --mdc-plain-tooltip-supporting-text-color: rgb(var(--text-primary));
+}
+.mat-mdc-tooltip .mdc-tooltip__surface {
+  color: rgb(var(--text-primary)) !important;
 }
 
 .mat-mdc-table {

package/src/lib/styles/fonts.css

@@ -1,237 +1,271 @@
 @font-face {
   font-family: 'BeVietnamPro';
-  src: url('./BeVietnamPro/BeVietnamPro-Thin.ttf') format('truetype');
+  font-display: swap;
+  src: url('./BeVietnamPro/BeVietnamPro-Thin.woff2') format('woff2');
   font-weight: 100;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'BeVietnamPro';
-  src: url('./BeVietnamPro/BeVietnamPro-ExtraLight.ttf') format('truetype');
+  font-display: swap;
+  src: url('./BeVietnamPro/BeVietnamPro-ExtraLight.woff2') format('woff2');
   font-weight: 200;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'BeVietnamPro';
-  src: url('./BeVietnamPro/BeVietnamPro-Light.ttf') format('truetype');
+  font-display: swap;
+  src: url('./BeVietnamPro/BeVietnamPro-Light.woff2') format('woff2');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'BeVietnamPro';
-  src: url('./BeVietnamPro/BeVietnamPro-Regular.ttf') format('truetype');
+  font-display: swap;
+  src: url('./BeVietnamPro/BeVietnamPro-Regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'BeVietnamPro';
-  src: url('./BeVietnamPro/BeVietnamPro-Medium.ttf') format('truetype');
+  font-display: swap;
+  src: url('./BeVietnamPro/BeVietnamPro-Medium.woff2') format('woff2');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'BeVietnamPro';
-  src: url('./BeVietnamPro/BeVietnamPro-SemiBold.ttf') format('truetype');
+  font-display: swap;
+  src: url('./BeVietnamPro/BeVietnamPro-SemiBold.woff2') format('woff2');
   font-weight: 600;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'BeVietnamPro';
-  src: url('./BeVietnamPro/BeVietnamPro-Bold.ttf') format('truetype');
+  font-display: swap;
+  src: url('./BeVietnamPro/BeVietnamPro-Bold.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DMSans';
-  src: url('./dm-sans/DMSans-Thin.ttf') format('truetype');
+  font-display: swap;
+  src: url('./dm-sans/DMSans-Thin.woff2') format('woff2');
   font-weight: 200;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DMSans';
-  src: url('./dm-sans/DMSans-Light.ttf') format('truetype');
+  font-display: swap;
+  src: url('./dm-sans/DMSans-Light.woff2') format('woff2');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DMSans';
-  src: url('./dm-sans/DMSans-Regular.ttf') format('truetype');
+  font-display: swap;
+  src: url('./dm-sans/DMSans-Regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DMSans';
-  src: url('./dm-sans/DMSans-Medium.ttf') format('truetype');
+  font-display: swap;
+  src: url('./dm-sans/DMSans-Medium.woff2') format('woff2');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DMSans';
-  src: url('./dm-sans/DMSans-SemiBold.ttf') format('truetype');
+  font-display: swap;
+  src: url('./dm-sans/DMSans-SemiBold.woff2') format('woff2');
   font-weight: 600;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DMSans';
-  src: url('./dm-sans/DMSans-Bold.ttf') format('truetype');
+  font-display: swap;
+  src: url('./dm-sans/DMSans-Bold.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Orbitron';
-  src: url('./orbitron/Orbitron-Regular.ttf') format('truetype');
+  font-display: swap;
+  src: url('./orbitron/Orbitron-Regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Orbitron';
-  src: url('./orbitron/Orbitron-Medium.ttf') format('truetype');
+  font-display: swap;
+  src: url('./orbitron/Orbitron-Medium.woff2') format('woff2');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Orbitron';
-  src: url('./orbitron/Orbitron-SemiBold.ttf') format('truetype');
+  font-display: swap;
+  src: url('./orbitron/Orbitron-SemiBold.woff2') format('woff2');
   font-weight: 600;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Orbitron';
-  src: url('./orbitron/Orbitron-Bold.ttf') format('truetype');
+  font-display: swap;
+  src: url('./orbitron/Orbitron-Bold.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'SpaceMonoRegular';
-  src: url('./SpaceMono-Regular.ttf') format('truetype');
+  font-display: swap;
+  src: url('./SpaceMono-Regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-Thin.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-Thin.woff2') format('woff2');
   font-weight: 100;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-ThinItalic.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-ThinItalic.woff2') format('woff2');
   font-weight: 100;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-Light.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-Light.woff2') format('woff2');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-LightItalic.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-LightItalic.woff2') format('woff2');
   font-weight: 300;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-Regular.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-Regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-Italic.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-Italic.woff2') format('woff2');
   font-weight: 400;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-Medium.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-Medium.woff2') format('woff2');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-MediumItalic.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-MediumItalic.woff2') format('woff2');
   font-weight: 500;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-Bold.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-Bold.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-BoldItalic.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-BoldItalic.woff2') format('woff2');
   font-weight: 700;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-Black.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-Black.woff2') format('woff2');
   font-weight: 900;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-BlackItalic.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-BlackItalic.woff2') format('woff2');
   font-weight: 900;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Roboto Condensed';
-  src: url('./roboto/Roboto-Condensed.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-Condensed.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto Condensed';
-  src: url('./roboto/Roboto-CondensedItalic.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-CondensedItalic.woff2') format('woff2');
   font-weight: 400;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Roboto Condensed';
-  src: url('./roboto/Roboto-BoldCondensed.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-BoldCondensed.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto Condensed';
-  src: url('./roboto/Roboto-BoldCondensedItalic.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-BoldCondensedItalic.woff2') format('woff2');
   font-weight: 700;
   font-style: italic;
 }

package/src/lib/styles/tailwind.css

@@ -5,7 +5,7 @@
 @import './animations.css';
 @import '@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';
 @tailwind base;
-@tailwind component;
+@tailwind components;
 @tailwind utilities;
 
 html, body {

package/src/lib/ui/components/chart/chart.component.scss

@@ -0,0 +1,49 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.chart-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+
+.chart-loader {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(var(--bg-primary-hover) / 0.6);
+  font-weight: 500;
+  font-size: 1.1rem;
+  z-index: 2;
+  border-radius: 4px;
+}
+
+.chart-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 12px;
+  color: rgba(var(--text-secondary) / 1);
+}
+
+.chart-empty-icon {
+  width: 48px;
+  height: 48px;
+  opacity: 0.4;
+}
+
+.chart-empty-text {
+  font-size: 14px;
+  font-weight: 500;
+}

package/src/lib/ui/components/datetime-picker/datetime-picker.component.scss

@@ -0,0 +1,144 @@
+// ─── Owl DateTime Picker Custom Styles ───────────────────────────────────────
+
+// Container
+::ng-deep .owl-dt-container {
+  @apply bg-bg-primary rounded-xl shadow-xl border border-border-default;
+  width: 320px !important;
+}
+
+// Calendar table base
+::ng-deep .owl-dt-calendar-table {
+  @apply w-full border-collapse;
+}
+
+// Default cell hover — override red debug color
+::ng-deep .owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected) {
+  @apply bg-bg-hover;
+}
+
+// ── Current-month cell text color ─────────────────────────────────────────────
+// No !important here — lets out-month and disabled !important overrides win.
+// A direct declaration still beats the library's inherited rgba(0,0,0,.85).
+::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-content {
+  color: rgb(var(--text-primary));
+}
+
+// Selected cell
+::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-selected {
+  background-color: rgb(var(--primary)) !important;
+  color: #fff !important;
+}
+
+// Today highlight (not selected)
+::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected) {
+  border-color: rgb(var(--primary)) !important;
+}
+
+// ── Disabled dates: text-text-placeholder ────────────────────────────────────
+// owl-dt-calendar-cell-disabled is on the <td>, content span is a direct child
+::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-disabled > .owl-dt-calendar-cell-content {
+  color: rgb(var(--text-placeholder)) !important;
+  opacity: 0.6 !important;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+// ── Other-month dates: text-text-secondary ────────────────────────────────────
+// In v20, owl-dt-calendar-cell-out is applied ON the <span.owl-dt-calendar-cell-content>
+// itself (via [ngClass]), NOT on the parent <td>. So target it directly.
+::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-content.owl-dt-calendar-cell-out {
+  color: rgb(var(--text-secondary)) !important;
+  opacity: 0.6 !important;
+}
+
+// ── Timer input ───────────────────────────────────────────────────────────────
+::ng-deep .owl-dt-timer-content .owl-dt-timer-input {
+  @apply bg-bg-primary border border-border-strong text-text-primary rounded-lg;
+}
+
+// ── Period button (hide arrow) ────────────────────────────────────────────────
+::ng-deep .owl-dt-control-period-button .owl-dt-control-button-arrow {
+  display: none;
+}
+
+// ── Set / Cancel footer buttons ───────────────────────────────────────────────
+// Library sets .owl-dt-container-buttons { height: 2em; color: #3f51b5 } — override both
+::ng-deep .owl-dt-container-buttons {
+  height: auto !important;
+  color: rgb(var(--text-primary)) !important; // reset inherited primary color on text
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-end !important;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 1px solid rgb(var(--border-default));
+}
+
+// Both buttons — explicit 32px height so inner height:100% resolves correctly
+::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button {
+  width: auto !important;
+  height: 32px !important;
+  border-radius: 6px !important;
+  width: 60px !important;
+  padding-top: 4px !important;
+  padding-bottom: 4px !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+  border: 1px solid rgb(var(--border-default)) !important;
+  background-color: rgb(var(--bg-primary)) !important;
+  color: rgb(var(--text-primary)) !important;
+  cursor: pointer;
+  transition: opacity 150ms ease;
+
+  &:hover {
+    background-color: rgb(var(--bg-hover)) !important;
+  }
+}
+
+// "Set" = last button — primary fill
+::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:last-child {
+  background-color: rgb(var(--primary)) !important;
+  border-color: rgb(var(--primary)) !important;
+  color: #fff !important;
+  
+
+  &:hover {
+    opacity: 0.85;
+  }
+}
+
+// Inner content: height:100% now resolves against fixed 32px button, and
+// background must be transparent so the button's own bg shows through
+::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button .owl-dt-control-button-content {
+  height: 100% !important;
+  width: 100% !important;
+  padding: 0 !important;
+  background-color: transparent !important;
+  color: inherit !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+// ── Header / navigation ───────────────────────────────────────────────────────
+::ng-deep .owl-dt-calendar-control-content .owl-dt-control-button-content {
+  @apply text-text-primary font-medium;
+}
+
+::ng-deep .owl-dt-control-arrow-button .owl-dt-control-button-content {
+  @apply text-text-primary;
+}
+
+::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header {
+  @apply text-text-secondary;
+}
+
+::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-weekdays th {
+  @apply text-text-secondary font-medium;
+}
+
+// ── Popup container border ────────────────────────────────────────────────────
+::ng-deep .owl-dt-inline-container,
+::ng-deep .owl-dt-popup-container {
+  @apply rounded-xl shadow-lg border border-border-strong;
+}