npm - @onemrvapublic/design-system-demos - Versions diffs - 20.7.0-develop.15 → 20.7.0-develop.16 - Mend

@onemrvapublic/design-system-demos 20.7.0-develop.15 → 20.7.0-develop.16

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

Files changed (18) hide show

package/3rdpartylicenses.txt +2 -0
package/assets/codes.json +1 -1
package/assets/json/address-input.json +1 -1
package/assets/json/address.json +1 -1
package/assets/json/breadcrumb.json +1 -1
package/assets/json/empty.json +1 -1
package/assets/json/error.json +1 -1
package/assets/json/form.json +1 -0
package/assets/json/jsonform.json +1 -1
package/assets/json/phone-input.json +1 -1
package/assets/json/selectable-box-large.json +1 -1
package/assets/json/selectable-box.json +1 -1
package/assets/json/task-list.json +1 -1
package/assets/json/timepicker.json +1 -1
package/assets/json/toc.json +1 -1
package/assets/json/tooltip.json +1 -1
package/main.js +6 -6
package/package.json +1 -1

package/3rdpartylicenses.txt CHANGED Viewed

@@ -397,6 +397,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 @onemrvapublic/design-system-demos
+@onemrvapublic/design-system-jsonforms
 ajv
 MIT
 The MIT License (MIT)

package/assets/codes.json CHANGED Viewed

	@@ -1 +1 @@
1	- ["address","address-input","autocomplete","avatar","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","card-table","carousel","checkbox","chips","chips-input","choice-chips","copy-to-clipboard","country-input","datepicker","datepicker-luxon","datepicker-month-year","daterangepicker","dialog","dialog-content","digit-only","drag-and-drop","drawer","empty","enterprise-number-input","error","error-handler","expansion","fab","file-panel","file-upload","file-upload-manual","grid","horizontal-stepper","icon","icon-button","if-width-is","jsonform","language-switcher","layout","link","mask","menu","message-box","multiselect","niss-pipe","not-found","notification","overlay","paginator","palette","panel","phone-input","pop-over","progress-bar","radio","rxjs-combine-operators","rxjs-complex-case","rxjs-flattening-operators","rxjs-observable","rxjs-subject","select","selectable-box","selectable-box-large","side-menu","skeleton","slide-toggle","spacing","spinner","sticker","summary-stepper","tab","table","table-dialog-content","task-list","text-input","textarea","timepicker","toast","toc","toolbar","tooltip","typography","validators","vertical-stepper"]
1	+ ["address","address-input","autocomplete","avatar","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","card-table","carousel","checkbox","chips","chips-input","choice-chips","copy-to-clipboard","country-input","datepicker","datepicker-luxon","datepicker-month-year","daterangepicker","dialog","dialog-content","digit-only","drag-and-drop","drawer","empty","enterprise-number-input","error","error-handler","expansion","fab","file-panel","file-upload","file-upload-manual","form","grid","horizontal-stepper","icon","icon-button","if-width-is","jsonform","language-switcher","layout","link","mask","menu","message-box","multiselect","niss-pipe","not-found","notification","overlay","paginator","palette","panel","phone-input","pop-over","progress-bar","radio","rxjs-combine-operators","rxjs-complex-case","rxjs-flattening-operators","rxjs-observable","rxjs-subject","select","selectable-box","selectable-box-large","side-menu","skeleton","slide-toggle","spacing","spinner","sticker","summary-stepper","tab","table","table-dialog-content","task-list","text-input","textarea","timepicker","toast","toc","toolbar","tooltip","typography","validators","vertical-stepper"]

package/assets/json/address-input.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"demo-address-input.component.html":"<onemrva-mat-input-address\n style=\"width: 100%; display: block\"\n [address]=\"addressControl\"\n (getAddress)=\"onAddressSelected($event)\"\n>\n</onemrva-mat-input-address>\n","demo-address-input.component.ts":"import { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { OnemrvaMatInputAddressComponent } from '@onemrvapublic/design-system~~/mat-input-address~~';\nimport { OSMResult } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-address-input',\n templateUrl: './demo-address-input.component.html',\n standalone: true,\n imports: [OnemrvaMatInputAddressComponent],\n})\nexport class DemoAddressInputComponent extends DemoComponentBase {\n addressControl = new FormControl('');\n\n onAddressSelected(result: OSMResult) {\n this.output.set(result);\n }\n}\n"}
1	+ {"demo-address-input.component.html":"<onemrva-mat-input-address\n style=\"width: 100%; display: block\"\n [address]=\"addressControl\"\n (getAddress)=\"onAddressSelected($event)\"\n>\n</onemrva-mat-input-address>\n","demo-address-input.component.ts":"import { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { OnemrvaMatInputAddressComponent } from '@onemrvapublic/design-system';\nimport { OSMResult } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-address-input',\n templateUrl: './demo-address-input.component.html',\n standalone: true,\n imports: [OnemrvaMatInputAddressComponent],\n})\nexport class DemoAddressInputComponent extends DemoComponentBase {\n addressControl = new FormControl('');\n\n onAddressSelected(result: OSMResult) {\n this.output.set(result);\n }\n}\n"}

package/assets/json/address.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"address.html":"<form [readonly]=\"readonly()\">\n <onemrva-address [form]=\"form\" (update)=\"onUpdate($event)\" />\n <button mat-button color=\"primary\" type=\"submit\">Submit</button>\n</form>\n","address.ts":"import { Component, effect, input, ~~Input~~ } from '@angular/core';\nimport { OnemRvaAddress ~~} from '@onemrvapublic/design-system/mat-address';\nimport {~~ OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { FormControl, FormGroup, Validators } from '@angular/forms';\nimport { MatButton } from '@angular/material/button';\n\n@Component({\n selector: 'app-demo-address',\n templateUrl: './address.html',\n standalone: true,\n imports: [OnemRvaAddress, ~~OnemRvaReadonlyDirective~~, ~~MatButton~~],\n})\nexport class DemoAddress extends DemoComponentBase {\n readonly = input<boolean>(false);\n disabled = input<boolean>(false);\n\n form = new FormGroup({\n country: new FormControl('', Validators.required),\n street: new FormControl('', Validators.required),\n postal_code: new FormControl(''),\n city: new FormControl(''),\n street_number: new FormControl(''),\n box: new FormControl(''),\n });\n\n onUpdate(val: any) {\n this.output.set(val);\n }\n\n constructor() {\n super();\n effect(() => {\n if (this.disabled()) this.form.disable();\n else this.form.enable();\n\n if (this.readonly()) {\n // we set a value for readonly demo\n this.form.setValue({\n country: 'be',\n street: 'rue de la gare',\n postal_code: '1000',\n city: 'Bruxelles',\n street_number: '1',\n box: 'A',\n });\n }\n });\n }\n}\n"}
1	+ {"address.html":"<form [readonly]=\"readonly()\">\n <onemrva-address [form]=\"form\" (update)=\"onUpdate($event)\" />\n <button mat-button color=\"primary\" type=\"submit\">Submit</button>\n</form>\n","address.ts":"import { Component, effect, input } from '@angular/core';\nimport {\n OnemRvaAddress,\n OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { FormControl, FormGroup, Validators } from '@angular/forms';\nimport { MatButton } from '@angular/material/button';\n\n@Component({\n selector: 'app-demo-address',\n templateUrl: './address.html',\n standalone: true,\n imports: [OnemRvaAddress, MatButton, OnemRvaReadonlyDirective],\n})\nexport class DemoAddress extends DemoComponentBase {\n readonly = input<boolean>(false);\n disabled = input<boolean>(false);\n\n form = new FormGroup({\n country: new FormControl('', Validators.required),\n street: new FormControl('', Validators.required),\n postal_code: new FormControl(''),\n city: new FormControl(''),\n street_number: new FormControl(''),\n box: new FormControl(''),\n });\n\n onUpdate(val: any) {\n this.output.set(val);\n }\n\n constructor() {\n super();\n effect(() => {\n if (this.disabled()) this.form.disable();\n else this.form.enable();\n\n if (this.readonly()) {\n // we set a value for readonly demo\n this.form.setValue({\n country: 'be',\n street: 'rue de la gare',\n postal_code: '1000',\n city: 'Bruxelles',\n street_number: '1',\n box: 'A',\n });\n }\n });\n }\n}\n"}

package/assets/json/breadcrumb.json CHANGED Viewed

	@@ -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 [paths]=\"paths\"></onemrva-mat-breadcrumb>\n","demo-breadcrumb.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport {\n OnemrvaBreadcrumb,\n OnemrvaMatBreadcrumbComponent,\n} 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: OnemrvaBreadcrumb[] = [\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"}
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 {\n OnemrvaBreadcrumb,\n OnemrvaMatBreadcrumbComponent,\n} from '@onemrvapublic/design-system';\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: OnemrvaBreadcrumb[] = [\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"}

package/assets/json/empty.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"demo-empty.component.html":"","demo-empty.component.ts":"import { Component } from '@angular/core';\nimport { ~~OnemrvaMatInputAddressComponent } from '@onemrvapublic/design-system/mat-input-address';\nimport {~~ DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-empty',\n templateUrl: './demo-empty.component.html',\n standalone: true,\n imports: [],\n})\nexport class DemoEmptyComponent extends DemoComponentBase {}\n"}
1	+ {"demo-empty.component.html":"","demo-empty.component.ts":"import { Component } from '@angular/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-empty',\n templateUrl: './demo-empty.component.html',\n standalone: true,\n imports: [],\n})\nexport class DemoEmptyComponent extends DemoComponentBase {}\n"}

