ngx-pk-ui 0.0.1

package/styles/pk-grid.css

@@ -0,0 +1,164 @@
+/**
+ * pk-grid — 12-column responsive grid for ngx-pk-ui
+ *
+ * Breakpoints (mobile-first):
+ *   xs  < 576px
+ *   sm  ≥ 576px
+ *   md  ≥ 768px
+ *   lg  ≥ 992px
+ *   xl  ≥ 1200px
+ *
+ * Usage:
+ *   <div class="pk-row">
+ *     <div class="pk-col-12 pk-col-md-6 pk-col-lg-4">...</div>
+ *   </div>
+ */
+
+/* ─── Row ─────────────────────────────────────────────────────────── */
+
+.pk-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -8px;
+  margin-right: -8px;
+}
+
+.pk-row--gap-0  { margin-left: 0; margin-right: 0; }
+.pk-row--gap-sm { margin-left: -4px; margin-right: -4px; }
+.pk-row--gap-lg { margin-left: -16px; margin-right: -16px; }
+
+/* ─── Base col ────────────────────────────────────────────────────── */
+
+[class*="pk-col"] {
+  box-sizing: border-box;
+  padding-left: 8px;
+  padding-right: 8px;
+  min-width: 0;
+}
+
+.pk-row--gap-0  > [class*="pk-col"] { padding-left: 0; padding-right: 0; }
+.pk-row--gap-sm > [class*="pk-col"] { padding-left: 4px; padding-right: 4px; }
+.pk-row--gap-lg > [class*="pk-col"] { padding-left: 16px; padding-right: 16px; }
+
+/* Auto column */
+.pk-col   { flex: 1 0 0%; }
+.pk-col-auto { flex: 0 0 auto; width: auto; }
+
+/* ─── Fixed columns (always applied, all breakpoints) ────────────── */
+
+.pk-col-1  { flex: 0 0 auto; width:  8.3333%; }
+.pk-col-2  { flex: 0 0 auto; width: 16.6667%; }
+.pk-col-3  { flex: 0 0 auto; width: 25%; }
+.pk-col-4  { flex: 0 0 auto; width: 33.3333%; }
+.pk-col-5  { flex: 0 0 auto; width: 41.6667%; }
+.pk-col-6  { flex: 0 0 auto; width: 50%; }
+.pk-col-7  { flex: 0 0 auto; width: 58.3333%; }
+.pk-col-8  { flex: 0 0 auto; width: 66.6667%; }
+.pk-col-9  { flex: 0 0 auto; width: 75%; }
+.pk-col-10 { flex: 0 0 auto; width: 83.3333%; }
+.pk-col-11 { flex: 0 0 auto; width: 91.6667%; }
+.pk-col-12 { flex: 0 0 auto; width: 100%; }
+
+/* ─── xs  (<576px) — mobile default, no media query needed ─────────
+   Explicitly stackable: pk-col-xs-* always takes effect. */
+
+.pk-col-xs-1  { flex: 0 0 auto; width:  8.3333%; }
+.pk-col-xs-2  { flex: 0 0 auto; width: 16.6667%; }
+.pk-col-xs-3  { flex: 0 0 auto; width: 25%; }
+.pk-col-xs-4  { flex: 0 0 auto; width: 33.3333%; }
+.pk-col-xs-5  { flex: 0 0 auto; width: 41.6667%; }
+.pk-col-xs-6  { flex: 0 0 auto; width: 50%; }
+.pk-col-xs-7  { flex: 0 0 auto; width: 58.3333%; }
+.pk-col-xs-8  { flex: 0 0 auto; width: 66.6667%; }
+.pk-col-xs-9  { flex: 0 0 auto; width: 75%; }
+.pk-col-xs-10 { flex: 0 0 auto; width: 83.3333%; }
+.pk-col-xs-11 { flex: 0 0 auto; width: 91.6667%; }
+.pk-col-xs-12 { flex: 0 0 auto; width: 100%; }
+
+/* ─── sm  (≥576px) ───────────────────────────────────────────────── */
+
+@media (min-width: 576px) {
+  .pk-col-sm-1  { flex: 0 0 auto; width:  8.3333%; }
+  .pk-col-sm-2  { flex: 0 0 auto; width: 16.6667%; }
+  .pk-col-sm-3  { flex: 0 0 auto; width: 25%; }
+  .pk-col-sm-4  { flex: 0 0 auto; width: 33.3333%; }
+  .pk-col-sm-5  { flex: 0 0 auto; width: 41.6667%; }
+  .pk-col-sm-6  { flex: 0 0 auto; width: 50%; }
+  .pk-col-sm-7  { flex: 0 0 auto; width: 58.3333%; }
+  .pk-col-sm-8  { flex: 0 0 auto; width: 66.6667%; }
+  .pk-col-sm-9  { flex: 0 0 auto; width: 75%; }
+  .pk-col-sm-10 { flex: 0 0 auto; width: 83.3333%; }
+  .pk-col-sm-11 { flex: 0 0 auto; width: 91.6667%; }
+  .pk-col-sm-12 { flex: 0 0 auto; width: 100%; }
+}
+
+/* ─── md  (≥768px) ───────────────────────────────────────────────── */
+
+@media (min-width: 768px) {
+  .pk-col-md-1  { flex: 0 0 auto; width:  8.3333%; }
+  .pk-col-md-2  { flex: 0 0 auto; width: 16.6667%; }
+  .pk-col-md-3  { flex: 0 0 auto; width: 25%; }
+  .pk-col-md-4  { flex: 0 0 auto; width: 33.3333%; }
+  .pk-col-md-5  { flex: 0 0 auto; width: 41.6667%; }
+  .pk-col-md-6  { flex: 0 0 auto; width: 50%; }
+  .pk-col-md-7  { flex: 0 0 auto; width: 58.3333%; }
+  .pk-col-md-8  { flex: 0 0 auto; width: 66.6667%; }
+  .pk-col-md-9  { flex: 0 0 auto; width: 75%; }
+  .pk-col-md-10 { flex: 0 0 auto; width: 83.3333%; }
+  .pk-col-md-11 { flex: 0 0 auto; width: 91.6667%; }
+  .pk-col-md-12 { flex: 0 0 auto; width: 100%; }
+}
+
+/* ─── lg  (≥992px) ───────────────────────────────────────────────── */
+
+@media (min-width: 992px) {
+  .pk-col-lg-1  { flex: 0 0 auto; width:  8.3333%; }
+  .pk-col-lg-2  { flex: 0 0 auto; width: 16.6667%; }
+  .pk-col-lg-3  { flex: 0 0 auto; width: 25%; }
+  .pk-col-lg-4  { flex: 0 0 auto; width: 33.3333%; }
+  .pk-col-lg-5  { flex: 0 0 auto; width: 41.6667%; }
+  .pk-col-lg-6  { flex: 0 0 auto; width: 50%; }
+  .pk-col-lg-7  { flex: 0 0 auto; width: 58.3333%; }
+  .pk-col-lg-8  { flex: 0 0 auto; width: 66.6667%; }
+  .pk-col-lg-9  { flex: 0 0 auto; width: 75%; }
+  .pk-col-lg-10 { flex: 0 0 auto; width: 83.3333%; }
+  .pk-col-lg-11 { flex: 0 0 auto; width: 91.6667%; }
+  .pk-col-lg-12 { flex: 0 0 auto; width: 100%; }
+}
+
+/* ─── xl  (≥1200px) ──────────────────────────────────────────────── */
+
+@media (min-width: 1200px) {
+  .pk-col-xl-1  { flex: 0 0 auto; width:  8.3333%; }
+  .pk-col-xl-2  { flex: 0 0 auto; width: 16.6667%; }
+  .pk-col-xl-3  { flex: 0 0 auto; width: 25%; }
+  .pk-col-xl-4  { flex: 0 0 auto; width: 33.3333%; }
+  .pk-col-xl-5  { flex: 0 0 auto; width: 41.6667%; }
+  .pk-col-xl-6  { flex: 0 0 auto; width: 50%; }
+  .pk-col-xl-7  { flex: 0 0 auto; width: 58.3333%; }
+  .pk-col-xl-8  { flex: 0 0 auto; width: 66.6667%; }
+  .pk-col-xl-9  { flex: 0 0 auto; width: 75%; }
+  .pk-col-xl-10 { flex: 0 0 auto; width: 83.3333%; }
+  .pk-col-xl-11 { flex: 0 0 auto; width: 91.6667%; }
+  .pk-col-xl-12 { flex: 0 0 auto; width: 100%; }
+}
+
+/* ─── Utility helpers ────────────────────────────────────────────── */
+
+/* Vertical alignment in row */
+.pk-row--align-top    { align-items: flex-start; }
+.pk-row--align-center { align-items: center; }
+.pk-row--align-bottom { align-items: flex-end; }
+.pk-row--align-stretch { align-items: stretch; }
+
+/* Horizontal justification */
+.pk-row--justify-start   { justify-content: flex-start; }
+.pk-row--justify-center  { justify-content: center; }
+.pk-row--justify-end     { justify-content: flex-end; }
+.pk-row--justify-between { justify-content: space-between; }
+.pk-row--justify-around  { justify-content: space-around; }
+
+/* Column-level vertical alignment */
+.pk-col--align-top    { align-self: flex-start; }
+.pk-col--align-center { align-self: center; }
+.pk-col--align-bottom { align-self: flex-end; }

