├── .cspell.json
├── .editorconfig
├── .gitattributes
├── .github
├── CODEOWNERS
├── ISSUE_TEMPLATE
│ ├── bug_report.yml
│ └── feature_request.yml
├── copilot-instructions.md
├── dependabot.yml
├── issue-labeler.yml
├── pull_request_template.md
├── release-drafter.yml
└── workflows
│ ├── add-issues-to-modus-project.yml
│ ├── azure-static-web-apps-deploy.yml
│ ├── build.yml
│ ├── codeql.yaml
│ ├── dependency-review.yml
│ ├── deploy-storybook.yml
│ ├── issue-thanks.yml
│ ├── labeler.yml
│ ├── publish-angular.yml
│ ├── publish-react.yml
│ ├── publish.yml
│ ├── release-notes.yml
│ ├── sonar-scan.yml
│ ├── spellcheck.yml
│ └── super-linter.yml
├── .gitignore
├── .hintrc
├── .htmlhintrc
├── .markdownlint.json
├── .markdownlintignore
├── .npmrc
├── .prettierignore
├── .prettierrc.json
├── .vscode
├── extensions.json
└── settings.json
├── .whitesource
├── CHANGELOG.md
├── CONSIDERATIONS.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── SECURITY.md
├── SUPPORT.md
├── angular-workspace
├── ng16
│ ├── .npmrc
│ ├── README.md
│ ├── angular.json
│ ├── package-lock.json
│ ├── package.json
│ ├── projects
│ │ ├── test-harness
│ │ │ ├── karma.conf.js
│ │ │ ├── src
│ │ │ │ ├── app
│ │ │ │ │ ├── app.component.html
│ │ │ │ │ ├── app.component.scss
│ │ │ │ │ ├── app.component.spec.ts
│ │ │ │ │ ├── app.component.ts
│ │ │ │ │ └── app.module.ts
│ │ │ │ ├── assets
│ │ │ │ │ └── .gitkeep
│ │ │ │ ├── environments
│ │ │ │ │ ├── environment.prod.ts
│ │ │ │ │ └── environment.ts
│ │ │ │ ├── favicon.ico
│ │ │ │ ├── index.html
│ │ │ │ ├── main.ts
│ │ │ │ ├── polyfills.ts
│ │ │ │ ├── styles.scss
│ │ │ │ └── test.ts
│ │ │ ├── tsconfig.app.json
│ │ │ └── tsconfig.spec.json
│ │ └── trimble-oss
│ │ │ └── modus-angular-components
│ │ │ ├── .browserslistrc
│ │ │ ├── .npmrc
│ │ │ ├── LICENSE
│ │ │ ├── README.md
│ │ │ ├── karma.conf.js
│ │ │ ├── ng-package.json
│ │ │ ├── package-lock.json
│ │ │ ├── package.json
│ │ │ ├── src
│ │ │ ├── lib
│ │ │ │ └── modus-angular-components.module.ts
│ │ │ ├── public-api.ts
│ │ │ └── test.ts
│ │ │ ├── tsconfig.lib.json
│ │ │ ├── tsconfig.lib.prod.json
│ │ │ └── tsconfig.spec.json
│ └── tsconfig.json
├── ng17
│ ├── .npmrc
│ ├── README.md
│ ├── angular.json
│ ├── package-lock.json
│ ├── package.json
│ ├── projects
│ │ ├── test-harness
│ │ │ ├── karma.conf.js
│ │ │ ├── src
│ │ │ │ ├── app
│ │ │ │ │ ├── app.component.html
│ │ │ │ │ ├── app.component.scss
│ │ │ │ │ ├── app.component.spec.ts
│ │ │ │ │ ├── app.component.ts
│ │ │ │ │ └── app.module.ts
│ │ │ │ ├── assets
│ │ │ │ │ └── .gitkeep
│ │ │ │ ├── environments
│ │ │ │ │ ├── environment.prod.ts
│ │ │ │ │ └── environment.ts
│ │ │ │ ├── favicon.ico
│ │ │ │ ├── index.html
│ │ │ │ ├── main.ts
│ │ │ │ ├── polyfills.ts
│ │ │ │ ├── styles.scss
│ │ │ │ └── test.ts
│ │ │ ├── tsconfig.app.json
│ │ │ └── tsconfig.spec.json
│ │ └── trimble-oss
│ │ │ └── modus-angular-components
│ │ │ ├── .browserslistrc
│ │ │ ├── .npmrc
│ │ │ ├── LICENSE
│ │ │ ├── README.md
│ │ │ ├── karma.conf.js
│ │ │ ├── ng-package.json
│ │ │ ├── package-lock.json
│ │ │ ├── package.json
│ │ │ ├── src
│ │ │ ├── lib
│ │ │ │ └── modus-angular-components.module.ts
│ │ │ ├── public-api.ts
│ │ │ └── test.ts
│ │ │ ├── tsconfig.lib.json
│ │ │ ├── tsconfig.lib.prod.json
│ │ │ └── tsconfig.spec.json
│ └── tsconfig.json
├── ng18
│ ├── README.md
│ ├── angular.json
│ ├── package-lock.json
│ ├── package.json
│ ├── projects
│ │ ├── test-harness
│ │ │ ├── public
│ │ │ │ └── favicon.ico
│ │ │ ├── src
│ │ │ │ ├── app
│ │ │ │ │ ├── app.component.html
│ │ │ │ │ ├── app.component.scss
│ │ │ │ │ ├── app.component.spec.ts
│ │ │ │ │ ├── app.component.ts
│ │ │ │ │ ├── app.config.ts
│ │ │ │ │ └── app.routes.ts
│ │ │ │ ├── index.html
│ │ │ │ ├── main.ts
│ │ │ │ └── styles.scss
│ │ │ ├── tsconfig.app.json
│ │ │ └── tsconfig.spec.json
│ │ └── trimble-oss
│ │ │ └── modus-angular-components
│ │ │ ├── .npmrc
│ │ │ ├── LICENSE
│ │ │ ├── README.md
│ │ │ ├── ng-package.json
│ │ │ ├── package-lock.json
│ │ │ ├── package.json
│ │ │ ├── src
│ │ │ ├── lib
│ │ │ │ └── modus-angular-components.module.ts
│ │ │ └── public-api.ts
│ │ │ ├── tsconfig.lib.json
│ │ │ ├── tsconfig.lib.prod.json
│ │ │ └── tsconfig.spec.json
│ └── tsconfig.json
├── ng19
│ ├── README.md
│ ├── angular.json
│ ├── package-lock.json
│ ├── package.json
│ ├── projects
│ │ ├── test-harness
│ │ │ ├── public
│ │ │ │ └── favicon.ico
│ │ │ ├── src
│ │ │ │ ├── app
│ │ │ │ │ ├── app.component.html
│ │ │ │ │ ├── app.component.scss
│ │ │ │ │ ├── app.component.spec.ts
│ │ │ │ │ ├── app.component.ts
│ │ │ │ │ ├── app.config.ts
│ │ │ │ │ └── app.routes.ts
│ │ │ │ ├── index.html
│ │ │ │ ├── main.ts
│ │ │ │ └── styles.scss
│ │ │ ├── tsconfig.app.json
│ │ │ └── tsconfig.spec.json
│ │ └── trimble-oss
│ │ │ └── modus-angular-components
│ │ │ ├── .npmrc
│ │ │ ├── LICENSE
│ │ │ ├── README.md
│ │ │ ├── ng-package.json
│ │ │ ├── package-lock.json
│ │ │ ├── package.json
│ │ │ ├── src
│ │ │ ├── lib
│ │ │ │ └── modus-angular-components.module.ts
│ │ │ └── public-api.ts
│ │ │ ├── tsconfig.lib.json
│ │ │ ├── tsconfig.lib.prod.json
│ │ │ └── tsconfig.spec.json
│ └── tsconfig.json
├── projects
│ └── trimble-oss
│ │ └── modus-angular-components
│ │ └── src
│ │ └── lib
│ │ └── stencil-generated
│ │ ├── angular-component-lib
│ │ └── utils.ts
│ │ ├── boolean-value-accessor.ts
│ │ ├── components.ts
│ │ ├── index.ts
│ │ ├── select-value-accessor.ts
│ │ ├── text-value-accessor.ts
│ │ └── value-accessor.ts
├── test-ng15
│ ├── .npmrc
│ ├── README.md
│ ├── angular.json
│ ├── karma.conf.js
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── app
│ │ │ ├── app.component.html
│ │ │ ├── app.component.scss
│ │ │ ├── app.component.spec.ts
│ │ │ ├── app.component.ts
│ │ │ └── app.module.ts
│ │ ├── assets
│ │ │ └── test.css
│ │ ├── environments
│ │ │ ├── environment.prod.ts
│ │ │ └── environment.ts
│ │ ├── examples
│ │ │ ├── modus-accordion-examples
│ │ │ │ ├── modus-accordion-examples.component.spec.ts
│ │ │ │ └── modus-accordion-examples.component.ts
│ │ │ ├── modus-alert-examples
│ │ │ │ ├── modus-alert-examples.component.spec.ts
│ │ │ │ └── modus-alert-examples.component.ts
│ │ │ ├── modus-autocomplete-examples
│ │ │ │ ├── modus-autocomplete-examples.component.spec.ts
│ │ │ │ └── modus-autocomplete-examples.component.ts
│ │ │ ├── modus-badge-examples
│ │ │ │ ├── modus-badge-examples.component.spec.ts
│ │ │ │ └── modus-badge-examples.component.ts
│ │ │ ├── modus-breadcrumb-examples
│ │ │ │ ├── modus-breadcrumb-examples.component.spec.ts
│ │ │ │ └── modus-breadcrumb-examples.component.ts
│ │ │ ├── modus-button-examples
│ │ │ │ ├── modus-button-examples.component.spec.ts
│ │ │ │ └── modus-button-examples.component.ts
│ │ │ ├── modus-card-examples
│ │ │ │ ├── modus-card-examples.component.spec.ts
│ │ │ │ └── modus-card-examples.component.ts
│ │ │ ├── modus-checkbox-examples
│ │ │ │ ├── modus-checkbox-examples.component.spec.ts
│ │ │ │ └── modus-checkbox-examples.component.ts
│ │ │ ├── modus-chip-examples
│ │ │ │ ├── modus-chip-examples.component.spec.ts
│ │ │ │ └── modus-chip-examples.component.ts
│ │ │ ├── modus-content-tree-examples
│ │ │ │ ├── modus-content-tree-examples.component.spec.ts
│ │ │ │ └── modus-content-tree-examples.component.ts
│ │ │ ├── modus-data-table-examples
│ │ │ │ ├── modus-data-table-examples.component.spec.ts
│ │ │ │ └── modus-data-table-examples.component.ts
│ │ │ ├── modus-date-picker-examples
│ │ │ │ ├── modus-date-picker-examples.component.spec.ts
│ │ │ │ └── modus-date-picker-examples.component.ts
│ │ │ ├── modus-dropdown-examples
│ │ │ │ ├── modus-dropdown-examples.component.spec.ts
│ │ │ │ └── modus-dropdown-examples.component.ts
│ │ │ ├── modus-file-dropzone-examples
│ │ │ │ ├── modus-file-dropzone-examples.component.spec.ts
│ │ │ │ └── modus-file-dropzone-examples.component.ts
│ │ │ ├── modus-list-examples
│ │ │ │ ├── modus-list-examples.component.spec.ts
│ │ │ │ └── modus-list-examples.component.ts
│ │ │ ├── modus-message-examples
│ │ │ │ ├── modus-message-examples.component.spec.ts
│ │ │ │ └── modus-message-examples.component.ts
│ │ │ ├── modus-modal-examples
│ │ │ │ ├── modus-modal-examples.component.spec.ts
│ │ │ │ └── modus-modal-examples.component.ts
│ │ │ ├── modus-navbar-examples
│ │ │ │ ├── modus-navbar-examples.component.html
│ │ │ │ ├── modus-navbar-examples.component.scss
│ │ │ │ ├── modus-navbar-examples.component.spec.ts
│ │ │ │ └── modus-navbar-examples.component.ts
│ │ │ ├── modus-number-examples
│ │ │ │ ├── modus-number-examples.component.html
│ │ │ │ ├── modus-number-examples.component.spec.ts
│ │ │ │ └── modus-number-examples.component.ts
│ │ │ ├── modus-pagination-examples
│ │ │ │ ├── modus-pagination-examples.component.html
│ │ │ │ ├── modus-pagination-examples.component.spec.ts
│ │ │ │ └── modus-pagination-examples.component.ts
│ │ │ ├── modus-progress-bar-examples
│ │ │ │ ├── modus-progress-bar-examples.component.html
│ │ │ │ ├── modus-progress-bar-examples.component.spec.ts
│ │ │ │ └── modus-progress-bar-examples.component.ts
│ │ │ ├── modus-radio-group-examples
│ │ │ │ ├── modus-radio-group-examples.component.spec.ts
│ │ │ │ └── modus-radio-group-examples.component.ts
│ │ │ ├── modus-select-examples
│ │ │ │ ├── modus-select-examples.component.html
│ │ │ │ ├── modus-select-examples.component.spec.ts
│ │ │ │ └── modus-select-examples.component.ts
│ │ │ ├── modus-side-navigation-examples
│ │ │ │ ├── modus-side-navigation-examples.component.html
│ │ │ │ ├── modus-side-navigation-examples.component.scss
│ │ │ │ ├── modus-side-navigation-examples.component.spec.ts
│ │ │ │ └── modus-side-navigation-examples.component.ts
│ │ │ ├── modus-slider-examples
│ │ │ │ ├── modus-slider-examples.component.spec.ts
│ │ │ │ └── modus-slider-examples.component.ts
│ │ │ ├── modus-spinner-examples
│ │ │ │ ├── modus-spinner-examples.component.spec.ts
│ │ │ │ └── modus-spinner-examples.component.ts
│ │ │ ├── modus-switch-examples
│ │ │ │ ├── modus-switch-examples.component.spec.ts
│ │ │ │ └── modus-switch-examples.component.ts
│ │ │ ├── modus-table-examples
│ │ │ │ ├── modus-table-examples.component.spec.ts
│ │ │ │ └── modus-table-examples.component.ts
│ │ │ ├── modus-tabs-examples
│ │ │ │ ├── modus-tabs-examples.component.spec.ts
│ │ │ │ └── modus-tabs-examples.component.ts
│ │ │ ├── modus-text-input-examples
│ │ │ │ ├── modus-text-input-examples.component.html
│ │ │ │ ├── modus-text-input-examples.component.spec.ts
│ │ │ │ └── modus-text-input-examples.component.ts
│ │ │ ├── modus-time-picker-examples
│ │ │ │ ├── modus-time-picker-examples.component.html
│ │ │ │ ├── modus-time-picker-examples.component.spec.ts
│ │ │ │ └── modus-time-picker-examples.component.ts
│ │ │ ├── modus-toast-examples
│ │ │ │ ├── modus-toast-examples.component.spec.ts
│ │ │ │ └── modus-toast-examples.component.ts
│ │ │ └── modus-tooltip-examples
│ │ │ │ ├── modus-tooltip-examples.component.spec.ts
│ │ │ │ └── modus-tooltip-examples.component.ts
│ │ ├── index.html
│ │ ├── main.ts
│ │ ├── polyfills.ts
│ │ ├── styles.css
│ │ └── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.json
│ └── tsconfig.spec.json
└── test-web-components
│ ├── README.md
│ ├── angular.json
│ ├── karma.conf.js
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ ├── app
│ │ ├── app.component.html
│ │ ├── app.component.scss
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── assets
│ │ └── test.css
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ └── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.json
│ └── tsconfig.spec.json
├── design
└── capability-design.md
├── package.json
├── react-workspace
├── react-17
│ ├── .npmrc
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── components
│ │ │ └── index.ts
│ │ └── index.ts
│ └── tsconfig.json
├── react-18
│ ├── .npmrc
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── src
│ │ ├── components
│ │ │ └── index.ts
│ │ └── index.ts
│ └── tsconfig.json
├── react-19
│ ├── .npmrc
│ ├── index.ts
│ ├── package-lock.json
│ ├── package.json
│ └── tsconfig.json
├── test-react-v17
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── index.html
│ │ └── manifest.json
│ ├── src
│ │ ├── App.css
│ │ ├── App.tsx
│ │ ├── examples
│ │ │ ├── ModusAccordionExamples.tsx
│ │ │ ├── ModusAlertExamples.tsx
│ │ │ ├── ModusAutoCompleteExamples.tsx
│ │ │ ├── ModusBadgeExamples.tsx
│ │ │ ├── ModusBreadcrumbExamples.tsx
│ │ │ ├── ModusButtonExamples.tsx
│ │ │ ├── ModusCardExamples.tsx
│ │ │ ├── ModusCheckboxExamples.tsx
│ │ │ ├── ModusChipExamples.tsx
│ │ │ ├── ModusContentTreeExamples.tsx
│ │ │ ├── ModusDataTableExamples.tsx
│ │ │ ├── ModusDatePickerExamples.tsx
│ │ │ ├── ModusDropdownExamples.tsx
│ │ │ ├── ModusFileDropZoneExamples.tsx
│ │ │ ├── ModusListExamples.tsx
│ │ │ ├── ModusMessageExamples.tsx
│ │ │ ├── ModusModalExamples.tsx
│ │ │ ├── ModusNavbarExamples.tsx
│ │ │ ├── ModusNumberInputExamples.tsx
│ │ │ ├── ModusPaginationExamples.tsx
│ │ │ ├── ModusProgressBarExamples.tsx
│ │ │ ├── ModusRadioGroupExamples.tsx
│ │ │ ├── ModusSelectExamples.tsx
│ │ │ ├── ModusSideNavigationExamples.tsx
│ │ │ ├── ModusSliderExamples.tsx
│ │ │ ├── ModusSpinnerExamples.tsx
│ │ │ ├── ModusSwitchExamples.tsx
│ │ │ ├── ModusTabExamples.tsx
│ │ │ ├── ModusTableExamples.tsx
│ │ │ ├── ModusTextInputExamples.tsx
│ │ │ ├── ModusTimePickerExamples.tsx
│ │ │ ├── ModusToastExamples.tsx
│ │ │ ├── ModusTooltipExamples.tsx
│ │ │ └── index.tsx
│ │ └── index.tsx
│ └── tsconfig.json
├── test-react-v18
│ ├── .npmrc
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── index.html
│ │ └── manifest.json
│ ├── src
│ │ ├── App.css
│ │ ├── App.tsx
│ │ ├── examples
│ │ │ ├── ModusAccordionExamples.tsx
│ │ │ ├── ModusAlertExamples.tsx
│ │ │ ├── ModusAutoCompleteExamples.tsx
│ │ │ ├── ModusBadgeExamples.tsx
│ │ │ ├── ModusBreadcrumbExamples.tsx
│ │ │ ├── ModusButtonExamples.tsx
│ │ │ ├── ModusCardExamples.tsx
│ │ │ ├── ModusCheckboxExamples.tsx
│ │ │ ├── ModusChipExamples.tsx
│ │ │ ├── ModusContentTreeExamples.tsx
│ │ │ ├── ModusDataTableExamples.tsx
│ │ │ ├── ModusDatePickerExamples.tsx
│ │ │ ├── ModusDropdownExamples.tsx
│ │ │ ├── ModusFileDropZoneExamples.tsx
│ │ │ ├── ModusListExamples.tsx
│ │ │ ├── ModusMessageExamples.tsx
│ │ │ ├── ModusModalExamples.tsx
│ │ │ ├── ModusNavbarExamples.tsx
│ │ │ ├── ModusNumberInputExamples.tsx
│ │ │ ├── ModusPaginationExamples.tsx
│ │ │ ├── ModusProgressBarExamples.tsx
│ │ │ ├── ModusRadioGroupExamples.tsx
│ │ │ ├── ModusSelectExamples.tsx
│ │ │ ├── ModusSideNavigationExamples.tsx
│ │ │ ├── ModusSliderExamples.tsx
│ │ │ ├── ModusSpinnerExamples.tsx
│ │ │ ├── ModusSwitchExamples.tsx
│ │ │ ├── ModusTabExamples.tsx
│ │ │ ├── ModusTableExamples.tsx
│ │ │ ├── ModusTextInputExamples.tsx
│ │ │ ├── ModusTimePickerExamples.tsx
│ │ │ ├── ModusToastExamples.tsx
│ │ │ ├── ModusTooltipExamples.tsx
│ │ │ └── index.tsx
│ │ └── index.tsx
│ └── tsconfig.json
├── test-react-v19
│ ├── .gitignore
│ ├── .npmrc
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── logo192.png
│ │ ├── logo512.png
│ │ ├── manifest.json
│ │ └── robots.txt
│ ├── src
│ │ ├── App.css
│ │ ├── App.test.tsx
│ │ ├── App.tsx
│ │ ├── examples
│ │ │ ├── ModusAccordionExamples.tsx
│ │ │ ├── ModusAlertExamples.tsx
│ │ │ ├── ModusAutoCompleteExamples.tsx
│ │ │ ├── ModusBadgeExamples.tsx
│ │ │ ├── ModusBreadcrumbExamples.tsx
│ │ │ ├── ModusButtonExamples.tsx
│ │ │ ├── ModusCardExamples.tsx
│ │ │ ├── ModusCheckboxExamples.tsx
│ │ │ ├── ModusChipExamples.tsx
│ │ │ ├── ModusContentTreeExamples.tsx
│ │ │ ├── ModusDataTableExamples.tsx
│ │ │ ├── ModusDatePickerExamples.tsx
│ │ │ ├── ModusDropdownExamples.tsx
│ │ │ ├── ModusFileDropZoneExamples.tsx
│ │ │ ├── ModusListExamples.tsx
│ │ │ ├── ModusMessageExamples.tsx
│ │ │ ├── ModusModalExamples.tsx
│ │ │ ├── ModusNavbarExamples.tsx
│ │ │ ├── ModusNumberInputExamples.tsx
│ │ │ ├── ModusPaginationExamples.tsx
│ │ │ ├── ModusProgressBarExamples.tsx
│ │ │ ├── ModusRadioGroupExamples.tsx
│ │ │ ├── ModusSelectExamples.tsx
│ │ │ ├── ModusSideNavigationExamples.tsx
│ │ │ ├── ModusSliderExamples.tsx
│ │ │ ├── ModusSpinnerExamples.tsx
│ │ │ ├── ModusSwitchExamples.tsx
│ │ │ ├── ModusTabExamples.tsx
│ │ │ ├── ModusTableExamples.tsx
│ │ │ ├── ModusTextInputExamples.tsx
│ │ │ ├── ModusTimePickerExamples.tsx
│ │ │ ├── ModusToastExamples.tsx
│ │ │ ├── ModusTooltipExamples.tsx
│ │ │ └── index.tsx
│ │ ├── index.css
│ │ ├── index.tsx
│ │ ├── logo.svg
│ │ ├── react-app-env.d.ts
│ │ ├── reportWebVitals.ts
│ │ └── setupTests.ts
│ └── tsconfig.json
└── test-web-components
│ ├── .gitignore
│ ├── .npmrc
│ ├── README.md
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ └── index.html
│ ├── src
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── intrinsic.d.ts
│ ├── logo.svg
│ ├── react-app-env.d.ts
│ ├── reportWebVitals.ts
│ └── setupTests.ts
│ └── tsconfig.json
├── sonar-project.properties
├── stencil-workspace
├── .eslintignore
├── .eslintrc.js
├── .nvmrc
├── .stylelintignore
├── README.md
├── angular-value-accessor-bindings.ts
├── generate-icons
│ ├── IconFunctionalComponent.template.ejs
│ ├── ModusIconMap.template.ejs
│ ├── ModusIconUtilities.template.ejs
│ └── generate-icons.ts
├── netlify.toml
├── package-lock.json
├── package.json
├── src
│ ├── components.d.ts
│ ├── components
│ │ ├── modus-accordion-item
│ │ │ ├── modus-accordion-item.e2e.ts
│ │ │ ├── modus-accordion-item.scss
│ │ │ ├── modus-accordion-item.spec.ts
│ │ │ ├── modus-accordion-item.tsx
│ │ │ ├── modus-accordion-item.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-accordion
│ │ │ ├── modus-accordion.e2e.ts
│ │ │ ├── modus-accordion.scss
│ │ │ ├── modus-accordion.tsx
│ │ │ └── readme.md
│ │ ├── modus-action-bar
│ │ │ ├── modus-action-bar.scss
│ │ │ ├── modus-action-bar.tsx
│ │ │ └── readme.md
│ │ ├── modus-alert
│ │ │ ├── modus-alert.e2e.ts
│ │ │ ├── modus-alert.scss
│ │ │ ├── modus-alert.spec.ts
│ │ │ ├── modus-alert.tsx
│ │ │ ├── modus-alert.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-autocomplete
│ │ │ ├── modus-autocomplete.e2e.ts
│ │ │ ├── modus-autocomplete.scss
│ │ │ ├── modus-autocomplete.spec.ts
│ │ │ ├── modus-autocomplete.tsx
│ │ │ ├── modus-autocomplete.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-badge
│ │ │ ├── modus-badge.e2e.ts
│ │ │ ├── modus-badge.scss
│ │ │ ├── modus-badge.spec.ts
│ │ │ ├── modus-badge.tsx
│ │ │ ├── modus-badge.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-breadcrumb
│ │ │ ├── modus-breadcrumb.e2e.ts
│ │ │ ├── modus-breadcrumb.scss
│ │ │ ├── modus-breadcrumb.spec.ts
│ │ │ ├── modus-breadcrumb.tsx
│ │ │ ├── modus-breadcrumb.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-button-group
│ │ │ ├── modus-button-group.constants.ts
│ │ │ ├── modus-button-group.e2e.ts
│ │ │ ├── modus-button-group.models.tsx
│ │ │ ├── modus-button-group.scss
│ │ │ ├── modus-button-group.spec.ts
│ │ │ ├── modus-button-group.tsx
│ │ │ └── readme.md
│ │ ├── modus-button
│ │ │ ├── modus-button.e2e.ts
│ │ │ ├── modus-button.models.ts
│ │ │ ├── modus-button.scss
│ │ │ ├── modus-button.spec.ts
│ │ │ ├── modus-button.tsx
│ │ │ ├── modus-button.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-card
│ │ │ ├── modus-card.e2e.ts
│ │ │ ├── modus-card.scss
│ │ │ ├── modus-card.spec.ts
│ │ │ ├── modus-card.tsx
│ │ │ ├── modus-card.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-checkbox
│ │ │ ├── modus-checkbox.e2e.ts
│ │ │ ├── modus-checkbox.scss
│ │ │ ├── modus-checkbox.spec.tsx
│ │ │ ├── modus-checkbox.tsx
│ │ │ ├── modus-checkbox.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-chip
│ │ │ ├── modus-chip.e2e.ts
│ │ │ ├── modus-chip.scss
│ │ │ ├── modus-chip.spec.ts
│ │ │ ├── modus-chip.tsx
│ │ │ ├── modus-chip.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-content-tree
│ │ │ ├── modus-content-tree-drag-item.tsx
│ │ │ ├── modus-content-tree.constants.tsx
│ │ │ ├── modus-content-tree.e2e.ts
│ │ │ ├── modus-content-tree.spec.tsx
│ │ │ ├── modus-content-tree.types.tsx
│ │ │ ├── modus-tree-view-item.vars.scss
│ │ │ ├── modus-tree-view-item
│ │ │ │ ├── modus-tree-view-item.scss
│ │ │ │ ├── modus-tree-view-item.tsx
│ │ │ │ └── readme.md
│ │ │ ├── modus-tree-view
│ │ │ │ ├── modus-tree-view.scss
│ │ │ │ ├── modus-tree-view.tsx
│ │ │ │ └── readme.md
│ │ │ └── types.tsx
│ │ ├── modus-data-table
│ │ │ ├── modus-data-table.e2e.ts
│ │ │ ├── modus-data-table.models.ts
│ │ │ ├── modus-data-table.scss
│ │ │ ├── modus-data-table.spec.ts
│ │ │ ├── modus-data-table.tsx
│ │ │ ├── modus-data-table.utilities.ts
│ │ │ ├── modus-data-table.vars.scss
│ │ │ ├── parts
│ │ │ │ ├── modus-data-table-cell-badge-part.tsx
│ │ │ │ ├── modus-data-table-cell-link-part.tsx
│ │ │ │ ├── modus-data-table-header.tsx
│ │ │ │ └── modus-data-table-row-action-dropdown.tsx
│ │ │ └── readme.md
│ │ ├── modus-date-input
│ │ │ ├── modus-date-input.e2e.ts
│ │ │ ├── modus-date-input.scss
│ │ │ ├── modus-date-input.spec.tsx
│ │ │ ├── modus-date-input.tsx
│ │ │ ├── modus-date-input.vars.scss
│ │ │ ├── readme.md
│ │ │ └── utils
│ │ │ │ ├── modus-date-input.formatter.tsx
│ │ │ │ ├── modus-date-input.models.tsx
│ │ │ │ └── modus-date-input.tokens.tsx
│ │ ├── modus-date-picker
│ │ │ ├── modus-date-picker.e2e.ts
│ │ │ ├── modus-date-picker.scss
│ │ │ ├── modus-date-picker.spec.tsx
│ │ │ ├── modus-date-picker.tsx
│ │ │ ├── modus-date-picker.vars.scss
│ │ │ ├── readme.md
│ │ │ └── utils
│ │ │ │ ├── modus-date-picker.calendar.tsx
│ │ │ │ └── modus-date-picker.state.tsx
│ │ ├── modus-dropdown
│ │ │ ├── modus-dropdown.e2e.ts
│ │ │ ├── modus-dropdown.scss
│ │ │ ├── modus-dropdown.spec.ts
│ │ │ ├── modus-dropdown.tsx
│ │ │ ├── modus-dropdown.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-file-dropzone
│ │ │ ├── modus-file-dropzone.e2e.ts
│ │ │ ├── modus-file-dropzone.scss
│ │ │ ├── modus-file-dropzone.spec.ts
│ │ │ ├── modus-file-dropzone.tsx
│ │ │ ├── modus-file-dropzone.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-icons
│ │ │ ├── modus-icons.tsx
│ │ │ └── readme.md
│ │ ├── modus-list-item
│ │ │ ├── modus-list-item.e2e.ts
│ │ │ ├── modus-list-item.scss
│ │ │ ├── modus-list-item.spec.ts
│ │ │ ├── modus-list-item.tsx
│ │ │ ├── modus-list-item.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-list
│ │ │ ├── modus-list.scss
│ │ │ ├── modus-list.tsx
│ │ │ ├── modus-list.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-message
│ │ │ ├── modus-message.e2e.ts
│ │ │ ├── modus-message.scss
│ │ │ ├── modus-message.spec.ts
│ │ │ ├── modus-message.tsx
│ │ │ ├── modus-message.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-modal
│ │ │ ├── modal-focus-wrapping.tsx
│ │ │ ├── modus-modal.e2e.ts
│ │ │ ├── modus-modal.scss
│ │ │ ├── modus-modal.spec.ts
│ │ │ ├── modus-modal.tsx
│ │ │ ├── modus-modal.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-navbar
│ │ │ ├── apps-menu
│ │ │ │ ├── modus-navbar-apps-menu.scss
│ │ │ │ ├── modus-navbar-apps-menu.tsx
│ │ │ │ └── readme.md
│ │ │ ├── button-list
│ │ │ │ ├── modus-navbar-button-list.tsx
│ │ │ │ └── readme.md
│ │ │ ├── button-menu
│ │ │ │ ├── modus-navbar-button-menu.scss
│ │ │ │ ├── modus-navbar-button-menu.tsx
│ │ │ │ └── readme.md
│ │ │ ├── dropdown
│ │ │ │ └── modus-navbar-dropdown.tsx
│ │ │ ├── main-menu
│ │ │ │ ├── modus-navbar-main-menu.e2e.ts
│ │ │ │ ├── modus-navbar-main-menu.models.ts
│ │ │ │ ├── modus-navbar-main-menu.scss
│ │ │ │ ├── modus-navbar-main-menu.spec.ts
│ │ │ │ ├── modus-navbar-main-menu.tsx
│ │ │ │ └── readme.md
│ │ │ ├── modus-navbar.e2e.ts
│ │ │ ├── modus-navbar.models.ts
│ │ │ ├── modus-navbar.scss
│ │ │ ├── modus-navbar.spec.ts
│ │ │ ├── modus-navbar.tsx
│ │ │ ├── modus-navbar.vars.scss
│ │ │ ├── notifications-menu
│ │ │ │ ├── modus-navbar-notifications-menu.scss
│ │ │ │ ├── modus-navbar-notifications-menu.tsx
│ │ │ │ └── readme.md
│ │ │ ├── product-logo
│ │ │ │ └── modus-navbar-product-logo.tsx
│ │ │ ├── profile-menu
│ │ │ │ ├── modus-navbar-profile-menu.scss
│ │ │ │ ├── modus-navbar-profile-menu.spec.ts
│ │ │ │ ├── modus-navbar-profile-menu.tsx
│ │ │ │ └── readme.md
│ │ │ ├── readme.md
│ │ │ └── search-overlay
│ │ │ │ ├── modus-navbar-search-overlay.scss
│ │ │ │ ├── modus-navbar-search-overlay.tsx
│ │ │ │ └── readme.md
│ │ ├── modus-number-input
│ │ │ ├── modus-number-input.e2e.ts
│ │ │ ├── modus-number-input.scss
│ │ │ ├── modus-number-input.spec.tsx
│ │ │ ├── modus-number-input.tsx
│ │ │ ├── modus-number-input.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-pagination
│ │ │ ├── enums
│ │ │ │ └── pagination-direction.enum.ts
│ │ │ ├── modus-pagination.e2e.ts
│ │ │ ├── modus-pagination.scss
│ │ │ ├── modus-pagination.spec.ts
│ │ │ ├── modus-pagination.tsx
│ │ │ ├── modus-pagination.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-progress-bar
│ │ │ ├── modus-progress-bar.e2e.ts
│ │ │ ├── modus-progress-bar.scss
│ │ │ ├── modus-progress-bar.spec.ts
│ │ │ ├── modus-progress-bar.tsx
│ │ │ ├── modus-progress-bar.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-radio-group
│ │ │ ├── modus-radio-button.tsx
│ │ │ ├── modus-radio-button.vars.scss
│ │ │ ├── modus-radio-group.e2e.ts
│ │ │ ├── modus-radio-group.scss
│ │ │ ├── modus-radio-group.spec.ts
│ │ │ ├── modus-radio-group.tsx
│ │ │ └── readme.md
│ │ ├── modus-select
│ │ │ ├── modus-select.e2e.ts
│ │ │ ├── modus-select.scss
│ │ │ ├── modus-select.spec.ts
│ │ │ ├── modus-select.tsx
│ │ │ ├── modus-select.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-sentiment-scale
│ │ │ ├── SentimentIconMap.tsx
│ │ │ ├── modus-sentiment-scale.constants.ts
│ │ │ ├── modus-sentiment-scale.e2e.ts
│ │ │ ├── modus-sentiment-scale.models.tsx
│ │ │ ├── modus-sentiment-scale.scss
│ │ │ ├── modus-sentiment-scale.spec.ts
│ │ │ ├── modus-sentiment-scale.tsx
│ │ │ ├── modus-sentiment-scale.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-side-navigation
│ │ │ ├── modus-side-navigation-item
│ │ │ │ ├── modus-side-navigation-item.scss
│ │ │ │ ├── modus-side-navigation-item.tsx
│ │ │ │ ├── modus-side-navigation-item.vars.scss
│ │ │ │ └── readme.md
│ │ │ ├── modus-side-navigation-tree.tsx
│ │ │ ├── modus-side-navigation.e2e.ts
│ │ │ ├── modus-side-navigation.models.tsx
│ │ │ ├── modus-side-navigation.scss
│ │ │ ├── modus-side-navigation.spec.tsx
│ │ │ ├── modus-side-navigation.tsx
│ │ │ ├── modus-side-navigation.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-slider
│ │ │ ├── modus-slider.e2e.ts
│ │ │ ├── modus-slider.scss
│ │ │ ├── modus-slider.spec.ts
│ │ │ ├── modus-slider.tsx
│ │ │ ├── modus-slider.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-spinner
│ │ │ ├── modus-spinner.e2e.ts
│ │ │ ├── modus-spinner.scss
│ │ │ ├── modus-spinner.spec.ts
│ │ │ ├── modus-spinner.tsx
│ │ │ └── readme.md
│ │ ├── modus-switch
│ │ │ ├── modus-switch.e2e.ts
│ │ │ ├── modus-switch.scss
│ │ │ ├── modus-switch.spec.tsx
│ │ │ ├── modus-switch.tsx
│ │ │ ├── modus-switch.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-table
│ │ │ ├── functions
│ │ │ │ ├── sortingFunction.tsx
│ │ │ │ └── sortingFunctions.spec.ts
│ │ │ ├── models
│ │ │ │ ├── column-drag-state.model.ts
│ │ │ │ ├── modus-table.models.ts
│ │ │ │ ├── position.model.ts
│ │ │ │ ├── table-context.models.ts
│ │ │ │ ├── table-row-actions.models.ts
│ │ │ │ └── table-state.model.ts
│ │ │ ├── modus-table.constants.ts
│ │ │ ├── modus-table.core.tsx
│ │ │ ├── modus-table.e2e.ts
│ │ │ ├── modus-table.scss
│ │ │ ├── modus-table.spec.tsx
│ │ │ ├── modus-table.tsx
│ │ │ ├── modus-table.vars.scss
│ │ │ ├── parts
│ │ │ │ ├── cell
│ │ │ │ │ ├── flex-renderer.e2e.ts
│ │ │ │ │ ├── flex-renderer.tsx
│ │ │ │ │ ├── modus-table-cell-badge-element.tsx
│ │ │ │ │ ├── modus-table-cell-editor
│ │ │ │ │ │ ├── modus-table-cell-editor.scss
│ │ │ │ │ │ ├── modus-table-cell-editor.tsx
│ │ │ │ │ │ └── readme.md
│ │ │ │ │ ├── modus-table-cell-expand-icons.tsx
│ │ │ │ │ ├── modus-table-cell-link-element.tsx
│ │ │ │ │ ├── modus-table-cell-main
│ │ │ │ │ │ ├── modus-table-cell-main.tsx
│ │ │ │ │ │ └── readme.md
│ │ │ │ │ ├── modus-table-cell.tsx
│ │ │ │ │ ├── modus-table-custom-cell-element.tsx
│ │ │ │ │ └── readme.md
│ │ │ │ ├── columnHeader
│ │ │ │ │ ├── modus-table-column-drag-item.tsx
│ │ │ │ │ ├── modus-table-column-header-label.tsx
│ │ │ │ │ ├── modus-table-column-header.tsx
│ │ │ │ │ └── modus-table-column-resizing-handler.tsx
│ │ │ │ ├── fillerColumn
│ │ │ │ │ ├── modus-table-filler-column.scss
│ │ │ │ │ ├── modus-table-filler-column.tsx
│ │ │ │ │ └── readme.md
│ │ │ │ ├── modus-table-body.tsx
│ │ │ │ ├── modus-table-footer.tsx
│ │ │ │ ├── modus-table-header.tsx
│ │ │ │ ├── modus-table-pagination.tsx
│ │ │ │ ├── panel
│ │ │ │ │ ├── modus-table-columns-visibility
│ │ │ │ │ │ ├── modus-table-columns-visibility.scss
│ │ │ │ │ │ ├── modus-table-columns-visibility.tsx
│ │ │ │ │ │ └── readme.md
│ │ │ │ │ ├── modus-table-dropdown-menu
│ │ │ │ │ │ ├── modus-table-dropdown-menu.scss
│ │ │ │ │ │ ├── modus-table-dropdown-menu.tsx
│ │ │ │ │ │ └── readme.md
│ │ │ │ │ └── modus-table-toolbar
│ │ │ │ │ │ ├── modus-table-toolbar.scss
│ │ │ │ │ │ ├── modus-table-toolbar.tsx
│ │ │ │ │ │ └── readme.md
│ │ │ │ └── row
│ │ │ │ │ ├── actions
│ │ │ │ │ ├── modus-table-row-actions-cell.tsx
│ │ │ │ │ ├── modus-table-row-actions-menu
│ │ │ │ │ │ ├── modus-table-row-actions-menu.scss
│ │ │ │ │ │ ├── modus-table-row-actions-menu.tsx
│ │ │ │ │ │ └── readme.md
│ │ │ │ │ ├── modus-table-row-actions
│ │ │ │ │ │ ├── modus-table-row-actions.scss
│ │ │ │ │ │ ├── modus-table-row-actions.tsx
│ │ │ │ │ │ └── readme.md
│ │ │ │ │ └── readme.md
│ │ │ │ │ └── selection
│ │ │ │ │ ├── modus-table-cell-checkbox.tsx
│ │ │ │ │ └── modus-table-header-checkbox.tsx
│ │ │ ├── readme.md
│ │ │ └── utilities
│ │ │ │ ├── table-cell-formatter.utility.tsx
│ │ │ │ ├── table-cell-navigation.utility.tsx
│ │ │ │ └── table-header-drag-drop.utility.tsx
│ │ ├── modus-tabs
│ │ │ ├── modus-tabs.e2e.ts
│ │ │ ├── modus-tabs.scss
│ │ │ ├── modus-tabs.spec.ts
│ │ │ ├── modus-tabs.tsx
│ │ │ ├── modus-tabs.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-text-input
│ │ │ ├── modus-text-input.e2e.ts
│ │ │ ├── modus-text-input.scss
│ │ │ ├── modus-text-input.spec.tsx
│ │ │ ├── modus-text-input.tsx
│ │ │ ├── modus-text-input.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-textarea-input
│ │ │ ├── modus-textarea-input.e2e.ts
│ │ │ ├── modus-textarea-input.scss
│ │ │ ├── modus-textarea-input.spec.tsx
│ │ │ ├── modus-textarea-input.tsx
│ │ │ ├── modus-textarea-input.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-time-picker
│ │ │ ├── modus-time-picker.e2e.ts
│ │ │ ├── modus-time-picker.formatter.tsx
│ │ │ ├── modus-time-picker.models.tsx
│ │ │ ├── modus-time-picker.scss
│ │ │ ├── modus-time-picker.spec.tsx
│ │ │ ├── modus-time-picker.tsx
│ │ │ ├── modus-time-picker.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-toast
│ │ │ ├── modus-toast.e2e.ts
│ │ │ ├── modus-toast.scss
│ │ │ ├── modus-toast.spec.ts
│ │ │ ├── modus-toast.tsx
│ │ │ ├── modus-toast.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-toolbar
│ │ │ ├── modus-divider.scss
│ │ │ ├── modus-divider.tsx
│ │ │ ├── modus-toolbar.e2e.ts
│ │ │ ├── modus-toolbar.scss
│ │ │ ├── modus-toolbar.spec.ts
│ │ │ ├── modus-toolbar.tsx
│ │ │ ├── modus-toolbar.vars.scss
│ │ │ └── readme.md
│ │ ├── modus-tooltip
│ │ │ ├── modus-tooltip.e2e.ts
│ │ │ ├── modus-tooltip.models.ts
│ │ │ ├── modus-tooltip.scss
│ │ │ ├── modus-tooltip.spec.ts
│ │ │ ├── modus-tooltip.tsx
│ │ │ ├── modus-tooltip.vars.scss
│ │ │ └── readme.md
│ │ └── modus-utility-panel
│ │ │ ├── modus-utility-panel.e2e.ts
│ │ │ ├── modus-utility-panel.scss
│ │ │ ├── modus-utility-panel.spec.ts
│ │ │ ├── modus-utility-panel.tsx
│ │ │ ├── modus-utility-panel.vars.scss
│ │ │ └── readme.md
│ ├── global
│ │ ├── modus-colors.scss
│ │ ├── modus-functions.scss
│ │ ├── modus-light-theme.scss
│ │ ├── modus-variables.scss
│ │ ├── shared-mixins.scss
│ │ └── themes.scss
│ ├── icons
│ │ ├── generated-icons
│ │ │ └── ABOUT_FOLDER.md
│ │ ├── icon.spec.tsx
│ │ └── svgs
│ │ │ ├── icon-accessibility-circle.tsx
│ │ │ ├── icon-add.tsx
│ │ │ ├── icon-apps.tsx
│ │ │ ├── icon-arrow-down.tsx
│ │ │ ├── icon-arrow-up.tsx
│ │ │ ├── icon-calendar.tsx
│ │ │ ├── icon-cancel.tsx
│ │ │ ├── icon-caret-down.tsx
│ │ │ ├── icon-caret-up.tsx
│ │ │ ├── icon-check-circle.tsx
│ │ │ ├── icon-check.tsx
│ │ │ ├── icon-chevron-double-down.tsx
│ │ │ ├── icon-chevron-double-up.tsx
│ │ │ ├── icon-chevron-down-thick.tsx
│ │ │ ├── icon-chevron-left-thick.tsx
│ │ │ ├── icon-chevron-right-thick.tsx
│ │ │ ├── icon-chevron-up-thick.tsx
│ │ │ ├── icon-close.tsx
│ │ │ ├── icon-delete.tsx
│ │ │ ├── icon-download-line.tsx
│ │ │ ├── icon-error.tsx
│ │ │ ├── icon-export.tsx
│ │ │ ├── icon-file-bar-graph.tsx
│ │ │ ├── icon-help.tsx
│ │ │ ├── icon-history.tsx
│ │ │ ├── icon-horizontal-ellipsis.tsx
│ │ │ ├── icon-indeterminate.tsx
│ │ │ ├── icon-info.tsx
│ │ │ ├── icon-menu.tsx
│ │ │ ├── icon-moon.tsx
│ │ │ ├── icon-notifications.tsx
│ │ │ ├── icon-pencil.tsx
│ │ │ ├── icon-pin.tsx
│ │ │ ├── icon-refresh.tsx
│ │ │ ├── icon-remove.tsx
│ │ │ ├── icon-search.tsx
│ │ │ ├── icon-shield.tsx
│ │ │ ├── icon-smiley-dissatisfied-outline.tsx
│ │ │ ├── icon-smiley-dissatisfied.tsx
│ │ │ ├── icon-smiley-neutral-outline.tsx
│ │ │ ├── icon-smiley-neutral.tsx
│ │ │ ├── icon-smiley-satisfied-outline.tsx
│ │ │ ├── icon-smiley-satisfied.tsx
│ │ │ ├── icon-smiley-somewhat-dissatisfied-outline.tsx
│ │ │ ├── icon-smiley-somewhat-dissatisfied.tsx
│ │ │ ├── icon-smiley-somewhat-satisfied-outline.tsx
│ │ │ ├── icon-smiley-somewhat-satisfied.tsx
│ │ │ ├── icon-sort-a-z.tsx
│ │ │ ├── icon-sort-z-a.tsx
│ │ │ ├── icon-sun.tsx
│ │ │ ├── icon-thumbs-down-outlined.tsx
│ │ │ ├── icon-thumbs-down.tsx
│ │ │ ├── icon-thumbs-up-outline.tsx
│ │ │ ├── icon-thumbs-up.tsx
│ │ │ ├── icon-timer-countdown.tsx
│ │ │ ├── icon-triangle-down.tsx
│ │ │ ├── icon-triangle-left.tsx
│ │ │ ├── icon-tune.tsx
│ │ │ ├── icon-upload-cloud.tsx
│ │ │ ├── icon-visibility-off.tsx
│ │ │ ├── icon-visibility.tsx
│ │ │ └── icon-warning.tsx
│ ├── index.html
│ ├── index.ts
│ ├── interfaces.d.ts
│ ├── lang
│ │ └── translations.ts
│ ├── sample.html
│ └── utils
│ │ ├── utils.spec.ts
│ │ └── utils.ts
├── stencil.config.ts
├── storybook
│ ├── .npmrc
│ ├── .nvmrc
│ ├── .storybook
│ │ ├── main.js
│ │ ├── manager-head.html
│ │ ├── manager.js
│ │ ├── preview-body.html
│ │ ├── preview-head.html
│ │ ├── preview.js
│ │ └── your-theme.js
│ ├── package-lock.json
│ ├── package.json
│ ├── postcss.config.js
│ ├── public
│ │ ├── 404
│ │ │ └── index.html
│ │ ├── 023-student.svg
│ │ ├── 045-student.svg
│ │ ├── favicon.ico
│ │ ├── favicon.svg
│ │ ├── github.svg
│ │ ├── preview.png
│ │ ├── robots.txt
│ │ ├── staticwebapp.config.json
│ │ ├── storybook-styles.css
│ │ └── trimble-logo.svg
│ └── stories
│ │ ├── components
│ │ ├── modus-accordion
│ │ │ ├── modus-accordion-storybook-docs.mdx
│ │ │ └── modus-accordion.stories.tsx
│ │ ├── modus-alert
│ │ │ ├── modus-alert-storybook-docs.mdx
│ │ │ └── modus-alert.stories.tsx
│ │ ├── modus-autocomplete
│ │ │ ├── modus-autocomplete-storybook-docs.mdx
│ │ │ └── modus-autocomplete.stories.tsx
│ │ ├── modus-badge
│ │ │ ├── modus-badge-storybook-docs.mdx
│ │ │ └── modus-badge.stories.tsx
│ │ ├── modus-breadcrumb
│ │ │ ├── modus-breadcrumb-storybook-docs.mdx
│ │ │ └── modus-breadcrumb.stories.tsx
│ │ ├── modus-button-group
│ │ │ ├── modus-button-group-storybook-docs.mdx
│ │ │ └── modus-button-group.stories.tsx
│ │ ├── modus-button
│ │ │ ├── modus-button-storybook-docs.mdx
│ │ │ └── modus-button.stories.tsx
│ │ ├── modus-card
│ │ │ ├── modus-card-storybook-docs.mdx
│ │ │ └── modus-card.stories.tsx
│ │ ├── modus-checkbox
│ │ │ ├── modus-checkbox-storybook-docs.mdx
│ │ │ └── modus-checkbox.stories.tsx
│ │ ├── modus-chip
│ │ │ ├── modus-chip-storybook-docs.mdx
│ │ │ └── modus-chip.stories.tsx
│ │ ├── modus-content-tree
│ │ │ ├── modus-content-tree-storybook-docs.mdx
│ │ │ └── modus-content-tree.stories.tsx
│ │ ├── modus-data-table
│ │ │ ├── modus-data-table-storybook-docs.mdx
│ │ │ └── modus-data-table.stories.tsx
│ │ ├── modus-date-picker
│ │ │ ├── modus-date-picker-storybook-docs.mdx
│ │ │ └── modus-date-picker.stories.tsx
│ │ ├── modus-dropdown
│ │ │ ├── modus-dropdown-storybook-docs.mdx
│ │ │ └── modus-dropdown.stories.tsx
│ │ ├── modus-file-dropzone
│ │ │ ├── modus-file-dropzone-storybook-docs.mdx
│ │ │ └── modus-file-dropzone.stories.tsx
│ │ ├── modus-icons
│ │ │ ├── modus-icons-storybook-docs.mdx
│ │ │ └── modus-icons.stories.tsx
│ │ ├── modus-list
│ │ │ ├── modus-list-storybook-docs.mdx
│ │ │ └── modus-list.stories.tsx
│ │ ├── modus-message
│ │ │ ├── modus-message-storybook-docs.mdx
│ │ │ └── modus-message.stories.tsx
│ │ ├── modus-modal
│ │ │ ├── modus-modal-storybook-docs.mdx
│ │ │ └── modus-modal.stories.tsx
│ │ ├── modus-navbar
│ │ │ ├── modus-navbar-storybook-docs.mdx
│ │ │ └── modus-navbar.stories.tsx
│ │ ├── modus-number-input
│ │ │ ├── modus-number-input-storybook-docs.mdx
│ │ │ └── modus-number-input.stories.tsx
│ │ ├── modus-pagination
│ │ │ ├── modus-pagination-storybook-docs.mdx
│ │ │ └── modus-pagination.stories.tsx
│ │ ├── modus-progress-bar
│ │ │ ├── modus-progress-bar-storybook-docs.mdx
│ │ │ └── modus-progress-bar.stories.tsx
│ │ ├── modus-radio-group
│ │ │ ├── modus-radio-group-storybook-docs.mdx
│ │ │ └── modus-radio-group.stories.tsx
│ │ ├── modus-select
│ │ │ ├── modus-select-storybook-docs.mdx
│ │ │ └── modus-select.stories.tsx
│ │ ├── modus-sentiment-scale
│ │ │ ├── modus-sentiment-scale-storybook-docs.mdx
│ │ │ └── modus-sentiment-scale.stories.tsx
│ │ ├── modus-side-navigation
│ │ │ ├── modus-side-navigation-storybook-docs.mdx
│ │ │ └── modus-side-navigation.stories.tsx
│ │ ├── modus-slider
│ │ │ ├── modus-slider-storybook-docs.mdx
│ │ │ └── modus-slider.stories.tsx
│ │ ├── modus-spinner
│ │ │ ├── modus-spinner-storybook-docs.mdx
│ │ │ └── modus-spinner.stories.tsx
│ │ ├── modus-switch
│ │ │ ├── modus-switch-storybook-docs.mdx
│ │ │ └── modus-switch.stories.tsx
│ │ ├── modus-table
│ │ │ ├── modus-table-storybook-docs.mdx
│ │ │ └── modus-table.stories.tsx
│ │ ├── modus-tabs
│ │ │ ├── modus-tabs-storybook-docs.mdx
│ │ │ └── modus-tabs.stories.tsx
│ │ ├── modus-text-input
│ │ │ ├── modus-text-input-storybook-docs.mdx
│ │ │ └── modus-text-input.stories.tsx
│ │ ├── modus-textarea-input
│ │ │ ├── modus-textarea-input-storybook-docs.mdx
│ │ │ └── modus-textarea-input.stories.tsx
│ │ ├── modus-time-picker
│ │ │ ├── modus-time-picker-storybook-docs.mdx
│ │ │ └── modus-time-picker.stories.tsx
│ │ ├── modus-toast
│ │ │ ├── modus-toast-storybook-docs.mdx
│ │ │ └── modus-toast.stories.tsx
│ │ ├── modus-toolbar
│ │ │ ├── modus-toolbar-storybook-docs.mdx
│ │ │ └── modus-toolbar.stories.tsx
│ │ ├── modus-tooltip
│ │ │ ├── modus-tooltip-storybook-docs.mdx
│ │ │ └── modus-tooltip.stories.tsx
│ │ └── modus-utility-panel
│ │ │ ├── modus-utility-panel-storybook-docs.mdx
│ │ │ └── modus-utility-panel.stories.tsx
│ │ ├── framework-integrations
│ │ ├── angular.mdx
│ │ └── react.mdx
│ │ └── introduction
│ │ ├── accessibility.mdx
│ │ ├── contributing.mdx
│ │ ├── getting-started.mdx
│ │ └── welcome.mdx
├── stylelint.config.mjs
└── tsconfig.json
└── wss-unified-agent.config
/.editorconfig:
--------------------------------------------------------------------------------
1 | # https://editorconfig.org
2 |
3 | root = true
4 |
5 | [*]
6 | charset = utf-8
7 | indent_style = space
8 | indent_size = 2
9 | end_of_line = lf
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 |
13 | [*.md]
14 | insert_final_newline = false
15 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Enforce Unix newlines
2 | * text=auto eol=lf
3 |
--------------------------------------------------------------------------------
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | # CODEOWNERS
2 | # https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners
3 |
4 | ## Folders
5 |
6 | * @trimble-oss/MWC-Maintainers
7 |
8 | ## File Types
9 |
10 | .cspell.json @coliff
11 | *.css @coliff
12 | *.html @coliff
13 | *.scss @coliff
14 | staticwebapp.config.json @coliff
15 |
--------------------------------------------------------------------------------
/.github/copilot-instructions.md:
--------------------------------------------------------------------------------
1 | # Copilot Instructions
2 |
3 | - This project is for a web components library, Modus Web Components.
4 | - The library is built with StencilJS.
5 | - The site is built with Storybook 8.
6 | - We use GitHub for tracking issues/bugs.
7 | - All code is formatted with Prettier.
8 | - Ensure all code passes linting and tests before submitting a pull request.
9 | - Node v18 or later is required.
10 |
--------------------------------------------------------------------------------
/.github/issue-labeler.yml:
--------------------------------------------------------------------------------
1 | # Add 'external-request' label to any issue that gets opened by someone outside the organization
2 | external-request:
3 | - '/.*/'
4 |
--------------------------------------------------------------------------------
/.github/release-drafter.yml:
--------------------------------------------------------------------------------
1 | name-template: 'v$NEXT_PATCH_VERSION 🌈'
2 | tag-template: 'v$NEXT_PATCH_VERSION'
3 | exclude-labels:
4 | - 'skip-changelog'
5 | categories:
6 | - title: '❗ Breaking Changes'
7 | labels:
8 | - 'breaking-change'
9 | - title: '🚀 Features'
10 | labels:
11 | - 'new-feature'
12 | - 'feature'
13 | - 'enhancement'
14 | - title: '🐛 Bug fixes'
15 | labels:
16 | - 'fix'
17 | - 'bugfix'
18 | - 'bug'
19 | - title: '📖 Docs'
20 | labels:
21 | - 'docs'
22 | - title: '📦 Dependencies'
23 | labels:
24 | - 'dependencies'
25 | - title: '🧰 Maintenance'
26 | label: 'chore'
27 | change-template: '- #$NUMBER: $TITLE (@$AUTHOR)'
28 | template: |
29 | ## Changes
30 |
31 | $CHANGES
32 |
--------------------------------------------------------------------------------
/.github/workflows/add-issues-to-modus-project.yml:
--------------------------------------------------------------------------------
1 | name: Add Issues to Modus project
2 |
3 | on:
4 | issues:
5 | types:
6 | - opened
7 |
8 | jobs:
9 | add-to-project:
10 | name: Add issue to project
11 | runs-on: ubuntu-latest
12 | if: github.repository == 'trimble-oss/modus-web-components'
13 | steps:
14 | - uses: actions/add-to-project@main
15 | with:
16 | project-url: https://github.com/orgs/trimble-oss/projects/16
17 | github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}
18 |
--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
1 | name: Lint, build, and test
2 | on:
3 | push:
4 | branches: [main]
5 | pull_request:
6 | branches: [main]
7 | permissions:
8 | contents: read
9 |
10 | jobs:
11 | build:
12 | runs-on: ubuntu-22.04
13 | defaults:
14 | run:
15 | working-directory: ./stencil-workspace
16 | steps:
17 | - name: Checkout
18 | uses: actions/checkout@v4
19 | - name: Setup Node.js environment
20 | uses: actions/setup-node@v4
21 | with:
22 | node-version: '18.x'
23 | - name: Full Build
24 | run: npm run full
25 |
--------------------------------------------------------------------------------
/.github/workflows/dependency-review.yml:
--------------------------------------------------------------------------------
1 | name: 'Dependency Review'
2 | on: [pull_request]
3 |
4 | permissions:
5 | contents: read
6 |
7 | jobs:
8 | dependency-review:
9 | runs-on: ubuntu-latest
10 | if: ${{ github.actor = 'dependabot[bot]' }}
11 | steps:
12 | - name: 'Checkout Repository'
13 | uses: actions/checkout@v4
14 |
15 | - name: 'Dependency Review'
16 | uses: actions/dependency-review-action@v4
17 | with:
18 | show-openssf-scorecard: false
19 |
--------------------------------------------------------------------------------
/.github/workflows/labeler.yml:
--------------------------------------------------------------------------------
1 | name: 'Issue Labeler'
2 | on:
3 | issues:
4 | types: [opened, edited]
5 |
6 | permissions:
7 | issues: write
8 | contents: read
9 |
10 | jobs:
11 | triage:
12 | runs-on: ubuntu-latest
13 | if: ${{ github.actor != 'coliff' && github.actor != 'egunther39' && github.actor != 'ElishaSamPeterPrabhu' && github.actor != 'HarshithaNous' && github.actor != 'mitch-trimble' && github.actor != 'msankaran0712' && github.actor != 'prashanth-offcl' && github.actor != 'prashanthr6383' }}
14 | steps:
15 | - uses: github/issue-labeler@v3.4
16 | with:
17 | configuration-path: .github/issue-labeler.yml
18 | enable-versioned-regex: 0
19 | repo-token: '${{ secrets.GITHUB_TOKEN }}'
20 |
--------------------------------------------------------------------------------
/.github/workflows/release-notes.yml:
--------------------------------------------------------------------------------
1 | name: Release notes
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 | workflow_dispatch:
8 |
9 | permissions:
10 | contents: read
11 |
12 | jobs:
13 | update_release_draft:
14 | permissions:
15 | # allow release-drafter/release-drafter to create GitHub releases and add labels to PRs
16 | contents: write
17 | pull-requests: write
18 | runs-on: ubuntu-latest
19 | if: github.repository == 'trimble-oss/modus-web-components'
20 |
21 | steps:
22 | - uses: release-drafter/release-drafter@v6
23 | env:
24 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
25 |
--------------------------------------------------------------------------------
/.github/workflows/spellcheck.yml:
--------------------------------------------------------------------------------
1 | name: 'Check spelling'
2 | on:
3 | push:
4 | branches: [main]
5 | pull_request:
6 | branches: [main]
7 |
8 | permissions:
9 | contents: read
10 |
11 | jobs:
12 | spellcheck:
13 | runs-on: ubuntu-latest
14 | if: ${{ github.actor != 'dependabot[bot]' }}
15 | steps:
16 | - uses: actions/checkout@v4
17 | - uses: streetsidesoftware/cspell-action@v7
18 | with:
19 | check_dot_files: false
20 | incremental_files_only: true
21 | inline: warning
22 | strict: false
23 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | cache/
2 | dist/
3 | react-workspace/test-react-v17/build/
4 | react-workspace/test-react-v18/build/
5 | www/
6 | loader/
7 |
8 | *~
9 | *.sw[mnpcod]
10 | *.log
11 | *.lock
12 | *.tmp
13 | *.tmp.*
14 | log.txt
15 | *.sublime-project
16 | *.sublime-workspace
17 |
18 | .stencil/
19 | .idea/
20 | .vs/
21 | .sass-cache/
22 | .versions/
23 | node_modules/
24 | $RECYCLE.BIN/
25 |
26 | .DS_Store
27 | Thumbs.db
28 | UserInterfaceState.xcuserstate
29 | .env
30 |
31 | **/stencil-generated/**
32 |
33 | stencil-workspace/generate-icons/generate-icons.js
34 | stencil-workspace/src/icons/generated-icons/*.tsx
35 | stencil-workspace/src/icons/ModusIconMap.tsx
36 | stencil-workspace/src/icons/ModusIconUtilities.ts
37 |
--------------------------------------------------------------------------------
/.hintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["development"],
3 | "hints": {
4 | "compat-api/css": "off",
5 | "typescript-config/consistent-casing": "off"
6 | },
7 | "ignoredUrls": [
8 | {
9 | "domain": "^https?://.*\\.google-analytics\\.com/.*",
10 | "hints": ["*"]
11 | },
12 | {
13 | "domain": "^https?://fonts\\.googleapis\\.com/.*",
14 | "hints": ["*"]
15 | }
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/.htmlhintrc:
--------------------------------------------------------------------------------
1 | {
2 | "alt-require": true,
3 | "attr-lowercase": false,
4 | "attr-no-duplication": true,
5 | "attr-unsafe-chars": true,
6 | "attr-value-not-empty": false,
7 | "doctype-first": false,
8 | "doctype-html5": true,
9 | "head-script-disabled": false,
10 | "href-abs-or-rel": false,
11 | "html-lang-require": true,
12 | "id-class-ad-disabled": true,
13 | "id-class-value": false,
14 | "id-unique": true,
15 | "inline-script-disabled": false,
16 | "inline-style-disabled": false,
17 | "spec-char-escape": false,
18 | "src-not-empty": true,
19 | "style-disabled": false,
20 | "tag-self-close": false,
21 | "tag-pair": false,
22 | "tagname-lowercase": true,
23 | "title-require": true
24 | }
25 |
--------------------------------------------------------------------------------
/.markdownlint.json:
--------------------------------------------------------------------------------
1 | {
2 | "MD012": false,
3 | "MD013": false,
4 | "MD024": false,
5 | "MD033": false,
6 | "MD041": false
7 | }
8 |
--------------------------------------------------------------------------------
/.markdownlintignore:
--------------------------------------------------------------------------------
1 | /node_modules/*
2 |
3 | CODEOWNERS
4 | LICENSE
5 | robots.txt
6 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | lockfile-version = "3"
2 | package-lock = false
3 | registry = https://registry.npmjs.org/
4 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | *.min.*
2 |
3 | dist/*
4 | stencil-workspace/src/icons/generated-icons/*
5 | www/*
6 |
7 | stencil-workspace/**/readme.md
8 | stencil-workspace/src/components.d.ts
9 |
--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "arrowParens": "always",
3 | "bracketSameLine": true,
4 | "bracketSpacing": true,
5 | "jsxSingleQuote": false,
6 | "printWidth": 125,
7 | "singleQuote": true,
8 | "trailingComma": "es5"
9 | }
10 |
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": [
3 | "dbaeumer.vscode-eslint",
4 | "EditorConfig.EditorConfig",
5 | "esbenp.prettier-vscode",
6 | "streetsidesoftware.code-spell-checker",
7 | "stylelint.vscode-stylelint"
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | The release notes can be viewed on the [GitHub Releases](https://github.com/trimble-oss/modus-web-components/releases) page.
4 |
--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 | # Security Policy
2 |
3 | ## Reporting a Vulnerability
4 |
5 | Security issues and bugs should be reported privately, via email, to [cybersecurity@trimble.com](mailto:cybersecurity@trimble.com).
6 |
7 | If you do not receive a response within 24 hours, please follow up via email to ensure we received your original message.
8 |
9 | Please do not open issues for anything you think might have a security implication.
10 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/.npmrc:
--------------------------------------------------------------------------------
1 | lockfile-version = "2"
2 | registry = 'https://registry.npmjs.org/'
3 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/README.md:
--------------------------------------------------------------------------------
1 | # AngularWorkspace
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.
4 |
5 | This Angular Project is a utility wrapper to help build the `@trimble-oss/modus-angular-components` library.
6 |
7 | All components in this repository are auto generated by the StencilJS library.
8 |
9 | To build a local copy of these components you can run:
10 |
11 | `npx ng run @trimble-oss/modus-angular-components:build:production`
12 |
13 | This can be consumed in a local angular application using npm link
14 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/test-harness/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
Modus Angular Components Test Harness
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/test-harness/src/app/app.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/angular-workspace/ng16/projects/test-harness/src/app/app.component.scss
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/test-harness/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 = 'test-harness';
10 |
11 | onValueChange() {
12 | console.log('Value Changed');
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/test-harness/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 | import { ModusAngularComponentsModule } from '../../../trimble-oss/modus-angular-components/src/lib/modus-angular-components.module';
6 |
7 | @NgModule({
8 | declarations: [AppComponent],
9 | imports: [BrowserModule, ModusAngularComponentsModule],
10 | providers: [],
11 | bootstrap: [AppComponent],
12 | })
13 | export class AppModule {}
14 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/test-harness/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/angular-workspace/ng16/projects/test-harness/src/assets/.gitkeep
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/test-harness/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true,
3 | };
4 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/test-harness/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/ng16/projects/test-harness/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/angular-workspace/ng16/projects/test-harness/src/favicon.ico
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/test-harness/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | TestHarness
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/test-harness/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 | import { defineCustomElements } from '@trimble-oss/modus-web-components/loader';
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic()
12 | .bootstrapModule(AppModule)
13 | .catch((err) => console.error(err));
14 |
15 | defineCustomElements();
16 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/test-harness/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/test-harness/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
6 |
7 | // First, initialize the Angular testing environment.
8 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
9 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/test-harness/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../out-tsc/app",
5 | "types": []
6 | },
7 | "files": [
8 | "src/main.ts",
9 | "src/polyfills.ts"
10 | ],
11 | "include": [
12 | "src/**/*.d.ts"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/test-harness/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../out-tsc/spec",
5 | "types": [
6 | "jasmine"
7 | ]
8 | },
9 | "files": [
10 | "src/test.ts",
11 | "src/polyfills.ts"
12 | ],
13 | "include": [
14 | "src/**/*.spec.ts",
15 | "src/**/*.d.ts"
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # For the full list of supported browsers by the Angular framework, please see:
6 | # https://angular.io/guide/browser-support
7 |
8 | # You can see what browsers were selected by your queries by running:
9 | # npx browserslist
10 |
11 | >1%
12 | last 3 Chrome versions
13 | last 2 Firefox versions
14 | last 2 Edge major versions
15 | last 3 Safari major versions
16 | last 3 iOS major versions
17 | last 3 ChromeAndroid versions
18 | Firefox ESR
19 | not dead
20 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/.npmrc:
--------------------------------------------------------------------------------
1 | lockfile-version = "2"
2 | registry = https://registry.npmjs.org/
3 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
3 | "dest": "../../../dist/trimble-oss/modus-angular-components",
4 | "lib": {
5 | "entryFile": "src/public-api.ts"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@trimble-oss/modus-angular-components",
3 | "version": "1.8.0-ng16",
4 | "license": "MIT",
5 | "description": "Trimble Modus Angular Components Library",
6 | "homepage": "https://modus-web-components.trimble.com/",
7 | "bugs": {
8 | "url": "https://github.com/trimble-oss/modus-web-components/issues/"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/trimble-oss/modus-web-components.git"
13 | },
14 | "peerDependencies": {
15 | "@angular/common": "^16.1.7",
16 | "@angular/core": "^16.1.7",
17 | "@trimble-oss/modus-web-components": "1.8.0"
18 | },
19 | "dependencies": {
20 | "tslib": "^2.5.3"
21 | },
22 | "engines": {
23 | "node": ">=16.14.0"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/src/lib/modus-angular-components.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { DIRECTIVES } from './stencil-generated';
3 |
4 | @NgModule({
5 | declarations: [...DIRECTIVES],
6 | imports: [],
7 | exports: [...DIRECTIVES],
8 | })
9 | export class ModusAngularComponentsModule {}
10 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/src/public-api.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Public API Surface of modus-angular-components
3 | */
4 |
5 | export * from './lib/modus-angular-components.module';
6 | export * from './lib/stencil-generated/components';
7 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js';
4 | import 'zone.js/testing';
5 | import { getTestBed } from '@angular/core/testing';
6 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
7 |
8 | // First, initialize the Angular testing environment.
9 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
10 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../out-tsc/lib",
5 | "declaration": true,
6 | "declarationMap": true,
7 | "inlineSources": true,
8 | "skipLibCheck": true,
9 | "types": []
10 | },
11 | "exclude": [
12 | "src/test.ts",
13 | "**/*.spec.ts"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/tsconfig.lib.prod.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.lib.json",
3 | "compilerOptions": {
4 | "declarationMap": false
5 | },
6 | "angularCompilerOptions": {
7 | "compilationMode": "partial"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/angular-workspace/ng16/projects/trimble-oss/modus-angular-components/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../out-tsc/spec",
5 | "types": [
6 | "jasmine"
7 | ]
8 | },
9 | "files": [
10 | "src/test.ts"
11 | ],
12 | "include": [
13 | "**/*.spec.ts",
14 | "**/*.d.ts"
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/.npmrc:
--------------------------------------------------------------------------------
1 | lockfile-version = "3"
2 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/README.md:
--------------------------------------------------------------------------------
1 | # AngularWorkspace
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.
4 |
5 | This Angular Project is a utility wrapper to help build the `@trimble-oss/modus-angular-components` library.
6 |
7 | All components in this repository are auto generated by the StencilJS library.
8 |
9 | To build a local copy of these components you can run:
10 |
11 | `npx ng run @trimble-oss/modus-angular-components:build:production`
12 |
13 | This can be consumed in a local angular application using npm link
14 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/test-harness/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | Modus Angular Components Test Harness
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/test-harness/src/app/app.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/angular-workspace/ng17/projects/test-harness/src/app/app.component.scss
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/test-harness/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 = 'test-harness';
10 |
11 | onValueChange() {
12 | console.log('Value Changed');
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/test-harness/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 | import { ModusAngularComponentsModule } from '../../../trimble-oss/modus-angular-components/src/lib/modus-angular-components.module';
6 |
7 | @NgModule({
8 | declarations: [AppComponent],
9 | imports: [BrowserModule, ModusAngularComponentsModule],
10 | providers: [],
11 | bootstrap: [AppComponent],
12 | })
13 | export class AppModule {}
14 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/test-harness/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/angular-workspace/ng17/projects/test-harness/src/assets/.gitkeep
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/test-harness/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true,
3 | };
4 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/test-harness/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/ng17/projects/test-harness/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/angular-workspace/ng17/projects/test-harness/src/favicon.ico
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/test-harness/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | TestHarness
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/test-harness/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 | import { defineCustomElements } from '@trimble-oss/modus-web-components/loader';
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic()
12 | .bootstrapModule(AppModule)
13 | .catch((err) => console.error(err));
14 |
15 | defineCustomElements();
16 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/test-harness/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/test-harness/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
6 |
7 | // First, initialize the Angular testing environment.
8 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
9 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/test-harness/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../out-tsc/app",
5 | "types": []
6 | },
7 | "files": [
8 | "src/main.ts",
9 | "src/polyfills.ts"
10 | ],
11 | "include": [
12 | "src/**/*.d.ts"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/test-harness/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../out-tsc/spec",
5 | "types": [
6 | "jasmine"
7 | ]
8 | },
9 | "files": [
10 | "src/test.ts",
11 | "src/polyfills.ts"
12 | ],
13 | "include": [
14 | "src/**/*.spec.ts",
15 | "src/**/*.d.ts"
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # For the full list of supported browsers by the Angular framework, please see:
6 | # https://angular.io/guide/browser-support
7 |
8 | # You can see what browsers were selected by your queries by running:
9 | # npx browserslist
10 |
11 | >1%
12 | last 3 Chrome versions
13 | last 2 Firefox versions
14 | last 2 Edge major versions
15 | last 3 Safari major versions
16 | last 3 iOS major versions
17 | last 3 ChromeAndroid versions
18 | Firefox ESR
19 | not dead
20 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/.npmrc:
--------------------------------------------------------------------------------
1 | lockfile-version = "2"
2 | registry = https://registry.npmjs.org/
3 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
3 | "dest": "../../../dist/trimble-oss/modus-angular-components",
4 | "lib": {
5 | "entryFile": "src/public-api.ts"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@trimble-oss/modus-angular-components",
3 | "version": "1.8.0-ng17",
4 | "license": "MIT",
5 | "description": "Trimble Modus Angular Components Library",
6 | "homepage": "https://modus-web-components.trimble.com/",
7 | "bugs": {
8 | "url": "https://github.com/trimble-oss/modus-web-components/issues/"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/trimble-oss/modus-web-components.git"
13 | },
14 | "peerDependencies": {
15 | "@angular/common": "^17.2.2",
16 | "@angular/core": "^17.2.2",
17 | "@trimble-oss/modus-web-components": "1.8.0"
18 | },
19 | "dependencies": {
20 | "tslib": "^2.5.3"
21 | },
22 | "engines": {
23 | "node": ">=18.14.0"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/src/lib/modus-angular-components.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { DIRECTIVES } from './stencil-generated';
3 |
4 | @NgModule({
5 | declarations: [...DIRECTIVES],
6 | imports: [],
7 | exports: [...DIRECTIVES],
8 | })
9 | export class ModusAngularComponentsModule {}
10 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/src/public-api.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Public API Surface of modus-angular-components
3 | */
4 |
5 | export * from './lib/modus-angular-components.module';
6 | export * from './lib/stencil-generated/components';
7 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js';
4 | import 'zone.js/testing';
5 | import { getTestBed } from '@angular/core/testing';
6 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
7 |
8 | // First, initialize the Angular testing environment.
9 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
10 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../out-tsc/lib",
5 | "declaration": true,
6 | "declarationMap": true,
7 | "inlineSources": true,
8 | "skipLibCheck": true,
9 | "types": []
10 | },
11 | "exclude": [
12 | "src/test.ts",
13 | "**/*.spec.ts"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/tsconfig.lib.prod.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.lib.json",
3 | "compilerOptions": {
4 | "declarationMap": false
5 | },
6 | "angularCompilerOptions": {
7 | "compilationMode": "partial"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/angular-workspace/ng17/projects/trimble-oss/modus-angular-components/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../../out-tsc/spec",
5 | "types": [
6 | "jasmine"
7 | ]
8 | },
9 | "files": [
10 | "src/test.ts"
11 | ],
12 | "include": [
13 | "**/*.spec.ts",
14 | "**/*.d.ts"
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/README.md:
--------------------------------------------------------------------------------
1 | # AngularWorkspace
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.1.2.
4 |
5 | This Angular Project is a utility wrapper to help build the `@trimble-oss/modus-angular-components` library.
6 |
7 | All components in this repository are auto generated by the StencilJS library.
8 |
9 | To build a local copy of these components you can run:
10 |
11 | `npx ng run @trimble-oss/modus-angular-components:build:production`
12 |
13 | This can be consumed in a local angular application using npm link
14 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/test-harness/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/angular-workspace/ng18/projects/test-harness/public/favicon.ico
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/test-harness/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | Modus Angular Components Test Harness
2 |
3 |
8 |
9 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/test-harness/src/app/app.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/angular-workspace/ng18/projects/test-harness/src/app/app.component.scss
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/test-harness/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ModusAngularComponentsModule } from '../../../trimble-oss/modus-angular-components/src/lib/modus-angular-components.module';
3 |
4 | @Component({
5 | selector: 'app-root',
6 | standalone: true,
7 | imports: [ModusAngularComponentsModule],
8 | templateUrl: './app.component.html',
9 | styleUrl: './app.component.scss'
10 | })
11 | export class AppComponent {
12 | title = 'test-harness';
13 |
14 | onValueChange() {
15 | console.log('Value Changed');
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/test-harness/src/app/app.config.ts:
--------------------------------------------------------------------------------
1 | import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
2 | import { provideRouter } from '@angular/router';
3 |
4 | import { routes } from './app.routes';
5 |
6 | export const appConfig: ApplicationConfig = {
7 | providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
8 | };
9 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/test-harness/src/app/app.routes.ts:
--------------------------------------------------------------------------------
1 | import { Routes } from '@angular/router';
2 |
3 | export const routes: Routes = [];
4 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/test-harness/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | TestHarness
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/test-harness/src/main.ts:
--------------------------------------------------------------------------------
1 | import { bootstrapApplication } from '@angular/platform-browser';
2 | import { defineCustomElements } from '@trimble-oss/modus-web-components/loader';
3 | import { AppComponent } from './app/app.component';
4 | import { appConfig } from './app/app.config';
5 |
6 | bootstrapApplication(AppComponent, appConfig)
7 | .catch((err) => console.error(err));
8 |
9 | defineCustomElements();
10 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/test-harness/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/test-harness/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "../../tsconfig.json",
5 | "compilerOptions": {
6 | "outDir": "../../out-tsc/app",
7 | "types": []
8 | },
9 | "files": ["src/main.ts"],
10 | "include": ["src/**/*.d.ts"]
11 | }
12 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/test-harness/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "../../tsconfig.json",
5 | "compilerOptions": {
6 | "outDir": "../../out-tsc/spec",
7 | "types": ["jasmine"]
8 | },
9 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/trimble-oss/modus-angular-components/.npmrc:
--------------------------------------------------------------------------------
1 | lockfile-version = "2"
2 | registry = https://registry.npmjs.org/
3 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/trimble-oss/modus-angular-components/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
3 | "dest": "../../../dist/trimble-oss/modus-angular-components",
4 | "lib": {
5 | "entryFile": "src/public-api.ts"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/trimble-oss/modus-angular-components/src/lib/modus-angular-components.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { DIRECTIVES } from './stencil-generated';
3 |
4 | @NgModule({
5 | declarations: [...DIRECTIVES],
6 | exports: [...DIRECTIVES],
7 | })
8 | export class ModusAngularComponentsModule { }
9 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/trimble-oss/modus-angular-components/src/public-api.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Public API Surface of modus-angular-components
3 | */
4 |
5 | export * from './lib/modus-angular-components.module';
6 | export * from './lib/stencil-generated/components';
7 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/trimble-oss/modus-angular-components/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "../../../tsconfig.json",
5 | "compilerOptions": {
6 | "outDir": "../../../out-tsc/lib",
7 | "declaration": true,
8 | "declarationMap": true,
9 | "inlineSources": true,
10 | "types": []
11 | },
12 | "exclude": ["**/*.spec.ts"]
13 | }
14 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/trimble-oss/modus-angular-components/tsconfig.lib.prod.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "./tsconfig.lib.json",
5 | "compilerOptions": {
6 | "declarationMap": false
7 | },
8 | "angularCompilerOptions": {
9 | "compilationMode": "partial"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/angular-workspace/ng18/projects/trimble-oss/modus-angular-components/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "../../../tsconfig.json",
5 | "compilerOptions": {
6 | "outDir": "../../../out-tsc/spec",
7 | "types": ["jasmine"]
8 | },
9 | "include": ["**/*.spec.ts", "**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/README.md:
--------------------------------------------------------------------------------
1 | # AngularWorkspace
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 19.2.11.
4 |
5 | This Angular Project is a utility wrapper to help build the `@trimble-oss/modus-angular-components` library.
6 |
7 | All components in this repository are auto generated by the StencilJS library.
8 |
9 | To build a local copy of these components you can run:
10 |
11 | `npx ng run @trimble-oss/modus-angular-components:build:production`
12 |
13 | This can be consumed in a local angular application using npm link
14 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/test-harness/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/angular-workspace/ng19/projects/test-harness/public/favicon.ico
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/test-harness/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | Modus Angular Components Test Harness
2 |
3 |
8 |
9 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/test-harness/src/app/app.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/trimble-oss/modus-web-components/cd2f784712a9c90ca63cc851b0087f00c4a1ae11/angular-workspace/ng19/projects/test-harness/src/app/app.component.scss
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/test-harness/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ModusAngularComponentsModule } from '../../../trimble-oss/modus-angular-components/src/lib/modus-angular-components.module';
3 |
4 | @Component({
5 | selector: 'app-root',
6 | imports: [ModusAngularComponentsModule],
7 | templateUrl: './app.component.html',
8 | styleUrl: './app.component.scss'
9 | })
10 | export class AppComponent {
11 | title = 'test-harness';
12 |
13 | onValueChange() {
14 | console.log('Value Changed');
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/test-harness/src/app/app.config.ts:
--------------------------------------------------------------------------------
1 | import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
2 | import { provideRouter } from '@angular/router';
3 |
4 | import { routes } from './app.routes';
5 |
6 | export const appConfig: ApplicationConfig = {
7 | providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
8 | };
9 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/test-harness/src/app/app.routes.ts:
--------------------------------------------------------------------------------
1 | import { Routes } from '@angular/router';
2 |
3 | export const routes: Routes = [];
4 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/test-harness/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | TestHarness
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/test-harness/src/main.ts:
--------------------------------------------------------------------------------
1 | import { bootstrapApplication } from '@angular/platform-browser';
2 | import { defineCustomElements } from '@trimble-oss/modus-web-components/loader';
3 | import { AppComponent } from './app/app.component';
4 | import { appConfig } from './app/app.config';
5 |
6 | bootstrapApplication(AppComponent, appConfig)
7 | .catch((err) => console.error(err));
8 |
9 | defineCustomElements();
10 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/test-harness/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/test-harness/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "../../tsconfig.json",
5 | "compilerOptions": {
6 | "outDir": "../../out-tsc/app",
7 | "types": []
8 | },
9 | "files": ["src/main.ts"],
10 | "include": ["src/**/*.d.ts"]
11 | }
12 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/test-harness/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "../../tsconfig.json",
5 | "compilerOptions": {
6 | "outDir": "../../out-tsc/spec",
7 | "types": ["jasmine"]
8 | },
9 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/trimble-oss/modus-angular-components/.npmrc:
--------------------------------------------------------------------------------
1 | lockfile-version = "3"
2 | registry = https://registry.npmjs.org/
3 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/trimble-oss/modus-angular-components/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
3 | "dest": "../../../dist/trimble-oss/modus-angular-components",
4 | "lib": {
5 | "entryFile": "src/public-api.ts"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/trimble-oss/modus-angular-components/src/lib/modus-angular-components.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { DIRECTIVES } from './stencil-generated';
3 |
4 | @NgModule({
5 | imports: [...DIRECTIVES],
6 | exports: [...DIRECTIVES],
7 | })
8 | export class ModusAngularComponentsModule { }
9 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/trimble-oss/modus-angular-components/src/public-api.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Public API Surface of modus-angular-components
3 | */
4 |
5 | export * from './lib/modus-angular-components.module';
6 | export * from './lib/stencil-generated/components';
7 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/trimble-oss/modus-angular-components/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "../../../tsconfig.json",
5 | "compilerOptions": {
6 | "outDir": "../../../out-tsc/lib",
7 | "declaration": true,
8 | "declarationMap": true,
9 | "inlineSources": true,
10 | "types": []
11 | },
12 | "exclude": ["**/*.spec.ts"]
13 | }
14 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/trimble-oss/modus-angular-components/tsconfig.lib.prod.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "./tsconfig.lib.json",
5 | "compilerOptions": {
6 | "declarationMap": false
7 | },
8 | "angularCompilerOptions": {
9 | "compilationMode": "partial"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/angular-workspace/ng19/projects/trimble-oss/modus-angular-components/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "../../../tsconfig.json",
5 | "compilerOptions": {
6 | "outDir": "../../../out-tsc/spec",
7 | "types": ["jasmine"]
8 | },
9 | "include": ["**/*.spec.ts", "**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/select-value-accessor.ts:
--------------------------------------------------------------------------------
1 | import { Directive, ElementRef } from '@angular/core';
2 | import { NG_VALUE_ACCESSOR } from '@angular/forms';
3 |
4 | import { ValueAccessor } from './value-accessor';
5 |
6 | @Directive({
7 | /* tslint:disable-next-line:directive-selector */
8 | selector: 'modus-select',
9 | host: {
10 | '(valueChange)': 'handleChangeEvent($event.target.value)'
11 | },
12 | providers: [
13 | {
14 | provide: NG_VALUE_ACCESSOR,
15 | useExisting: SelectValueAccessor,
16 | multi: true
17 | }
18 | ]
19 | })
20 | export class SelectValueAccessor extends ValueAccessor {
21 | constructor(el: ElementRef) {
22 | super(el);
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/text-value-accessor.ts:
--------------------------------------------------------------------------------
1 | import { Directive, ElementRef } from '@angular/core';
2 | import { NG_VALUE_ACCESSOR } from '@angular/forms';
3 |
4 | import { ValueAccessor } from './value-accessor';
5 |
6 | @Directive({
7 | /* tslint:disable-next-line:directive-selector */
8 | selector: 'modus-autocomplete, modus-number-input, modus-text-input',
9 | host: {
10 | '(valueChange)': 'handleChangeEvent($event.target.value)'
11 | },
12 | providers: [
13 | {
14 | provide: NG_VALUE_ACCESSOR,
15 | useExisting: TextValueAccessor,
16 | multi: true
17 | }
18 | ]
19 | })
20 | export class TextValueAccessor extends ValueAccessor {
21 | constructor(el: ElementRef) {
22 | super(el);
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/.npmrc:
--------------------------------------------------------------------------------
1 | lockfile-version = "2"
2 | registry = https://registry.npmjs.org/
3 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/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-ng15/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 | themeToggleClick(e: any) {
12 | const theme = window.document?.firstElementChild?.getAttribute('data-mwc-theme') === 'dark' ? 'light' : 'dark';
13 | window.document?.firstElementChild?.setAttribute('data-mwc-theme', theme);
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/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-ng15/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/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-ng15/src/examples/modus-breadcrumb-examples/modus-breadcrumb-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-breadcrumb-examples',
5 | template: `
6 | Breadcrumbs
7 |
8 | `,
9 | })
10 | export class ModusBreadcrumbExamplesComponent implements OnInit {
11 | constructor() {}
12 |
13 | ngOnInit(): void {}
14 |
15 | crumbs = [
16 | { id: '1', display: 'Crumb 1' },
17 | { id: '2', display: 'Crumb 2' },
18 | { id: '3', display: 'Crumb 3' },
19 | { id: '4', display: 'Crumb 4' },
20 | ];
21 | }
22 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-card-examples/modus-card-examples.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ModusCardExamplesComponent } from './modus-card-examples.component';
4 |
5 | describe('ModusCardExamplesComponent', () => {
6 | let component: ModusCardExamplesComponent;
7 | let fixture: ComponentFixture;
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 |
14 |
15 | `,
16 | })
17 | export class ModusCardExamplesComponent implements OnInit {
18 | constructor() {}
19 |
20 | ngOnInit(): void {}
21 | }
22 |
--------------------------------------------------------------------------------
/angular-workspace/test-ng15/src/examples/modus-checkbox-examples/modus-checkbox-examples.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'modus-checkbox-examples',
5 | template: `
6 | 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 |
14 |
15 | >
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v17/src/examples/ModusCheckboxExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusCheckbox } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusCheckboxExamples() {
4 | return (
5 | <>
6 | 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 |
14 |
15 | >
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v18/src/examples/ModusCheckboxExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusCheckbox } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusCheckboxExamples() {
4 | return (
5 | <>
6 | 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 |
14 |
15 | >
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/react-workspace/test-react-v19/src/examples/ModusCheckboxExamples.tsx:
--------------------------------------------------------------------------------
1 | import { ModusCheckbox } from '@trimble-oss/modus-react-components';
2 |
3 | export default function ModusCheckboxExamples() {
4 | return (
5 | <>
6 | 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 |
--------------------------------------------------------------------------------