npm - @onemrvapublic/design-system-demos - Versions diffs - 21.0.0-develop.1 → 21.0.0-develop.10 - Mend

@onemrvapublic/design-system-demos 21.0.0-develop.1 → 21.0.0-develop.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/assets/i18n/de.json +2 -2
package/assets/i18n/en.json +2 -2
package/assets/i18n/fr.json +2 -2
package/assets/i18n/nl.json +2 -2
package/assets/json/typography.json +1 -1
package/main.js +2 -2
package/package.json +1 -1
package/styles.css +1 -1

package/assets/i18n/de.json CHANGED Viewed

@@ -71,8 +71,8 @@
     "search.input.label": "Suche"
   },
   "paginator": {
-    "Previous": "< Previous",
-    "Next": "Next >",
+    "Previous": "Previous",
+    "Next": "Next",
     "records.per.page": "Elemente pro Seite",
     "outOf": "out of"
   },

package/assets/i18n/en.json CHANGED Viewed

@@ -71,8 +71,8 @@
     "search.input.label": "Search"
   },
   "paginator": {
-    "Previous": "< Previous",
-    "Next": "Next >",
+    "Previous": "Previous",
+    "Next": "Next",
     "records.per.page": "Elements per page",
     "outOf": "out of"
   },

package/assets/i18n/fr.json CHANGED Viewed

@@ -71,8 +71,8 @@
     "search.input.label": "Recherche"
   },
   "paginator": {
-    "Previous": "< Précédent",
-    "Next": "Suivant >",
+    "Previous": "Précédent",
+    "Next": "Suivant",
     "records.per.page": "Eléments par page",
     "outOf": "de"
   },

package/assets/i18n/nl.json CHANGED Viewed

@@ -71,8 +71,8 @@
     "search.input.label": "Search"
   },
   "paginator": {
-    "Previous": "< Vorig",
-    "Next": "Next >",
+    "Previous": "Vorig",
+    "Next": "Next",
     "records.per.page": "Elementen per pagina",
     "outOf": "out of"
   },