package/assets/json/error.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"demo-error.component.html":"<page-error [code]=\"code\">\n <page-error-action> Custom action </page-error-action>\n</page-error>\n","demo-error.component.ts":"import { Component, Input, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\n\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n PageErrorActionComponent,\n PageErrorComponent,\n} from '@onemrvapublic/design-system~~/page-error~~';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-error',\n standalone: true,\n imports: [\n CommonModule,\n MatFormFieldModule,\n MatIconModule,\n ReactiveFormsModule,\n TranslateModule,\n MatInputModule,\n MatButtonModule,\n PageErrorComponent,\n PageErrorActionComponent,\n ],\n\n templateUrl: 'demo-error.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoErrorComponent extends DemoComponentBase {\n @Input()\n code = 500;\n}\n","readme.md":"# Installation\n\n```bash\nnpm install --save @onemrvapublic/theme\nnpm install --save @onemrvapublic/design-system\n```\n\nIn angular.json, add the following configuration in projects/(projectName)/architect/build/options/assets:\n\n```\n {\n \"glob\": \"*/\",\n \"input\": \"node_modules/@onemrvapublic/design-system/page-not-found/assets\",\n \"output\": \"/assets/\"\n }\n```\n\nIn style.scss:\n\n```scss\n@use '@onemrvapublic/theme' as theme;\n@use '@onemrvapublic/design-system' as onemrvaMat;\n\n@include theme.reset();\n\n.onemrva-theme {\n @include theme.onemrva();\n @include onemrvaMat.pageNotFound(theme.$onemrva-theme);\n}\n```\n\n# Changelog\n\n## 14.1.651\n\nFix background shape\n\n## 14.1.604\n\nMigration from @onemrvapublic/core to @onemrvapublic/design-system\n\n## 14.1.512\n\nDraft version\n"}
1	+ {"demo-error.component.html":"<page-error [code]=\"code\">\n <page-error-action> Custom action </page-error-action>\n</page-error>\n","demo-error.component.ts":"import { Component, Input, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\n\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n PageErrorActionComponent,\n PageErrorComponent,\n} from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-error',\n standalone: true,\n imports: [\n CommonModule,\n MatFormFieldModule,\n MatIconModule,\n ReactiveFormsModule,\n TranslateModule,\n MatInputModule,\n MatButtonModule,\n PageErrorComponent,\n PageErrorActionComponent,\n ],\n\n templateUrl: 'demo-error.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoErrorComponent extends DemoComponentBase {\n @Input()\n code = 500;\n}\n","readme.md":"# Installation\n\n```bash\nnpm install --save @onemrvapublic/theme\nnpm install --save @onemrvapublic/design-system\n```\n\nIn angular.json, add the following configuration in projects/(projectName)/architect/build/options/assets:\n\n```\n {\n \"glob\": \"*/\",\n \"input\": \"node_modules/@onemrvapublic/design-system/page-not-found/assets\",\n \"output\": \"/assets/\"\n }\n```\n\nIn style.scss:\n\n```scss\n@use '@onemrvapublic/theme' as theme;\n@use '@onemrvapublic/design-system' as onemrvaMat;\n\n@include theme.reset();\n\n.onemrva-theme {\n @include theme.onemrva();\n @include onemrvaMat.pageNotFound(theme.$onemrva-theme);\n}\n```\n\n# Changelog\n\n## 14.1.651\n\nFix background shape\n\n## 14.1.604\n\nMigration from @onemrvapublic/core to @onemrvapublic/design-system\n\n## 14.1.512\n\nDraft version\n"}

package/assets/json/form.json ADDED Viewed

@@ -0,0 +1 @@

+ {"demo-form.html":"<form [formGroup]=\"form\">\n <mat-form-field>\n <mat-label>Error demo</mat-label>\n <input matInput formControlName=\"text\" />\n <mat-hint>Hint</mat-hint>\n\n <mat-error>Error</mat-error>\n </mat-form-field>\n\n <mat-form-field>\n <mat-label>Phone number</mat-label>\n\n <onemrva-mat-input-phone\n formControlName=\"phone\"\n placeholder=\"+32 475 12 23 34\"\n ></onemrva-mat-input-phone>\n\n <mat-hint>hint</mat-hint>\n\n <mat-error> {{ 'input.phone.required' | translate }} </mat-error>\n </mat-form-field>\n\n <mat-form-field>\n <mat-label>IBAN</mat-label>\n\n <onemrva-mat-input-iban formControlName=\"iban\"> </onemrva-mat-input-iban>\n\n <mat-hint>hint</mat-hint>\n <mat-error> {{ 'input.bank.required' | translate }} </mat-error>\n </mat-form-field>\n\n <mat-form-field>\n <mat-label>Choose a date</mat-label>\n <input matInput [matDatepicker]=\"picker\" formControlName=\"date\" />\n <mat-hint>DD/MM/YYYY</mat-hint>\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker\n [calendarHeaderComponent]=\"OnemrvaMatDatepickerHeaderComponent\"\n #picker\n ></mat-datepicker>\n </mat-form-field>\n</form>\n","demo-form.ts":"import { Component } from '@angular/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { JsonFormsModule } from '@jsonforms/angular';\nimport {\n FormControl,\n FormGroup,\n ReactiveFormsModule,\n Validators,\n} from '@angular/forms';\nimport {\n MatDatepicker,\n MatDatepickerInput,\n MatDatepickerToggle,\n} from '@angular/material/datepicker';\nimport {\n OnemrvaMatDatepickerHeaderComponent,\n OnemrvaMatInputIbanComponent,\n OnemrvaMatInputPhoneComponent,\n} from '@onemrvapublic/design-system';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInput } from '@angular/material/input';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { provideLuxonDateAdapter } from '@angular/material-luxon-adapter';\n\n@Component({\n selector: 'app-demo-form',\n templateUrl: './demo-form.html',\n standalone: true,\n imports: [\n JsonFormsModule,\n ReactiveFormsModule,\n MatDatepicker,\n MatDatepickerInput,\n MatFormFieldModule,\n MatDatepickerToggle,\n MatInput,\n OnemrvaMatInputIbanComponent,\n TranslatePipe,\n OnemrvaMatInputPhoneComponent,\n ],\n providers: [provideLuxonDateAdapter()],\n})\nexport class DemoformComponent extends DemoComponentBase {\n public form = new FormGroup({\n iban: new FormControl('', Validators.required),\n phone: new FormControl('', Validators.required),\n text: new FormControl('', Validators.required),\n date: new FormControl('', Validators.required),\n });\n protected readonly OnemrvaMatDatepickerHeaderComponent =\n OnemrvaMatDatepickerHeaderComponent;\n}\n"}

package/assets/json/jsonform.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"jsonform.html":"<jsonforms\n [data]=\"data\"\n [schema]=\"schema\"\n [uischema]=\"uischema\"\n [renderers]=\"renderers\"\n></jsonforms>\n","jsonform.ts":"import { Component } from '@angular/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { JsonFormsModule } from '@jsonforms/angular';\nimport { angularMaterialRenderers } from '@jsonforms/angular-material';\nimport { uischema } from './uischema.form';\nimport { schema } from './schema.form';\nimport {\n CheckboxRendererComponent,\n checkboxTester,\n customLabelTester,\n DatepickerRendererComponent,\n DatePickerRendererTester,\n enumControlTester,\n EnumRendererComponent,\n ibanControlTester,\n IbanRendererComponent,\n LabelRendererComponent,\n nissControlTester,\n NissRendererComponent,\n phoneControllerTester,\n PhoneRendererComponent,\n RadioButtonRendererComponent,\n radioButtonTester,\n ReadonlyControlRendererComponent,\n readonlyControlTester,\n} from '@onemrvapublic/design-system';\n\n@Component({\n selector: 'app-demo-jsonform',\n templateUrl: './jsonform.html',\n standalone: true,\n imports: [JsonFormsModule],\n})\nexport class DemoJsonformsComponent extends DemoComponentBase {\n renderers = [\n ...angularMaterialRenderers,\n {\n tester: readonlyControlTester,\n renderer: ReadonlyControlRendererComponent,\n },\n { tester: enumControlTester, renderer: EnumRendererComponent },\n { tester: nissControlTester, renderer: NissRendererComponent },\n { tester: ibanControlTester, renderer: IbanRendererComponent },\n { tester: customLabelTester, renderer: LabelRendererComponent },\n { tester: radioButtonTester, renderer: RadioButtonRendererComponent },\n { tester: checkboxTester, renderer: CheckboxRendererComponent },\n { tester: phoneControllerTester, renderer: PhoneRendererComponent },\n { tester: DatePickerRendererTester, renderer: DatepickerRendererComponent },\n ];\n\n uischema = uischema;\n schema = schema;\n\n data = {};\n}\n","schema.form.ts":"export const schema = {\n type: 'object',\n properties: {\n exampleRadioEnum: {\n type: 'string',\n enum: ['One', 'Two', 'Three'],\n },\n name: {\n type: 'string',\n minLength: 1,\n },\n done: {\n type: 'boolean',\n },\n due_date: {\n type: 'string',\n format: 'date',\n },\n recurrence: {\n type: 'string',\n enum: ['Never', 'Daily', 'Weekly', 'Monthly'],\n },\n phone: {\n type: 'string',\n },\n niss: {\n type: 'string',\n },\n iban: {\n type: 'string',\n },\n },\n required: ['name', 'due_date', 'phone'],\n};\n","uischema.form.ts":"export const uischema = {\n type: 'VerticalLayout',\n elements: [\n {\n type: 'Control',\n scope: '#/properties/exampleRadioEnum',\n options: {\n format: 'radio',\n },\n },\n {\n type: 'Control',\n label: false,\n scope: '#/properties/done',\n },\n {\n type: 'HorizontalLayout',\n elements: [\n {\n type: 'Control',\n scope: '#/properties/name',\n },\n {\n type: 'Control',\n scope: '#/properties/phone',\n },\n ],\n },\n {\n type: 'HorizontalLayout',\n elements: [\n {\n type: 'Control',\n scope: '#/properties/due_date',\n },\n {\n type: 'Control',\n scope: '#/properties/niss',\n },\n {\n type: 'Control',\n scope: '#/properties/iban',\n },\n {\n type: 'Control',\n scope: '#/properties/recurrence',\n },\n ],\n },\n ],\n};\n"}
1	+ {"jsonform.html":"<jsonforms\n [data]=\"data\"\n [schema]=\"schema\"\n [uischema]=\"uischema\"\n [renderers]=\"renderers\"\n></jsonforms>\n","jsonform.ts":"import { Component } from '@angular/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { JsonFormsModule } from '@jsonforms/angular';\nimport { angularMaterialRenderers } from '@jsonforms/angular-material';\nimport { uischema } from './uischema.form';\nimport { schema } from './schema.form';\nimport {\n CheckboxRendererComponent,\n checkboxTester,\n customLabelTester,\n DatepickerRendererComponent,\n DatePickerRendererTester,\n enumControlTester,\n EnumRendererComponent,\n ibanControlTester,\n IbanRendererComponent,\n LabelRendererComponent,\n nissControlTester,\n NissRendererComponent,\n phoneControllerTester,\n PhoneRendererComponent,\n RadioButtonRendererComponent,\n radioButtonTester,\n ReadonlyControlRendererComponent,\n readonlyControlTester,\n} from '@onemrvapublic/design-system-jsonforms';\n\n@Component({\n selector: 'app-demo-jsonform',\n templateUrl: './jsonform.html',\n standalone: true,\n imports: [JsonFormsModule],\n})\nexport class DemoJsonformsComponent extends DemoComponentBase {\n renderers = [\n ...angularMaterialRenderers,\n {\n tester: readonlyControlTester,\n renderer: ReadonlyControlRendererComponent,\n },\n { tester: enumControlTester, renderer: EnumRendererComponent },\n { tester: nissControlTester, renderer: NissRendererComponent },\n { tester: ibanControlTester, renderer: IbanRendererComponent },\n { tester: customLabelTester, renderer: LabelRendererComponent },\n { tester: radioButtonTester, renderer: RadioButtonRendererComponent },\n { tester: checkboxTester, renderer: CheckboxRendererComponent },\n { tester: phoneControllerTester, renderer: PhoneRendererComponent },\n { tester: DatePickerRendererTester, renderer: DatepickerRendererComponent },\n ];\n\n uischema = uischema;\n schema = schema;\n\n data = {};\n}\n","schema.form.ts":"export const schema = {\n type: 'object',\n properties: {\n exampleRadioEnum: {\n type: 'string',\n enum: ['One', 'Two', 'Three'],\n },\n name: {\n type: 'string',\n minLength: 1,\n },\n done: {\n type: 'boolean',\n },\n due_date: {\n type: 'string',\n format: 'date',\n },\n recurrence: {\n type: 'string',\n enum: ['Never', 'Daily', 'Weekly', 'Monthly'],\n },\n phone: {\n type: 'string',\n },\n niss: {\n type: 'string',\n },\n iban: {\n type: 'string',\n },\n },\n required: ['name', 'due_date', 'phone'],\n};\n","uischema.form.ts":"export const uischema = {\n type: 'VerticalLayout',\n elements: [\n {\n type: 'Control',\n scope: '#/properties/exampleRadioEnum',\n options: {\n format: 'radio',\n },\n },\n {\n type: 'Control',\n label: false,\n scope: '#/properties/done',\n },\n {\n type: 'HorizontalLayout',\n elements: [\n {\n type: 'Control',\n scope: '#/properties/name',\n },\n {\n type: 'Control',\n scope: '#/properties/phone',\n },\n ],\n },\n {\n type: 'HorizontalLayout',\n elements: [\n {\n type: 'Control',\n scope: '#/properties/due_date',\n },\n {\n type: 'Control',\n scope: '#/properties/niss',\n },\n {\n type: 'Control',\n scope: '#/properties/iban',\n },\n {\n type: 'Control',\n scope: '#/properties/recurrence',\n },\n ],\n },\n ],\n};\n"}

