@ndwnu/design-system 14.2.0 → 14.2.2

package/styles/utils/_screenreader.scss

@@ -1,13 +1,13 @@
-.sr-only {
-  position: absolute;
-
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  border-width: 0;
-  white-space: nowrap;
-
-  clip: rect(0, 0, 0, 0);
-}
+.sr-only {
+  position: absolute;
+
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  border-width: 0;
+  white-space: nowrap;
+
+  clip: rect(0, 0, 0, 0);
+}

package/styles/utils/classes.stories.ts

@@ -1,157 +1,157 @@
-import { Meta, StoryObj } from '@storybook/angular';
-
-/**
- * The util classes here are made in order to replace bootstrap or tailwind implementations. <br>
- * This way we can avoid dependencies on external libraries and keep our design system consistent. <br>
- * Also this way we can give our own spacing and scale interpretation which is more in line with our design system.
- *
- * Below is a representation of the util classes in our design system. <br>
- * Are you missing a util class? Then please contact us so we can improve this.
- */
-
-const meta: Meta = {
-  title: 'Core/Util classes',
-  tags: ['autodocs', 'ndw', 'ntm', 'nwb'],
-  parameters: {
-    viewport: {
-      defaultViewport: 'mobile',
-    },
-  },
-  render: () => ({
-    template: `
-      <style>
-        .demo-box {
-          background: var(--ndw-color-primary-050);
-          border: 1px solid var(--ndw-color-primary-500);
-          padding: 0.5rem;
-          text-align: center;
-        }
-
-        .demo-container {
-          background: var(--ndw-color-grey-100);
-          border: 1px dashed var(--ndw-color-grey-500);
-        }
-      </style>
-
-      <div class="d-flex flex-column gap-4 p-3">
-
-        <!-- Display & Flex -->
-        <section>
-          <h3>Display & Flex</h3>
-          <div class="demo-container d-flex gap-2 p-2">
-            <div class="demo-box">d-flex</div>
-            <div class="demo-box">gap-2</div>
-            <div class="demo-box">flex-row</div>
-          </div>
-        </section>
-
-        <!-- Flex direction -->
-        <section>
-          <h3>Flex direction</h3>
-          <div class="demo-container d-flex flex-column gap-1 p-2">
-            <div class="demo-box">d-flex</div>
-            <div class="demo-box">flex-column</div>
-            <div class="demo-box">gap-1</div>
-          </div>
-        </section>
-
-        <!-- Justify content -->
-        <section>
-          <h3>Justify content</h3>
-          <div class="demo-container d-flex justify-content-between p-2">
-            <div class="demo-box">justify-content-between</div>
-            <div class="demo-box">justify-content-between</div>
-          </div>
-          <div class="demo-container d-flex justify-content-start p-2">
-            <div class="demo-box">justify-content-start</div>
-          </div>
-          <div class="demo-container d-flex justify-content-end p-2">
-            <div class="demo-box">justify-content-end</div>
-          </div>
-        </section>
-
-        <!-- Align items -->
-        <section>
-          <h3>Align items</h3>
-          <div class="demo-container d-flex align-items-center p-2" style="height: 80px;">
-            <div class="demo-box">align-items-center</div>
-          </div>
-          <div class="demo-container d-flex align-items-start p-2" style="height: 80px;">
-            <div class="demo-box">align-items-start</div>
-          </div>
-          <div class="demo-container d-flex align-items-end p-2" style="height: 80px;">
-            <div class="demo-box">align-items-end</div>
-          </div>
-        </section>
-
-        <!-- Spacing utilities -->
-        <section>
-          <h3>Spacing (margin, padding, gap)</h3>
-
-          <div class="demo-container p-3">
-            <div class="demo-box mb-2">mb-2</div>
-            <div class="demo-box mt-2">mt-2</div>
-          </div>
-          <div class="demo-container p-3">
-            <div class="p-2">
-              <div class="demo-box">p-2</div>
-            </div>
-            <div class="pt-2">
-              <div class="demo-box">pt-2</div>
-            </div>
-            <div class="pb-2">
-              <div class="demo-box">pb-2</div>
-            </div>
-          </div>
-
-          <div class="demo-container d-flex justify-content-center align-items-center m-auto" style="height: 80px;">
-            <div class="demo-box">m-auto</div>
-          </div>
-
-          <div class="demo-container d-flex gap-3 p-2 mt-2">
-            <div class="demo-box">gap-3</div>
-            <div class="demo-box">gap-3</div>
-            <div class="demo-box">gap-3</div>
-          </div>
-        </section>
-
-        <!-- Width / height -->
-        <section>
-          <h3>Width & Height</h3>
-          <div class="demo-container p-2" style="height: 100px;">
-            <div class="demo-box w-100 h-100">
-              w-100 / h-100
-            </div>
-          </div>
-          <div class="demo-container p-2" style="height: 100px;width: 200px;">
-            <div class="demo-box w-auto h-auto">
-              w-auto h-auto
-            </div>
-          </div>
-        </section>
-
-        <!-- Text utilities -->
-        <section>
-          <h3>Text alignment</h3>
-          <div class="demo-container p-2">
-            <div class="text-start">
-              <span class="demo-box">text-start</span>
-            </div>
-            <div class="text-center">
-              <span class="demo-box">text-center</span>
-            </div>
-            <div class="text-end">
-              <span class="demo-box">text-end</span>
-            </div>
-          </div>
-        </section>
-
-      </div>
-    `,
-  }),
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {};
+import { Meta, StoryObj } from '@storybook/angular';
+
+/**
+ * The util classes here are made in order to replace bootstrap or tailwind implementations. <br>
+ * This way we can avoid dependencies on external libraries and keep our design system consistent. <br>
+ * Also this way we can give our own spacing and scale interpretation which is more in line with our design system.
+ *
+ * Below is a representation of the util classes in our design system. <br>
+ * Are you missing a util class? Then please contact us so we can improve this.
+ */
+
+const meta: Meta = {
+  title: 'Core/Util classes',
+  tags: ['autodocs', 'ndw', 'ntm', 'nwb'],
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile',
+    },
+  },
+  render: () => ({
+    template: `
+      <style>
+        .demo-box {
+          background: var(--ndw-color-primary-050);
+          border: 1px solid var(--ndw-color-primary-500);
+          padding: 0.5rem;
+          text-align: center;
+        }
+
+        .demo-container {
+          background: var(--ndw-color-grey-100);
+          border: 1px dashed var(--ndw-color-grey-500);
+        }
+      </style>
+
+      <div class="d-flex flex-column gap-4 p-3">
+
+        <!-- Display & Flex -->
+        <section>
+          <h3>Display & Flex</h3>
+          <div class="demo-container d-flex gap-2 p-2">
+            <div class="demo-box">d-flex</div>
+            <div class="demo-box">gap-2</div>
+            <div class="demo-box">flex-row</div>
+          </div>
+        </section>
+
+        <!-- Flex direction -->
+        <section>
+          <h3>Flex direction</h3>
+          <div class="demo-container d-flex flex-column gap-1 p-2">
+            <div class="demo-box">d-flex</div>
+            <div class="demo-box">flex-column</div>
+            <div class="demo-box">gap-1</div>
+          </div>
+        </section>
+
+        <!-- Justify content -->
+        <section>
+          <h3>Justify content</h3>
+          <div class="demo-container d-flex justify-content-between p-2">
+            <div class="demo-box">justify-content-between</div>
+            <div class="demo-box">justify-content-between</div>
+          </div>
+          <div class="demo-container d-flex justify-content-start p-2">
+            <div class="demo-box">justify-content-start</div>
+          </div>
+          <div class="demo-container d-flex justify-content-end p-2">
+            <div class="demo-box">justify-content-end</div>
+          </div>
+        </section>
+
+        <!-- Align items -->
+        <section>
+          <h3>Align items</h3>
+          <div class="demo-container d-flex align-items-center p-2" style="height: 80px;">
+            <div class="demo-box">align-items-center</div>
+          </div>
+          <div class="demo-container d-flex align-items-start p-2" style="height: 80px;">
+            <div class="demo-box">align-items-start</div>
+          </div>
+          <div class="demo-container d-flex align-items-end p-2" style="height: 80px;">
+            <div class="demo-box">align-items-end</div>
+          </div>
+        </section>
+
+        <!-- Spacing utilities -->
+        <section>
+          <h3>Spacing (margin, padding, gap)</h3>
+
+          <div class="demo-container p-3">
+            <div class="demo-box mb-2">mb-2</div>
+            <div class="demo-box mt-2">mt-2</div>
+          </div>
+          <div class="demo-container p-3">
+            <div class="p-2">
+              <div class="demo-box">p-2</div>
+            </div>
+            <div class="pt-2">
+              <div class="demo-box">pt-2</div>
+            </div>
+            <div class="pb-2">
+              <div class="demo-box">pb-2</div>
+            </div>
+          </div>
+
+          <div class="demo-container d-flex justify-content-center align-items-center m-auto" style="height: 80px;">
+            <div class="demo-box">m-auto</div>
+          </div>
+
+          <div class="demo-container d-flex gap-3 p-2 mt-2">
+            <div class="demo-box">gap-3</div>
+            <div class="demo-box">gap-3</div>
+            <div class="demo-box">gap-3</div>
+          </div>
+        </section>
+
+        <!-- Width / height -->
+        <section>
+          <h3>Width & Height</h3>
+          <div class="demo-container p-2" style="height: 100px;">
+            <div class="demo-box w-100 h-100">
+              w-100 / h-100
+            </div>
+          </div>
+          <div class="demo-container p-2" style="height: 100px;width: 200px;">
+            <div class="demo-box w-auto h-auto">
+              w-auto h-auto
+            </div>
+          </div>
+        </section>
+
+        <!-- Text utilities -->
+        <section>
+          <h3>Text alignment</h3>
+          <div class="demo-container p-2">
+            <div class="text-start">
+              <span class="demo-box">text-start</span>
+            </div>
+            <div class="text-center">
+              <span class="demo-box">text-center</span>
+            </div>
+            <div class="text-end">
+              <span class="demo-box">text-end</span>
+            </div>
+          </div>
+        </section>
+
+      </div>
+    `,
+  }),
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};

