ng-luna 0.2.4 → 0.3.0

package/README.md

@@ -39,17 +39,39 @@ import { ButtonComponent } from 'ng-luna';
 
 ### Using Bundled Fonts
 
-The IBM Plex fonts are **automatically bundled and loaded** when you use any ng-luna component. No additional setup or configuration is required.
+The IBM Plex fonts are bundled with ng-luna and need to be copied to your application's assets folder.
 
-**Fonts are automatically available:**
-- ✅ Font files are bundled with the library
-- ✅ Fonts load automatically when you use any component
-- ✅ No imports or configuration needed
-- ✅ Works out of the box
+#### Setup
 
-**Using fonts in your own styles:**
+Add the following to your `angular.json` in the `assets` array of your project's build configuration:
 
-Since the fonts are already loaded, you can use them directly in your CSS/SCSS:
+```json
+{
+  "projects": {
+    "your-app-name": {
+      "architect": {
+        "build": {
+          "options": {
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "node_modules/ng-luna/assets/fonts",
+                "output": "/assets/fonts"
+              }
+            ]
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+This copies the font files from the ng-luna package to your application's `/assets/fonts/` directory during build.
+
+#### Using Fonts in Your Styles
+
+Once configured, you can use the fonts directly in your CSS/SCSS:
 
 ```scss
 .my-custom-class {
@@ -70,6 +92,8 @@ Since the fonts are already loaded, you can use them directly in your CSS/SCSS:
 - `'IBM Plex Mono', monospace` - Monospace font
 - `'IBM Plex Serif', serif` - Serif font
 
+**Note:** The ng-luna components will automatically use these fonts once they are available in your assets folder.
+
 ## Components
 
 All components extend the `LunaControl` base class, which provides the following common inputs available on every component:

package/controls/index.d.ts

@@ -6,6 +6,7 @@ export * from './progress/progress.component';
 export * from './radio/radio.component';
 export * from './select/select.component';
 export * from './slider/slider.component';
+export * from './tabs/tab.component';
 export * from './tabs/tabs.component';
 export * from './textarea/textarea.component';
 export * from './window/window.component';

package/controls/tabs/tab.component.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class TabComponent {
+    id: string;
+    label: string;
+    active: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabComponent, "luna-tab", never, { "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/controls/tabs/tabs.component.d.ts

@@ -1,24 +1,22 @@
-import { EventEmitter, QueryList, ElementRef, AfterViewInit } from '@angular/core';
+import { EventEmitter, QueryList, ElementRef, AfterViewInit, AfterContentInit } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
 import { LunaControl } from '../luna-control';
+import { TabComponent } from './tab.component';
 import * as i0 from "@angular/core";
-export interface Tab {
-    id: string;
-    label: string;
-    content?: string;
-}
-export declare class TabsComponent extends LunaControl implements AfterViewInit {
+export declare class TabsComponent extends LunaControl implements AfterViewInit, AfterContentInit {
     platform: Platform;
     activeTabId?: string;
-    tabs: Tab[];
     tabChange: EventEmitter<string>;
+    tabs: QueryList<TabComponent>;
     tabButtons: QueryList<ElementRef<HTMLButtonElement>>;
     private keyManager?;
     constructor(platform: Platform);
+    ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     selectTab(tabId: string): void;
     isActive(tabId: string): boolean;
+    private updateActiveTab;
     onKeyDown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "luna-tabs", never, { "activeTabId": { "alias": "activeTabId"; "required": false; }; "tabs": { "alias": "tabs"; "required": false; }; }, { "tabChange": "tabChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "luna-tabs", never, { "activeTabId": { "alias": "activeTabId"; "required": false; }; }, { "tabChange": "tabChange"; }, ["tabs"], ["*"], true, never>;
 }