@onemrvapublic/design-system-demos 20.3.3-develop.2 → 20.4.0-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/chips-input.json +1 -1
- package/assets/json/panel.json +1 -1
- package/main.js +3 -3
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -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
|
|
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 @if (!disabled()) {\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 />\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"}
|
package/assets/json/panel.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-panel.component.html":"<onemrva-mat-panel [color]=\"color\">\n <onemrva-mat-panel-title>\n
|
|
1
|
+
{"demo-panel.component.html":"<onemrva-mat-panel [color]=\"color()\" [expandable]=\"expandable()\">\n <onemrva-mat-panel-title>\n Employee 0\n <onemrva-mat-sticker [color]=\"'warn'\">In Progress</onemrva-mat-sticker>\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content>\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n","demo-panel.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport {\n OnemrvaMatPanelModule,\n OnemrvaMatStickerComponent,\n} from '@onemrvapublic/design-system';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-panel',\n\n standalone: true,\n imports: [\n CommonModule,\n OnemrvaMatPanelModule,\n MatButtonModule,\n MatIconModule,\n OnemRvaColorDirective,\n OnemrvaMatStickerComponent,\n ],\n templateUrl: 'demo-panel.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPanelComponent extends DemoComponentBase {\n color = input<OnemrvaMatColor>(OnemrvaMatColor.NONE);\n expandable = input(true);\n}\n"}
|