sdga-ui 1.0.2 → 1.0.4

package/demo-angular/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "demo-angular",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve -o",
+    "build": "ng build",
+    "build:prod": "ng build --configuration production",
+    "deploy": "ng deploy --base-href=/dga-ui/",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
+  "private": true,
+  "packageManager": "npm@11.6.3",
+  "dependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "@ngx-translate/core": "^17.0.0",
+    "@ngx-translate/http-loader": "^17.0.0",
+    "highlight.js": "^11.11.1",
+    "rxjs": "~7.8.0",
+    "sdga-ui": "^1.0.3",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^21.0.1",
+    "@angular/cli": "^21.0.1",
+    "@angular/compiler-cli": "^21.0.0",
+    "angular-cli-ghpages": "^2.0.3",
+    "jsdom": "^27.1.0",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
+  }
+}

package/demo-angular/public/i18n/ar.json

@@ -0,0 +1,239 @@
+{
+  "app": {
+    "title": "مكتبة مكونات SDGA",
+    "tagline": "مكتبة المكونات",
+    "version": "الإصدار 0.0.1"
+  },
+  "nav": {
+    "getting_started": "البدء",
+    "components": "المكونات",
+    "home": "الرئيسية",
+    "alerts": "التنبيهات",
+    "buttons": "الأزرار",
+    "cards": "البطاقات",
+    "forms": "النماذج",
+    "tables": "الجداول",
+    "toasts": "الإشعارات",
+    "links": "الروابط",
+    "utilities": "الأدوات",
+    "all_components": "جميع المكونات"
+  },
+  "common": {
+    "toggle_menu": "تبديل القائمة",
+    "toggle_language": "English",
+    "close": "إغلاق"
+  },
+  "home": {
+    "title": "نظام تصميم SDGA",
+    "subtitle": "مكونات Bootstrap 5.3 الكاملة بتصميم SDGA",
+    "alerts_desc": "رسائل التنبيه بحالات متعددة",
+    "buttons_desc": "مكونات الأزرار التفاعلية",
+    "cards_desc": "بطاقات المحتوى مع الرموز والإجراءات",
+    "forms_desc": "حقول الإدخال وعناصر التحكم في النماذج",
+    "tables_desc": "جداول البيانات مع الفرز",
+    "toasts_desc": "إشعارات منبثقة مع إجراءات",
+    "utilities_desc": "الألوان والظلال والمسافات"
+  },
+  "alerts": {
+    "title": "التنبيهات",
+    "subtitle": "مكونات التنبيه من Bootstrap بتصميم SDGA",
+    "section_variants": "أنواع التنبيهات",
+    "section_dismissible": "تنبيه قابل للإغلاق",
+    "primary": "رئيسي!",
+    "primary_text": "هذا تنبيه رئيسي بلون SDGA الأخضر.",
+    "secondary": "ثانوي!",
+    "secondary_text": "هذا تنبيه ثانوي بلون SDGA الذهبي.",
+    "success": "نجاح!",
+    "success_text": "تم إكمال العملية بنجاح.",
+    "danger": "خطر!",
+    "danger_text": "حدث خطأ أثناء معالجة طلبك.",
+    "warning": "تحذير!",
+    "warning_text": "يرجى مراجعة المدخلات قبل المتابعة.",
+    "info": "معلومات!",
+    "info_text": "إليك بعض المعلومات المفيدة لك.",
+    "lavender": "لافندر!",
+    "lavender_text": "هذا متغير تنبيه لافندر مخصص.",
+    "neutral": "محايد!",
+    "neutral_text": "هذه رسالة معلومات محايدة.",
+    "dismissible_title": "يا إلهي!",
+    "dismissible_text": "يجب عليك التحقق من بعض هذه الحقول أدناه."
+  },
+  "buttons": {
+    "title": "الأزرار",
+    "subtitle": "مكونات الأزرار من Bootstrap بتصميم SDGA",
+    "section_solid": "الأزرار المصمتة",
+    "section_outline": "الأزرار المحددة",
+    "section_sizes": "أحجام الأزرار",
+    "section_states": "حالات الأزرار",
+    "section_icons": "أزرار مع أيقونات",
+    "section_icon_only": "أزرار الأيقونات فقط",
+    "section_dropdown": "أزرار القائمة المنسدلة",
+    "primary": "رئيسي",
+    "neutral": "محايد",
+    "secondary": "ثانوي",
+    "danger": "خطر",
+    "large": "زر كبير",
+    "default": "زر افتراضي",
+    "small": "زر صغير",
+    "extra_small": "زر صغير جداً",
+    "normal": "عادي",
+    "active": "نشط",
+    "disabled": "معطل",
+    "download": "تنزيل",
+    "upload": "رفع",
+    "edit": "تعديل",
+    "delete": "حذف",
+    "save": "حفظ",
+    "search": "بحث",
+    "settings": "الإعدادات",
+    "add": "إضافة",
+    "next": "التالي",
+    "previous": "السابق",
+    "dropdown_primary": "قائمة رئيسية",
+    "dropdown_neutral": "قائمة محايدة",
+    "dropdown_secondary": "قائمة ثانوية",
+    "dropdown_danger": "قائمة خطر",
+    "dropdown_outline": "قائمة محددة",
+    "dropdown_action": "إجراء",
+    "dropdown_another": "إجراء آخر",
+    "dropdown_something": "شيء آخر هنا"
+  },
+  "cards": {
+    "title": "البطاقات",
+    "subtitle": "مكونات البطاقات من Bootstrap بتصميم SDGA",
+    "section_examples": "أمثلة البطاقات",
+    "card_title": "عنوان البطاقة",
+    "card_text": "قم بضبط تفضيلاتك وإعداداتك هنا.",
+    "action": "إجراء",
+    "action_secondary": "إجراء ثانوي",
+    "select_card": "اختر البطاقة",
+    "expandable_title": "عنوان البطاقة",
+    "expandable_text": "قم بضبط تفضيلاتك وإعداداتك هنا.",
+    "expanded_content": "هذا محتوى إضافي يظهر عند توسيع البطاقة. يمكنك إضافة أي محتوى هنا.",
+    "detail_1": "معلومات تفصيلية 1",
+    "detail_2": "معلومات تفصيلية 2",
+    "detail_3": "معلومات تفصيلية 3",
+    "cancel": "إلغاء",
+    "go_somewhere": "اذهب إلى مكان ما",
+    "view_details": "عرض التفاصيل"
+  },
+  "forms": {
+    "title": "النماذج",
+    "subtitle": "مكونات النماذج من Bootstrap بتصميم SDGA",
+    "checkboxes": "مربعات الاختيار",
+    "checkbox_default": "مربع اختيار افتراضي",
+    "checkbox_checked": "مربع اختيار محدد",
+    "checkbox_disabled": "مربع اختيار معطل",
+    "checkbox_disabled_checked": "مربع اختيار معطل ومحدد",
+    "radios": "أزرار الاختيار",
+    "radio_default": "زر اختيار افتراضي",
+    "radio_second": "زر اختيار افتراضي ثاني",
+    "radio_disabled": "زر اختيار معطل",
+    "radio_disabled_checked": "زر اختيار معطل ومحدد",
+    "switches": "مفاتيح التبديل",
+    "switch_default": "مفتاح افتراضي",
+    "switch_disabled": "مفتاح معطل",
+    "switch_checked": "مفتاح محدد",
+    "text_inputs": "حقول النص",
+    "select": "القائمة المنسدلة",
+    "select_default": "افتح هذه القائمة المنسدلة",
+    "select_option_1": "واحد",
+    "select_option_2": "اثنان",
+    "select_option_3": "ثلاثة",
+    "range": "المدى",
+    "input_sizes": "أحجام الحقول",
+    "large_input": "حقل كبير",
+    "default_input": "حقل افتراضي",
+    "small_input": "حقل صغير",
+    "actions": "الإجراءات",
+    "submit": "إرسال",
+    "reset": "إعادة تعيين"
+  },
+  "tables": {
+    "title": "الجداول",
+    "subtitle": "مكونات الجداول من Bootstrap بتصميم SDGA",
+    "section_default": "الجدول الافتراضي",
+    "section_striped": "جدول مخطط وقابل للتمرير",
+    "header_name": "الاسم",
+    "header_email": "البريد الإلكتروني",
+    "header_role": "الدور",
+    "header_status": "الحالة"
+  },
+  "toasts": {
+    "title": "الإشعارات",
+    "subtitle": "إشعارات Toast من Bootstrap بتصميم SDGA",
+    "section_basic": "الإشعارات الأساسية",
+    "section_with_footer": "إشعارات مع تذييل",
+    "section_variants": "جميع أنواع الإشعارات",
+    "show_all": "إظهار جميع الإشعارات",
+    "primary": "إشعار رئيسي",
+    "primary_text": "هذا إشعار رئيسي مع معلومات إضافية.",
+    "secondary": "إشعار ثانوي",
+    "secondary_text": "هذا إشعار ثانوي مع معلومات إضافية.",
+    "success": "إشعار نجاح",
+    "success_text": "تم إكمال العملية بنجاح!",
+    "danger": "إشعار خطر",
+    "danger_text": "حدث خطأ. يرجى المحاولة مرة أخرى.",
+    "warning": "إشعار تحذير",
+    "warning_text": "يرجى مراجعة هذه المعلومات بعناية.",
+    "info": "إشعار معلومات",
+    "info_text": "إليك بعض المعلومات المفيدة لك.",
+    "lavender": "إشعار لافندر",
+    "lavender_text": "هذا إشعار لافندر خاص.",
+    "neutral": "إشعار محايد",
+    "neutral_text": "هذه رسالة إشعار محايدة.",
+    "action": "إجراء",
+    "dismiss": "إغلاق"
+  },
+  "utilities": {
+    "title": "الأدوات",
+    "subtitle": "فئات الأدوات من Bootstrap بتصميم SDGA",
+    "section_colors": "أدوات الألوان"
+  },
+  "bootstrap": {
+    "title": "عرض مكونات Bootstrap 5.3",
+    "subtitle": "عرض كامل لجميع مكونات Bootstrap بتصميم SDGA"
+  },
+  "links": {
+    "title": "الروابط",
+    "subtitle": "أدوات الروابط من Bootstrap وأنماط الروابط المخصصة",
+    "section_basic": "ألوان الروابط الأساسية",
+    "section_underline": "أدوات التسطير",
+    "section_hover": "حالات التمرير",
+    "section_offset": "إزاحة التسطير",
+    "section_icons": "روابط مع أيقونات",
+    "section_custom": "أنماط روابط مخصصة",
+    "primary_link": "رابط رئيسي",
+    "secondary_link": "رابط ثانوي",
+    "success_link": "رابط نجاح",
+    "danger_link": "رابط خطر",
+    "warning_link": "رابط تحذير",
+    "info_link": "رابط معلومات",
+    "underline_link": "رابط مع تسطير",
+    "no_underline": "رابط بدون تسطير",
+    "underline_25": "رابط مع شفافية تسطير 25%",
+    "underline_50": "رابط مع شفافية تسطير 50%",
+    "underline_75": "رابط مع شفافية تسطير 75%",
+    "underline_100": "رابط مع شفافية تسطير 100%",
+    "hover_underline": "تسطير عند التمرير",
+    "hover_remove": "إزالة التسطير عند التمرير",
+    "offset_1": "رابط مع إزاحة 1 بكسل",
+    "offset_2": "رابط مع إزاحة 2 بكسل",
+    "offset_3": "رابط مع إزاحة 3 بكسل",
+    "link_with_icon": "رابط مع أيقونة",
+    "external_link": "رابط خارجي",
+    "arrow_link": "رابط مع سهم",
+    "subtle_link": "نمط رابط خفيف",
+    "bold_link": "نمط رابط عريض",
+    "decorated_link": "رابط مع تسطير متحرك"
+  },
+  "code": {
+    "show": "إظهار الكود",
+    "hide": "إخفاء الكود",
+    "copy": "نسخ الكود",
+    "copied": "تم النسخ!",
+    "html": "HTML",
+    "ts": "TypeScript",
+    "scss": "SCSS"
+  }
+}