package/assets/json/phone-input.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"demo-phone-input.component.html":"<mat-form-field [readonly]=\"readonly()\">\n <mat-label>Phone number</mat-label>\n\n <onemrva-mat-input-phone\n [formControl]=\"form\"\n (getCountry)=\"getCountry($event)\"\n placeholder=\"+32 475 12 23 34\"\n ></onemrva-mat-input-phone>\n\n <mat-hint>hint</mat-hint>\n @if (form.hasError('required')) {\n <mat-error>\n {{ 'input.phone.required' \| translate }}\n </mat-error>\n } @else if (form.hasError('phoneNumber')) {\n <mat-error>\n {{ 'input.phone.invalid' \| translate }}\n </mat-error>\n }\n</mat-form-field>\n","demo-phone-input.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport {\n FormControl,\n FormsModule,\n ReactiveFormsModule,\n Validators,\n} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { OnemrvaMatInputPhoneComponent } from '@onemrvapublic/design-system~~/mat-input-phone~~';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport {\n OnemRvaReadonlyDirective,\n phoneNumberValidator,\n} from '@onemrvapublic/design-system';\n\n@Component({\n selector: 'app-demo-phone-input',\n templateUrl: './demo-phone-input.component.html',\n standalone: true,\n imports: [\n CommonModule,\n MatFormFieldModule,\n ReactiveFormsModule,\n OnemrvaMatInputPhoneComponent,\n FormsModule,\n MatInputModule,\n TranslateModule,\n OnemRvaReadonlyDirective,\n ],\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPhoneInputComponent extends DemoComponentBase {\n readonly = input(false);\n\n disabled = input(false);\n\n form = new FormControl('', [Validators.required, phoneNumberValidator()]);\n\n getCountry($event: any) {\n this.output.set($event);\n }\n\n constructor() {\n super();\n effect(() => {\n if (this.disabled()) this.form.disable();\n else this.form.enable();\n\n // we set a value for readonly demo\n if (this.readonly()) {\n this.form.setValue('+32412345678');\n }\n });\n }\n}\n"}
1	+ {"demo-phone-input.component.html":"<mat-form-field [readonly]=\"readonly()\">\n <mat-label>Phone number</mat-label>\n\n <onemrva-mat-input-phone\n [formControl]=\"form\"\n (getCountry)=\"getCountry($event)\"\n placeholder=\"+32 475 12 23 34\"\n ></onemrva-mat-input-phone>\n\n <mat-hint>hint</mat-hint>\n @if (form.hasError('required')) {\n <mat-error>\n {{ 'input.phone.required' \| translate }}\n </mat-error>\n } @else if (form.hasError('phoneNumber')) {\n <mat-error>\n {{ 'input.phone.invalid' \| translate }}\n </mat-error>\n }\n</mat-form-field>\n","demo-phone-input.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport {\n FormControl,\n FormsModule,\n ReactiveFormsModule,\n Validators,\n} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { OnemrvaMatInputPhoneComponent } from '@onemrvapublic/design-system';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport {\n OnemRvaReadonlyDirective,\n phoneNumberValidator,\n} from '@onemrvapublic/design-system';\n\n@Component({\n selector: 'app-demo-phone-input',\n templateUrl: './demo-phone-input.component.html',\n standalone: true,\n imports: [\n CommonModule,\n MatFormFieldModule,\n ReactiveFormsModule,\n OnemrvaMatInputPhoneComponent,\n FormsModule,\n MatInputModule,\n TranslateModule,\n OnemRvaReadonlyDirective,\n ],\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPhoneInputComponent extends DemoComponentBase {\n readonly = input(false);\n\n disabled = input(false);\n\n form = new FormControl('', [Validators.required, phoneNumberValidator()]);\n\n getCountry($event: any) {\n this.output.set($event);\n }\n\n constructor() {\n super();\n effect(() => {\n if (this.disabled()) this.form.disable();\n else this.form.enable();\n\n // we set a value for readonly demo\n if (this.readonly()) {\n this.form.setValue('+32412345678');\n }\n });\n }\n}\n"}

