@dso-design-system/ui 0.1.0 → 0.1.1

package/lib/badge/badge.directive.d.ts

@@ -0,0 +1,15 @@
+import { ElementRef, Renderer2, OnChanges, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class BadgeDirective implements OnChanges {
+    private el;
+    private renderer;
+    label: string | number | null;
+    badgeColor: 'info' | 'success' | 'warning' | 'danger';
+    private badgeEl;
+    constructor(el: ElementRef, // Reference to the host element (the one with [dsoDirectiveBadge])
+    renderer: Renderer2);
+    ngOnChanges(changes: SimpleChanges): void;
+    private updateBadge;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BadgeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BadgeDirective, "[dsoDirectiveBadge]", never, { "label": { "alias": "dsoDirectiveBadge"; "required": false; }; "badgeColor": { "alias": "badgeColor"; "required": false; }; }, {}, never, never, true, never>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-design-system/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "repository": {
     "type": "git",
     "url": "https://singaporedso@dev.azure.com/singaporedso/Design%20Systems/_git/DesignSystem"

package/public-api.d.ts

@@ -1,11 +1,11 @@
 export * from './lib/alert/alert.component';
 export * from './lib/badge/badge.component';
+export * from './lib/badge/badge.directive';
 export * from './lib/breadcrumb/breadcrumb.component';
 export * from './lib/button/button.component';
 export * from './lib/checkbox/checkbox.component';
 export * from './lib/datepicker/datepicker.component';
 export * from './lib/dialog/dialog.component';
-export * from './lib/directives/truncate.directive';
 export * from './lib/dropdown-list/dropdown-list.component';
 export * from './lib/file-upload-items/file-upload-items.component';
 export * from './lib/file-upload-multiple/file-upload-multiple.component';
@@ -20,8 +20,10 @@ export * from './lib/side-navigation-bar/side-navigation-bar.component';
 export * from './lib/spinner/spinner.component';
 export * from './lib/table/table.component';
 export * from './lib/tabs/tabs.component';
+export * from './lib/tabs/tab.component';
 export * from './lib/tag/tag.component';
 export * from './lib/text-area/text-area.component';
 export * from './lib/toast/toast.component';
 export * from './lib/tooltip/tooltip.component';
+export * from './lib/tooltip/tooltip.directive';
 export * from './lib/top-navigation-bar/top-navigation-bar.component';

package/esm2022/lib/directives/truncate.directive.mjs

@@ -1,71 +0,0 @@
-import { Directive, Input, HostListener } from '@angular/core';
-import * as i0 from "@angular/core";
-export class DsoTruncateDirective {
-    el;
-    /**
-     * Enable or disable truncation.
-     * Can be used as `<div dsoTruncate>` (enabled by default) or `[dsoTruncate]="false"`.
-     */
-    enableTruncate = true;
-    /** Optional: override tooltip text when text is truncated */
-    truncateTooltipText;
-    constructor(el) {
-        this.el = el;
-    }
-    /** Initialize truncation after the view is loaded */
-    ngAfterViewInit() {
-        if (this.enableTruncate) {
-            this.applyTruncationStyles();
-            this.updateTooltip();
-        }
-    }
-    /** Re-check overflow and update tooltip on window resize */
-    onResize() {
-        if (this.enableTruncate) {
-            this.updateTooltip();
-        }
-    }
-    // -------------------------
-    // PRIVATE METHODS
-    // -------------------------
-    /** Apply CSS styles necessary for truncation */
-    applyTruncationStyles() {
-        const element = this.el.nativeElement;
-        element.style.whiteSpace = 'nowrap';
-        element.style.overflow = 'hidden';
-        element.style.textOverflow = 'ellipsis';
-        element.style.display = 'inline-block';
-        element.style.maxWidth = '100%';
-    }
-    /** Update tooltip based on overflow state */
-    updateTooltip() {
-        const el = this.el.nativeElement;
-        const isOverflowing = el.scrollWidth > el.clientWidth;
-        if (isOverflowing) {
-            // Add or update tooltip with either the provided text or element content
-            el.setAttribute('dsoDirectiveTooltip', this.truncateTooltipText || el.textContent || '');
-        }
-        else {
-            // Remove tooltip if content fits
-            el.removeAttribute('dsoDirectiveTooltip');
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DsoTruncateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DsoTruncateDirective, isStandalone: true, selector: "[dsoTruncate]", inputs: { enableTruncate: ["dsoTruncate", "enableTruncate"], truncateTooltipText: "truncateTooltipText" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DsoTruncateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[dsoTruncate]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { enableTruncate: [{
-                type: Input,
-                args: ['dsoTruncate']
-            }], truncateTooltipText: [{
-                type: Input
-            }], onResize: [{
-                type: HostListener,
-                args: ['window:resize']
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJ1bmNhdGUuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWkvc3JjL2xpYi9kaXJlY3RpdmVzL3RydW5jYXRlLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLEtBQUssRUFBaUIsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQU0xRixNQUFNLE9BQU8sb0JBQW9CO0lBV1g7SUFUcEI7OztPQUdHO0lBQ21CLGNBQWMsR0FBaUIsSUFBSSxDQUFDO0lBRTFELDZEQUE2RDtJQUNwRCxtQkFBbUIsQ0FBVTtJQUV0QyxZQUFvQixFQUEyQjtRQUEzQixPQUFFLEdBQUYsRUFBRSxDQUF5QjtJQUFHLENBQUM7SUFFbkQscURBQXFEO0lBQ3JELGVBQWU7UUFDYixJQUFJLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN4QixJQUFJLENBQUMscUJBQXFCLEVBQUUsQ0FBQztZQUM3QixJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDdkIsQ0FBQztJQUNILENBQUM7SUFFRCw0REFBNEQ7SUFFNUQsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3hCLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztRQUN2QixDQUFDO0lBQ0gsQ0FBQztJQUVELDRCQUE0QjtJQUM1QixrQkFBa0I7SUFDbEIsNEJBQTRCO0lBRTVCLGdEQUFnRDtJQUN4QyxxQkFBcUI7UUFDM0IsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUM7UUFDdEMsT0FBTyxDQUFDLEtBQUssQ0FBQyxVQUFVLEdBQUcsUUFBUSxDQUFDO1FBQ3BDLE9BQU8sQ0FBQyxLQUFLLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztRQUNsQyxPQUFPLENBQUMsS0FBSyxDQUFDLFlBQVksR0FBRyxVQUFVLENBQUM7UUFDeEMsT0FBTyxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsY0FBYyxDQUFDO1FBQ3ZDLE9BQU8sQ0FBQyxLQUFLLENBQUMsUUFBUSxHQUFHLE1BQU0sQ0FBQztJQUNsQyxDQUFDO0lBRUQsNkNBQTZDO0lBQ3JDLGFBQWE7UUFDbkIsTUFBTSxFQUFFLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUM7UUFFakMsTUFBTSxhQUFhLEdBQUcsRUFBRSxDQUFDLFdBQVcsR0FBRyxFQUFFLENBQUMsV0FBVyxDQUFDO1FBRXRELElBQUksYUFBYSxFQUFFLENBQUM7WUFDbEIseUVBQXlFO1lBQ3pFLEVBQUUsQ0FBQyxZQUFZLENBQUMscUJBQXFCLEVBQUUsSUFBSSxDQUFDLG1CQUFtQixJQUFJLEVBQUUsQ0FBQyxXQUFXLElBQUksRUFBRSxDQUFDLENBQUM7UUFDM0YsQ0FBQzthQUFNLENBQUM7WUFDTixpQ0FBaUM7WUFDakMsRUFBRSxDQUFDLGVBQWUsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDO1FBQzVDLENBQUM7SUFDSCxDQUFDO3dHQXhEVSxvQkFBb0I7NEZBQXBCLG9CQUFvQjs7NEZBQXBCLG9CQUFvQjtrQkFKaEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZUFBZTtvQkFDekIsVUFBVSxFQUFFLElBQUk7aUJBQ2pCOytFQU91QixjQUFjO3NCQUFuQyxLQUFLO3VCQUFDLGFBQWE7Z0JBR1gsbUJBQW1CO3NCQUEzQixLQUFLO2dCQWNOLFFBQVE7c0JBRFAsWUFBWTt1QkFBQyxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBJbnB1dCwgQWZ0ZXJWaWV3SW5pdCwgSG9zdExpc3RlbmVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5ARGlyZWN0aXZlKHtcclxuICBzZWxlY3RvcjogJ1tkc29UcnVuY2F0ZV0nLFxyXG4gIHN0YW5kYWxvbmU6IHRydWVcclxufSlcclxuZXhwb3J0IGNsYXNzIERzb1RydW5jYXRlRGlyZWN0aXZlIGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XHJcblxyXG4gIC8qKiBcclxuICAgKiBFbmFibGUgb3IgZGlzYWJsZSB0cnVuY2F0aW9uLiAgXHJcbiAgICogQ2FuIGJlIHVzZWQgYXMgYDxkaXYgZHNvVHJ1bmNhdGU+YCAoZW5hYmxlZCBieSBkZWZhdWx0KSBvciBgW2Rzb1RydW5jYXRlXT1cImZhbHNlXCJgLlxyXG4gICAqL1xyXG4gIEBJbnB1dCgnZHNvVHJ1bmNhdGUnKSBlbmFibGVUcnVuY2F0ZTogYm9vbGVhbiB8ICcnID0gdHJ1ZTtcclxuXHJcbiAgLyoqIE9wdGlvbmFsOiBvdmVycmlkZSB0b29sdGlwIHRleHQgd2hlbiB0ZXh0IGlzIHRydW5jYXRlZCAqL1xyXG4gIEBJbnB1dCgpIHRydW5jYXRlVG9vbHRpcFRleHQ/OiBzdHJpbmc7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWw6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+KSB7fVxyXG5cclxuICAvKiogSW5pdGlhbGl6ZSB0cnVuY2F0aW9uIGFmdGVyIHRoZSB2aWV3IGlzIGxvYWRlZCAqL1xyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcclxuICAgIGlmICh0aGlzLmVuYWJsZVRydW5jYXRlKSB7XHJcbiAgICAgIHRoaXMuYXBwbHlUcnVuY2F0aW9uU3R5bGVzKCk7XHJcbiAgICAgIHRoaXMudXBkYXRlVG9vbHRpcCgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgLyoqIFJlLWNoZWNrIG92ZXJmbG93IGFuZCB1cGRhdGUgdG9vbHRpcCBvbiB3aW5kb3cgcmVzaXplICovXHJcbiAgQEhvc3RMaXN0ZW5lcignd2luZG93OnJlc2l6ZScpXHJcbiAgb25SZXNpemUoKSB7XHJcbiAgICBpZiAodGhpcy5lbmFibGVUcnVuY2F0ZSkge1xyXG4gICAgICB0aGlzLnVwZGF0ZVRvb2x0aXAoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIC8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cclxuICAvLyBQUklWQVRFIE1FVEhPRFNcclxuICAvLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXHJcblxyXG4gIC8qKiBBcHBseSBDU1Mgc3R5bGVzIG5lY2Vzc2FyeSBmb3IgdHJ1bmNhdGlvbiAqL1xyXG4gIHByaXZhdGUgYXBwbHlUcnVuY2F0aW9uU3R5bGVzKCkge1xyXG4gICAgY29uc3QgZWxlbWVudCA9IHRoaXMuZWwubmF0aXZlRWxlbWVudDtcclxuICAgIGVsZW1lbnQuc3R5bGUud2hpdGVTcGFjZSA9ICdub3dyYXAnO1xyXG4gICAgZWxlbWVudC5zdHlsZS5vdmVyZmxvdyA9ICdoaWRkZW4nO1xyXG4gICAgZWxlbWVudC5zdHlsZS50ZXh0T3ZlcmZsb3cgPSAnZWxsaXBzaXMnO1xyXG4gICAgZWxlbWVudC5zdHlsZS5kaXNwbGF5ID0gJ2lubGluZS1ibG9jayc7XHJcbiAgICBlbGVtZW50LnN0eWxlLm1heFdpZHRoID0gJzEwMCUnO1xyXG4gIH1cclxuXHJcbiAgLyoqIFVwZGF0ZSB0b29sdGlwIGJhc2VkIG9uIG92ZXJmbG93IHN0YXRlICovXHJcbiAgcHJpdmF0ZSB1cGRhdGVUb29sdGlwKCkge1xyXG4gICAgY29uc3QgZWwgPSB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQ7XHJcblxyXG4gICAgY29uc3QgaXNPdmVyZmxvd2luZyA9IGVsLnNjcm9sbFdpZHRoID4gZWwuY2xpZW50V2lkdGg7XHJcblxyXG4gICAgaWYgKGlzT3ZlcmZsb3dpbmcpIHtcclxuICAgICAgLy8gQWRkIG9yIHVwZGF0ZSB0b29sdGlwIHdpdGggZWl0aGVyIHRoZSBwcm92aWRlZCB0ZXh0IG9yIGVsZW1lbnQgY29udGVudFxyXG4gICAgICBlbC5zZXRBdHRyaWJ1dGUoJ2Rzb0RpcmVjdGl2ZVRvb2x0aXAnLCB0aGlzLnRydW5jYXRlVG9vbHRpcFRleHQgfHwgZWwudGV4dENvbnRlbnQgfHwgJycpO1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgLy8gUmVtb3ZlIHRvb2x0aXAgaWYgY29udGVudCBmaXRzXHJcbiAgICAgIGVsLnJlbW92ZUF0dHJpYnV0ZSgnZHNvRGlyZWN0aXZlVG9vbHRpcCcpO1xyXG4gICAgfVxyXG4gIH1cclxufSJdfQ==

package/lib/directives/truncate.directive.d.ts

@@ -1,23 +0,0 @@
-import { ElementRef, AfterViewInit } from '@angular/core';
-import * as i0 from "@angular/core";
-export declare class DsoTruncateDirective implements AfterViewInit {
-    private el;
-    /**
-     * Enable or disable truncation.
-     * Can be used as `<div dsoTruncate>` (enabled by default) or `[dsoTruncate]="false"`.
-     */
-    enableTruncate: boolean | '';
-    /** Optional: override tooltip text when text is truncated */
-    truncateTooltipText?: string;
-    constructor(el: ElementRef<HTMLElement>);
-    /** Initialize truncation after the view is loaded */
-    ngAfterViewInit(): void;
-    /** Re-check overflow and update tooltip on window resize */
-    onResize(): void;
-    /** Apply CSS styles necessary for truncation */
-    private applyTruncationStyles;
-    /** Update tooltip based on overflow state */
-    private updateTooltip;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DsoTruncateDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DsoTruncateDirective, "[dsoTruncate]", never, { "enableTruncate": { "alias": "dsoTruncate"; "required": false; }; "truncateTooltipText": { "alias": "truncateTooltipText"; "required": false; }; }, {}, never, never, true, never>;
-}