@onemrvapublic/design-system-demos 21.0.1 → 21.1.1-develop.1
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.
- package/assets/json/timepicker.json +1 -1
- package/assets/json/typography.json +1 -1
- package/main.js +2 -2
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-timepicker.component.html":"<mat-form-field [readonly]=\"readonly()\">\n <mat-label>Pick a time</mat-label>\n <input\n [formControl]=\"form\"\n [
|
|
1
|
+
{"demo-timepicker.component.html":"<mat-form-field [readonly]=\"readonly()\">\n <mat-label>Pick a time</mat-label>\n <input\n matInput\n [formControl]=\"form\"\n [matTimepicker]=\"picker\"\n (input)=\"onRawInput($event)\"\n />\n <mat-timepicker-toggle matIconSuffix [for]=\"picker\" />\n <mat-timepicker interval=\"15m\" #picker />\n <!-- <mat-timepicker interval=\"1h\" #picker/>-->\n</mat-form-field>\n\n<mat-form-field [readonly]=\"readonly()\">\n <mat-label>Pick a time</mat-label>\n <input\n matInput\n [formControl]=\"form\"\n [matTimepicker]=\"pickerCustomOptions\"\n (input)=\"onRawInput($event)\"\n />\n <mat-timepicker-toggle matIconSuffix [for]=\"pickerCustomOptions\" />\n <mat-timepicker [options]=\"customOptions\" #pickerCustomOptions />\n <!-- <mat-timepicker interval=\"1h\" #picker/>-->\n</mat-form-field>\n","demo-timepicker.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { provideNgxMask } from 'ngx-mask';\nimport {\n onemrvaDateNativeProvider,\n OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n MatTimepickerModule,\n MatTimepickerOption,\n} from '@angular/material/timepicker';\n\n@Component({\n selector: 'app-demo-timepicker',\n templateUrl: 'demo-timepicker.component.html',\n providers: [onemrvaDateNativeProvider(), provideNgxMask()],\n imports: [\n MatFormFieldModule,\n MatInputModule,\n MatTimepickerModule,\n ReactiveFormsModule,\n OnemRvaReadonlyDirective,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTimepickerComponent extends DemoComponentBase {\n public form = new FormControl();\n\n readonly disabled = input(false);\n\n readonly readonly = input(false);\n\n readonly customOptions: MatTimepickerOption<Date>[] = [\n { label: 'Morning', value: new Date(2024, 0, 1, 9, 0, 0) },\n { label: 'Noon', value: new Date(2024, 0, 1, 12, 0, 0) },\n { label: 'Evening', value: new Date(2024, 0, 1, 22, 0, 0) },\n ];\n\n onRawInput(event: Event) {\n const input = event.target as HTMLInputElement;\n let value = input.value.replace(/\\D/g, ''); // remove non-digits\n\n if (value.length >= 3) {\n value = value.slice(0, 2) + ':' + value.slice(2, value.length);\n }\n\n input.value = value;\n }\n\n constructor() {\n super();\n this.form?.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => {\n this.output.set(value);\n });\n effect(() => {\n if (this.disabled()) this.form.disable();\n else this.form.enable();\n });\n }\n}\n"}
|
|
@@ -1 +1 @@
|
|
|
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.name\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:
|
|
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.name\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: 16,\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: 'headline', label: 'Headline Styles' },\n { value: 'title', label: 'Title Styles' },\n { value: 'body', label: 'Body Styles' },\n { value: 'label', label: 'Label Styles' },\n { value: 'display', label: 'Display Styles' },\n ];\n}\n"}
|