package/styles/utils/index.scss

@@ -1 +1 @@
-@forward 'screenreader';
+@forward 'screenreader';

package/types/ndwnu-design-system.d.ts

@@ -1055,12 +1055,13 @@ declare class MapButtonComponent {
     readonly active: _angular_core.InputSignal<boolean>;
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly compact: _angular_core.InputSignal<boolean>;
     readonly clicked: _angular_core.OutputEmitterRef<void>;
     protected readonly buttonIcon: _angular_core.Signal<string | undefined>;
     protected readonly svgIcon: _angular_core.Signal<string | undefined>;
     protected readonly iconLabel: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MapButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapButtonComponent, "ndw-map-button", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapButtonComponent, "ndw-map-button", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
 }
 
 declare const fontMapButtonIcons: readonly ["direction", "gps", "high-res", "layers", "polygon", "search", "zoom-in", "zoom-out", "mail"];
@@ -1100,6 +1101,7 @@ declare class MapDisplayComponent implements OnInit {
     backgroundsTitle: _angular_core.InputSignal<string>;
     layersTitle: _angular_core.InputSignal<string>;
     enableClearLayers: _angular_core.InputSignal<boolean>;
+    compact: _angular_core.InputSignal<boolean>;
     layerOptionType: _angular_core.InputSignal<"checkbox" | "radio">;
     backgroundOptions: _angular_core.InputSignalWithTransform<MapBackgroundOption[], MapBackgroundOption[]>;
     layerOptions: _angular_core.InputSignalWithTransform<MapDisplayOption[], MapDisplayOption[]>;
@@ -1119,7 +1121,7 @@ declare class MapDisplayComponent implements OnInit {
     toggleLayer(option: MapDisplayOption): void;
     clearLayers(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MapDisplayComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapDisplayComponent, "ndw-map-display", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "backgroundsTitle": { "alias": "backgroundsTitle"; "required": false; "isSignal": true; }; "layersTitle": { "alias": "layersTitle"; "required": false; "isSignal": true; }; "enableClearLayers": { "alias": "enableClearLayers"; "required": false; "isSignal": true; }; "layerOptionType": { "alias": "layerOptionType"; "required": false; "isSignal": true; }; "backgroundOptions": { "alias": "backgroundOptions"; "required": false; "isSignal": true; }; "layerOptions": { "alias": "layerOptions"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "backgroundChange": "backgroundChange"; "layerChange": "layerChange"; "clearAllLayers": "clearAllLayers"; "open": "openChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapDisplayComponent, "ndw-map-display", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "backgroundsTitle": { "alias": "backgroundsTitle"; "required": false; "isSignal": true; }; "layersTitle": { "alias": "layersTitle"; "required": false; "isSignal": true; }; "enableClearLayers": { "alias": "enableClearLayers"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "layerOptionType": { "alias": "layerOptionType"; "required": false; "isSignal": true; }; "backgroundOptions": { "alias": "backgroundOptions"; "required": false; "isSignal": true; }; "layerOptions": { "alias": "layerOptions"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "backgroundChange": "backgroundChange"; "layerChange": "layerChange"; "clearAllLayers": "clearAllLayers"; "open": "openChange"; }, never, never, true, never>;
 }
 
 declare const MAP_BACKGROUND_IMAGES: {
@@ -1197,6 +1199,7 @@ declare class MapLegendComponent {
     readonly icon: _angular_core.InputSignal<string>;
     readonly title: _angular_core.InputSignal<string>;
     readonly viewMode: _angular_core.InputSignal<MapLegendViewMode>;
+    readonly compact: _angular_core.InputSignal<boolean>;
     readonly open: _angular_core.ModelSignal<boolean>;
     readonly htmlIsRendered: _angular_core.WritableSignal<boolean>;
     readonly showPopover: _angular_core.Signal<boolean>;
@@ -1205,7 +1208,7 @@ declare class MapLegendComponent {
     readonly hasJustOneGroup: _angular_core.Signal<boolean>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MapLegendComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapLegendComponent, "ndw-map-legend", never, { "groups": { "alias": "groups"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapLegendComponent, "ndw-map-legend", never, { "groups": { "alias": "groups"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "viewMode": { "alias": "viewMode"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, never, true, never>;
 }
 
 declare class ModalContentComponent {