@onemrvapublic/design-system-demos 20.6.1 → 20.6.3-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/breadcrumb.json +1 -1
- package/assets/json/chips-input.json +1 -1
- package/assets/json/choice-chips.json +1 -1
- package/assets/json/menu.json +1 -1
- package/main.js +2 -2
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-breadcrumb.component.html":"<!-- fakePath is used to test the breadcrumb component when the routing is not available -->\n<onemrva-mat-breadcrumb
|
|
1
|
+
{"demo-breadcrumb.component.html":"<!-- fakePath is used to test the breadcrumb component when the routing is not available -->\n<onemrva-mat-breadcrumb [paths]=\"paths\"></onemrva-mat-breadcrumb>\n","demo-breadcrumb.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OnemrvaMatBreadcrumbComponent } from '@onemrvapublic/design-system/mat-breadcrumb';\nimport { Route } from '@angular/router';\nlet DummyComponent; // for the demo\n\n// You can set the titles in your routes for automatic generation like the route\nexport const routes: Route[] = [\n {\n path: '',\n component: DummyComponent,\n data: {\n navigationTitle: 'Home',\n },\n children: [\n {\n path: 'about',\n component: DummyComponent,\n data: {\n navigationTitle: 'About-us',\n },\n },\n {\n path: 'contact',\n component: DummyComponent,\n data: {\n navigationTitle: 'Contact-us',\n },\n children: [\n {\n path: 'locations',\n component: DummyComponent,\n data: {\n navigationTitle: 'Locations',\n },\n },\n ],\n },\n ],\n },\n];\n\n@Component({\n selector: 'app-demo-breadcrumb',\n templateUrl: 'demo-breadcrumb.component.html',\n standalone: true,\n imports: [CommonModule, OnemrvaMatBreadcrumbComponent],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBreadcrumbComponent {\n // or you can use custom paths like this (! links will not work in this demo)\n paths = [\n {\n label: 'Home',\n url: '',\n translate: false,\n },\n {\n label: 'Contact us',\n url: '/contact',\n translate: false,\n },\n {\n label: 'Locations',\n url: '/contact/locations',\n translate: false,\n },\n ];\n}\n","demo-breadcrumb.routes.ts":"import { Route } from '@angular/router';\nimport { DemoComponent } from '../../_demo';\n"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-chips-input.component.html":"<mat-form-field class=\"chips-input-field\" [readonly]=\"readonly()\">\n <mat-label>Favorite Fruits</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Fruit selection\">\n @for (fruit of fruits(); track fruit) {\n <mat-chip-row\n [color]=\"color()\"\n [disabled]=\"disabled()\"\n [removable]=\"!disabled()\"\n (removed)=\"remove(fruit)\"\n >\n {{ fruit }}\n @if (!disabled() && !readonly()) {\n <button matChipRemove [attr.aria-label]=\"'remove ' + fruit\">\n <mat-icon>cancel</mat-icon>\n </button>\n }\n </mat-chip-row>\n }\n\n
|
|
1
|
+
{"demo-chips-input.component.html":"<mat-form-field class=\"chips-input-field\" [readonly]=\"readonly()\">\n <mat-label>Favorite Fruits</mat-label>\n <mat-chip-grid #chipGrid aria-label=\"Fruit selection\">\n @for (fruit of fruits(); track fruit) {\n <mat-chip-row\n [color]=\"color()\"\n [disabled]=\"disabled()\"\n [removable]=\"!disabled()\"\n (removed)=\"remove(fruit)\"\n >\n {{ fruit }}\n @if (!disabled() && !readonly()) {\n <button matChipRemove [attr.aria-label]=\"'remove ' + fruit\">\n <mat-icon>cancel</mat-icon>\n </button>\n }\n </mat-chip-row>\n }\n\n <input\n #fruitInput\n placeholder=\"Add fruit...\"\n [(ngModel)]=\"currentFruit\"\n [matChipInputFor]=\"chipGrid\"\n [matAutocomplete]=\"auto\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n (matChipInputTokenEnd)=\"add($event)\"\n [disabled]=\"disabled()\"\n />\n </mat-chip-grid>\n\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n @for (fruit of filteredFruits(); track fruit) {\n <mat-option [value]=\"fruit\">{{ fruit }}</mat-option>\n }\n </mat-autocomplete>\n</mat-form-field>\n","demo-chips-input.component.ts":"import {\n Component,\n computed,\n inject,\n input,\n model,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\nimport { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\nimport {\n MatAutocomplete,\n MatAutocompleteSelectedEvent,\n MatAutocompleteTrigger,\n MatOption,\n} from '@angular/material/autocomplete';\nimport { LiveAnnouncer } from '@angular/cdk/a11y';\nimport { COMMA, ENTER } from '@angular/cdk/keycodes';\n\nexport interface Fruit {\n name: string;\n}\n@Component({\n selector: 'app-demo-chips-input',\n standalone: true,\n imports: [\n CommonModule,\n FormsModule,\n MatChipsModule,\n DragDropModule,\n MatIconModule,\n MatFormFieldModule,\n OnemRvaReadonlyDirective,\n MatAutocomplete,\n MatOption,\n MatAutocompleteTrigger,\n ],\n templateUrl: './demo-chips-input.component.html',\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsInputComponent extends DemoComponentBase {\n color = input<OnemrvaMatColor>('');\n disabled = input(false);\n readonly = input(false);\n\n readonly separatorKeysCodes: number[] = [ENTER, COMMA];\n readonly filteredFruits = computed(() => {\n const currentFruit = this.currentFruit().toLowerCase();\n return currentFruit\n ? this.allFruits.filter(fruit =>\n fruit.toLowerCase().includes(currentFruit),\n )\n : this.allFruits.slice();\n });\n readonly currentFruit = model('');\n readonly announcer = inject(LiveAnnouncer);\n readonly fruits = signal(['Lemon']);\n readonly allFruits: string[] = [\n 'Apple',\n 'Lemon',\n 'Lime',\n 'Orange',\n 'Strawberry',\n ];\n\n add(event: MatChipInputEvent): void {\n const value = (event.value || '').trim();\n\n // Add our fruit\n if (value) {\n this.fruits.update(fruits => [...fruits, value]);\n }\n\n // Clear the input value\n this.currentFruit.set('');\n }\n\n remove(fruit: string): void {\n this.fruits.update(fruits => {\n const index = fruits.indexOf(fruit);\n if (index < 0) {\n return fruits;\n }\n\n fruits.splice(index, 1);\n this.announcer.announce(`Removed ${fruit}`);\n return [...fruits];\n });\n }\n\n selected(event: MatAutocompleteSelectedEvent): void {\n this.fruits.update(fruits => [...fruits, event.option.viewValue]);\n this.currentFruit.set('');\n event.option.deselect();\n }\n}\n"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-choice-chips.component.html":"<section class=\"example-section\" [formGroup]=\"
|
|
1
|
+
{"demo-choice-chips.component.html":"<section class=\"example-section\" [formGroup]=\"form\">\n <onemrva-mat-choice-chip\n class=\"mr-m\"\n formControlName=\"pepperoni\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n >\n Pepperoni\n </onemrva-mat-choice-chip>\n\n <onemrva-mat-choice-chip\n class=\"mr-m\"\n formControlName=\"extracheese\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n >\n Extra Cheese\n </onemrva-mat-choice-chip>\n\n <onemrva-mat-choice-chip\n formControlName=\"mushroom\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n >\n Mushroom\n </onemrva-mat-choice-chip>\n</section>\n","demo-choice-chips.component.scss":".example-section {\n}\n","demo-choice-chips.component.ts":"import {\n Component,\n effect,\n inject,\n input,\n ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport {\n OnemrvaMatChoiceChipComponent,\n OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system';\nimport { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Component({\n selector: 'app-demo-choice-chips',\n styleUrls: ['demo-choice-chips.component.scss'],\n templateUrl: 'demo-choice-chips.component.html',\n standalone: true,\n imports: [\n FormsModule,\n CommonModule,\n MatCheckboxModule,\n OnemrvaMatChoiceChipComponent,\n ReactiveFormsModule,\n OnemRvaReadonlyDirective,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChoiceChipsComponent extends DemoComponentBase {\n private readonly _formBuilder = inject(FormBuilder);\n\n readonly = input<boolean>(false);\n disabled = input<boolean>(false);\n\n constructor() {\n super();\n this.form.valueChanges.pipe(takeUntilDestroyed()).subscribe(val => {\n this.output.set(val);\n });\n\n effect(() => {\n if (this.disabled()) this.form.disable();\n else this.form.enable();\n });\n }\n\n readonly form = this._formBuilder.group({\n pepperoni: false,\n extracheese: false,\n mushroom: false,\n });\n}\n"}
|
package/assets/json/menu.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-menu.component.html":"<button\n mat-icon-button\n [matMenuTriggerFor]=\"menu\"\n class=\"onemrva-icon-button truc\"\n aria-label=\"Menu\"\n>\n <mat-icon>more_horiz</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"mat-elevation-z2\">\n <div mat-menu-item>\n <mat-icon class=\"mr-s\" style=\"width: auto; height: auto\">edit</mat-icon>Edit\n </div>\n <div mat-menu-item>\n <mat-icon class=\"mr-s\" style=\"width: auto; height: auto\">update</mat-icon\n >Save\n </div>\n</mat-menu>\n","demo-menu.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-menu',\n templateUrl: 'demo-menu.component.html',\n\n standalone: true,\n imports: [MatButtonModule, MatMenuModule, MatIconModule],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoMenuComponent extends DemoComponentBase {}\n"}
|
|
1
|
+
{"demo-menu.component.html":"<button\n mat-icon-button\n [matMenuTriggerFor]=\"menu\"\n class=\"onemrva-icon-button truc\"\n aria-label=\"Menu\"\n [disabled]=\"disabled()\"\n>\n <mat-icon>more_horiz</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"mat-elevation-z2\">\n <div mat-menu-item>\n <mat-icon class=\"mr-s\" style=\"width: auto; height: auto\">edit</mat-icon>Edit\n </div>\n <div mat-menu-item>\n <mat-icon class=\"mr-s\" style=\"width: auto; height: auto\">update</mat-icon\n >Save\n </div>\n</mat-menu>\n","demo-menu.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-menu',\n templateUrl: 'demo-menu.component.html',\n\n standalone: true,\n imports: [MatButtonModule, MatMenuModule, MatIconModule],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoMenuComponent extends DemoComponentBase {\n disabled = input<boolean>(false);\n}\n"}
|