package/assets/json/selectable-box-large.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"demo-selectable-box-large.component.html":"<mat-radio-group class=\"d-flex w100\" [formControl]=\"form\">\n <onemrva-mat-selectable-box #box1 value=\"box1Value\">\n <!-- The title attribute makes it in the header -->\n <ng-container title>\n <span>36 - 49 ans</span>\n </ng-container>\n\n <!-- The sticker attribute makes it in the header -->\n <onemrva-mat-sticker sticker [color]=\"box1.isChecked() ? 'accent' : ''\">\n 468 jours à prester au CPAS\n </onemrva-mat-sticker>\n\n <!-- No attribute makes it go in the body, which you can style yourselves - don't do it inline :) only for demo purposes -->\n\n <div class=\"d-flex\">\n <div class=\"d-flex flex-column text-right m\">\n <span>Période à prester au CPAS</span>\n <span>Date de demande des allocations</span>\n <span>Réglementation</span>\n <span>Q/S à prester au CPAS </span>\n <span>Période de référence </span>\n <span>Prestations passées prises en compte</span>\n </div>\n <div class=\"d-flex flex-column text-right bold m\">\n <span>16/08/2022 - 14/08/2023</span>\n <span>16/08/2023</span>\n <span>Article 30 : Nouveau dossier</span>\n <span>Q/S à prester au CPAS </span>\n <span>16/11/2021 - 15/08/2023</span>\n <span>0 jour</span>\n </div>\n </div>\n </onemrva-mat-selectable-box>\n\n <onemrva-mat-selectable-box #box2 value=\"box2Value\">\n <!-- The title attribute makes it in the header -->\n <ng-container title>\n <span>36 - 49 ans</span>\n </ng-container>\n\n <!-- The sticker attribute makes it in the header -->\n\n <onemrva-mat-sticker sticker [color]=\"box2.isChecked() ? 'accent' : ''\">\n 468 jours à prester au CPAS\n </onemrva-mat-sticker>\n\n <!-- No attribute makes it go in the body, which you can style yourselves - don't do it inline :) only for demo purposes -->\n\n <div class=\"d-flex\">\n <div class=\"d-flex flex-column text-right m\">\n <span>Période à prester au CPAS</span>\n <span>Date de demande des allocations</span>\n <span>Réglementation</span>\n <span>Q/S à prester au CPAS </span>\n <span>Période de référence </span>\n <span>Prestations passées prises en compte</span>\n </div>\n <div class=\"d-flex flex-column text-right bold m\">\n <span>16/08/2022 - 14/08/2023</span>\n <span>16/08/2023</span>\n <span>Article 30 : Nouveau dossier</span>\n <span>Q/S à prester au CPAS </span>\n <span>16/11/2021 - 15/08/2023</span>\n <span>0 jour</span>\n </div>\n </div>\n </onemrva-mat-selectable-box>\n</mat-radio-group>\n","demo-selectable-box-large.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { ~~MatRadioChange,~~ MatRadioModule } from '@angular/material/radio';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { ~~MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';\nimport {~~ MatIconModule } from '@angular/material/icon';\nimport { OnemrvaMatSelectableBoxModule } from '@onemrvapublic/design-system~~/mat-selectable-box~~';\nimport { ~~OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport {~~ DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system';\~~nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\~~n\n@Component({\n selector: 'app-demo-selectable-box-large',\n templateUrl: './demo-selectable-box-large.component.html',\n\n standalone: true,\n imports: [\n ReactiveFormsModule,\n MatInputModule,\n MatSelectModule,\n MatFormFieldModule,\n MatSelectSearchModule,\n MatIconModule,\n MatRadioModule,\n OnemrvaMatSelectableBoxModule,\n OnemrvaMatStickerModule,\n OnemRvaColorDirective,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectableBoxLargeComponent extends DemoComponentBase {\n form = new FormControl<string>('');\n}\n"}
1	+ {"demo-selectable-box-large.component.html":"<mat-radio-group class=\"d-flex w100\" [formControl]=\"form\">\n <onemrva-mat-selectable-box #box1 value=\"box1Value\">\n <!-- The title attribute makes it in the header -->\n <ng-container title>\n <span>36 - 49 ans</span>\n </ng-container>\n\n <!-- The sticker attribute makes it in the header -->\n <onemrva-mat-sticker sticker [color]=\"box1.isChecked() ? 'accent' : ''\">\n 468 jours à prester au CPAS\n </onemrva-mat-sticker>\n\n <!-- No attribute makes it go in the body, which you can style yourselves - don't do it inline :) only for demo purposes -->\n\n <div class=\"d-flex\">\n <div class=\"d-flex flex-column text-right m\">\n <span>Période à prester au CPAS</span>\n <span>Date de demande des allocations</span>\n <span>Réglementation</span>\n <span>Q/S à prester au CPAS </span>\n <span>Période de référence </span>\n <span>Prestations passées prises en compte</span>\n </div>\n <div class=\"d-flex flex-column text-right bold m\">\n <span>16/08/2022 - 14/08/2023</span>\n <span>16/08/2023</span>\n <span>Article 30 : Nouveau dossier</span>\n <span>Q/S à prester au CPAS </span>\n <span>16/11/2021 - 15/08/2023</span>\n <span>0 jour</span>\n </div>\n </div>\n </onemrva-mat-selectable-box>\n\n <onemrva-mat-selectable-box #box2 value=\"box2Value\">\n <!-- The title attribute makes it in the header -->\n <ng-container title>\n <span>36 - 49 ans</span>\n </ng-container>\n\n <!-- The sticker attribute makes it in the header -->\n\n <onemrva-mat-sticker sticker [color]=\"box2.isChecked() ? 'accent' : ''\">\n 468 jours à prester au CPAS\n </onemrva-mat-sticker>\n\n <!-- No attribute makes it go in the body, which you can style yourselves - don't do it inline :) only for demo purposes -->\n\n <div class=\"d-flex\">\n <div class=\"d-flex flex-column text-right m\">\n <span>Période à prester au CPAS</span>\n <span>Date de demande des allocations</span>\n <span>Réglementation</span>\n <span>Q/S à prester au CPAS </span>\n <span>Période de référence </span>\n <span>Prestations passées prises en compte</span>\n </div>\n <div class=\"d-flex flex-column text-right bold m\">\n <span>16/08/2022 - 14/08/2023</span>\n <span>16/08/2023</span>\n <span>Article 30 : Nouveau dossier</span>\n <span>Q/S à prester au CPAS </span>\n <span>16/11/2021 - 15/08/2023</span>\n <span>0 jour</span>\n </div>\n </div>\n </onemrva-mat-selectable-box>\n</mat-radio-group>\n","demo-selectable-box-large.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n MatSelectSearchModule,\n OnemrvaMatStickerModule,\n OnemrvaMatSelectableBoxModule,\n} from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system';\n\n@Component({\n selector: 'app-demo-selectable-box-large',\n templateUrl: './demo-selectable-box-large.component.html',\n\n standalone: true,\n imports: [\n ReactiveFormsModule,\n MatInputModule,\n MatSelectModule,\n MatFormFieldModule,\n MatSelectSearchModule,\n MatIconModule,\n MatRadioModule,\n OnemrvaMatSelectableBoxModule,\n OnemrvaMatStickerModule,\n OnemRvaColorDirective,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectableBoxLargeComponent extends DemoComponentBase {\n form = new FormControl<string>('');\n}\n"}

package/assets/json/selectable-box.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"demo-selectable-box.component.html":"<mat-radio-group\n name=\"unemploymentType\"\n required\n [formControl]=\"formControl\"\n class=\"d-flex w100\"\n>\n @for (reason of reasons; track $index) {\n <onemrva-mat-selectable-box\n [readonly]=\"readonly()\"\n [value]=\"reason\"\n [disabled]=\"reason === 'Disabled' \|\| disabled()\"\n >\n @if (title()) {\n <ng-container title>{{ reason }}</ng-container>\n }\n @if (icon()) {\n <ng-container icon>{{ icons[$index] }}</ng-container>\n }\n @if (content()) {\n <ng-container>\n This<br />\n Is<br />\n A<br />\n Short<br />\n Content\n </ng-container>\n }\n </onemrva-mat-selectable-box>\n }\n</mat-radio-group>\n","demo-selectable-box.component.ts":"import { Component, Input, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSelectSearchModule } from '@onemrvapublic/design-system~~/mat-select-search~~';\nimport { MatIconModule } from '@angular/material/icon';\nimport { ~~OnemrvaMatSelectableBoxModule } from '@onemrvapublic/design-system/mat-selectable-box';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport {~~ DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\n\n@Component({\n selector: 'app-demo-selectable-box',\n templateUrl: './demo-selectable-box.component.html',\n\n standalone: true,\n imports: [\n ReactiveFormsModule,\n MatInputModule,\n MatSelectModule,\n MatFormFieldModule,\n MatSelectSearchModule,\n MatIconModule,\n MatRadioModule,\n OnemrvaMatSelectableBoxModule,\n OnemrvaMatStickerModule,\n OnemRvaReadonlyDirective,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectableBoxComponent extends DemoComponentBase {\n formControl = new FormControl<string>('');\n\n readonly = input<boolean>(false);\n disabled = input<boolean>(false);\n title = input<boolean>(true);\n content = input<boolean>(true);\n icon = input<boolean>(true);\n\n reasons = ['Economical', 'Bad Weather', 'Other', 'Disabled'];\n icons = ['money', 'thunderstorm', 'rainy', 'switch'];\n}\n"}
1	+ {"demo-selectable-box.component.html":"<mat-radio-group\n name=\"unemploymentType\"\n required\n [formControl]=\"formControl\"\n class=\"d-flex w100\"\n>\n @for (reason of reasons; track $index) {\n <onemrva-mat-selectable-box\n [readonly]=\"readonly()\"\n [value]=\"reason\"\n [disabled]=\"reason === 'Disabled' \|\| disabled()\"\n >\n @if (title()) {\n <ng-container title>{{ reason }}</ng-container>\n }\n @if (icon()) {\n <ng-container icon>{{ icons[$index] }}</ng-container>\n }\n @if (content()) {\n <ng-container>\n This<br />\n Is<br />\n A<br />\n Short<br />\n Content\n </ng-container>\n }\n </onemrva-mat-selectable-box>\n }\n</mat-radio-group>\n","demo-selectable-box.component.ts":"import { Component, Input, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport {\n MatSelectSearchModule,\n OnemrvaMatStickerModule,\n OnemrvaMatSelectableBoxModule,\n} from '@onemrvapublic/design-system';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\n\n@Component({\n selector: 'app-demo-selectable-box',\n templateUrl: './demo-selectable-box.component.html',\n\n standalone: true,\n imports: [\n ReactiveFormsModule,\n MatInputModule,\n MatSelectModule,\n MatFormFieldModule,\n MatSelectSearchModule,\n MatIconModule,\n MatRadioModule,\n OnemrvaMatSelectableBoxModule,\n OnemrvaMatStickerModule,\n OnemRvaReadonlyDirective,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectableBoxComponent extends DemoComponentBase {\n formControl = new FormControl<string>('');\n\n readonly = input<boolean>(false);\n disabled = input<boolean>(false);\n title = input<boolean>(true);\n content = input<boolean>(true);\n icon = input<boolean>(true);\n\n reasons = ['Economical', 'Bad Weather', 'Other', 'Disabled'];\n icons = ['money', 'thunderstorm', 'rainy', 'switch'];\n}\n"}