package/assets/json/typography.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"demo-typography.component.html":"<~~h1>This is an H1</h1>\n\n<h2>This is an H2</h2>\n\n<h3>This is an H3</h3>\n\n<h4>This is an H4</h4>\n\n<h5>This is an H5</h5>\n\n<h6>This is an H6</h6>\n\n<~~div class=\"typography-container\">\n @for (category of typographyCategories; track category.label) {\n <div class=\"typography-section\">\n <h3>{{ category.label }}</h3>\n @for (\n style of typographyStyles \| filter: 'category' : category.value;\n track style\n ) {\n <div class=\"typography-item\">\n <div class=\"typography-details\">\n <div\n class=\"typography-sample\"\n [style.font]=\"\n style.weight +\n ' ' +\n style.size +\n '/' +\n style.lineHeight +\n ' ' +\n style.font\n \"\n >\n {{ style.name }}\n </div>\n <div class=\"typography-specs\">\n <div>Size: {{ style.size }} ({{ style.sizePx }}px)</div>\n <div>\n Line Height: {{ style.lineHeight }} ({{ style.lineHeightPx }}px)\n </div>\n <div>Weight: {{ style.weight }}</div>\n <div>Font: {{ style.font }}</div>\n </div>\n </div>\n </div>\n }\n </div>\n }\n</div>\n","demo-typography.component.scss":".typography-container {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n padding: 1rem;\n}\n\n.typography-section {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n\n h3 {\n color: var(--mat-sys-on-surface);\n font-size: 1.25rem;\n font-weight: 600;\n margin: 0;\n }\n}\n\n.typography-item {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding: 1rem;\n background-color: var(--mat-sys-surface-container);\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.typography-name {\n color: var(--mat-sys-on-surface);\n font-size: 1.1rem;\n font-weight: 500;\n}\n\n.typography-details {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.typography-sample {\n padding: 1rem;\n background-color: var(--mat-sys-surface);\n border-radius: 4px;\n color: var(--mat-sys-on-surface);\n}\n\n.typography-specs {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 0.5rem;\n font-family: monospace;\n font-size: 0.9rem;\n color: var(--mat-sys-on-surface-variant);\n}\n\n@media (max-width: 768px) {\n .typography-specs {\n grid-template-columns: 1fr;\n }\n}\n","demo-typography.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { FilterPipe } from '../palette~~/demo-palette.component~~';\n\ninterface TypographyStyle {\n name: string;\n size: string;\n sizePx: number;\n lineHeight: string;\n lineHeightPx: number;\n weight: number;\n font: string;\n category: 'body' \| 'display' \| 'headline' \| 'label' \| 'title';\n}\n\n@Component({\n selector: 'app-demo-typography',\n templateUrl: './demo-typography.component.html',\n styleUrls: ['./demo-typography.component.scss'],\n standalone: true,\n imports: [FilterPipe],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTypographyComponent extends DemoComponentBase {\n typographyStyles: TypographyStyle[] = [\n // ~~Body~~ Styles\n {\n name: '~~Body~~ Large',\n size: '1.~~125rem~~',\n sizePx: 18,\n lineHeight: '1.~~625rem~~',\n lineHeightPx: 26,\n weight: ~~400~~,\n font: '~~Source Sans Pro~~',\n category: '~~body~~',\n },\n {\n name: '~~Body~~ Medium',\n size: '~~1rem~~',\n sizePx: 16,\n lineHeight: '1.~~625rem~~',\n lineHeightPx: 26,\n weight: ~~400~~,\n font: '~~Source Sans Pro~~',\n category: '~~body~~',\n },\n {\n name: '~~Body~~ Small',\n size: '0.~~875rem~~',\n sizePx: 14,\n lineHeight: '1.~~3125rem~~',\n lineHeightPx: 21,\n weight: ~~400~~,\n font: '~~Source Sans Pro~~',\n category: '~~body~~',\n },\n // ~~Display~~ Styles\n {\n name: '~~Display~~ Large',\n size: '9.~~25rem~~',\n sizePx: ~~148~~,\n lineHeight: '11.~~25rem~~',\n lineHeightPx: ~~180~~,\n weight: ~~700~~,\n font: 'Poppins',\n category: '~~display~~',\n },\n {\n name: '~~Display~~ Medium',\n size: '4.~~5rem~~',\n sizePx: 72,\n lineHeight: '6.~~25rem~~',\n lineHeightPx: ~~100~~,\n weight: ~~700~~,\n font: 'Poppins',\n category: '~~display~~',\n },\n {\n name: '~~Display~~ Small',\n size: '~~2rem~~',\n sizePx: 32,\n lineHeight: '3.25rem',\n lineHeightPx: 52,\n weight: 600,\n font: 'Poppins',\n category: '~~display~~',\n },\n // ~~Headline~~ Styles\n {\n name: '~~Headline~~ Large',\n size: '~~1.625rem~~',\n sizePx: 26,\n lineHeight: '~~2.75rem~~',\n lineHeightPx: 44,\n weight: 600,\n font: 'Poppins',\n category: '~~headline~~',\n },\n {\n name: '~~Headline~~ Medium',\n size: '~~1.5rem~~',\n sizePx: 24,\n lineHeight: '2.~~5rem~~',\n lineHeightPx: 40,\n weight: 600,\n font: 'Poppins',\n category: '~~headline~~',\n },\n {\n name: '~~Headline~~ Small',\n size: '1.~~25rem~~',\n sizePx: 20,\n lineHeight: '2.~~25rem~~',\n lineHeightPx: 36,\n weight: 600,\n font: 'Poppins',\n category: '~~headline~~',\n },\n // ~~Label~~ Styles\n {\n name: '~~Label~~ Large',\n size: '1rem',\n sizePx: 16,\n lineHeight: '1.~~3125rem~~',\n lineHeightPx: 21,\n weight: ~~500~~,\n font: '~~Poppins~~',\n category: '~~label~~',\n },\n {\n name: '~~Label~~ Medium',\n size: '~~0.875rem~~',\n sizePx: 14,\n lineHeight: '1.~~3125rem~~',\n lineHeightPx: 21,\n weight: 400,\n font: '~~Poppins~~',\n category: '~~label~~',\n },\n {\n name: '~~Label~~ Small',\n size: '0.~~75rem~~',\n sizePx: 12,\n lineHeight: '1.~~125rem~~',\n lineHeightPx: 18,\n weight: 400,\n font: 'Source Sans Pro',\n category: '~~label~~',\n },\n // ~~Title~~ Styles\n {\n name: '~~Title~~ Large',\n size: '~~1.125rem~~',\n sizePx: 18,\n lineHeight: '~~2rem~~',\n lineHeightPx: 32,\n weight: ~~600~~,\n font: 'Poppins',\n category: '~~title~~',\n },\n {\n name: '~~Title~~ Medium',\n size: '~~1rem~~',\n sizePx: 16,\n lineHeight: '1.~~75rem~~',\n lineHeightPx: 28,\n weight: ~~600~~,\n font: 'Poppins',\n category: '~~title~~',\n },\n {\n name: '~~Title~~ Small',\n size: '0.75rem',\n sizePx: 12,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: ~~600~~,\n font: '~~Poppins~~',\n category: '~~title~~',\n },\n ];\n\n typographyCategories = [\n { value: 'body', label: 'Body Styles' },\n { value: 'display', label: 'Display Styles' },\n { value: 'headline', label: 'Headline Styles' },\n { value: 'label', label: 'Label Styles' },\n { value: 'title', label: 'Title Styles' },\n ];\n}\n"}
1	+ {"demo-typography.component.html":"<div class=\"typography-container\">\n @for (category of typographyCategories; track category.label) {\n <div class=\"typography-section\">\n <h3>{{ category.label }}</h3>\n @for (\n style of typographyStyles \| filter: 'category' : category.value;\n track style\n ) {\n <div class=\"typography-item\">\n <div class=\"typography-details\">\n <div\n class=\"typography-sample\"\n [style.font]=\"\n style.weight +\n ' ' +\n style.size +\n '/' +\n style.lineHeight +\n ' ' +\n style.font\n \"\n >\n {{ style.name }}\n </div>\n <div class=\"typography-specs\">\n <div>Size: {{ style.size }} ({{ style.sizePx }}px)</div>\n <div>\n Line Height: {{ style.lineHeight }} ({{ style.lineHeightPx }}px)\n </div>\n <div>Weight: {{ style.weight }}</div>\n <div>Font: {{ style.font }}</div>\n </div>\n </div>\n </div>\n }\n </div>\n }\n</div>\n","demo-typography.component.scss":".typography-container {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n padding: 1rem;\n}\n\n.typography-section {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n\n h3 {\n color: var(--mat-sys-on-surface);\n font-size: 1.25rem;\n font-weight: 600;\n margin: 0;\n }\n}\n\n.typography-item {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n padding: 1rem;\n background-color: var(--mat-sys-surface-container);\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.typography-name {\n color: var(--mat-sys-on-surface);\n font-size: 1.1rem;\n font-weight: 500;\n}\n\n.typography-details {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.typography-sample {\n padding: 1rem;\n background-color: var(--mat-sys-surface);\n border-radius: 4px;\n color: var(--mat-sys-on-surface);\n}\n\n.typography-specs {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 0.5rem;\n font-family: monospace;\n font-size: 0.9rem;\n color: var(--mat-sys-on-surface-variant);\n}\n\n@media (max-width: 768px) {\n .typography-specs {\n grid-template-columns: 1fr;\n }\n}\n","demo-typography.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { FilterPipe } from '../palette';\n\ninterface TypographyStyle {\n name: string;\n size: string;\n sizePx: number;\n lineHeight: string;\n lineHeightPx: number;\n weight: number;\n font: string;\n category: 'body' \| 'display' \| 'headline' \| 'label' \| 'title';\n}\n\n@Component({\n selector: 'app-demo-typography',\n templateUrl: './demo-typography.component.html',\n styleUrls: ['./demo-typography.component.scss'],\n standalone: true,\n imports: [FilterPipe],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTypographyComponent extends DemoComponentBase {\n typographyStyles: TypographyStyle[] = [\n // Display Styles\n {\n name: 'Display Large',\n size: '9.25rem',\n sizePx: 148,\n lineHeight: '11.25rem',\n lineHeightPx: 180,\n weight: 700,\n font: 'Poppins',\n category: 'display',\n },\n {\n name: 'Display Medium',\n size: '4.5rem',\n sizePx: 72,\n lineHeight: '6.25rem',\n lineHeightPx: 100,\n weight: 700,\n font: 'Poppins',\n category: 'display',\n },\n {\n name: 'Display Small',\n size: '1.75rem',\n sizePx: 28,\n lineHeight: '3.25rem',\n lineHeightPx: 52,\n weight: 600,\n font: 'Poppins',\n category: 'display',\n },\n // Headline Styles\n {\n name: 'Headline Large',\n size: '1.375rem',\n sizePx: 22,\n lineHeight: '2.75rem',\n lineHeightPx: 44,\n weight: 600,\n font: 'Poppins',\n category: 'headline',\n },\n {\n name: 'Headline Medium',\n size: '1.25rem',\n sizePx: 20,\n lineHeight: '2.5rem',\n lineHeightPx: 40,\n weight: 600,\n font: 'Poppins',\n category: 'headline',\n },\n {\n name: 'Headline Small',\n size: '1.125rem',\n sizePx: 18,\n lineHeight: '2.25rem',\n lineHeightPx: 36,\n weight: 600,\n font: 'Poppins',\n category: 'headline',\n },\n // Title Styles\n {\n name: 'Title Large',\n size: '1rem',\n sizePx: 16,\n lineHeight: '2rem',\n lineHeightPx: 32,\n weight: 600,\n font: 'Poppins',\n category: 'title',\n },\n {\n name: 'Title Medium',\n size: '1rem',\n sizePx: 16,\n lineHeight: '1.75rem',\n lineHeightPx: 28,\n weight: 600,\n font: 'Poppins',\n category: 'title',\n },\n {\n name: 'Title Small',\n size: '0.938rem',\n sizePx: 15,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 600,\n font: 'Poppins',\n category: 'title',\n },\n // Body Styles\n {\n name: 'Body Large',\n size: '1rem',\n sizePx: 18,\n lineHeight: '1.625rem',\n lineHeightPx: 26,\n weight: 600,\n font: 'Source Sans Pro',\n category: 'body',\n },\n {\n name: 'Body Medium',\n size: '1rem',\n sizePx: 16,\n lineHeight: '1.625rem',\n lineHeightPx: 26,\n weight: 400,\n font: 'Source Sans Pro',\n category: 'body',\n },\n {\n name: 'Body Small',\n size: '0.875rem',\n sizePx: 14,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 400,\n font: 'Source Sans Pro',\n category: 'body',\n },\n // Label Styles\n {\n name: 'Label Large',\n size: '1rem',\n sizePx: 16,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 500,\n font: 'Poppins',\n category: 'label',\n },\n {\n name: 'Label Medium',\n size: '0.875rem',\n sizePx: 14,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 400,\n font: 'Poppins',\n category: 'label',\n },\n {\n name: 'Label Small',\n size: '0.75rem',\n sizePx: 12,\n lineHeight: '1.3125rem',\n lineHeightPx: 21,\n weight: 400,\n font: 'Source Sans Pro',\n category: 'label',\n },\n ];\n\n typographyCategories = [\n { value: 'body', label: 'Body Styles' },\n { value: 'display', label: 'Display Styles' },\n { value: 'headline', label: 'Headline Styles' },\n { value: 'label', label: 'Label Styles' },\n { value: 'title', label: 'Title Styles' },\n ];\n}\n"}