@onemrvapublic/design-system-demos 22.7.0-develop.10 → 22.7.0-develop.12
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-utilities.component.html":"<!-- Utility classes are global: they come with the theme, no import needed. -->\n\n<div class=\"utilities-container\">\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Setup</h3>\n <p class=\"font-body-medium\">\n The utility classes are emitted by the theme mixin, so any element inside\n <code>.onemrva-theme</code> can use them. In your global\n <code>styles.scss</code>:\n </p>\n <pre class=\"utilities-stage utilities-code\">{{ setupSnippet }}</pre>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Sizing</h3>\n <p class=\"font-body-medium\">\n <code>w-</code>, <code>h-</code>, <code>mw-</code> and\n <code>mh-</code> set width, height, max-width and max-height as a\n percentage of the parent. <code>vw-</code> and <code>vh-</code> use the\n viewport instead. Every value from 0 to 100 exists, plus\n <code>w-auto</code> and <code>h-auto</code>.\n </p>\n\n <div class=\"utilities-controls\">\n <mat-button-toggle-group\n [value]=\"sizingPrefix()\"\n (change)=\"sizingPrefix.set($event.value)\"\n aria-label=\"Sizing utility\"\n >\n @for (utility of sizingUtilities; track utility.prefix) {\n <mat-button-toggle [value]=\"utility.prefix\">\n {{ utility.prefix }}-\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n\n <mat-slider min=\"0\" max=\"100\" step=\"5\" discrete>\n <input\n matSliderThumb\n [ngModel]=\"sizingValue()\"\n (ngModelChange)=\"sizingValue.set($event)\"\n aria-label=\"Sizing value\"\n />\n </mat-slider>\n </div>\n\n <div class=\"utilities-stage sizing-stage\">\n <div class=\"utilities-box sizing-box\" [class]=\"sizingClass()\">\n .{{ sizingClass() }}\n </div>\n </div>\n <code class=\"utilities-code\"\n >.{{ sizingClass() }} {{ '{' }} {{ sizingCss() }} {{ '}' }}</code\n >\n\n <div class=\"utilities-stage\">\n @for (value of [25, 50, 75, 100]; track value) {\n <div class=\"utilities-box mb-xs\" [class]=\"'w-' + value\">\n .w-{{ value }}\n </div>\n }\n </div>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Display</h3>\n <mat-button-toggle-group\n [value]=\"display()\"\n (change)=\"display.set($event.value)\"\n aria-label=\"Display utility\"\n >\n @for (d of displays; track d) {\n <mat-button-toggle [value]=\"d\">{{ d }}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n\n <div class=\"utilities-stage\">\n @for (n of [1, 2, 3]; track n) {\n <span class=\"utilities-box display-box\" [class]=\"display()\"\n >.{{ display() }}</span\n >\n }\n </div>\n\n <h4 class=\"font-title-small\">Responsive display</h4>\n <p class=\"font-body-medium\">\n Every display class also has a breakpoint variant,\n <code>.d-<value>-<breakpoint></code>, which applies from that\n breakpoint up (mobile-first). <code>xsmall</code> starts at 0px, so\n <code>.d-none-xsmall</code> behaves like <code>.d-none</code>: use it as\n the base and override it with a larger breakpoint.\n </p>\n <table class=\"utilities-table font-body-small\">\n <thead>\n <tr>\n <th>Breakpoint</th>\n <th>Screen size</th>\n <th>Device</th>\n <th>Class applies</th>\n <th>Example</th>\n </tr>\n </thead>\n <tbody>\n @for (bp of breakpoints; track bp.name) {\n <tr>\n <td>{{ bp.name }}</td>\n <td>{{ bp.size }}</td>\n <td>{{ bp.device }}</td>\n <td>{{ bp.applies }}</td>\n <td>\n <code>.d-none-{{ bp.name }}</code>\n </td>\n </tr>\n }\n </tbody>\n </table>\n <p class=\"font-body-medium\">\n Breakpoints follow the browser window, not the size of the element. The\n preview below is an iframe, so the classes inside it react to the preview\n width: pick a width to see which elements show.\n </p>\n <mat-button-toggle-group\n [value]=\"previewWidth()\"\n (change)=\"previewWidth.set($event.value)\"\n aria-label=\"Preview width\"\n >\n @for (bp of breakpoints; track bp.name) {\n <mat-button-toggle [value]=\"bp.previewWidth\">\n {{ bp.name }} · {{ bp.previewWidth }}px\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n <div class=\"utilities-stage responsive-stage\">\n <iframe\n class=\"responsive-preview\"\n title=\"Responsive display preview\"\n [style.width.px]=\"previewWidth()\"\n [srcdoc]=\"responsivePreview\"\n ></iframe>\n </div>\n <code class=\"utilities-code\"\n ><span class=\"d-inline-block d-none-medium\">Visible below\n 960px</span><br /><span class=\"d-none\n d-inline-block-medium\">Visible from 960px</span></code\n >\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Flex</h3>\n <mat-button-toggle-group\n [value]=\"flexDirection()\"\n (change)=\"flexDirection.set($event.value)\"\n aria-label=\"Flex direction utility\"\n >\n @for (direction of flexDirections; track direction) {\n <mat-button-toggle [value]=\"direction\">{{\n direction\n }}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n\n <div class=\"utilities-stage d-flex\" [class]=\"flexDirection()\">\n @for (n of [1, 2, 3]; track n) {\n <div class=\"utilities-box flex-box\">{{ n }}</div>\n }\n </div>\n <code class=\"utilities-code\"\n ><div class=\"d-flex {{ flexDirection() }}\"></code\n >\n\n <h4 class=\"font-title-small\">Centering: align-items vs justify-content</h4>\n <p class=\"font-body-medium\">\n A flex container has two axes. <code>justify-content</code> places the\n children along the <strong>main axis</strong>, which is the flex direction\n (horizontal in a row). <code>align-items</code> places them on the\n <strong>cross axis</strong> (vertical in a row). In a column the axes\n swap, so <code>justify-content</code> becomes vertical.\n </p>\n <table class=\"utilities-table font-body-small\">\n <thead>\n <tr>\n <th>Class</th>\n <th>CSS</th>\n <th>In a row</th>\n <th>In a column</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>.justify-content-center</code></td>\n <td><code>justify-content: center</code></td>\n <td>horizontal</td>\n <td>vertical</td>\n </tr>\n <tr>\n <td><code>.align-items-center</code></td>\n <td><code>align-items: center</code></td>\n <td>vertical</td>\n <td>horizontal</td>\n </tr>\n <tr>\n <td><code>.flex-center</code></td>\n <td><code>display: flex; align-items: center</code></td>\n <td>vertical only</td>\n <td>horizontal only</td>\n </tr>\n </tbody>\n </table>\n <p class=\"font-body-medium\">\n <code>.flex-center</code> only centers on the cross axis. To center on\n both axes, add <code>.justify-content-center</code>. The dashed lines\n below mark the center of each stage.\n </p>\n <div class=\"flex-center-compare\">\n @for (variant of flexCenterVariants; track variant) {\n <div class=\"flex-center-column\">\n <code class=\"utilities-code\">class=\"{{ variant }}\"</code>\n <div class=\"utilities-stage flex-center-stage\" [class]=\"variant\">\n <div class=\"utilities-box\">auto</div>\n <div class=\"utilities-box flex-center-medium\">48px</div>\n <div class=\"utilities-box flex-center-tall\">80px</div>\n </div>\n </div>\n }\n </div>\n\n <h4 class=\"font-title-small\">Try it</h4>\n <div class=\"utilities-controls\">\n @for (control of flexAlignControls; track control.label) {\n <div class=\"flex-align-control\">\n <span class=\"font-label-medium\">{{ control.label }}</span>\n <mat-button-toggle-group\n [value]=\"control.value()\"\n (change)=\"control.value.set($event.value)\"\n [attr.aria-label]=\"control.label\"\n >\n @for (option of control.options; track option) {\n <mat-button-toggle [value]=\"option\">{{\n option\n }}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n }\n </div>\n <div\n class=\"utilities-stage flex-center-stage flex-align-stage\"\n [class]=\"flexAlignClass()\"\n >\n <div class=\"utilities-box\">auto</div>\n <div class=\"utilities-box flex-center-medium\">48px</div>\n <div class=\"utilities-box flex-center-tall\">80px</div>\n </div>\n <code class=\"utilities-code\"\n ><div class=\"{{ flexAlignClass() }}\"></code\n >\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Text</h3>\n <mat-button-toggle-group\n [value]=\"textAlign()\"\n (change)=\"textAlign.set($event.value)\"\n aria-label=\"Text alignment utility\"\n >\n @for (align of textAligns; track align) {\n <mat-button-toggle [value]=\"align\">{{ align }}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n <p class=\"utilities-stage font-body-medium\" [class]=\"textAlign()\">\n .{{ textAlign() }} — <code>text-start</code> and <code>text-end</code>\n are aliases of left and right.\n </p>\n\n <div class=\"utilities-stage\">\n @for (transform of textTransforms; track transform) {\n <p class=\"font-body-medium\">\n <code>.{{ transform }}</code> →\n <span [class]=\"transform\">the quick brown fox</span>\n </p>\n }\n </div>\n <p class=\"font-body-medium\">\n Font utilities (<code>.font-display-large</code> …\n <code>.font-label-small</code>) are documented on the Typography page.\n </p>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Vertical align</h3>\n <div class=\"utilities-stage valign-stage font-headline-large\">\n @for (align of verticalAligns; track align) {\n <span class=\"valign-sample font-body-small\" [class]=\"align\">{{\n align\n }}</span>\n }\n </div>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Rotate</h3>\n <p class=\"font-body-medium\">\n <code>.rotate-<deg></code> rotates an element and animates the\n change, which makes it handy for chevrons and expand icons.\n </p>\n <mat-button-toggle-group\n [value]=\"rotation()\"\n (change)=\"rotation.set($event.value)\"\n aria-label=\"Rotation utility\"\n >\n @for (deg of rotations; track deg) {\n <mat-button-toggle [value]=\"deg\">{{ deg }}°</mat-button-toggle>\n }\n </mat-button-toggle-group>\n <div class=\"utilities-stage flex-center\">\n <div class=\"utilities-box rotate-box\" [class]=\"'rotate-' + rotation()\">\n ➜\n </div>\n <code class=\"utilities-code ml\">.rotate-{{ rotation() }}</code>\n </div>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Overflow</h3>\n <mat-button-toggle-group\n [value]=\"overflow()\"\n (change)=\"overflow.set($event.value)\"\n aria-label=\"Overflow utility\"\n >\n @for (o of overflows; track o) {\n <mat-button-toggle [value]=\"o\">{{ o }}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n <div class=\"utilities-stage\">\n <div class=\"overflow-box\" [class]=\"overflow()\">\n <div class=\"overflow-content font-body-small\">\n This content is wider and taller than its 240×80 container, so the\n overflow utility decides whether it spills out, gets clipped or\n scrolls.\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Visibility & position</h3>\n <div class=\"utilities-stage\">\n <span class=\"utilities-box d-inline-block\">before</span>\n <span class=\"utilities-box d-inline-block invisible\">.invisible</span>\n <span class=\"utilities-box d-inline-block\">after</span>\n </div>\n <p class=\"font-body-medium\">\n <code>.invisible</code> hides an element but keeps its space;\n <code>.d-none</code> and <code>.hidden</code> remove it from the layout.\n <code>.visible</code> restores it. <code>.clickable</code> sets a pointer\n cursor.\n </p>\n <p class=\"font-body-medium\">\n Position:\n @for (p of positions; track p) {\n <code>.{{ p }}</code\n >{{ $last ? '' : ', ' }}\n }\n — and <code>.float-left</code> / <code>.float-right</code> (aliases\n <code>-start</code> / <code>-end</code>).\n </p>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Elevation</h3>\n <div class=\"utilities-stage d-flex elevation-stage\">\n @for (level of elevations; track level) {\n <div class=\"elevation-box\" [class]=\"'onemrva-elevation-z' + level\">\n .onemrva-elevation-z{{ level }}\n </div>\n }\n </div>\n </section>\n</div>\n","demo-utilities.component.scss":"app-demo-utilities {\n .utilities-container {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n padding: 1rem;\n }\n\n .utilities-section {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 1rem;\n\n h3,\n h4,\n p {\n margin: 0;\n }\n }\n\n .utilities-controls {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 1rem;\n\n mat-slider {\n width: 240px;\n }\n }\n\n .utilities-stage {\n box-sizing: border-box;\n width: 100%;\n padding: 1rem;\n border: 1px dashed var(--mat-sys-outline);\n border-radius: 4px;\n background-color: var(--mat-sys-surface-container-high);\n }\n\n .utilities-box {\n box-sizing: border-box;\n padding: 0.5rem 0.75rem;\n border-radius: 4px;\n background-color: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n font-family: monospace;\n white-space: nowrap;\n }\n\n .utilities-code {\n display: block;\n margin: 0;\n font-family: monospace;\n color: var(--mat-sys-on-surface-variant);\n }\n\n .utilities-table {\n border-collapse: collapse;\n\n th,\n td {\n padding: 0.25rem 1rem 0.25rem 0;\n text-align: left;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n }\n }\n\n .responsive-stage {\n overflow-x: auto;\n }\n\n .responsive-preview {\n display: block;\n max-width: none;\n height: 120px;\n border: 1px solid var(--mat-sys-outline);\n background-color: var(--mat-sys-surface);\n transition: width 0.3s ease;\n }\n\n .sizing-stage {\n height: 200px;\n overflow: hidden;\n }\n\n .sizing-box {\n overflow: hidden;\n }\n\n .display-box {\n margin: 0.25rem;\n }\n\n .flex-box {\n margin: 0.25rem;\n text-align: center;\n min-width: 3rem;\n }\n\n .flex-center-compare {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n gap: 1rem;\n width: 100%;\n }\n\n .flex-center-column {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n .flex-center-stage {\n position: relative;\n height: 140px;\n gap: 0.5rem;\n\n // Guide lines on both centers, so the alignment on each axis is visible.\n &::before,\n &::after {\n content: '';\n position: absolute;\n }\n\n &::before {\n top: 50%;\n left: 0;\n right: 0;\n border-top: 1px dashed var(--mat-sys-tertiary);\n }\n\n &::after {\n left: 50%;\n top: 0;\n bottom: 0;\n border-left: 1px dashed var(--mat-sys-tertiary);\n }\n\n .utilities-box {\n position: relative;\n min-height: 24px;\n padding-top: 0;\n padding-bottom: 0;\n line-height: 24px;\n }\n }\n\n // Tall enough for the three boxes stacked in a column.\n .flex-center-stage.flex-align-stage {\n height: 260px;\n }\n\n .flex-align-control {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .flex-center-medium {\n height: 48px;\n }\n\n .flex-center-tall {\n height: 80px;\n }\n\n .valign-stage {\n white-space: nowrap;\n overflow-x: auto;\n\n .valign-sample {\n display: inline-block;\n margin-right: 0.5rem;\n padding: 0 0.25rem;\n border: 1px solid var(--mat-sys-outline);\n font-family: monospace;\n }\n }\n\n .rotate-box {\n display: inline-block;\n font-size: 1.5rem;\n }\n\n .overflow-box {\n width: 240px;\n height: 80px;\n border: 1px solid var(--mat-sys-outline);\n background-color: var(--mat-sys-surface);\n }\n\n .overflow-content {\n width: 360px;\n padding: 0.5rem;\n background-color: var(--mat-sys-secondary);\n color: var(--mat-sys-on-secondary);\n }\n\n .elevation-stage {\n flex-wrap: wrap;\n gap: 1.5rem;\n }\n\n .elevation-box {\n padding: 1.5rem 1rem;\n border-radius: 8px;\n background-color: var(--mat-sys-surface);\n font-family: monospace;\n }\n}\n","demo-utilities.component.ts":"import {\n ChangeDetectionStrategy,\n Component,\n computed,\n DOCUMENT,\n inject,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { MatSliderModule } from '@angular/material/slider';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\ntype SizingPrefix = 'w' | 'h' | 'vw' | 'vh' | 'mw' | 'mh';\n\ninterface SizingUtility {\n prefix: SizingPrefix;\n property: string;\n unit: string;\n}\n\n@Component({\n selector: 'app-demo-utilities',\n templateUrl: 'demo-utilities.component.html',\n styleUrl: 'demo-utilities.component.scss',\n standalone: true,\n imports: [\n FormsModule,\n MatButtonModule,\n MatButtonToggleModule,\n MatSliderModule,\n ],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DemoUtilitiesComponent extends DemoComponentBase {\n readonly sizingUtilities: SizingUtility[] = [\n { prefix: 'w', property: 'width', unit: '%' },\n { prefix: 'h', property: 'height', unit: '%' },\n { prefix: 'mw', property: 'max-width', unit: '%' },\n { prefix: 'mh', property: 'max-height', unit: '%' },\n { prefix: 'vw', property: 'width', unit: 'vw' },\n { prefix: 'vh', property: 'height', unit: 'vh' },\n ];\n\n readonly sizingPrefix = signal<SizingPrefix>('w');\n readonly sizingValue = signal(50);\n\n readonly sizingUtility = computed(() =>\n this.sizingUtilities.find(u => u.prefix === this.sizingPrefix())!,\n );\n readonly sizingClass = computed(\n () => `${this.sizingPrefix()}-${this.sizingValue()}`,\n );\n readonly sizingCss = computed(() => {\n const { property, unit } = this.sizingUtility();\n return `${property}: ${this.sizingValue()}${unit} !important;`;\n });\n\n readonly displays = [\n 'd-block',\n 'd-inline',\n 'd-inline-block',\n 'd-flex',\n 'd-inline-flex',\n 'd-grid',\n 'd-none',\n ];\n readonly display = signal('d-block');\n\n readonly flexDirections = [\n 'flex-row',\n 'flex-row-reverse',\n 'flex-column',\n 'flex-column-reverse',\n ];\n readonly flexDirection = signal('flex-row');\n\n readonly flexCenterVariants = [\n 'd-flex',\n 'flex-center',\n 'd-flex justify-content-center',\n 'flex-center justify-content-center',\n ];\n\n readonly flexAlignDirection = signal('flex-row');\n readonly justifyContent = signal('justify-content-center');\n readonly alignItems = signal('align-items-center');\n\n readonly flexAlignControls = [\n {\n label: 'Direction',\n value: this.flexAlignDirection,\n options: ['flex-row', 'flex-column'],\n },\n {\n label: 'justify-content (main axis)',\n value: this.justifyContent,\n options: [\n 'justify-content-start',\n 'justify-content-center',\n 'justify-content-end',\n 'justify-content-between',\n 'justify-content-around',\n 'justify-content-evenly',\n ],\n },\n {\n label: 'align-items (cross axis)',\n value: this.alignItems,\n options: [\n 'align-items-stretch',\n 'align-items-start',\n 'align-items-center',\n 'align-items-end',\n 'align-items-baseline',\n ],\n },\n ];\n\n readonly flexAlignClass = computed(\n () =>\n `d-flex ${this.flexAlignDirection()} ${this.justifyContent()} ${this.alignItems()}`,\n );\n\n readonly setupSnippet = `@use '@onemrvapublic/design-system' as theme;\n\n.onemrva-theme {\n @include theme.onemrva();\n}`;\n\n // Mirrors $breakpoints in theme/utilities/_variables.scss.\n readonly breakpoints = [\n {\n name: 'xsmall',\n previewWidth: 360,\n size: '< 600px',\n device: 'mobile',\n applies: 'always',\n },\n {\n name: 'small',\n previewWidth: 768,\n size: '600 – 959px',\n device: 'tablet',\n applies: '≥ 600px',\n },\n {\n name: 'medium',\n previewWidth: 1024,\n size: '960 – 1279px',\n device: 'desktop',\n applies: '≥ 960px',\n },\n {\n name: 'large',\n previewWidth: 1366,\n size: '1280 – 1535px',\n device: 'desktop',\n applies: '≥ 1280px',\n },\n {\n name: 'xlarge',\n previewWidth: 1600,\n size: '1536 – 1919px',\n device: 'desktop',\n applies: '≥ 1536px',\n },\n {\n name: 'xxlarge',\n previewWidth: 1920,\n size: '≥ 1920px',\n device: 'desktop',\n applies: '≥ 1920px',\n },\n ];\n\n readonly previewWidth = signal(360);\n\n // Breakpoints are media queries, so they only react to a real viewport. The\n // preview iframe gets the page's own stylesheets and its width is the\n // viewport the classes see.\n readonly responsivePreview: SafeHtml = inject(\n DomSanitizer,\n ).bypassSecurityTrustHtml(this.buildResponsivePreview());\n\n readonly textAligns = ['text-left', 'text-center', 'text-right'];\n readonly textAlign = signal('text-left');\n\n readonly textTransforms = [\n 'text-lowercase',\n 'text-uppercase',\n 'text-capitalize',\n ];\n\n readonly rotations = [0, 45, 90, 135, 180, 225, 270];\n readonly rotation = signal(0);\n\n readonly overflows = [\n 'overflow-visible',\n 'overflow-hidden',\n 'overflow-auto',\n 'overflow-scroll',\n ];\n readonly overflow = signal('overflow-auto');\n\n readonly positions = [\n 'position-static',\n 'position-relative',\n 'position-absolute',\n 'position-fixed',\n 'position-sticky',\n ];\n\n readonly verticalAligns = [\n 'align-baseline',\n 'align-top',\n 'align-middle',\n 'align-bottom',\n 'align-text-top',\n 'align-text-bottom',\n ];\n\n readonly elevations = [0, 1, 2, 3, 4, 5];\n\n private buildResponsivePreview(): string {\n const document = inject(DOCUMENT);\n const styles = Array.from(\n document.querySelectorAll<HTMLLinkElement | HTMLStyleElement>(\n 'link[rel=\"stylesheet\"], style',\n ),\n )\n .map(el =>\n el instanceof HTMLLinkElement\n ? `<link rel=\"stylesheet\" href=\"${el.href}\">`\n : `<style>${el.textContent}</style>`,\n )\n .join('');\n const badges = this.breakpoints\n .map(\n bp =>\n `<span class=\"box d-none d-inline-block-${bp.name}\">${bp.name} ${bp.applies}</span>`,\n )\n .join('');\n return `<!doctype html><html><head>${styles}<style>\n body { margin: 0; padding: 8px; background: var(--mat-sys-surface-container-high); }\n .box { margin: 4px; padding: 4px 8px; border-radius: 4px; font-family: monospace;\n background: var(--mat-sys-primary); color: var(--mat-sys-on-primary); }\n .box.alt { background: var(--mat-sys-tertiary); color: var(--mat-sys-on-tertiary); }\n </style></head><body class=\"onemrva-theme\">\n <div>\n <span class=\"box alt d-inline-block d-none-medium\">Visible below 960px</span>\n <span class=\"box alt d-none d-inline-block-medium\">Visible from 960px</span>\n </div>\n <div>${badges}</div>\n </body></html>`;\n }\n}\n"}
|
|
1
|
+
{"demo-utilities.component.html":"<!-- Utility classes are global: they come with the theme, no import needed. -->\n\n<div class=\"utilities-container\">\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Setup</h3>\n <p class=\"font-body-medium\">\n The utility classes are emitted by the theme mixin, so any element inside\n <code>.onemrva-theme</code> can use them. In your global\n <code>styles.scss</code>:\n </p>\n <pre class=\"utilities-stage utilities-code\">{{ setupSnippet }}</pre>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Sizing</h3>\n <p class=\"font-body-medium\">\n <code>w-</code>, <code>h-</code>, <code>mw-</code> and\n <code>mh-</code> set width, height, max-width and max-height as a\n percentage of the parent. <code>vw-</code> and <code>vh-</code> use the\n viewport instead. Every value from 0 to 100 exists, plus\n <code>w-auto</code> and <code>h-auto</code>.\n </p>\n\n <div class=\"utilities-controls\">\n <mat-button-toggle-group\n [value]=\"sizingPrefix()\"\n (change)=\"sizingPrefix.set($event.value)\"\n aria-label=\"Sizing utility\"\n >\n @for (utility of sizingUtilities; track utility.prefix) {\n <mat-button-toggle [value]=\"utility.prefix\">\n {{ utility.prefix }}-\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n\n <mat-slider min=\"0\" max=\"100\" step=\"5\" discrete>\n <input\n matSliderThumb\n [ngModel]=\"sizingValue()\"\n (ngModelChange)=\"sizingValue.set($event)\"\n aria-label=\"Sizing value\"\n />\n </mat-slider>\n </div>\n\n <div class=\"utilities-stage sizing-stage\">\n <div class=\"utilities-box sizing-box\" [class]=\"sizingClass()\">\n .{{ sizingClass() }}\n </div>\n </div>\n <code class=\"utilities-code\"\n >.{{ sizingClass() }} {{ '{' }} {{ sizingCss() }} {{ '}' }}</code\n >\n\n <div class=\"utilities-stage\">\n @for (value of [25, 50, 75, 100]; track value) {\n <div class=\"utilities-box mb-xs\" [class]=\"'w-' + value\">\n .w-{{ value }}\n </div>\n }\n </div>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Display</h3>\n <mat-button-toggle-group\n [value]=\"display()\"\n (change)=\"display.set($event.value)\"\n aria-label=\"Display utility\"\n >\n @for (d of displays; track d) {\n <mat-button-toggle [value]=\"d\">{{ d }}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n\n <div class=\"utilities-stage\">\n @for (n of [1, 2, 3]; track n) {\n <span class=\"utilities-box display-box\" [class]=\"display()\"\n >.{{ display() }}</span\n >\n }\n </div>\n\n <h4 class=\"font-title-small\">Responsive display</h4>\n <p class=\"font-body-medium\">\n Every display class also has a breakpoint variant,\n <code>.d-<value>-<breakpoint></code>, which applies from that\n breakpoint up (mobile-first). <code>xsmall</code> starts at 0px, so\n <code>.d-none-xsmall</code> behaves like <code>.d-none</code>: use it as\n the base and override it with a larger breakpoint.\n </p>\n <table class=\"utilities-table font-body-small\">\n <thead>\n <tr>\n <th>Breakpoint</th>\n <th>Screen size</th>\n <th>Device</th>\n <th>Class applies</th>\n <th>Example</th>\n </tr>\n </thead>\n <tbody>\n @for (bp of breakpoints; track bp.name) {\n <tr>\n <td>{{ bp.name }}</td>\n <td>{{ bp.size }}</td>\n <td>{{ bp.device }}</td>\n <td>{{ bp.applies }}</td>\n <td>\n <code>.d-none-{{ bp.name }}</code>\n </td>\n </tr>\n }\n </tbody>\n </table>\n <p class=\"font-body-medium\">\n Breakpoints follow the browser window, not the size of the element. The\n preview below is an iframe, so the classes inside it react to the preview\n width: pick a width to see which elements show.\n </p>\n <mat-button-toggle-group\n [value]=\"previewWidth()\"\n (change)=\"previewWidth.set($event.value)\"\n aria-label=\"Preview width\"\n >\n @for (bp of breakpoints; track bp.name) {\n <mat-button-toggle [value]=\"bp.previewWidth\">\n {{ bp.name }} · {{ bp.previewWidth }}px\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n <div class=\"utilities-stage responsive-stage\">\n <iframe\n class=\"responsive-preview\"\n title=\"Responsive display preview\"\n [style.width.px]=\"previewWidth()\"\n [srcdoc]=\"responsivePreview\"\n ></iframe>\n </div>\n <code class=\"utilities-code\"\n ><span class=\"d-inline-block d-none-medium\">Visible below\n 960px</span><br /><span class=\"d-none\n d-inline-block-medium\">Visible from 960px</span></code\n >\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Flex</h3>\n <mat-button-toggle-group\n [value]=\"flexDirection()\"\n (change)=\"flexDirection.set($event.value)\"\n aria-label=\"Flex direction utility\"\n >\n @for (direction of flexDirections; track direction) {\n <mat-button-toggle [value]=\"direction\">{{\n direction\n }}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n\n <div class=\"utilities-stage d-flex\" [class]=\"flexDirection()\">\n @for (n of [1, 2, 3]; track n) {\n <div class=\"utilities-box flex-box\">{{ n }}</div>\n }\n </div>\n <code class=\"utilities-code\"\n ><div class=\"d-flex {{ flexDirection() }}\"></code\n >\n\n <h4 class=\"font-title-small\">Centering: align-items vs justify-content</h4>\n <p class=\"font-body-medium\">\n A flex container has two axes. <code>justify-content</code> places the\n children along the <strong>main axis</strong>, which is the flex direction\n (horizontal in a row). <code>align-items</code> places them on the\n <strong>cross axis</strong> (vertical in a row). In a column the axes\n swap, so <code>justify-content</code> becomes vertical.\n </p>\n <table class=\"utilities-table font-body-small\">\n <thead>\n <tr>\n <th>Class</th>\n <th>CSS</th>\n <th>In a row</th>\n <th>In a column</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><code>.justify-content-center</code></td>\n <td><code>justify-content: center</code></td>\n <td>horizontal</td>\n <td>vertical</td>\n </tr>\n <tr>\n <td><code>.align-items-center</code></td>\n <td><code>align-items: center</code></td>\n <td>vertical</td>\n <td>horizontal</td>\n </tr>\n <tr>\n <td><code>.flex-center</code></td>\n <td><code>display: flex; align-items: center</code></td>\n <td>vertical only</td>\n <td>horizontal only</td>\n </tr>\n </tbody>\n </table>\n <p class=\"font-body-medium\">\n <code>.flex-center</code> only centers on the cross axis. To center on\n both axes, add <code>.justify-content-center</code>. The dashed lines\n below mark the center of each stage.\n </p>\n <div class=\"flex-center-compare\">\n @for (variant of flexCenterVariants; track variant) {\n <div class=\"flex-center-column\">\n <code class=\"utilities-code\">class=\"{{ variant }}\"</code>\n <div class=\"utilities-stage flex-center-stage\" [class]=\"variant\">\n <div class=\"utilities-box\">auto</div>\n <div class=\"utilities-box flex-center-medium\">48px</div>\n <div class=\"utilities-box flex-center-tall\">80px</div>\n </div>\n </div>\n }\n </div>\n\n <h4 class=\"font-title-small\">Try it</h4>\n <div class=\"utilities-controls\">\n @for (control of flexAlignControls; track control.label) {\n <div class=\"flex-align-control\">\n <span class=\"font-label-medium\">{{ control.label }}</span>\n <mat-button-toggle-group\n [value]=\"control.value()\"\n (change)=\"control.value.set($event.value)\"\n [attr.aria-label]=\"control.label\"\n >\n @for (option of control.options; track option) {\n <mat-button-toggle [value]=\"option\">{{\n option\n }}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n }\n </div>\n <div\n class=\"utilities-stage flex-center-stage flex-align-stage\"\n [class]=\"flexAlignClass()\"\n >\n <div class=\"utilities-box\">auto</div>\n <div class=\"utilities-box flex-center-medium\">48px</div>\n <div class=\"utilities-box flex-center-tall\">80px</div>\n </div>\n <code class=\"utilities-code\"\n ><div class=\"{{ flexAlignClass() }}\"></code\n >\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Text</h3>\n <mat-button-toggle-group\n [value]=\"textAlign()\"\n (change)=\"textAlign.set($event.value)\"\n aria-label=\"Text alignment utility\"\n >\n @for (align of textAligns; track align) {\n <mat-button-toggle [value]=\"align\">{{ align }}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n <p class=\"utilities-stage font-body-medium\" [class]=\"textAlign()\">\n .{{ textAlign() }} — <code>text-start</code> and <code>text-end</code>\n are aliases of left and right.\n </p>\n\n <div class=\"utilities-stage\">\n @for (transform of textTransforms; track transform) {\n <p class=\"font-body-medium\">\n <code>.{{ transform }}</code> →\n <span [class]=\"transform\">the quick brown fox</span>\n </p>\n }\n </div>\n <p class=\"font-body-medium\">\n Font utilities (<code>.font-display-large</code> …\n <code>.font-label-small</code>) are documented on the Typography page.\n </p>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Vertical align</h3>\n <div class=\"utilities-stage valign-stage font-headline-large\">\n @for (align of verticalAligns; track align) {\n <span class=\"valign-sample font-body-small\" [class]=\"align\">{{\n align\n }}</span>\n }\n </div>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Rotate</h3>\n <p class=\"font-body-medium\">\n <code>.rotate-<deg></code> rotates an element and animates the\n change, which makes it handy for chevrons and expand icons.\n </p>\n <mat-button-toggle-group\n [value]=\"rotation()\"\n (change)=\"rotation.set($event.value)\"\n aria-label=\"Rotation utility\"\n >\n @for (deg of rotations; track deg) {\n <mat-button-toggle [value]=\"deg\">{{ deg }}°</mat-button-toggle>\n }\n </mat-button-toggle-group>\n <div class=\"utilities-stage flex-center\">\n <div class=\"utilities-box rotate-box\" [class]=\"'rotate-' + rotation()\">\n ➜\n </div>\n <code class=\"utilities-code ml\">.rotate-{{ rotation() }}</code>\n </div>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Overflow</h3>\n <mat-button-toggle-group\n [value]=\"overflow()\"\n (change)=\"overflow.set($event.value)\"\n aria-label=\"Overflow utility\"\n >\n @for (o of overflows; track o) {\n <mat-button-toggle [value]=\"o\">{{ o }}</mat-button-toggle>\n }\n </mat-button-toggle-group>\n <div class=\"utilities-stage\">\n <!-- Focusable so keyboard users can scroll it (axe scrollable-region-focusable). -->\n <div\n class=\"overflow-box\"\n [class]=\"overflow()\"\n tabindex=\"0\"\n role=\"region\"\n aria-label=\"Overflow example\"\n >\n <div class=\"overflow-content font-body-small\">\n This content is wider and taller than its 240×80 container, so the\n overflow utility decides whether it spills out, gets clipped or\n scrolls.\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Visibility & position</h3>\n <div class=\"utilities-stage\">\n <span class=\"utilities-box d-inline-block\">before</span>\n <span class=\"utilities-box d-inline-block invisible\">.invisible</span>\n <span class=\"utilities-box d-inline-block\">after</span>\n </div>\n <p class=\"font-body-medium\">\n <code>.invisible</code> hides an element but keeps its space;\n <code>.d-none</code> and <code>.hidden</code> remove it from the layout.\n <code>.visible</code> restores it. <code>.clickable</code> sets a pointer\n cursor.\n </p>\n <p class=\"font-body-medium\">\n Position:\n @for (p of positions; track p) {\n <code>.{{ p }}</code\n >{{ $last ? '' : ', ' }}\n }\n — and <code>.float-left</code> / <code>.float-right</code> (aliases\n <code>-start</code> / <code>-end</code>).\n </p>\n </section>\n\n <section class=\"utilities-section\">\n <h3 class=\"font-title-large\">Elevation</h3>\n <div class=\"utilities-stage d-flex elevation-stage\">\n @for (level of elevations; track level) {\n <div class=\"elevation-box\" [class]=\"'onemrva-elevation-z' + level\">\n .onemrva-elevation-z{{ level }}\n </div>\n }\n </div>\n </section>\n</div>\n","demo-utilities.component.scss":"app-demo-utilities {\n .utilities-container {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n padding: 1rem;\n }\n\n .utilities-section {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 1rem;\n\n h3,\n h4,\n p {\n margin: 0;\n }\n }\n\n .utilities-controls {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 1rem;\n\n mat-slider {\n width: 240px;\n }\n }\n\n .utilities-stage {\n box-sizing: border-box;\n width: 100%;\n padding: 1rem;\n border: 1px dashed var(--mat-sys-outline);\n border-radius: 4px;\n background-color: var(--mat-sys-surface-container-high);\n }\n\n .utilities-box {\n box-sizing: border-box;\n padding: 0.5rem 0.75rem;\n border-radius: 4px;\n background-color: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n font-family: monospace;\n white-space: nowrap;\n }\n\n .utilities-code {\n display: block;\n margin: 0;\n font-family: monospace;\n color: var(--mat-sys-on-surface-variant);\n }\n\n .utilities-table {\n border-collapse: collapse;\n\n th,\n td {\n padding: 0.25rem 1rem 0.25rem 0;\n text-align: left;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n }\n }\n\n .responsive-stage {\n overflow-x: auto;\n }\n\n .responsive-preview {\n display: block;\n max-width: none;\n height: 120px;\n border: 1px solid var(--mat-sys-outline);\n background-color: var(--mat-sys-surface);\n transition: width 0.3s ease;\n }\n\n .sizing-stage {\n height: 200px;\n overflow: hidden;\n }\n\n .sizing-box {\n overflow: hidden;\n }\n\n .display-box {\n margin: 0.25rem;\n }\n\n .flex-box {\n margin: 0.25rem;\n text-align: center;\n min-width: 3rem;\n }\n\n .flex-center-compare {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n gap: 1rem;\n width: 100%;\n }\n\n .flex-center-column {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n\n .flex-center-stage {\n position: relative;\n height: 140px;\n gap: 0.5rem;\n\n // Guide lines on both centers, so the alignment on each axis is visible.\n &::before,\n &::after {\n content: '';\n position: absolute;\n }\n\n &::before {\n top: 50%;\n left: 0;\n right: 0;\n border-top: 1px dashed var(--mat-sys-tertiary);\n }\n\n &::after {\n left: 50%;\n top: 0;\n bottom: 0;\n border-left: 1px dashed var(--mat-sys-tertiary);\n }\n\n .utilities-box {\n position: relative;\n min-height: 24px;\n padding-top: 0;\n padding-bottom: 0;\n line-height: 24px;\n }\n }\n\n // Tall enough for the three boxes stacked in a column.\n .flex-center-stage.flex-align-stage {\n height: 260px;\n }\n\n .flex-align-control {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .flex-center-medium {\n height: 48px;\n }\n\n .flex-center-tall {\n height: 80px;\n }\n\n .valign-stage {\n white-space: nowrap;\n overflow-x: auto;\n\n .valign-sample {\n display: inline-block;\n margin-right: 0.5rem;\n padding: 0 0.25rem;\n border: 1px solid var(--mat-sys-outline);\n font-family: monospace;\n }\n }\n\n .rotate-box {\n display: inline-block;\n font-size: 1.5rem;\n }\n\n .overflow-box {\n width: 240px;\n height: 80px;\n border: 1px solid var(--mat-sys-outline);\n background-color: var(--mat-sys-surface);\n }\n\n .overflow-content {\n width: 360px;\n padding: 0.5rem;\n background-color: var(--mat-sys-secondary);\n color: var(--mat-sys-on-secondary);\n }\n\n .elevation-stage {\n flex-wrap: wrap;\n gap: 1.5rem;\n }\n\n .elevation-box {\n padding: 1.5rem 1rem;\n border-radius: 8px;\n background-color: var(--mat-sys-surface);\n font-family: monospace;\n }\n}\n","demo-utilities.component.ts":"import {\n ChangeDetectionStrategy,\n Component,\n computed,\n DOCUMENT,\n inject,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { MatSliderModule } from '@angular/material/slider';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\ntype SizingPrefix = 'w' | 'h' | 'vw' | 'vh' | 'mw' | 'mh';\n\ninterface SizingUtility {\n prefix: SizingPrefix;\n property: string;\n unit: string;\n}\n\n@Component({\n selector: 'app-demo-utilities',\n templateUrl: 'demo-utilities.component.html',\n styleUrl: 'demo-utilities.component.scss',\n standalone: true,\n imports: [\n FormsModule,\n MatButtonModule,\n MatButtonToggleModule,\n MatSliderModule,\n ],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DemoUtilitiesComponent extends DemoComponentBase {\n readonly sizingUtilities: SizingUtility[] = [\n { prefix: 'w', property: 'width', unit: '%' },\n { prefix: 'h', property: 'height', unit: '%' },\n { prefix: 'mw', property: 'max-width', unit: '%' },\n { prefix: 'mh', property: 'max-height', unit: '%' },\n { prefix: 'vw', property: 'width', unit: 'vw' },\n { prefix: 'vh', property: 'height', unit: 'vh' },\n ];\n\n readonly sizingPrefix = signal<SizingPrefix>('w');\n readonly sizingValue = signal(50);\n\n readonly sizingUtility = computed(() =>\n this.sizingUtilities.find(u => u.prefix === this.sizingPrefix())!,\n );\n readonly sizingClass = computed(\n () => `${this.sizingPrefix()}-${this.sizingValue()}`,\n );\n readonly sizingCss = computed(() => {\n const { property, unit } = this.sizingUtility();\n return `${property}: ${this.sizingValue()}${unit} !important;`;\n });\n\n readonly displays = [\n 'd-block',\n 'd-inline',\n 'd-inline-block',\n 'd-flex',\n 'd-inline-flex',\n 'd-grid',\n 'd-none',\n ];\n readonly display = signal('d-block');\n\n readonly flexDirections = [\n 'flex-row',\n 'flex-row-reverse',\n 'flex-column',\n 'flex-column-reverse',\n ];\n readonly flexDirection = signal('flex-row');\n\n readonly flexCenterVariants = [\n 'd-flex',\n 'flex-center',\n 'd-flex justify-content-center',\n 'flex-center justify-content-center',\n ];\n\n readonly flexAlignDirection = signal('flex-row');\n readonly justifyContent = signal('justify-content-center');\n readonly alignItems = signal('align-items-center');\n\n readonly flexAlignControls = [\n {\n label: 'Direction',\n value: this.flexAlignDirection,\n options: ['flex-row', 'flex-column'],\n },\n {\n label: 'justify-content (main axis)',\n value: this.justifyContent,\n options: [\n 'justify-content-start',\n 'justify-content-center',\n 'justify-content-end',\n 'justify-content-between',\n 'justify-content-around',\n 'justify-content-evenly',\n ],\n },\n {\n label: 'align-items (cross axis)',\n value: this.alignItems,\n options: [\n 'align-items-stretch',\n 'align-items-start',\n 'align-items-center',\n 'align-items-end',\n 'align-items-baseline',\n ],\n },\n ];\n\n readonly flexAlignClass = computed(\n () =>\n `d-flex ${this.flexAlignDirection()} ${this.justifyContent()} ${this.alignItems()}`,\n );\n\n readonly setupSnippet = `@use '@onemrvapublic/design-system' as theme;\n\n.onemrva-theme {\n @include theme.onemrva();\n}`;\n\n // Mirrors $breakpoints in theme/utilities/_variables.scss.\n readonly breakpoints = [\n {\n name: 'xsmall',\n previewWidth: 360,\n size: '< 600px',\n device: 'mobile',\n applies: 'always',\n },\n {\n name: 'small',\n previewWidth: 768,\n size: '600 – 959px',\n device: 'tablet',\n applies: '≥ 600px',\n },\n {\n name: 'medium',\n previewWidth: 1024,\n size: '960 – 1279px',\n device: 'desktop',\n applies: '≥ 960px',\n },\n {\n name: 'large',\n previewWidth: 1366,\n size: '1280 – 1535px',\n device: 'desktop',\n applies: '≥ 1280px',\n },\n {\n name: 'xlarge',\n previewWidth: 1600,\n size: '1536 – 1919px',\n device: 'desktop',\n applies: '≥ 1536px',\n },\n {\n name: 'xxlarge',\n previewWidth: 1920,\n size: '≥ 1920px',\n device: 'desktop',\n applies: '≥ 1920px',\n },\n ];\n\n readonly previewWidth = signal(360);\n\n // Breakpoints are media queries, so they only react to a real viewport. The\n // preview iframe gets the page's own stylesheets and its width is the\n // viewport the classes see.\n readonly responsivePreview: SafeHtml = inject(\n DomSanitizer,\n ).bypassSecurityTrustHtml(this.buildResponsivePreview());\n\n readonly textAligns = ['text-left', 'text-center', 'text-right'];\n readonly textAlign = signal('text-left');\n\n readonly textTransforms = [\n 'text-lowercase',\n 'text-uppercase',\n 'text-capitalize',\n ];\n\n readonly rotations = [0, 45, 90, 135, 180, 225, 270];\n readonly rotation = signal(0);\n\n readonly overflows = [\n 'overflow-visible',\n 'overflow-hidden',\n 'overflow-auto',\n 'overflow-scroll',\n ];\n readonly overflow = signal('overflow-auto');\n\n readonly positions = [\n 'position-static',\n 'position-relative',\n 'position-absolute',\n 'position-fixed',\n 'position-sticky',\n ];\n\n readonly verticalAligns = [\n 'align-baseline',\n 'align-top',\n 'align-middle',\n 'align-bottom',\n 'align-text-top',\n 'align-text-bottom',\n ];\n\n readonly elevations = [0, 1, 2, 3, 4, 5];\n\n private buildResponsivePreview(): string {\n const document = inject(DOCUMENT);\n const styles = Array.from(\n document.querySelectorAll<HTMLLinkElement | HTMLStyleElement>(\n 'link[rel=\"stylesheet\"], style',\n ),\n )\n .map(el =>\n el instanceof HTMLLinkElement\n ? `<link rel=\"stylesheet\" href=\"${el.href}\">`\n : `<style>${el.textContent}</style>`,\n )\n .join('');\n const badges = this.breakpoints\n .map(\n bp =>\n `<span class=\"box d-none d-inline-block-${bp.name}\">${bp.name} ${bp.applies}</span>`,\n )\n .join('');\n return `<!doctype html><html><head>${styles}<style>\n body { margin: 0; padding: 8px; background: var(--mat-sys-surface-container-high); }\n .box { margin: 4px; padding: 4px 8px; border-radius: 4px; font-family: monospace;\n background: var(--mat-sys-primary); color: var(--mat-sys-on-primary); }\n .box.alt { background: var(--mat-sys-tertiary); color: var(--mat-sys-on-tertiary); }\n </style></head><body class=\"onemrva-theme\">\n <div>\n <span class=\"box alt d-inline-block d-none-medium\">Visible below 960px</span>\n <span class=\"box alt d-none d-inline-block-medium\">Visible from 960px</span>\n </div>\n <div>${badges}</div>\n </body></html>`;\n }\n}\n"}
|
package/browser/main.js
CHANGED
|
@@ -10691,7 +10691,7 @@ mat-timepicker {
|
|
|
10691
10691
|
<span class="box alt d-none d-inline-block-medium">Visible from 960px</span>
|
|
10692
10692
|
</div>
|
|
10693
10693
|
<div>${r}</div>
|
|
10694
|
-
</body></html>`}static{this.\u0275fac=(()=>{let e;return function(r){return (e||(e=U(t)))(r||t)}})();}static{this.\u0275cmp=x({type:t,selectors:[["app-demo-utilities"]],features:[N],decls:312,vars:36,consts:[[1,"utilities-container"],[1,"utilities-section"],[1,"font-title-large"],[1,"font-body-medium"],[1,"utilities-stage","utilities-code"],[1,"utilities-controls"],["aria-label","Sizing utility",3,"change","value"],[3,"value"],["min","0","max","100","step","5","discrete",""],["matSliderThumb","","aria-label","Sizing value",3,"ngModelChange","ngModel"],[1,"utilities-stage","sizing-stage"],[1,"utilities-box","sizing-box"],[1,"utilities-code"],[1,"utilities-stage"],[1,"utilities-box","mb-xs",3,"class"],["aria-label","Display utility",3,"change","value"],[1,"utilities-box","display-box",3,"class"],[1,"font-title-small"],[1,"utilities-table","font-body-small"],["aria-label","Preview width",3,"change","value"],[1,"utilities-stage","responsive-stage"],["title","Responsive display preview",1,"responsive-preview",3,"srcdoc"],["aria-label","Flex direction utility",3,"change","value"],[1,"utilities-stage","d-flex"],[1,"utilities-box","flex-box"],[1,"flex-center-compare"],[1,"flex-center-column"],[1,"flex-align-control"],[1,"utilities-stage","flex-center-stage","flex-align-stage"],[1,"utilities-box"],[1,"utilities-box","flex-center-medium"],[1,"utilities-box","flex-center-tall"],["aria-label","Text alignment utility",3,"change","value"],[1,"utilities-stage","font-body-medium"],[1,"utilities-stage","valign-stage","font-headline-large"],[1,"valign-sample","font-body-small",3,"class"],["aria-label","Rotation utility",3,"change","value"],[1,"utilities-stage","flex-center"],[1,"utilities-box","rotate-box"],[1,"utilities-code","ml"],["aria-label","Overflow utility",3,"change","value"],[1,"overflow-box"],[1,"overflow-content","font-body-small"],[1,"utilities-box","d-inline-block"],[1,"utilities-box","d-inline-block","invisible"],[1,"utilities-stage","d-flex","elevation-stage"],[1,"elevation-box",3,"class"],[1,"utilities-box","mb-xs"],[1,"utilities-box","display-box"],[1,"utilities-stage","flex-center-stage"],[1,"font-label-medium"],[3,"change","value"],[1,"valign-sample","font-body-small"],[1,"elevation-box"]],template:function(n,r){n&1&&(c(0,"div",0)(1,"section",1)(2,"h3",2),p(3,"Setup"),d(),c(4,"p",3),p(5," The utility classes are emitted by the theme mixin, so any element inside "),c(6,"code"),p(7,".onemrva-theme"),d(),p(8," can use them. In your global "),c(9,"code"),p(10,"styles.scss"),d(),p(11,": "),d(),c(12,"pre",4),p(13),d()(),c(14,"section",1)(15,"h3",2),p(16,"Sizing"),d(),c(17,"p",3)(18,"code"),p(19,"w-"),d(),p(20,", "),c(21,"code"),p(22,"h-"),d(),p(23,", "),c(24,"code"),p(25,"mw-"),d(),p(26," and "),c(27,"code"),p(28,"mh-"),d(),p(29," set width, height, max-width and max-height as a percentage of the parent. "),c(30,"code"),p(31,"vw-"),d(),p(32," and "),c(33,"code"),p(34,"vh-"),d(),p(35," use the viewport instead. Every value from 0 to 100 exists, plus "),c(36,"code"),p(37,"w-auto"),d(),p(38," and "),c(39,"code"),p(40,"h-auto"),d(),p(41,". "),d(),c(42,"div",5)(43,"mat-button-toggle-group",6),T("change",function(a){return r.sizingPrefix.set(a.value)}),de(44,JZe,2,2,"mat-button-toggle",7,ZZe),d(),c(46,"mat-slider",8)(47,"input",9),T("ngModelChange",function(a){return r.sizingValue.set(a)}),d(),Se(),d()(),c(48,"div",10)(49,"div",11),p(50),d()(),c(51,"code",12),p(52),d(),c(53,"div",13),de(54,eXe,2,3,"div",14,_t),d()(),c(56,"section",1)(57,"h3",2),p(58,"Display"),d(),c(59,"mat-button-toggle-group",15),T("change",function(a){return r.display.set(a.value)}),de(60,tXe,2,2,"mat-button-toggle",7,_t),d(),c(62,"div",13),de(63,nXe,2,3,"span",16,_t),d(),c(65,"h4",17),p(66,"Responsive display"),d(),c(67,"p",3),p(68," Every display class also has a breakpoint variant, "),c(69,"code"),p(70,".d-<value>-<breakpoint>"),d(),p(71,", which applies from that breakpoint up (mobile-first). "),c(72,"code"),p(73,"xsmall"),d(),p(74," starts at 0px, so "),c(75,"code"),p(76,".d-none-xsmall"),d(),p(77," behaves like "),c(78,"code"),p(79,".d-none"),d(),p(80,": use it as the base and override it with a larger breakpoint. "),d(),c(81,"table",18)(82,"thead")(83,"tr")(84,"th"),p(85,"Breakpoint"),d(),c(86,"th"),p(87,"Screen size"),d(),c(88,"th"),p(89,"Device"),d(),c(90,"th"),p(91,"Class applies"),d(),c(92,"th"),p(93,"Example"),d()()(),c(94,"tbody"),de(95,iXe,12,5,"tr",null,aae),d()(),c(97,"p",3),p(98," Breakpoints follow the browser window, not the size of the element. The preview below is an iframe, so the classes inside it react to the preview width: pick a width to see which elements show. "),d(),c(99,"mat-button-toggle-group",19),T("change",function(a){return r.previewWidth.set(a.value)}),de(100,rXe,2,3,"mat-button-toggle",7,aae),d(),c(102,"div",20),M(103,"iframe",21),d(),c(104,"code",12),p(105,'<span class="d-inline-block d-none-medium">Visible below 960px</span>'),M(106,"br"),p(107,'<span class="d-none d-inline-block-medium">Visible from 960px</span>'),d()(),c(108,"section",1)(109,"h3",2),p(110,"Flex"),d(),c(111,"mat-button-toggle-group",22),T("change",function(a){return r.flexDirection.set(a.value)}),de(112,oXe,2,2,"mat-button-toggle",7,_t),d(),c(114,"div",23),de(115,aXe,2,1,"div",24,_t),d(),c(117,"code",12),p(118),d(),c(119,"h4",17),p(120,"Centering: align-items vs justify-content"),d(),c(121,"p",3),p(122," A flex container has two axes. "),c(123,"code"),p(124,"justify-content"),d(),p(125," places the children along the "),c(126,"strong"),p(127,"main axis"),d(),p(128,", which is the flex direction (horizontal in a row). "),c(129,"code"),p(130,"align-items"),d(),p(131," places them on the "),c(132,"strong"),p(133,"cross axis"),d(),p(134," (vertical in a row). In a column the axes swap, so "),c(135,"code"),p(136,"justify-content"),d(),p(137," becomes vertical. "),d(),c(138,"table",18)(139,"thead")(140,"tr")(141,"th"),p(142,"Class"),d(),c(143,"th"),p(144,"CSS"),d(),c(145,"th"),p(146,"In a row"),d(),c(147,"th"),p(148,"In a column"),d()()(),c(149,"tbody")(150,"tr")(151,"td")(152,"code"),p(153,".justify-content-center"),d()(),c(154,"td")(155,"code"),p(156,"justify-content: center"),d()(),c(157,"td"),p(158,"horizontal"),d(),c(159,"td"),p(160,"vertical"),d()(),c(161,"tr")(162,"td")(163,"code"),p(164,".align-items-center"),d()(),c(165,"td")(166,"code"),p(167,"align-items: center"),d()(),c(168,"td"),p(169,"vertical"),d(),c(170,"td"),p(171,"horizontal"),d()(),c(172,"tr")(173,"td")(174,"code"),p(175,".flex-center"),d()(),c(176,"td")(177,"code"),p(178,"display: flex; align-items: center"),d()(),c(179,"td"),p(180,"vertical only"),d(),c(181,"td"),p(182,"horizontal only"),d()()()(),c(183,"p",3)(184,"code"),p(185,".flex-center"),d(),p(186," only centers on the cross axis. To center on both axes, add "),c(187,"code"),p(188,".justify-content-center"),d(),p(189,". The dashed lines below mark the center of each stage. "),d(),c(190,"div",25),de(191,sXe,10,3,"div",26,_t),d(),c(193,"h4",17),p(194,"Try it"),d(),c(195,"div",5),de(196,cXe,6,3,"div",27,XZe),d(),c(198,"div",28)(199,"div",29),p(200,"auto"),d(),c(201,"div",30),p(202,"48px"),d(),c(203,"div",31),p(204,"80px"),d()(),c(205,"code",12),p(206),d()(),c(207,"section",1)(208,"h3",2),p(209,"Text"),d(),c(210,"mat-button-toggle-group",32),T("change",function(a){return r.textAlign.set(a.value)}),de(211,dXe,2,2,"mat-button-toggle",7,_t),d(),c(213,"p",33),p(214),c(215,"code"),p(216,"text-start"),d(),p(217," and "),c(218,"code"),p(219,"text-end"),d(),p(220," are aliases of left and right. "),d(),c(221,"div",13),de(222,uXe,6,3,"p",3,_t),d(),c(224,"p",3),p(225," Font utilities ("),c(226,"code"),p(227,".font-display-large"),d(),p(228," \u2026 "),c(229,"code"),p(230,".font-label-small"),d(),p(231,") are documented on the Typography page. "),d()(),c(232,"section",1)(233,"h3",2),p(234,"Vertical align"),d(),c(235,"div",34),de(236,mXe,2,3,"span",35,_t),d()(),c(238,"section",1)(239,"h3",2),p(240,"Rotate"),d(),c(241,"p",3)(242,"code"),p(243,".rotate-<deg>"),d(),p(244," rotates an element and animates the change, which makes it handy for chevrons and expand icons. "),d(),c(245,"mat-button-toggle-group",36),T("change",function(a){return r.rotation.set(a.value)}),de(246,pXe,2,2,"mat-button-toggle",7,_t),d(),c(248,"div",37)(249,"div",38),p(250," \u279C "),d(),c(251,"code",39),p(252),d()()(),c(253,"section",1)(254,"h3",2),p(255,"Overflow"),d(),c(256,"mat-button-toggle-group",40),T("change",function(a){return r.overflow.set(a.value)}),de(257,_Xe,2,2,"mat-button-toggle",7,_t),d(),c(259,"div",13)(260,"div",41)(261,"div",42),p(262," This content is wider and taller than its 240\xD780 container, so the overflow utility decides whether it spills out, gets clipped or scrolls. "),d()()()(),c(263,"section",1)(264,"h3",2),p(265,"Visibility & position"),d(),c(266,"div",13)(267,"span",43),p(268,"before"),d(),c(269,"span",44),p(270,".invisible"),d(),c(271,"span",43),p(272,"after"),d()(),c(273,"p",3)(274,"code"),p(275,".invisible"),d(),p(276," hides an element but keeps its space; "),c(277,"code"),p(278,".d-none"),d(),p(279," and "),c(280,"code"),p(281,".hidden"),d(),p(282," remove it from the layout. "),c(283,"code"),p(284,".visible"),d(),p(285," restores it. "),c(286,"code"),p(287,".clickable"),d(),p(288," sets a pointer cursor. "),d(),c(289,"p",3),p(290," Position: "),de(291,hXe,3,2,null,null,_t),p(293," \u2014 and "),c(294,"code"),p(295,".float-left"),d(),p(296," / "),c(297,"code"),p(298,".float-right"),d(),p(299," (aliases "),c(300,"code"),p(301,"-start"),d(),p(302," / "),c(303,"code"),p(304,"-end"),d(),p(305,"). "),d()(),c(306,"section",1)(307,"h3",2),p(308,"Elevation"),d(),c(309,"div",45),de(310,fXe,2,3,"div",46,_t),d()()()),n&2&&(m(13),L(r.setupSnippet),m(30),g("value",r.sizingPrefix()),m(),ue(r.sizingUtilities),m(3),g("ngModel",r.sizingValue()),xe(),m(2),Je(r.sizingClass()),m(),V(" .",r.sizingClass()," "),m(2),wS(".",r.sizingClass()," ","{"," ",r.sizingCss()," ","}"),m(2),ue(Ln(33,QZe)),m(5),g("value",r.display()),m(),ue(r.displays),m(3),ue(Ln(34,oae)),m(32),ue(r.breakpoints),m(4),g("value",r.previewWidth()),m(),ue(r.breakpoints),m(3),Dt("width",r.previewWidth(),"px"),g("srcdoc",r.responsivePreview,cs),m(8),g("value",r.flexDirection()),m(),ue(r.flexDirections),m(2),Je(r.flexDirection()),m(),ue(Ln(35,oae)),m(3),V('<div class="d-flex ',r.flexDirection(),'">'),m(73),ue(r.flexCenterVariants),m(5),ue(r.flexAlignControls),m(2),Je(r.flexAlignClass()),m(8),V('<div class="',r.flexAlignClass(),'">'),m(4),g("value",r.textAlign()),m(),ue(r.textAligns),m(2),Je(r.textAlign()),m(),V(" .",r.textAlign()," \u2014 "),m(8),ue(r.textTransforms),m(14),ue(r.verticalAligns),m(9),g("value",r.rotation()),m(),ue(r.rotations),m(3),Je("rotate-"+r.rotation()),m(3),V(".rotate-",r.rotation()),m(4),g("value",r.overflow()),m(),ue(r.overflows),m(3),Je(r.overflow()),m(31),ue(r.positions),m(19),ue(r.elevations));},dependencies:[vn,Bt,Ye,Gl,ht,sg,Zp,nm,cg,$1,g0],styles:[`app-demo-utilities .utilities-container{display:flex;flex-direction:column;gap:2rem;padding:1rem}app-demo-utilities .utilities-section{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}app-demo-utilities .utilities-section h3,app-demo-utilities .utilities-section h4,app-demo-utilities .utilities-section p{margin:0}app-demo-utilities .utilities-controls{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}app-demo-utilities .utilities-controls mat-slider{width:240px}app-demo-utilities .utilities-stage{box-sizing:border-box;width:100%;padding:1rem;border:1px dashed var(--mat-sys-outline);border-radius:4px;background-color:var(--mat-sys-surface-container-high)}app-demo-utilities .utilities-box{box-sizing:border-box;padding:.5rem .75rem;border-radius:4px;background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);font-family:monospace;white-space:nowrap}app-demo-utilities .utilities-code{display:block;margin:0;font-family:monospace;color:var(--mat-sys-on-surface-variant)}app-demo-utilities .utilities-table{border-collapse:collapse}app-demo-utilities .utilities-table th,app-demo-utilities .utilities-table td{padding:.25rem 1rem .25rem 0;text-align:left;border-bottom:1px solid var(--mat-sys-outline-variant)}app-demo-utilities .responsive-stage{overflow-x:auto}app-demo-utilities .responsive-preview{display:block;max-width:none;height:120px;border:1px solid var(--mat-sys-outline);background-color:var(--mat-sys-surface);transition:width .3s ease}app-demo-utilities .sizing-stage{height:200px;overflow:hidden}app-demo-utilities .sizing-box{overflow:hidden}app-demo-utilities .display-box{margin:.25rem}app-demo-utilities .flex-box{margin:.25rem;text-align:center;min-width:3rem}app-demo-utilities .flex-center-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;width:100%}app-demo-utilities .flex-center-column{display:flex;flex-direction:column;gap:.5rem}app-demo-utilities .flex-center-stage{position:relative;height:140px;gap:.5rem}app-demo-utilities .flex-center-stage:before,app-demo-utilities .flex-center-stage:after{content:"";position:absolute}app-demo-utilities .flex-center-stage:before{top:50%;left:0;right:0;border-top:1px dashed var(--mat-sys-tertiary)}app-demo-utilities .flex-center-stage:after{left:50%;top:0;bottom:0;border-left:1px dashed var(--mat-sys-tertiary)}app-demo-utilities .flex-center-stage .utilities-box{position:relative;min-height:24px;padding-top:0;padding-bottom:0;line-height:24px}app-demo-utilities .flex-center-stage.flex-align-stage{height:260px}app-demo-utilities .flex-align-control{display:flex;flex-direction:column;gap:.25rem}app-demo-utilities .flex-center-medium{height:48px}app-demo-utilities .flex-center-tall{height:80px}app-demo-utilities .valign-stage{white-space:nowrap;overflow-x:auto}app-demo-utilities .valign-stage .valign-sample{display:inline-block;margin-right:.5rem;padding:0 .25rem;border:1px solid var(--mat-sys-outline);font-family:monospace}app-demo-utilities .rotate-box{display:inline-block;font-size:1.5rem}app-demo-utilities .overflow-box{width:240px;height:80px;border:1px solid var(--mat-sys-outline);background-color:var(--mat-sys-surface)}app-demo-utilities .overflow-content{width:360px;padding:.5rem;background-color:var(--mat-sys-secondary);color:var(--mat-sys-on-secondary)}app-demo-utilities .elevation-stage{flex-wrap:wrap;gap:1.5rem}app-demo-utilities .elevation-box{padding:1.5rem 1rem;border-radius:8px;background-color:var(--mat-sys-surface);font-family:monospace}
|
|
10694
|
+
</body></html>`}static{this.\u0275fac=(()=>{let e;return function(r){return (e||(e=U(t)))(r||t)}})();}static{this.\u0275cmp=x({type:t,selectors:[["app-demo-utilities"]],features:[N],decls:312,vars:36,consts:[[1,"utilities-container"],[1,"utilities-section"],[1,"font-title-large"],[1,"font-body-medium"],[1,"utilities-stage","utilities-code"],[1,"utilities-controls"],["aria-label","Sizing utility",3,"change","value"],[3,"value"],["min","0","max","100","step","5","discrete",""],["matSliderThumb","","aria-label","Sizing value",3,"ngModelChange","ngModel"],[1,"utilities-stage","sizing-stage"],[1,"utilities-box","sizing-box"],[1,"utilities-code"],[1,"utilities-stage"],[1,"utilities-box","mb-xs",3,"class"],["aria-label","Display utility",3,"change","value"],[1,"utilities-box","display-box",3,"class"],[1,"font-title-small"],[1,"utilities-table","font-body-small"],["aria-label","Preview width",3,"change","value"],[1,"utilities-stage","responsive-stage"],["title","Responsive display preview",1,"responsive-preview",3,"srcdoc"],["aria-label","Flex direction utility",3,"change","value"],[1,"utilities-stage","d-flex"],[1,"utilities-box","flex-box"],[1,"flex-center-compare"],[1,"flex-center-column"],[1,"flex-align-control"],[1,"utilities-stage","flex-center-stage","flex-align-stage"],[1,"utilities-box"],[1,"utilities-box","flex-center-medium"],[1,"utilities-box","flex-center-tall"],["aria-label","Text alignment utility",3,"change","value"],[1,"utilities-stage","font-body-medium"],[1,"utilities-stage","valign-stage","font-headline-large"],[1,"valign-sample","font-body-small",3,"class"],["aria-label","Rotation utility",3,"change","value"],[1,"utilities-stage","flex-center"],[1,"utilities-box","rotate-box"],[1,"utilities-code","ml"],["aria-label","Overflow utility",3,"change","value"],["tabindex","0","role","region","aria-label","Overflow example",1,"overflow-box"],[1,"overflow-content","font-body-small"],[1,"utilities-box","d-inline-block"],[1,"utilities-box","d-inline-block","invisible"],[1,"utilities-stage","d-flex","elevation-stage"],[1,"elevation-box",3,"class"],[1,"utilities-box","mb-xs"],[1,"utilities-box","display-box"],[1,"utilities-stage","flex-center-stage"],[1,"font-label-medium"],[3,"change","value"],[1,"valign-sample","font-body-small"],[1,"elevation-box"]],template:function(n,r){n&1&&(c(0,"div",0)(1,"section",1)(2,"h3",2),p(3,"Setup"),d(),c(4,"p",3),p(5," The utility classes are emitted by the theme mixin, so any element inside "),c(6,"code"),p(7,".onemrva-theme"),d(),p(8," can use them. In your global "),c(9,"code"),p(10,"styles.scss"),d(),p(11,": "),d(),c(12,"pre",4),p(13),d()(),c(14,"section",1)(15,"h3",2),p(16,"Sizing"),d(),c(17,"p",3)(18,"code"),p(19,"w-"),d(),p(20,", "),c(21,"code"),p(22,"h-"),d(),p(23,", "),c(24,"code"),p(25,"mw-"),d(),p(26," and "),c(27,"code"),p(28,"mh-"),d(),p(29," set width, height, max-width and max-height as a percentage of the parent. "),c(30,"code"),p(31,"vw-"),d(),p(32," and "),c(33,"code"),p(34,"vh-"),d(),p(35," use the viewport instead. Every value from 0 to 100 exists, plus "),c(36,"code"),p(37,"w-auto"),d(),p(38," and "),c(39,"code"),p(40,"h-auto"),d(),p(41,". "),d(),c(42,"div",5)(43,"mat-button-toggle-group",6),T("change",function(a){return r.sizingPrefix.set(a.value)}),de(44,JZe,2,2,"mat-button-toggle",7,ZZe),d(),c(46,"mat-slider",8)(47,"input",9),T("ngModelChange",function(a){return r.sizingValue.set(a)}),d(),Se(),d()(),c(48,"div",10)(49,"div",11),p(50),d()(),c(51,"code",12),p(52),d(),c(53,"div",13),de(54,eXe,2,3,"div",14,_t),d()(),c(56,"section",1)(57,"h3",2),p(58,"Display"),d(),c(59,"mat-button-toggle-group",15),T("change",function(a){return r.display.set(a.value)}),de(60,tXe,2,2,"mat-button-toggle",7,_t),d(),c(62,"div",13),de(63,nXe,2,3,"span",16,_t),d(),c(65,"h4",17),p(66,"Responsive display"),d(),c(67,"p",3),p(68," Every display class also has a breakpoint variant, "),c(69,"code"),p(70,".d-<value>-<breakpoint>"),d(),p(71,", which applies from that breakpoint up (mobile-first). "),c(72,"code"),p(73,"xsmall"),d(),p(74," starts at 0px, so "),c(75,"code"),p(76,".d-none-xsmall"),d(),p(77," behaves like "),c(78,"code"),p(79,".d-none"),d(),p(80,": use it as the base and override it with a larger breakpoint. "),d(),c(81,"table",18)(82,"thead")(83,"tr")(84,"th"),p(85,"Breakpoint"),d(),c(86,"th"),p(87,"Screen size"),d(),c(88,"th"),p(89,"Device"),d(),c(90,"th"),p(91,"Class applies"),d(),c(92,"th"),p(93,"Example"),d()()(),c(94,"tbody"),de(95,iXe,12,5,"tr",null,aae),d()(),c(97,"p",3),p(98," Breakpoints follow the browser window, not the size of the element. The preview below is an iframe, so the classes inside it react to the preview width: pick a width to see which elements show. "),d(),c(99,"mat-button-toggle-group",19),T("change",function(a){return r.previewWidth.set(a.value)}),de(100,rXe,2,3,"mat-button-toggle",7,aae),d(),c(102,"div",20),M(103,"iframe",21),d(),c(104,"code",12),p(105,'<span class="d-inline-block d-none-medium">Visible below 960px</span>'),M(106,"br"),p(107,'<span class="d-none d-inline-block-medium">Visible from 960px</span>'),d()(),c(108,"section",1)(109,"h3",2),p(110,"Flex"),d(),c(111,"mat-button-toggle-group",22),T("change",function(a){return r.flexDirection.set(a.value)}),de(112,oXe,2,2,"mat-button-toggle",7,_t),d(),c(114,"div",23),de(115,aXe,2,1,"div",24,_t),d(),c(117,"code",12),p(118),d(),c(119,"h4",17),p(120,"Centering: align-items vs justify-content"),d(),c(121,"p",3),p(122," A flex container has two axes. "),c(123,"code"),p(124,"justify-content"),d(),p(125," places the children along the "),c(126,"strong"),p(127,"main axis"),d(),p(128,", which is the flex direction (horizontal in a row). "),c(129,"code"),p(130,"align-items"),d(),p(131," places them on the "),c(132,"strong"),p(133,"cross axis"),d(),p(134," (vertical in a row). In a column the axes swap, so "),c(135,"code"),p(136,"justify-content"),d(),p(137," becomes vertical. "),d(),c(138,"table",18)(139,"thead")(140,"tr")(141,"th"),p(142,"Class"),d(),c(143,"th"),p(144,"CSS"),d(),c(145,"th"),p(146,"In a row"),d(),c(147,"th"),p(148,"In a column"),d()()(),c(149,"tbody")(150,"tr")(151,"td")(152,"code"),p(153,".justify-content-center"),d()(),c(154,"td")(155,"code"),p(156,"justify-content: center"),d()(),c(157,"td"),p(158,"horizontal"),d(),c(159,"td"),p(160,"vertical"),d()(),c(161,"tr")(162,"td")(163,"code"),p(164,".align-items-center"),d()(),c(165,"td")(166,"code"),p(167,"align-items: center"),d()(),c(168,"td"),p(169,"vertical"),d(),c(170,"td"),p(171,"horizontal"),d()(),c(172,"tr")(173,"td")(174,"code"),p(175,".flex-center"),d()(),c(176,"td")(177,"code"),p(178,"display: flex; align-items: center"),d()(),c(179,"td"),p(180,"vertical only"),d(),c(181,"td"),p(182,"horizontal only"),d()()()(),c(183,"p",3)(184,"code"),p(185,".flex-center"),d(),p(186," only centers on the cross axis. To center on both axes, add "),c(187,"code"),p(188,".justify-content-center"),d(),p(189,". The dashed lines below mark the center of each stage. "),d(),c(190,"div",25),de(191,sXe,10,3,"div",26,_t),d(),c(193,"h4",17),p(194,"Try it"),d(),c(195,"div",5),de(196,cXe,6,3,"div",27,XZe),d(),c(198,"div",28)(199,"div",29),p(200,"auto"),d(),c(201,"div",30),p(202,"48px"),d(),c(203,"div",31),p(204,"80px"),d()(),c(205,"code",12),p(206),d()(),c(207,"section",1)(208,"h3",2),p(209,"Text"),d(),c(210,"mat-button-toggle-group",32),T("change",function(a){return r.textAlign.set(a.value)}),de(211,dXe,2,2,"mat-button-toggle",7,_t),d(),c(213,"p",33),p(214),c(215,"code"),p(216,"text-start"),d(),p(217," and "),c(218,"code"),p(219,"text-end"),d(),p(220," are aliases of left and right. "),d(),c(221,"div",13),de(222,uXe,6,3,"p",3,_t),d(),c(224,"p",3),p(225," Font utilities ("),c(226,"code"),p(227,".font-display-large"),d(),p(228," \u2026 "),c(229,"code"),p(230,".font-label-small"),d(),p(231,") are documented on the Typography page. "),d()(),c(232,"section",1)(233,"h3",2),p(234,"Vertical align"),d(),c(235,"div",34),de(236,mXe,2,3,"span",35,_t),d()(),c(238,"section",1)(239,"h3",2),p(240,"Rotate"),d(),c(241,"p",3)(242,"code"),p(243,".rotate-<deg>"),d(),p(244," rotates an element and animates the change, which makes it handy for chevrons and expand icons. "),d(),c(245,"mat-button-toggle-group",36),T("change",function(a){return r.rotation.set(a.value)}),de(246,pXe,2,2,"mat-button-toggle",7,_t),d(),c(248,"div",37)(249,"div",38),p(250," \u279C "),d(),c(251,"code",39),p(252),d()()(),c(253,"section",1)(254,"h3",2),p(255,"Overflow"),d(),c(256,"mat-button-toggle-group",40),T("change",function(a){return r.overflow.set(a.value)}),de(257,_Xe,2,2,"mat-button-toggle",7,_t),d(),c(259,"div",13)(260,"div",41)(261,"div",42),p(262," This content is wider and taller than its 240\xD780 container, so the overflow utility decides whether it spills out, gets clipped or scrolls. "),d()()()(),c(263,"section",1)(264,"h3",2),p(265,"Visibility & position"),d(),c(266,"div",13)(267,"span",43),p(268,"before"),d(),c(269,"span",44),p(270,".invisible"),d(),c(271,"span",43),p(272,"after"),d()(),c(273,"p",3)(274,"code"),p(275,".invisible"),d(),p(276," hides an element but keeps its space; "),c(277,"code"),p(278,".d-none"),d(),p(279," and "),c(280,"code"),p(281,".hidden"),d(),p(282," remove it from the layout. "),c(283,"code"),p(284,".visible"),d(),p(285," restores it. "),c(286,"code"),p(287,".clickable"),d(),p(288," sets a pointer cursor. "),d(),c(289,"p",3),p(290," Position: "),de(291,hXe,3,2,null,null,_t),p(293," \u2014 and "),c(294,"code"),p(295,".float-left"),d(),p(296," / "),c(297,"code"),p(298,".float-right"),d(),p(299," (aliases "),c(300,"code"),p(301,"-start"),d(),p(302," / "),c(303,"code"),p(304,"-end"),d(),p(305,"). "),d()(),c(306,"section",1)(307,"h3",2),p(308,"Elevation"),d(),c(309,"div",45),de(310,fXe,2,3,"div",46,_t),d()()()),n&2&&(m(13),L(r.setupSnippet),m(30),g("value",r.sizingPrefix()),m(),ue(r.sizingUtilities),m(3),g("ngModel",r.sizingValue()),xe(),m(2),Je(r.sizingClass()),m(),V(" .",r.sizingClass()," "),m(2),wS(".",r.sizingClass()," ","{"," ",r.sizingCss()," ","}"),m(2),ue(Ln(33,QZe)),m(5),g("value",r.display()),m(),ue(r.displays),m(3),ue(Ln(34,oae)),m(32),ue(r.breakpoints),m(4),g("value",r.previewWidth()),m(),ue(r.breakpoints),m(3),Dt("width",r.previewWidth(),"px"),g("srcdoc",r.responsivePreview,cs),m(8),g("value",r.flexDirection()),m(),ue(r.flexDirections),m(2),Je(r.flexDirection()),m(),ue(Ln(35,oae)),m(3),V('<div class="d-flex ',r.flexDirection(),'">'),m(73),ue(r.flexCenterVariants),m(5),ue(r.flexAlignControls),m(2),Je(r.flexAlignClass()),m(8),V('<div class="',r.flexAlignClass(),'">'),m(4),g("value",r.textAlign()),m(),ue(r.textAligns),m(2),Je(r.textAlign()),m(),V(" .",r.textAlign()," \u2014 "),m(8),ue(r.textTransforms),m(14),ue(r.verticalAligns),m(9),g("value",r.rotation()),m(),ue(r.rotations),m(3),Je("rotate-"+r.rotation()),m(3),V(".rotate-",r.rotation()),m(4),g("value",r.overflow()),m(),ue(r.overflows),m(3),Je(r.overflow()),m(31),ue(r.positions),m(19),ue(r.elevations));},dependencies:[vn,Bt,Ye,Gl,ht,sg,Zp,nm,cg,$1,g0],styles:[`app-demo-utilities .utilities-container{display:flex;flex-direction:column;gap:2rem;padding:1rem}app-demo-utilities .utilities-section{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}app-demo-utilities .utilities-section h3,app-demo-utilities .utilities-section h4,app-demo-utilities .utilities-section p{margin:0}app-demo-utilities .utilities-controls{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}app-demo-utilities .utilities-controls mat-slider{width:240px}app-demo-utilities .utilities-stage{box-sizing:border-box;width:100%;padding:1rem;border:1px dashed var(--mat-sys-outline);border-radius:4px;background-color:var(--mat-sys-surface-container-high)}app-demo-utilities .utilities-box{box-sizing:border-box;padding:.5rem .75rem;border-radius:4px;background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary);font-family:monospace;white-space:nowrap}app-demo-utilities .utilities-code{display:block;margin:0;font-family:monospace;color:var(--mat-sys-on-surface-variant)}app-demo-utilities .utilities-table{border-collapse:collapse}app-demo-utilities .utilities-table th,app-demo-utilities .utilities-table td{padding:.25rem 1rem .25rem 0;text-align:left;border-bottom:1px solid var(--mat-sys-outline-variant)}app-demo-utilities .responsive-stage{overflow-x:auto}app-demo-utilities .responsive-preview{display:block;max-width:none;height:120px;border:1px solid var(--mat-sys-outline);background-color:var(--mat-sys-surface);transition:width .3s ease}app-demo-utilities .sizing-stage{height:200px;overflow:hidden}app-demo-utilities .sizing-box{overflow:hidden}app-demo-utilities .display-box{margin:.25rem}app-demo-utilities .flex-box{margin:.25rem;text-align:center;min-width:3rem}app-demo-utilities .flex-center-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;width:100%}app-demo-utilities .flex-center-column{display:flex;flex-direction:column;gap:.5rem}app-demo-utilities .flex-center-stage{position:relative;height:140px;gap:.5rem}app-demo-utilities .flex-center-stage:before,app-demo-utilities .flex-center-stage:after{content:"";position:absolute}app-demo-utilities .flex-center-stage:before{top:50%;left:0;right:0;border-top:1px dashed var(--mat-sys-tertiary)}app-demo-utilities .flex-center-stage:after{left:50%;top:0;bottom:0;border-left:1px dashed var(--mat-sys-tertiary)}app-demo-utilities .flex-center-stage .utilities-box{position:relative;min-height:24px;padding-top:0;padding-bottom:0;line-height:24px}app-demo-utilities .flex-center-stage.flex-align-stage{height:260px}app-demo-utilities .flex-align-control{display:flex;flex-direction:column;gap:.25rem}app-demo-utilities .flex-center-medium{height:48px}app-demo-utilities .flex-center-tall{height:80px}app-demo-utilities .valign-stage{white-space:nowrap;overflow-x:auto}app-demo-utilities .valign-stage .valign-sample{display:inline-block;margin-right:.5rem;padding:0 .25rem;border:1px solid var(--mat-sys-outline);font-family:monospace}app-demo-utilities .rotate-box{display:inline-block;font-size:1.5rem}app-demo-utilities .overflow-box{width:240px;height:80px;border:1px solid var(--mat-sys-outline);background-color:var(--mat-sys-surface)}app-demo-utilities .overflow-content{width:360px;padding:.5rem;background-color:var(--mat-sys-secondary);color:var(--mat-sys-on-secondary)}app-demo-utilities .elevation-stage{flex-wrap:wrap;gap:1.5rem}app-demo-utilities .elevation-box{padding:1.5rem 1rem;border-radius:8px;background-color:var(--mat-sys-surface);font-family:monospace}
|
|
10695
10695
|
`],encapsulation:2});}}return t})();function gXe(t,i){t&1&&(c(0,"mat-error"),p(1,"Error Length"),d());}function bXe(t,i){t&1&&(c(0,"mat-error"),p(1,"Error NISS"),d());}function vXe(t,i){t&1&&(c(0,"mat-error"),p(1,"Error BCE"),d());}var lae=(()=>{class t extends re{constructor(){super(...arguments),this.bce=new Pe(null,Du.bce()),this.niss=new Pe(null,[Du.niss()]),this.nissOrBce=new Pe(null,[Du.nissOrBce()]),this.nissMask=gw;}isNissError(e){return e!==null?Object.keys(e).length>0&&Object.keys(e)[0].startsWith("niss"):false}isBceError(e){return e!==null?Object.keys(e).length>0&&Object.keys(e)[0].startsWith("bce"):false}static{this.\u0275fac=(()=>{let e;return function(r){return (e||(e=U(t)))(r||t)}})();}static{this.\u0275cmp=x({type:t,selectors:[["demo-validators"]],features:[he([ag()]),N],decls:56,vars:16,consts:[["matInput","",3,"formControl"],["matInput","",3,"formControl","mask"]],template:function(n,r){n&1&&(c(0,"h2"),p(1,"BCE"),d(),c(2,"h3"),p(3,"List of checks:"),d(),c(4,"ul")(5,"li"),p(6," required (false by default, but can be set to true with the first argument of the validator) "),d(),c(7,"li"),p(8,"numeric"),d(),c(9,"li"),p(10,"Length = 10"),d()(),c(11,"mat-form-field")(12,"mat-label"),p(13,"BCE"),d(),M(14,"input",0),Se(),d(),p(15),$(16,"json"),M(17,"br")(18,"br"),c(19,"h2"),p(20,"NISS"),d(),c(21,"h3"),p(22,"List of checks:"),d(),c(23,"ul")(24,"li"),p(25," required (false by default, but can be set to true with the first argument of the validator) "),d(),c(26,"li"),p(27,"numeric"),d(),c(28,"li"),p(29,"length = 11"),d(),c(30,"li"),p(31,"month <= 12"),d(),c(32,"li"),p(33,"date <= 31"),d(),c(34,"li"),p(35,"date consistency check (e.g. 32 Jan)"),d(),c(36,"li"),p(37,"check digit (before or after 1 Jan 2000)"),d()(),c(38,"mat-form-field")(39,"mat-label"),p(40,"NISS"),d(),M(41,"input",1),Se(),d(),p(42),$(43,"json"),M(44,"br")(45,"br")(46,"br"),c(47,"mat-form-field")(48,"mat-label"),p(49,"NISS or BCE Validator"),d(),M(50,"input",0),Se(),D(51,gXe,2,0,"mat-error"),D(52,bXe,2,0,"mat-error"),D(53,vXe,2,0,"mat-error"),d(),p(54),$(55,"json")),n&2&&(m(14),g("formControl",r.bce),xe(),m(),V(`
|
|
10696
10696
|
Error BCE: `,z(16,10,r.bce.errors),`
|
|
10697
10697
|
`),m(26),g("formControl",r.niss)("mask",r.nissMask),xe(),m(),V(`
|