package/assets/json/task-list.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"demo-task-list.component.html":"<onemrva-mat-task-list [readonly]=\"readonly()\">\n @for (task of tasks; track $index) {\n @if (type() === 'checkbox') {\n <onemrva-mat-task class=\"mb\" [form]=\"form\" [color]=\"color()\">\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n } @else if (type() === 'bubble') {\n <onemrva-mat-task\n [bubble]=\"'' + $index\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n >\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n } @else if (type() === 'icon') {\n <onemrva-mat-task\n [icon]=\"'home'\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n >\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n }\n }\n</onemrva-mat-task-list>\n","demo-task-list.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport {\n OnemrvaMatTaskComponent,\n OnemrvaMatTaskContentComponent,\n OnemrvaMatTaskListComponent,\n OnemrvaMatTaskListModule,\n OnemrvaMatTaskTitleComponent,\n} from '@onemrvapublic/design-system~~/mat-task-list~~';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport {\n OnemRvaColorDirective,\n OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system';\n\n@Component({\n selector: 'app-demo-task-list',\n templateUrl: 'demo-task-list.component.html',\n\n standalone: true,\n imports: [\n CommonModule,\n OnemrvaMatTaskListModule,\n MatButtonModule,\n MatIconModule,\n OnemrvaMatTaskComponent,\n OnemrvaMatTaskTitleComponent,\n OnemrvaMatTaskContentComponent,\n OnemrvaMatTaskListComponent,\n OnemRvaColorDirective,\n OnemRvaReadonlyDirective,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTaskListComponent extends DemoComponentBase {\n readonly = input(false);\n disabled = input(false);\n\n type = input<'checkbox' \| 'bubble' \| 'icon'>('checkbox');\n color = input<'' \| 'error'>('');\n\n tasks = ['Go Home', 'Go to Work', 'Go to School', 'Go to Shopping'];\n tasksDesc = ['Get a cab, ', 'Get a taxi, ', 'Get a bus, ', 'Get a ride. '];\n\n form: FormControl = new FormControl(false);\n\n constructor() {\n super();\n effect(() => {\n if (this.disabled()) this.form.disable();\n else this.form.enable();\n });\n }\n}\n"}
1	+ {"demo-task-list.component.html":"<onemrva-mat-task-list [readonly]=\"readonly()\">\n @for (task of tasks; track $index) {\n @if (type() === 'checkbox') {\n <onemrva-mat-task class=\"mb\" [form]=\"form\" [color]=\"color()\">\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n } @else if (type() === 'bubble') {\n <onemrva-mat-task\n [bubble]=\"'' + $index\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n >\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n } @else if (type() === 'icon') {\n <onemrva-mat-task\n [icon]=\"'home'\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n >\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n }\n }\n</onemrva-mat-task-list>\n","demo-task-list.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport {\n OnemrvaMatTaskComponent,\n OnemrvaMatTaskContentComponent,\n OnemrvaMatTaskListComponent,\n OnemrvaMatTaskListModule,\n OnemrvaMatTaskTitleComponent,\n} from '@onemrvapublic/design-system';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport {\n OnemRvaColorDirective,\n OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system';\n\n@Component({\n selector: 'app-demo-task-list',\n templateUrl: 'demo-task-list.component.html',\n\n standalone: true,\n imports: [\n CommonModule,\n OnemrvaMatTaskListModule,\n MatButtonModule,\n MatIconModule,\n OnemrvaMatTaskComponent,\n OnemrvaMatTaskTitleComponent,\n OnemrvaMatTaskContentComponent,\n OnemrvaMatTaskListComponent,\n OnemRvaColorDirective,\n OnemRvaReadonlyDirective,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTaskListComponent extends DemoComponentBase {\n readonly = input(false);\n disabled = input(false);\n\n type = input<'checkbox' \| 'bubble' \| 'icon'>('checkbox');\n color = input<'' \| 'error'>('');\n\n tasks = ['Go Home', 'Go to Work', 'Go to School', 'Go to Shopping'];\n tasksDesc = ['Get a cab, ', 'Get a taxi, ', 'Get a bus, ', 'Get a ride. '];\n\n form: FormControl = new FormControl(false);\n\n constructor() {\n super();\n effect(() => {\n if (this.disabled()) this.form.disable();\n else this.form.enable();\n });\n }\n}\n"}

package/assets/json/timepicker.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"demo-timepicker.component.html":"<mat-form-field [readonly]=\"readonly\">\n <mat-label>Time</mat-label>\n <input [formControl]=\"form\" matInput [matTimepicker]=\"timepicker\" />\n <mat-timepicker-toggle\n [ariaLabel]=\"'Pick a time'\"\n matSuffix\n [for]=\"timepicker\"\n ></mat-timepicker-toggle>\n <mat-timepicker color=\"accent\" #timepicker></mat-timepicker>\n</mat-form-field>\n","demo-timepicker.component.ts":"import { Component, effect, Input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { ~~OnemrvaMatTimepickerModule } from '@onemrvapublic/design-system/mat-timepicker';\nimport {~~ DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\n\n@Component({\n selector: 'app-demo-timepicker',\n templateUrl: 'demo-timepicker.component.html',\n\n standalone: true,\n imports: [\n CommonModule,\n MatFormFieldModule,\n ReactiveFormsModule,\n MatInputModule,\n OnemrvaMatTimepickerModule,\n OnemRvaReadonlyDirective,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTimepickerComponent extends DemoComponentBase {\n public form = new FormControl();\n\n @Input()\n disabled = false;\n\n @Input()\n readonly = false;\n\n constructor() {\n super();\n this.form?.setValue(new Date());\n this.form?.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => {\n this.output.set(\n `${value.getHours().toString().padStart(2, '0')}:${value.getMinutes().toString().padStart(2, '0')}`,\n );\n });\n effect(() => {\n if (this.disabled) this.form.disable();\n else this.form.enable();\n });\n }\n}\n"}
1	+ {"demo-timepicker.component.html":"<mat-form-field [readonly]=\"readonly\">\n <mat-label>Time</mat-label>\n <input [formControl]=\"form\" matInput [matTimepicker]=\"timepicker\" />\n <mat-timepicker-toggle\n [ariaLabel]=\"'Pick a time'\"\n matSuffix\n [for]=\"timepicker\"\n ></mat-timepicker-toggle>\n <mat-timepicker color=\"accent\" #timepicker></mat-timepicker>\n</mat-form-field>\n","demo-timepicker.component.ts":"import { Component, effect, Input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n OnemRvaReadonlyDirective,\n OnemrvaMatTimepickerModule,\n} from '@onemrvapublic/design-system';\n\n@Component({\n selector: 'app-demo-timepicker',\n templateUrl: 'demo-timepicker.component.html',\n\n standalone: true,\n imports: [\n CommonModule,\n MatFormFieldModule,\n ReactiveFormsModule,\n MatInputModule,\n OnemrvaMatTimepickerModule,\n OnemRvaReadonlyDirective,\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTimepickerComponent extends DemoComponentBase {\n public form = new FormControl();\n\n @Input()\n disabled = false;\n\n @Input()\n readonly = false;\n\n constructor() {\n super();\n this.form?.setValue(new Date());\n this.form?.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => {\n this.output.set(\n `${value.getHours().toString().padStart(2, '0')}:${value.getMinutes().toString().padStart(2, '0')}`,\n );\n });\n effect(() => {\n if (this.disabled) this.form.disable();\n else this.form.enable();\n });\n }\n}\n"}