package/demo-angular/public/i18n/en.json

@@ -0,0 +1,239 @@
+{
+  "app": {
+    "title": "SDGA Component UI",
+    "tagline": "Component Library",
+    "version": "v0.0.1"
+  },
+  "nav": {
+    "getting_started": "Getting Started",
+    "components": "Components",
+    "home": "Home",
+    "alerts": "Alerts",
+    "buttons": "Buttons",
+    "cards": "Cards",
+    "forms": "Forms",
+    "tables": "Tables",
+    "toasts": "Toasts",
+    "links": "Links",
+    "utilities": "Utilities",
+    "all_components": "All Components"
+  },
+  "common": {
+    "toggle_menu": "Toggle Menu",
+    "toggle_language": "العربية",
+    "close": "Close"
+  },
+  "home": {
+    "title": "SDGA Design System",
+    "subtitle": "Complete Bootstrap 5.3 components styled with SDGA theme",
+    "alerts_desc": "Alert messages with various states",
+    "buttons_desc": "Interactive button components",
+    "cards_desc": "Content cards with icons and actions",
+    "forms_desc": "Input fields and form controls",
+    "tables_desc": "Data tables with sorting",
+    "toasts_desc": "Toast notifications with actions",
+    "utilities_desc": "Colors, shadows, and spacing"
+  },
+  "alerts": {
+    "title": "Alerts",
+    "subtitle": "Bootstrap alert components styled with SDGA theme",
+    "section_variants": "Alert Variants",
+    "section_dismissible": "Dismissible Alert",
+    "primary": "Primary!",
+    "primary_text": "This is a primary alert with SDGA green color.",
+    "secondary": "Secondary!",
+    "secondary_text": "This is a secondary alert with SDGA gold color.",
+    "success": "Success!",
+    "success_text": "Your action was completed successfully.",
+    "danger": "Danger!",
+    "danger_text": "There was an error processing your request.",
+    "warning": "Warning!",
+    "warning_text": "Please review your input before proceeding.",
+    "info": "Info!",
+    "info_text": "Here's some helpful information for you.",
+    "lavender": "Lavender!",
+    "lavender_text": "This is a custom lavender alert variant.",
+    "neutral": "Neutral!",
+    "neutral_text": "This is a neutral informational message.",
+    "dismissible_title": "Holy guacamole!",
+    "dismissible_text": "You should check in on some of those fields below."
+  },
+  "buttons": {
+    "title": "Buttons",
+    "subtitle": "Bootstrap button components styled with SDGA theme",
+    "section_solid": "Solid Buttons",
+    "section_outline": "Outline Buttons",
+    "section_sizes": "Button Sizes",
+    "section_states": "Button States",
+    "section_icons": "Buttons with Icons",
+    "section_icon_only": "Icon-Only Buttons",
+    "section_dropdown": "Dropdown Buttons",
+    "primary": "Primary",
+    "neutral": "Neutral",
+    "secondary": "Secondary",
+    "danger": "Danger",
+    "large": "Large button",
+    "default": "Default button",
+    "small": "Small button",
+    "extra_small": "Extra small",
+    "normal": "Normal",
+    "active": "Active",
+    "disabled": "Disabled",
+    "download": "Download",
+    "upload": "Upload",
+    "edit": "Edit",
+    "delete": "Delete",
+    "save": "Save",
+    "search": "Search",
+    "settings": "Settings",
+    "add": "Add",
+    "next": "Next",
+    "previous": "Previous",
+    "dropdown_primary": "Primary Dropdown",
+    "dropdown_neutral": "Neutral Dropdown",
+    "dropdown_secondary": "Secondary Dropdown",
+    "dropdown_danger": "Danger Dropdown",
+    "dropdown_outline": "Outline Dropdown",
+    "dropdown_action": "Action",
+    "dropdown_another": "Another action",
+    "dropdown_something": "Something else here"
+  },
+  "cards": {
+    "title": "Cards",
+    "subtitle": "Bootstrap card components styled with SDGA theme",
+    "section_examples": "Card Examples",
+    "card_title": "Card Title",
+    "card_text": "Adjust your preferences and settings here.",
+    "action": "Action",
+    "action_secondary": "Action",
+    "select_card": "Select card",
+    "expandable_title": "Expandable Card",
+    "expandable_text": "Click the arrow to expand this card and see more content.",
+    "expanded_content": "This is additional content that appears when the card is expanded. You can add any content here.",
+    "detail_1": "Detail item 1",
+    "detail_2": "Detail item 2",
+    "detail_3": "Detail item 3",
+    "cancel": "Cancel",
+    "go_somewhere": "Go somewhere",
+    "view_details": "View Details"
+  },
+  "forms": {
+    "title": "Forms",
+    "subtitle": "Bootstrap form components styled with SDGA theme",
+    "checkboxes": "Checkboxes",
+    "checkbox_default": "Default checkbox",
+    "checkbox_checked": "Checked checkbox",
+    "checkbox_disabled": "Disabled checkbox",
+    "checkbox_disabled_checked": "Disabled checked checkbox",
+    "radios": "Radios",
+    "radio_default": "Default radio",
+    "radio_second": "Second default radio",
+    "radio_disabled": "Disabled radio",
+    "radio_disabled_checked": "Disabled checked radio",
+    "switches": "Switches",
+    "switch_default": "Default switch",
+    "switch_disabled": "Disabled switch",
+    "switch_checked": "Checked switch",
+    "text_inputs": "Text Inputs",
+    "select": "Select",
+    "select_default": "Open this select menu",
+    "select_option_1": "One",
+    "select_option_2": "Two",
+    "select_option_3": "Three",
+    "range": "Range",
+    "input_sizes": "Input Sizes",
+    "large_input": "Large input",
+    "default_input": "Default input",
+    "small_input": "Small input",
+    "actions": "Actions",
+    "submit": "Submit",
+    "reset": "Reset"
+  },
+  "tables": {
+    "title": "Tables",
+    "subtitle": "Bootstrap table components styled with SDGA theme",
+    "section_default": "Default Table",
+    "section_striped": "Striped & Hoverable Table",
+    "header_name": "Name",
+    "header_email": "Email",
+    "header_role": "Role",
+    "header_status": "Status"
+  },
+  "toasts": {
+    "title": "Toasts",
+    "subtitle": "Bootstrap toast notifications styled with SDGA theme",
+    "section_basic": "Basic Toasts",
+    "section_with_footer": "Toasts with Footer",
+    "section_variants": "All Toast Variants",
+    "show_all": "Show All Toasts",
+    "primary": "Primary Toast",
+    "primary_text": "This is a primary toast message with additional information.",
+    "secondary": "Secondary Toast",
+    "secondary_text": "This is a secondary toast message with additional information.",
+    "success": "Success Toast",
+    "success_text": "Your action has been completed successfully!",
+    "danger": "Danger Toast",
+    "danger_text": "An error occurred. Please try again.",
+    "warning": "Warning Toast",
+    "warning_text": "Please review this information carefully.",
+    "info": "Information Toast",
+    "info_text": "Here's some helpful information for you.",
+    "lavender": "Lavender Toast",
+    "lavender_text": "This is a special lavender notification.",
+    "neutral": "Neutral Toast",
+    "neutral_text": "This is a neutral notification message.",
+    "action": "Action",
+    "dismiss": "Dismiss"
+  },
+  "utilities": {
+    "title": "Utilities",
+    "subtitle": "Bootstrap utility classes styled with SDGA theme",
+    "section_colors": "Color Utilities"
+  },
+  "bootstrap": {
+    "title": "Bootstrap 5.3 Components Showcase",
+    "subtitle": "Complete demonstration of all Bootstrap components styled with SDGA theme"
+  },
+  "links": {
+    "title": "Links",
+    "subtitle": "Bootstrap link utilities and custom link styles",
+    "section_basic": "Basic Link Colors",
+    "section_underline": "Underline Utilities",
+    "section_hover": "Hover States",
+    "section_offset": "Underline Offset",
+    "section_icons": "Links with Icons",
+    "section_custom": "Custom Link Styles",
+    "primary_link": "Primary link",
+    "secondary_link": "Secondary link",
+    "success_link": "Success link",
+    "danger_link": "Danger link",
+    "warning_link": "Warning link",
+    "info_link": "Info link",
+    "underline_link": "Link with underline",
+    "no_underline": "Link without underline",
+    "underline_25": "Link with 25% underline opacity",
+    "underline_50": "Link with 50% underline opacity",
+    "underline_75": "Link with 75% underline opacity",
+    "underline_100": "Link with 100% underline opacity",
+    "hover_underline": "Underline on hover",
+    "hover_remove": "Remove underline on hover",
+    "offset_1": "Link with 1px offset",
+    "offset_2": "Link with 2px offset",
+    "offset_3": "Link with 3px offset",
+    "link_with_icon": "Link with icon",
+    "external_link": "External link",
+    "arrow_link": "Link with arrow",
+    "subtle_link": "Subtle link style",
+    "bold_link": "Bold link style",
+    "decorated_link": "Animated underline link"
+  },
+  "code": {
+    "show": "Show Code",
+    "hide": "Hide Code",
+    "copy": "Copy Code",
+    "copied": "Copied!",
+    "html": "HTML",
+    "ts": "TypeScript",
+    "scss": "SCSS"
+  }
+}

