├── .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 | 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 |
22 | 23 |
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 |
event.preventDefault()}> 17 | 18 |
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 | props.onClick(event) : null} 11 | viewBox="0 0 24 24" 12 | fill={props.color ?? 'currentColor'}> 13 | 14 | 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 | props.onClick(event) : null} 11 | viewBox="0 0 24 24" 12 | fill={props.color ?? 'currentColor'}> 13 | 14 | 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 | 15 | 16 | 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 | 16 | {' '} 17 | 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 | 13 | 14 | 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 | 13 | 14 | 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 | props.onClick()} 11 | viewBox="0 0 24 24" 12 | fill={props.color ?? 'currentColor'}> 13 | 14 | 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 | props.onClick() : null} 11 | viewBox="0 0 24 24" 12 | fill="none"> 13 | 19 | 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 | 13 | 14 | 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 | 13 | 14 | 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 | 13 | 14 | 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 | 13 | 14 | 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 | props.onClick() : null} 12 | fill={props.color ?? 'currentColor'}> 13 | 18 | 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 | props.onClick(event) : null} 11 | viewBox="0 0 24 24" 12 | fill={props.color ?? 'currentColor'}> 13 | 14 | 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 | 13 | 14 | 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 | props.onClick(event) : null} 11 | viewBox="0 0 24 24" 12 | fill={props.color ?? 'currentColor'}> 13 | 14 | 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 | 13 | 14 | 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 | props.onClick(event) : null} 11 | viewBox="0 0 24 24" 12 | fill={props.color ?? 'currentColor'}> 13 | 14 | 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 | 13 | 14 | 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 | props.onClick()} 11 | viewBox="0 0 24 24" 12 | fill={props.color ?? 'currentColor'}> 13 | 14 | 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 | props.onClick() : null} 12 | viewBox="0 0 24 24"> 13 | 14 | 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 | 12 | 13 | 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 | GitHub -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------