package/assets/json/toc.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"demo-toc.component.html":"<div class=\"toc-content\">\n <p>\n Thermodynamics is a branch of physics that deals with heat, work, and\n temperature, and their relation to energy, entropy, and the physical\n properties of matter and radiation. The behavior of these quantities is\n governed by the four laws of thermodynamics which convey a quantitative\n description using measurable macroscopic physical quantities, but may be\n explained in terms of microscopic constituents by statistical mechanics.\n Thermodynamics applies to a wide variety of topics in science and\n engineering, especially physical chemistry, biochemistry, chemical\n engineering and mechanical engineering, but also in other complex fields\n such as meteorology. Historically, thermodynamics developed out of a desire\n to increase the efficiency of early steam engines, particularly through the\n work of French physicist Sadi Carnot (1824) who believed that engine\n efficiency was the key that could help France win the Napoleonic Wars.[1]\n Scots-Irish physicist Lord Kelvin was the first to formulate a concise\n definition of thermodynamics in 1854[2] which stated, \"Thermo-dynamics is\n the subject of the relation of heat to forces acting between contiguous\n parts of bodies, and the relation of heat to electrical agency.\" German\n physicist and mathematician Rudolf Clausius restated Carnot's principle\n known as the Carnot cycle and gave so the theory of heat a truer and sounder\n basis. His most important paper, \"On the Moving Force of Heat\",[3] published\n in 1850, first stated the second law of thermodynamics. In 1865 he\n introduced the concept of entropy. In 1870 he introduced the virial theorem,\n which applied to heat.[4] The initial application of thermodynamics to\n mechanical heat engines was quickly extended to the study of chemical\n compounds and chemical reactions. Chemical thermodynamics studies the nature\n of the role of entropy in the process of chemical reactions and has provided\n the bulk of expansion and knowledge of the field. Other formulations of\n thermodynamics emerged. Statistical thermodynamics, or statistical\n mechanics, concerns itself with statistical predictions of the collective\n motion of particles from their microscopic behavior. In 1909, Constantin\n Carathéodory presented a purely mathematical approach in an axiomatic\n formulation, a description often referred to as geometrical thermodynamics.\n </p>\n\n <h2\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.introduction',\n path: '#introduction',\n }\"\n >\n Introduction\n </h2>\n <p>\n A description of any thermodynamic system employs the four laws of\n thermodynamics that form an axiomatic basis. The first law specifies that\n energy can be transferred between physical systems as heat, as work, and\n with transfer of matter.[5] The second law defines the existence of a\n quantity called entropy, that describes the direction, thermodynamically,\n that a system can evolve and quantifies the state of order of a system and\n that can be used to quantify the useful work that can be extracted from the\n system.[6] In thermodynamics, interactions between large ensembles of\n objects are studied and categorized. Central to this are the concepts of the\n thermodynamic system and its surroundings. A system is composed of\n particles, whose average motions define its properties, and those properties\n are in turn related to one another through equations of state. Properties\n can be combined to express internal energy and thermodynamic potentials,\n which are useful for determining conditions for equilibrium and spontaneous\n processes. With these tools, thermodynamics can be used to describe how\n systems respond to changes in their environment. This can be applied to a\n wide variety of topics in science and engineering, such as engines, phase\n transitions, chemical reactions, transport phenomena, and even black holes.\n The results of thermodynamics are essential for other fields of physics and\n for chemistry, chemical engineering, corrosion engineering, aerospace\n engineering, mechanical engineering, cell biology, biomedical engineering,\n materials science, and economics, to name a few.[7][8] This article is\n focused mainly on classical thermodynamics which primarily studies systems\n in thermodynamic equilibrium. Non-equilibrium thermodynamics is often\n treated as an extension of the classical treatment, but statistical\n mechanics has brought many advances to that field.\n </p>\n\n <h2\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.history',\n path: '#history',\n }\"\n >\n History\n </h2>\n <p>\n The history of thermodynamics as a scientific discipline generally begins\n with Otto von Guericke who, in 1650, built and designed the world's first\n vacuum pump and demonstrated a vacuum using his Magdeburg hemispheres.\n Guericke was driven to make a vacuum in order to disprove Aristotle's\n long-held supposition that 'nature abhors a vacuum'. Shortly after Guericke,\n the Anglo-Irish physicist and chemist Robert Boyle had learned of Guericke's\n designs and, in 1656, in coordination with English scientist Robert Hooke,\n built an air pump.[10] Using this pump, Boyle and Hooke noticed a\n correlation between pressure, temperature, and volume. In time, Boyle's Law\n was formulated, which states that pressure and volume are inversely\n proportional. Then, in 1679, based on these concepts, an associate of\n Boyle's named Denis Papin built a steam digester, which was a closed vessel\n with a tightly fitting lid that confined steam until a high pressure was\n generated. Later designs implemented a steam release valve that kept the\n machine from exploding. By watching the valve rhythmically move up and down,\n Papin conceived of the idea of a piston and a cylinder engine. He did not,\n however, follow through with his design. Nevertheless, in 1697, based on\n Papin's designs, engineer Thomas Savery built the first engine, followed by\n Thomas Newcomen in 1712. Although these early engines were crude and\n inefficient, they attracted the attention of the leading scientists of the\n time. The fundamental concepts of heat capacity and latent heat, which were\n necessary for the development of thermodynamics, were developed by Professor\n Joseph Black at the University of Glasgow, where James Watt was employed as\n an instrument maker. Black and Watt performed experiments together, but it\n was Watt who conceived the idea of the external condenser which resulted in\n a large increase in steam engine efficiency.[11] Drawing on all the previous\n work led Sadi Carnot, the \"father of thermodynamics\", to publish Reflections\n on the Motive Power of Fire (1824), a discourse on heat, power, energy and\n engine efficiency. The book outlined the basic energetic relations between\n the Carnot engine, the Carnot cycle, and motive power. It marked the start\n of thermodynamics as a modern science.[12] The first thermodynamic textbook\n was written in 1859 by William Rankine, originally trained as a physicist\n and a civil and mechanical engineering professor at the University of\n Glasgow.[13] The first and second laws of thermodynamics emerged\n simultaneously in the 1850s, primarily out of the works of William Rankine,\n Rudolf Clausius, and William Thomson (Lord Kelvin). The foundations of\n statistical thermodynamics were set out by physicists such as James Clerk\n Maxwell, Ludwig Boltzmann, Max Planck, Rudolf Clausius and J. Willard Gibbs.\n Clausius, who first stated the basic ideas of the second law in his paper\n \"On the Moving Force of Heat\",[3] published in 1850, and is called \"one of\n the founding fathers of thermodynamics\",[14] introduced the concept of\n entropy in 1865.During the years 1873–76 the American mathematical physicist\n Josiah Willard Gibbs published a series of three papers, the most famous\n being On the Equilibrium of Heterogeneous Substances,[15] in which he showed\n how thermodynamic processes, including chemical reactions, could be\n graphically analyzed, by studying the energy, entropy, volume, temperature\n and pressure of the thermodynamic system in such a manner, one can determine\n if a process would occur spontaneously.[16] Also Pierre Duhem in the 19th\n century wrote about chemical thermodynamics.[17] During the early 20th\n century, chemists such as Gilbert N. Lewis, Merle Randall,[18] and E. A.\n Guggenheim[19][20] applied the mathematical methods of Gibbs to the analysis\n of chemical processes.\n </p>\n\n <h2\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.etymology',\n path: '#etymology',\n }\"\n >\n Etymology\n </h2>\n <p>\n The etymology of thermodynamics has an intricate history.[21] It was first\n spelled in a hyphenated form as an adjective (thermo-dynamic) and from 1854\n to 1868 as the noun thermo-dynamics to represent the science of generalized\n heat engines.[21] American biophysicist Donald Haynie claims that\n thermodynamics was coined in 1840 from the Greek root θέρμη therme, meaning\n \"heat\", and δύναμις dynamis, meaning \"power\".[22] Pierre Perrot claims that\n the term thermodynamics was coined by James Joule in 1858 to designate the\n science of relations between heat and power,[12] however, Joule never used\n that term, but used instead the term perfect thermo-dynamic engine in\n reference to Thomson's 1849[23] phraseology.[21] By 1858, thermo-dynamics,\n as a functional term, was used in William Thomson's paper \"An Account of\n Carnot's Theory of the Motive Power of Heat.\"[23]\n </p>\n\n <h2\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.branches',\n path: '#branches',\n }\"\n >\n Branches of thermodynamics\n </h2>\n <p>\n The study of thermodynamical systems has developed into several related\n branches, each using a different fundamental model as a theoretical or\n experimental basis, or applying the principles to varying types of systems.\n </p>\n\n <h3\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.classicalThermodynamics',\n path: '#classical-thermodynamics',\n level: level.SUBSECTION,\n }\"\n >\n Classical thermodynamics\n </h3>\n <p>\n Classical thermodynamics is the description of the states of thermodynamic\n systems at near-equilibrium, that uses macroscopic, measurable properties.\n It is used to model exchanges of energy, work and heat based on the laws of\n thermodynamics. The qualifier classical reflects the fact that it represents\n the first level of understanding of the subject as it developed in the 19th\n century and describes the changes of a system in terms of macroscopic\n empirical (large scale, and measurable) parameters. A microscopic\n interpretation of these concepts was later provided by the development of\n statistical mechanics.\n </p>\n\n <h3\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.statisticalThermodynamics',\n path: '#statistical-thermodynamics',\n level: level.SUBSECTION,\n }\"\n >\n Statistical mechanics\n </h3>\n <p>\n Statistical mechanics, also known as statistical thermodynamics, emerged\n with the development of atomic and molecular theories in the late 19th\n century and early 20th century, and supplemented classical thermodynamics\n with an interpretation of the microscopic interactions between individual\n particles or quantum-mechanical states. This field relates the microscopic\n properties of individual atoms and molecules to the macroscopic, bulk\n properties of materials that can be observed on the human scale, thereby\n explaining classical thermodynamics as a natural result of statistics,\n classical mechanics, and quantum theory at the microscopic level.\n </p>\n\n <h3\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.chemicalThermodynamics',\n path: '#chemical-thermodynamics',\n level: level.SUBSECTION,\n }\"\n >\n Chemical thermodynamics\n </h3>\n <p>\n Chemical thermodynamics is the study of the interrelation of energy with\n chemical reactions or with a physical change of state within the confines of\n the laws of thermodynamics. The primary objective of chemical thermodynamics\n is determining the spontaneity of a given transformation.[24]\n </p>\n\n <h3\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.equilibriumThermodynamics',\n path: '#equilibrium-thermodynamics',\n level: level.SUBSECTION,\n }\"\n >\n Equilibrium thermodynamics\n </h3>\n <p>\n Equilibrium thermodynamics is the study of transfers of matter and energy in\n systems or bodies that, by agencies in their surroundings, can be driven\n from one state of thermodynamic equilibrium to another. The term\n 'thermodynamic equilibrium' indicates a state of balance, in which all\n macroscopic flows are zero; in the case of the simplest systems or bodies,\n their intensive properties are homogeneous, and their pressures are\n perpendicular to their boundaries. In an equilibrium state there are no\n unbalanced potentials, or driving forces, between macroscopically distinct\n parts of the system. A central aim in equilibrium thermodynamics is: given a\n system in a well-defined initial equilibrium state, and given its\n surroundings, and given its constitutive walls, to calculate what will be\n the final equilibrium state of the system after a specified thermodynamic\n operation has changed its walls or surroundings.\n </p>\n\n <h3\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.nonEquilibriumThermodynamics',\n path: '#non-equilibrium-thermodynamics',\n level: level.SUBSECTION,\n }\"\n >\n Non-equilibrium thermodynamics\n </h3>\n <p>\n Non-equilibrium thermodynamics is a branch of thermodynamics that deals with\n systems that are not in thermodynamic equilibrium. Most systems found in\n nature are not in thermodynamic equilibrium because they are not in\n stationary states, and are continuously and discontinuously subject to flux\n of matter and energy to and from other systems. The thermodynamic study of\n non-equilibrium systems requires more general concepts than are dealt with\n by equilibrium thermodynamics.[25] Many natural systems still today remain\n beyond the scope of currently known macroscopic thermodynamic methods.\n </p>\n\n <onemrva-mat-table-of-content\n titleKey=\"thermo.title\"\n tocName=\"thermo\"\n ></onemrva-mat-table-of-content>\n</div>\n","demo-toc.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport {\n OnemrvaMatTableOfContentComponent,\n OnemrvaMatTableOfContentDirective,\n OnemrvaMatTableOfContentService,\n OnemrvaMatTocAnchorLevel,\n OnemrvaMatTocAnchorStatus,\n} from '@onemrvapublic/design-system/mat-table-of-content';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-toc',\n templateUrl: 'demo-toc.component.html',\n\n standalone: true,\n imports: [\n OnemrvaMatTableOfContentComponent,\n OnemrvaMatTableOfContentDirective,\n ],\n providers: [OnemrvaMatTableOfContentService],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTocComponent extends DemoComponentBase {\n status = OnemrvaMatTocAnchorStatus;\n level = OnemrvaMatTocAnchorLevel;\n\n tocService = inject(OnemrvaMatTableOfContentService);\n}\n"}
1	+ {"demo-toc.component.html":"<div class=\"toc-content\">\n <p>\n Thermodynamics is a branch of physics that deals with heat, work, and\n temperature, and their relation to energy, entropy, and the physical\n properties of matter and radiation. The behavior of these quantities is\n governed by the four laws of thermodynamics which convey a quantitative\n description using measurable macroscopic physical quantities, but may be\n explained in terms of microscopic constituents by statistical mechanics.\n Thermodynamics applies to a wide variety of topics in science and\n engineering, especially physical chemistry, biochemistry, chemical\n engineering and mechanical engineering, but also in other complex fields\n such as meteorology. Historically, thermodynamics developed out of a desire\n to increase the efficiency of early steam engines, particularly through the\n work of French physicist Sadi Carnot (1824) who believed that engine\n efficiency was the key that could help France win the Napoleonic Wars.[1]\n Scots-Irish physicist Lord Kelvin was the first to formulate a concise\n definition of thermodynamics in 1854[2] which stated, \"Thermo-dynamics is\n the subject of the relation of heat to forces acting between contiguous\n parts of bodies, and the relation of heat to electrical agency.\" German\n physicist and mathematician Rudolf Clausius restated Carnot's principle\n known as the Carnot cycle and gave so the theory of heat a truer and sounder\n basis. His most important paper, \"On the Moving Force of Heat\",[3] published\n in 1850, first stated the second law of thermodynamics. In 1865 he\n introduced the concept of entropy. In 1870 he introduced the virial theorem,\n which applied to heat.[4] The initial application of thermodynamics to\n mechanical heat engines was quickly extended to the study of chemical\n compounds and chemical reactions. Chemical thermodynamics studies the nature\n of the role of entropy in the process of chemical reactions and has provided\n the bulk of expansion and knowledge of the field. Other formulations of\n thermodynamics emerged. Statistical thermodynamics, or statistical\n mechanics, concerns itself with statistical predictions of the collective\n motion of particles from their microscopic behavior. In 1909, Constantin\n Carathéodory presented a purely mathematical approach in an axiomatic\n formulation, a description often referred to as geometrical thermodynamics.\n </p>\n\n <h2\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.introduction',\n path: '#introduction',\n }\"\n >\n Introduction\n </h2>\n <p>\n A description of any thermodynamic system employs the four laws of\n thermodynamics that form an axiomatic basis. The first law specifies that\n energy can be transferred between physical systems as heat, as work, and\n with transfer of matter.[5] The second law defines the existence of a\n quantity called entropy, that describes the direction, thermodynamically,\n that a system can evolve and quantifies the state of order of a system and\n that can be used to quantify the useful work that can be extracted from the\n system.[6] In thermodynamics, interactions between large ensembles of\n objects are studied and categorized. Central to this are the concepts of the\n thermodynamic system and its surroundings. A system is composed of\n particles, whose average motions define its properties, and those properties\n are in turn related to one another through equations of state. Properties\n can be combined to express internal energy and thermodynamic potentials,\n which are useful for determining conditions for equilibrium and spontaneous\n processes. With these tools, thermodynamics can be used to describe how\n systems respond to changes in their environment. This can be applied to a\n wide variety of topics in science and engineering, such as engines, phase\n transitions, chemical reactions, transport phenomena, and even black holes.\n The results of thermodynamics are essential for other fields of physics and\n for chemistry, chemical engineering, corrosion engineering, aerospace\n engineering, mechanical engineering, cell biology, biomedical engineering,\n materials science, and economics, to name a few.[7][8] This article is\n focused mainly on classical thermodynamics which primarily studies systems\n in thermodynamic equilibrium. Non-equilibrium thermodynamics is often\n treated as an extension of the classical treatment, but statistical\n mechanics has brought many advances to that field.\n </p>\n\n <h2\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.history',\n path: '#history',\n }\"\n >\n History\n </h2>\n <p>\n The history of thermodynamics as a scientific discipline generally begins\n with Otto von Guericke who, in 1650, built and designed the world's first\n vacuum pump and demonstrated a vacuum using his Magdeburg hemispheres.\n Guericke was driven to make a vacuum in order to disprove Aristotle's\n long-held supposition that 'nature abhors a vacuum'. Shortly after Guericke,\n the Anglo-Irish physicist and chemist Robert Boyle had learned of Guericke's\n designs and, in 1656, in coordination with English scientist Robert Hooke,\n built an air pump.[10] Using this pump, Boyle and Hooke noticed a\n correlation between pressure, temperature, and volume. In time, Boyle's Law\n was formulated, which states that pressure and volume are inversely\n proportional. Then, in 1679, based on these concepts, an associate of\n Boyle's named Denis Papin built a steam digester, which was a closed vessel\n with a tightly fitting lid that confined steam until a high pressure was\n generated. Later designs implemented a steam release valve that kept the\n machine from exploding. By watching the valve rhythmically move up and down,\n Papin conceived of the idea of a piston and a cylinder engine. He did not,\n however, follow through with his design. Nevertheless, in 1697, based on\n Papin's designs, engineer Thomas Savery built the first engine, followed by\n Thomas Newcomen in 1712. Although these early engines were crude and\n inefficient, they attracted the attention of the leading scientists of the\n time. The fundamental concepts of heat capacity and latent heat, which were\n necessary for the development of thermodynamics, were developed by Professor\n Joseph Black at the University of Glasgow, where James Watt was employed as\n an instrument maker. Black and Watt performed experiments together, but it\n was Watt who conceived the idea of the external condenser which resulted in\n a large increase in steam engine efficiency.[11] Drawing on all the previous\n work led Sadi Carnot, the \"father of thermodynamics\", to publish Reflections\n on the Motive Power of Fire (1824), a discourse on heat, power, energy and\n engine efficiency. The book outlined the basic energetic relations between\n the Carnot engine, the Carnot cycle, and motive power. It marked the start\n of thermodynamics as a modern science.[12] The first thermodynamic textbook\n was written in 1859 by William Rankine, originally trained as a physicist\n and a civil and mechanical engineering professor at the University of\n Glasgow.[13] The first and second laws of thermodynamics emerged\n simultaneously in the 1850s, primarily out of the works of William Rankine,\n Rudolf Clausius, and William Thomson (Lord Kelvin). The foundations of\n statistical thermodynamics were set out by physicists such as James Clerk\n Maxwell, Ludwig Boltzmann, Max Planck, Rudolf Clausius and J. Willard Gibbs.\n Clausius, who first stated the basic ideas of the second law in his paper\n \"On the Moving Force of Heat\",[3] published in 1850, and is called \"one of\n the founding fathers of thermodynamics\",[14] introduced the concept of\n entropy in 1865.During the years 1873–76 the American mathematical physicist\n Josiah Willard Gibbs published a series of three papers, the most famous\n being On the Equilibrium of Heterogeneous Substances,[15] in which he showed\n how thermodynamic processes, including chemical reactions, could be\n graphically analyzed, by studying the energy, entropy, volume, temperature\n and pressure of the thermodynamic system in such a manner, one can determine\n if a process would occur spontaneously.[16] Also Pierre Duhem in the 19th\n century wrote about chemical thermodynamics.[17] During the early 20th\n century, chemists such as Gilbert N. Lewis, Merle Randall,[18] and E. A.\n Guggenheim[19][20] applied the mathematical methods of Gibbs to the analysis\n of chemical processes.\n </p>\n\n <h2\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.etymology',\n path: '#etymology',\n }\"\n >\n Etymology\n </h2>\n <p>\n The etymology of thermodynamics has an intricate history.[21] It was first\n spelled in a hyphenated form as an adjective (thermo-dynamic) and from 1854\n to 1868 as the noun thermo-dynamics to represent the science of generalized\n heat engines.[21] American biophysicist Donald Haynie claims that\n thermodynamics was coined in 1840 from the Greek root θέρμη therme, meaning\n \"heat\", and δύναμις dynamis, meaning \"power\".[22] Pierre Perrot claims that\n the term thermodynamics was coined by James Joule in 1858 to designate the\n science of relations between heat and power,[12] however, Joule never used\n that term, but used instead the term perfect thermo-dynamic engine in\n reference to Thomson's 1849[23] phraseology.[21] By 1858, thermo-dynamics,\n as a functional term, was used in William Thomson's paper \"An Account of\n Carnot's Theory of the Motive Power of Heat.\"[23]\n </p>\n\n <h2\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.branches',\n path: '#branches',\n }\"\n >\n Branches of thermodynamics\n </h2>\n <p>\n The study of thermodynamical systems has developed into several related\n branches, each using a different fundamental model as a theoretical or\n experimental basis, or applying the principles to varying types of systems.\n </p>\n\n <h3\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.classicalThermodynamics',\n path: '#classical-thermodynamics',\n level: level.SUBSECTION,\n }\"\n >\n Classical thermodynamics\n </h3>\n <p>\n Classical thermodynamics is the description of the states of thermodynamic\n systems at near-equilibrium, that uses macroscopic, measurable properties.\n It is used to model exchanges of energy, work and heat based on the laws of\n thermodynamics. The qualifier classical reflects the fact that it represents\n the first level of understanding of the subject as it developed in the 19th\n century and describes the changes of a system in terms of macroscopic\n empirical (large scale, and measurable) parameters. A microscopic\n interpretation of these concepts was later provided by the development of\n statistical mechanics.\n </p>\n\n <h3\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.statisticalThermodynamics',\n path: '#statistical-thermodynamics',\n level: level.SUBSECTION,\n }\"\n >\n Statistical mechanics\n </h3>\n <p>\n Statistical mechanics, also known as statistical thermodynamics, emerged\n with the development of atomic and molecular theories in the late 19th\n century and early 20th century, and supplemented classical thermodynamics\n with an interpretation of the microscopic interactions between individual\n particles or quantum-mechanical states. This field relates the microscopic\n properties of individual atoms and molecules to the macroscopic, bulk\n properties of materials that can be observed on the human scale, thereby\n explaining classical thermodynamics as a natural result of statistics,\n classical mechanics, and quantum theory at the microscopic level.\n </p>\n\n <h3\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.chemicalThermodynamics',\n path: '#chemical-thermodynamics',\n level: level.SUBSECTION,\n }\"\n >\n Chemical thermodynamics\n </h3>\n <p>\n Chemical thermodynamics is the study of the interrelation of energy with\n chemical reactions or with a physical change of state within the confines of\n the laws of thermodynamics. The primary objective of chemical thermodynamics\n is determining the spontaneity of a given transformation.[24]\n </p>\n\n <h3\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.equilibriumThermodynamics',\n path: '#equilibrium-thermodynamics',\n level: level.SUBSECTION,\n }\"\n >\n Equilibrium thermodynamics\n </h3>\n <p>\n Equilibrium thermodynamics is the study of transfers of matter and energy in\n systems or bodies that, by agencies in their surroundings, can be driven\n from one state of thermodynamic equilibrium to another. The term\n 'thermodynamic equilibrium' indicates a state of balance, in which all\n macroscopic flows are zero; in the case of the simplest systems or bodies,\n their intensive properties are homogeneous, and their pressures are\n perpendicular to their boundaries. In an equilibrium state there are no\n unbalanced potentials, or driving forces, between macroscopically distinct\n parts of the system. A central aim in equilibrium thermodynamics is: given a\n system in a well-defined initial equilibrium state, and given its\n surroundings, and given its constitutive walls, to calculate what will be\n the final equilibrium state of the system after a specified thermodynamic\n operation has changed its walls or surroundings.\n </p>\n\n <h3\n [onemrvaMatToc]=\"{\n tocName: 'thermo',\n titleKey: 'thermo.nonEquilibriumThermodynamics',\n path: '#non-equilibrium-thermodynamics',\n level: level.SUBSECTION,\n }\"\n >\n Non-equilibrium thermodynamics\n </h3>\n <p>\n Non-equilibrium thermodynamics is a branch of thermodynamics that deals with\n systems that are not in thermodynamic equilibrium. Most systems found in\n nature are not in thermodynamic equilibrium because they are not in\n stationary states, and are continuously and discontinuously subject to flux\n of matter and energy to and from other systems. The thermodynamic study of\n non-equilibrium systems requires more general concepts than are dealt with\n by equilibrium thermodynamics.[25] Many natural systems still today remain\n beyond the scope of currently known macroscopic thermodynamic methods.\n </p>\n\n <onemrva-mat-table-of-content\n titleKey=\"thermo.title\"\n tocName=\"thermo\"\n ></onemrva-mat-table-of-content>\n</div>\n","demo-toc.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport {\n OnemrvaMatTableOfContentComponent,\n OnemrvaMatTableOfContentDirective,\n OnemrvaMatTableOfContentService,\n OnemrvaMatTocAnchorLevel,\n OnemrvaMatTocAnchorStatus,\n} from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-toc',\n templateUrl: 'demo-toc.component.html',\n\n standalone: true,\n imports: [\n OnemrvaMatTableOfContentComponent,\n OnemrvaMatTableOfContentDirective,\n ],\n providers: [OnemrvaMatTableOfContentService],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTocComponent extends DemoComponentBase {\n status = OnemrvaMatTocAnchorStatus;\n level = OnemrvaMatTocAnchorLevel;\n\n tocService = inject(OnemrvaMatTableOfContentService);\n}\n"}