package/demo-angular/src/app/app.config.ts

@@ -0,0 +1,20 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection, importProvidersFrom } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient, withFetch } from '@angular/common/http';
+import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';
+
+import { routes } from './app.routes';
+import { provideTranslateService } from '@ngx-translate/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZonelessChangeDetection(),
+    provideRouter(routes),
+    provideHttpClient(withFetch()),
+    provideTranslateService({
+      loader: provideTranslateHttpLoader({prefix:'./i18n/', suffix:'.json'}),
+      fallbackLang: 'en'
+    })
+  ]
+};

package/demo-angular/src/app/app.html

@@ -0,0 +1,52 @@
+<div class="app-layout" [class.sidebar-collapsed]="!sidebarOpen()">
+  <!-- Sidebar -->
+  <aside class="sidebar">
+    <div class="sidebar-header">
+      <h1 class="logo">SDGA</h1>
+      <p class="tagline">{{ 'app.tagline' | translate }}</p>
+    </div>
+
+    <nav class="sidebar-nav">
+      @for (group of menuItems; track group.groupKey) {
+        <div class="nav-group">
+          <h3 class="nav-group-title">{{ group.groupKey | translate }}</h3>
+          <ul class="nav-list">
+            @for (item of group.items; track item.id) {
+              <li 
+                class="nav-item" 
+                [class.active]="router.url === item.route"
+                (click)="navigateTo(item.route)"
+              >
+                <span class="nav-icon">{{ item.icon }}</span>
+                <span class="nav-label">{{ item.labelKey | translate }}</span>
+              </li>
+            }
+          </ul>
+        </div>
+      }
+    </nav>
+
+    <div class="sidebar-footer">
+      <p class="version">{{ 'app.version' | translate }}</p>
+    </div>
+  </aside>
+
+  <!-- Main Content -->
+  <main class="main-content">
+    <header class="top-bar">
+      <button class="menu-toggle" (click)="toggleSidebar()" [attr.aria-label]="'common.toggle_menu' | translate">
+        <span class="hamburger">☰</span>
+      </button>
+      <h2 class="page-title">{{ 'app.title' | translate }}</h2>
+      <div class="top-bar-actions">
+        <button class="btn btn-sm btn-outline-primary" (click)="toggleLanguage()" [attr.aria-label]="'common.toggle_language' | translate">
+          {{ 'common.toggle_language' | translate }}
+        </button>
+      </div>
+    </header>
+
+    <div class="content-area">
+      <router-outlet />
+    </div>
+  </main>
+</div>

