;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ ModusCardExamplesComponent ]
12 | })
13 | .compileComponents();
14 |
15 | fixture = TestBed.createComponent(ModusCardExamplesComponent);
16 | component = fixture.componentInstance;
17 | fixture.detectChanges();
18 | });
19 |
20 | it('should create', () => {
21 | expect(component).toBeTruthy();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-card-examples/modus-card-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-card-examples',
5 | template: `
6 | Cards
7 |
8 |
9 |
Card title
10 |
Card subtitle
11 |
Some quick example text to build on the card title and make up the bulk of the card's content.
12 |
Go somewhere
13 |
Checkbox
7 |
8 |
9 |
10 |
11 |
12 |
13 | `,
14 | })
15 | export class ModusCheckboxExamplesComponent implements OnInit {
16 | constructor() {}
17 |
18 | ngOnInit(): void {}
19 | }
20 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-data-table-examples/modus-data-table-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-data-table-examples',
5 | template: `
6 | Data Table
7 |
8 |
9 |
10 | `,
11 | })
12 | export class ModusDataTableExamplesComponent implements OnInit {
13 | columns = ['Name', 'Age', 'Contacted'];
14 | data = [
15 | ['John', 25, false],
16 | ['Jane', 26, false],
17 | ['Joe', 27, true],
18 | ];
19 | constructor() {}
20 |
21 | ngOnInit(): void {}
22 | }
23 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-dropdown-examples/modus-dropdown-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-dropdown-examples',
5 | template: `
6 | Dropdown
7 |
8 | Dropdown
9 |
10 | Item 1
11 | Item 2
12 | Item 3
13 |
14 |
15 | `,
16 | })
17 | export class ModusDropdownExamplesComponent implements OnInit {
18 | constructor() {}
19 |
20 | ngOnInit(): void {}
21 | }
22 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-message-examples/modus-message-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-message-examples',
5 | template: `
6 | Messages
7 |
8 | Info message.
9 | Question message?
10 |
11 | `,
12 | })
13 | export class ModusMessageExamplesComponent implements OnInit {
14 | constructor() {}
15 |
16 | ngOnInit(): void {}
17 | }
18 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-navbar-examples/modus-navbar-examples.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/angular-workspace/test-ng15/src/examples/modus-navbar-examples/modus-navbar-examples.component.scss
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-number-examples/modus-number-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-number-examples',
5 | templateUrl: './modus-number-examples.component.html',
6 | })
7 | export class ModusNumberExamplesComponent implements OnInit {
8 | constructor() {}
9 |
10 | ngOnInit(): void {}
11 | }
12 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-pagination-examples/modus-pagination-examples.component.html:
--------------------------------------------------------------------------------
1 |
2 | Pagination
3 |
4 |
9 |
14 |
19 |
20 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-pagination-examples/modus-pagination-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-pagination-examples',
5 | templateUrl: './modus-pagination-examples.component.html',
6 | })
7 | export class ModusPaginationExamplesComponent implements OnInit {
8 | constructor() {}
9 |
10 | ngOnInit(): void {}
11 | }
12 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-progress-bar-examples/modus-progress-bar-examples.component.html:
--------------------------------------------------------------------------------
1 | Progress Bar
2 |
3 |
8 |
13 |
18 |
19 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-progress-bar-examples/modus-progress-bar-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-progress-bar-examples',
5 | templateUrl: './modus-progress-bar-examples.component.html',
6 | })
7 | export class ModusProgressBarExamplesComponent implements OnInit {
8 | constructor() {}
9 |
10 | ngOnInit(): void {}
11 | }
12 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-radio-group-examples/modus-radio-group-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-radio-group-examples',
5 | template: `
6 | Radio group
7 |
8 | `,
9 | })
10 | export class ModusRadioGroupExamplesComponent implements OnInit {
11 | radioButtons = [
12 | {
13 | id: '0',
14 | label: 'Radio 1',
15 | },
16 | {
17 | id: '1',
18 | checked: true,
19 | label: 'Radio 2',
20 | },
21 | {
22 | id: '2',
23 | label: 'Radio 3',
24 | },
25 | ];
26 | constructor() {}
27 |
28 | ngOnInit(): void {}
29 | }
30 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-select-examples/modus-select-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-select-examples',
5 | templateUrl: './modus-select-examples.component.html',
6 | })
7 | export class ModusSelectExamplesComponent implements OnInit {
8 | options = [{ display: 'Option 1' }, { display: 'Option 2' }, { display: 'Option 3' }];
9 | handleChange = (event: any) => {
10 | const selectedValue = event.detail;
11 | event.target.value = selectedValue;
12 | };
13 |
14 | selectedValue = { display: 'Option 1' };
15 |
16 | constructor() {}
17 |
18 | ngOnInit(): void {}
19 | }
20 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-side-navigation-examples/modus-side-navigation-examples.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/angular-workspace/test-ng15/src/examples/modus-side-navigation-examples/modus-side-navigation-examples.component.scss
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-slider-examples/modus-slider-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-slider-examples',
5 | template: `
6 | Slider
7 |
8 |
9 |
10 |
11 | `,
12 | })
13 | export class ModusSliderExamplesComponent implements OnInit {
14 | constructor() {}
15 |
16 | ngOnInit(): void {}
17 | }
18 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-switch-examples/modus-switch-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-switch-examples',
5 | template: `
6 | Switch
7 |
8 |
9 |
10 |
11 |
12 | `,
13 | })
14 | export class ModusSwitchExamplesComponent implements OnInit {
15 | constructor() {}
16 |
17 | ngOnInit(): void {}
18 | }
19 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-tabs-examples/modus-tabs-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-tabs-examples',
5 | template: ` Tabs
6 |
7 |
8 |
9 |
`,
10 | })
11 | export class ModusTabsExamplesComponent implements OnInit {
12 | tabs = [
13 | {
14 | id: 0,
15 | label: 'Tab 1',
16 | },
17 | {
18 | active: true,
19 | id: 1,
20 | label: 'Tab 2',
21 | },
22 | ];
23 | constructor() {}
24 |
25 | ngOnInit(): void {}
26 | }
27 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-text-input-examples/modus-text-input-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-text-input-examples',
5 | templateUrl: './modus-text-input-examples.component.html',
6 | })
7 | export class ModusTextInputExamplesComponent implements OnInit {
8 | constructor() {}
9 |
10 | ngOnInit(): void {}
11 | }
12 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-time-picker-examples/modus-time-picker-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-time-picker-examples',
5 | templateUrl: './modus-time-picker-examples.component.html',
6 | })
7 | export class ModusTimePickerExamplesComponent implements OnInit {
8 | options = [
9 | { display: 'Alpha Time Zone' },
10 | { display: 'Australian Central Daylight Time' },
11 | { display: 'Atlantic Daylight Time' },
12 | ];
13 |
14 | constructor() {}
15 |
16 | ngOnInit(): void {}
17 | }
18 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-tooltip-examples/modus-tooltip-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-tooltip-examples',
5 | template: `
6 | Tooltip
7 |
8 | Button
9 |
10 | `,
11 | })
12 | export class ModusTooltipExamplesComponent implements OnInit {
13 | constructor() {}
14 |
15 | ngOnInit(): void {}
16 | }
17 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ModusAngularTest0140Ng14
6 |
7 |
8 |
9 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 | import { defineCustomElements } from '@trimble-oss/modus-web-components/loader';
7 |
8 | if (environment.production) {
9 | enableProdMode();
10 | }
11 |
12 | platformBrowserDynamic()
13 | .bootstrapModule(AppModule)
14 | .catch((err) => console.error(err));
15 |
16 | defineCustomElements();
17 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "./out-tsc/app",
5 | "types": []
6 | },
7 | "files": ["src/main.ts", "src/polyfills.ts"],
8 | "include": ["src/**/*.d.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "./out-tsc/spec",
5 | "types": ["jasmine"]
6 | },
7 | "files": ["src/test.ts", "src/polyfills.ts"],
8 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/angular-workspace/test-web-components/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/angular-workspace/test-web-components/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../node_modules/@trimble-oss/modus-web-components/dist/modus-web-components/modus-web-components.css';
2 |
3 | .grid {
4 | display: grid;
5 | grid-template-columns: auto;
6 | grid-gap: 10px;
7 | padding: 10px;
8 | }
9 |
10 | .grid-row {
11 | display: grid;
12 | grid-auto-flow: column;
13 | width: fit-content;
14 | grid-column-gap: 10px;
15 | }
16 |
17 | .w-50 {
18 | width: 50%;
19 | }
20 |
21 | h3 {
22 | color: white;
23 | width: 100%;
24 | background: #0e416c;
25 | padding: 10px;
26 | }
27 |
28 | .theme-toggle-switch {
29 | width: 60%;
30 | display: flex;
31 | justify-content: right;
32 | position: sticky;
33 | top: 10px;
34 | }
35 |
--------------------------------------------------------------------------------
/angular-workspace/test-web-components/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.scss'],
7 | })
8 | export class AppComponent {
9 | title = 'modus-angular-test-0.1.40-ng15';
10 | }
11 |
--------------------------------------------------------------------------------
/angular-workspace/test-web-components/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { AppComponent } from './app.component';
5 | @NgModule({
6 | declarations: [AppComponent],
7 | imports: [BrowserModule],
8 | providers: [],
9 | bootstrap: [AppComponent],
10 | })
11 | export class AppModule {}
12 |
--------------------------------------------------------------------------------
/angular-workspace/test-web-components/src/assets/test.css:
--------------------------------------------------------------------------------
1 | h3 {
2 | color: white;
3 | width: 100%;
4 | background: #0e416c;
5 | padding: 10px;
6 | }
7 |
8 | .theme-toggle-switch {
9 | width: 60%;
10 | display: flex;
11 | justify-content: right;
12 | position: sticky;
13 | top: 10px;
14 | }
15 |
16 | .flex-column{
17 | display: flex;
18 | flex-direction:column;
19 | gap:20px;
20 | }
21 |
22 | .flex-row{
23 | display: flex;
24 | flex-direction:row;
25 | gap:5px;
26 | }
27 |
--------------------------------------------------------------------------------
/angular-workspace/test-web-components/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/angular-workspace/test-web-components/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/angular-workspace/test-web-components/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ModusAngularTest0140Ng14
6 |
7 |
8 |
9 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/angular-workspace/test-web-components/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 | import { defineCustomElements } from '@trimble-oss/modus-web-components/loader';
7 |
8 | if (environment.production) {
9 | enableProdMode();
10 | }
11 |
12 | platformBrowserDynamic()
13 | .bootstrapModule(AppModule)
14 | .catch((err) => console.error(err));
15 |
16 | defineCustomElements();
17 |
--------------------------------------------------------------------------------
/angular-workspace/test-web-components/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/angular-workspace/test-web-components/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "./out-tsc/app",
5 | "types": []
6 | },
7 | "files": ["src/main.ts", "src/polyfills.ts"],
8 | "include": ["src/**/*.d.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/angular-workspace/test-web-components/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "./out-tsc/spec",
5 | "types": ["jasmine"]
6 | },
7 | "files": ["src/test.ts", "src/polyfills.ts"],
8 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/react-workspace/react-17/.npmrc:
--------------------------------------------------------------------------------
1 | lockfile-version = "3"
2 | registry = https://registry.npmjs.org/
3 |
--------------------------------------------------------------------------------
/react-workspace/react-17/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './stencil-generated';
2 |
--------------------------------------------------------------------------------
/react-workspace/react-17/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components/stencil-generated';
2 |
--------------------------------------------------------------------------------
/react-workspace/react-18/.npmrc:
--------------------------------------------------------------------------------
1 | lockfile-version = "3"
2 | registry = https://registry.npmjs.org/
3 |
--------------------------------------------------------------------------------
/react-workspace/react-18/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './stencil-generated';
2 |
--------------------------------------------------------------------------------
/react-workspace/react-18/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './components/stencil-generated';
2 |
--------------------------------------------------------------------------------
/react-workspace/react-19/.npmrc:
--------------------------------------------------------------------------------
1 | lockfile-version = "3"
2 | registry = https://registry.npmjs.org/
3 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "start_url": ".",
5 | "display": "standalone",
6 | "theme_color": "#000000",
7 | "background_color": "#ffffff"
8 | }
9 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusAccordionExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusAccordion, ModusAccordionItem } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusAccordionExamples() {
4 | return (
5 | <>
6 | Accordion
7 |
8 | Content
9 | Content
10 |
11 | Content
12 |
13 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusAlertExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusAlert } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusAlertExamples() {
4 | return (
5 | <>
6 | Alert
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusBreadcrumbExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusBreadcrumb } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusBreadcrumbExamples() {
4 | return (
5 | <>
6 | Breadcrumbs
7 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusCardExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusButton, ModusCard } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusCardExamples() {
4 | return (
5 | <>
6 | Card
7 |
8 |
9 |
Card title
10 |
Card subtitle
11 |
Some quick example text to build on the card title and make up the bulk of the card's content.
12 |
Go somewhere
13 |
Checkbox
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusDataTableExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusDataTable } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusDataTableExamples() {
4 | return (
5 | <>
6 | Data Table
7 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusDropdownExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusButton, ModusDropdown, ModusList, ModusListItem } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusDropdownExamples() {
4 | return (
5 | <>
6 | Dropdown
7 |
8 |
9 | Dropdown
10 |
11 |
12 | Item 1
13 | Item 2
14 | Item 3
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusFileDropZoneExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusFileDropzone } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusFileDropzoneExamples() {
4 | return (
5 | <>
6 | File upload dropzone
7 | {
15 | const [files] = event.detail;
16 | alert(`Files Upload: ${files.map((f) => f.name).toString()}`);
17 | }}>
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusListExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusList, ModusListItem } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusListExamples() {
4 | return (
5 | <>
6 | List
7 |
8 | Condensed
9 |
10 | Condensed & Selected
11 |
12 | Default
13 | Selected
14 | Disabled
15 | Large
16 |
17 | Large & Selected
18 |
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusMessageExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusMessage } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusMessageExamples() {
4 | return (
5 | <>
6 | Message
7 | Info message.
8 | Question message?
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusPaginationExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusPagination } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusPaginationExamples() {
4 | return (
5 | <>
6 | Pagination
7 |
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusProgressBarExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusProgressBar } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusProgressBarExamples() {
4 | return (
5 | <>
6 | Progress Bar
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusRadioGroupExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusRadioGroup } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusRadioGroupExamples() {
4 | return (
5 | <>
6 | Radio group
7 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusSliderExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusSlider } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusSliderExamples() {
4 | return (
5 | <>
6 | Slider
7 |
8 |
9 |
Spinner
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusSpinnerExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusButton, ModusSpinner } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusSpinnerExamples() {
4 | return (
5 | <>
6 | Spinner
7 |
8 |
9 |
10 |
11 | Loading...
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusSwitchExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusSwitch } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusSwitchExamples() {
4 | return (
5 | <>
6 | Switch
7 |
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusTabExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusTabs } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusTabExamples() {
4 | return (
5 | <>
6 | Tabs
7 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusToastExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusToast } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusToastExamples() {
4 | return (
5 | <>
6 | Toasts
7 |
8 | Default
9 | Danger
10 | Dark
11 | Primary
12 | Secondary
13 | Success
14 | Warning
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusTooltipExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusButton, ModusTooltip } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusToolTipExamples() {
4 | return (
5 | <>
6 | Tooltips
7 |
8 | Button
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import '@trimble-oss/modus-web-components/dist/modus-web-components/modus-web-components.css';
5 |
6 | ReactDOM.render(
7 |
8 |
9 | ,
10 | document.getElementById('root')
11 | );
12 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src"]
20 | }
21 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/.npmrc:
--------------------------------------------------------------------------------
1 | lockfile-version = "2"
2 | registry = 'https://registry.npmjs.org/'
3 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusAccordionExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusAccordion, ModusAccordionItem } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusAccordionExamples() {
4 | return (
5 | <>
6 | Accordion
7 |
8 | Content
9 | Content
10 |
11 | Content
12 |
13 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusAlertExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusAlert } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusAlertExamples() {
4 | return (
5 | <>
6 | Alert
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusBreadcrumbExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusBreadcrumb } from '@trimble-oss/modus-react-components';
2 | import { Crumb } from '@trimble-oss/modus-web-components';
3 |
4 | export default function ModusBreadcrumbExamples() {
5 | const crumbs: Crumb[] = [
6 | { id: '1', display: 'Crumb 1' },
7 | { id: '2', display: 'Crumb 2' },
8 | { id: '3', display: 'Crumb 3' },
9 | { id: '4', display: 'Crumb 4' },
10 | ];
11 |
12 | return (
13 | <>
14 | Breadcrumbs
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusCardExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusButton, ModusCard } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusCardExamples() {
4 | return (
5 | <>
6 | Card
7 |
8 |
9 |
Card title
10 |
Card subtitle
11 |
Some quick example text to build on the card title and make up the bulk of the card's content.
12 |
Go somewhere
13 |
Checkbox
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusDataTableExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusDataTable } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusDataTableExamples() {
4 | return (
5 | <>
6 | Data Table
7 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusDropdownExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusButton, ModusDropdown, ModusList, ModusListItem } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusDropdownExamples() {
4 | return (
5 | <>
6 | Dropdown
7 |
8 |
9 | Dropdown
10 |
11 |
12 | Item 1
13 | Item 2
14 | Item 3
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusFileDropZoneExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusFileDropzone } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusFileDropzoneExamples() {
4 | return (
5 | <>
6 | File upload dropzone
7 | {
15 | const [files] = event.detail;
16 | alert(`Files Upload: ${files.map((f) => f.name).toString()}`);
17 | }}>
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusListExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusList, ModusListItem } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusListExamples() {
4 | return (
5 | <>
6 | List
7 |
8 | Condensed
9 |
10 | Condensed & Selected
11 |
12 | Default
13 | Selected
14 | Disabled
15 | Large
16 |
17 | Large & Selected
18 |
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusMessageExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusMessage } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusMessageExamples() {
4 | return (
5 | <>
6 | Message
7 | Info message.
8 | Question message?
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusPaginationExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusPagination } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusPaginationExamples() {
4 | return (
5 | <>
6 | Pagination
7 |
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusProgressBarExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusProgressBar } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusProgressBarExamples() {
4 | return (
5 | <>
6 | Progress Bar
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusRadioGroupExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusRadioGroup } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusRadioGroupExamples() {
4 | return (
5 | <>
6 | Radio group
7 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusSliderExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusSlider } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusSliderExamples() {
4 | return (
5 | <>
6 | Slider
7 |
8 |
9 |
Spinner
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusSpinnerExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusButton, ModusSpinner } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusSpinnerExamples() {
4 | return (
5 | <>
6 | Spinner
7 |
8 |
9 |
10 |
11 | Loading...
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusSwitchExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusSwitch } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusSwitchExamples() {
4 | return (
5 | <>
6 | Switch
7 |
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusTabExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusTabs } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusTabExamples() {
4 | return (
5 | <>
6 | Tabs
7 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusToastExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusToast } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusToastExamples() {
4 | return (
5 | <>
6 | Toasts
7 |
8 | Default
9 | Danger
10 | Dark
11 | Primary
12 | Secondary
13 | Success
14 | Warning
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusTooltipExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusButton, ModusTooltip } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusToolTipExamples() {
4 | return (
5 | <>
6 | Tooltips
7 |
8 | Button
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import '@trimble-oss/modus-web-components/dist/modus-web-components/modus-web-components.css';
5 |
6 | ReactDOM.render(
7 |
8 |
9 | ,
10 | document.getElementById('root')
11 | );
12 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/.npmrc:
--------------------------------------------------------------------------------
1 | lockfile-version = "3"
2 | registry = 'https://registry.npmjs.org/'
3 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/react-workspace/test-react-v19/public/favicon.ico
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/react-workspace/test-react-v19/public/logo192.png
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/react-workspace/test-react-v19/public/logo512.png
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/App.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, screen } from '@testing-library/react';
3 | import App from './App';
4 |
5 | test('renders learn react link', () => {
6 | render();
7 | const linkElement = screen.getByText(/learn react/i);
8 | expect(linkElement).toBeInTheDocument();
9 | });
10 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusAccordionExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusAccordion, ModusAccordionItem } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusAccordionExamples() {
4 | return (
5 | <>
6 | Accordion
7 |
8 | Content
9 | Content
10 |
11 | Content
12 |
13 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusAlertExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusAlert } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusAlertExamples() {
4 | return (
5 | <>
6 | Alert
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusBreadcrumbExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusBreadcrumb } from '@trimble-oss/modus-react-components';
2 | import { Crumb } from '@trimble-oss/modus-web-components';
3 |
4 | export default function ModusBreadcrumbExamples() {
5 | const crumbs: Crumb[] = [
6 | { id: '1', display: 'Crumb 1' },
7 | { id: '2', display: 'Crumb 2' },
8 | { id: '3', display: 'Crumb 3' },
9 | { id: '4', display: 'Crumb 4' },
10 | ];
11 |
12 | return (
13 | <>
14 | Breadcrumbs
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusCardExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusButton, ModusCard } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusCardExamples() {
4 | return (
5 | <>
6 | Card
7 |
8 |
9 |
Card title
10 |
Card subtitle
11 |
Some quick example text to build on the card title and make up the bulk of the card's content.
12 |
Go somewhere
13 |
Checkbox
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusDataTableExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusDataTable } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusDataTableExamples() {
4 | return (
5 | <>
6 | Data Table
7 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusDropdownExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusButton, ModusDropdown, ModusList, ModusListItem } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusDropdownExamples() {
4 | return (
5 | <>
6 | Dropdown
7 |
8 |
9 | Dropdown
10 |
11 |
12 | Item 1
13 | Item 2
14 | Item 3
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusFileDropZoneExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusFileDropzone } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusFileDropzoneExamples() {
4 | return (
5 | <>
6 | File upload dropzone
7 | {
15 | const [files] = event.detail;
16 | alert(`Files Upload: ${files.map((f) => f.name).toString()}`);
17 | }}>
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusListExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusList, ModusListItem } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusListExamples() {
4 | return (
5 | <>
6 | List
7 |
8 | Condensed
9 |
10 | Condensed & Selected
11 |
12 | Default
13 | Selected
14 | Disabled
15 | Large
16 |
17 | Large & Selected
18 |
19 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusMessageExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusMessage } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusMessageExamples() {
4 | return (
5 | <>
6 | Message
7 | Info message.
8 | Question message?
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusPaginationExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusPagination } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusPaginationExamples() {
4 | return (
5 | <>
6 | Pagination
7 |
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusProgressBarExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusProgressBar } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusProgressBarExamples() {
4 | return (
5 | <>
6 | Progress Bar
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusRadioGroupExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusRadioGroup } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusRadioGroupExamples() {
4 | return (
5 | <>
6 | Radio group
7 |
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusSliderExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusSlider } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusSliderExamples() {
4 | return (
5 | <>
6 | Slider
7 |
8 |
9 |
Spinner
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusSpinnerExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusButton, ModusSpinner } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusSpinnerExamples() {
4 | return (
5 | <>
6 | Spinner
7 |
8 |
9 |
10 |
11 | Loading...
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusSwitchExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusSwitch } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusSwitchExamples() {
4 | return (
5 | <>
6 | Switch
7 |
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusTabExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusTabs } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusTabExamples() {
4 | return (
5 | <>
6 | Tabs
7 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusToastExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusToast } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusToastExamples() {
4 | return (
5 | <>
6 | Toasts
7 |
8 | Default
9 | Danger
10 | Dark
11 | Primary
12 | Secondary
13 | Success
14 | Warning
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusTooltipExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusButton, ModusTooltip } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusToolTipExamples() {
4 | return (
5 | <>
6 | Tooltips
7 |
8 | Button
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family:
4 | -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
5 | 'Helvetica Neue', sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
12 | }
13 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 | import '@trimble-oss/modus-web-components/dist/modus-web-components/modus-web-components.css';
7 | const root = ReactDOM.createRoot(
8 | document.getElementById('root') as HTMLElement
9 | );
10 | root.render(
11 |
12 |
13 |
14 | );
15 |
16 | // If you want to start measuring performance in your app, pass a function
17 | // to log results (for example: reportWebVitals(console.log))
18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
19 | reportWebVitals();
20 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
1 | import { ReportHandler } from 'web-vitals';
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
9 | getLCP(onPerfEntry);
10 | getTTFB(onPerfEntry);
11 | });
12 | }
13 | };
14 |
15 | export default reportWebVitals;
16 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src"]
20 | }
21 |
--------------------------------------------------------------------------------
/react-workspace/test-web-components/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/react-workspace/test-web-components/.npmrc:
--------------------------------------------------------------------------------
1 | lockfile-version = "2"
2 | registry = 'https://registry.npmjs.org/'
3 |
--------------------------------------------------------------------------------
/react-workspace/test-web-components/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/react-workspace/test-web-components/src/App.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, screen } from '@testing-library/react';
3 | import App from './App';
4 |
5 | test('renders learn react link', () => {
6 | render();
7 | const linkElement = screen.getByText(/learn react/i);
8 | expect(linkElement).toBeInTheDocument();
9 | });
10 |
--------------------------------------------------------------------------------
/react-workspace/test-web-components/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/react-workspace/test-web-components/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 | import { defineCustomElements } from '@trimble-oss/modus-web-components/loader';
7 |
8 | defineCustomElements();
9 |
10 | const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
11 | root.render(
12 |
13 |
14 |
15 | );
16 |
17 | // If you want to start measuring performance in your app, pass a function
18 | // to log results (for example: reportWebVitals(console.log))
19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
20 | reportWebVitals();
21 |
--------------------------------------------------------------------------------
/react-workspace/test-web-components/src/intrinsic.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace JSX {
2 | interface IntrinsicElements {
3 | 'modus-table': unknown;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/react-workspace/test-web-components/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/react-workspace/test-web-components/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
1 | import { ReportHandler } from 'web-vitals';
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
9 | getLCP(onPerfEntry);
10 | getTTFB(onPerfEntry);
11 | });
12 | }
13 | };
14 |
15 | export default reportWebVitals;
16 |
--------------------------------------------------------------------------------
/react-workspace/test-web-components/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/react-workspace/test-web-components/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx"
22 | },
23 | "include": [
24 | "src"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/sonar-project.properties:
--------------------------------------------------------------------------------
1 | sonar.projectKey = Modus.trimble:ModusWebComponents1
2 | sonar.projectName = Modus - Trimble - Modus Web Components v1
3 | sonar.exclusions = stencil-workspace/node_modules/**, stencil-workspace/storybook/node_modules/**
4 | sonar.sourceEncoding = UTF-8
5 |
--------------------------------------------------------------------------------
/stencil-workspace/.eslintignore:
--------------------------------------------------------------------------------
1 | **/*.scss
2 | **/*.css
3 | **/*.spec.ts
4 | **/*.e2e.ts
5 | **/*.html
6 | **/readme.md
7 | **/ABOUT_FOLDER.md
8 |
--------------------------------------------------------------------------------
/stencil-workspace/.eslintrc.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-undef
2 | module.exports = {
3 | root: true,
4 | env: {
5 | es2021: true,
6 | },
7 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:storybook/recommended'],
8 | parser: '@typescript-eslint/parser',
9 | parserOptions: {
10 | ecmaVersion: 12,
11 | sourceType: 'module',
12 | },
13 | plugins: ['@typescript-eslint'],
14 | rules: {
15 | '@typescript-eslint/ban-ts-comment': ['error', { 'ts-ignore': 'allow-with-description' }],
16 | 'jsx-quotes': ['error', 'prefer-double'],
17 | 'no-console': 1,
18 | },
19 | };
20 |
--------------------------------------------------------------------------------
/stencil-workspace/.nvmrc:
--------------------------------------------------------------------------------
1 | 20
2 |
--------------------------------------------------------------------------------
/stencil-workspace/.stylelintignore:
--------------------------------------------------------------------------------
1 | *.md
2 | *.tsx
3 |
4 | modus-colors.scss
5 | modus-light-theme.scss
6 | modus-variables.scss
7 |
--------------------------------------------------------------------------------
/stencil-workspace/generate-icons/ModusIconUtilities.template.ejs:
--------------------------------------------------------------------------------
1 | /**********************************************************************
2 | THIS IS AN AUTOMATICALLY GENERATED FILE, DO NOT EDIT DIRECTLY.
3 | ***********************************************************************/
4 |
5 | export const MODUS_ICON_NAMES = [
6 | <%_ iconNames.forEach(iconName => { _%>
7 | <%- iconName %>,
8 | <%_ }); _%>
9 | ];
10 |
11 | export type ModusIconName =
12 | <%_ for(let i = 0; i < iconNames.length; i++) { _%>
13 | <%- iconNames[i] %><%- i < iconNames.length - 1 ? ' | ' : '' %>
14 | <%_ } _%>;
15 |
--------------------------------------------------------------------------------
/stencil-workspace/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 | command = "npm run full"
3 | functions = "netlify/functions"
4 | publish = "storybook/dist/"
5 |
6 | [[headers]]
7 | for = "/*"
8 | [headers.values]
9 | Content-Security-Policy = "upgrade-insecure-requests"
10 | Permissions-Policy = "microphone=()"
11 | Referrer-Policy = "no-referrer-when-downgrade"
12 | X-Content-Type-Options = "nosniff"
13 | X-Frame-Options = "SAMEORIGIN"
14 | X-XSS-Protection = "1; mode=block"
15 |
16 | [[plugins]]
17 | package = "@netlify/plugin-lighthouse"
18 |
19 | # optional, fails build when a category is below a threshold
20 | [plugins.inputs.thresholds]
21 | accessibility = 0.7
22 | best-practices = 0.8
23 | performance = 0.2
24 | seo = 0.9
25 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-accordion/modus-accordion.scss:
--------------------------------------------------------------------------------
1 | .accordion {
2 | border-radius: 4px;
3 | box-shadow: 0 0 2px rgba(37, 42, 46, 0.3);
4 | font-family: $primary-font;
5 | position: relative;
6 | }
7 |
8 | @media (forced-colors: active) {
9 | .accordion {
10 | border: 1px solid transparent;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-accordion/modus-accordion.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
2 | import { Component, h, Prop } from '@stencil/core';
3 |
4 | @Component({
5 | tag: 'modus-accordion',
6 | styleUrl: 'modus-accordion.scss',
7 | shadow: true,
8 | })
9 | export class ModusAccordion {
10 | /** (optional) The accordion's aria-label. */
11 | @Prop() ariaLabel: string | null;
12 |
13 | render(): unknown {
14 | return (
15 |
16 |
17 |
18 | );
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-accordion/readme.md:
--------------------------------------------------------------------------------
1 | # modus-accordion
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ----------- | ------------ | -------------------------------------- | -------- | ----------- |
12 | | `ariaLabel` | `aria-label` | (optional) The accordion's aria-label. | `string` | `undefined` |
13 |
14 |
15 | ----------------------------------------------
16 |
17 |
18 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-action-bar/modus-action-bar.scss:
--------------------------------------------------------------------------------
1 | .modus-action-bar {
2 | align-items: center;
3 | display: flex;
4 | gap: 0;
5 |
6 | .overflow-menu {
7 | display: none;
8 | position: absolute;
9 | z-index: 1;
10 |
11 | &.show {
12 | display: block;
13 | }
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-breadcrumb/modus-breadcrumb.spec.ts:
--------------------------------------------------------------------------------
1 | import { newSpecPage } from '@stencil/core/testing';
2 | import { ModusBreadcrumb } from './modus-breadcrumb';
3 |
4 | describe('modus-breadcrumb', () => {
5 | it('renders', async () => {
6 | const { root } = await newSpecPage({
7 | components: [ModusBreadcrumb],
8 | html: '',
9 | });
10 | expect(root).toEqualHtml(`
11 |
12 |
13 |
16 |
17 |
18 | `);
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-breadcrumb/modus-breadcrumb.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-breadcrumb-item-color: var(--modus-link-color, #217cbb) !default;
2 | $modus-breadcrumb-item-active-color: var(--modus-breadcrumb-item-active-color, #6c757d) !default;
3 | $modus-breadcrumb-divider-color: var(--modus-breadcrumb-divider-color, #6c757d) !default;
4 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-button-group/modus-button-group.constants.ts:
--------------------------------------------------------------------------------
1 | export const SINGLE_SELECTION_TYPE = 'single';
2 | export const MULTIPLE_SELECTION_TYPE = 'multiple';
3 | export const DEFAULT_SELECTION_TYPE = 'none';
4 | export const SELECTION_ATTRIBUTE = 'selected';
5 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-button-group/modus-button-group.models.tsx:
--------------------------------------------------------------------------------
1 | import { SINGLE_SELECTION_TYPE, MULTIPLE_SELECTION_TYPE, DEFAULT_SELECTION_TYPE } from './modus-button-group.constants';
2 |
3 | export type ButtonGroupSelectionType =
4 | | typeof SINGLE_SELECTION_TYPE
5 | | typeof MULTIPLE_SELECTION_TYPE
6 | | typeof DEFAULT_SELECTION_TYPE;
7 |
8 | export interface ModusButtonGroupButtonClickEvent {
9 | button: HTMLModusButtonElement;
10 | isSelected: boolean;
11 | }
12 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-button-group/modus-button-group.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: flex;
3 |
4 | slot::slotted(modus-button) {
5 | display: block;
6 | margin: 0;
7 |
8 | --btn-border-radius: 0;
9 | --btn-border-left-width: #{$rem-1px};
10 | --btn-border-right-width: 0;
11 | }
12 |
13 | slot::slotted(modus-button:first-child) {
14 | --btn-border-radius: #{$rem-4px} 0 0 #{$rem-4px};
15 | }
16 |
17 | slot::slotted(modus-button:last-child) {
18 | --btn-border-radius: 0 #{$rem-4px} #{$rem-4px} 0;
19 | --btn-border-right-width: #{$rem-1px};
20 | }
21 |
22 | slot::slotted(modus-button:only-child) {
23 | --btn-border-radius: #{$rem-4px};
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-button/modus-button.models.ts:
--------------------------------------------------------------------------------
1 | export type ButtonStyle = 'borderless' | 'fill' | 'outline';
2 | export type ButtonColor = 'danger' | 'primary' | 'secondary' | 'tertiary' | 'special';
3 | export type ButtonSize = 'small' | 'medium' | 'large';
4 | export type ButtonType = 'button' | 'reset' | 'submit' | 'toggle';
5 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-card/modus-card.scss:
--------------------------------------------------------------------------------
1 | @import './modus-card.vars';
2 |
3 | article {
4 | background-color: $modus-card-bg;
5 | border: $rem-1px solid;
6 | border-color: transparent;
7 | border-radius: $rem-4px;
8 | color: $modus-card-color;
9 | font-family: $primary-font;
10 | overflow: hidden;
11 | position: relative;
12 |
13 | &.shadow:hover {
14 | box-shadow: 0 0 4px $modus-card-shadow-color;
15 | }
16 |
17 | &.card-border {
18 | border-color: $modus-card-border-color;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-card/modus-card.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-card-bg: var(--modus-card-bg, #fff) !default;
2 | $modus-card-color: var(--modus-card-color, #252a2e) !default;
3 | $modus-card-border-color: var(--modus-card-border-color, #e0e1e9) !default;
4 | $modus-card-shadow-color: var(--modus-card-shadow-color, #3635454d) !default;
5 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-content-tree/modus-content-tree.constants.tsx:
--------------------------------------------------------------------------------
1 | export const TREE_ITEM_SIZE_CLASS: Map = new Map([
2 | ['condensed', 'small'],
3 | ['standard', 'standard'],
4 | ['large', 'large'],
5 | ]);
6 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-data-table/parts/modus-data-table-cell-badge-part.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { ModusDataTableCellBadge } from '../modus-data-table.models';
4 |
5 | interface Props {
6 | badge: ModusDataTableCellBadge;
7 | }
8 |
9 | export const ModusDataTableCellBadgePart: FunctionalComponent = (props: Props) => {
10 | return (
11 |
12 |
13 | {props.badge.text}
14 |
15 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-data-table/parts/modus-data-table-cell-link-part.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { ModusDataTableCellLink } from '../modus-data-table.models';
4 |
5 | interface ModusDataTableCellLinkProps {
6 | link: ModusDataTableCellLink;
7 | onLinkClick: (link: ModusDataTableCellLink) => void;
8 | }
9 |
10 | export const ModusDataTableCellLinkPart: FunctionalComponent = (
11 | props: ModusDataTableCellLinkProps
12 | ) => {
13 | return (
14 | props.onLinkClick(props.link)}>
15 | {props.link.display}
16 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-date-input/utils/modus-date-input.models.tsx:
--------------------------------------------------------------------------------
1 | export type ModusDateInputType = 'start' | 'end' | 'single';
2 |
3 | export interface ModusDateInputEventDetails {
4 | value: string;
5 | type: ModusDateInputType;
6 | inputString: string;
7 | }
8 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-dropdown/modus-dropdown.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-dropdown-list-border-color: var(--modus-dropdown-list-border-color, #6a6e79) !default;
2 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-list-item/modus-list-item.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-list-item-bg: var(--modus-list-item-bg, #fff) !default;
2 | $modus-list-item-border-color: var(--modus-list-item-border-color, #e0e1e9) !default;
3 | $modus-list-item-color: var(--modus-list-item-color, #252a2e) !default;
4 |
5 | // Hover
6 | $modus-list-item-hover-bg: var(--modus-list-item-hover-bg, #e0e1e9) !default;
7 |
8 | // Selected
9 | $modus-list-item-selected-bg: var(--modus-list-item-selected-bg, #dcedf9) !default;
10 | $modus-list-item-selected-border-color: var(--modus-list-item-selected-border-color, #dcedf9) !default;
11 |
12 | // Disabled
13 | $modus-list-item-disabled-color: var(--modus-list-item-disabled-color, #b7b9c3) !default;
14 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-list/modus-list.scss:
--------------------------------------------------------------------------------
1 | @import './modus-list.vars';
2 |
3 | ul {
4 | background-color: $modus-list-bg;
5 | border-radius: $rem-4px;
6 | display: flex;
7 | flex-direction: column;
8 | font-family: $primary-font;
9 | list-style: none;
10 | margin: 0;
11 | padding: 0;
12 | position: relative;
13 | }
14 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-list/modus-list.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-list-bg: var(--modus-list-bg, #fff) !default;
2 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-message/modus-message.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-message-info-bg: var(--modus-message-info-bg, #dcedf9) !default;
2 | $modus-message-info-color: var(--modus-message-info-color, #0063a3) !default;
3 | $modus-message-question-bg: var(--modus-message-question-bg, #f1f1f6) !default;
4 | $modus-message-question-color: var(--modus-message-question-color, #6a6e79) !default;
5 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-message/readme.md:
--------------------------------------------------------------------------------
1 | # modus-message
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | ----------- | ------------ | ------------------------------------ | ---------------------- | ----------- |
12 | | `ariaLabel` | `aria-label` | (optional) The message's aria-label. | `string` | `undefined` |
13 | | `icon` | `icon` | (optional) The message's icon. | `string` | `undefined` |
14 | | `type` | `type` | (optional) The message's type. | `"info" \| "question"` | `'info'` |
15 |
16 |
17 | ----------------------------------------------
18 |
19 |
20 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-modal/modus-modal.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-modal-backdrop-bg: var(--modus-modal-backdrop-bg, #252a2ebf) !default;
2 | $modus-modal-bg: var(--modus-modal-bg, #fff) !default;
3 | $modus-modal-border-color: var(--modus-modal-border-color, rgba(0, 0, 0, 0.2)) !default;
4 | $modus-modal-color: var(--modus-modal-color, #252a2e) !default;
5 | $modus-modal-divider-color: var(--modus-modal-divider-color, #e0e1e9) !default;
6 | $modus-modal-close-color: var(--modus-modal-close-color, #252a2e) !default;
7 | $modus-modal-close-hover-opacity: var(--modus-modal-close-hover-opacity, 0.75) !default;
8 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-navbar/button-menu/modus-navbar-button-menu.scss:
--------------------------------------------------------------------------------
1 | @import './../modus-navbar.vars';
2 |
3 | .button-menu {
4 | @include custom-navbar-menu;
5 |
6 | background-color: $menu-background-color;
7 | cursor: default;
8 | padding: 0;
9 | top: 0;
10 | width: max-content;
11 |
12 | &.reverse {
13 | left: 0;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-navbar/button-menu/modus-navbar-button-menu.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | Prop,
4 | h, // eslint-disable-line @typescript-eslint/no-unused-vars
5 | } from '@stencil/core';
6 |
7 | @Component({
8 | tag: 'modus-navbar-button-menu',
9 | styleUrl: 'modus-navbar-button-menu.scss',
10 | })
11 | export class ModusNavbarButtonMenu {
12 | @Prop() reverse: boolean;
13 |
14 | render(): unknown {
15 | const menuClasses = {
16 | 'button-menu': true,
17 | reverse: this.reverse,
18 | };
19 |
20 | return (
21 |
24 | );
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-navbar/button-menu/readme.md:
--------------------------------------------------------------------------------
1 | # modus-navbar-button-menu
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | --------- | --------- | ----------- | --------- | ----------- |
12 | | `reverse` | `reverse` | | `boolean` | `undefined` |
13 |
14 |
15 | ## Dependencies
16 |
17 | ### Used by
18 |
19 | - [modus-navbar](..)
20 |
21 | ### Graph
22 | ```mermaid
23 | graph TD;
24 | modus-navbar --> modus-navbar-button-menu
25 | style modus-navbar-button-menu fill:#f9f,stroke:#333,stroke-width:4px
26 | ```
27 |
28 | ----------------------------------------------
29 |
30 |
31 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-navbar/main-menu/modus-navbar-main-menu.e2e.ts:
--------------------------------------------------------------------------------
1 | import { newE2EPage } from '@stencil/core/testing';
2 |
3 | describe('modus-navbar-main-menu', () => {
4 | it('renders', async () => {
5 | const page = await newE2EPage();
6 |
7 | await page.setContent('');
8 | const element = await page.find('modus-navbar-main-menu');
9 | expect(element).toHaveClass('hydrated');
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-navbar/main-menu/modus-navbar-main-menu.models.ts:
--------------------------------------------------------------------------------
1 | export interface ContainerLayout {
2 | position: string;
3 | top: string;
4 | left: string;
5 | height: string;
6 | }
7 |
8 | export const DEFAULT_CONTAINER_LAYOUT: ContainerLayout = Object.freeze({
9 | position: 'fixed',
10 | top: '0px',
11 | left: '0px',
12 | height: '0px',
13 | });
14 |
15 | export const DOM_OBSERVER_CONFIG: MutationObserverInit = Object.freeze({
16 | childList: true,
17 | });
18 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-navbar/main-menu/modus-navbar-main-menu.scss:
--------------------------------------------------------------------------------
1 | @import './../modus-navbar.vars';
2 |
3 | .main-menu {
4 | @include custom-navbar-menu;
5 |
6 | background-color: $menu-background-color;
7 | border: unset;
8 | border-radius: 0 0 $rem_2px $rem_2px;
9 | box-sizing: border-box;
10 | clip-path: inset(0 -10px -10px -10px);
11 | cursor: default;
12 | max-width: 616px;
13 | min-width: 248px;
14 | padding: 0;
15 | width: max-content;
16 | }
17 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-navbar/main-menu/readme.md:
--------------------------------------------------------------------------------
1 | # modus-navbar-main-menu
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | -------------- | --------- | ----------- | ------------- | ----------- |
12 | | `parentNavbar` | -- | | `HTMLElement` | `undefined` |
13 |
14 |
15 | ## Dependencies
16 |
17 | ### Used by
18 |
19 | - [modus-navbar](..)
20 |
21 | ### Graph
22 | ```mermaid
23 | graph TD;
24 | modus-navbar --> modus-navbar-main-menu
25 | style modus-navbar-main-menu fill:#f9f,stroke:#333,stroke-width:4px
26 | ```
27 |
28 | ----------------------------------------------
29 |
30 |
31 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-navbar/notifications-menu/modus-navbar-notifications-menu.scss:
--------------------------------------------------------------------------------
1 | @import './../modus-navbar.vars';
2 |
3 | .notifications-menu {
4 | @include custom-navbar-menu;
5 |
6 | background-color: $menu-background-color;
7 | cursor: default;
8 | width: max-content;
9 |
10 | &.reverse {
11 | left: 0;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-navbar/notifications-menu/modus-navbar-notifications-menu.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { Component, h, Prop } from '@stencil/core';
3 |
4 | @Component({
5 | tag: 'modus-navbar-notifications-menu',
6 | styleUrl: 'modus-navbar-notifications-menu.scss',
7 | shadow: true,
8 | })
9 | export class ModusNavbarNotificationsMenu {
10 | @Prop() reverse: boolean;
11 |
12 | render(): unknown {
13 | const direction = this.reverse ? 'reverse' : '';
14 |
15 | return (
16 |
19 | );
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-navbar/notifications-menu/readme.md:
--------------------------------------------------------------------------------
1 | # modus-navbar-notifications-menu
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | --------- | --------- | ----------- | --------- | ----------- |
12 | | `reverse` | `reverse` | | `boolean` | `undefined` |
13 |
14 |
15 | ## Dependencies
16 |
17 | ### Used by
18 |
19 | - [modus-navbar](..)
20 |
21 | ### Graph
22 | ```mermaid
23 | graph TD;
24 | modus-navbar --> modus-navbar-notifications-menu
25 | style modus-navbar-notifications-menu fill:#f9f,stroke:#333,stroke-width:4px
26 | ```
27 |
28 | ----------------------------------------------
29 |
30 |
31 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-navbar/search-overlay/modus-navbar-search-overlay.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
5 | .overlay-wrapper {
6 | display: flex;
7 | flex-shrink: 0;
8 | gap: 45px;
9 |
10 | .search-box {
11 | display: flex;
12 | flex-grow: 2;
13 | justify-content: center;
14 |
15 | modus-text-input {
16 | display: block;
17 | margin-left: 1rem;
18 | max-width: 764px;
19 | min-width: 185px;
20 | width: 100%;
21 | }
22 | }
23 |
24 | .navbar-button {
25 | justify-content: end;
26 | padding-right: 1rem;
27 | }
28 |
29 | @media screen and (width <=576px) {
30 | .navbar-button {
31 | padding-right: 0.5rem;
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-pagination/enums/pagination-direction.enum.ts:
--------------------------------------------------------------------------------
1 | export enum PaginationDirection {
2 | Previous = 'Previous',
3 | Next = 'Next',
4 | }
5 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-pagination/modus-pagination.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-pagination-color: var(--modus-pagination-color, #252a2e) !default;
2 | $modus-pagination-chevron-color: var(--modus-pagination-chevron-color, #6a6e79) !default;
3 | $modus-pagination-hover-bg: var(--modus-pagination-hover-bg, #e0e1e9) !default;
4 | $modus-pagination-active-bg: var(--modus-pagination-active-bg, #dcedf9) !default;
5 | $modus-pagination-active-color: var(--modus-pagination-active-color, #217cbb) !default;
6 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-progress-bar/modus-progress-bar.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-progress-bg: var(--modus-progress-bg, $col_white) !default;
2 | $modus-progress-bar-bg: var(--modus-progress-bar-bg, #0063a3) !default;
3 | $modus-progress-border-color: var(--modus-progress-border-color, #6a6e79) !default;
4 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-radio-group/modus-radio-button.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-radio-btn-bg: var(--modus-radio-btn-bg, #fff) !default;
2 | $modus-radio-btn-border-color: var(--modus-radio-btn-border-color, #90939f) !default;
3 | $modus-radio-btn-disabled-opacity: var(--modus-radio-btn-disabled-opacity, 0.3) !default;
4 | $modus-radio-btn-label-color: var(--modus-radio-btn-label-color, #464b52) !default;
5 |
6 | // Hover state
7 | $modus-radio-btn-hover-border-color: var(--modus-radio-btn-hover-border-color, #217cbb) !default;
8 |
9 | // Checked state
10 | $modus-radio-btn-selected-border-color: var(--modus-radio-btn-selected-border-color, #217cbb) !default;
11 |
12 | // Focus state
13 | $modus-radio-btn-focus-color: var(--modus-radio-btn-focus-color, #3db0ee) !default;
14 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-radio-group/modus-radio-group.spec.ts:
--------------------------------------------------------------------------------
1 | import { newSpecPage } from '@stencil/core/testing';
2 | import { ModusRadioGroup } from './modus-radio-group';
3 |
4 | describe('modus-radio-group', () => {
5 | it('renders', async () => {
6 | const { root } = await newSpecPage({
7 | components: [ModusRadioGroup],
8 | html: '',
9 | });
10 | expect(root).toEqualHtml(`
11 |
12 |
13 |
14 |
15 |
16 | `);
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-sentiment-scale/modus-sentiment-scale.constants.ts:
--------------------------------------------------------------------------------
1 | export const SMILEY_SENTIMENT_TYPE = 'smileys';
2 | export const THUMB_SENTIMENT_TYPE = 'thumbs';
3 |
4 | export const THUMBS_TYPE_MAP = new Map([
5 | ['thumbs-up', 'Helpful'],
6 | ['thumbs-down', 'Not helpful'],
7 | ]);
8 |
9 | export const SMILEYS_TYPE_MAP = new Map([
10 | ['smiley-dissatisfied', 'Dissatisfied'],
11 | ['smiley-somewhat-dissatisfied', 'Somewhat Dissatisfied'],
12 | ['smiley-neutral', 'Neutral'],
13 | ['smiley-somewhat-satisfied', 'Somewhat Satisfied'],
14 | ['smiley-satisfied', 'Satisfied'],
15 | ]);
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-sentiment-scale/modus-sentiment-scale.models.tsx:
--------------------------------------------------------------------------------
1 | import { SMILEY_SENTIMENT_TYPE, THUMB_SENTIMENT_TYPE } from './modus-sentiment-scale.constants';
2 |
3 | export type ModusSentimentScaleType = typeof SMILEY_SENTIMENT_TYPE | typeof THUMB_SENTIMENT_TYPE;
4 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-sentiment-scale/modus-sentiment-scale.vars.scss:
--------------------------------------------------------------------------------
1 | // Default Start
2 | $modus-sentiment-scale-bg: var(--modus-sentiment-scale-bg) !default;
3 |
4 | // Hover
5 | $modus-sentiment-scale-hover-bg: var(--modus-sentiment-scale-hover-bg) !default;
6 |
7 | // Active
8 | $modus-sentiment-scale-selected-bg: var(--modus-sentiment-scale-selected-bg) !default;
9 |
10 | // Disabled
11 | $modus-sentiment-scale-disabled-color: var(--modus-sentiment-scale-disabled-color) !default;
12 | $modus-sentiment-scale-disabled-opacity: var(--modus-sentiment-scale-disabled-opacity) !default;
13 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-side-navigation/modus-side-navigation.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-side-navigation-bg: var(--modus-side-navigation-bg, #fff) !default;
2 | $modus-side-navigation-item-color: var(--modus-side-navigation-item-color, #252a2e) !default;
3 | $modus-side-navigation-item-chevron-color: var(--modus-side-navigation-item-chevron-color, #252a2e) !default;
4 | $modus-side-navigation-shadow-color: var(--modus-side-navigation-shadow-color, #00000029) !default;
5 | $modus-side-navigation-link-color: var(--modus-side-navigation-link-color, #217cbb) !default;
6 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-slider/modus-slider.spec.ts:
--------------------------------------------------------------------------------
1 | import { newSpecPage } from '@stencil/core/testing';
2 | import { ModusSlider } from './modus-slider';
3 |
4 | describe('modus-slider', () => {
5 | it('renders', async () => {
6 | const { root } = await newSpecPage({
7 | components: [ModusSlider],
8 | html: '',
9 | });
10 | expect(root).toEqualHtml(`
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | `);
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-slider/modus-slider.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-slider-range-bg: var(--modus-slider-range-bg, #0063a3) !default;
2 | $modus-slider-thumb-border-color: var(--modus-slider-thumb-border-color, #217cbb) !default;
3 | $modus-slider-range-disabled-bg: var(--modus-slider-range-disabled-bg, #e0e1e9) !default;
4 | $modus-slider-thumb-disabled-border-color: var(--modus-slider-thumb-disabled-border-color, #b7b9c3) !default;
5 | $modus-slider-thumb-disabled-bg: var(--modus-slider-thumb-disabled-bg, #cbcdd6) !default;
6 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-spinner/modus-spinner.e2e.ts:
--------------------------------------------------------------------------------
1 | import { newE2EPage } from '@stencil/core/testing';
2 |
3 | describe('modus-spinner', () => {
4 | it('renders', async () => {
5 | const page = await newE2EPage();
6 |
7 | await page.setContent('');
8 | const element = await page.find('modus-spinner');
9 | expect(element).toHaveClass('hydrated');
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-spinner/modus-spinner.scss:
--------------------------------------------------------------------------------
1 | @keyframes spin {
2 | 0% {
3 | transform: rotate(0deg);
4 | }
5 |
6 | 100% {
7 | transform: rotate(360deg);
8 | }
9 | }
10 |
11 | div.spinner {
12 | animation: spin 0.75s linear infinite;
13 | border: 0.25em solid $col_trimble_blue;
14 | border-radius: 50%;
15 | border-right-color: transparent;
16 | display: inline-flex;
17 | font-family: $primary-font;
18 | forced-color-adjust: none;
19 | }
20 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-spinner/modus-spinner.spec.ts:
--------------------------------------------------------------------------------
1 | import { newSpecPage } from '@stencil/core/testing';
2 | import { ModusSpinner } from './modus-spinner';
3 |
4 | describe('modus-spinner', () => {
5 | it('renders', async () => {
6 | const { root } = await newSpecPage({
7 | components: [ModusSpinner],
8 | html: '',
9 | });
10 | expect(root).toEqualHtml(`
11 |
12 |
13 |
14 |
15 |
16 | `);
17 | });
18 | });
19 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-switch/modus-switch.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-switch-bg: var(--modus-switch-bg, #90939f) !default;
2 | $modus-switch-border-color: var(--modus-switch-border-color, #90939f) !default;
3 | $modus-switch-disabled-opacity: var(--modus-check-input-disabled-opacity, 0.3) !default;
4 | $modus-switch-label-color: var(--modus-switch-label-color, #464b52) !default;
5 |
6 | // Hover state
7 | $modus-switch-hover-border-color: var(--modus-switch-hover-border-color, #217cbb) !default;
8 |
9 | // Checked state
10 | $modus-switch-selected-border-color: var(--modus-switch-selected-border-color, #217cbb) !default;
11 |
12 | // Focus state
13 | $modus-switch-focus-box-shadow-color: var(--modus-switch-focus-box-shadow-color, #019aeb) !default;
14 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-table/models/column-drag-state.model.ts:
--------------------------------------------------------------------------------
1 | import Position from './position.model';
2 |
3 | export default interface ColumnDragState {
4 | draggedColumnId: string;
5 | dragContent: HTMLElement;
6 | dropColumnId?: string;
7 | translation?: Position;
8 | width?: string;
9 | height?: string;
10 | mouseInteracted: boolean;
11 | dropIndicator?: Position;
12 | }
13 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-table/models/position.model.ts:
--------------------------------------------------------------------------------
1 | export default interface Position {
2 | x: number;
3 | y: number;
4 | height?: number;
5 | }
6 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-table/models/table-row-actions.models.ts:
--------------------------------------------------------------------------------
1 | import { Row } from '@tanstack/table-core';
2 | import { ModusTableRowAction } from './modus-table.models';
3 | import Position from './position.model';
4 |
5 | export interface TableRowActionsMenuEvent {
6 | componentId: string;
7 | actions: ModusTableRowAction[];
8 | position: Position;
9 | row: Row;
10 | onClose: () => void;
11 | }
12 |
13 | export type TableRowActionWithOverflow = ModusTableRowAction & {
14 | isOverflow?: boolean;
15 | };
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-table/parts/cell/modus-table-custom-cell-element.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | FunctionalComponent,
3 | h, // eslint-disable-line @typescript-eslint/no-unused-vars
4 | } from '@stencil/core';
5 |
6 | import { Cell } from '@tanstack/table-core';
7 |
8 | interface ModusTableCustomCellProps {
9 | customElement: Cell;
10 | }
11 |
12 | export const ModusTableCustomCellElement: FunctionalComponent = ({ customElement }) => {
13 | return {}
;
14 | };
15 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-table/parts/cell/readme.md:
--------------------------------------------------------------------------------
1 | # flex-renderer
2 |
3 |
4 |
5 |
6 |
7 |
8 | ## Properties
9 |
10 | | Property | Attribute | Description | Type | Default |
11 | | --------- | --------- | ----------- | -------- | ------- |
12 | | `content` | `content` | | `string` | `''` |
13 |
14 |
15 | ## Dependencies
16 |
17 | ### Used by
18 |
19 | - [modus-table-cell-main](modus-table-cell-main)
20 |
21 | ### Graph
22 | ```mermaid
23 | graph TD;
24 | modus-table-cell-main --> flex-renderer
25 | style flex-renderer fill:#f9f,stroke:#333,stroke-width:4px
26 | ```
27 |
28 | ----------------------------------------------
29 |
30 |
31 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-table/parts/fillerColumn/modus-table-filler-column.scss:
--------------------------------------------------------------------------------
1 | @import '../../modus-table.vars';
2 |
3 | modus-table-filler-column {
4 | z-index: 0;
5 |
6 | .d-none {
7 | display: none;
8 | }
9 |
10 | table {
11 | thead tr,
12 | tfoot tr {
13 | height: inherit;
14 | }
15 | }
16 |
17 | table:not(.cell-borderless) {
18 | td,
19 | th {
20 | &:last-child {
21 | border-right: none;
22 | }
23 | }
24 |
25 | tbody td,
26 | thead th {
27 | &:first-child {
28 | border-left: $rem-1px $modus-table-border-color solid !important;
29 | }
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-table/parts/panel/modus-table-toolbar/modus-table-toolbar.scss:
--------------------------------------------------------------------------------
1 | // Data table table panel CSS
2 | .table-toolbar {
3 | align-items: center;
4 | display: flex;
5 | justify-content: space-between;
6 | padding-bottom: 3px;
7 |
8 | .section {
9 | align-items: center;
10 | display: flex;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-table/parts/row/actions/modus-table-row-actions-menu/modus-table-row-actions-menu.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../modus-table.vars';
2 |
3 | modus-table-row-actions-menu {
4 | .row-actions-menu {
5 | background-color: $modus-table-body-bg;
6 | box-shadow: 0 0 2px rgba(37, 42, 46, 0.3);
7 | color: $modus-table-body-color;
8 | display: flex;
9 | position: fixed;
10 | top: -1px;
11 | z-index: 9;
12 | }
13 |
14 | modus-list-item {
15 | cursor: pointer;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-table/parts/row/actions/modus-table-row-actions/modus-table-row-actions.scss:
--------------------------------------------------------------------------------
1 | modus-table-row-actions {
2 | align-items: center;
3 | display: flex;
4 | gap: 8px;
5 | justify-content: center;
6 | }
7 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-tabs/modus-tabs.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-tab-color: var(--modus-tab-color, #252a2e) !default;
2 | $modus-tab-bottom-line-color: var(--modus-tab-bottom-line-color, #cbcdd6) !default;
3 | $modus-tab-active-color: var(--modus-tab-active-color, #217cbb) !default;
4 | $modus-tab-hover-bg: var(--modus-tab-hover-bg, #dcedf9) !default;
5 | $modus-tab-hover-color: var(--modus-tab-hover-color, #217cbb) !default;
6 | $modus-tab-disabled-color: var(--modus-tab-disabled-color, #b7b9c3) !default;
7 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-time-picker/modus-time-picker.models.tsx:
--------------------------------------------------------------------------------
1 | export interface ModusTimePickerEventDetails {
2 | value: string;
3 | inputString: string;
4 | }
5 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-toast/modus-toast.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-toast-bg: var(--modus-toast-bg, $col_white) !default;
2 | $modus-toast-color: var(--modus-toast-color, #252a2e) !default;
3 | $modus-toast-variants: (
4 | 'primary': (
5 | 'bg': #0063a3,
6 | 'color': #fff,
7 | ),
8 | 'secondary': (
9 | 'bg': #252a2e,
10 | 'color': #fff,
11 | ),
12 | 'success': (
13 | 'bg': #006638,
14 | 'color': #fff,
15 | ),
16 | 'danger': (
17 | 'bg': #ab1f26,
18 | 'color': #fff,
19 | ),
20 | );
21 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-toolbar/modus-divider.scss:
--------------------------------------------------------------------------------
1 | @import './modus-toolbar.vars';
2 |
3 | .modus-divider {
4 | border-left: 1px solid $modus-toolbar-divider-bg;
5 | height: 32px;
6 | margin-left: 3px;
7 | margin-right: 3px;
8 | opacity: 0.25;
9 | }
10 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-toolbar/modus-divider.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { Component, h } from '@stencil/core';
3 |
4 | @Component({
5 | tag: 'modus-divider',
6 | styleUrl: 'modus-divider.scss',
7 | })
8 | export class ModusDivider {
9 | render() {
10 | return ;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-toolbar/modus-toolbar.scss:
--------------------------------------------------------------------------------
1 | @import './modus-toolbar.vars';
2 |
3 | :host {
4 | align-items: center;
5 | background-color: $modus-toolbar-bg;
6 | border-radius: 4px;
7 | bottom: 20px;
8 | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
9 | display: flex;
10 | padding: 1px;
11 | position: fixed;
12 | right: 20px;
13 | z-index: 9999;
14 | }
15 |
16 | modus-button {
17 | margin: 2px !important;
18 | }
19 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-toolbar/modus-toolbar.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-toolbar-bg: var(--modus-toolbar-bg, #fff) !default;
2 | $modus-toolbar-divider-bg: var(--modus-toolbar-divider-bg, #252a2e) !default;
3 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-tooltip/modus-tooltip.models.ts:
--------------------------------------------------------------------------------
1 | export type ModusToolTipPlacement = 'bottom' | 'left' | 'right' | 'top' | 'auto';
2 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-tooltip/modus-tooltip.spec.ts:
--------------------------------------------------------------------------------
1 | import { newSpecPage } from '@stencil/core/testing';
2 | import { ModusTooltip } from './modus-tooltip';
3 |
4 | describe('modus-tooltip', () => {
5 | it('renders', async () => {
6 | const { root } = await newSpecPage({
7 | components: [ModusTooltip],
8 | html: '',
9 | });
10 | expect(root).toEqualHtml(`
11 |
12 |
13 |
14 |
18 |
19 |
20 | `);
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-tooltip/modus-tooltip.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-tooltip-bg: var(--modus-tooltip-bg, #585c65) !default;
2 | $modus-tooltip-color: var(--modus-tooltip-color, #fff) !default;
3 |
--------------------------------------------------------------------------------
/stencil-workspace/src/components/modus-utility-panel/modus-utility-panel.vars.scss:
--------------------------------------------------------------------------------
1 | $modus-utility-panel-bg: var(--modus-utility-panel-bg, #fff) !default;
2 | $modus-utility-panel-color: var(--modus-utility-panel-color, #000) !default;
3 |
--------------------------------------------------------------------------------
/stencil-workspace/src/global/shared-mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin navbar-menu {
2 | background-color: $col_white;
3 | border-radius: $rem_4px;
4 | box-shadow: $box-shadow-lg;
5 | display: flex;
6 | flex-direction: column;
7 | max-width: 384px;
8 | padding: $rem-24px;
9 | position: absolute;
10 | right: 0;
11 | top: 44px;
12 | z-index: 100;
13 | }
14 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/generated-icons/ABOUT_FOLDER.md:
--------------------------------------------------------------------------------
1 | The icons in this folder are generated in the `package.json`'s `prebuild` script and should not be modified
2 | directly. If you would like to modify these icons, please update the `src/generated-icons` files.
3 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-add.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconAdd: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-apps.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconApps: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-arrow-down.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | FunctionalComponent,
3 | h, // eslint-disable-line @typescript-eslint/no-unused-vars
4 | } from '@stencil/core';
5 | import { IconProps } from '../ModusIconMap';
6 |
7 | export const IconArrowDown: FunctionalComponent = (props: IconProps) => (
8 |
17 | );
18 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-arrow-up.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | FunctionalComponent,
3 | h, // eslint-disable-line @typescript-eslint/no-unused-vars
4 | } from '@stencil/core';
5 | import { IconProps } from '../ModusIconMap';
6 |
7 | export const IconArrowUp: FunctionalComponent = (props: IconProps) => (
8 |
18 | );
19 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-caret-down.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconCaretDown: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-caret-up.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconCaretUp: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-check-circle.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconCheckCircle: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-check.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconCheck: FunctionalComponent = (props: IconProps) => (
6 |
20 | );
21 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-chevron-double-up.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconChevronDoubleUp: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-chevron-down-thick.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconChevronDownThick: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-chevron-up-thick.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconChevronUpThick: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-download-line.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconDownloadLine: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-indeterminate.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconIndeterminate: FunctionalComponent = (props: IconProps) => (
6 |
19 | );
20 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-menu.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconMenu: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-moon.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconMoon: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-notifications.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconNotifications: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-pencil.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconPencil: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-pin.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconPin: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-triangle-down.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconTriangleDown: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-triangle-left.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconTriangleLeft: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-visibility.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconVisibility: FunctionalComponent = (props: IconProps) => (
6 |
15 | );
16 |
--------------------------------------------------------------------------------
/stencil-workspace/src/icons/svgs/icon-warning.tsx:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import { FunctionalComponent, h } from '@stencil/core';
3 | import { IconProps } from '../ModusIconMap';
4 |
5 | export const IconWarning: FunctionalComponent = (props: IconProps) => (
6 |
14 | );
15 |
--------------------------------------------------------------------------------
/stencil-workspace/src/index.ts:
--------------------------------------------------------------------------------
1 | export { Components, JSX } from './components';
2 |
--------------------------------------------------------------------------------
/stencil-workspace/src/utils/utils.spec.ts:
--------------------------------------------------------------------------------
1 | import { createGuid, generateElementId } from './utils';
2 |
3 | describe('createGuid', () => {
4 | it('returns truthy guid value', () => {
5 | expect(createGuid()).toBeTruthy();
6 | });
7 |
8 | it('returns 36 character guid value', () => {
9 | expect(createGuid().length).toEqual(36);
10 | });
11 | });
12 |
13 | describe('generateElementId', () => {
14 | it('first run return 0 at the end', () => {
15 | expect(generateElementId()).toEqual('mwc_id_0');
16 | });
17 |
18 | it('second run return 1 at the end', () => {
19 | expect(generateElementId()).toEqual('mwc_id_1');
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/stencil-workspace/src/utils/utils.ts:
--------------------------------------------------------------------------------
1 | export function createGuid(): string {
2 | return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
3 | const r = (Math.random() * 16) | 0,
4 | v = c == 'x' ? r : (r & 0x3) | 0x8;
5 | return v.toString(16);
6 | });
7 | }
8 |
9 | export function generateRandomNumber(): number {
10 | const array = new Uint32Array(1);
11 | window.crypto.getRandomValues(array);
12 | return array[0];
13 | }
14 |
15 | let counter = 0;
16 | export function generateElementId(): string {
17 | return `mwc_id_${counter++}`;
18 | }
19 |
--------------------------------------------------------------------------------
/stencil-workspace/storybook/.npmrc:
--------------------------------------------------------------------------------
1 | lockfile-version = "3"
2 | registry = 'https://registry.npmjs.org/'
3 |
--------------------------------------------------------------------------------
/stencil-workspace/storybook/.nvmrc:
--------------------------------------------------------------------------------
1 | 18.20.8
2 |
--------------------------------------------------------------------------------
/stencil-workspace/storybook/.storybook/manager.js:
--------------------------------------------------------------------------------
1 | import { addons } from '@storybook/manager-api';
2 | import yourTheme from './your-theme';
3 |
4 | addons.setConfig({
5 | theme: yourTheme,
6 | });
7 |
--------------------------------------------------------------------------------
/stencil-workspace/storybook/.storybook/preview-body.html:
--------------------------------------------------------------------------------
1 |
6 |
7 |
24 |
--------------------------------------------------------------------------------
/stencil-workspace/storybook/.storybook/preview-head.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/stencil-workspace/storybook/.storybook/your-theme.js:
--------------------------------------------------------------------------------
1 | import { create } from '@storybook/theming';
2 |
3 | export default create({
4 | base: 'light',
5 | brandTitle: 'Modus Web Components',
6 | brandUrl: '/',
7 | brandImage: '/trimble-logo.svg',
8 | colorSecondary: '#0C77BE',
9 | fontBase: '"Open Sans", sans-serif',
10 | fontCode: 'monospace',
11 | });
12 |
--------------------------------------------------------------------------------
/stencil-workspace/storybook/postcss.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | module.exports = {
3 | plugins: [
4 | require('autoprefixer')
5 | ]
6 | };
7 | /* eslint-enable */
8 |
--------------------------------------------------------------------------------
/stencil-workspace/storybook/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/stencil-workspace/storybook/public/favicon.ico
--------------------------------------------------------------------------------
/stencil-workspace/storybook/public/github.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/stencil-workspace/storybook/public/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/stencil-workspace/storybook/public/preview.png
--------------------------------------------------------------------------------
/stencil-workspace/storybook/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow:
3 |
--------------------------------------------------------------------------------
/stencil-workspace/storybook/public/staticwebapp.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "globalHeaders": {
3 | "Content-Security-Policy": "upgrade-insecure-requests",
4 | "Permissions-Policy": "autoplay=()",
5 | "Referrer-Policy": "no-referrer-when-downgrade",
6 | "X-Content-Type-Options": "nosniff",
7 | "X-Frame-Options": "SAMEORIGIN",
8 | "X-XSS-Protection": "0"
9 | },
10 | "responseOverrides": {
11 | "404": {
12 | "rewrite": "/404/",
13 | "statusCode": 404
14 | }
15 | },
16 | "routes": [
17 | {
18 | "route": "/favicon.*",
19 | "headers": {
20 | "cache-control": "public, max-age=15770000"
21 | }
22 | }
23 | ]
24 | }
25 |
--------------------------------------------------------------------------------
/stencil-workspace/stylelint.config.mjs:
--------------------------------------------------------------------------------
1 | export default {
2 | extends: ['stylelint-config-standard-scss'],
3 | plugins: ['stylelint-order'],
4 | rules: {
5 | 'alpha-value-notation': null,
6 | 'color-function-alias-notation': null,
7 | 'color-function-notation': null,
8 | 'declaration-property-value-keyword-no-deprecated': null,
9 | 'declaration-block-no-redundant-longhand-properties': null,
10 | 'declaration-property-value-keyword-no-deprecated': null,
11 | 'no-descending-specificity': null,
12 | 'order/properties-alphabetical-order': true,
13 | 'property-no-vendor-prefix': null,
14 | 'selector-class-pattern': '^[a-z][a-z0-9\\-]*[a-z0-9]$',
15 | 'selector-not-notation': null,
16 | 'scss/no-global-function-names': null,
17 | },
18 | };
19 |
--------------------------------------------------------------------------------
/stencil-workspace/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowSyntheticDefaultImports": true,
4 | "allowUnreachableCode": false,
5 | "declaration": false,
6 | "experimentalDecorators": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "lib": [
9 | "dom",
10 | "es2017"
11 | ],
12 | "moduleResolution": "node",
13 | "module": "esnext",
14 | "skipLibCheck": true,
15 | "target": "es2017",
16 | "noUnusedLocals": true,
17 | "noUnusedParameters": true,
18 | "jsx": "react",
19 | "jsxFactory": "h"
20 | },
21 | "include": [
22 | "src"
23 | ],
24 | "exclude": [
25 | "node_modules"
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------