package/assets/json/tooltip.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"demo-tooltip.component.html":"<div class=\"container\">\n <div class=\"row\">\n <div class=\"col-4\">\n <p style=\"display: flex\">\n <mat-icon\n class=\"filled\"\n color=\"info\"\n matTooltipPosition=\"right\"\n matTooltip=\"Here you can write some information on the right\"\n aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n >\n info\n </mat-icon>\n Right\n </p>\n </div>\n\n <div class=\"col-4\">\n <p style=\"display: flex\">\n <mat-icon\n class=\"filled\"\n color=\"info\"\n matTooltipPosition=\"above\"\n matTooltip=\"Here you can write some information above\"\n aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n >\n info\n </mat-icon>\n Above\n </p>\n <p class=\"text-center\" style=\"display: flex\">\n <mat-icon\n class=\"filled\"\n color=\"info\"\n matTooltipPosition=\"below\"\n matTooltip=\"Here you can write some information below\"\n aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n >\n info\n </mat-icon>\n Below\n </p>\n </div>\n\n <div class=\"col-4\">\n <p class=\"text-right\" style=\"display: flex\">\n Left\n <mat-icon\n class=\"filled\"\n color=\"info\"\n matTooltipPosition=\"left\"\n matTooltip=\"Here you can write some information on the left\"\n aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n >\n info\n </mat-icon>\n </p>\n </div>\n </div>\n</div>\n\n<h3>With Custom HTML</h3>\n<div class=\"demo-tooltip-container\">\n <div class=\"demo-tooltip\">\n <mat-icon\n OnemrvaMatTooltip\n class=\"filled\"\n position=\"right\"\n color=\"info\"\n [contentTemplate]=\"tooltipContent\"\n [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n [attr.data-cy-tooltipcontent]=\"'data-cy-tooltip-content'\"\n >\n info\n </mat-icon>\n <ng-template #tooltipContent>\n I am a custom content with html (position: <b>right</b>) but there are 3\n other positions\n <ul>\n <li>left</li>\n <li>top</li>\n <li>bottom</li>\n </ul>\n </ng-template>\n </div>\n\n <div class=\"demo-tooltip\">\n <mat-icon\n OnemrvaMatTooltip\n class=\"filled\"\n position=\"left\"\n color=\"info\"\n [contentTemplate]=\"tooltipContent2\"\n [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n [attr.data-cy-tooltipcontent2]=\"'data-cy-tooltip-content'\"\n >\n info\n </mat-icon>\n <ng-template #tooltipContent2>\n I am a custom content (position: <b>left</b>)\n </ng-template>\n </div>\n\n <div class=\"demo-tooltip\">\n <mat-icon\n OnemrvaMatTooltip\n class=\"filled\"\n position=\"above\"\n color=\"info\"\n [contentTemplate]=\"tooltipContent3\"\n [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n [attr.data-cy-tooltipcontent3]=\"'data-cy-tooltip-content'\"\n >\n info\n </mat-icon>\n <ng-template #tooltipContent3>\n <div style=\"color: pink\">\n I am a custom content with html (position: <b>top</b>)\n </div></ng-template\n >\n </div>\n\n <div class=\"demo-tooltip\">\n <mat-icon\n OnemrvaMatTooltip\n class=\"filled\"\n position=\"below\"\n color=\"info\"\n [contentTemplate]=\"tooltipContent4\"\n [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n [attr.data-cy-tooltipcontent4]=\"'data-cy-tooltip-content'\"\n >\n info\n </mat-icon>\n <ng-template #tooltipContent4>\n I am a custom content (position: <b>bottom</b>)\n </ng-template>\n </div>\n</div>\n","demo-tooltip.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { OnemrvaMatTooltipModule } from '@onemrvapublic/design-system~~/mat-tooltip~~';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-tooltip',\n templateUrl: './demo-tooltip.component.html',\n standalone: true,\n imports: [\n CommonModule,\n MatTooltipModule,\n OnemrvaMatTooltipModule,\n MatIconModule,\n ],\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTooltipComponent extends DemoComponentBase {}\n"}
1	+ {"demo-tooltip.component.html":"<div class=\"container\">\n <div class=\"row\">\n <div class=\"col-4\">\n <p style=\"display: flex\">\n <mat-icon\n class=\"filled\"\n color=\"info\"\n matTooltipPosition=\"right\"\n matTooltip=\"Here you can write some information on the right\"\n aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n >\n info\n </mat-icon>\n Right\n </p>\n </div>\n\n <div class=\"col-4\">\n <p style=\"display: flex\">\n <mat-icon\n class=\"filled\"\n color=\"info\"\n matTooltipPosition=\"above\"\n matTooltip=\"Here you can write some information above\"\n aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n >\n info\n </mat-icon>\n Above\n </p>\n <p class=\"text-center\" style=\"display: flex\">\n <mat-icon\n class=\"filled\"\n color=\"info\"\n matTooltipPosition=\"below\"\n matTooltip=\"Here you can write some information below\"\n aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n >\n info\n </mat-icon>\n Below\n </p>\n </div>\n\n <div class=\"col-4\">\n <p class=\"text-right\" style=\"display: flex\">\n Left\n <mat-icon\n class=\"filled\"\n color=\"info\"\n matTooltipPosition=\"left\"\n matTooltip=\"Here you can write some information on the left\"\n aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n >\n info\n </mat-icon>\n </p>\n </div>\n </div>\n</div>\n\n<h3>With Custom HTML</h3>\n<div class=\"demo-tooltip-container\">\n <div class=\"demo-tooltip\">\n <mat-icon\n OnemrvaMatTooltip\n class=\"filled\"\n position=\"right\"\n color=\"info\"\n [contentTemplate]=\"tooltipContent\"\n [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n [attr.data-cy-tooltipcontent]=\"'data-cy-tooltip-content'\"\n >\n info\n </mat-icon>\n <ng-template #tooltipContent>\n I am a custom content with html (position: <b>right</b>) but there are 3\n other positions\n <ul>\n <li>left</li>\n <li>top</li>\n <li>bottom</li>\n </ul>\n </ng-template>\n </div>\n\n <div class=\"demo-tooltip\">\n <mat-icon\n OnemrvaMatTooltip\n class=\"filled\"\n position=\"left\"\n color=\"info\"\n [contentTemplate]=\"tooltipContent2\"\n [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n [attr.data-cy-tooltipcontent2]=\"'data-cy-tooltip-content'\"\n >\n info\n </mat-icon>\n <ng-template #tooltipContent2>\n I am a custom content (position: <b>left</b>)\n </ng-template>\n </div>\n\n <div class=\"demo-tooltip\">\n <mat-icon\n OnemrvaMatTooltip\n class=\"filled\"\n position=\"above\"\n color=\"info\"\n [contentTemplate]=\"tooltipContent3\"\n [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n [attr.data-cy-tooltipcontent3]=\"'data-cy-tooltip-content'\"\n >\n info\n </mat-icon>\n <ng-template #tooltipContent3>\n <div style=\"color: pink\">\n I am a custom content with html (position: <b>top</b>)\n </div></ng-template\n >\n </div>\n\n <div class=\"demo-tooltip\">\n <mat-icon\n OnemrvaMatTooltip\n class=\"filled\"\n position=\"below\"\n color=\"info\"\n [contentTemplate]=\"tooltipContent4\"\n [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n [attr.data-cy-tooltipcontent4]=\"'data-cy-tooltip-content'\"\n >\n info\n </mat-icon>\n <ng-template #tooltipContent4>\n I am a custom content (position: <b>bottom</b>)\n </ng-template>\n </div>\n</div>\n","demo-tooltip.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { OnemrvaMatTooltipModule } from '@onemrvapublic/design-system';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-tooltip',\n templateUrl: './demo-tooltip.component.html',\n standalone: true,\n imports: [\n CommonModule,\n MatTooltipModule,\n OnemrvaMatTooltipModule,\n MatIconModule,\n ],\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTooltipComponent extends DemoComponentBase {}\n"}