package/styles/pk-icon-font.css

@@ -0,0 +1,67 @@
+/**
+ * Material Symbols styles for ngx-pk-ui.
+ *
+ * Resolution order:
+ * 1) Use locally installed Material Symbols fonts when available
+ * 2) Fallback to Google-hosted font files
+ */
+
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  font-weight: 100 700;
+  font-display: swap;
+  src:
+    local('Material Symbols Outlined'),
+    url('https://fonts.gstatic.com/s/materialsymbolsoutlined/v326/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOem.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Material Symbols Rounded';
+  font-style: normal;
+  font-weight: 100 700;
+  font-display: swap;
+  src:
+    local('Material Symbols Rounded'),
+    url('https://fonts.gstatic.com/s/materialsymbolsrounded/v328/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDB_Qb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxI.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Material Symbols Sharp';
+  font-style: normal;
+  font-weight: 100 700;
+  font-display: swap;
+  src:
+    local('Material Symbols Sharp'),
+    url('https://fonts.gstatic.com/s/materialsymbolssharp/v323/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReaU4bHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCO.ttf') format('truetype');
+}
+
+.material-symbols-outlined,
+.material-symbols-rounded,
+.material-symbols-sharp {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: 'liga';
+}
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+}
+
+.material-symbols-rounded {
+  font-family: 'Material Symbols Rounded';
+}
+
+.material-symbols-sharp {
+  font-family: 'Material Symbols Sharp';
+}