package/demo-angular/src/app/app.routes.ts

@@ -0,0 +1,45 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'home',
+    pathMatch: 'full'
+  },
+  {
+    path: 'home',
+    loadComponent: () => import('./views/home/home.component').then(m => m.HomeComponent)
+  },
+  {
+    path: 'alerts',
+    loadComponent: () => import('./views/alerts/alerts.component').then(m => m.AlertsComponent)
+  },
+  {
+    path: 'buttons',
+    loadComponent: () => import('./views/buttons/buttons.component').then(m => m.ButtonsComponent)
+  },
+  {
+    path: 'cards',
+    loadComponent: () => import('./views/cards/cards.component').then(m => m.CardsComponent)
+  },
+  {
+    path: 'forms',
+    loadComponent: () => import('./views/forms/forms.component').then(m => m.FormsComponent)
+  },
+  {
+    path: 'tables',
+    loadComponent: () => import('./views/tables/tables.component').then(m => m.TablesComponent)
+  },
+  {
+    path: 'toasts',
+    loadComponent: () => import('./views/toasts/toasts.component').then(m => m.ToastsComponent)
+  },
+  {
+    path: 'bootstrap',
+    loadComponent: () => import('./views/bootstrap/bootstrap.component').then(m => m.BootstrapComponent)
+  },
+  {
+    path: 'links',
+    loadComponent: () => import('./views/links/links.component').then(m => m.LinksComponent)
+  }
+];