ngx-oecd-ai-design-system 2.1.5

package/README.md

@@ -0,0 +1,15 @@
+# ui
+
+`ngx-oecd-ai-design-system` is the package shell for the OECD AI design system.
+
+Public components are exposed through secondary entry points:
+
+```ts
+import { OecdTabsNavComponent } from 'ngx-oecd-ai-design-system/tabs-nav';
+```
+
+Each entry point lives directly under `libs/ui/<entry-point>`. The package root intentionally exports no components, while `libs/ui/styles` is copied as a static package asset.
+
+## Running unit tests
+
+Run `npx nx test ui` to execute the unit tests.

package/fesm2022/ngx-oecd-ai-design-system-tabs-nav.mjs

@@ -0,0 +1,31 @@
+import * as i0 from '@angular/core';
+import { input, Component } from '@angular/core';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+
+class OecdTabsNavComponent {
+    $tabs = input.required({ ...(ngDevMode ? { debugName: "$tabs" } : /* istanbul ignore next */ {}), alias: 'tabs' });
+    onTabClick(event, tab) {
+        event.preventDefault();
+        if (tab.disabled) {
+            return;
+        }
+        const tabs = this.$tabs();
+        tabs.forEach((currentTab) => {
+            currentTab.active = currentTab.type === tab.type;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OecdTabsNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: OecdTabsNavComponent, isStandalone: true, selector: "oecd-tabs-nav", inputs: { $tabs: { classPropertyName: "$tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let tabs = $tabs();\n\n<div class=\"flex flex-row gap-7\">\n  @for (tab of tabs; track tab.type) {\n    @if (tab.url) {\n      <a \n        class=\"flex item-center justify-center font-medium pb-3\"\n        routerLinkActive=\"tab--active\"\n        [attr.disabled]=\"tab.disabled\"\n        [class.tab--disabled]=\"tab.disabled\"\n        [queryParams]=\"tab.queryParams\"\n        [routerLink]=\"tab.disabled ? null : tab.url\"\n        (click)=\"onTabClick($event, tab)\">\n        {{ tab.title }}\n      </a>\n    } @else {\n      <button\n        [disabled]=\"tab.disabled\"\n        type=\"button\"\n        class=\"flex item-center justify-center font-medium pb-3\"\n        (click)=\"onTabClick($event, tab)\">\n        {{ tab.title }}\n      </button>\n    }\n  }\n</div>", styles: ["a,button{color:var(--oecd-color-primary-dark)}a:hover,button:hover,a:active,button:active{color:var(--oecd-color-primary-active);border-bottom:var(--oecd-border-size-base) solid var(--oecd-color-primary-active);cursor:pointer}a:disabled,a.tab--disabled,a[aria-disabled=true],button:disabled,button.tab--disabled,button[aria-disabled=true]{opacity:var(--oecd-opacity-disabled);cursor:not-allowed;pointer-events:none;text-decoration:none}a.tab--active,button.tab--active{color:var(--oecd-color-primary-active);border-bottom:var(--oecd-border-size-base) solid var(--oecd-color-primary-active)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: OecdTabsNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'oecd-tabs-nav', imports: [RouterModule], template: "@let tabs = $tabs();\n\n<div class=\"flex flex-row gap-7\">\n  @for (tab of tabs; track tab.type) {\n    @if (tab.url) {\n      <a \n        class=\"flex item-center justify-center font-medium pb-3\"\n        routerLinkActive=\"tab--active\"\n        [attr.disabled]=\"tab.disabled\"\n        [class.tab--disabled]=\"tab.disabled\"\n        [queryParams]=\"tab.queryParams\"\n        [routerLink]=\"tab.disabled ? null : tab.url\"\n        (click)=\"onTabClick($event, tab)\">\n        {{ tab.title }}\n      </a>\n    } @else {\n      <button\n        [disabled]=\"tab.disabled\"\n        type=\"button\"\n        class=\"flex item-center justify-center font-medium pb-3\"\n        (click)=\"onTabClick($event, tab)\">\n        {{ tab.title }}\n      </button>\n    }\n  }\n</div>", styles: ["a,button{color:var(--oecd-color-primary-dark)}a:hover,button:hover,a:active,button:active{color:var(--oecd-color-primary-active);border-bottom:var(--oecd-border-size-base) solid var(--oecd-color-primary-active);cursor:pointer}a:disabled,a.tab--disabled,a[aria-disabled=true],button:disabled,button.tab--disabled,button[aria-disabled=true]{opacity:var(--oecd-opacity-disabled);cursor:not-allowed;pointer-events:none;text-decoration:none}a.tab--active,button.tab--active{color:var(--oecd-color-primary-active);border-bottom:var(--oecd-border-size-base) solid var(--oecd-color-primary-active)}\n"] }]
+        }], propDecorators: { $tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { OecdTabsNavComponent };
+//# sourceMappingURL=ngx-oecd-ai-design-system-tabs-nav.mjs.map

package/fesm2022/ngx-oecd-ai-design-system-tabs-nav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-oecd-ai-design-system-tabs-nav.mjs","sources":["../../../../libs/ui/tabs-nav/src/lib/tabs-nav.component.ts","../../../../libs/ui/tabs-nav/src/lib/tabs-nav.component.html","../../../../libs/ui/tabs-nav/src/ngx-oecd-ai-design-system-tabs-nav.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\nimport { RouterModule } from '@angular/router';\n\nimport { Tab } from './models';\n\n@Component({\n  selector: 'oecd-tabs-nav',\n  imports: [RouterModule],\n  templateUrl: './tabs-nav.component.html',\n  styleUrl: './tabs-nav.component.scss',\n})\nexport class OecdTabsNavComponent<T> {\n  readonly $tabs = input.required<Tab<T>[]>({ alias: 'tabs'})\n\n  onTabClick(event: Event, tab: Tab<T>): void {\n    event.preventDefault();\n\n    if (tab.disabled) {\n      return;\n    }\n\n    const tabs = this.$tabs();\n\n    tabs.forEach((currentTab: Tab<T>): void => {\n      currentTab.active = currentTab.type === tab.type;\n    });\n  }\n}\n","@let tabs = $tabs();\n\n<div class=\"flex flex-row gap-7\">\n  @for (tab of tabs; track tab.type) {\n    @if (tab.url) {\n      <a \n        class=\"flex item-center justify-center font-medium pb-3\"\n        routerLinkActive=\"tab--active\"\n        [attr.disabled]=\"tab.disabled\"\n        [class.tab--disabled]=\"tab.disabled\"\n        [queryParams]=\"tab.queryParams\"\n        [routerLink]=\"tab.disabled ? null : tab.url\"\n        (click)=\"onTabClick($event, tab)\">\n        {{ tab.title }}\n      </a>\n    } @else {\n      <button\n        [disabled]=\"tab.disabled\"\n        type=\"button\"\n        class=\"flex item-center justify-center font-medium pb-3\"\n        (click)=\"onTabClick($event, tab)\">\n        {{ tab.title }}\n      </button>\n    }\n  }\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAWa,oBAAoB,CAAA;IACtB,KAAK,GAAG,KAAK,CAAC,QAAQ,4EAAa,KAAK,EAAE,MAAM,EAAA,CAAE;IAE3D,UAAU,CAAC,KAAY,EAAE,GAAW,EAAA;QAClC,KAAK,CAAC,cAAc,EAAE;AAEtB,QAAA,IAAI,GAAG,CAAC,QAAQ,EAAE;YAChB;QACF;AAEA,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE;AAEzB,QAAA,IAAI,CAAC,OAAO,CAAC,CAAC,UAAkB,KAAU;YACxC,UAAU,CAAC,MAAM,GAAG,UAAU,CAAC,IAAI,KAAK,GAAG,CAAC,IAAI;AAClD,QAAA,CAAC,CAAC;IACJ;uGAfW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXjC,+wBAyBM,EAAA,MAAA,EAAA,CAAA,klBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDlBM,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,uBAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAIX,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBANhC,SAAS;+BACE,eAAe,EAAA,OAAA,EAChB,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,+wBAAA,EAAA,MAAA,EAAA,CAAA,klBAAA,CAAA,EAAA;;;AEPzB;;AAEG;;;;"}

package/fesm2022/ngx-oecd-ai-design-system.mjs

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=ngx-oecd-ai-design-system.mjs.map

package/fesm2022/ngx-oecd-ai-design-system.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-oecd-ai-design-system.mjs","sources":["../../../../libs/ui/ngx-oecd-ai-design-system.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;;AAEG"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "ngx-oecd-ai-design-system",
+  "version": "2.1.5",
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/router": "^22.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "exports": {
+    "./styles": {
+      "sass": "./styles/index.scss",
+      "style": "./styles/index.scss",
+      "default": "./styles/index.scss"
+    },
+    "./styles/*": "./styles/*",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ngx-oecd-ai-design-system.d.ts",
+      "default": "./fesm2022/ngx-oecd-ai-design-system.mjs"
+    },
+    "./tabs-nav": {
+      "types": "./types/ngx-oecd-ai-design-system-tabs-nav.d.ts",
+      "default": "./fesm2022/ngx-oecd-ai-design-system-tabs-nav.mjs"
+    }
+  },
+  "module": "fesm2022/ngx-oecd-ai-design-system.mjs",
+  "typings": "types/ngx-oecd-ai-design-system.d.ts",
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/styles/base.scss

@@ -0,0 +1,15 @@
+html {
+  font-size: var(--oecd-font-size-base);
+}
+
+body {
+  font-family: var(--oecd-font-family-sans);
+  font-size: inherit;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}

package/styles/index.scss

@@ -0,0 +1,11 @@
+@use 'variables' as tokens;
+@use 'base';
+
+@import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap';
+
+:root {
+  @include tokens.palette;
+  @include tokens.sizes;
+
+  --oecd-font-family-sans: 'Noto Sans', sans-serif;
+}

package/styles/tailwind.css

@@ -0,0 +1,16 @@
+@import 'tailwindcss';
+
+@source '..';
+@source '../fesm2022';
+@source '../../../apps/playground/src';
+
+@theme inline {
+  --font-sans: var(--oecd-font-family-sans);
+
+  --color-oecd-primary-dark: var(--oecd-color-primary-dark);
+  --color-oecd-primary-active: var(--oecd-color-primary-active);
+  --color-oecd-white: var(--oecd-color-white);
+  --color-oecd-black: var(--oecd-color-black);
+  --color-oecd-dark-blue: var(--oecd-color-dark-blue);
+  --color-oecd-navy: var(--oecd-color-navy);
+}

package/styles/variables/index.scss

@@ -0,0 +1,2 @@
+@forward 'palette';
+@forward 'sizes';

package/styles/variables/palette.scss

@@ -0,0 +1,13 @@
+@mixin palette {
+  /* Brand */
+  --oecd-color-primary-dark: #264e75;
+  --oecd-color-primary-active: #379aa4;
+
+  /* Base */
+  --oecd-color-white: #ffffff;
+  --oecd-color-black: #000000;
+
+  /* Blue */
+  --oecd-color-dark-blue: #0e1749;
+  --oecd-color-navy: #101d40;
+}

package/styles/variables/sizes.scss

@@ -0,0 +1,25 @@
+@mixin sizes {
+  // Font sizes
+  --oecd-font-size-base: 16px;
+  --oecd-font-size-small: 14px;
+  --oecd-font-size-large: 18px;
+  --oecd-font-size-xlarge: 20px;
+  --oecd-font-size-xxlarge: 22px;
+  --oecd-font-size-xxxlarge: 24px;
+  --oecd-font-size-xxxxlarge: 26px;
+
+  // Border sizes
+  --oecd-border-size-small: 1px;
+  --oecd-border-size-base: 2px;
+  --oecd-border-size-large: 3px;
+  --oecd-border-size-xlarge: 4px;
+  --oecd-border-size-xxlarge: 5px;
+  --oecd-border-size-xxxlarge: 6px;
+  --oecd-border-size-xxxxlarge: 7px;
+  --oecd-border-size-xxxxxlarge: 8px;
+  --oecd-border-size-xxxxxxlarge: 9px;
+  --oecd-border-size-xxxxxxxlarge: 10px;
+
+  // Opacity sizes
+  --oecd-opacity-disabled: 0.5;
+}

package/tabs-nav/README.md

@@ -0,0 +1,3 @@
+# ngx-oecd-ai-design-system/tabs-nav
+
+Secondary entry point of `ngx-oecd-ai-design-system`. It can be used by importing from `ngx-oecd-ai-design-system/tabs-nav`.

package/types/ngx-oecd-ai-design-system-tabs-nav.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from '@angular/core';
+
+interface Tab<T> {
+    type: T;
+    title: string;
+    active?: boolean;
+    url?: string | string[];
+    queryParams?: Record<string, string>;
+    disabled?: boolean;
+}
+
+declare class OecdTabsNavComponent<T> {
+    readonly $tabs: i0.InputSignal<Tab<T>[]>;
+    onTabClick(event: Event, tab: Tab<T>): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OecdTabsNavComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OecdTabsNavComponent<any>, "oecd-tabs-nav", never, { "$tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { OecdTabsNavComponent };

package/types/ngx-oecd-ai-design-system.d.ts

@@ -0,0 +1,2 @@
+
+export { };