package/styles/pk-spinner.css

@@ -0,0 +1,96 @@
+/**
+ * pk-spinner — Loading spinner CSS for ngx-pk-ui
+ *
+ * Sizes:    pk-spinner-sm | pk-spinner-md (default) | pk-spinner-lg | pk-spinner-xl
+ * Display:  pk-spinner-inline (sits inline with text)
+ * Colors:   pk-spinner-primary (default) | pk-spinner-secondary
+ *           pk-spinner-success | pk-spinner-error | pk-spinner-white
+ *
+ * Usage:
+ *   <span class="pk-spinner"></span>
+ *   <span class="pk-spinner pk-spinner-lg pk-spinner-success"></span>
+ *   Loading... <span class="pk-spinner pk-spinner-sm pk-spinner-inline"></span>
+ *
+ * Accessible usage:
+ *   <span class="pk-spinner" role="status" aria-label="Loading"></span>
+ */
+
+/* ─── Keyframe ────────────────────────────────────────────────────── */
+
+@keyframes pk-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ─── Base ────────────────────────────────────────────────────────── */
+
+.pk-spinner {
+  display: block;
+  width: 24px;   /* md default */
+  height: 24px;
+  border-radius: 50%;
+  border: 3px solid rgba(25, 118, 210, 0.2);
+  border-top-color: var(--pk-btn-primary, #1976d2);
+  animation: pk-spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+/* ─── Sizes ───────────────────────────────────────────────────────── */
+
+.pk-spinner-sm {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+
+.pk-spinner-md {
+  width: 24px;
+  height: 24px;
+  border-width: 3px;
+}
+
+.pk-spinner-lg {
+  width: 36px;
+  height: 36px;
+  border-width: 4px;
+}
+
+.pk-spinner-xl {
+  width: 48px;
+  height: 48px;
+  border-width: 5px;
+}
+
+/* ─── Inline ──────────────────────────────────────────────────────── */
+
+.pk-spinner-inline {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 6px;
+}
+
+/* ─── Color variants ──────────────────────────────────────────────── */
+
+.pk-spinner-primary {
+  border-color: rgba(25, 118, 210, 0.2);
+  border-top-color: var(--pk-btn-primary, #1976d2);
+}
+
+.pk-spinner-secondary {
+  border-color: rgba(117, 117, 117, 0.2);
+  border-top-color: var(--pk-btn-secondary, #757575);
+}
+
+.pk-spinner-success {
+  border-color: rgba(67, 160, 71, 0.2);
+  border-top-color: var(--pk-btn-success, #43a047);
+}
+
+.pk-spinner-error {
+  border-color: rgba(229, 57, 53, 0.2);
+  border-top-color: var(--pk-btn-error, #e53935);
+}
+
+.pk-spinner-white {
+  border-color: rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+}

package/styles/pk-ui.css

@@ -0,0 +1,18 @@
+/**
+ * pk-ui.css — single entry point for all ngx-pk-ui styles
+ *
+ * Import this one file to get everything:
+ *
+ *   Angular (angular.json):
+ *     "styles": ["node_modules/ngx-pk-ui/styles/pk-ui.css"]
+ *
+ *   CSS / SCSS:
+ *     @import 'ngx-pk-ui/styles/pk-ui.css';
+ */
+
+@import './pk-grid.css';
+@import './pk-btn.css';
+@import './pk-spinner.css';
+@import './pk-badge.css';
+@import './pk-card.css';
+@import './pk-icon-font.css';